data-view-vue3
Version:
516 lines (515 loc) • 19.7 kB
JavaScript
import { ref, onMounted, onBeforeUnmount, nextTick, defineComponent, watch, toRef, openBlock, createElementBlock, unref, createElementVNode, Fragment, renderList, normalizeClass, renderSlot } from "vue";
function debounce(delay, callback) {
let lastTime;
return () => {
clearTimeout(lastTime);
const [that, args] = [this, arguments];
lastTime = setTimeout(() => {
callback.apply(that, args);
}, delay);
};
}
function observerDomResize(dom, callback) {
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
const observer = new MutationObserver(callback);
observer.observe(dom, { attributes: true, attributeFilter: ["style"], attributeOldValue: true });
return observer;
}
function deepMerge(target, merged) {
for (const key in merged) {
if (target[key] && typeof target[key] === "object") {
deepMerge(target[key], merged[key]);
continue;
}
if (typeof merged[key] === "object") {
target[key] = deepClone(merged[key], true);
continue;
}
target[key] = merged[key];
}
return target;
}
function deepClone(object, recursion = false) {
if (!object) {
return object;
}
const { parse, stringify } = JSON;
if (!recursion) {
return parse(stringify(object));
}
const clonedObj = object instanceof Array ? [] : {};
if (object && typeof object === "object") {
for (const key in object) {
if (object.hasOwnProperty(key)) {
if (object[key] && typeof object[key] === "object") {
clonedObj[key] = deepClone(object[key], true);
} else {
clonedObj[key] = object[key];
}
}
}
}
return clonedObj;
}
function useAutoResize(refDom, onResize, afterAutoResizeMixinInit) {
let dom = ref();
const width = ref(0);
const height = ref(0);
let debounceInitWHFun = () => {
};
let domObserver = null;
const autoResizeMixinInit = async () => {
await initWH(false);
getDebounceInitWHFun();
bindDomResizeCallback();
if (typeof afterAutoResizeMixinInit === "function") {
afterAutoResizeMixinInit();
}
};
const initWH = (resize = true) => {
return new Promise((resolve) => {
nextTick(() => {
dom = refDom;
width.value = dom.value ? dom.value.clientWidth : 0;
height.value = dom.value ? dom.value.clientHeight : 0;
if (!dom.value) {
console.warn("DataV: Failed to get dom node, component rendering may be abnormal!");
} else if (!width.value || !height.value) {
console.warn("DataV: Component width or height is 0px, rendering abnormality may occur!");
}
if (typeof onResize === "function" && resize) {
onResize();
}
resolve();
});
});
};
const getDebounceInitWHFun = () => {
debounceInitWHFun = debounce(100, initWH);
};
const bindDomResizeCallback = () => {
domObserver = observerDomResize(dom.value, debounceInitWHFun);
window.addEventListener("resize", debounceInitWHFun);
};
const unbindDomResizeCallback = () => {
if (!domObserver) {
return;
}
domObserver.disconnect();
domObserver.takeRecords();
domObserver = null;
window.removeEventListener("resize", debounceInitWHFun);
};
onMounted(() => {
autoResizeMixinInit();
});
onBeforeUnmount(() => {
unbindDomResizeCallback();
});
return {
dom,
width,
height,
debounceInitWHFun,
domObserver
};
}
var index_vue_vue_type_style_index_0_scoped_true_lang$3 = "";
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1$3 = ["width", "height"];
const _hoisted_2$3 = ["fill", "points"];
const _hoisted_3$3 = ["fill"];
const _hoisted_4$3 = ["values"];
const _hoisted_5$3 = ["fill"];
const _hoisted_6$3 = ["values"];
const _hoisted_7$3 = ["fill"];
const _hoisted_8$2 = ["values"];
const _hoisted_9$2 = { class: "border-box-content" };
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
props: {
color: { default: () => [] },
backgroundColor: { default: "transparent" }
},
setup(__props) {
const props = __props;
const refDom = ref(null);
const border = ref(["left-top", "right-top", "left-bottom", "right-bottom"]);
const defaultColor = ref(["#4fd2dd", "#235fa7"]);
const mergedColor = ref([]);
const { width, height } = useAutoResize(refDom);
watch(toRef(props, "color"), (newV) => {
mergeColor();
});
const mergeColor = () => {
mergedColor.value = deepMerge(deepClone(defaultColor.value, true), toRef(props, "color") || []);
};
onMounted(() => {
mergeColor();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "refDom",
ref: refDom,
class: "dv-border-box-1"
}, [
(openBlock(), createElementBlock("svg", {
class: "border",
width: unref(width),
height: unref(height)
}, [
createElementVNode("polygon", {
fill: __props.backgroundColor,
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$3)
], 8, _hoisted_1$3)),
(openBlock(true), createElementBlock(Fragment, null, renderList(border.value, (item) => {
return openBlock(), createElementBlock("svg", {
key: item,
width: "150px",
height: "150px",
class: normalizeClass(`${item} border`)
}, [
createElementVNode("polygon", {
fill: mergedColor.value[0],
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: `${mergedColor.value[0]};${mergedColor.value[1]};${mergedColor.value[0]}`,
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_4$3)
], 8, _hoisted_3$3),
createElementVNode("polygon", {
fill: mergedColor.value[1],
points: "27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
}, [
createElementVNode("animate", {
attributeName: "fill",
values: `${mergedColor.value[1]};${mergedColor.value[0]};${mergedColor.value[1]}`,
dur: "0.5s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_6$3)
], 8, _hoisted_5$3),
createElementVNode("polygon", {
fill: mergedColor.value[0],
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: `${mergedColor.value[0]};${mergedColor.value[1]};transparent`,
dur: "1s",
begin: "0s",
repeatCount: "indefinite"
}, null, 8, _hoisted_8$2)
], 8, _hoisted_7$3)
], 2);
}), 128)),
createElementVNode("div", _hoisted_9$2, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
])
], 512);
};
}
});
var BorderBox1 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-24d741b4"]]);
var index_vue_vue_type_style_index_0_scoped_true_lang$2 = "";
const _hoisted_1$2 = ["width", "height"];
const _hoisted_2$2 = ["fill", "points"];
const _hoisted_3$2 = ["stroke", "points"];
const _hoisted_4$2 = ["stroke", "points"];
const _hoisted_5$2 = ["fill"];
const _hoisted_6$2 = ["fill", "cx"];
const _hoisted_7$2 = ["fill", "cx", "cy"];
const _hoisted_8$1 = ["fill", "cy"];
const _hoisted_9$1 = { class: "border-box-content" };
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
props: {
color: { default: () => [] },
backgroundColor: { default: "transparent" }
},
setup(__props) {
const props = __props;
const refDom = ref(null);
const defaultColor = ref(["#fff", "rgba(255,255,255,.6)"]);
const mergedColor = ref([]);
const { width, height } = useAutoResize(refDom);
watch(toRef(props, "color"), (newV) => {
mergeColor();
});
const mergeColor = () => {
mergedColor.value = deepMerge(deepClone(defaultColor.value, true), toRef(props, "color") || []);
};
onMounted(() => {
mergeColor();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "refDom",
ref: refDom,
class: "dv-border-box-2"
}, [
(openBlock(), createElementBlock("svg", {
class: "dv-border-svg-container",
width: unref(width),
height: unref(height)
}, [
createElementVNode("polygon", {
fill: __props.backgroundColor,
points: `
7, 7 ${unref(width) - 7}, 7 ${unref(width) - 7}, ${unref(height) - 7} 7, ${unref(height) - 7}
`
}, null, 8, _hoisted_2$2),
createElementVNode("polyline", {
stroke: mergedColor.value[0],
points: `2, 2 ${unref(width) - 2} ,2 ${unref(width) - 2}, ${unref(height) - 2} 2, ${unref(height) - 2} 2, 2`
}, null, 8, _hoisted_3$2),
createElementVNode("polyline", {
stroke: mergedColor.value[1],
points: `6, 6 ${unref(width) - 6}, 6 ${unref(width) - 6}, ${unref(height) - 6} 6, ${unref(height) - 6} 6, 6`
}, null, 8, _hoisted_4$2),
createElementVNode("circle", {
fill: mergedColor.value[0],
cx: "11",
cy: "11",
r: "1"
}, null, 8, _hoisted_5$2),
createElementVNode("circle", {
fill: mergedColor.value[0],
cx: unref(width) - 11,
cy: "11",
r: "1"
}, null, 8, _hoisted_6$2),
createElementVNode("circle", {
fill: mergedColor.value[0],
cx: unref(width) - 11,
cy: unref(height) - 11,
r: "1"
}, null, 8, _hoisted_7$2),
createElementVNode("circle", {
fill: mergedColor.value[0],
cx: "11",
cy: unref(height) - 11,
r: "1"
}, null, 8, _hoisted_8$1)
], 8, _hoisted_1$2)),
createElementVNode("div", _hoisted_9$1, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
])
], 512);
};
}
});
var BorderBox2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7904dcac"]]);
var index_vue_vue_type_style_index_0_scoped_true_lang$1 = "";
const _hoisted_1$1 = ["width", "height"];
const _hoisted_2$1 = ["fill", "points"];
const _hoisted_3$1 = ["stroke", "points"];
const _hoisted_4$1 = ["stroke", "points"];
const _hoisted_5$1 = ["stroke", "points"];
const _hoisted_6$1 = ["stroke", "points"];
const _hoisted_7$1 = { class: "border-box-content" };
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
props: {
color: { default: () => [] },
backgroundColor: { default: "transparent" }
},
setup(__props) {
const props = __props;
const refDom = ref(null);
const defaultColor = ref(["#2862b7", "#2862b7"]);
const mergedColor = ref([]);
const { width, height } = useAutoResize(refDom);
watch(toRef(props, "color"), (newV) => {
mergeColor();
});
const mergeColor = () => {
mergedColor.value = deepMerge(deepClone(defaultColor.value, true), toRef(props, "color") || []);
};
onMounted(() => {
mergeColor();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "refDom",
ref: refDom,
class: "dv-border-box-3"
}, [
(openBlock(), createElementBlock("svg", {
class: "dv-border-svg-container",
width: unref(width),
height: unref(height)
}, [
createElementVNode("polygon", {
fill: __props.backgroundColor,
points: `
23, 23 ${unref(width) - 24}, 23 ${unref(width) - 24}, ${unref(height) - 24} 23, ${unref(height) - 24}
`
}, null, 8, _hoisted_2$1),
createElementVNode("polyline", {
class: "dv-bb3-line1",
stroke: mergedColor.value[0],
points: `4, 4 ${unref(width) - 22} ,4 ${unref(width) - 22}, ${unref(height) - 22} 4, ${unref(height) - 22} 4, 4`
}, null, 8, _hoisted_3$1),
createElementVNode("polyline", {
class: "dv-bb3-line2",
stroke: mergedColor.value[1],
points: `10, 10 ${unref(width) - 16}, 10 ${unref(width) - 16}, ${unref(height) - 16} 10, ${unref(height) - 16} 10, 10`
}, null, 8, _hoisted_4$1),
createElementVNode("polyline", {
class: "dv-bb3-line2",
stroke: mergedColor.value[1],
points: `16, 16 ${unref(width) - 10}, 16 ${unref(width) - 10}, ${unref(height) - 10} 16, ${unref(height) - 10} 16, 16`
}, null, 8, _hoisted_5$1),
createElementVNode("polyline", {
class: "dv-bb3-line2",
stroke: mergedColor.value[1],
points: `22, 22 ${unref(width) - 4}, 22 ${unref(width) - 4}, ${unref(height) - 4} 22, ${unref(height) - 4} 22, 22`
}, null, 8, _hoisted_6$1)
], 8, _hoisted_1$1)),
createElementVNode("div", _hoisted_7$1, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
])
], 512);
};
}
});
var BorderBox3 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-82ce63bc"]]);
var index_vue_vue_type_style_index_0_scoped_true_lang = "";
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fill", "points"];
const _hoisted_3 = ["stroke", "points"];
const _hoisted_4 = ["stroke", "points"];
const _hoisted_5 = ["stroke", "points"];
const _hoisted_6 = ["stroke"];
const _hoisted_7 = ["stroke"];
const _hoisted_8 = ["stroke"];
const _hoisted_9 = ["stroke"];
const _hoisted_10 = ["stroke"];
const _hoisted_11 = ["stroke", "points"];
const _hoisted_12 = ["stroke", "points"];
const _hoisted_13 = { class: "border-box-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
props: {
color: { default: () => [] },
reverse: { default: () => false },
backgroundColor: { default: "transparent" }
},
setup(__props) {
const props = __props;
const refDom = ref(null);
const defaultColor = ref(["red", "rgba(0,0,255,.8)"]);
const mergedColor = ref([]);
const { width, height } = useAutoResize(refDom);
watch(toRef(props, "color"), (newV) => {
mergeColor();
});
const mergeColor = () => {
mergedColor.value = deepMerge(deepClone(defaultColor.value, true), toRef(props, "color") || []);
};
onMounted(() => {
mergeColor();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "refDom",
ref: refDom,
class: "dv-border-box-4"
}, [
(openBlock(), createElementBlock("svg", {
class: normalizeClass(`dv-border-svg-container ${__props.reverse && "dv-reverse"}`),
width: unref(width),
height: unref(height)
}, [
createElementVNode("polygon", {
fill: __props.backgroundColor,
points: `
${unref(width) - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
16, 42 16, ${unref(height) - 32} 41, ${unref(height) - 7} ${unref(width) - 15}, ${unref(height) - 7}
`
}, null, 8, _hoisted_2),
createElementVNode("polyline", {
class: "dv-bb4-line-1",
stroke: mergedColor.value[0],
points: `145, ${unref(height) - 5} 40, ${unref(height) - 5} 10, ${unref(height) - 35}
10, 40 40, 5 150, 5 170, 20 ${unref(width) - 15}, 20`
}, null, 8, _hoisted_3),
createElementVNode("polyline", {
stroke: mergedColor.value[1],
class: "dv-bb4-line-2",
points: `245, ${unref(height) - 1} 36, ${unref(height) - 1} 14, ${unref(height) - 23}
14, ${unref(height) - 100}`
}, null, 8, _hoisted_4),
createElementVNode("polyline", {
class: "dv-bb4-line-3",
stroke: mergedColor.value[0],
points: `7, ${unref(height) - 40} 7, ${unref(height) - 75}`
}, null, 8, _hoisted_5),
createElementVNode("polyline", {
class: "dv-bb4-line-4",
stroke: mergedColor.value[0],
points: `28, 24 13, 41 13, 64`
}, null, 8, _hoisted_6),
createElementVNode("polyline", {
class: "dv-bb4-line-5",
stroke: mergedColor.value[0],
points: `5, 45 5, 140`
}, null, 8, _hoisted_7),
createElementVNode("polyline", {
class: "dv-bb4-line-6",
stroke: mergedColor.value[1],
points: `14, 75 14, 180`
}, null, 8, _hoisted_8),
createElementVNode("polyline", {
class: "dv-bb4-line-7",
stroke: mergedColor.value[1],
points: `55, 11 147, 11 167, 26 250, 26`
}, null, 8, _hoisted_9),
createElementVNode("polyline", {
class: "dv-bb4-line-8",
stroke: mergedColor.value[1],
points: `158, 5 173, 16`
}, null, 8, _hoisted_10),
createElementVNode("polyline", {
class: "dv-bb4-line-9",
stroke: mergedColor.value[0],
points: `200, 17 ${unref(width) - 10}, 17`
}, null, 8, _hoisted_11),
createElementVNode("polyline", {
class: "dv-bb4-line-10",
stroke: mergedColor.value[1],
points: `385, 17 ${unref(width) - 10}, 17`
}, null, 8, _hoisted_12)
], 10, _hoisted_1)),
createElementVNode("div", _hoisted_13, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
])
], 512);
};
}
});
var BorderBox4 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3771e0b1"]]);
const view = {
install: (app) => {
app.component("DvBorderBox1", BorderBox1);
app.component("DvBorderBox2", BorderBox2);
app.component("DvBorderBox3", BorderBox3);
app.component("DvBorderBox4", BorderBox4);
}
};
export { BorderBox1 as borderBox1, BorderBox2 as borderBox2, BorderBox3 as borderBox3, BorderBox4 as borderBox4, view as default };