@zhsz/cool-design-dv/es/packages/dv-adorn10/Adorn10.vue.mjs

import { defineComponent, getCurrentInstance, useAttrs, inject, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, createElementVNode } from "vue";
import Box from "../dv-box/index.mjs";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
import { useAdorn } from "../../hooks/useAdorn.mjs";
import { baseConfig } from "../../hooks/useConfig.mjs";
import { uid } from "../../utils/util.mjs";
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["stroke", "points"];
const _hoisted_3 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_4 = ["id", "values", "begin"];
const _hoisted_5 = ["values", "begin"];
const _hoisted_6 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_7 = ["id", "values", "begin"];
const _hoisted_8 = ["values", "begin"];
const _hoisted_9 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_10 = ["id", "values", "begin"];
const _hoisted_11 = ["values", "begin"];
const _hoisted_12 = ["cy", "fill"];
const _hoisted_13 = ["id", "values", "begin"];
const _hoisted_14 = ["cx", "cy", "fill"];
const _hoisted_15 = ["id", "values", "begin"];
const _hoisted_16 = ["values", "begin"];
const _hoisted_17 = ["cx", "cy", "fill"];
const _hoisted_18 = ["id", "values", "begin"];
const _hoisted_19 = ["values", "begin"];
const _hoisted_20 = ["cx", "cy", "fill"];
const _hoisted_21 = ["id", "values", "begin"];
const _hoisted_22 = ["values", "begin"];
const __default__ = defineComponent({
  name: "DvAdorn10"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    duration: {
      type: Number,
      default: 3
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const props = __props;
    const _uid = uid();
    const instance = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
    const emits = __emit;
    const $attrs = useAttrs();
    const page = inject(dvPageSymbols, 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
    );
    onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    onBeforeUnmount(() => {
      removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Box), mergeProps({
        class: ["my-dv-adorn-10", unref(classes)],
        style: unref(styles),
        "default-width": "600px",
        "default-height": "20px"
      }, unref($attrs)), {
        default: withCtx(() => [
          (openBlock(), createElementBlock("svg", {
            width: `${unref(width)}px`,
            height: `${unref(height)}px`
          }, [
            createElementVNode("polyline", {
              stroke: unref(dark),
              "stroke-width": "2",
              points: `0, ${unref(height) / 2} ${unref(width)}, ${unref(height) / 2}`
            }, null, 8, _hoisted_2),
            createElementVNode("polyline", {
              stroke: unref(light),
              "stroke-width": "2",
              points: `5, ${unref(height) / 2} ${unref(width) * 0.2 - 3}, ${unref(height) / 2}`,
              "stroke-dasharray": `0, ${unref(width) * 0.2}`,
              fill: "freeze"
            }, [
              createElementVNode("animate", {
                id: `a2${unref(_uid)}`,
                attributeName: "stroke-dasharray",
                values: `0, ${unref(width) * 0.2};${unref(width) * 0.2}, 0;`,
                dur: "3s",
                begin: `a1${unref(_uid)}.end`,
                fill: "freeze"
              }, null, 8, _hoisted_4),
              createElementVNode("animate", {
                attributeName: "stroke-dasharray",
                values: `${unref(width) * 0.2}, 0;0, ${unref(width) * 0.2}`,
                dur: "0.01s",
                begin: `a7${unref(_uid)}.end`,
                fill: "freeze"
              }, null, 8, _hoisted_5)
            ], 8, _hoisted_3),
            createElementVNode("polyline", {
              stroke: unref(light),
              "stroke-width": "2",
              points: `${unref(width) * 0.2 + 3}, ${unref(height) / 2} ${unref(width) * 0.8 - 3}, ${unref(height) / 2}`,
              "stroke-dasharray": `0, ${unref(width) * 0.6}`
            }, [
              createElementVNode("animate", {
                id: `a4${unref(_uid)}`,
                attributeName: "stroke-dasharray",
                values: `0, ${unref(width) * 0.6};${unref(width) * 0.6}, 0`,
                dur: "3s",
                begin: `a3${unref(_uid)}.end + 1s`,
                fill: "freeze"
              }, null, 8, _hoisted_7),
              createElementVNode("animate", {
                attributeName: "stroke-dasharray",
                values: `${unref(width) * 0.6}, 0;0, ${unref(width) * 0.6}`,
                dur: "0.01s",
                begin: `a7${unref(_uid)}.end`,
                fill: "freeze"
              }, null, 8, _hoisted_8)
            ], 8, _hoisted_6),
            createElementVNode("polyline", {
              stroke: unref(light),
              "stroke-width": "2",
              points: `${unref(width) * 0.8 + 3}, ${unref(height) / 2} ${unref(width) - 5}, ${unref(height) / 2}`,
              "stroke-dasharray": `0, ${unref(width) * 0.2}`
            }, [
              createElementVNode("animate", {
                id: `a6${unref(_uid)}`,
                attributeName: "stroke-dasharray",
                values: `0, ${unref(width) * 0.2};${unref(width) * 0.2}, 0`,
                dur: "3s",
                begin: `a5${unref(_uid)}.end + 1s`,
                fill: "freeze"
              }, null, 8, _hoisted_10),
              createElementVNode("animate", {
                attributeName: "stroke-dasharray",
                values: `${unref(width) * 0.2}, 0;0, ${unref(width) * 0.3}`,
                dur: "0.01s",
                begin: `a7${unref(_uid)}.end`,
                fill: "freeze"
              }, null, 8, _hoisted_11)
            ], 8, _hoisted_9),
            createElementVNode("circle", {
              cx: "2",
              cy: unref(height) / 2,
              r: "2",
              fill: unref(dark)
            }, [
              createElementVNode("animate", {
                id: `a1${unref(_uid)}`,
                attributeName: "fill",
                values: `${unref(dark)};${unref(light)}`,
                begin: `0s;a7${unref(_uid)}.end`,
                dur: "0.3s",
                fill: "freeze"
              }, null, 8, _hoisted_13)
            ], 8, _hoisted_12),
            createElementVNode("circle", {
              cx: unref(width) * 0.2,
              cy: unref(height) / 2,
              r: "2",
              fill: unref(dark)
            }, [
              createElementVNode("animate", {
                id: `a3${unref(_uid)}`,
                attributeName: "fill",
                values: `${unref(dark)};${unref(light)}`,
                begin: `a2${unref(_uid)}.end`,
                dur: "0.3s",
                fill: "freeze"
              }, null, 8, _hoisted_15),
              createElementVNode("animate", {
                attributeName: "fill",
                values: `${unref(dark)};${unref(light)}`,
                dur: "0.01s",
                begin: `a2${unref(_uid)}.end`,
                fill: "freeze"
              }, null, 8, _hoisted_16)
            ], 8, _hoisted_14),
            createElementVNode("circle", {
              cx: unref(width) * 0.8,
              cy: unref(height) / 2,
              r: "2",
              fill: unref(dark)
            }, [
              createElementVNode("animate", {
                id: `a5${unref(_uid)}`,
                attributeName: "fill",
                values: `${unref(dark)};${unref(light)}`,
                begin: `a4${unref(_uid)}.end`,
                dur: "0.3s",
                fill: "freeze"
              }, null, 8, _hoisted_18),
              createElementVNode("animate", {
                attributeName: "fill",
                values: `${unref(dark)};${unref(light)}`,
                dur: "0.01s",
                begin: `a7${unref(_uid)}.end`,
                fill: "freeze"
              }, null, 8, _hoisted_19)
            ], 8, _hoisted_17),
            createElementVNode("circle", {
              cx: unref(width) - 2,
              cy: unref(height) / 2,
              r: "2",
              fill: unref(dark)
            }, [
              createElementVNode("animate", {
                id: `a7${unref(_uid)}`,
                attributeName: "fill",
                values: `${unref(dark)};${unref(light)}`,
                begin: `a6${unref(_uid)}.end`,
                dur: "0.3s",
                fill: "freeze"
              }, null, 8, _hoisted_21),
              createElementVNode("animate", {
                attributeName: "fill",
                values: `${unref(dark)};${unref(light)}`,
                dur: "0.01s",
                begin: `a7${unref(_uid)}.end`,
                fill: "freeze"
              }, null, 8, _hoisted_22)
            ], 8, _hoisted_20)
          ], 8, _hoisted_1))
        ]),
        _: 1
      }, 16, ["class", "style"]);
    };
  }
});
export {
  _sfc_main as default
};