@zhsz/cool-design-dv/lib/packages/dv-adorn6/Adorn6.vue.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index$1 = require("../dv-box/index.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const util = require("../../utils/util.js");
const useAdorn = require("../../hooks/useAdorn.js");
const useConfig = require("../../hooks/useConfig.js");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fill", "x", "y", "width", "height"];
const _hoisted_3 = ["values", "dur"];
const _hoisted_4 = ["values", "dur"];
const __default__ = vue.defineComponent({
  name: "DvAdorn6"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    duration: {
      type: Number,
      default: 3
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 8
    },
    gap: {
      type: Number,
      default: 2
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const props = __props;
    const points = vue.ref([]);
    const heights = vue.ref([]);
    const minHeights = vue.ref([]);
    const randoms = vue.ref([]);
    const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
    const emits = __emit;
    const $attrs = vue.useAttrs();
    const page = vue.inject(index.dvPageSymbols, null);
    const mitt = vue.inject(index.mittSymbol, null);
    const { resize, classes, styles, width, height, dark, light } = useAdorn.useAdorn(
      emits,
      ((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? useConfig.baseConfig.color,
      props,
      page
    );
    const columns = vue.computed(() => {
      return Math.floor(width.value / (props.size + props.gap));
    });
    function setData() {
      points.value = new Array(columns.value).fill(0).map((n, i) => i * (props.size + props.gap));
      const _heights = heights.value = new Array(columns.value).fill(0).map(
        (foo) => Math.random() > 0.8 ? util.random(0.7 * height.value, height.value) : util.random(0.2 * height.value, 0.5 * height.value)
      );
      minHeights.value = new Array(columns.value).fill(0).map((foo, i) => _heights[i] * Math.random());
      randoms.value = new Array(columns.value).fill(0).map((foo) => Math.random() + 1.5);
    }
    vue.onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      setData();
      resizeEvent.addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
      if (mitt) {
        mitt.on("resize", setData);
      }
    });
    vue.onBeforeUnmount(() => {
      resizeEvent.removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
      if (mitt) {
        mitt.off("resize", setData);
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
        class: ["my-dv-adorn-6", vue.unref(classes)],
        style: vue.unref(styles),
        "default-width": "300px",
        "default-height": "60px"
      }, vue.unref($attrs)), {
        default: vue.withCtx(() => [
          (vue.openBlock(), vue.createElementBlock("svg", {
            width: `${vue.unref(width)}px`,
            height: `${vue.unref(height)}px`
          }, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(points.value, (x, i) => {
              return vue.openBlock(), vue.createElementBlock("rect", {
                key: i,
                fill: Math.random() > 0.5 ? vue.unref(light) : vue.unref(dark),
                x,
                y: (vue.unref(height) - heights.value[i]) / 2,
                width: __props.size,
                height: heights.value[i]
              }, [
                vue.createElementVNode("animate", {
                  attributeName: "y",
                  values: `${(vue.unref(height) - minHeights.value[i]) / 2};${(vue.unref(height) - heights.value[i]) / 2};${(vue.unref(height) - minHeights.value[i]) / 2}`,
                  dur: `${randoms.value[i]}s`,
                  keyTimes: "0;0.5;1",
                  calcMode: "spline",
                  keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
                  begin: "0s",
                  repeatCount: "indefinite"
                }, null, 8, _hoisted_3),
                vue.createElementVNode("animate", {
                  attributeName: "height",
                  values: `${minHeights.value[i]};${heights.value[i]};${minHeights.value[i]}`,
                  dur: `${randoms.value[i]}s`,
                  keyTimes: "0;0.5;1",
                  calcMode: "spline",
                  keySplines: "0.42,0,0.58,1;0.42,0,0.58,1",
                  begin: "0s",
                  repeatCount: "indefinite"
                }, null, 8, _hoisted_4)
              ], 8, _hoisted_2);
            }), 128))
          ], 8, _hoisted_1))
        ]),
        _: 1
      }, 16, ["class", "style"]);
    };
  }
});
exports.default = _sfc_main;