@zhsz/cool-design-dv
Version:
122 lines (121 loc) • 4.42 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("./style.css");
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 = ["height"];
const _hoisted_2 = ["stroke", "points"];
const _hoisted_3 = ["stroke", "points"];
const _hoisted_4 = ["height"];
const _hoisted_5 = ["stroke", "points"];
const _hoisted_6 = ["stroke", "points"];
const __default__ = vue.defineComponent({
name: "DvAdorn7"
});
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 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
);
const svgStyle = vue.computed(() => {
return {
...styles.value,
"line-height": `${height.value}px`
};
});
const $slots = vue.useSlots();
const spanStyle = vue.computed(() => {
if ($slots == null ? void 0 : $slots.default) {
return void 0;
}
return {
width: `${width.value - 21 - 21 - 20}px`
};
});
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-7", vue.unref(classes)],
style: svgStyle.value,
"default-width": "300px",
"default-height": "20px"
}, vue.unref($attrs)), {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createElementBlock("svg", {
width: "21px",
height: `${vue.unref(height)}px`
}, [
vue.createElementVNode("polyline", {
"stroke-width": "4",
fill: "transparent",
stroke: vue.unref(dark),
points: `10, 0 19, ${vue.unref(height) / 2} 10, ${vue.unref(height)}`
}, null, 8, _hoisted_2),
vue.createElementVNode("polyline", {
"stroke-width": "2",
fill: "transparent",
stroke: vue.unref(light),
points: `2, 0 11, ${vue.unref(height) / 2} 2, ${vue.unref(height)}`
}, null, 8, _hoisted_3)
], 8, _hoisted_1)),
vue.createElementVNode("span", {
style: vue.normalizeStyle(spanStyle.value)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 4),
(vue.openBlock(), vue.createElementBlock("svg", {
width: "21px",
height: `${vue.unref(height)}px`
}, [
vue.createElementVNode("polyline", {
"stroke-width": "4",
fill: "transparent",
stroke: vue.unref(dark),
points: `11, 0 2, ${vue.unref(height) / 2} 11, ${vue.unref(height)}`
}, null, 8, _hoisted_5),
vue.createElementVNode("polyline", {
"stroke-width": "2",
fill: "transparent",
stroke: vue.unref(light),
points: `19, 0 10, ${vue.unref(height) / 2} 19, ${vue.unref(height)}`
}, null, 8, _hoisted_6)
], 8, _hoisted_4))
]),
_: 3
}, 16, ["class", "style"]);
};
}
});
exports.default = _sfc_main;