@zhsz/cool-design-dv
Version:
185 lines (184 loc) • 6.21 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const util = require("../../utils/util.js");
require("./MenuItem.css");
const _hoisted_1 = ["width", "height"];
const _hoisted_2 = ["stroke-width", "d"];
const _hoisted_3 = ["values"];
const _hoisted_4 = ["fill", "stroke-width", "d"];
const _hoisted_5 = ["stroke", "stroke-width", "d"];
const _hoisted_6 = { key: 0 };
const _hoisted_7 = ["id"];
const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("stop", {
offset: "0%",
"stop-color": "#fff"
}, null, -1);
const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("stop", {
offset: "200%",
"stop-color": "#fff",
"stop-opacity": "0"
}, null, -1);
const _hoisted_10 = [
_hoisted_8,
_hoisted_9
];
const _hoisted_11 = ["id", "d"];
const _hoisted_12 = ["id"];
const _hoisted_13 = ["fill"];
const _hoisted_14 = ["path"];
const _hoisted_15 = ["xlink:href", "mask"];
const _hoisted_16 = /* @__PURE__ */ vue.createElementVNode("animate", {
attributeName: "stroke-dasharray",
from: "0, 4000",
to: "4000, 0",
dur: "4s",
repeatCount: "indefinite"
}, null, -1);
const _hoisted_17 = [
_hoisted_16
];
const _hoisted_18 = { class: "my-dv-menu-item__content" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "MenuItem",
props: {
text: String,
icon: Object,
width: {
type: Number,
default: 200
},
height: {
type: Number,
default: 50
},
strokeWidth: {
type: Number,
default: 1
},
light: String,
dark: String,
active: Boolean,
reverse: Boolean
},
setup(__props) {
const _uid = util.uid();
const props = __props;
vue.computed(() => {
return typeof props.icon === "object" ? props.icon : {
name: props.icon
};
});
const classes = vue.computed(() => {
return {
"is-active": props.active,
"is-reverse": props.reverse
};
});
const styles = vue.computed(() => {
return {
width: `${props.width}px`,
height: `${props.height}px`,
lineHeight: `${props.height - 2 * props.strokeWidth}px`
};
});
const path = vue.computed(() => {
const { width, height, strokeWidth } = props;
const innerHeight = height - strokeWidth;
const innerWidth = width - strokeWidth;
return `M ${innerHeight} ${strokeWidth} H ${innerWidth} L ${width - innerHeight} ${innerHeight} H ${strokeWidth} Z`;
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["my-dv-menu-item", classes.value]),
style: vue.normalizeStyle(styles.value)
}, [
(vue.openBlock(), vue.createElementBlock("svg", {
class: "my-dv-menu-item__svg",
width: __props.width,
height: __props.height
}, [
vue.createElementVNode("g", null, [
vue.createElementVNode("path", {
stroke: "transparent",
fill: "transparent",
"stroke-width": __props.strokeWidth,
opacity: ".4",
d: path.value
}, [
vue.createElementVNode("animate", {
accumulate: "none",
additive: "replace",
attributeName: "fill",
begin: "0",
calcMode: "linear",
dur: "4",
repeatCount: "indefinite",
restart: "always",
values: `transparent;${__props.light};transparent`
}, null, 8, _hoisted_3)
], 8, _hoisted_2),
vue.createElementVNode("path", {
class: "my-dv-menu-item__bg",
stroke: "transparent",
fill: __props.light,
"stroke-width": __props.strokeWidth,
opacity: ".7",
d: path.value
}, null, 8, _hoisted_4),
vue.createElementVNode("path", {
class: "my-dv-menu-item__line",
stroke: __props.light,
fill: "transparent",
"stroke-width": __props.strokeWidth,
d: path.value
}, null, 8, _hoisted_5)
]),
__props.active ? (vue.openBlock(), vue.createElementBlock("g", _hoisted_6, [
vue.createElementVNode("defs", null, [
vue.createElementVNode("radialGradient", {
id: `prefix__a${vue.unref(_uid)}`,
cx: "50%",
cy: "50%",
r: "50%"
}, _hoisted_10, 8, _hoisted_7),
vue.createElementVNode("path", {
id: `prefix__b${vue.unref(_uid)}`,
d: path.value,
fill: "transparent"
}, null, 8, _hoisted_11),
vue.createElementVNode("mask", {
id: `prefix__c${vue.unref(_uid)}`
}, [
vue.createElementVNode("circle", {
r: "20",
fill: `url(#prefix__a${vue.unref(_uid)})`
}, [
vue.createElementVNode("animateMotion", {
dur: "4s",
path: path.value,
rotate: "auto",
repeatCount: "indefinite"
}, null, 8, _hoisted_14)
], 8, _hoisted_13)
], 8, _hoisted_12)
]),
vue.createElementVNode("use", {
stroke: "rgba(29,225,255,0.6)",
"stroke-width": "3",
"xlink:href": `#prefix__b${vue.unref(_uid)}`,
mask: `url(#prefix__c${vue.unref(_uid)})`
}, _hoisted_17, 8, _hoisted_15)
])) : vue.createCommentVNode("", true)
], 8, _hoisted_1)),
vue.createElementVNode("div", _hoisted_18, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.icon))),
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(__props.text), 1)
])
])
], 6);
};
}
});
exports.default = _sfc_main;