@zhsz/cool-design-dv/es/packages/dv-adorn2/Adorn2.vue.mjs

import { defineComponent, ref, getCurrentInstance, useAttrs, inject, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, 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 = ["x", "y", "width", "height", "fill"];
const _hoisted_3 = ["attributeName", "to", "dur"];
const _hoisted_4 = ["x", "y", "width", "height", "fill"];
const _hoisted_5 = ["attributeName", "to", "dur"];
const __default__ = defineComponent({
  name: "DvAdorn2"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    duration: {
      type: Number,
      default: 3
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    },
    // 线条的宽度
    size: {
      type: Number,
      default: 1
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const props = __props;
    const w = ref(0);
    const h = ref(0);
    const x = ref(0);
    const y = ref(0);
    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
    );
    function setData() {
      if (props.reverse) {
        w.value = props.size;
        h.value = height.value;
        x.value = (width.value - props.size) / 2;
        y.value = 0;
      } else {
        w.value = width.value;
        h.value = props.size;
        x.value = 0;
        y.value = (height.value - props.size) / 2;
      }
    }
    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-2", unref(classes)],
        style: unref(styles),
        "default-width": "300px",
        "default-height": "20px"
      }, unref($attrs)), {
        default: withCtx(() => [
          (openBlock(), createElementBlock("svg", {
            width: `${unref(width)}px`,
            height: `${unref(height)}px`
          }, [
            createElementVNode("rect", {
              x: x.value,
              y: y.value,
              width: w.value,
              height: h.value,
              fill: unref(dark)
            }, [
              createElementVNode("animate", {
                attributeName: __props.reverse ? "height" : "width",
                from: "0",
                to: __props.reverse ? unref(height) : unref(width),
                dur: `${__props.duration}s`,
                calcMode: "spline",
                keyTimes: "0;1",
                keySplines: ".42,0,.58,1",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_3)
            ], 8, _hoisted_2),
            createElementVNode("rect", {
              x: x.value,
              y: y.value,
              width: __props.size,
              height: __props.size,
              fill: unref(light)
            }, [
              createElementVNode("animate", {
                attributeName: __props.reverse ? "y" : "x",
                from: "0",
                to: __props.reverse ? unref(height) : unref(width),
                dur: `${__props.duration}s`,
                calcMode: "spline",
                keyTimes: "0;1",
                keySplines: "0.42,0,0.58,1",
                repeatCount: "indefinite"
              }, null, 8, _hoisted_5)
            ], 8, _hoisted_4)
          ], 8, _hoisted_1))
        ]),
        _: 1
      }, 16, ["class", "style"]);
    };
  }
});
export {
  _sfc_main as default
};