winbox-ui-next/es/_components/dropdown/dropdown-option.js

We Design Vue 2.0: A Vue.js 3 UI Library

import { defineComponent, computed, resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode } from "vue";
import { getPrefixCls } from "../../_utils/global-config.js";
import Checkbox from "../../checkbox/index.js";
import _export_sfc from "../../_virtual/plugin-vue_export-helper";
const _sfc_main = defineComponent({
  name: "DropdownOption",
  components: {
    Checkbox
  },
  props: {
    value: [String, Number],
    label: String,
    disabled: Boolean,
    multiple: Boolean,
    isSelected: Boolean,
    isActive: Boolean,
    component: {
      type: String,
      default: "li"
    },
    onClick: {
      type: [Function, Array]
    },
    onMouseenter: {
      type: [Function, Array]
    },
    onMouseleave: {
      type: [Function, Array]
    }
  },
  emits: ["click", "mouseenter", "mouseleave"],
  setup(props, { emit }) {
    const prefixCls = getPrefixCls("dropdown-option");
    const handleClick = (e) => {
      if (!props.disabled) {
        emit("click", props.value, e);
      }
    };
    const handleMouseEnter = (e) => {
      if (!props.disabled) {
        emit("mouseenter", props.value, e);
      }
    };
    const handleMouseLeave = (e) => {
      if (!props.disabled) {
        emit("mouseleave", props.value, e);
      }
    };
    const cls = computed(() => [
      prefixCls,
      {
        [`${prefixCls}-disabled`]: props.disabled,
        [`${prefixCls}-active`]: props.isActive,
        [`${prefixCls}-multiple`]: props.multiple
      }
    ]);
    return {
      prefixCls,
      cls,
      handleClick,
      handleMouseEnter,
      handleMouseLeave
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_checkbox = resolveComponent("checkbox");
  return openBlock(), createBlock(resolveDynamicComponent(_ctx.component), {
    class: normalizeClass([_ctx.cls, { [`${_ctx.prefixCls}-has-suffix`]: Boolean(_ctx.$slots.suffix) }]),
    onClick: _ctx.handleClick,
    onMouseenter: _ctx.handleMouseEnter,
    onMouseleave: _ctx.handleMouseLeave
  }, {
    default: withCtx(() => [
      _ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
        key: 0,
        class: normalizeClass(`${_ctx.prefixCls}-icon`)
      }, [
        renderSlot(_ctx.$slots, "icon")
      ], 2)) : createCommentVNode("v-if", true),
      _ctx.multiple ? (openBlock(), createBlock(_component_checkbox, {
        key: 1,
        class: normalizeClass(`${_ctx.prefixCls}-checkbox`),
        "model-value": _ctx.isSelected,
        disabled: _ctx.disabled,
        "uninject-group-context": ""
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 8, ["class", "model-value", "disabled"])) : renderSlot(_ctx.$slots, "default", { key: 2 }),
      _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", {
        key: 3,
        class: normalizeClass(`${_ctx.prefixCls}-suffix`)
      }, [
        renderSlot(_ctx.$slots, "suffix")
      ], 2)) : createCommentVNode("v-if", true)
    ]),
    _: 3
  }, 8, ["class", "onClick", "onMouseenter", "onMouseleave"]);
}
var DropDownOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { DropDownOption as default };