@zhsz/cool-design-dv
Version:
150 lines (149 loc) • 6.95 kB
JavaScript
;
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 _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fill", "points"];
const _hoisted_3 = ["fill"];
const _hoisted_4 = ["values"];
const _hoisted_5 = ["fill"];
const _hoisted_6 = ["values"];
const _hoisted_7 = ["fill"];
const _hoisted_8 = ["values"];
const __default__ = vue.defineComponent({
name: "DvBorder1"
});
const _sfc_main = /* @__PURE__ */ vue.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 = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
const emits = __emit;
const $attrs = vue.useAttrs();
const props = __props;
const page = vue.inject(index.dvPageSymbols, null);
const border = vue.ref(["left-top", "right-top", "left-bottom", "right-bottom"]);
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
);
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-1", 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("polygon", {
fill: fill.value,
points: `10, 27 10, ${vue.unref(height) - 27} 13, ${vue.unref(height) - 24} 13, ${vue.unref(height) - 21} 24, ${vue.unref(height) - 11}
38, ${vue.unref(height) - 11} 41, ${vue.unref(height) - 8} 73, ${vue.unref(height) - 8} 75, ${vue.unref(height) - 10} 81, ${vue.unref(height) - 10}
85, ${vue.unref(height) - 6} ${vue.unref(width) - 85}, ${vue.unref(height) - 6} ${vue.unref(width) - 81}, ${vue.unref(height) - 10} ${vue.unref(width) - 75}, ${vue.unref(height) - 10}
${vue.unref(width) - 73}, ${vue.unref(height) - 8} ${vue.unref(width) - 41}, ${vue.unref(height) - 8} ${vue.unref(width) - 38}, ${vue.unref(height) - 11}
${vue.unref(width) - 24}, ${vue.unref(height) - 11} ${vue.unref(width) - 13}, ${vue.unref(height) - 21} ${vue.unref(width) - 13}, ${vue.unref(height) - 24}
${vue.unref(width) - 10}, ${vue.unref(height) - 27} ${vue.unref(width) - 10}, 27 ${vue.unref(width) - 13}, 25 ${vue.unref(width) - 13}, 21
${vue.unref(width) - 24}, 11 ${vue.unref(width) - 38}, 11 ${vue.unref(width) - 41}, 8 ${vue.unref(width) - 73}, 8 ${vue.unref(width) - 75}, 10
${vue.unref(width) - 81}, 10 ${vue.unref(width) - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`
}, null, 8, _hoisted_2)
], 12, _hoisted_1)),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(border.value, (item) => {
return vue.openBlock(), vue.createElementBlock("svg", {
width: "150px",
height: "150px",
key: item,
style: vue.normalizeStyle(vue.unref(styles)),
class: vue.normalizeClass(`my-dv-border-1__${item} my-dv-border-1__corner`)
}, [
vue.createElementVNode("polygon", {
fill: vue.unref(light),
points: "6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
}, [
vue.createElementVNode("animate", {
attributeName: "fill",
values: `${vue.unref(light)};${vue.unref(dark)};${vue.unref(light)}`,
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_4)
], 8, _hoisted_3),
vue.createElementVNode("polygon", {
fill: vue.unref(dark),
points: "27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
}, [
vue.createElementVNode("animate", {
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)};${vue.unref(dark)}`,
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_6)
], 8, _hoisted_5),
vue.createElementVNode("polygon", {
fill: vue.unref(light),
points: "9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
}, [
vue.createElementVNode("animate", {
attributeName: "fill",
values: `${vue.unref(light)};${vue.unref(dark)};transparent`,
dur: "1s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_8)
], 8, _hoisted_7)
], 6);
}), 128)),
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;