@zhsz/cool-design-dv
Version:
350 lines (349 loc) • 14.7 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("./style.css");
const color = require("../../utils/color.js");
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"];
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("feMorphology", {
operator: "dilate",
radius: "2",
in: "SourceAlpha",
result: "thicken"
}, null, -1);
const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("feGaussianBlur", {
in: "thicken",
stdDeviation: "3",
result: "blurred"
}, null, -1);
const _hoisted_5 = ["flood-color"];
const _hoisted_6 = /* @__PURE__ */ vue.createElementVNode("feComposite", {
in: "glowColor",
in2: "blurred",
operator: "in",
result: "softGlowColored"
}, null, -1);
const _hoisted_7 = /* @__PURE__ */ vue.createElementVNode("feMerge", null, [
/* @__PURE__ */ vue.createElementVNode("feMergeNode", { in: "softGlowColored" }),
/* @__PURE__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.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__ = vue.defineComponent({
name: "DvBorder5"
});
const _sfc_main = /* @__PURE__ */ vue.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 = 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 fadeValue = vue.computed(() => {
const key = color.fade(light.value, 30);
if (key === false) {
return void 0;
} else {
return key;
}
});
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-10", vue.unref(classes)],
"default-width": "400px",
"default-height": "300px",
padding: "0"
}, { ...vue.unref($attrs), ...props }), {
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("filter", {
id: `filter-${vue.unref(_uid)}`,
height: "150%",
width: "150%",
x: "-25%",
y: "-25%"
}, [
_hoisted_3,
_hoisted_4,
vue.createElementVNode("feFlood", {
"flood-color": vue.unref(light),
result: "glowColor"
}, null, 8, _hoisted_5),
_hoisted_6,
_hoisted_7
], 8, _hoisted_2)
]),
vue.createElementVNode("polygon", {
fill: fill.value,
points: `
20, 32 ${vue.unref(width) * 0.5 - __props.titleWidth / 2}, 32 ${vue.unref(width) * 0.5 - __props.titleWidth / 2 + 20}, 53
${vue.unref(width) * 0.5 + __props.titleWidth / 2 - 20}, 53 ${vue.unref(width) * 0.5 + __props.titleWidth / 2}, 32
${vue.unref(width) - 20}, 32 ${vue.unref(width) - 8}, 48 ${vue.unref(width) - 8}, ${vue.unref(height) - 25} ${vue.unref(width) - 20}, ${vue.unref(height) - 8}
20, ${vue.unref(height) - 8} 8, ${vue.unref(height) - 25} 8, 50
`
}, null, 8, _hoisted_8),
vue.createElementVNode("polyline", {
stroke: vue.unref(dark),
filter: `url(#filter-${vue.unref(_uid)})`,
points: `
${(vue.unref(width) - __props.titleWidth) / 2}, 30
20, 30 7, 50 7, ${50 + (vue.unref(height) - 167) / 2}
13, ${55 + (vue.unref(height) - 167) / 2} 13, ${135 + (vue.unref(height) - 167) / 2}
7, ${140 + (vue.unref(height) - 167) / 2} 7, ${vue.unref(height) - 27}
20, ${vue.unref(height) - 7} ${vue.unref(width) - 20}, ${vue.unref(height) - 7} ${vue.unref(width) - 7}, ${vue.unref(height) - 27}
${vue.unref(width) - 7}, ${140 + (vue.unref(height) - 167) / 2} ${vue.unref(width) - 13}, ${135 + (vue.unref(height) - 167) / 2}
${vue.unref(width) - 13}, ${55 + (vue.unref(height) - 167) / 2} ${vue.unref(width) - 7}, ${50 + (vue.unref(height) - 167) / 2}
${vue.unref(width) - 7}, 50 ${vue.unref(width) - 20}, 30 ${(vue.unref(width) + __props.titleWidth) / 2}, 30
${(vue.unref(width) + __props.titleWidth) / 2 - 20}, 7 ${(vue.unref(width) - __props.titleWidth) / 2 + 20}, 7
${(vue.unref(width) - __props.titleWidth) / 2}, 30 ${(vue.unref(width) - __props.titleWidth) / 2 + 20}, 52
${(vue.unref(width) + __props.titleWidth) / 2 - 20}, 52 ${(vue.unref(width) + __props.titleWidth) / 2}, 30
`
}, null, 8, _hoisted_9),
vue.createElementVNode("polygon", {
stroke: vue.unref(dark),
fill: "transparent",
points: `
${(vue.unref(width) + __props.titleWidth) / 2 - 5}, 30 ${(vue.unref(width) + __props.titleWidth) / 2 - 21}, 11
${(vue.unref(width) + __props.titleWidth) / 2 - 27}, 11 ${(vue.unref(width) + __props.titleWidth) / 2 - 8}, 34
`
}, null, 8, _hoisted_10),
vue.createElementVNode("polygon", {
stroke: vue.unref(dark),
fill: "transparent",
points: `
${(vue.unref(width) - __props.titleWidth) / 2 + 5}, 30 ${(vue.unref(width) - __props.titleWidth) / 2 + 22}, 49
${(vue.unref(width) - __props.titleWidth) / 2 + 28}, 49 ${(vue.unref(width) - __props.titleWidth) / 2 + 8}, 26
`
}, null, 8, _hoisted_11),
vue.createElementVNode("polygon", {
stroke: vue.unref(dark),
fill: fadeValue.value,
filter: `url(#filter-${vue.unref(_uid)})`,
points: `
${(vue.unref(width) + __props.titleWidth) / 2 - 11}, 37 ${(vue.unref(width) + __props.titleWidth) / 2 - 32}, 11
${(vue.unref(width) - __props.titleWidth) / 2 + 23}, 11 ${(vue.unref(width) - __props.titleWidth) / 2 + 11}, 23
${(vue.unref(width) - __props.titleWidth) / 2 + 33}, 49 ${(vue.unref(width) + __props.titleWidth) / 2 - 22}, 49
`
}, null, 8, _hoisted_12),
vue.createElementVNode("polygon", {
filter: `url(#filter-${vue.unref(_uid)})`,
fill: vue.unref(dark),
opacity: "1",
points: `
${(vue.unref(width) - __props.titleWidth) / 2 - 10}, 37 ${(vue.unref(width) - __props.titleWidth) / 2 - 31}, 37
${(vue.unref(width) - __props.titleWidth) / 2 - 25}, 46 ${(vue.unref(width) - __props.titleWidth) / 2 - 4}, 46
`
}, _hoisted_15, 8, _hoisted_13),
vue.createElementVNode("polygon", {
filter: `url(#filter-${vue.unref(_uid)})`,
fill: vue.unref(dark),
opacity: "0.7",
points: `
${(vue.unref(width) - __props.titleWidth) / 2 - 40}, 37 ${(vue.unref(width) - __props.titleWidth) / 2 - 61}, 37
${(vue.unref(width) - __props.titleWidth) / 2 - 55}, 46 ${(vue.unref(width) - __props.titleWidth) / 2 - 34}, 46
`
}, _hoisted_18, 8, _hoisted_16),
vue.createElementVNode("polygon", {
filter: `url(#filter-${vue.unref(_uid)})`,
fill: vue.unref(dark),
opacity: "0.5",
points: `
${(vue.unref(width) - __props.titleWidth) / 2 - 70}, 37 ${(vue.unref(width) - __props.titleWidth) / 2 - 91}, 37
${(vue.unref(width) - __props.titleWidth) / 2 - 85}, 46 ${(vue.unref(width) - __props.titleWidth) / 2 - 64}, 46
`
}, _hoisted_21, 8, _hoisted_19),
vue.createElementVNode("polygon", {
filter: `url(#filter-${vue.unref(_uid)})`,
fill: vue.unref(dark),
opacity: "1",
points: `
${(vue.unref(width) + __props.titleWidth) / 2 + 30}, 37 ${(vue.unref(width) + __props.titleWidth) / 2 + 9}, 37
${(vue.unref(width) + __props.titleWidth) / 2 + 3}, 46 ${(vue.unref(width) + __props.titleWidth) / 2 + 24}, 46
`
}, _hoisted_24, 8, _hoisted_22),
vue.createElementVNode("polygon", {
filter: `url(#filter-${vue.unref(_uid)})`,
fill: vue.unref(dark),
opacity: "0.7",
points: `
${(vue.unref(width) + __props.titleWidth) / 2 + 60}, 37 ${(vue.unref(width) + __props.titleWidth) / 2 + 39}, 37
${(vue.unref(width) + __props.titleWidth) / 2 + 33}, 46 ${(vue.unref(width) + __props.titleWidth) / 2 + 54}, 46
`
}, _hoisted_27, 8, _hoisted_25),
vue.createElementVNode("polygon", {
filter: `url(#filter-${vue.unref(_uid)})`,
fill: vue.unref(dark),
opacity: "0.5",
points: `
${(vue.unref(width) + __props.titleWidth) / 2 + 90}, 37 ${(vue.unref(width) + __props.titleWidth) / 2 + 69}, 37
${(vue.unref(width) + __props.titleWidth) / 2 + 63}, 46 ${(vue.unref(width) + __props.titleWidth) / 2 + 84}, 46
`
}, _hoisted_30, 8, _hoisted_28),
vue.createElementVNode("text", {
class: "dv-border-box-11-title",
x: `${vue.unref(width) / 2}`,
y: "32",
fill: "#fff",
"font-size": "18",
"text-anchor": "middle",
"dominant-baseline": "middle"
}, vue.toDisplayString(__props.title), 9, _hoisted_31),
vue.createElementVNode("polygon", {
fill: vue.unref(dark),
filter: `url(#filter-${vue.unref(_uid)})`,
points: `
7, ${53 + (vue.unref(height) - 167) / 2} 11, ${57 + (vue.unref(height) - 167) / 2}
11, ${133 + (vue.unref(height) - 167) / 2} 7, ${137 + (vue.unref(height) - 167) / 2}
`
}, null, 8, _hoisted_32),
vue.createElementVNode("polygon", {
fill: vue.unref(dark),
filter: `url(#filter-${vue.unref(_uid)})`,
points: `
${vue.unref(width) - 7}, ${53 + (vue.unref(height) - 167) / 2} ${vue.unref(width) - 11}, ${57 + (vue.unref(height) - 167) / 2}
${vue.unref(width) - 11}, ${133 + (vue.unref(height) - 167) / 2} ${vue.unref(width) - 7}, ${137 + (vue.unref(height) - 167) / 2}
`
}, null, 8, _hoisted_33)
], 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"]);
};
}
});
exports.default = _sfc_main;