@zhsz/cool-design-dv/lib/packages/dv-adorn4/Adorn4.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 useConfig = require("../../hooks/useConfig.js");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["stroke", "points"];
const _hoisted_3 = ["stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "points"];
const __default__ = vue.defineComponent({
  name: "DvAdorn4"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    duration: {
      type: Number,
      default: 3
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    },
    // 线条的宽度
    size: {
      type: Number,
      default: 3
    },
    dashArray: {
      type: Array,
      default() {
        return [20, 80];
      }
    },
    dashOffset: {
      type: Number,
      default: -30
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const props = __props;
    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, 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 points = vue.computed(() => {
      return props.reverse ? `0, ${height.value / 2} ${width.value}, ${height.value / 2}` : `${width.value / 2}, 0 ${width.value / 2}, ${height.value}`;
    });
    const svgClass = vue.computed(() => {
      return props.reverse ? "reverse" : "normal";
    });
    const svgStyle = vue.computed(() => {
      return {
        "animation-duration": `${props.duration}s`
      };
    });
    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-4", vue.unref(classes)],
        style: vue.unref(styles),
        "default-width": "300px",
        "default-height": "300px"
      }, vue.unref($attrs)), {
        default: vue.withCtx(() => [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(["my-dv-adorn-4__container", svgClass.value]),
            style: vue.normalizeStyle(svgStyle.value)
          }, [
            (vue.openBlock(), vue.createElementBlock("svg", {
              width: `${vue.unref(width)}px`,
              height: `${vue.unref(height)}px`
            }, [
              vue.createElementVNode("polyline", {
                stroke: vue.unref(dark),
                points: points.value
              }, null, 8, _hoisted_2),
              vue.createElementVNode("polyline", {
                class: "bold-line",
                stroke: vue.unref(light),
                "stroke-width": __props.size,
                "stroke-dasharray": __props.dashArray.join(","),
                "stroke-dashoffset": __props.dashOffset,
                points: points.value
              }, null, 8, _hoisted_3)
            ], 8, _hoisted_1))
          ], 6)
        ]),
        _: 1
      }, 16, ["class", "style"]);
    };
  }
});
exports.default = _sfc_main;