@zhsz/cool-design-dv
Version:
150 lines (149 loc) • 6.68 kB
JavaScript
import { defineComponent, getCurrentInstance, useAttrs, inject, ref, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, normalizeClass, createVNode, renderSlot } from "vue";
import "./style.css";
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";
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__ = defineComponent({
name: "DvBorder1"
});
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 page = inject(dvPageSymbols, null);
const border = ref(["left-top", "right-top", "left-bottom", "right-bottom"]);
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-1", 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("polygon", {
fill: fill.value,
points: `10, 27 10, ${unref(height) - 27} 13, ${unref(height) - 24} 13, ${unref(height) - 21} 24, ${unref(height) - 11}
38, ${unref(height) - 11} 41, ${unref(height) - 8} 73, ${unref(height) - 8} 75, ${unref(height) - 10} 81, ${unref(height) - 10}
85, ${unref(height) - 6} ${unref(width) - 85}, ${unref(height) - 6} ${unref(width) - 81}, ${unref(height) - 10} ${unref(width) - 75}, ${unref(height) - 10}
${unref(width) - 73}, ${unref(height) - 8} ${unref(width) - 41}, ${unref(height) - 8} ${unref(width) - 38}, ${unref(height) - 11}
${unref(width) - 24}, ${unref(height) - 11} ${unref(width) - 13}, ${unref(height) - 21} ${unref(width) - 13}, ${unref(height) - 24}
${unref(width) - 10}, ${unref(height) - 27} ${unref(width) - 10}, 27 ${unref(width) - 13}, 25 ${unref(width) - 13}, 21
${unref(width) - 24}, 11 ${unref(width) - 38}, 11 ${unref(width) - 41}, 8 ${unref(width) - 73}, 8 ${unref(width) - 75}, 10
${unref(width) - 81}, 10 ${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)),
(openBlock(true), createElementBlock(Fragment, null, renderList(border.value, (item) => {
return openBlock(), createElementBlock("svg", {
width: "150px",
height: "150px",
key: item,
style: normalizeStyle(unref(styles)),
class: normalizeClass(`my-dv-border-1__${item} my-dv-border-1__corner`)
}, [
createElementVNode("polygon", {
fill: 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"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `${unref(light)};${unref(dark)};${unref(light)}`,
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_4)
], 8, _hoisted_3),
createElementVNode("polygon", {
fill: unref(dark),
points: "27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `${unref(dark)};${unref(light)};${unref(dark)}`,
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_6)
], 8, _hoisted_5),
createElementVNode("polygon", {
fill: 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"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `${unref(light)};${unref(dark)};transparent`,
dur: "1s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_8)
], 8, _hoisted_7)
], 6);
}), 128)),
createVNode(unref(BoxContent), {
padding: unref($attrs).padding
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["padding"])
]),
_: 3
}, 16, ["class"]);
};
}
});
export {
_sfc_main as default
};