@zhsz/cool-design-dv
Version:
181 lines (180 loc) • 6.55 kB
JavaScript
import { defineComponent, getCurrentInstance, useAttrs, inject, computed, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, normalizeStyle, createElementVNode, 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";
import { uid } from "../../utils/util.mjs";
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["id", "d"];
const _hoisted_3 = ["id"];
const _hoisted_4 = /* @__PURE__ */ createElementVNode("stop", {
offset: "0%",
"stop-color": "#fff",
"stop-opacity": "1"
}, null, -1);
const _hoisted_5 = /* @__PURE__ */ createElementVNode("stop", {
offset: "100%",
"stop-color": "#fff",
"stop-opacity": "0"
}, null, -1);
const _hoisted_6 = [
_hoisted_4,
_hoisted_5
];
const _hoisted_7 = ["id"];
const _hoisted_8 = ["fill"];
const _hoisted_9 = ["dur", "path"];
const _hoisted_10 = ["fill", "points"];
const _hoisted_11 = ["stroke", "xlink:href"];
const _hoisted_12 = ["stroke", "xlink:href", "mask"];
const _hoisted_13 = ["from", "to", "dur"];
const __default__ = defineComponent({
name: "DvBorder7"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
fill: {
type: String,
default() {
return "transparent";
}
},
reverse: Boolean,
opacity: {
type: Number,
default: 1
},
// 动画持续时间，单位秒
duration: {
type: Number,
default: 4
}
},
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 length = computed(() => {
return (width.value + height.value - 5) * 2;
});
const boxStyles = computed(() => {
return {
backgroundColor: fill.value
};
});
const path = computed(() => {
if (props.reverse)
return `M 2.5, 2.5 L 2.5, ${height.value - 2.5} L ${width.value - 2.5}, ${height.value - 2.5} L ${width.value - 2.5}, 2.5 L 2.5, 2.5`;
return `M2.5, 2.5 L${width.value - 2.5}, 2.5 L${width.value - 2.5}, ${height.value - 2.5} L2.5, ${height.value - 2.5} L2.5, 2.5`;
});
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-7", unref(classes)],
"default-width": "400px",
"default-height": "300px",
padding: "0"
}, { ...unref($attrs), ...props }, { style: boxStyles.value }), {
default: withCtx(() => [
(openBlock(), createElementBlock("svg", {
class: "my-dv-border__svg",
width: unref(width),
height: unref(height),
style: normalizeStyle(unref(styles))
}, [
createElementVNode("defs", null, [
createElementVNode("path", {
id: `path-${unref(_uid)}`,
d: path.value,
fill: "transparent"
}, null, 8, _hoisted_2),
createElementVNode("radialGradient", {
id: `gradient-${unref(_uid)}`,
cx: "50%",
cy: "50%",
r: "50%"
}, _hoisted_6, 8, _hoisted_3),
createElementVNode("mask", {
id: `mask-${unref(_uid)}`
}, [
createElementVNode("circle", {
cx: "0",
cy: "0",
r: "150",
fill: `url(#gradient-${unref(_uid)})`
}, [
createElementVNode("animateMotion", {
dur: `${__props.duration}s`,
path: path.value,
rotate: "auto",
repeatCount: "indefinite"
}, null, 8, _hoisted_9)
], 8, _hoisted_8)
], 8, _hoisted_7)
]),
createElementVNode("polygon", {
fill: fill.value,
points: `5, 5 ${unref(width) - 5}, 5 ${unref(width) - 5} ${unref(height) - 5} 5, ${unref(height) - 5}`
}, null, 8, _hoisted_10),
createElementVNode("use", {
stroke: unref(dark),
"stroke-width": "1",
"xlink:href": `#path-${unref(_uid)}`
}, null, 8, _hoisted_11),
createElementVNode("use", {
stroke: unref(light),
"stroke-width": "3",
"xlink:href": `#path-${unref(_uid)}`,
mask: `url(#mask-${unref(_uid)})`
}, [
createElementVNode("animate", {
attributeName: "stroke-dasharray",
from: `0, ${length.value}`,
to: `${length.value}, 0`,
dur: `${__props.duration}s`,
repeatCount: "indefinite"
}, null, 8, _hoisted_13)
], 8, _hoisted_12)
], 12, _hoisted_1)),
createVNode(unref(BoxContent), {
padding: unref($attrs).padding
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["padding"])
]),
_: 3
}, 16, ["class", "style"]);
};
}
});
export {
_sfc_main as default
};