@zhsz/cool-design-dv
Version:
243 lines (242 loc) • 10.2 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 util = require("../../utils/util.js");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["stroke", "points"];
const _hoisted_3 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_4 = ["id", "values", "begin"];
const _hoisted_5 = ["values", "begin"];
const _hoisted_6 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_7 = ["id", "values", "begin"];
const _hoisted_8 = ["values", "begin"];
const _hoisted_9 = ["stroke", "points", "stroke-dasharray"];
const _hoisted_10 = ["id", "values", "begin"];
const _hoisted_11 = ["values", "begin"];
const _hoisted_12 = ["cy", "fill"];
const _hoisted_13 = ["id", "values", "begin"];
const _hoisted_14 = ["cx", "cy", "fill"];
const _hoisted_15 = ["id", "values", "begin"];
const _hoisted_16 = ["values", "begin"];
const _hoisted_17 = ["cx", "cy", "fill"];
const _hoisted_18 = ["id", "values", "begin"];
const _hoisted_19 = ["values", "begin"];
const _hoisted_20 = ["cx", "cy", "fill"];
const _hoisted_21 = ["id", "values", "begin"];
const _hoisted_22 = ["values", "begin"];
const __default__ = vue.defineComponent({
name: "DvAdorn10"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
duration: {
type: Number,
default: 3
},
reverse: Boolean,
opacity: {
type: Number,
default: 1
}
},
emits: ["resize"],
setup(__props, { emit: __emit }) {
var _a, _b, _c;
const props = __props;
const _uid = util.uid();
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 { 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
);
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-adorn-10", vue.unref(classes)],
style: vue.unref(styles),
"default-width": "600px",
"default-height": "20px"
}, vue.unref($attrs)), {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createElementBlock("svg", {
width: `${vue.unref(width)}px`,
height: `${vue.unref(height)}px`
}, [
vue.createElementVNode("polyline", {
stroke: vue.unref(dark),
"stroke-width": "2",
points: `0, ${vue.unref(height) / 2} ${vue.unref(width)}, ${vue.unref(height) / 2}`
}, null, 8, _hoisted_2),
vue.createElementVNode("polyline", {
stroke: vue.unref(light),
"stroke-width": "2",
points: `5, ${vue.unref(height) / 2} ${vue.unref(width) * 0.2 - 3}, ${vue.unref(height) / 2}`,
"stroke-dasharray": `0, ${vue.unref(width) * 0.2}`,
fill: "freeze"
}, [
vue.createElementVNode("animate", {
id: `a2${vue.unref(_uid)}`,
attributeName: "stroke-dasharray",
values: `0, ${vue.unref(width) * 0.2};${vue.unref(width) * 0.2}, 0;`,
dur: "3s",
begin: `a1${vue.unref(_uid)}.end`,
fill: "freeze"
}, null, 8, _hoisted_4),
vue.createElementVNode("animate", {
attributeName: "stroke-dasharray",
values: `${vue.unref(width) * 0.2}, 0;0, ${vue.unref(width) * 0.2}`,
dur: "0.01s",
begin: `a7${vue.unref(_uid)}.end`,
fill: "freeze"
}, null, 8, _hoisted_5)
], 8, _hoisted_3),
vue.createElementVNode("polyline", {
stroke: vue.unref(light),
"stroke-width": "2",
points: `${vue.unref(width) * 0.2 + 3}, ${vue.unref(height) / 2} ${vue.unref(width) * 0.8 - 3}, ${vue.unref(height) / 2}`,
"stroke-dasharray": `0, ${vue.unref(width) * 0.6}`
}, [
vue.createElementVNode("animate", {
id: `a4${vue.unref(_uid)}`,
attributeName: "stroke-dasharray",
values: `0, ${vue.unref(width) * 0.6};${vue.unref(width) * 0.6}, 0`,
dur: "3s",
begin: `a3${vue.unref(_uid)}.end + 1s`,
fill: "freeze"
}, null, 8, _hoisted_7),
vue.createElementVNode("animate", {
attributeName: "stroke-dasharray",
values: `${vue.unref(width) * 0.6}, 0;0, ${vue.unref(width) * 0.6}`,
dur: "0.01s",
begin: `a7${vue.unref(_uid)}.end`,
fill: "freeze"
}, null, 8, _hoisted_8)
], 8, _hoisted_6),
vue.createElementVNode("polyline", {
stroke: vue.unref(light),
"stroke-width": "2",
points: `${vue.unref(width) * 0.8 + 3}, ${vue.unref(height) / 2} ${vue.unref(width) - 5}, ${vue.unref(height) / 2}`,
"stroke-dasharray": `0, ${vue.unref(width) * 0.2}`
}, [
vue.createElementVNode("animate", {
id: `a6${vue.unref(_uid)}`,
attributeName: "stroke-dasharray",
values: `0, ${vue.unref(width) * 0.2};${vue.unref(width) * 0.2}, 0`,
dur: "3s",
begin: `a5${vue.unref(_uid)}.end + 1s`,
fill: "freeze"
}, null, 8, _hoisted_10),
vue.createElementVNode("animate", {
attributeName: "stroke-dasharray",
values: `${vue.unref(width) * 0.2}, 0;0, ${vue.unref(width) * 0.3}`,
dur: "0.01s",
begin: `a7${vue.unref(_uid)}.end`,
fill: "freeze"
}, null, 8, _hoisted_11)
], 8, _hoisted_9),
vue.createElementVNode("circle", {
cx: "2",
cy: vue.unref(height) / 2,
r: "2",
fill: vue.unref(dark)
}, [
vue.createElementVNode("animate", {
id: `a1${vue.unref(_uid)}`,
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)}`,
begin: `0s;a7${vue.unref(_uid)}.end`,
dur: "0.3s",
fill: "freeze"
}, null, 8, _hoisted_13)
], 8, _hoisted_12),
vue.createElementVNode("circle", {
cx: vue.unref(width) * 0.2,
cy: vue.unref(height) / 2,
r: "2",
fill: vue.unref(dark)
}, [
vue.createElementVNode("animate", {
id: `a3${vue.unref(_uid)}`,
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)}`,
begin: `a2${vue.unref(_uid)}.end`,
dur: "0.3s",
fill: "freeze"
}, null, 8, _hoisted_15),
vue.createElementVNode("animate", {
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)}`,
dur: "0.01s",
begin: `a2${vue.unref(_uid)}.end`,
fill: "freeze"
}, null, 8, _hoisted_16)
], 8, _hoisted_14),
vue.createElementVNode("circle", {
cx: vue.unref(width) * 0.8,
cy: vue.unref(height) / 2,
r: "2",
fill: vue.unref(dark)
}, [
vue.createElementVNode("animate", {
id: `a5${vue.unref(_uid)}`,
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)}`,
begin: `a4${vue.unref(_uid)}.end`,
dur: "0.3s",
fill: "freeze"
}, null, 8, _hoisted_18),
vue.createElementVNode("animate", {
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)}`,
dur: "0.01s",
begin: `a7${vue.unref(_uid)}.end`,
fill: "freeze"
}, null, 8, _hoisted_19)
], 8, _hoisted_17),
vue.createElementVNode("circle", {
cx: vue.unref(width) - 2,
cy: vue.unref(height) / 2,
r: "2",
fill: vue.unref(dark)
}, [
vue.createElementVNode("animate", {
id: `a7${vue.unref(_uid)}`,
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)}`,
begin: `a6${vue.unref(_uid)}.end`,
dur: "0.3s",
fill: "freeze"
}, null, 8, _hoisted_21),
vue.createElementVNode("animate", {
attributeName: "fill",
values: `${vue.unref(dark)};${vue.unref(light)}`,
dur: "0.01s",
begin: `a7${vue.unref(_uid)}.end`,
fill: "freeze"
}, null, 8, _hoisted_22)
], 8, _hoisted_20)
], 8, _hoisted_1))
]),
_: 1
}, 16, ["class", "style"]);
};
}
});
exports.default = _sfc_main;