@zhsz/cool-design-dv/lib/packages/dv-border7/Border7.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$2 = require("../dv-content/index.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const useBorder = require("../../hooks/useBorder.js");
const useConfig = require("../../hooks/useConfig.js");
const util = require("../../utils/util.js");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["id", "d"];
const _hoisted_3 = ["id"];
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("stop", {
  offset: "0%",
  "stop-color": "#fff",
  "stop-opacity": "1"
}, null, -1);
const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("stop", {
  offset: "100%",
  "stop-color": "#fff",
  "stop-opacity": "0"
}, null, -1);
const _hoisted_6 = [
  _hoisted_4,
  _hoisted_5
];
const _hoisted_7 = ["id"];
const _hoisted_8 = ["fill"];
const _hoisted_9 = ["dur", "path"];
const _hoisted_10 = ["fill", "points"];
const _hoisted_11 = ["stroke", "xlink:href"];
const _hoisted_12 = ["stroke", "xlink:href", "mask"];
const _hoisted_13 = ["from", "to", "dur"];
const __default__ = vue.defineComponent({
  name: "DvBorder7"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    fill: {
      type: String,
      default() {
        return "transparent";
      }
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    },
    // 动画持续时间，单位秒
    duration: {
      type: Number,
      default: 4
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
    const emits = __emit;
    const $attrs = vue.useAttrs();
    const props = __props;
    const _uid = util.uid();
    const page = vue.inject(index.dvPageSymbols, null);
    const fill = vue.computed(() => {
      var _a2, _b2;
      return props.fill || ((_b2 = (_a2 = page == null ? void 0 : page.settings) == null ? void 0 : _a2.value) == null ? void 0 : _b2.fill);
    });
    const { resize, classes, styles, width, height, dark, light } = useBorder.useBorder(
      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 length = vue.computed(() => {
      return (width.value + height.value - 5) * 2;
    });
    const boxStyles = vue.computed(() => {
      return {
        backgroundColor: fill.value
      };
    });
    const path = vue.computed(() => {
      if (props.reverse)
        return `M 2.5, 2.5 L 2.5, ${height.value - 2.5} L ${width.value - 2.5}, ${height.value - 2.5} L ${width.value - 2.5}, 2.5 L 2.5, 2.5`;
      return `M2.5, 2.5 L${width.value - 2.5}, 2.5 L${width.value - 2.5}, ${height.value - 2.5} L2.5, ${height.value - 2.5} L2.5, 2.5`;
    });
    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-border-7", vue.unref(classes)],
        "default-width": "400px",
        "default-height": "300px",
        padding: "0"
      }, { ...vue.unref($attrs), ...props }, { style: boxStyles.value }), {
        default: vue.withCtx(() => [
          (vue.openBlock(), vue.createElementBlock("svg", {
            class: "my-dv-border__svg",
            width: vue.unref(width),
            height: vue.unref(height),
            style: vue.normalizeStyle(vue.unref(styles))
          }, [
            vue.createElementVNode("defs", null, [
              vue.createElementVNode("path", {
                id: `path-${vue.unref(_uid)}`,
                d: path.value,
                fill: "transparent"
              }, null, 8, _hoisted_2),
              vue.createElementVNode("radialGradient", {
                id: `gradient-${vue.unref(_uid)}`,
                cx: "50%",
                cy: "50%",
                r: "50%"
              }, _hoisted_6, 8, _hoisted_3),
              vue.createElementVNode("mask", {
                id: `mask-${vue.unref(_uid)}`
              }, [
                vue.createElementVNode("circle", {
                  cx: "0",
                  cy: "0",
                  r: "150",
                  fill: `url(#gradient-${vue.unref(_uid)})`
                }, [
                  vue.createElementVNode("animateMotion", {
                    dur: `${__props.duration}s`,
                    path: path.value,
                    rotate: "auto",
                    repeatCount: "indefinite"
                  }, null, 8, _hoisted_9)
                ], 8, _hoisted_8)
              ], 8, _hoisted_7)
            ]),
            vue.createElementVNode("polygon", {
              fill: fill.value,
              points: `5, 5 ${vue.unref(width) - 5}, 5 ${vue.unref(width) - 5} ${vue.unref(height) - 5} 5, ${vue.unref(height) - 5}`
            }, null, 8, _hoisted_10),
            vue.createElementVNode("use", {
              stroke: vue.unref(dark),
              "stroke-width": "1",
              "xlink:href": `#path-${vue.unref(_uid)}`
            }, null, 8, _hoisted_11),
            vue.createElementVNode("use", {
              stroke: vue.unref(light),
              "stroke-width": "3",
              "xlink:href": `#path-${vue.unref(_uid)}`,
              mask: `url(#mask-${vue.unref(_uid)})`
            }, [
              vue.createElementVNode("animate", {
                attributeName: "stroke-dasharray",
                from: `0, ${length.value}`,
                to: `${length.value}, 0`,
                dur: `${__props.duration}s`,
                repeatCount: "indefinite"
              }, null, 8, _hoisted_13)
            ], 8, _hoisted_12)
          ], 12, _hoisted_1)),
          vue.createVNode(vue.unref(index$2.default), {
            padding: vue.unref($attrs).padding
          }, {
            default: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["padding"])
        ]),
        _: 3
      }, 16, ["class", "style"]);
    };
  }
});
exports.default = _sfc_main;