@zhsz/cool-design-dv/es/packages/dv-menu/MenuItem.vue.mjs

import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, unref, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString } from "vue";
import { uid } from "../../utils/util.mjs";
import "./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__ */ createElementVNode("stop", {
  offset: "0%",
  "stop-color": "#fff"
}, null, -1);
const _hoisted_9 = /* @__PURE__ */ 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__ */ 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__ */ 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 = uid();
    const props = __props;
    computed(() => {
      return typeof props.icon === "object" ? props.icon : {
        name: props.icon
      };
    });
    const classes = computed(() => {
      return {
        "is-active": props.active,
        "is-reverse": props.reverse
      };
    });
    const styles = computed(() => {
      return {
        width: `${props.width}px`,
        height: `${props.height}px`,
        lineHeight: `${props.height - 2 * props.strokeWidth}px`
      };
    });
    const path = 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 openBlock(), createElementBlock("div", {
        class: normalizeClass(["my-dv-menu-item", classes.value]),
        style: normalizeStyle(styles.value)
      }, [
        (openBlock(), createElementBlock("svg", {
          class: "my-dv-menu-item__svg",
          width: __props.width,
          height: __props.height
        }, [
          createElementVNode("g", null, [
            createElementVNode("path", {
              stroke: "transparent",
              fill: "transparent",
              "stroke-width": __props.strokeWidth,
              opacity: ".4",
              d: path.value
            }, [
              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),
            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),
            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 ? (openBlock(), createElementBlock("g", _hoisted_6, [
            createElementVNode("defs", null, [
              createElementVNode("radialGradient", {
                id: `prefix__a${unref(_uid)}`,
                cx: "50%",
                cy: "50%",
                r: "50%"
              }, _hoisted_10, 8, _hoisted_7),
              createElementVNode("path", {
                id: `prefix__b${unref(_uid)}`,
                d: path.value,
                fill: "transparent"
              }, null, 8, _hoisted_11),
              createElementVNode("mask", {
                id: `prefix__c${unref(_uid)}`
              }, [
                createElementVNode("circle", {
                  r: "20",
                  fill: `url(#prefix__a${unref(_uid)})`
                }, [
                  createElementVNode("animateMotion", {
                    dur: "4s",
                    path: path.value,
                    rotate: "auto",
                    repeatCount: "indefinite"
                  }, null, 8, _hoisted_14)
                ], 8, _hoisted_13)
              ], 8, _hoisted_12)
            ]),
            createElementVNode("use", {
              stroke: "rgba(29,225,255,0.6)",
              "stroke-width": "3",
              "xlink:href": `#prefix__b${unref(_uid)}`,
              mask: `url(#prefix__c${unref(_uid)})`
            }, _hoisted_17, 8, _hoisted_15)
          ])) : createCommentVNode("", true)
        ], 8, _hoisted_1)),
        createElementVNode("div", _hoisted_18, [
          (openBlock(), createBlock(resolveDynamicComponent(__props.icon))),
          renderSlot(_ctx.$slots, "default", {}, () => [
            createElementVNode("span", null, toDisplayString(__props.text), 1)
          ])
        ])
      ], 6);
    };
  }
});
export {
  _sfc_main as default
};