refactor: remove some icon style

src/_base/clear/src/Clear.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="n-base-clear" :style="cssVars">
+  <div class="n-base-clear">
     <n-icon-switch-transition>
       <n-base-icon
         v-if="show"
         key="dismiss"
         class="n-base-clear__clear"
+        :style="cssVars"
         @click="onClear"
         @mousedown.prevent
       >

src/date-picker/src/DatePicker.vue

@@ -9,6 +9,7 @@
       'n-date-picker--end-invalid': isEndValueInvalid
     }"
     class="n-date-picker"
+    :style="triggerCssVars"
     @keydown="handleKeyDown"
   >
     <v-binder>
@@ -39,12 +40,9 @@
           @input="handleRangeInput"
         >
           <template #clear>
-            <n-icon
-              :unstable-theme-overrides="mergedTheme.overrides.NIcon"
-              :unstable-theme="mergedTheme.peers.NIcon"
-            >
+            <n-base-icon class="n-date-picker-icon">
               <calendar-icon />
-            </n-icon>
+            </n-base-icon>
           </template>
         </n-input>
         <n-input
@@ -70,12 +68,9 @@
           @clear="handleClear"
         >
           <template #clear>
-            <n-icon
-              :unstable-theme-overrides="mergedTheme.overrides.Icon"
-              :unstable-theme="mergedTheme.peers.Icon"
-            >
+            <n-base-icon class="n-date-picker-icon">
               <calendar-icon />
-            </n-icon>
+            </n-base-icon>
           </template>
         </n-input>
       </v-target>
@@ -158,7 +153,7 @@ import { format, getTime, isValid } from 'date-fns'
 import { isEqual } from 'lodash-es'
 import { useIsMounted, useMergedState } from 'vooks'
 import { NInput } from '../../input'
-import { NIcon } from '../../icon'
+import { NBaseIcon } from '../../_base'
 import { useFormItem, useTheme, useConfig, useLocale } from '../../_mixins'
 import { CalendarIcon } from '../../_base/icons'
 import { warn, call, useAdjustedTo, createKey } from '../../_utils'
