UNPKG

@zhsz/cool-design-dv

Version:

243 lines (242 loc) 10.2 kB
"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;