@zhsz/cool-design-dv/es/packages/dv-border10/Border10.vue.mjs

import { defineComponent, getCurrentInstance, useAttrs, inject, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeStyle, createElementVNode, toDisplayString, createVNode, renderSlot } from "vue";
import "./style.css";
import { fade } from "../../utils/color.mjs";
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("feMorphology", {
  operator: "dilate",
  radius: "2",
  in: "SourceAlpha",
  result: "thicken"
}, null, -1);
const _hoisted_4 = /* @__PURE__ */ createElementVNode("feGaussianBlur", {
  in: "thicken",
  stdDeviation: "3",
  result: "blurred"
}, null, -1);
const _hoisted_5 = ["flood-color"];
const _hoisted_6 = /* @__PURE__ */ createElementVNode("feComposite", {
  in: "glowColor",
  in2: "blurred",
  operator: "in",
  result: "softGlowColored"
}, null, -1);
const _hoisted_7 = /* @__PURE__ */ createElementVNode("feMerge", null, [
  /* @__PURE__ */ createElementVNode("feMergeNode", { in: "softGlowColored" }),
  /* @__PURE__ */ createElementVNode("feMergeNode", { in: "SourceGraphic" })
], -1);
const _hoisted_8 = ["fill", "points"];
const _hoisted_9 = ["stroke", "filter", "points"];
const _hoisted_10 = ["stroke", "points"];
const _hoisted_11 = ["stroke", "points"];
const _hoisted_12 = ["stroke", "fill", "filter", "points"];
const _hoisted_13 = ["filter", "fill", "points"];
const _hoisted_14 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "opacity",
  values: "1;0.7;1",
  dur: "2s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_15 = [
  _hoisted_14
];
const _hoisted_16 = ["filter", "fill", "points"];
const _hoisted_17 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "opacity",
  values: "0.7;0.4;0.7",
  dur: "2s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_18 = [
  _hoisted_17
];
const _hoisted_19 = ["filter", "fill", "points"];
const _hoisted_20 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "opacity",
  values: "0.5;0.2;0.5",
  dur: "2s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_21 = [
  _hoisted_20
];
const _hoisted_22 = ["filter", "fill", "points"];
const _hoisted_23 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "opacity",
  values: "1;0.7;1",
  dur: "2s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_24 = [
  _hoisted_23
];
const _hoisted_25 = ["filter", "fill", "points"];
const _hoisted_26 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "opacity",
  values: "0.7;0.4;0.7",
  dur: "2s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_27 = [
  _hoisted_26
];
const _hoisted_28 = ["filter", "fill", "points"];
const _hoisted_29 = /* @__PURE__ */ createElementVNode("animate", {
  attributeName: "opacity",
  values: "0.5;0.2;0.5",
  dur: "2s",
  begin: "0s",
  repeatCount: "indefinite"
}, null, -1);
const _hoisted_30 = [
  _hoisted_29
];
const _hoisted_31 = ["x"];
const _hoisted_32 = ["fill", "filter", "points"];
const _hoisted_33 = ["fill", "filter", "points"];
const __default__ = defineComponent({
  name: "DvBorder5"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    fill: {
      type: String,
      default() {
        return "transparent";
      }
    },
    reverse: Boolean,
    opacity: {
      type: Number,
      default: 1
    },
    titleWidth: {
      type: Number,
      default: 250
    },
    title: {
      type: String,
      default: ""
    }
  },
  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
    );
    const fadeValue = computed(() => {
      const key = fade(light.value, 30);
      if (key === false) {
        return void 0;
      } else {
        return key;
      }
    });
    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-10", 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("filter", {
                id: `filter-${unref(_uid)}`,
                height: "150%",
                width: "150%",
                x: "-25%",
                y: "-25%"
              }, [
                _hoisted_3,
                _hoisted_4,
                createElementVNode("feFlood", {
                  "flood-color": unref(light),
                  result: "glowColor"
                }, null, 8, _hoisted_5),
                _hoisted_6,
                _hoisted_7
              ], 8, _hoisted_2)
            ]),
            createElementVNode("polygon", {
              fill: fill.value,
              points: `
        20, 32 ${unref(width) * 0.5 - __props.titleWidth / 2}, 32 ${unref(width) * 0.5 - __props.titleWidth / 2 + 20}, 53
        ${unref(width) * 0.5 + __props.titleWidth / 2 - 20}, 53 ${unref(width) * 0.5 + __props.titleWidth / 2}, 32
        ${unref(width) - 20}, 32 ${unref(width) - 8}, 48 ${unref(width) - 8}, ${unref(height) - 25} ${unref(width) - 20}, ${unref(height) - 8}
        20, ${unref(height) - 8} 8, ${unref(height) - 25} 8, 50
      `
            }, null, 8, _hoisted_8),
            createElementVNode("polyline", {
              stroke: unref(dark),
              filter: `url(#filter-${unref(_uid)})`,
              points: `
          ${(unref(width) - __props.titleWidth) / 2}, 30
          20, 30 7, 50 7, ${50 + (unref(height) - 167) / 2}
          13, ${55 + (unref(height) - 167) / 2} 13, ${135 + (unref(height) - 167) / 2}
          7, ${140 + (unref(height) - 167) / 2} 7, ${unref(height) - 27}
          20, ${unref(height) - 7} ${unref(width) - 20}, ${unref(height) - 7} ${unref(width) - 7}, ${unref(height) - 27}
          ${unref(width) - 7}, ${140 + (unref(height) - 167) / 2} ${unref(width) - 13}, ${135 + (unref(height) - 167) / 2}
          ${unref(width) - 13}, ${55 + (unref(height) - 167) / 2} ${unref(width) - 7}, ${50 + (unref(height) - 167) / 2}
          ${unref(width) - 7}, 50 ${unref(width) - 20}, 30 ${(unref(width) + __props.titleWidth) / 2}, 30
          ${(unref(width) + __props.titleWidth) / 2 - 20}, 7 ${(unref(width) - __props.titleWidth) / 2 + 20}, 7
          ${(unref(width) - __props.titleWidth) / 2}, 30 ${(unref(width) - __props.titleWidth) / 2 + 20}, 52
          ${(unref(width) + __props.titleWidth) / 2 - 20}, 52 ${(unref(width) + __props.titleWidth) / 2}, 30
        `
            }, null, 8, _hoisted_9),
            createElementVNode("polygon", {
              stroke: unref(dark),
              fill: "transparent",
              points: `
          ${(unref(width) + __props.titleWidth) / 2 - 5}, 30 ${(unref(width) + __props.titleWidth) / 2 - 21}, 11
          ${(unref(width) + __props.titleWidth) / 2 - 27}, 11 ${(unref(width) + __props.titleWidth) / 2 - 8}, 34
        `
            }, null, 8, _hoisted_10),
            createElementVNode("polygon", {
              stroke: unref(dark),
              fill: "transparent",
              points: `
          ${(unref(width) - __props.titleWidth) / 2 + 5}, 30 ${(unref(width) - __props.titleWidth) / 2 + 22}, 49
          ${(unref(width) - __props.titleWidth) / 2 + 28}, 49 ${(unref(width) - __props.titleWidth) / 2 + 8}, 26
        `
            }, null, 8, _hoisted_11),
            createElementVNode("polygon", {
              stroke: unref(dark),
              fill: fadeValue.value,
              filter: `url(#filter-${unref(_uid)})`,
              points: `
          ${(unref(width) + __props.titleWidth) / 2 - 11}, 37 ${(unref(width) + __props.titleWidth) / 2 - 32}, 11
          ${(unref(width) - __props.titleWidth) / 2 + 23}, 11 ${(unref(width) - __props.titleWidth) / 2 + 11}, 23
          ${(unref(width) - __props.titleWidth) / 2 + 33}, 49 ${(unref(width) + __props.titleWidth) / 2 - 22}, 49
        `
            }, null, 8, _hoisted_12),
            createElementVNode("polygon", {
              filter: `url(#filter-${unref(_uid)})`,
              fill: unref(dark),
              opacity: "1",
              points: `
          ${(unref(width) - __props.titleWidth) / 2 - 10}, 37 ${(unref(width) - __props.titleWidth) / 2 - 31}, 37
          ${(unref(width) - __props.titleWidth) / 2 - 25}, 46 ${(unref(width) - __props.titleWidth) / 2 - 4}, 46
        `
            }, _hoisted_15, 8, _hoisted_13),
            createElementVNode("polygon", {
              filter: `url(#filter-${unref(_uid)})`,
              fill: unref(dark),
              opacity: "0.7",
              points: `
          ${(unref(width) - __props.titleWidth) / 2 - 40}, 37 ${(unref(width) - __props.titleWidth) / 2 - 61}, 37
          ${(unref(width) - __props.titleWidth) / 2 - 55}, 46 ${(unref(width) - __props.titleWidth) / 2 - 34}, 46
        `
            }, _hoisted_18, 8, _hoisted_16),
            createElementVNode("polygon", {
              filter: `url(#filter-${unref(_uid)})`,
              fill: unref(dark),
              opacity: "0.5",
              points: `
          ${(unref(width) - __props.titleWidth) / 2 - 70}, 37 ${(unref(width) - __props.titleWidth) / 2 - 91}, 37
          ${(unref(width) - __props.titleWidth) / 2 - 85}, 46 ${(unref(width) - __props.titleWidth) / 2 - 64}, 46
        `
            }, _hoisted_21, 8, _hoisted_19),
            createElementVNode("polygon", {
              filter: `url(#filter-${unref(_uid)})`,
              fill: unref(dark),
              opacity: "1",
              points: `
          ${(unref(width) + __props.titleWidth) / 2 + 30}, 37 ${(unref(width) + __props.titleWidth) / 2 + 9}, 37
          ${(unref(width) + __props.titleWidth) / 2 + 3}, 46 ${(unref(width) + __props.titleWidth) / 2 + 24}, 46
        `
            }, _hoisted_24, 8, _hoisted_22),
            createElementVNode("polygon", {
              filter: `url(#filter-${unref(_uid)})`,
              fill: unref(dark),
              opacity: "0.7",
              points: `
          ${(unref(width) + __props.titleWidth) / 2 + 60}, 37 ${(unref(width) + __props.titleWidth) / 2 + 39}, 37
          ${(unref(width) + __props.titleWidth) / 2 + 33}, 46 ${(unref(width) + __props.titleWidth) / 2 + 54}, 46
        `
            }, _hoisted_27, 8, _hoisted_25),
            createElementVNode("polygon", {
              filter: `url(#filter-${unref(_uid)})`,
              fill: unref(dark),
              opacity: "0.5",
              points: `
          ${(unref(width) + __props.titleWidth) / 2 + 90}, 37 ${(unref(width) + __props.titleWidth) / 2 + 69}, 37
          ${(unref(width) + __props.titleWidth) / 2 + 63}, 46 ${(unref(width) + __props.titleWidth) / 2 + 84}, 46
        `
            }, _hoisted_30, 8, _hoisted_28),
            createElementVNode("text", {
              class: "dv-border-box-11-title",
              x: `${unref(width) / 2}`,
              y: "32",
              fill: "#fff",
              "font-size": "18",
              "text-anchor": "middle",
              "dominant-baseline": "middle"
            }, toDisplayString(__props.title), 9, _hoisted_31),
            createElementVNode("polygon", {
              fill: unref(dark),
              filter: `url(#filter-${unref(_uid)})`,
              points: `
          7, ${53 + (unref(height) - 167) / 2} 11, ${57 + (unref(height) - 167) / 2}
          11, ${133 + (unref(height) - 167) / 2} 7, ${137 + (unref(height) - 167) / 2}
        `
            }, null, 8, _hoisted_32),
            createElementVNode("polygon", {
              fill: unref(dark),
              filter: `url(#filter-${unref(_uid)})`,
              points: `
          ${unref(width) - 7}, ${53 + (unref(height) - 167) / 2} ${unref(width) - 11}, ${57 + (unref(height) - 167) / 2}
          ${unref(width) - 11}, ${133 + (unref(height) - 167) / 2} ${unref(width) - 7}, ${137 + (unref(height) - 167) / 2}
        `
            }, null, 8, _hoisted_33)
          ], 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
};