@zhsz/cool-design-dv/es/packages/dv-adorn1/Adorn1.vue.mjs

import { defineComponent, ref, getCurrentInstance, useAttrs, inject, computed, watch, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode } from "vue";
import Box from "../dv-box/index.mjs";
import { dvPageSymbols, mittSymbol } from "../../symbols/index.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
import { useAdorn } from "../../hooks/useAdorn.mjs";
import { baseConfig } from "../../hooks/useConfig.mjs";
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fill", "x", "y", "width", "height"];
const _hoisted_3 = ["values", "begin"];
const _hoisted_4 = ["fill", "x", "y", "width", "height"];
const _hoisted_5 = ["values"];
const _hoisted_6 = ["values"];
const _hoisted_7 = ["values"];
const _hoisted_8 = ["values"];
const _hoisted_9 = ["fill", "x", "y", "width", "height"];
const _hoisted_10 = ["values"];
const _hoisted_11 = ["values"];
const __default__ = defineComponent({
  name: "DvAdorn1"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    duration: {
      type: Number,
      default: 3
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 5
    },
    gap: {
      type: Number,
      default: 5
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const props = __props;
    const points = ref([]);
    const rect = ref([]);
    const instance = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
    const emits = __emit;
    const $attrs = useAttrs();
    const page = inject(dvPageSymbols, null);
    const mitt = inject(mittSymbol, null);
    const { resize, classes, styles, width, height, dark, light } = useAdorn(
      emits,
      ((_c = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.value) == null ? void 0 : _c.color) ?? baseConfig.color,
      props,
      page
    );
    const rows = computed(() => {
      return Math.floor(height.value / (props.size + props.gap));
    });
    const columns = computed(() => {
      return Math.floor(width.value / (props.size + props.gap));
    });
    const length = computed(() => {
      return width.value / 4;
    });
    const halfSize = computed(() => {
      return props.size / 2;
    });
    function createPoints() {
      const grid = props.gap + props.size;
      const points2 = new Array(rows.value).fill(0).map(
        (foo, i) => new Array(columns.value).fill(0).map((foo2, j) => [grid * j, grid * i])
      );
      return points2.reduce((all, item) => [...all, ...item], []);
    }
    function createRect(points2) {
      const mid = Math.floor(rows.value / 2);
      const rect1 = points2[mid * columns.value - 1];
      const rect2 = points2[mid * columns.value - 3];
      return [rect1, rect2];
    }
    function setData() {
      points.value = createPoints();
      rect.value = createRect(points.value);
    }
    watch(
      () => props,
      () => {
        setData();
      },
      {
        deep: true
      }
    );
    onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      setData();
      addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
      if (mitt) {
        mitt.on("resize", setData);
      }
    });
    onBeforeUnmount(() => {
      removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
      if (mitt) {
        mitt.off("resize", setData);
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Box), mergeProps({
        class: ["my-dv-adorn-1", unref(classes)],
        style: unref(styles),
        "default-width": "300px",
        "default-height": "50px"
      }, unref($attrs)), {
        default: withCtx(() => [
          (openBlock(), createElementBlock("svg", {
            width: `${unref(width)}px`,
            height: `${unref(height)}px`
          }, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(points.value, (point, i) => {
              return openBlock(), createElementBlock(Fragment, null, [
                Math.random() > 0.6 ? (openBlock(), createElementBlock("rect", {
                  key: i,
                  fill: unref(dark),
                  x: point[0],
                  y: point[1],
                  width: __props.size,
                  height: __props.size
                }, [
                  Math.random() > 0.6 ? (openBlock(), createElementBlock("animate", {
                    key: 0,
                    attributeName: "fill",
                    values: `${unref(dark)};transparent`,
                    dur: "1s",
                    begin: Math.random() * 2,
                    repeatCount: "indefinite"
                  }, null, 8, _hoisted_3)) : createCommentVNode("", true)
                ], 8, _hoisted_2)) : createCommentVNode("", true)
              ], 64);
            }), 256)),
            rect.value[0] ? (openBlock(), createElementBlock("rect", {
              key: 0,
              fill: unref(light),
              x: rect.value[0][0] + halfSize.value,
              y: rect.value[0][1] + halfSize.value,
              width: __props.size * 2,
              height: __props.size * 2
            }, [
              createElementVNode("animate", {
                attributeName: "width",
                values: `0;${__props.size * 2}`,
                dur: "2s",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_5),
              createElementVNode("animate", {
                attributeName: "height",
                values: `0;${__props.size * 2}`,
                dur: "2s",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_6),
              createElementVNode("animate", {
                attributeName: "x",
                values: `${rect.value[0][0] + halfSize.value};${rect.value[0][0] + halfSize.value - __props.size}`,
                dur: "2s",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_7),
              createElementVNode("animate", {
                attributeName: "y",
                values: `${rect.value[0][1] + halfSize.value};${rect.value[0][1] + halfSize.value - __props.size}`,
                dur: "2s",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_8)
            ], 8, _hoisted_4)) : createCommentVNode("", true),
            rect.value[1] ? (openBlock(), createElementBlock("rect", {
              key: 1,
              fill: unref(light),
              x: rect.value[1][0] + __props.size - length.value,
              y: rect.value[1][1] + halfSize.value - __props.size,
              width: length.value,
              height: __props.size * 2
            }, [
              createElementVNode("animate", {
                attributeName: "width",
                values: `0;${length.value};0`,
                dur: "2s",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_10),
              createElementVNode("animate", {
                attributeName: "x",
                values: `${rect.value[1][0] + __props.size};${rect.value[1][0] + __props.size - length.value};${rect.value[1][0] + __props.size}`,
                dur: "2s",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_11)
            ], 8, _hoisted_9)) : createCommentVNode("", true)
          ], 8, _hoisted_1))
        ]),
        _: 1
      }, 16, ["class", "style"]);
    };
  }
});
export {
  _sfc_main as default
};