element-plus 2.14.1 → 2.14.3

package/es/components/select-v2/src/select.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/select-v2/src/select.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"selectRef\"\n    v-click-outside:[popperRef]=\"handleClickOutside\"\n    :class=\"[nsSelect.b(), nsSelect.m(selectSize)]\"\n    @mouseenter=\"states.inputHovering = true\"\n    @mouseleave=\"states.inputHovering = false\"\n  >\n    <el-tooltip\n      ref=\"tooltipRef\"\n      :visible=\"dropdownMenuVisible\"\n      :teleported=\"teleported\"\n      :popper-class=\"[nsSelect.e('popper'), popperClass!]\"\n      :popper-style=\"popperStyle\"\n      :gpu-acceleration=\"false\"\n      :stop-popper-mouse-event=\"false\"\n      :popper-options=\"popperOptions\"\n      :fallback-placements=\"fallbackPlacements\"\n      :effect=\"effect\"\n      :placement=\"placement\"\n      pure\n      :transition=\"`${nsSelect.namespace.value}-zoom-in-top`\"\n      trigger=\"click\"\n      :persistent=\"persistent\"\n      :append-to=\"appendTo\"\n      :show-arrow=\"showArrow\"\n      :offset=\"offset\"\n      @before-show=\"handleMenuEnter\"\n      @hide=\"states.isBeforeHide = false\"\n    >\n      <template #default>\n        <div\n          ref=\"wrapperRef\"\n          :class=\"[\n            nsSelect.e('wrapper'),\n            nsSelect.is('focused', isFocused),\n            nsSelect.is('hovering', states.inputHovering),\n            nsSelect.is('filterable', filterable),\n            nsSelect.is('disabled', selectDisabled),\n          ]\"\n          @click.prevent=\"toggleMenu\"\n        >\n          <div\n            v-if=\"$slots.prefix\"\n            ref=\"prefixRef\"\n            :class=\"nsSelect.e('prefix')\"\n          >\n            <slot name=\"prefix\" />\n          </div>\n          <div\n            ref=\"selectionRef\"\n            :class=\"[\n              nsSelect.e('selection'),\n              nsSelect.is(\n                'near',\n                multiple && !$slots.prefix && !!modelValue.length\n              ),\n            ]\"\n          >\n            <slot\n              v-if=\"multiple\"\n              name=\"tag\"\n              :data=\"states.cachedOptions\"\n              :delete-tag=\"deleteTag\"\n              :select-disabled=\"selectDisabled\"\n            >\n              <div\n                v-for=\"item in showTagList\"\n                :key=\"getValueKey(getValue(item))\"\n                :class=\"nsSelect.e('selected-item')\"\n              >\n                <el-tag\n                  :closable=\"!selectDisabled && !getDisabled(item)\"\n                  :size=\"collapseTagSize\"\n                  :type=\"tagType\"\n                  :effect=\"tagEffect\"\n                  disable-transitions\n                  :style=\"tagStyle\"\n                  @close=\"deleteTag($event, item)\"\n                >\n                  <span :class=\"nsSelect.e('tags-text')\">\n                    <slot\n                      name=\"label\"\n                      :index=\"getIndex(item)\"\n                      :label=\"getLabel(item)\"\n                      :value=\"getValue(item)\"\n                    >\n                      {{ getLabel(item) }}\n                    </slot>\n                  </span>\n                </el-tag>\n              </div>\n\n              <el-tooltip\n                v-if=\"\n                  collapseTags && states.cachedOptions.length > maxCollapseTags\n                \"\n                ref=\"tagTooltipRef\"\n                :disabled=\"dropdownMenuVisible || !collapseTagsTooltip\"\n                :fallback-placements=\"\n                  tagTooltip?.fallbackPlacements ?? [\n                    'bottom',\n                    'top',\n                    'right',\n                    'left',\n                  ]\n                \"\n                :effect=\"tagTooltip?.effect ?? effect\"\n                :placement=\"tagTooltip?.placement ?? 'bottom'\"\n                :popper-class=\"tagTooltip?.popperClass ?? popperClass\"\n                :popper-style=\"tagTooltip?.popperStyle ?? popperStyle\"\n                :teleported=\"tagTooltip?.teleported ?? teleported\"\n                :append-to=\"tagTooltip?.appendTo ?? appendTo\"\n                :popper-options=\"tagTooltip?.popperOptions ?? popperOptions\"\n                :transition=\"tagTooltip?.transition\"\n                :show-after=\"tagTooltip?.showAfter\"\n                :hide-after=\"tagTooltip?.hideAfter\"\n                :auto-close=\"tagTooltip?.autoClose\"\n                :offset=\"tagTooltip?.offset\"\n              >\n                <template #default>\n                  <div\n                    ref=\"collapseItemRef\"\n                    :class=\"nsSelect.e('selected-item')\"\n                  >\n                    <el-tag\n                      :closable=\"false\"\n                      :size=\"collapseTagSize\"\n                      :type=\"tagType\"\n                      :effect=\"tagEffect\"\n                      :style=\"collapseTagStyle\"\n                      disable-transitions\n                    >\n                      <span :class=\"nsSelect.e('tags-text')\">\n                        + {{ states.cachedOptions.length - maxCollapseTags }}\n                      </span>\n                    </el-tag>\n                  </div>\n                </template>\n                <template #content>\n                  <div ref=\"tagMenuRef\" :class=\"nsSelect.e('selection')\">\n                    <div\n                      v-for=\"selected in collapseTagList\"\n                      :key=\"getValueKey(getValue(selected))\"\n                      :class=\"nsSelect.e('selected-item')\"\n                    >\n                      <el-tag\n                        class=\"in-tooltip\"\n                        :closable=\"!selectDisabled && !getDisabled(selected)\"\n                        :size=\"collapseTagSize\"\n                        :type=\"tagType\"\n                        :effect=\"tagEffect\"\n                        disable-transitions\n                        @close=\"deleteTag($event, selected)\"\n                      >\n                        <span :class=\"nsSelect.e('tags-text')\">\n                          <slot\n                            name=\"label\"\n                            :index=\"getIndex(selected)\"\n                            :label=\"getLabel(selected)\"\n                            :value=\"getValue(selected)\"\n                          >\n                            {{ getLabel(selected) }}\n                          </slot>\n                        </span>\n                      </el-tag>\n                    </div>\n                  </div>\n                </template>\n              </el-tooltip>\n            </slot>\n            <div\n              :class=\"[\n                nsSelect.e('selected-item'),\n                nsSelect.e('input-wrapper'),\n                nsSelect.is(\n                  'hidden',\n                  !filterable ||\n                    selectDisabled ||\n                    (!states.inputValue && !isFocused)\n                ),\n              ]\"\n            >\n              <input\n                :id=\"inputId\"\n                ref=\"inputRef\"\n                :value=\"states.inputValue\"\n                :style=\"inputStyle\"\n                :autocomplete=\"autocomplete\"\n                :tabindex=\"tabindex\"\n                aria-autocomplete=\"none\"\n                aria-haspopup=\"listbox\"\n                autocapitalize=\"off\"\n                :aria-expanded=\"expanded\"\n                :aria-label=\"ariaLabel\"\n                :class=\"[nsSelect.e('input'), nsSelect.is(selectSize)]\"\n                :disabled=\"selectDisabled\"\n                role=\"combobox\"\n                :aria-controls=\"contentId\"\n                :aria-activedescendant=\"\n                  states.hoveringIndex >= 0\n                    ? `${contentId}-${states.hoveringIndex}`\n                    : ''\n                \"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :name=\"name\"\n                @input=\"onInput\"\n                @change.stop\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @keydown.delete.stop=\"handleDel\"\n                @click.stop=\"toggleMenu\"\n              />\n              <span\n                v-if=\"filterable\"\n                ref=\"calculatorRef\"\n                aria-hidden=\"true\"\n                :class=\"nsSelect.e('input-calculator')\"\n                v-text=\"states.inputValue\"\n              />\n            </div>\n            <div\n              v-if=\"shouldShowPlaceholder\"\n              :class=\"[\n                nsSelect.e('selected-item'),\n                nsSelect.e('placeholder'),\n                nsSelect.is(\n                  'transparent',\n                  !hasModelValue || (expanded && !states.inputValue)\n                ),\n              ]\"\n            >\n              <slot\n                v-if=\"hasModelValue\"\n                name=\"label\"\n                :index=\"allOptionsValueMap.get(modelValue)?.index ?? -1\"\n                :label=\"currentPlaceholder\"\n                :value=\"modelValue\"\n              >\n                <span>{{ currentPlaceholder }}</span>\n              </slot>\n              <span v-else>{{ currentPlaceholder }}</span>\n            </div>\n          </div>\n          <div ref=\"suffixRef\" :class=\"nsSelect.e('suffix')\">\n            <el-icon\n              v-if=\"iconComponent\"\n              v-show=\"!showClearBtn\"\n              :class=\"[nsSelect.e('caret'), nsInput.e('icon'), iconReverse]\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <el-icon\n              v-if=\"showClearBtn && clearIcon\"\n              :class=\"[\n                nsSelect.e('caret'),\n                nsInput.e('icon'),\n                nsSelect.e('clear'),\n              ]\"\n              @click.prevent.stop=\"handleClear\"\n            >\n              <component :is=\"clearIcon\" />\n            </el-icon>\n            <el-icon\n              v-if=\"validateState && validateIcon && needStatusIcon\"\n              :class=\"[\n                nsInput.e('icon'),\n                nsInput.e('validateIcon'),\n                nsInput.is('loading', validateState === 'validating'),\n              ]\"\n            >\n              <component :is=\"validateIcon\" />\n            </el-icon>\n          </div>\n        </div>\n      </template>\n      <template #content>\n        <el-select-menu\n          :id=\"contentId\"\n          ref=\"menuRef\"\n          :data=\"filteredOptions\"\n          :width=\"popperSize - BORDER_HORIZONTAL_WIDTH\"\n          :hovering-index=\"states.hoveringIndex\"\n          :scrollbar-always-on=\"scrollbarAlwaysOn\"\n          :aria-label=\"ariaLabel\"\n          @end-reached=\"onEndReached\"\n        >\n          <template v-if=\"$slots.header\" #header>\n            <div :class=\"nsSelect.be('dropdown', 'header')\" @click.stop>\n              <slot name=\"header\" />\n            </div>\n          </template>\n          <template #default=\"scope\">\n            <slot v-bind=\"scope\" />\n          </template>\n          <template v-if=\"$slots.loading && loading\" #loading>\n            <div :class=\"nsSelect.be('dropdown', 'loading')\">\n              <slot name=\"loading\" />\n            </div>\n          </template>\n          <template v-else-if=\"loading || filteredOptions.length === 0\" #empty>\n            <div :class=\"nsSelect.be('dropdown', 'empty')\">\n              <slot name=\"empty\">\n                <span>{{ emptyText }}</span>\n              </slot>\n            </div>\n          </template>\n          <template v-if=\"$slots.footer\" #footer>\n            <div :class=\"nsSelect.be('dropdown', 'footer')\" @click.stop>\n              <slot name=\"footer\" />\n            </div>\n          </template>\n        </el-select-menu>\n      </template>\n    </el-tooltip>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, provide, reactive, toRefs } from 'vue'\nimport { isArray } from '@element-plus/utils'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { useCalcInputWidth, useId } from '@element-plus/hooks'\nimport ElSelectMenu from './select-dropdown'\nimport useSelect from './useSelect'\nimport { selectV2Emits, selectV2Props } from './defaults'\nimport { selectV2InjectionKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n  name: 'ElSelectV2',\n  components: {\n    ElSelectMenu,\n    ElTag,\n    ElTooltip,\n    ElIcon,\n  },\n  directives: { ClickOutside },\n  props: selectV2Props,\n  emits: selectV2Emits,\n  setup(props, { emit }) {\n    const modelValue = computed(() => {\n      const { modelValue: rawModelValue, multiple } = props\n      const fallback = multiple ? [] : undefined\n      // When it is array, we check if this is multi-select.\n      // Based on the result we get\n      if (isArray(rawModelValue)) {\n        return multiple ? rawModelValue : fallback\n      }\n      return multiple ? fallback : rawModelValue\n    })\n\n    const API = useSelect(\n      reactive({\n        ...toRefs(props),\n        modelValue,\n      }),\n      emit\n    )\n    const { calculatorRef, inputStyle } = useCalcInputWidth()\n    const contentId = useId()\n\n    provide(selectV2InjectionKey, {\n      props: reactive({\n        ...toRefs(props),\n        height: API.popupHeight,\n        modelValue,\n      }),\n      expanded: API.expanded,\n      tooltipRef: API.tooltipRef,\n      contentId,\n      onSelect: API.onSelect,\n      onHover: API.onHover,\n      onKeyboardNavigate: API.onKeyboardNavigate,\n      onKeyboardSelect: API.onKeyboardSelect,\n    })\n\n    const selectedLabel = computed(() => {\n      if (!props.multiple) {\n        return API.states.selectedLabel\n      }\n      return API.states.cachedOptions.map((i) => API.getLabel(i) as string)\n    })\n\n    return {\n      ...API,\n      modelValue,\n      selectedLabel,\n      calculatorRef,\n      inputStyle,\n      contentId,\n      BORDER_HORIZONTAL_WIDTH,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;AAmVA,IAAA,0CAAe,gBAAgB;CAC7B,MAAM;CACN,YAAY;EACV,cAAA;EACA;EACA;EACA;EACD;CACD,YAAY,EAAE,cAAc;CAC5B,OAAO;CACP,OAAO;CACP,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,aAAa,eAAe;GAChC,MAAM,EAAE,YAAY,eAAe,aAAa;GAChD,MAAM,WAAW,WAAW,EAAC,GAAI,KAAA;GAGjC,IAAI,QAAQ,cAAc,EACxB,OAAO,WAAW,gBAAgB;GAEpC,OAAO,WAAW,WAAW;IAC9B;EAED,MAAM,MAAM,UACV,SAAS;GACP,GAAG,OAAO,MAAM;GAChB;GACD,CAAC,EACF,KACF;EACA,MAAM,EAAE,eAAe,eAAe,mBAAkB;EACxD,MAAM,YAAY,OAAM;EAExB,QAAQ,sBAAsB;GAC5B,OAAO,SAAS;IACd,GAAG,OAAO,MAAM;IAChB,QAAQ,IAAI;IACZ;IACD,CAAC;GACF,UAAU,IAAI;GACd,YAAY,IAAI;GAChB;GACA,UAAU,IAAI;GACd,SAAS,IAAI;GACb,oBAAoB,IAAI;GACxB,kBAAkB,IAAI;GACvB,CAAA;EAED,MAAM,gBAAgB,eAAe;GACnC,IAAI,CAAC,MAAM,UACT,OAAO,IAAI,OAAO;GAEpB,OAAO,IAAI,OAAO,cAAc,KAAK,MAAM,IAAI,SAAS,EAAC,CAAW;IACrE;EAED,OAAO;GACL,GAAG;GACH;GACA;GACA;GACA;GACA;GACA,yBAAA;GACF;;CAEH,CAAA"}
+{"version":3,"file":"select.vue_vue_type_script_lang.mjs","names":[],"sources":["../../../../../../packages/components/select-v2/src/select.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"selectRef\"\n    v-click-outside:[popperRef]=\"handleClickOutside\"\n    :class=\"[nsSelect.b(), nsSelect.m(selectSize)]\"\n    @mouseenter=\"states.inputHovering = true\"\n    @mouseleave=\"states.inputHovering = false\"\n  >\n    <el-tooltip\n      ref=\"tooltipRef\"\n      :visible=\"dropdownMenuVisible\"\n      :teleported=\"teleported\"\n      :popper-class=\"[nsSelect.e('popper'), popperClass!]\"\n      :popper-style=\"popperStyle\"\n      :gpu-acceleration=\"false\"\n      :stop-popper-mouse-event=\"false\"\n      :popper-options=\"popperOptions\"\n      :fallback-placements=\"fallbackPlacements\"\n      :effect=\"effect\"\n      :placement=\"placement\"\n      pure\n      :transition=\"`${nsSelect.namespace.value}-zoom-in-top`\"\n      trigger=\"click\"\n      :persistent=\"persistent\"\n      :append-to=\"appendTo\"\n      :show-arrow=\"showArrow\"\n      :offset=\"offset\"\n      @before-show=\"handleMenuEnter\"\n      @hide=\"states.isBeforeHide = false\"\n    >\n      <template #default>\n        <div\n          ref=\"wrapperRef\"\n          :class=\"[\n            nsSelect.e('wrapper'),\n            nsSelect.is('focused', isFocused),\n            nsSelect.is('hovering', states.inputHovering),\n            nsSelect.is('filterable', filterable),\n            nsSelect.is('disabled', selectDisabled),\n          ]\"\n          @click.prevent=\"toggleMenu\"\n        >\n          <div\n            v-if=\"$slots.prefix\"\n            ref=\"prefixRef\"\n            :class=\"nsSelect.e('prefix')\"\n          >\n            <slot name=\"prefix\" />\n          </div>\n          <div\n            ref=\"selectionRef\"\n            :class=\"[\n              nsSelect.e('selection'),\n              nsSelect.is(\n                'near',\n                multiple && !$slots.prefix && !!modelValue.length\n              ),\n            ]\"\n          >\n            <slot\n              v-if=\"multiple\"\n              name=\"tag\"\n              :data=\"states.cachedOptions\"\n              :delete-tag=\"deleteTag\"\n              :select-disabled=\"selectDisabled\"\n            >\n              <div\n                v-for=\"item in showTagList\"\n                :key=\"getValueKey(getValue(item))\"\n                :class=\"nsSelect.e('selected-item')\"\n              >\n                <el-tag\n                  :closable=\"!selectDisabled && !getDisabled(item)\"\n                  :size=\"collapseTagSize\"\n                  :type=\"tagType\"\n                  :effect=\"tagEffect\"\n                  disable-transitions\n                  :style=\"tagStyle\"\n                  @close=\"deleteTag($event, item)\"\n                >\n                  <span :class=\"nsSelect.e('tags-text')\">\n                    <slot\n                      name=\"label\"\n                      :index=\"getIndex(item)\"\n                      :label=\"getLabel(item)\"\n                      :value=\"getValue(item)\"\n                    >\n                      {{ getLabel(item) }}\n                    </slot>\n                  </span>\n                </el-tag>\n              </div>\n\n              <el-tooltip\n                v-if=\"\n                  collapseTags && states.cachedOptions.length > maxCollapseTags\n                \"\n                ref=\"tagTooltipRef\"\n                :disabled=\"dropdownMenuVisible || !collapseTagsTooltip\"\n                :fallback-placements=\"\n                  tagTooltip?.fallbackPlacements ?? [\n                    'bottom',\n                    'top',\n                    'right',\n                    'left',\n                  ]\n                \"\n                :effect=\"tagTooltip?.effect ?? effect\"\n                :placement=\"tagTooltip?.placement ?? 'bottom'\"\n                :popper-class=\"tagTooltip?.popperClass ?? popperClass\"\n                :popper-style=\"tagTooltip?.popperStyle ?? popperStyle\"\n                :teleported=\"tagTooltip?.teleported ?? teleported\"\n                :append-to=\"tagTooltip?.appendTo ?? appendTo\"\n                :popper-options=\"tagTooltip?.popperOptions ?? popperOptions\"\n                :transition=\"tagTooltip?.transition\"\n                :show-after=\"tagTooltip?.showAfter\"\n                :hide-after=\"tagTooltip?.hideAfter\"\n                :auto-close=\"tagTooltip?.autoClose\"\n                :offset=\"tagTooltip?.offset\"\n              >\n                <template #default>\n                  <div\n                    ref=\"collapseItemRef\"\n                    :class=\"nsSelect.e('selected-item')\"\n                  >\n                    <el-tag\n                      :closable=\"false\"\n                      :size=\"collapseTagSize\"\n                      :type=\"tagType\"\n                      :effect=\"tagEffect\"\n                      :style=\"collapseTagStyle\"\n                      disable-transitions\n                    >\n                      <span :class=\"nsSelect.e('tags-text')\">\n                        + {{ states.cachedOptions.length - maxCollapseTags }}\n                      </span>\n                    </el-tag>\n                  </div>\n                </template>\n                <template #content>\n                  <div ref=\"tagMenuRef\" :class=\"nsSelect.e('selection')\">\n                    <div\n                      v-for=\"selected in collapseTagList\"\n                      :key=\"getValueKey(getValue(selected))\"\n                      :class=\"nsSelect.e('selected-item')\"\n                    >\n                      <el-tag\n                        class=\"in-tooltip\"\n                        :closable=\"!selectDisabled && !getDisabled(selected)\"\n                        :size=\"collapseTagSize\"\n                        :type=\"tagType\"\n                        :effect=\"tagEffect\"\n                        disable-transitions\n                        @close=\"deleteTag($event, selected)\"\n                      >\n                        <span :class=\"nsSelect.e('tags-text')\">\n                          <slot\n                            name=\"label\"\n                            :index=\"getIndex(selected)\"\n                            :label=\"getLabel(selected)\"\n                            :value=\"getValue(selected)\"\n                          >\n                            {{ getLabel(selected) }}\n                          </slot>\n                        </span>\n                      </el-tag>\n                    </div>\n                  </div>\n                </template>\n              </el-tooltip>\n            </slot>\n            <div\n              :class=\"[\n                nsSelect.e('selected-item'),\n                nsSelect.e('input-wrapper'),\n                nsSelect.is(\n                  'hidden',\n                  !filterable ||\n                    selectDisabled ||\n                    (multiple && !states.inputValue && !isFocused)\n                ),\n              ]\"\n            >\n              <input\n                :id=\"inputId\"\n                ref=\"inputRef\"\n                :value=\"states.inputValue\"\n                :style=\"inputStyle\"\n                :autocomplete=\"autocomplete\"\n                :tabindex=\"tabindex\"\n                aria-autocomplete=\"none\"\n                aria-haspopup=\"listbox\"\n                autocapitalize=\"off\"\n                :aria-expanded=\"expanded\"\n                :aria-label=\"ariaLabel\"\n                :class=\"[nsSelect.e('input'), nsSelect.is(selectSize)]\"\n                :disabled=\"selectDisabled\"\n                role=\"combobox\"\n                :aria-controls=\"contentId\"\n                :aria-activedescendant=\"\n                  states.hoveringIndex >= 0\n                    ? `${contentId}-${states.hoveringIndex}`\n                    : ''\n                \"\n                :readonly=\"!filterable\"\n                spellcheck=\"false\"\n                type=\"text\"\n                :name=\"name\"\n                @input=\"onInput\"\n                @change.stop\n                @compositionstart=\"handleCompositionStart\"\n                @compositionupdate=\"handleCompositionUpdate\"\n                @compositionend=\"handleCompositionEnd\"\n                @keydown.up.stop.prevent=\"onKeyboardNavigate('backward')\"\n                @keydown.down.stop.prevent=\"onKeyboardNavigate('forward')\"\n                @keydown.enter.stop.prevent=\"onKeyboardSelect\"\n                @keydown.esc.stop.prevent=\"handleEsc\"\n                @keydown.delete.stop=\"handleDel\"\n                @click.stop=\"toggleMenu\"\n              />\n              <span\n                v-if=\"filterable\"\n                ref=\"calculatorRef\"\n                aria-hidden=\"true\"\n                :class=\"nsSelect.e('input-calculator')\"\n                v-text=\"states.inputValue\"\n              />\n            </div>\n            <div\n              v-if=\"shouldShowPlaceholder\"\n              :class=\"[\n                nsSelect.e('selected-item'),\n                nsSelect.e('placeholder'),\n                nsSelect.is(\n                  'transparent',\n                  !hasModelValue || (expanded && !states.inputValue)\n                ),\n              ]\"\n            >\n              <slot\n                v-if=\"hasModelValue\"\n                name=\"label\"\n                :index=\"allOptionsValueMap.get(modelValue)?.index ?? -1\"\n                :label=\"currentPlaceholder\"\n                :value=\"modelValue\"\n              >\n                <span>{{ currentPlaceholder }}</span>\n              </slot>\n              <span v-else>{{ currentPlaceholder }}</span>\n            </div>\n          </div>\n          <div ref=\"suffixRef\" :class=\"nsSelect.e('suffix')\">\n            <el-icon\n              v-if=\"iconComponent\"\n              v-show=\"!showClearBtn\"\n              :class=\"[nsSelect.e('caret'), nsInput.e('icon'), iconReverse]\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <el-icon\n              v-if=\"showClearBtn && clearIcon\"\n              :class=\"[\n                nsSelect.e('caret'),\n                nsInput.e('icon'),\n                nsSelect.e('clear'),\n              ]\"\n              @click.prevent.stop=\"handleClear\"\n            >\n              <component :is=\"clearIcon\" />\n            </el-icon>\n            <el-icon\n              v-if=\"validateState && validateIcon && needStatusIcon\"\n              :class=\"[\n                nsInput.e('icon'),\n                nsInput.e('validateIcon'),\n                nsInput.is('loading', validateState === 'validating'),\n              ]\"\n            >\n              <component :is=\"validateIcon\" />\n            </el-icon>\n          </div>\n        </div>\n      </template>\n      <template #content>\n        <el-select-menu\n          :id=\"contentId\"\n          ref=\"menuRef\"\n          :data=\"filteredOptions\"\n          :width=\"popperSize - BORDER_HORIZONTAL_WIDTH\"\n          :hovering-index=\"states.hoveringIndex\"\n          :scrollbar-always-on=\"scrollbarAlwaysOn\"\n          :aria-label=\"ariaLabel\"\n          @end-reached=\"onEndReached\"\n        >\n          <template v-if=\"$slots.header\" #header>\n            <div :class=\"nsSelect.be('dropdown', 'header')\" @click.stop>\n              <slot name=\"header\" />\n            </div>\n          </template>\n          <template #default=\"scope\">\n            <slot v-bind=\"scope\" />\n          </template>\n          <template v-if=\"$slots.loading && loading\" #loading>\n            <div :class=\"nsSelect.be('dropdown', 'loading')\">\n              <slot name=\"loading\" />\n            </div>\n          </template>\n          <template v-else-if=\"loading || filteredOptions.length === 0\" #empty>\n            <div :class=\"nsSelect.be('dropdown', 'empty')\">\n              <slot name=\"empty\">\n                <span>{{ emptyText }}</span>\n              </slot>\n            </div>\n          </template>\n          <template v-if=\"$slots.footer\" #footer>\n            <div :class=\"nsSelect.be('dropdown', 'footer')\" @click.stop>\n              <slot name=\"footer\" />\n            </div>\n          </template>\n        </el-select-menu>\n      </template>\n    </el-tooltip>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, provide, reactive, toRefs } from 'vue'\nimport { isArray } from '@element-plus/utils'\nimport { ClickOutside } from '@element-plus/directives'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { useCalcInputWidth, useId } from '@element-plus/hooks'\nimport ElSelectMenu from './select-dropdown'\nimport useSelect from './useSelect'\nimport { selectV2Emits, selectV2Props } from './defaults'\nimport { selectV2InjectionKey } from './token'\nimport { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'\n\nexport default defineComponent({\n  name: 'ElSelectV2',\n  components: {\n    ElSelectMenu,\n    ElTag,\n    ElTooltip,\n    ElIcon,\n  },\n  directives: { ClickOutside },\n  props: selectV2Props,\n  emits: selectV2Emits,\n  setup(props, { emit }) {\n    const modelValue = computed(() => {\n      const { modelValue: rawModelValue, multiple } = props\n      const fallback = multiple ? [] : undefined\n      // When it is array, we check if this is multi-select.\n      // Based on the result we get\n      if (isArray(rawModelValue)) {\n        return multiple ? rawModelValue : fallback\n      }\n      return multiple ? fallback : rawModelValue\n    })\n\n    const API = useSelect(\n      reactive({\n        ...toRefs(props),\n        modelValue,\n      }),\n      emit\n    )\n    const { calculatorRef, inputStyle } = useCalcInputWidth()\n    const contentId = useId()\n\n    provide(selectV2InjectionKey, {\n      props: reactive({\n        ...toRefs(props),\n        height: API.popupHeight,\n        modelValue,\n      }),\n      expanded: API.expanded,\n      tooltipRef: API.tooltipRef,\n      contentId,\n      onSelect: API.onSelect,\n      onHover: API.onHover,\n      onKeyboardNavigate: API.onKeyboardNavigate,\n      onKeyboardSelect: API.onKeyboardSelect,\n    })\n\n    const selectedLabel = computed(() => {\n      if (!props.multiple) {\n        return API.states.selectedLabel\n      }\n      return API.states.cachedOptions.map((i) => API.getLabel(i) as string)\n    })\n\n    return {\n      ...API,\n      modelValue,\n      selectedLabel,\n      calculatorRef,\n      inputStyle,\n      contentId,\n      BORDER_HORIZONTAL_WIDTH,\n    }\n  },\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;AAmVA,IAAA,0CAAe,gBAAgB;CAC7B,MAAM;CACN,YAAY;EACV,cAAA;EACA;EACA;EACA;EACD;CACD,YAAY,EAAE,cAAc;CAC5B,OAAO;CACP,OAAO;CACP,MAAM,OAAO,EAAE,QAAQ;EACrB,MAAM,aAAa,eAAe;GAChC,MAAM,EAAE,YAAY,eAAe,aAAa;GAChD,MAAM,WAAW,WAAW,EAAC,GAAI,KAAA;GAGjC,IAAI,QAAQ,cAAc,EACxB,OAAO,WAAW,gBAAgB;GAEpC,OAAO,WAAW,WAAW;IAC9B;EAED,MAAM,MAAM,UACV,SAAS;GACP,GAAG,OAAO,MAAM;GAChB;GACD,CAAC,EACF,KACF;EACA,MAAM,EAAE,eAAe,eAAe,mBAAkB;EACxD,MAAM,YAAY,OAAM;EAExB,QAAQ,sBAAsB;GAC5B,OAAO,SAAS;IACd,GAAG,OAAO,MAAM;IAChB,QAAQ,IAAI;IACZ;IACD,CAAC;GACF,UAAU,IAAI;GACd,YAAY,IAAI;GAChB;GACA,UAAU,IAAI;GACd,SAAS,IAAI;GACb,oBAAoB,IAAI;GACxB,kBAAkB,IAAI;GACvB,CAAA;EAED,MAAM,gBAAgB,eAAe;GACnC,IAAI,CAAC,MAAM,UACT,OAAO,IAAI,OAAO;GAEpB,OAAO,IAAI,OAAO,cAAc,KAAK,MAAM,IAAI,SAAS,EAAC,CAAW;IACrE;EAED,OAAO;GACL,GAAG;GACH;GACA;GACA;GACA;GACA;GACA,yBAAA;GACF;;CAEH,CAAA"}

package/es/components/select-v2/src/useSelect.d.ts

@@ -95,7 +95,7 @@ declare const useSelect: (props: SelectV2Props, emit: SelectV2EmitFn) => {
   suffixRef: _$vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
   collapseItemRef: _$vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
   popperRef: _$vue.ComputedRef<HTMLElement | undefined>;
-  validateState: _$vue.ComputedRef<"" | "success" | "error" | "validating">;
+  validateState: _$vue.ComputedRef<"" | "error" | "success" | "validating">;
   validateIcon: _$vue.ComputedRef<_$vue.DefineComponent<{}, void, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any> | undefined>;
   showTagList: _$vue.ComputedRef<Option[]>;
   collapseTagList: _$vue.ComputedRef<Option[]>;

package/es/components/skeleton/src/skeleton-item.d.ts

@@ -13,7 +13,7 @@ interface SkeletonItemProps {
  * @deprecated Removed after 3.0.0, Use `SkeletonItemProps` instead.
  */
 declare const skeletonItemProps: {
-  readonly variant: EpPropFinalized<StringConstructor, "text" | "button" | "circle" | "caption" | "image" | "h1" | "h3" | "p" | "rect", unknown, "text", boolean>;
+  readonly variant: EpPropFinalized<StringConstructor, "button" | "image" | "caption" | "h1" | "h3" | "p" | "text" | "circle" | "rect", unknown, "text", boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `SkeletonItemProps` instead.

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

@@ -13,8 +13,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: _$vue.DefineComponent<SkeletonProps, {
   /** @description loading state */uiLoading: _$vue.Ref<boolean, boolean>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
-  rows: number;
   loading: boolean;
+  rows: number;
   count: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -79,8 +79,8 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   onSliderClick: (event: MouseEvent | TouchEvent) => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: Arrayable<number>) => void;
-  change: (value: Arrayable<number>) => void;
   input: (value: Arrayable<number>) => void;
+  change: (value: Arrayable<number>) => void;
 }, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
   readonly ariaLabel: StringConstructor;
   readonly modelValue: EpPropFinalized<(new (...args: any[]) => number | number[]) | (() => Arrayable<number>) | (((new (...args: any[]) => number | number[]) | (() => Arrayable<number>)) | null)[], unknown, unknown, 0, boolean>;
@@ -157,16 +157,16 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   onInput?: ((value: Arrayable<number>) => any) | undefined;
   onChange?: ((value: Arrayable<number>) => any) | undefined;
 }>, {
-  readonly id: string;
-  readonly disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly modelValue: EpPropMergeType<(new (...args: any[]) => number | number[]) | (() => Arrayable<number>) | (((new (...args: any[]) => number | number[]) | (() => Arrayable<number>)) | null)[], unknown, unknown>;
+  readonly range: boolean;
+  readonly disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly id: string;
   readonly validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly min: number;
+  readonly max: number;
   readonly vertical: boolean;
-  readonly range: boolean;
-  readonly placement: EpPropMergeType<StringConstructor, Placement, unknown>;
   readonly persistent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  readonly max: number;
-  readonly min: number;
+  readonly placement: EpPropMergeType<StringConstructor, Placement, unknown>;
   readonly step: EpPropMergeType<(new (...args: any[]) => number | "mark") | (() => number | "mark") | (((new (...args: any[]) => number | "mark") | (() => number | "mark")) | null)[], unknown, unknown>;
   readonly showInputControls: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly showTooltip: EpPropMergeType<BooleanConstructor, unknown, unknown>;

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

@@ -85,9 +85,9 @@ declare const Space: _$vue.DefineComponent<ExtractPropTypes<{
 }>> & Readonly<{}>, {
   readonly fill: boolean;
   readonly style: StyleValue;
-  readonly wrap: boolean;
   readonly direction: EpPropMergeType<StringConstructor, "horizontal" | "vertical", unknown>;
   readonly class: EpPropMergeType<(new (...args: any[]) => string | Record<string, boolean> | (string | Record<string, boolean>)[]) | (() => Arrayable<string | Record<string, boolean>>) | (((new (...args: any[]) => string | Record<string, boolean> | (string | Record<string, boolean>)[]) | (() => Arrayable<string | Record<string, boolean>>)) | null)[], unknown, unknown>;
+  readonly wrap: boolean;
   readonly alignment: EpPropMergeType<(new (...args: any[]) => string) | (() => _$csstype.Property.AlignItems | undefined) | (((new (...args: any[]) => string) | (() => _$csstype.Property.AlignItems | undefined)) | null)[], unknown, unknown>;
   readonly spacer: EpPropMergeType<(new (...args: any[]) => VNodeChild & {}) | (() => VNodeChild) | (((new (...args: any[]) => VNodeChild & {}) | (() => VNodeChild)) | null)[], unknown, string | number | VNode<_$vue.RendererNode, _$vue.RendererElement, {
     [key: string]: any;

package/es/components/steps/src/item.d.ts

@@ -37,7 +37,7 @@ declare const stepProps: {
     __epPropKey: true;
   };
   readonly description: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-  readonly status: EpPropFinalized<StringConstructor, "" | "wait" | "success" | "error" | "finish" | "process", unknown, "", boolean>;
+  readonly status: EpPropFinalized<StringConstructor, "" | "error" | "finish" | "success" | "wait" | "process", unknown, "", boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `StepProps` instead.

package/es/components/steps/src/item.vue.d.ts

@@ -28,9 +28,9 @@ type __VLS_Slots = {} & {
   description?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<StepProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<StepProps> & Readonly<{}>, {
-  icon: IconPropType;
-  title: string;
   description: string;
+  title: string;
+  icon: IconPropType;
   status: "" | "wait" | "process" | "finish" | "error" | "success";
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -59,8 +59,8 @@ declare const stepsProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly finishStatus: EpPropFinalized<StringConstructor, "wait" | "success" | "error" | "finish" | "process", unknown, "finish", boolean>;
-  readonly processStatus: EpPropFinalized<StringConstructor, "wait" | "success" | "error" | "finish" | "process", unknown, "process", boolean>;
+  readonly finishStatus: EpPropFinalized<StringConstructor, "error" | "finish" | "success" | "wait" | "process", unknown, "finish", boolean>;
+  readonly processStatus: EpPropFinalized<StringConstructor, "error" | "finish" | "success" | "wait" | "process", unknown, "process", boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `StepsProps` instead.

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

@@ -11,9 +11,9 @@ declare const __VLS_base: _$vue.DefineComponent<StepsProps, {}, {}, {}, {}, _$vu
 }, string, _$vue.PublicProps, Readonly<StepsProps> & Readonly<{
   onChange?: ((newVal: number, oldVal: number) => any) | undefined;
 }>, {
+  direction: "horizontal" | "vertical";
   space: number | string;
   active: number;
-  direction: "horizontal" | "vertical";
   finishStatus: StepsStatus;
   processStatus: StepsStatus;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

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

@@ -27,17 +27,17 @@ declare const __VLS_base: _$vue.DefineComponent<SwitchProps, {
   checked: _$vue.ComputedRef<boolean>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (val: string | number | boolean) => void;
-  change: (val: string | number | boolean) => void;
   input: (val: string | number | boolean) => void;
+  change: (val: string | number | boolean) => void;
 }, string, _$vue.PublicProps, Readonly<SwitchProps> & Readonly<{
   "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;
   onInput?: ((val: string | number | boolean) => any) | undefined;
   onChange?: ((val: string | number | boolean) => any) | undefined;
 }>, {
-  disabled: boolean;
   modelValue: boolean | string | number;
-  validateEvent: boolean;
+  disabled: boolean;
   name: string;
+  validateEvent: boolean;
   width: string | number;
   activeText: string;
   inactiveText: string;

package/es/components/switch/src/switch.vue_vue_type_script_setup_true_lang.mjs

@@ -69,6 +69,7 @@ var switch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		});
 		const checked = computed(() => actualValue.value === props.activeValue);
 		if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
+			debugWarn(COMPONENT_NAME, "model-value must be active-value or inactive-value");
 			emit(UPDATE_MODEL_EVENT, props.inactiveValue);
 			emit(CHANGE_EVENT, props.inactiveValue);
 			emit(INPUT_EVENT, props.inactiveValue);

package/es/components/switch/src/switch.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.vue_vue_type_script_setup_true_lang.mjs","names":["$slots"],"sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div :class=\"switchKls\" @click.prevent=\"switchValue\">\n    <input\n      :id=\"inputId\"\n      ref=\"input\"\n      :class=\"ns.e('input')\"\n      type=\"checkbox\"\n      role=\"switch\"\n      :aria-checked=\"checked\"\n      :aria-disabled=\"switchDisabled\"\n      :aria-label=\"ariaLabel\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      :tabindex=\"tabindex\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText || $slots.inactive)\"\n      :class=\"labelLeftKls\"\n    >\n      <slot name=\"inactive\">\n        <el-icon v-if=\"inactiveIcon\">\n          <component :is=\"inactiveIcon\" />\n        </el-icon>\n        <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n          inactiveText\n        }}</span>\n      </slot>\n    </span>\n    <span :class=\"ns.e('core')\" :style=\"coreStyle\">\n      <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n        <div v-if=\"!checked\" :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"inactive\">\n            <el-icon v-if=\"inactiveIcon\">\n              <component :is=\"inactiveIcon\" />\n            </el-icon>\n            <span v-if=\"!inactiveIcon && inactiveText\">{{ inactiveText }}</span>\n          </slot>\n        </div>\n        <div v-else :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"active\">\n            <el-icon v-if=\"activeIcon\">\n              <component :is=\"activeIcon\" />\n            </el-icon>\n            <span v-if=\"!activeIcon && activeText\">{{ activeText }}</span>\n          </slot>\n        </div>\n      </div>\n      <div :class=\"ns.e('action')\">\n        <el-icon v-if=\"loading\" :class=\"ns.is('loading')\">\n          <loading />\n        </el-icon>\n        <slot v-else-if=\"checked\" name=\"active-action\">\n          <el-icon v-if=\"activeActionIcon\">\n            <component :is=\"activeActionIcon\" />\n          </el-icon>\n        </slot>\n        <slot v-else-if=\"!checked\" name=\"inactive-action\">\n          <el-icon v-if=\"inactiveActionIcon\">\n            <component :is=\"inactiveActionIcon\" />\n          </el-icon>\n        </slot>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText || $slots.active)\"\n      :class=\"labelRightKls\"\n    >\n      <slot name=\"active\">\n        <el-icon v-if=\"activeIcon\">\n          <component :is=\"activeIcon\" />\n        </el-icon>\n        <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n          activeText\n        }}</span>\n      </slot>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'\nimport {\n  NOOP,\n  addUnit,\n  debugWarn,\n  isBoolean,\n  isPromise,\n  throwError,\n} from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { Loading } from '@element-plus/icons-vue'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { switchEmits } from './switch'\n\nimport type { CSSProperties } from 'vue'\nimport type { SwitchProps } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  modelValue: false,\n  disabled: undefined,\n  activeText: '',\n  inactiveText: '',\n  activeValue: true,\n  inactiveValue: false,\n  name: '',\n  validateEvent: true,\n  width: '',\n})\nconst emit = defineEmits(switchEmits)\n\nconst { formItem } = useFormItem()\nconst switchSize = useFormSize()\nconst ns = useNamespace('switch')\n\nconst { inputId } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst switchDisabled = useFormDisabled(\n  computed(() => {\n    if (props.loading) {\n      return true\n    }\n    return undefined\n  })\n)\nconst isControlled = ref(props.modelValue !== false)\nconst input = shallowRef<HTMLInputElement>()\n\nconst switchKls = computed(() => [\n  ns.b(),\n  ns.m(switchSize.value),\n  ns.is('disabled', switchDisabled.value),\n  ns.is('checked', checked.value),\n])\n\nconst labelLeftKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'left'),\n  ns.is('active', !checked.value),\n])\n\nconst labelRightKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'right'),\n  ns.is('active', checked.value),\n])\n\nconst coreStyle = computed<CSSProperties>(() => ({\n  width: addUnit(props.width),\n}))\n\nwatch(\n  () => props.modelValue,\n  () => {\n    isControlled.value = true\n  }\n)\n\nconst actualValue = computed(() => {\n  return isControlled.value ? props.modelValue : false\n})\n\nconst checked = computed(() => actualValue.value === props.activeValue)\n\nif (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n  emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n  emit(CHANGE_EVENT, props.inactiveValue)\n  emit(INPUT_EVENT, props.inactiveValue)\n}\n\nwatch(checked, (val) => {\n  input.value!.checked = val\n\n  if (props.validateEvent) {\n    formItem?.validate?.('change').catch(NOOP)\n  }\n})\n\nconst handleChange = () => {\n  const val = checked.value ? props.inactiveValue : props.activeValue\n  emit(UPDATE_MODEL_EVENT, val)\n  emit(CHANGE_EVENT, val)\n  emit(INPUT_EVENT, val)\n  nextTick(() => {\n    input.value!.checked = checked.value\n  })\n}\n\nconst switchValue = () => {\n  if (switchDisabled.value) return\n\n  const { beforeChange } = props\n  if (!beforeChange) {\n    handleChange()\n    return\n  }\n\n  const shouldChange = beforeChange()\n\n  const isPromiseOrBool = [\n    isPromise(shouldChange),\n    isBoolean(shouldChange),\n  ].includes(true)\n  if (!isPromiseOrBool) {\n    throwError(\n      COMPONENT_NAME,\n      'beforeChange must return type `Promise<boolean>` or `boolean`'\n    )\n  }\n\n  if (isPromise(shouldChange)) {\n    shouldChange\n      .then((result) => {\n        if (result) {\n          handleChange()\n        }\n      })\n      .catch((e) => {\n        debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)\n      })\n  } else if (shouldChange) {\n    handleChange()\n  }\n}\n\nconst focus = (): void => {\n  input.value?.focus?.()\n}\n\nonMounted(() => {\n  input.value!.checked = checked.value\n})\n\ndefineExpose({\n  /**\n   *  @description manual focus to the switch component\n   **/\n  focus,\n  /**\n   * @description whether Switch is checked\n   */\n  checked,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"switch.vue_vue_type_script_setup_true_lang.mjs","names":["$slots"],"sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div :class=\"switchKls\" @click.prevent=\"switchValue\">\n    <input\n      :id=\"inputId\"\n      ref=\"input\"\n      :class=\"ns.e('input')\"\n      type=\"checkbox\"\n      role=\"switch\"\n      :aria-checked=\"checked\"\n      :aria-disabled=\"switchDisabled\"\n      :aria-label=\"ariaLabel\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      :tabindex=\"tabindex\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText || $slots.inactive)\"\n      :class=\"labelLeftKls\"\n    >\n      <slot name=\"inactive\">\n        <el-icon v-if=\"inactiveIcon\">\n          <component :is=\"inactiveIcon\" />\n        </el-icon>\n        <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n          inactiveText\n        }}</span>\n      </slot>\n    </span>\n    <span :class=\"ns.e('core')\" :style=\"coreStyle\">\n      <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n        <div v-if=\"!checked\" :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"inactive\">\n            <el-icon v-if=\"inactiveIcon\">\n              <component :is=\"inactiveIcon\" />\n            </el-icon>\n            <span v-if=\"!inactiveIcon && inactiveText\">{{ inactiveText }}</span>\n          </slot>\n        </div>\n        <div v-else :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"active\">\n            <el-icon v-if=\"activeIcon\">\n              <component :is=\"activeIcon\" />\n            </el-icon>\n            <span v-if=\"!activeIcon && activeText\">{{ activeText }}</span>\n          </slot>\n        </div>\n      </div>\n      <div :class=\"ns.e('action')\">\n        <el-icon v-if=\"loading\" :class=\"ns.is('loading')\">\n          <loading />\n        </el-icon>\n        <slot v-else-if=\"checked\" name=\"active-action\">\n          <el-icon v-if=\"activeActionIcon\">\n            <component :is=\"activeActionIcon\" />\n          </el-icon>\n        </slot>\n        <slot v-else-if=\"!checked\" name=\"inactive-action\">\n          <el-icon v-if=\"inactiveActionIcon\">\n            <component :is=\"inactiveActionIcon\" />\n          </el-icon>\n        </slot>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText || $slots.active)\"\n      :class=\"labelRightKls\"\n    >\n      <slot name=\"active\">\n        <el-icon v-if=\"activeIcon\">\n          <component :is=\"activeIcon\" />\n        </el-icon>\n        <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n          activeText\n        }}</span>\n      </slot>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'\nimport {\n  NOOP,\n  addUnit,\n  debugWarn,\n  isBoolean,\n  isPromise,\n  throwError,\n} from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { Loading } from '@element-plus/icons-vue'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { switchEmits } from './switch'\n\nimport type { CSSProperties } from 'vue'\nimport type { SwitchProps } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  modelValue: false,\n  disabled: undefined,\n  activeText: '',\n  inactiveText: '',\n  activeValue: true,\n  inactiveValue: false,\n  name: '',\n  validateEvent: true,\n  width: '',\n})\nconst emit = defineEmits(switchEmits)\n\nconst { formItem } = useFormItem()\nconst switchSize = useFormSize()\nconst ns = useNamespace('switch')\n\nconst { inputId } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst switchDisabled = useFormDisabled(\n  computed(() => {\n    if (props.loading) {\n      return true\n    }\n    return undefined\n  })\n)\nconst isControlled = ref(props.modelValue !== false)\nconst input = shallowRef<HTMLInputElement>()\n\nconst switchKls = computed(() => [\n  ns.b(),\n  ns.m(switchSize.value),\n  ns.is('disabled', switchDisabled.value),\n  ns.is('checked', checked.value),\n])\n\nconst labelLeftKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'left'),\n  ns.is('active', !checked.value),\n])\n\nconst labelRightKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'right'),\n  ns.is('active', checked.value),\n])\n\nconst coreStyle = computed<CSSProperties>(() => ({\n  width: addUnit(props.width),\n}))\n\nwatch(\n  () => props.modelValue,\n  () => {\n    isControlled.value = true\n  }\n)\n\nconst actualValue = computed(() => {\n  return isControlled.value ? props.modelValue : false\n})\n\nconst checked = computed(() => actualValue.value === props.activeValue)\n\nif (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n  debugWarn(\n    COMPONENT_NAME,\n    'model-value must be active-value or inactive-value'\n  )\n  emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n  emit(CHANGE_EVENT, props.inactiveValue)\n  emit(INPUT_EVENT, props.inactiveValue)\n}\n\nwatch(checked, (val) => {\n  input.value!.checked = val\n\n  if (props.validateEvent) {\n    formItem?.validate?.('change').catch(NOOP)\n  }\n})\n\nconst handleChange = () => {\n  const val = checked.value ? props.inactiveValue : props.activeValue\n  emit(UPDATE_MODEL_EVENT, val)\n  emit(CHANGE_EVENT, val)\n  emit(INPUT_EVENT, val)\n  nextTick(() => {\n    input.value!.checked = checked.value\n  })\n}\n\nconst switchValue = () => {\n  if (switchDisabled.value) return\n\n  const { beforeChange } = props\n  if (!beforeChange) {\n    handleChange()\n    return\n  }\n\n  const shouldChange = beforeChange()\n\n  const isPromiseOrBool = [\n    isPromise(shouldChange),\n    isBoolean(shouldChange),\n  ].includes(true)\n  if (!isPromiseOrBool) {\n    throwError(\n      COMPONENT_NAME,\n      'beforeChange must return type `Promise<boolean>` or `boolean`'\n    )\n  }\n\n  if (isPromise(shouldChange)) {\n    shouldChange\n      .then((result) => {\n        if (result) {\n          handleChange()\n        }\n      })\n      .catch((e) => {\n        debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)\n      })\n  } else if (shouldChange) {\n    handleChange()\n  }\n}\n\nconst focus = (): void => {\n  input.value?.focus?.()\n}\n\nonMounted(() => {\n  input.value!.checked = checked.value\n})\n\ndefineExpose({\n  /**\n   *  @description manual focus to the switch component\n   **/\n  focus,\n  /**\n   * @description whether Switch is checked\n   */\n  checked,\n})\n</script>\n"],"mappings":"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"}

package/es/components/switch/src/switch2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch2.mjs","names":[],"sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div :class=\"switchKls\" @click.prevent=\"switchValue\">\n    <input\n      :id=\"inputId\"\n      ref=\"input\"\n      :class=\"ns.e('input')\"\n      type=\"checkbox\"\n      role=\"switch\"\n      :aria-checked=\"checked\"\n      :aria-disabled=\"switchDisabled\"\n      :aria-label=\"ariaLabel\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      :tabindex=\"tabindex\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText || $slots.inactive)\"\n      :class=\"labelLeftKls\"\n    >\n      <slot name=\"inactive\">\n        <el-icon v-if=\"inactiveIcon\">\n          <component :is=\"inactiveIcon\" />\n        </el-icon>\n        <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n          inactiveText\n        }}</span>\n      </slot>\n    </span>\n    <span :class=\"ns.e('core')\" :style=\"coreStyle\">\n      <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n        <div v-if=\"!checked\" :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"inactive\">\n            <el-icon v-if=\"inactiveIcon\">\n              <component :is=\"inactiveIcon\" />\n            </el-icon>\n            <span v-if=\"!inactiveIcon && inactiveText\">{{ inactiveText }}</span>\n          </slot>\n        </div>\n        <div v-else :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"active\">\n            <el-icon v-if=\"activeIcon\">\n              <component :is=\"activeIcon\" />\n            </el-icon>\n            <span v-if=\"!activeIcon && activeText\">{{ activeText }}</span>\n          </slot>\n        </div>\n      </div>\n      <div :class=\"ns.e('action')\">\n        <el-icon v-if=\"loading\" :class=\"ns.is('loading')\">\n          <loading />\n        </el-icon>\n        <slot v-else-if=\"checked\" name=\"active-action\">\n          <el-icon v-if=\"activeActionIcon\">\n            <component :is=\"activeActionIcon\" />\n          </el-icon>\n        </slot>\n        <slot v-else-if=\"!checked\" name=\"inactive-action\">\n          <el-icon v-if=\"inactiveActionIcon\">\n            <component :is=\"inactiveActionIcon\" />\n          </el-icon>\n        </slot>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText || $slots.active)\"\n      :class=\"labelRightKls\"\n    >\n      <slot name=\"active\">\n        <el-icon v-if=\"activeIcon\">\n          <component :is=\"activeIcon\" />\n        </el-icon>\n        <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n          activeText\n        }}</span>\n      </slot>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'\nimport {\n  NOOP,\n  addUnit,\n  debugWarn,\n  isBoolean,\n  isPromise,\n  throwError,\n} from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { Loading } from '@element-plus/icons-vue'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { switchEmits } from './switch'\n\nimport type { CSSProperties } from 'vue'\nimport type { SwitchProps } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  modelValue: false,\n  disabled: undefined,\n  activeText: '',\n  inactiveText: '',\n  activeValue: true,\n  inactiveValue: false,\n  name: '',\n  validateEvent: true,\n  width: '',\n})\nconst emit = defineEmits(switchEmits)\n\nconst { formItem } = useFormItem()\nconst switchSize = useFormSize()\nconst ns = useNamespace('switch')\n\nconst { inputId } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst switchDisabled = useFormDisabled(\n  computed(() => {\n    if (props.loading) {\n      return true\n    }\n    return undefined\n  })\n)\nconst isControlled = ref(props.modelValue !== false)\nconst input = shallowRef<HTMLInputElement>()\n\nconst switchKls = computed(() => [\n  ns.b(),\n  ns.m(switchSize.value),\n  ns.is('disabled', switchDisabled.value),\n  ns.is('checked', checked.value),\n])\n\nconst labelLeftKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'left'),\n  ns.is('active', !checked.value),\n])\n\nconst labelRightKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'right'),\n  ns.is('active', checked.value),\n])\n\nconst coreStyle = computed<CSSProperties>(() => ({\n  width: addUnit(props.width),\n}))\n\nwatch(\n  () => props.modelValue,\n  () => {\n    isControlled.value = true\n  }\n)\n\nconst actualValue = computed(() => {\n  return isControlled.value ? props.modelValue : false\n})\n\nconst checked = computed(() => actualValue.value === props.activeValue)\n\nif (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n  emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n  emit(CHANGE_EVENT, props.inactiveValue)\n  emit(INPUT_EVENT, props.inactiveValue)\n}\n\nwatch(checked, (val) => {\n  input.value!.checked = val\n\n  if (props.validateEvent) {\n    formItem?.validate?.('change').catch(NOOP)\n  }\n})\n\nconst handleChange = () => {\n  const val = checked.value ? props.inactiveValue : props.activeValue\n  emit(UPDATE_MODEL_EVENT, val)\n  emit(CHANGE_EVENT, val)\n  emit(INPUT_EVENT, val)\n  nextTick(() => {\n    input.value!.checked = checked.value\n  })\n}\n\nconst switchValue = () => {\n  if (switchDisabled.value) return\n\n  const { beforeChange } = props\n  if (!beforeChange) {\n    handleChange()\n    return\n  }\n\n  const shouldChange = beforeChange()\n\n  const isPromiseOrBool = [\n    isPromise(shouldChange),\n    isBoolean(shouldChange),\n  ].includes(true)\n  if (!isPromiseOrBool) {\n    throwError(\n      COMPONENT_NAME,\n      'beforeChange must return type `Promise<boolean>` or `boolean`'\n    )\n  }\n\n  if (isPromise(shouldChange)) {\n    shouldChange\n      .then((result) => {\n        if (result) {\n          handleChange()\n        }\n      })\n      .catch((e) => {\n        debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)\n      })\n  } else if (shouldChange) {\n    handleChange()\n  }\n}\n\nconst focus = (): void => {\n  input.value?.focus?.()\n}\n\nonMounted(() => {\n  input.value!.checked = checked.value\n})\n\ndefineExpose({\n  /**\n   *  @description manual focus to the switch component\n   **/\n  focus,\n  /**\n   * @description whether Switch is checked\n   */\n  checked,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"switch2.mjs","names":[],"sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div :class=\"switchKls\" @click.prevent=\"switchValue\">\n    <input\n      :id=\"inputId\"\n      ref=\"input\"\n      :class=\"ns.e('input')\"\n      type=\"checkbox\"\n      role=\"switch\"\n      :aria-checked=\"checked\"\n      :aria-disabled=\"switchDisabled\"\n      :aria-label=\"ariaLabel\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      :tabindex=\"tabindex\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText || $slots.inactive)\"\n      :class=\"labelLeftKls\"\n    >\n      <slot name=\"inactive\">\n        <el-icon v-if=\"inactiveIcon\">\n          <component :is=\"inactiveIcon\" />\n        </el-icon>\n        <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n          inactiveText\n        }}</span>\n      </slot>\n    </span>\n    <span :class=\"ns.e('core')\" :style=\"coreStyle\">\n      <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n        <div v-if=\"!checked\" :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"inactive\">\n            <el-icon v-if=\"inactiveIcon\">\n              <component :is=\"inactiveIcon\" />\n            </el-icon>\n            <span v-if=\"!inactiveIcon && inactiveText\">{{ inactiveText }}</span>\n          </slot>\n        </div>\n        <div v-else :class=\"ns.e('inner-wrapper')\">\n          <slot name=\"active\">\n            <el-icon v-if=\"activeIcon\">\n              <component :is=\"activeIcon\" />\n            </el-icon>\n            <span v-if=\"!activeIcon && activeText\">{{ activeText }}</span>\n          </slot>\n        </div>\n      </div>\n      <div :class=\"ns.e('action')\">\n        <el-icon v-if=\"loading\" :class=\"ns.is('loading')\">\n          <loading />\n        </el-icon>\n        <slot v-else-if=\"checked\" name=\"active-action\">\n          <el-icon v-if=\"activeActionIcon\">\n            <component :is=\"activeActionIcon\" />\n          </el-icon>\n        </slot>\n        <slot v-else-if=\"!checked\" name=\"inactive-action\">\n          <el-icon v-if=\"inactiveActionIcon\">\n            <component :is=\"inactiveActionIcon\" />\n          </el-icon>\n        </slot>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText || $slots.active)\"\n      :class=\"labelRightKls\"\n    >\n      <slot name=\"active\">\n        <el-icon v-if=\"activeIcon\">\n          <component :is=\"activeIcon\" />\n        </el-icon>\n        <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n          activeText\n        }}</span>\n      </slot>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, shallowRef, watch } from 'vue'\nimport {\n  NOOP,\n  addUnit,\n  debugWarn,\n  isBoolean,\n  isPromise,\n  throwError,\n} from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport { Loading } from '@element-plus/icons-vue'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { switchEmits } from './switch'\n\nimport type { CSSProperties } from 'vue'\nimport type { SwitchProps } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n  modelValue: false,\n  disabled: undefined,\n  activeText: '',\n  inactiveText: '',\n  activeValue: true,\n  inactiveValue: false,\n  name: '',\n  validateEvent: true,\n  width: '',\n})\nconst emit = defineEmits(switchEmits)\n\nconst { formItem } = useFormItem()\nconst switchSize = useFormSize()\nconst ns = useNamespace('switch')\n\nconst { inputId } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst switchDisabled = useFormDisabled(\n  computed(() => {\n    if (props.loading) {\n      return true\n    }\n    return undefined\n  })\n)\nconst isControlled = ref(props.modelValue !== false)\nconst input = shallowRef<HTMLInputElement>()\n\nconst switchKls = computed(() => [\n  ns.b(),\n  ns.m(switchSize.value),\n  ns.is('disabled', switchDisabled.value),\n  ns.is('checked', checked.value),\n])\n\nconst labelLeftKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'left'),\n  ns.is('active', !checked.value),\n])\n\nconst labelRightKls = computed(() => [\n  ns.e('label'),\n  ns.em('label', 'right'),\n  ns.is('active', checked.value),\n])\n\nconst coreStyle = computed<CSSProperties>(() => ({\n  width: addUnit(props.width),\n}))\n\nwatch(\n  () => props.modelValue,\n  () => {\n    isControlled.value = true\n  }\n)\n\nconst actualValue = computed(() => {\n  return isControlled.value ? props.modelValue : false\n})\n\nconst checked = computed(() => actualValue.value === props.activeValue)\n\nif (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n  debugWarn(\n    COMPONENT_NAME,\n    'model-value must be active-value or inactive-value'\n  )\n  emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n  emit(CHANGE_EVENT, props.inactiveValue)\n  emit(INPUT_EVENT, props.inactiveValue)\n}\n\nwatch(checked, (val) => {\n  input.value!.checked = val\n\n  if (props.validateEvent) {\n    formItem?.validate?.('change').catch(NOOP)\n  }\n})\n\nconst handleChange = () => {\n  const val = checked.value ? props.inactiveValue : props.activeValue\n  emit(UPDATE_MODEL_EVENT, val)\n  emit(CHANGE_EVENT, val)\n  emit(INPUT_EVENT, val)\n  nextTick(() => {\n    input.value!.checked = checked.value\n  })\n}\n\nconst switchValue = () => {\n  if (switchDisabled.value) return\n\n  const { beforeChange } = props\n  if (!beforeChange) {\n    handleChange()\n    return\n  }\n\n  const shouldChange = beforeChange()\n\n  const isPromiseOrBool = [\n    isPromise(shouldChange),\n    isBoolean(shouldChange),\n  ].includes(true)\n  if (!isPromiseOrBool) {\n    throwError(\n      COMPONENT_NAME,\n      'beforeChange must return type `Promise<boolean>` or `boolean`'\n    )\n  }\n\n  if (isPromise(shouldChange)) {\n    shouldChange\n      .then((result) => {\n        if (result) {\n          handleChange()\n        }\n      })\n      .catch((e) => {\n        debugWarn(COMPONENT_NAME, `some error occurred: ${e}`)\n      })\n  } else if (shouldChange) {\n    handleChange()\n  }\n}\n\nconst focus = (): void => {\n  input.value?.focus?.()\n}\n\nonMounted(() => {\n  input.value!.checked = checked.value\n})\n\ndefineExpose({\n  /**\n   *  @description manual focus to the switch component\n   **/\n  focus,\n  /**\n   * @description whether Switch is checked\n   */\n  checked,\n})\n</script>\n"],"mappings":""}