@zhsz/cool-design-dv
Version:
208 lines (207 loc) • 7.89 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index$1 = require("../dv-box/index.js");
const index = require("../../symbols/index.js");
const resizeEvent = require("../../utils/resize-event.js");
const useAdorn = require("../../hooks/useAdorn.js");
const useConfig = require("../../hooks/useConfig.js");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["fill", "x", "y", "width", "height"];
const _hoisted_3 = ["values", "begin"];
const _hoisted_4 = ["fill", "x", "y", "width", "height"];
const _hoisted_5 = ["values"];
const _hoisted_6 = ["values"];
const _hoisted_7 = ["values"];
const _hoisted_8 = ["values"];
const _hoisted_9 = ["fill", "x", "y", "width", "height"];
const _hoisted_10 = ["values"];
const _hoisted_11 = ["values"];
const __default__ = vue.defineComponent({
name: "DvAdorn1"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
duration: {
type: Number,
default: 3
},
reverse: Boolean,
opacity: {
type: Number,
default: 1
},
size: {
type: Number,
default: 5
},
gap: {
type: Number,
default: 5
}
},
emits: ["resize"],
setup(__props, { emit: __emit }) {
var _a, _b, _c;
const props = __props;
const points = vue.ref([]);
const rect = vue.ref([]);
const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
const emits = __emit;
const $attrs = vue.useAttrs();
const page = vue.inject(index.dvPageSymbols, null);
const mitt = vue.inject(index.mittSymbol, null);
const { resize, classes, styles, width, height, dark, light } = useAdorn.useAdorn(
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 rows = vue.computed(() => {
return Math.floor(height.value / (props.size + props.gap));
});
const columns = vue.computed(() => {
return Math.floor(width.value / (props.size + props.gap));
});
const length = vue.computed(() => {
return width.value / 4;
});
const halfSize = vue.computed(() => {
return props.size / 2;
});
function createPoints() {
const grid = props.gap + props.size;
const points2 = new Array(rows.value).fill(0).map(
(foo, i) => new Array(columns.value).fill(0).map((foo2, j) => [grid * j, grid * i])
);
return points2.reduce((all, item) => [...all, ...item], []);
}
function createRect(points2) {
const mid = Math.floor(rows.value / 2);
const rect1 = points2[mid * columns.value - 1];
const rect2 = points2[mid * columns.value - 3];
return [rect1, rect2];
}
function setData() {
points.value = createPoints();
rect.value = createRect(points.value);
}
vue.watch(
() => props,
() => {
setData();
},
{
deep: true
}
);
vue.onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
setData();
resizeEvent.addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
if (mitt) {
mitt.on("resize", setData);
}
});
vue.onBeforeUnmount(() => {
resizeEvent.removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
if (mitt) {
mitt.off("resize", setData);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
class: ["my-dv-adorn-1", vue.unref(classes)],
style: vue.unref(styles),
"default-width": "300px",
"default-height": "50px"
}, vue.unref($attrs)), {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createElementBlock("svg", {
width: `${vue.unref(width)}px`,
height: `${vue.unref(height)}px`
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(points.value, (point, i) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
Math.random() > 0.6 ? (vue.openBlock(), vue.createElementBlock("rect", {
key: i,
fill: vue.unref(dark),
x: point[0],
y: point[1],
width: __props.size,
height: __props.size
}, [
Math.random() > 0.6 ? (vue.openBlock(), vue.createElementBlock("animate", {
key: 0,
attributeName: "fill",
values: `${vue.unref(dark)};transparent`,
dur: "1s",
begin: Math.random() * 2,
repeatCount: "indefinite"
}, null, 8, _hoisted_3)) : vue.createCommentVNode("", true)
], 8, _hoisted_2)) : vue.createCommentVNode("", true)
], 64);
}), 256)),
rect.value[0] ? (vue.openBlock(), vue.createElementBlock("rect", {
key: 0,
fill: vue.unref(light),
x: rect.value[0][0] + halfSize.value,
y: rect.value[0][1] + halfSize.value,
width: __props.size * 2,
height: __props.size * 2
}, [
vue.createElementVNode("animate", {
attributeName: "width",
values: `0;${__props.size * 2}`,
dur: "2s",
repeatCount: "indefinite"
}, null, 8, _hoisted_5),
vue.createElementVNode("animate", {
attributeName: "height",
values: `0;${__props.size * 2}`,
dur: "2s",
repeatCount: "indefinite"
}, null, 8, _hoisted_6),
vue.createElementVNode("animate", {
attributeName: "x",
values: `${rect.value[0][0] + halfSize.value};${rect.value[0][0] + halfSize.value - __props.size}`,
dur: "2s",
repeatCount: "indefinite"
}, null, 8, _hoisted_7),
vue.createElementVNode("animate", {
attributeName: "y",
values: `${rect.value[0][1] + halfSize.value};${rect.value[0][1] + halfSize.value - __props.size}`,
dur: "2s",
repeatCount: "indefinite"
}, null, 8, _hoisted_8)
], 8, _hoisted_4)) : vue.createCommentVNode("", true),
rect.value[1] ? (vue.openBlock(), vue.createElementBlock("rect", {
key: 1,
fill: vue.unref(light),
x: rect.value[1][0] + __props.size - length.value,
y: rect.value[1][1] + halfSize.value - __props.size,
width: length.value,
height: __props.size * 2
}, [
vue.createElementVNode("animate", {
attributeName: "width",
values: `0;${length.value};0`,
dur: "2s",
repeatCount: "indefinite"
}, null, 8, _hoisted_10),
vue.createElementVNode("animate", {
attributeName: "x",
values: `${rect.value[1][0] + __props.size};${rect.value[1][0] + __props.size - length.value};${rect.value[1][0] + __props.size}`,
dur: "2s",
repeatCount: "indefinite"
}, null, 8, _hoisted_11)
], 8, _hoisted_9)) : vue.createCommentVNode("", true)
], 8, _hoisted_1))
]),
_: 1
}, 16, ["class", "style"]);
};
}
});
exports.default = _sfc_main;