@zhsz/cool-design-dv/lib/packages/dv-adorn9/Adorn9.vue.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("./style.css");
const index$1 = require("../dv-box/index.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const useAdorn = require("../../hooks/useAdorn.js");
const color = require("../../utils/color.js");
const useConfig = require("../../hooks/useConfig.js");
const util = require("../../utils/util.js");
const _hoisted_1 = ["id"];
const _hoisted_2 = ["stroke"];
const _hoisted_3 = ["dur"];
const _hoisted_4 = ["stroke"];
const _hoisted_5 = ["dur"];
const _hoisted_6 = ["stroke"];
const _hoisted_7 = ["xlink:href", "stroke", "fill"];
const _hoisted_8 = ["dur", "begin"];
const _hoisted_9 = ["stroke"];
const __default__ = vue.defineComponent({
  name: "DvAdorn9"
});
const _sfc_main = /* @__PURE__ */ vue.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 = util.uid();
    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 { resize, classes, styles, width, 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 svgScale = vue.computed(() => {
      return width.value / 100;
    });
    const svgStyles = vue.computed(() => {
      return {
        transform: `scale(${svgScale.value})`
      };
    });
    function fade(color$1, percent = 100) {
      const r = color.fade(color$1, percent);
      if (r === false) {
        return void 0;
      } else {
        return r;
      }
    }
    vue.onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      resizeEvent.addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    vue.onBeforeUnmount(() => {
      resizeEvent.removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
        class: ["my-dv-adorn-9", vue.unref(classes)],
        style: vue.unref(styles),
        "default-width": "100px",
        "default-height": "100px"
      }, vue.unref($attrs)), {
        default: vue.withCtx(() => [
          (vue.openBlock(), vue.createElementBlock("svg", {
            width: "100",
            height: "100",
            style: vue.normalizeStyle(svgStyles.value)
          }, [
            vue.createElementVNode("defs", null, [
              vue.createElementVNode("polygon", {
                id: `polygon${vue.unref(_uid)}`,
                points: "15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"
              }, null, 8, _hoisted_1)
            ]),
            vue.createElementVNode("circle", {
              cx: "50",
              cy: "50",
              r: "45",
              fill: "transparent",
              stroke: vue.unref(dark),
              "stroke-width": "10",
              "stroke-dasharray": "80, 100, 30, 100"
            }, [
              vue.createElementVNode("animateTransform", {
                attributeName: "transform",
                type: "rotate",
                values: "0 50 50;360 50 50",
                dur: `${__props.duration}s`,
                repeatCount: "indefinite"
              }, null, 8, _hoisted_3)
            ], 8, _hoisted_2),
            vue.createElementVNode("circle", {
              cx: "50",
              cy: "50",
              r: "45",
              fill: "transparent",
              stroke: vue.unref(light),
              "stroke-width": "6",
              "stroke-dasharray": "50, 66, 100, 66"
            }, [
              vue.createElementVNode("animateTransform", {
                attributeName: "transform",
                type: "rotate",
                values: "0 50 50;-360 50 50",
                dur: `${__props.duration}s`,
                repeatCount: "indefinite"
              }, null, 8, _hoisted_5)
            ], 8, _hoisted_4),
            vue.createElementVNode("circle", {
              cx: "50",
              cy: "50",
              r: "38",
              fill: "transparent",
              stroke: fade(vue.unref(dark), 30),
              "stroke-width": "1",
              "stroke-dasharray": "5, 1"
            }, null, 8, _hoisted_6),
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(new Array(20).fill(0), (foo, i) => {
              return vue.openBlock(), vue.createElementBlock("use", {
                key: i,
                "xlink:href": `#polygon${vue.unref(_uid)}`,
                stroke: vue.unref(dark),
                fill: Math.random() > 0.4 ? "transparent" : vue.unref(light)
              }, [
                vue.createElementVNode("animateTransform", {
                  attributeName: "transform",
                  type: "rotate",
                  values: "0 50 50;360 50 50",
                  dur: `${__props.duration}s`,
                  begin: `${i * __props.duration / 20}s`,
                  repeatCount: "indefinite"
                }, null, 8, _hoisted_8)
              ], 8, _hoisted_7);
            }), 128)),
            vue.createElementVNode("circle", {
              cx: "50",
              cy: "50",
              r: "26",
              fill: "transparent",
              stroke: fade(vue.unref(dark), 30),
              "stroke-width": "1",
              "stroke-dasharray": "5, 1"
            }, null, 8, _hoisted_9)
          ], 4)),
          vue.createElementVNode("div", {
            class: "my-dv-adorn-9__content",
            style: vue.normalizeStyle({ zoom: svgScale.value })
          }, [
            vue.renderSlot(_ctx.$slots, "default")
          ], 4)
        ]),
        _: 3
      }, 16, ["class", "style"]);
    };
  }
});
exports.default = _sfc_main;