@@ -191,7 +186,7 @@ export default defineComponent({
     VTarget,
     VFollower,
     NInput,
-    NIcon,
+    NBaseIcon,
     DatetimePanel,
     DatePanel,
     DatetimerangePanel,
@@ -333,6 +328,17 @@ export default defineComponent({
       ...useFormItem(props),
       ...useConfig(props),
       mergedTheme: themeRef,
+      triggerCssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { iconColor, iconColorDisabled }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--icon-color': iconColor,
+          '--icon-color-disabled': iconColorDisabled
+        }
+      }),
       cssVars: computed(() => {
         const { type } = props
         const {
@@ -373,6 +379,7 @@ export default defineComponent({
         } = themeRef.value
         return {
           '--bezier': cubicBezierEaseInOut,
+
           '--panel-border-radius': panelBorderRadius,
           '--panel-color': panelColor,
           '--panel-box-shadow': panelBoxShadow,

src/date-picker/src/styles/index.cssr.js

@@ -4,6 +4,9 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
 // vars:
 // --bezier
 
+// --icon-color
+// --icon-color-disabled
+
 // --panel-border-radius
 // --panel-color
 // --panel-box-shadow
@@ -49,6 +52,15 @@ export default c([
   cB('date-picker', {
     position: 'relative'
   }, [
+    cB('date-picker-icon', `
+      color: var(--icon-color);
+      transition: color .3s var(--bezier);
+    `),
+    cM('disabled', [
+      cB('date-picker-icon', {
+        color: 'var(--icon-color-disabled)'
+      })
+    ]),
     cM('invalid', [
       c('input', {
         textDecoration: 'line-through'

src/date-picker/styles/dark.js

@@ -1,6 +1,5 @@
 import { changeColor } from 'seemly'
 import { inputDark } from '../../input/styles'
-import { iconDark } from '../../icon/styles'
 import { commonDark } from '../../_styles/new-common'
 import { buttonDark } from '../../button/styles'
 import { timePickerDark } from '../../time-picker/styles'
@@ -11,7 +10,6 @@ export default {
   common: commonDark,
   peers: {
     Input: inputDark,
-    Icon: iconDark,
     Button: buttonDark,
     TimePicker: timePickerDark
   },
@@ -25,6 +23,7 @@ export default {
       primaryColor,
       borderRadiusSmall,
       iconColorOverlay,
+      iconColorDisabledOverlay,
       dividerColorOverlay,
       boxShadow2,
       borderRadius,
@@ -52,7 +51,9 @@ export default {
       panelActionDividerColor: dividerColorOverlay,
       panelBorderRadius: borderRadius,
       panelBoxShadow: boxShadow2,
-      calendarTitleFontWeight: fontWeightStrong
+      calendarTitleFontWeight: fontWeightStrong,
+      iconColor: iconColorOverlay,
+      iconColorDisabled: iconColorDisabledOverlay
     }
   }
 }

src/date-picker/styles/light.js

@@ -1,6 +1,5 @@
 import { changeColor } from 'seemly'
 import { inputLight } from '../../input/styles'
-import { iconLight } from '../../icon/styles'
 import { commonLight } from '../../_styles/new-common'
 import { buttonLight } from '../../button/styles'
 import { timePickerLight } from '../../time-picker/styles'
@@ -11,7 +10,6 @@ export default {
   common: commonLight,
   peers: {
     Input: inputLight,
-    Icon: iconLight,
     Button: buttonLight,
     TimePicker: timePickerLight
   },
@@ -24,6 +22,7 @@ export default {
       primaryColor,
       borderRadiusSmall,
       iconColor,
+      iconColorDisabled,
       textColorPrimary,
       dividerColor,
       boxShadow2,
@@ -53,7 +52,9 @@ export default {
       panelActionDividerColor: dividerColor,
       panelBoxShadow: boxShadow2,
       panelBorderRadius: borderRadius,
-      calendarTitleFontWeight: fontWeightStrong
+      calendarTitleFontWeight: fontWeightStrong,
+      iconColor: iconColor,
+      iconColorDisabled: iconColorDisabled
     }
   }
 }

src/dynamic-input/src/DynamicInput.vue

@@ -10,12 +10,12 @@
       @click="handleCreateClick"
     >
       <template #icon>
-        <n-icon
+        <n-base-icon
           :unstable-theme="mergedTheme.peers.Icon"
           :unstable-theme-overrides="mergedTheme.overrides.Icon"
         >
           <add-icon />
-        </n-icon>
+        </n-base-icon>
       </template>
       {{ locale.create }}
     </n-button>
@@ -51,12 +51,12 @@
             @click="remove(index)"
           >
             <template #icon>
-              <n-icon
+              <n-base-icon
                 :unstable-theme="mergedTheme.peers.Icon"
                 :unstable-theme-overrides="mergedTheme.overrides.Icon"
               >
                 <remove-icon />
-              </n-icon>
+              </n-base-icon>
             </template>
           </n-button>
           <n-button
@@ -67,12 +67,12 @@
             @click="createItem(index)"
           >
             <template #icon>
-              <n-icon
+              <n-base-icon
                 :unstable-theme="mergedTheme.peers.Icon"
                 :unstable-theme-overrides="mergedTheme.overrides.Icon"
               >
                 <add-icon />
-              </n-icon>
+              </n-base-icon>
             </template>
           </n-button>
         </n-button-group>
@@ -86,7 +86,7 @@ import { ref, toRef, isProxy, toRaw, computed, defineComponent } from 'vue'
 import { useMergedState } from 'vooks'
 import { createId } from 'seemly'
 import { RemoveIcon, AddIcon } from '../../_base/icons'
-import { NIcon } from '../../icon'
+import { NBaseIcon } from '../../_base'
 import { NButton, NButtonGroup } from '../../button'
 import { useFormItem, useTheme, useLocale } from '../../_mixins'
 import { warn, call } from '../../_utils'
@@ -104,7 +104,7 @@ export default defineComponent({
     NDynamicInputPairPreset,
     NButtonGroup,
     NButton,
-    NIcon,
+    NBaseIcon,
     AddIcon,
     RemoveIcon
   },

src/dynamic-input/styles/dark.js

@@ -1,7 +1,6 @@
 import { inputDark } from '../../input/styles'
 import { buttonDark } from '../../button/styles'
 import { commonDark } from '../../_styles/new-common'
-import { iconDark } from '../../icon/styles'
 import commonVariables from './_common'
 
 export default {
@@ -9,8 +8,7 @@ export default {
   common: commonDark,
   peers: {
     Input: inputDark,
-    Button: buttonDark,
-    Icon: iconDark
+    Button: buttonDark
   },
   self () {
     return {

src/dynamic-input/styles/light.js

@@ -1,7 +1,6 @@
 import { inputLight } from '../../input/styles'
 import { buttonLight } from '../../button/styles'
 import { commonLight } from '../../_styles/new-common'
-import { iconLight } from '../../icon/styles'
 import commonVariables from './_common'
 
 export default {
@@ -9,8 +8,7 @@ export default {
   common: commonLight,
   peers: {
     Input: inputLight,
-    Button: buttonLight,
-    Icon: iconLight
+    Button: buttonLight
   },
   self () {
     return {

src/time-picker/src/TimePicker.vue

@@ -2,8 +2,10 @@
   <div
     class="n-time-picker"
     :class="{
+      'n-time-picker--disabled': disabled,
       'n-time-picker--invalid': isValueInvalid
     }"
+    :style="triggerCssVars"
   >
     <v-binder>
       <v-target>
@@ -30,12 +32,9 @@
           @clear="handleTimeInputClear"
         >
           <template v-if="showIcon" #suffix>
-            <n-icon
-              :unstable-theme="mergedTheme.peers.Icon"
-              :unstable-theme-overrides="mergedTheme.overrides.Icon"
-            >
+            <n-base-icon class="n-time-picker-icon">
               <time-icon />
-            </n-icon>
+            </n-base-icon>
           </template>
         </n-input>
       </v-target>
@@ -106,7 +105,7 @@ import {
 import { strictParse } from '../../date-picker/src/utils'
 import { TimeIcon } from '../../_base/icons'
 import { NInput } from '../../input'
-import { NIcon } from '../../icon'
+import { NBaseIcon } from '../../_base'
 import { useConfig, useTheme, useLocale, useFormItem } from '../../_mixins'
 import { warn, call, useAdjustedTo } from '../../_utils'
 import { timePickerLight } from '../styles'
@@ -117,7 +116,7 @@ export default defineComponent({
   name: 'TimePicker',
   components: {
     NInput,
-    NIcon,
+    NBaseIcon,
     VBinder,
     VTarget,
     VFollower,
@@ -265,6 +264,17 @@ export default defineComponent({
       ...useConfig(props),
       ...useFormItem(props),
       mergedTheme: themeRef,
+      triggerCssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseInOut },
+          self: { iconColor, iconColorDisabled }
+        } = themeRef.value
+        return {
+          '--icon-color': iconColor,
+          '--icon-color-disabled': iconColorDisabled,
+          '--bezier': cubicBezierEaseInOut
+        }
+      }),
       cssVars: computed(() => {
         const {
           self: {

src/time-picker/src/styles/index.cssr.js

@@ -2,6 +2,8 @@ import { c, cE, cM, cB, cNotM } from '../../../_utils/cssr'
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
 
 // vars:
+// --icon-color
+// --icon-color-disabled
 // --bezier
 // --border-radius
 // --item-color-hover
@@ -15,79 +17,92 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
 // --panel-box-shadow
 // --panel-color
 // --panel-divider-color
-export default cB('time-picker-panel', `
-  outline: none;
-  font-size: var(--item-font-size);
-  border-radius: var(--border-radius);
-  margin: 4px 0;
-  min-width: 104px;
-  overflow: hidden;
-  background-color: var(--panel-color);
-  box-shadow: var(--panel-box-shadow);
-  `, [
-  fadeInScaleUpTransition(),
-  cB('time-picker-actions', `
-    padding: var(--panel-action-padding);
-    align-items: center;
-    display: flex;
-    justify-content: space-evenly;
-  `),
-  cB('time-picker-cols', `
-    height: calc(var(--item-height) * 7);
-    display: flex;
-    position: relative;
-    border-bottom: 1px solid var(--panel-divider-color);
-  `),
-  cB('time-picker-col', `
-    flex-grow: 1;
-    min-width: var(--item-width);
-    height: calc(var(--item-height) * 7);
-    flex-direction: column;
-    transition: box-shadow .3s var(--bezier);
-  `, [
-    cM('transition-disabled', [
-      cE('item', {
-        transition: 'none'
+export default c([
+  cB('time-picker', [
+    cB('time-picker-icon', `
+      color: var(--icon-color);
+      transition: color .3s var(--bezier);
+    `),
+    cM('disabled', [
+      cB('time-picker-icon', {
+        color: 'var(--icon-color-disabled)'
       })
-    ]),
-    cE('padding', {
-      height: 'calc(var(--item-height) * 6)'
-    }),
-    cE('item', `
-      cursor: pointer;
-      height: var(--item-height);
-      display: flex;
+    ])
+  ]),
+  cB('time-picker-panel', `
+    outline: none;
+    font-size: var(--item-font-size);
+    border-radius: var(--border-radius);
+    margin: 4px 0;
+    min-width: 104px;
+    overflow: hidden;
+    background-color: var(--panel-color);
+    box-shadow: var(--panel-box-shadow);
+  `, [
+    fadeInScaleUpTransition(),
+    cB('time-picker-actions', `
+      padding: var(--panel-action-padding);
       align-items: center;
-      justify-content: center;
-      transition: 
-        color .3s var(--bezier),
-        background-color .3s var(--bezier),
-        opacity .3s var(--bezier),
-        text-decoration-color .3s var(--bezier);
-      background: transparent;
-      text-decoration-color: transparent;
-      color: var(--item-text-color);
+      display: flex;
+      justify-content: space-evenly;
+    `),
+    cB('time-picker-cols', `
+      height: calc(var(--item-height) * 7);
+      display: flex;
+      position: relative;
+      border-bottom: 1px solid var(--panel-divider-color);
+    `),
+    cB('time-picker-col', `
+      flex-grow: 1;
+      min-width: var(--item-width);
+      height: calc(var(--item-height) * 7);
+      flex-direction: column;
+      transition: box-shadow .3s var(--bezier);
     `, [
-      cNotM('disabled', [
-        c('&:hover', {
-          backgroundColor: 'var(--item-color-hover)'
+      cM('transition-disabled', [
+        cE('item', {
+          transition: 'none'
         })
       ]),
-      cM('active', `
-        background-color: var(--item-color-hover);
-        color: var(--item-text-color-active);
-      `),
-      cM('disabled', `
-        opacity: var(--item-opacity-disabled);
-        cursor: not-allowed;
-      `)
-    ]),
-    cM('invalid', [
-      cE('item', [
+      cE('padding', {
+        height: 'calc(var(--item-height) * 6)'
+      }),
+      cE('item', `
+        cursor: pointer;
+        height: var(--item-height);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: 
+          color .3s var(--bezier),
+          background-color .3s var(--bezier),
+          opacity .3s var(--bezier),
+          text-decoration-color .3s var(--bezier);
+        background: transparent;
+        text-decoration-color: transparent;
+        color: var(--item-text-color);
+      `, [
+        cNotM('disabled', [
+          c('&:hover', {
+            backgroundColor: 'var(--item-color-hover)'
+          })
+        ]),
         cM('active', `
-          text-decoration: line-through;
-          text-decoration-color: var(--item-text-color-active);
+          background-color: var(--item-color-hover);
+          color: var(--item-text-color-active);
+        `),
+        cM('disabled', `
+          opacity: var(--item-opacity-disabled);
+          cursor: not-allowed;
         `)
+      ]),
+      cM('invalid', [
+        cE('item', [
+          cM('active', `
+            text-decoration: line-through;
+            text-decoration-color: var(--item-text-color-active);
+          `)
+        ])
       ])
     ])
   ])

src/time-picker/styles/dark.js

@@ -1,5 +1,4 @@
 import commonVars from './_common'
-import { iconDark } from '../../icon/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
 import { commonDark } from '../../_styles/new-common'
 import { buttonDark } from '../../button/styles'
@@ -8,7 +7,6 @@ export default {
   name: 'TimePicker',
   common: commonDark,
   peers: {
-    Icon: iconDark,
     Scrollbar: scrollbarDark,
     Button: buttonDark
   },
@@ -21,7 +19,9 @@ export default {
       dividerColorOverlay,
       opacityDisabled,
       boxShadow2,
-      borderRadius
+      borderRadius,
+      iconColorOverlay,
+      iconColorDisabledOverlay
     } = vars
     return {
       ...commonVars,
@@ -32,7 +32,9 @@ export default {
       itemTextColorActive: primaryColor,
       itemColorHover: hoverColorOverlay,
       itemOpacityDisabled: opacityDisabled,
-      borderRadius
+      borderRadius,
+      iconColor: iconColorOverlay,
+      iconColorDisabled: iconColorDisabledOverlay
     }
   }
 }

src/time-picker/styles/light.js

@@ -1,5 +1,4 @@
 import commonVars from './_common'
-import { iconLight } from '../../icon/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
 import { commonLight } from '../../_styles/new-common'
 import { buttonDark } from '../../button/styles'
@@ -8,7 +7,6 @@ export default {
   name: 'TimePicker',
   common: commonLight,
   peers: {
-    Icon: iconLight,
     Scrollbar: scrollbarDark,
     Button: buttonDark
   },
@@ -21,7 +19,9 @@ export default {
       dividerColorOverlay,
       opacityDisabled,
       boxShadow2,
-      borderRadius
+      borderRadius,
+      iconColor,
+      iconColorDisabled
     } = vars
     return {
       ...commonVars,
@@ -32,7 +32,9 @@ export default {
       itemTextColorActive: primaryColor,
       itemColorHover: hoverColorOverlay,
       itemOpacityDisabled: opacityDisabled,
-      borderRadius
+      borderRadius,
+      iconColor,
+      iconColorDisabled
     }
   }
 }

src/transfer/src/Transfer.vue

@@ -31,7 +31,7 @@
             @focus="handleInputFocus"
             @blur="handleInputBlur"
           >
-            <template #suffix>
+            <template #clear>
               <n-base-icon>
                 <search-icon />
               </n-base-icon>
@@ -61,7 +61,7 @@
                   <n-transfer-source-list-item
                     :key="item.value"
                     :value="item.value"
-                    :disabled="item.disabled"
+                    :disabled="item.disabled || disabled"
                     :label="item.label"
                   />
                 </template>
@@ -82,7 +82,7 @@
                     v-for="option in filteredSrcOpts"
                     :key="option.value"
                     :value="option.value"
-                    :disabled="!!option.disabled"
+                    :disabled="!!option.disabled || disabled"
                     :label="option.label"
                   />
                 </transition-group>
@@ -102,7 +102,7 @@
     </div>
     <div class="n-transfer-gap">
       <n-button
-        :disabled="toButtonDisabled"
+        :disabled="toButtonDisabled || disabled"
         :unstable-theme="mergedTheme.peers.Button"
         :unstable-theme-overrides="mergedTheme.overrides.Button"
         @click="handleToTgtClick"
@@ -114,7 +114,7 @@
         </template>
       </n-button>
       <n-button
-        :disabled="fromButtonDisabled"
+        :disabled="fromButtonDisabled || disabled"
         :unstable-theme="mergedTheme.peers.Button"
         :unstable-theme-overrides="mergedTheme.overrides.Button"
         @click="handleToSrcClick"
@@ -148,7 +148,7 @@
             @focus="handleInputFocus"
             @blur="handleInputBlur"
           >
-            <template #suffix>
+            <template #clear>
               <n-base-icon>
                 <search-icon />
               </n-base-icon>
@@ -178,7 +178,7 @@
                   <n-transfer-target-list-item
                     :key="option.value"
                     :value="option.value"
-                    :disabled="!!option.disabled"
+                    :disabled="!!option.disabled || disabled"
                     :label="option.label"
                   />
                 </template>
@@ -199,7 +199,7 @@
                     v-for="option in filteredTgtOpts"
                     :key="option.value"
                     :value="option.value"
-                    :disabled="!!option.disabled"
+                    :disabled="!!option.disabled || disabled"
                     :label="option.label"
                   />
                 </transition-group>

src/transfer/src/TransferHeaderCheckbox.vue

@@ -4,7 +4,7 @@
     :unstable-theme-overrides="NTransfer.mergedTheme.overrides.Checkbox"
     :checked="checkboxProps.checked"
     :indeterminate="checkboxProps.indeterminate"
-    :disabled="checkboxProps.disabled"
+    :disabled="checkboxProps.disabled || NTransfer.disabled"
     :size="NTransfer.mergedSize"
     @update:checked="onChange"
   />

src/transfer/styles/dark.js

@@ -31,8 +31,7 @@ export default {
       textColorDisabledOverlay,
       textColor2Overlay,
       borderColorOverlay,
-      hoverColorOverlay,
-      fontWeightStrong
+      hoverColorOverlay
     } = vars
     return {
       ...commonVariables,
@@ -53,7 +52,7 @@ export default {
       itemTextColor: textColor2Overlay,
       itemTextColorDisabled: textColorDisabledOverlay,
       itemColorPending: hoverColorOverlay,
-      titleFontWeight: fontWeightStrong
+      titleFontWeight: 400
     }
   }
 }

src/transfer/styles/light.js

@@ -33,8 +33,7 @@ export default {
       textColor2,
       borderColorOverlay,
       hoverColorOverlay,
-      borderColor,
-      fontWeightStrong
+      borderColor
     } = vars
     return {
       ...commonVariables,
@@ -55,7 +54,7 @@ export default {
       itemTextColor: textColor2,
       itemTextColorDisabled: textColorDisabled,
       itemColorPending: hoverColorOverlay,
-      titleFontWeight: fontWeightStrong
+      titleFontWeight: 400
     }
   }
 }

vue3.md

@@ -384,8 +384,9 @@
   - [x] close 重构
   - [ ] data-table, radio style 重构
   - [x] message icon style
-  - [ ] transfer icon style
+  - [ ] transfer search icon style
   - [ ] base selection icon style
+  - [ ] date picker not working
 
 ## Info