@zhsz/cool-design-dv/es/packages/dv-border8/Border8.vue.mjs

import { defineComponent, getCurrentInstance, useAttrs, inject, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeStyle, createElementVNode, createVNode, renderSlot } from "vue";
import Box from "../dv-box/index.mjs";
import BoxContent from "../dv-content/index.mjs";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
import { useBorder } from "../../hooks/useBorder.mjs";
import { baseConfig } from "../../hooks/useConfig.mjs";
import { uid } from "../../utils/util.mjs";
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["id"];
const _hoisted_3 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "x1",
  values: "0%;100%;0%",
  dur: "10s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_4 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "x2",
  values: "100%;0%;100%",
  dur: "10s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_5 = ["stop-color"];
const _hoisted_6 = ["values"];
const _hoisted_7 = ["stop-color"];
const _hoisted_8 = ["values"];
const _hoisted_9 = ["id"];
const _hoisted_10 = ["points"];
const _hoisted_11 = ["points"];
const _hoisted_12 = ["points"];
const _hoisted_13 = ["points"];
const _hoisted_14 = ["points"];
const _hoisted_15 = ["points"];
const _hoisted_16 = ["points"];
const _hoisted_17 = ["points"];
const _hoisted_18 = ["points"];
const _hoisted_19 = ["fill", "points"];
const _hoisted_20 = ["width", "height", "fill", "mask"];
const __default__ = defineComponent({
  name: "DvBorder8"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    fill: {
      type: String,
      default() {
        return "transparent";
      }
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    }
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a, _b, _c;
    const instance = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
    const emits = __emit;
    const $attrs = useAttrs();
    const props = __props;
    const _uid = uid();
    const page = inject(dvPageSymbols, null);
    const fill = 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(
      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-border-8", unref(classes)],
        "default-width": "400px",
        "default-height": "300px",
        padding: "0"
      }, { ...unref($attrs), ...props }), {
        default: withCtx(() => [
          (openBlock(), createElementBlock("svg", {
            class: "my-dv-border__svg",
            width: unref(width),
            height: unref(height),
            style: normalizeStyle(unref(styles))
          }, [
            createElementVNode("defs", null, [
              createElementVNode("linearGradient", {
                id: `gradient-${unref(_uid)}`,
                x1: "0%",
                y1: "0%",
                x2: "100%",
                y2: "100%"
              }, [
                _hoisted_3,
                _hoisted_4,
                createElementVNode("stop", {
                  offset: "0%",
                  "stop-color": unref(light)
                }, [
                  createElementVNode("animate", {
                    attributeName: "stop-color",
                    values: `${unref(light)};${unref(dark)};${unref(light)}`,
                    dur: "10s",
                    begin: "0s",
                    repeatCount: "indefinite"
                  }, null, 8, _hoisted_6)
                ], 8, _hoisted_5),
                createElementVNode("stop", {
                  offset: "100%",
                  "stop-color": unref(dark)
                }, [
                  createElementVNode("animate", {
                    attributeName: "stop-color",
                    values: `${unref(dark)};${unref(light)};${unref(dark)}`,
                    dur: "10s",
                    begin: "0s",
                    repeatCount: "indefinite"
                  }, null, 8, _hoisted_8)
                ], 8, _hoisted_7)
              ], 8, _hoisted_2),
              createElementVNode("mask", {
                id: `mask-${unref(_uid)}`
              }, [
                createElementVNode("polyline", {
                  stroke: "#fff",
                  "stroke-width": "3",
                  fill: "transparent",
                  points: `8, ${unref(height) * 0.4} 8, 3, ${unref(width) * 0.4 + 7}, 3`
                }, null, 8, _hoisted_10),
                createElementVNode("polyline", {
                  fill: "#fff",
                  points: `8, ${unref(height) * 0.15} 8, 3, ${unref(width) * 0.1 + 7}, 3
              ${unref(width) * 0.1}, 8 14, 8 14, ${unref(height) * 0.15 - 7}
            `
                }, null, 8, _hoisted_11),
                createElementVNode("polyline", {
                  stroke: "#fff",
                  "stroke-width": "3",
                  fill: "transparent",
                  points: `${unref(width) * 0.5}, 3 ${unref(width) - 3}, 3, ${unref(width) - 3}, ${unref(height) * 0.25}`
                }, null, 8, _hoisted_12),
                createElementVNode("polyline", {
                  fill: "#fff",
                  points: `
              ${unref(width) * 0.52}, 3 ${unref(width) * 0.58}, 3
              ${unref(width) * 0.58 - 7}, 9 ${unref(width) * 0.52 + 7}, 9
            `
                }, null, 8, _hoisted_13),
                createElementVNode("polyline", {
                  fill: "#fff",
                  points: `
              ${unref(width) * 0.9}, 3 ${unref(width) - 3}, 3 ${unref(width) - 3}, ${unref(height) * 0.1}
              ${unref(width) - 9}, ${unref(height) * 0.1 - 7} ${unref(width) - 9}, 9 ${unref(width) * 0.9 + 7}, 9
            `
                }, null, 8, _hoisted_14),
                createElementVNode("polyline", {
                  stroke: "#fff",
                  "stroke-width": "3",
                  fill: "transparent",
                  points: `8, ${unref(height) * 0.5} 8, ${unref(height) - 3} ${unref(width) * 0.3 + 7}, ${unref(height) - 3}`
                }, null, 8, _hoisted_15),
                createElementVNode("polyline", {
                  fill: "#fff",
                  points: `
              8, ${unref(height) * 0.55} 8, ${unref(height) * 0.7}
              2, ${unref(height) * 0.7 - 7} 2, ${unref(height) * 0.55 + 7}
            `
                }, null, 8, _hoisted_16),
                createElementVNode("polyline", {
                  stroke: "#fff",
                  "stroke-width": "3",
                  fill: "transparent",
                  points: `${unref(width) * 0.35}, ${unref(height) - 3} ${unref(width) - 3}, ${unref(height) - 3} ${unref(width) - 3}, ${unref(height) * 0.35}`
                }, null, 8, _hoisted_17),
                createElementVNode("polyline", {
                  fill: "#fff",
                  points: `
              ${unref(width) * 0.92}, ${unref(height) - 3} ${unref(width) - 3}, ${unref(height) - 3} ${unref(width) - 3}, ${unref(height) * 0.8}
              ${unref(width) - 9}, ${unref(height) * 0.8 + 7} ${unref(width) - 9}, ${unref(height) - 9} ${unref(width) * 0.92 + 7}, ${unref(height) - 9}
            `
                }, null, 8, _hoisted_18)
              ], 8, _hoisted_9)
            ]),
            createElementVNode("polygon", {
              fill: fill.value,
              points: `
        15, 9 ${unref(width) * 0.1 + 1}, 9 ${unref(width) * 0.1 + 4}, 6 ${unref(width) * 0.52 + 2}, 6
        ${unref(width) * 0.52 + 6}, 10 ${unref(width) * 0.58 - 7}, 10 ${unref(width) * 0.58 - 2}, 6
        ${unref(width) * 0.9 + 2}, 6 ${unref(width) * 0.9 + 6}, 10 ${unref(width) - 10}, 10 ${unref(width) - 10}, ${unref(height) * 0.1 - 6}
        ${unref(width) - 6}, ${unref(height) * 0.1 - 1} ${unref(width) - 6}, ${unref(height) * 0.8 + 1} ${unref(width) - 10}, ${unref(height) * 0.8 + 6}
        ${unref(width) - 10}, ${unref(height) - 10} ${unref(width) * 0.92 + 7}, ${unref(height) - 10}  ${unref(width) * 0.92 + 2}, ${unref(height) - 6}
        11, ${unref(height) - 6} 11, ${unref(height) * 0.15 - 2} 15, ${unref(height) * 0.15 - 7}
      `
            }, null, 8, _hoisted_19),
            createElementVNode("rect", {
              x: "0",
              y: "0",
              width: unref(width),
              height: unref(height),
              fill: `url(#gradient-${unref(_uid)})`,
              mask: `url(#mask-${unref(_uid)})`
            }, null, 8, _hoisted_20)
          ], 12, _hoisted_1)),
          createVNode(unref(BoxContent), {
            padding: unref($attrs).padding
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["padding"])
        ]),
        _: 3
      }, 16, ["class"]);
    };
  }
});
export {
  _sfc_main as default
};