@element-plus/nightly 0.0.20220303 → 0.0.20220306

package/es/components/color-picker/src/index.mjs

@@ -22,8 +22,9 @@ import { isValidComponentSize } from '../../../utils/vue/validator.mjs';
 import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+import { formContextKey, formItemContextKey } from '../../../tokens/form.mjs';
 import { useSize } from '../../../hooks/use-common-props/index.mjs';
+import { debugWarn } from '../../../utils/error.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElColorPicker",
@@ -58,8 +59,8 @@ const _sfc_main = defineComponent({
   setup(props, { emit }) {
     const { t } = useLocale();
     const ns = useNamespace("color");
-    const elForm = inject(elFormKey, {});
-    const elFormItem = inject(elFormItemKey, {});
+    const elForm = inject(formContextKey, {});
+    const elFormItem = inject(formItemContextKey, {});
     const hue = ref(null);
     const svPanel = ref(null);
     const alpha = ref(null);
@@ -138,7 +139,7 @@ const _sfc_main = defineComponent({
       const value = color.value;
       emit(UPDATE_MODEL_EVENT, value);
       emit("change", value);
-      (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+      (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn(err));
       debounceSetShowPicker(false);
       nextTick(() => {
         const newColor = new Color({
@@ -157,7 +158,7 @@ const _sfc_main = defineComponent({
       emit(UPDATE_MODEL_EVENT, null);
       emit("change", null);
       if (props.modelValue !== null) {
-        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn(err));
       }
       resetColor();
     }

package/es/components/color-picker/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div :class=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('dropdown', 'value')\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            :class=\"ns.be('dropdown', 'link-btn')\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            :class=\"ns.be('dropdown', 'btn')\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div\n        :class=\"[\n          ns.b('picker'),\n          ns.is('disabled', colorDisabled),\n          ns.bm('picker', colorSize),\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\"></div>\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize, useNamespace } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { isValidComponentSize } from '@element-plus/utils'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const ns = useNamespace('color')\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n        value: props.modelValue,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return !!(props.disabled || elForm.disabled)\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n          value: props.modelValue,\n        })\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      ns,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div :class=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('dropdown', 'value')\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            :class=\"ns.be('dropdown', 'link-btn')\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            :class=\"ns.be('dropdown', 'btn')\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div\n        :class=\"[\n          ns.b('picker'),\n          ns.is('disabled', colorDisabled),\n          ns.bm('picker', colorSize),\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\"></div>\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { formItemContextKey, formContextKey } from '@element-plus/tokens'\nimport { useLocale, useSize, useNamespace } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn, isValidComponentSize } from '@element-plus/utils'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\nimport type { PropType } from 'vue'\nimport type { FormContext, FormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const ns = useNamespace('color')\n    const elForm = inject(formContextKey, {} as FormContext)\n    const elFormItem = inject(formItemContextKey, {} as FormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n        value: props.modelValue,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return !!(props.disabled || elForm.disabled)\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change').catch((err) => debugWarn(err))\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n          value: props.modelValue,\n        })\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change').catch((err) => debugWarn(err))\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      ns,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeClass"],"mappings":"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"}

package/es/components/dropdown/index.d.ts

@@ -19,6 +19,7 @@ export declare const ElDropdown: import("element-plus/es/utils").SFCWithInstall<
     readonly tabindex: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, 0, unknown, unknown, unknown>;
     readonly maxHeight: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, "", unknown, unknown, unknown>;
     readonly popperClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly disabled: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }, {
     ns: {
         namespace: import("vue").ComputedRef<string>;
@@ -625,6 +626,7 @@ export declare const ElDropdown: import("element-plus/es/utils").SFCWithInstall<
     readonly tabindex: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, 0, unknown, unknown, unknown>;
     readonly maxHeight: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, "", unknown, unknown, unknown>;
     readonly popperClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly disabled: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     "onVisible-change"?: ((...args: any[]) => any) | undefined;
@@ -632,6 +634,7 @@ export declare const ElDropdown: import("element-plus/es/utils").SFCWithInstall<
 }, {
     type: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<import("element-plus/es/utils").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>>, unknown, unknown>;
     size: string;
+    disabled: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     effect: string;
     placement: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<import("@popperjs/core").Placement>, unknown, unknown>;
     popperClass: string;

package/es/components/dropdown/src/dropdown.d.ts

@@ -34,6 +34,7 @@ export declare const dropdownProps: {
     readonly tabindex: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, 0, unknown, unknown, unknown>;
     readonly maxHeight: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, "", unknown, unknown, unknown>;
     readonly popperClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly disabled: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 };
 export declare const dropdownItemProps: {
     readonly command: import("element-plus/es/utils").BuildPropReturn<readonly [ObjectConstructor, StringConstructor, NumberConstructor], () => {}, unknown, unknown, unknown>;

package/es/components/dropdown/src/dropdown.mjs

@@ -56,6 +56,10 @@ const dropdownProps = buildProps({
   popperClass: {
     type: String,
     default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 });
 const dropdownItemProps = buildProps({

package/es/components/dropdown/src/dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { createCollectionWithScope } from '@element-plus/components/collection'\nimport {\n  useTooltipTriggerProps,\n  useTooltipContentProps,\n} from '@element-plus/components/tooltip'\nimport type { Options } from '@popperjs/core'\n\nimport type { ButtonType } from '@element-plus/components/button'\nimport type { Placement } from '@element-plus/components/popper'\nimport type { ComponentInternalInstance, ComputedRef } from 'vue'\nimport type { Nullable } from '@element-plus/utils'\n\nexport interface IElDropdownInstance {\n  instance?: ComponentInternalInstance\n  dropdownSize?: ComputedRef<string>\n  handleClick?: () => void\n  commandHandler?: (...arg) => void\n  show?: () => void\n  hide?: () => void\n  trigger?: ComputedRef<string>\n  hideOnClick?: ComputedRef<boolean>\n  triggerElm?: ComputedRef<Nullable<HTMLButtonElement>>\n}\n\nexport const dropdownProps = buildProps({\n  trigger: useTooltipTriggerProps.trigger,\n  effect: {\n    ...useTooltipContentProps.effect,\n    default: 'light',\n  },\n  type: {\n    type: definePropType<ButtonType>(String),\n  },\n  placement: {\n    type: definePropType<Placement>(String),\n    default: 'bottom',\n  },\n  popperOptions: {\n    type: definePropType<Partial<Options>>(Object),\n    default: () => ({}),\n  },\n  size: {\n    type: String,\n    default: '',\n  },\n  splitButton: Boolean,\n  hideOnClick: {\n    type: Boolean,\n    default: true,\n  },\n  loop: {\n    type: Boolean,\n  },\n  showTimeout: {\n    type: Number,\n    default: 150,\n  },\n  hideTimeout: {\n    type: Number,\n    default: 150,\n  },\n  tabindex: {\n    type: definePropType<number | string>([Number, String]),\n    default: 0,\n  },\n  maxHeight: {\n    type: definePropType<number | string>([Number, String]),\n    default: '',\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n} as const)\n\nexport const dropdownItemProps = buildProps({\n  command: {\n    type: [Object, String, Number],\n    default: () => ({}),\n  },\n  disabled: Boolean,\n  divided: Boolean,\n  textValue: String,\n  icon: {\n    type: iconPropType,\n  },\n} as const)\n\nexport const dropdownMenuProps = buildProps({\n  onKeydown: { type: definePropType<(e: KeyboardEvent) => void>(Function) },\n})\n\nexport const FIRST_KEYS = [\n  EVENT_CODE.down,\n  EVENT_CODE.pageDown,\n  EVENT_CODE.home,\n]\n\nexport const LAST_KEYS = [EVENT_CODE.up, EVENT_CODE.pageUp, EVENT_CODE.end]\n\nexport const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS]\n\nconst {\n  ElCollection,\n  ElCollectionItem,\n  COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY,\n} = createCollectionWithScope('Dropdown')\n\nexport {\n  ElCollection,\n  ElCollectionItem,\n  COLLECTION_INJECTION_KEY as DROPDOWN_COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY as DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n}\n"],"names":[],"mappings":";;;;;;;;;;AAOY,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,OAAO,EAAE,sBAAsB,CAAC,OAAO;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,GAAG,sBAAsB,CAAC,MAAM;AACpC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE,OAAO;AACtB,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,OAAO;AACjB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC,EAAE;AACS,MAAC,iBAAiB,GAAG,UAAU,CAAC;AAC5C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAClC,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,SAAS,EAAE,MAAM;AACnB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,YAAY;AACtB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,iBAAiB,GAAG,UAAU,CAAC;AAC5C,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,EAAE;AAC/C,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,UAAU,CAAC,IAAI;AACjB,EAAE,UAAU,CAAC,QAAQ;AACrB,EAAE,UAAU,CAAC,IAAI;AACjB,EAAE;AACU,MAAC,SAAS,GAAG,CAAC,UAAU,CAAC,EAAE,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,EAAE;AAChE,MAAC,eAAe,GAAG,CAAC,GAAG,UAAU,EAAE,GAAG,SAAS,EAAE;AACxD,MAAC;AACN,EAAE,YAAY;AACd,EAAE,gBAAgB;AAClB,EAAE,wBAAwB;AAC1B,EAAE,6BAA6B;AAC/B,CAAC,GAAG,yBAAyB,CAAC,UAAU;;;;"}
+{"version":3,"file":"dropdown.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { createCollectionWithScope } from '@element-plus/components/collection'\nimport {\n  useTooltipTriggerProps,\n  useTooltipContentProps,\n} from '@element-plus/components/tooltip'\nimport type { Options } from '@popperjs/core'\n\nimport type { ButtonType } from '@element-plus/components/button'\nimport type { Placement } from '@element-plus/components/popper'\nimport type { ComponentInternalInstance, ComputedRef } from 'vue'\nimport type { Nullable } from '@element-plus/utils'\n\nexport interface IElDropdownInstance {\n  instance?: ComponentInternalInstance\n  dropdownSize?: ComputedRef<string>\n  handleClick?: () => void\n  commandHandler?: (...arg) => void\n  show?: () => void\n  hide?: () => void\n  trigger?: ComputedRef<string>\n  hideOnClick?: ComputedRef<boolean>\n  triggerElm?: ComputedRef<Nullable<HTMLButtonElement>>\n}\n\nexport const dropdownProps = buildProps({\n  trigger: useTooltipTriggerProps.trigger,\n  effect: {\n    ...useTooltipContentProps.effect,\n    default: 'light',\n  },\n  type: {\n    type: definePropType<ButtonType>(String),\n  },\n  placement: {\n    type: definePropType<Placement>(String),\n    default: 'bottom',\n  },\n  popperOptions: {\n    type: definePropType<Partial<Options>>(Object),\n    default: () => ({}),\n  },\n  size: {\n    type: String,\n    default: '',\n  },\n  splitButton: Boolean,\n  hideOnClick: {\n    type: Boolean,\n    default: true,\n  },\n  loop: {\n    type: Boolean,\n  },\n  showTimeout: {\n    type: Number,\n    default: 150,\n  },\n  hideTimeout: {\n    type: Number,\n    default: 150,\n  },\n  tabindex: {\n    type: definePropType<number | string>([Number, String]),\n    default: 0,\n  },\n  maxHeight: {\n    type: definePropType<number | string>([Number, String]),\n    default: '',\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\n\nexport const dropdownItemProps = buildProps({\n  command: {\n    type: [Object, String, Number],\n    default: () => ({}),\n  },\n  disabled: Boolean,\n  divided: Boolean,\n  textValue: String,\n  icon: {\n    type: iconPropType,\n  },\n} as const)\n\nexport const dropdownMenuProps = buildProps({\n  onKeydown: { type: definePropType<(e: KeyboardEvent) => void>(Function) },\n})\n\nexport const FIRST_KEYS = [\n  EVENT_CODE.down,\n  EVENT_CODE.pageDown,\n  EVENT_CODE.home,\n]\n\nexport const LAST_KEYS = [EVENT_CODE.up, EVENT_CODE.pageUp, EVENT_CODE.end]\n\nexport const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS]\n\nconst {\n  ElCollection,\n  ElCollectionItem,\n  COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY,\n} = createCollectionWithScope('Dropdown')\n\nexport {\n  ElCollection,\n  ElCollectionItem,\n  COLLECTION_INJECTION_KEY as DROPDOWN_COLLECTION_INJECTION_KEY,\n  COLLECTION_ITEM_INJECTION_KEY as DROPDOWN_COLLECTION_ITEM_INJECTION_KEY,\n}\n"],"names":[],"mappings":"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"}

package/es/components/dropdown/src/dropdown.vue.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly tabindex: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, 0, unknown, unknown, unknown>;
     readonly maxHeight: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, "", unknown, unknown, unknown>;
     readonly popperClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly disabled: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }, {
     ns: {
         namespace: import("vue").ComputedRef<string>;
@@ -626,6 +627,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly tabindex: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, 0, unknown, unknown, unknown>;
     readonly maxHeight: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, "", unknown, unknown, unknown>;
     readonly popperClass: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly disabled: import("element-plus/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     "onVisible-change"?: ((...args: any[]) => any) | undefined;
@@ -633,6 +635,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<import("element-plus/es/utils").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>>, unknown, unknown>;
     size: string;
+    disabled: import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     effect: string;
     placement: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<import("@popperjs/core").Placement>, unknown, unknown>;
     popperClass: string;

package/es/components/dropdown/src/dropdown2.mjs

@@ -133,7 +133,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = resolveComponent("el-icon");
   const _component_el_button_group = resolveComponent("el-button-group");
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.ns.b())
+    class: normalizeClass([_ctx.ns.b(), _ctx.ns.is("disabled", _ctx.disabled)])
   }, [
     createVNode(_component_el_tooltip, {
       ref: "popperRef",
@@ -151,6 +151,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "stop-popper-mouse-event": false,
       "virtual-ref": _ctx.triggeringElementRef,
       "virtual-triggering": _ctx.splitButton,
+      disabled: _ctx.disabled,
       "append-to-body": "",
       pure: "",
       transition: `${_ctx.ns.namespace.value}-zoom-in-top`,
@@ -207,25 +208,27 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 2)
         ])
       } : void 0
-    ]), 1032, ["effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "show-after", "virtual-ref", "virtual-triggering", "transition"]),
+    ]), 1032, ["effect", "popper-options", "hide-after", "placement", "popper-class", "reference-element", "trigger", "show-after", "virtual-ref", "virtual-triggering", "disabled", "transition"]),
     _ctx.splitButton ? (openBlock(), createBlock(_component_el_button_group, { key: 0 }, {
       default: withCtx(() => [
         createVNode(_component_el_button, {
           ref: "referenceElementRef",
           size: _ctx.dropdownSize,
           type: _ctx.type,
+          disabled: _ctx.disabled,
           onClick: _ctx.handlerMainButtonClick
         }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
           _: 3
-        }, 8, ["size", "type", "onClick"]),
+        }, 8, ["size", "type", "disabled", "onClick"]),
         createVNode(_component_el_button, {
           ref: "triggeringElementRef",
           size: _ctx.dropdownSize,
           type: _ctx.type,
-          class: normalizeClass(_ctx.ns.e("caret-button"))
+          class: normalizeClass(_ctx.ns.e("caret-button")),
+          disabled: _ctx.disabled
         }, {
           default: withCtx(() => [
             createVNode(_component_el_icon, {
@@ -238,7 +241,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, 8, ["class"])
           ]),
           _: 1
-        }, 8, ["size", "type", "class"])
+        }, 8, ["size", "type", "class", "disabled"])
       ]),
       _: 3
     })) : createCommentVNode("v-if", true)

package/es/components/dropdown/src/dropdown2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown2.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top']\"\n      :popper-options=\"popperOptions\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"[ns.e('popper'), popperClass]\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"div\"\n          :view-class=\"ns.e('list')\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          :class=\"ns.e('caret-button')\"\n        >\n          <el-icon :class=\"ns.e('icon')\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useNamespace, useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const ns = useNamespace('dropdown')\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)])\n\n    function handleClick() {\n      handleClose()\n    }\n\n    function handleClose() {\n      popperRef.value?.onClose()\n    }\n\n    function handleOpen() {\n      popperRef.value?.onOpen()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      ns,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      handleClose,\n      handleOpen,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollection","_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;;AAmGA,MAAM,EAAE,aAAa,kBAAkB;AAEvC,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,0BACAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO,CAAC,kBAAkB,SAAS;AAAA,EACnC,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,YAAY;AAClB,UAAM,KAAK,aAAa;AAExB,UAAM,uBAAuB;AAC7B,UAAM,sBAAsB;AAC5B,UAAM,YAAY,IAA2C;AAC7D,UAAM,aAAa,IAAwB;AAC3C,UAAM,YAAY,IAAI;AACtB,UAAM,eAAe,IAAmB;AACxC,UAAM,kBAAkB,IAAI;AAE5B,UAAM,YAAY,SAAwB;AAAO,MAC/C,WAAW,QAAQ,MAAM;AAAA;AAE3B,UAAM,qBAAqB,SAAS,MAAM,CAAC,GAAG,EAAE,aAAa;AAE7D,2BAAuB;AACrB;AAAA;AAGF,2BAAuB;AACrB;AAAiB;AAGnB;AACE,uBAAiB;AAAA;AAGnB;AAEA;AACE,sBAAgB,GAAG;AAAA;AAGrB;AAAuB;AAIvB,2BAAuB;AACrB;AAEA;AACA;AAAqB;AAGvB;AACE;AAAqB;AAGvB,8BAA0B;AACxB;AACE;AACA,UAAE;AAAA;AAAA;AAIN;AAAgC;AAC9B;AACA,MACA;AAAA,MACA;AAAA;AAGF;AAAsB,MACpB;AAAU;AACV,MACA;AAAA,MACA;AAAA,MACA;AAAsB,MACtB;AAA0B;AAG5B;AACE;AACA,wBAAkB;AAAQ;AACT;AAAA;AAInB;AACE;AAAc;AAGhB;AAAO,MACL;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;AA9IE;AAxEU;;AAmDD;AAjDP;AACK;AACa;AACL,MAChB;AAAkB,MAClB;AAAY,MACZ;AAAa,MACb;AAAW,MACX,yBAAkB;AAAa,MAC/B;AAAwC,MACxC;AAAS,MACT;AAAY,MACZ,2BAAyB;AAAA,MACzB;AAAa,MACb;AAAoB,MACrB;AAAA,MACA;AAAA,MACC,eAAe;AAAa,MAC7B;AAAA,MACC;AAAW,MACX,QAAI;AAAO;MAED;AAoBM,qBAAA;AAAA;AAlBT;AACS,eACTC;AAAA;AACa;4BAEjB;AAYgB;AAAA;AAZD;AAAyB;;AAWd;AAAA;AATf;AACU,8BACL;AAAA;AACY,kBACvB;AAAa;;AAIW;AAAA;AADM;AAAA;AAAA;;;;;;;;;;;;;;;;AAMR;AAGvB;AAAA,YAFA;AAAO;YACXA;AAAuB;;;;;AAsBT;AATJ;AAAA,eANN;AAAA;AACG;AACA;AACC;;AAEe;AAAA;AAAA;;;AASb;AANN,UACH;AAAM;AACA,wCACI,EAAC;AAAA;;AAE2C,yBAAA;AAAA,oCAAtC;AAAI;;AAAwB;AAAA;AAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown2.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.is('disabled', disabled)]\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top']\"\n      :popper-options=\"popperOptions\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"[ns.e('popper'), popperClass]\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      :disabled=\"disabled\"\n      append-to-body\n      pure\n      :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"div\"\n          :view-class=\"ns.e('list')\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          :class=\"ns.e('caret-button')\"\n          :disabled=\"disabled\"\n        >\n          <el-icon :class=\"ns.e('icon')\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useNamespace, useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n    const ns = useNamespace('dropdown')\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [ns.m(dropdownSize.value)])\n\n    function handleClick() {\n      handleClose()\n    }\n\n    function handleClose() {\n      popperRef.value?.onClose()\n    }\n\n    function handleOpen() {\n      popperRef.value?.onOpen()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      ns,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      handleClose,\n      handleOpen,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollection","_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;;AAsGA,MAAM,EAAE,aAAa,kBAAkB;AAEvC,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,0BACAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO,CAAC,kBAAkB,SAAS;AAAA,EACnC,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,YAAY;AAClB,UAAM,KAAK,aAAa;AAExB,UAAM,uBAAuB;AAC7B,UAAM,sBAAsB;AAC5B,UAAM,YAAY,IAA2C;AAC7D,UAAM,aAAa,IAAwB;AAC3C,UAAM,YAAY,IAAI;AACtB,UAAM,eAAe,IAAmB;AACxC,UAAM,kBAAkB,IAAI;AAE5B,UAAM,YAAY,SAAwB;AAAO,MAC/C,WAAW,QAAQ,MAAM;AAAA;AAE3B,UAAM,qBAAqB,SAAS,MAAM,CAAC,GAAG,EAAE,aAAa;AAE7D,2BAAuB;AACrB;AAAA;AAGF,2BAAuB;AACrB;AAAiB;AAGnB;AACE,uBAAiB;AAAA;AAGnB;AAEA;AACE,sBAAgB,GAAG;AAAA;AAGrB;AAAuB;AAIvB,2BAAuB;AACrB;AAEA;AACA;AAAqB;AAGvB;AACE;AAAqB;AAGvB,8BAA0B;AACxB;AACE;AACA,UAAE;AAAA;AAAA;AAIN;AAAgC;AAC9B;AACA,MACA;AAAA,MACA;AAAA;AAGF;AAAsB,MACpB;AAAU;AACV,MACA;AAAA,MACA;AAAA,MACA;AAAsB,MACtB;AAA0B;AAG5B;AACE;AACA,wBAAkB;AAAQ;AACT;AAAA;AAInB;AACE;AAAc;AAGhB;AAAO,MACL;AAAA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;AA9IE,gDA3EmB,eAAe;AAAA;;AAoDzB;AAlDP;AACK;AACa;AACL,MAChB;AAAkB,MAClB;AAAY,MACZ;AAAa,MACb;AAAW,MACX,yBAAkB;AAAa,MAC/B;AAAwC,MACxC;AAAS,MACT;AAAY,MACZ,2BAAyB;AAAA,MACzB;AAAa,MACb;AAAoB,MACpB;AAAU,MACX;AAAA,MACA;AAAA,MACC;AAA4B,MAC7B;AAAA,MACC;AAAW,MACX,QAAI;AAAO;MAED;AAoBM,qBAAA;AAAA;AAlBT;AACS,eACTC;AAAA;AACa;4BAEjB;AAYgB;AAAA;AAZD;AAAyB;;AAWd;AAAA;AATf;AACU,8BACL;AAAA;AACY,kBACvB;AAAa;;AAIW;AAAA;AADM;AAAA;AAAA;;;;;;;;;;;;;;;;AAMR;AAGvB;AAAA,YAFA;AAAO;YACXA;AAAuB;;;;;AAwBT;AAVJ;AAAA,eAPN;AAAA;AACG;AACA,mBACI;AAAA,UACV;AAAO;;AAEe,wBAAA;AAAA;AAAA;;;AAUb;AAPN,UACH;AAAM;AACA,wCACI,EAAC;AAAA,UACX;AAAU;;AAE4C;AAAA;AAAlC;;AAAwB;AAAA;AAAA;;;;;;;;;;;;;;;;;;"}