refactor(components): [select-v2] use useNamespace (#5738)

packages/components/select-v2/src/group-item.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     v-if="item.isTitle"
-    class="el-select-group__title"
+    :class="ns.be('group', 'title')"
     :style="[style, { lineHeight: `${height}px` }]"
   >
     {{ item.label }}
   </div>
-  <div v-else class="el-select-group__split" :style="style">
+  <div v-else :class="ns.be('group', 'split')" :style="style">
     <span
-      class="el-select-group__split-dash"
+      :class="ns.be('group', 'split-dash')"
       :style="{ top: `${height / 2}px` }"
     ></span>
   </div>
@@ -16,6 +16,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
 
 export default defineComponent({
   props: {
@@ -26,5 +27,11 @@ export default defineComponent({
     style: Object,
     height: Number,
   },
+  setup() {
+    const ns = useNamespace('select')
+    return {
+      ns,
+    }
+  },
 })
 </script>

packages/components/select-v2/src/option-item.vue

@@ -2,13 +2,13 @@
   <li
     :aria-selected="selected"
     :style="style"
-    :class="{
-      'el-select-dropdown__option-item': true,
-      'is-selected': selected,
-      'is-disabled': disabled,
-      'is-created': created,
-      hover: hovering,
-    }"
+    :class="[
+      ns.be('dropdown', 'option-item'),
+      ns.is('selected', selected),
+      ns.is('disabled', disabled),
+      ns.is('created', created),
+      { hover: hovering },
+    ]"
     @mouseenter="hoverItem"
     @click.stop="selectOptionClick"
   >
@@ -20,14 +20,18 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
 import { useOption } from './useOption'
 import { OptionProps } from './defaults'
+
 export default defineComponent({
   props: OptionProps,
   emits: ['select', 'hover'],
   setup(props, { emit }) {
+    const ns = useNamespace('select')
     const { hoverItem, selectOptionClick } = useOption(props, { emit })
     return {
+      ns,
       hoverItem,
       selectOptionClick,
     }

packages/components/select-v2/src/select-dropdown.vue

@@ -17,6 +17,7 @@ import {
   FixedSizeList,
   DynamicSizeList,
 } from '@element-plus/components/virtual-list'
+import { useNamespace } from '@element-plus/hooks'
 import GroupItem from './group-item.vue'
 import OptionItem from './option-item.vue'
 
@@ -35,6 +36,7 @@ export default defineComponent({
   },
   setup(props) {
     const select = inject(selectV2InjectionKey) as any
+    const ns = useNamespace('select')
     const cachedHeights = ref<Array<number>>([])
 
     const listRef = ref(null)
@@ -121,6 +123,7 @@ export default defineComponent({
 
     // computed
     return {
+      ns,
       select,
       listProps,
       listRef,
@@ -144,6 +147,7 @@ export default defineComponent({
       select,
       isSized,
       width,
+      ns,
       // methods
       isItemDisabled,
       isItemHovering,
@@ -165,7 +169,7 @@ export default defineComponent({
       return h(
         'div',
         {
-          class: 'el-select-dropdown',
+          class: ns.b('dropdown'),
           style: {
             width: `${width}px`,
           },
@@ -215,7 +219,7 @@ export default defineComponent({
       Comp,
       {
         ref: 'listRef', // forwarded ref so that select can access the list directly
-        className: 'el-select-dropdown__list',
+        className: ns.be('dropdown', 'list'),
         data,
         height,
         width,
@@ -267,10 +271,7 @@ export default defineComponent({
     return h(
       'div',
       {
-        class: {
-          'is-multiple': multiple,
-          'el-select-dropdown': true,
-        },
+        class: [ns.b('dropdown'), ns.is('multiple', multiple)],
       },
       [List]
     )

packages/components/select-v2/src/select.vue

@@ -2,8 +2,7 @@
   <div
     ref="selectRef"
     v-click-outside:[popperRef]="handleClickOutside"
-    :class="[selectSize ? 'el-select-v2--' + selectSize : '']"
-    class="el-select-v2"
+    :class="[nsSelectV2.b(), nsSelectV2.m(selectSize)]"
     @click.stop="toggleMenu"
     @mouseenter="states.comboBoxHovering = true"
     @mouseleave="states.comboBoxHovering = false"
@@ -12,7 +11,7 @@
       ref="popper"
       v-model:visible="dropdownMenuVisible"
       :teleported="compatTeleported"
-      :popper-class="`el-select-v2__popper ${popperClass}`"
+      :popper-class="[nsSelectV2.e('popper'), popperClass]"
       :gpu-acceleration="false"
       :stop-popper-mouse-event="false"
       :popper-options="popperOptions"
@@ -20,7 +19,7 @@
       effect="light"
       placement="bottom-start"
       pure
-      transition="el-zoom-in-top"
+      :transition="`${nsSelectV2.namespace.value}in-top`"
       trigger="click"
       persistent
       @show="handleMenuEnter"
@@ -29,20 +28,20 @@
       <template #default>
         <div
           ref="selectionRef"
-          class="el-select-v2__wrapper"
-          :class="{
-            'is-focused': states.isComposing,
-            'is-hovering': states.comboBoxHovering,
-            'is-filterable': filterable,
-            'is-disabled': disabled,
-          }"
+          :class="[
+            nsSelectV2.e('wrapper'),
+            nsSelectV2.is('focused', states.isComposing),
+            nsSelectV2.is('hovering', states.comboBoxHovering),
+            nsSelectV2.is('filterable', filterable),
+            nsSelectV2.is('disabled', disabled),
+          ]"
         >
           <div v-if="$slots.prefix">
             <slot name="prefix"></slot>
           </div>
-          <div v-if="multiple" class="el-select-v2__selection">
+          <div v-if="multiple" :class="nsSelectV2.e('selection')">
             <template v-if="collapseTags && modelValue.length > 0">
-              <div class="el-select-v2__selected-item">
+              <div :class="nsSelectV2.e('selected-item')">
                 <el-tag
                   :closable="
                     !selectDisabled && !states.cachedOptions[0]?.disable
@@ -53,7 +52,7 @@
                   @close="deleteTag($event, states.cachedOptions[0])"
                 >
                   <span
-                    class="el-select-v2__tags-text"
+                    :class="nsSelectV2.e('tags-text')"
                     :style="{
                       maxWidth: `${tagMaxWidth}px`,
                     }"
@@ -68,7 +67,7 @@
                   disable-transitions
                 >
                   <span
-                    class="el-select-v2__tags-text"
+                    :class="nsSelectV2.e('tags-text')"
                     :style="{
                       maxWidth: `${tagMaxWidth}px`,
                     }"
@@ -82,7 +81,7 @@
               <div
                 v-for="(selected, idx) in states.cachedOptions"
                 :key="idx"
-                class="el-select-v2__selected-item"
+                :class="nsSelectV2.e('selected-item')"
               >
                 <el-tag
                   :key="getValueKey(selected)"
@@ -93,7 +92,7 @@
                   @close="deleteTag($event, selected)"
                 >
                   <span
-                    class="el-select-v2__tags-text"
+                    :class="nsSelectV2.e('tags-text')"
                     :style="{
                       maxWidth: `${tagMaxWidth}px`,
                     }"
@@ -103,7 +102,10 @@
               </div>
             </template>
             <div
-              class="el-select-v2__selected-item el-select-v2__input-wrapper"
+              :class="[
+                nsSelectV2.e('selected-item'),
+                nsSelectV2.e('input-wrapper'),
+              ]"
               :style="inputWrapperStyle"
             >
               <input
@@ -116,8 +118,10 @@
                 autocapitalize="off"
                 :aria-expanded="expanded"
                 :aria-labelledby="label"
-                class="el-select-v2__combobox-input"
-                :class="[selectSize ? `is-${selectSize}` : '']"
+                :class="[
+                  nsSelectV2.is(selectSize),
+                  nsSelectV2.e('combobox-input'),
+                ]"
                 :disabled="disabled"
                 role="combobox"
                 :readonly="!filterable"
@@ -141,7 +145,7 @@
                 v-if="filterable"
                 ref="calculatorRef"
                 aria-hidden="true"
-                class="el-select-v2__input-calculator"
+                :class="nsSelectV2.e('input-calculator')"
                 v-text="states.displayInputValue"
               >
               </span>
@@ -149,7 +153,10 @@
           </div>
           <template v-else>
             <div
-              class="el-select-v2__selected-item el-select-v2__input-wrapper"
+              :class="[
+                nsSelectV2.e('selected-item'),
+                nsSelectV2.e('input-wrapper'),
+              ]"
             >
               <input
                 :id="id"
@@ -161,7 +168,7 @@
                 :aria-expanded="expanded"
                 autocapitalize="off"
                 :autocomplete="autocomplete"
-                class="el-select-v2__combobox-input"
+                :class="nsSelectV2.e('combobox-input')"
                 :disabled="disabled"
                 :name="name"
                 role="combobox"
@@ -185,42 +192,47 @@
               v-if="filterable"
               ref="calculatorRef"
               aria-hidden="true"
-              class="el-select-v2__selected-item el-select-v2__input-calculator"
+              :class="[
+                nsSelectV2.e('selected-item'),
+                nsSelectV2.e('input-calculator'),
+              ]"
               v-text="states.displayInputValue"
             >
             </span>
           </template>
           <span
             v-if="shouldShowPlaceholder"
-            :class="{
-              'el-select-v2__placeholder': true,
-              'is-transparent':
+            :class="[
+              nsSelectV2.e('placeholder'),
+              nsSelectV2.is(
+                'transparent',
                 states.isComposing ||
-                (placeholder && multiple
-                  ? modelValue.length === 0
-                  : !hasModelValue),
-            }"
+                  (placeholder && multiple
+                    ? modelValue.length === 0
+                    : !hasModelValue)
+              ),
+            ]"
           >
             {{ currentPlaceholder }}
           </span>
-          <span class="el-select-v2__suffix">
+          <span :class="nsSelectV2.e('suffix')">
             <el-icon
               v-if="iconComponent"
               v-show="!showClearBtn"
-              :class="['el-select-v2__caret', 'el-input__icon', iconReverse]"
+              :class="[nsSelectV2.e('caret'), nsInput.e('icon'), iconReverse]"
             >
               <component :is="iconComponent" />
             </el-icon>
             <el-icon
               v-if="showClearBtn && clearIcon"
-              class="el-select-v2__caret el-input__icon"
+              :class="[nsSelectV2.e('caret'), nsInput.e('icon')]"
               @click.prevent.stop="handleClear"
             >
               <component :is="clearIcon" />
             </el-icon>
             <el-icon
               v-if="validateState && validateIcon"
-              class="el-input__icon el-input__validateIcon"
+              :class="[nsInput.e('icon'), nsInput.e('validateIcon')]"
             >
               <component :is="validateIcon" />
             </el-icon>
@@ -240,7 +252,7 @@
           </template>
           <template #empty>
             <slot name="empty">
-              <p class="el-select-v2__empty">
+              <p :class="nsSelectV2.e('empty')">
                 {{ emptyText ? emptyText : '' }}
               </p>
             </slot>

packages/components/select-v2/src/useSelect.ts

@@ -9,7 +9,12 @@ import {
 } from 'vue'
 import { isArray, isFunction, isObject } from '@vue/shared'
 import { isEqual, debounce as lodashDebounce } from 'lodash-unified'
-import { useFormItem, useLocale, useSize } from '@element-plus/hooks'
+import {
+  useFormItem,
+  useLocale,
+  useSize,
+  useNamespace,
+} from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import { ValidateComponentsMap } from '@element-plus/utils-v2'
 import {
@@ -42,6 +47,8 @@ const COMPONENT_NAME = 'ElSelectV2'
 const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
   // inject
   const { t } = useLocale()
+  const nsSelectV2 = useNamespace('select-v2')
+  const nsInput = useNamespace('input')
   const { form: elForm, formItem: elFormItem } = useFormItem()
   const { compatTeleported } = useDeprecateAppendToBody(
     COMPONENT_NAME,
@@ -122,8 +129,8 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
     props.remote && props.filterable ? '' : ArrowUp
   )
 
-  const iconReverse = computed(() =>
-    iconComponent.value && expanded.value ? 'is-reverse' : ''
+  const iconReverse = computed(
+    () => iconComponent.value && nsSelectV2.is('reverse', expanded.value)
   )
 
   const validateState = computed(() => elFormItem?.validateState || '')
@@ -772,6 +779,8 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
     showClearBtn,
     states,
     tagMaxWidth,
+    nsSelectV2,
+    nsInput,
 
     // refs items exports
     calculatorRef,