refactor(time-picker): new theme

src/styles.js

@@ -76,9 +76,9 @@ export { baseDark, baseLight } from './_styles/base'
 // export { tabsDark, tabsLight } from './tabs/styles'
 // export { tagDark, tagLight } from './tag/styles'
 // export { thingDark, thingLight } from './thing/styles'
-export { timeDark, timeLight } from './time/styles'
-export { timePickerDark, timePickerLight } from './time-picker/styles'
-export { timelineDark, timelineLight } from './timeline/styles'
+// export { timeDark, timeLight } from './time/styles'
+// export { timePickerDark, timePickerLight } from './time-picker/styles'
+// export { timelineDark, timelineLight } from './timeline/styles'
 export { tooltipDark, tooltipLight } from './tooltip/styles'
 export { transferDark, transferLight } from './transfer/styles'
 export { treeDark, treeLight } from './tree/styles'

src/styles.new.js

@@ -57,6 +57,7 @@ import { tableDark } from './table/styles'
 import { tabsDark } from './tabs/styles'
 import { tagDark } from './tag/styles'
 import { thingDark } from './thing/styles'
+import { timeDark } from './time/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -117,5 +118,6 @@ export const darkTheme = {
   Table: tableDark,
   Tabs: tabsDark,
   Tag: tagDark,
-  Thing: thingDark
+  Thing: thingDark,
+  Time: timeDark
 }

src/switch/src/Switch.vue

@@ -28,6 +28,7 @@ import { switchLight } from '../styles'
 export default defineComponent({
   name: 'Switch',
   props: {
+    ...useTheme.props,
     size: {
       type: String,
       default: 'medium'

src/table/src/Table.vue

@@ -22,6 +22,7 @@ import style from './styles/index.cssr.js'
 export default defineComponent({
   name: 'Table',
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: true

src/tabs/src/Tabs.vue

@@ -110,6 +110,7 @@ export default defineComponent({
     }
   },
   props: {
+    ...useTheme.props,
     value: {
       type: String || Number,
       required: true

src/tag/src/Tag.vue

@@ -42,6 +42,7 @@ export default defineComponent({
     NIcon
   },
   props: {
+    ...useTheme.props,
     ...commonProps,
     checked: {
       type: Boolean,

src/thing/src/Thing.vue

@@ -99,6 +99,7 @@ import style from './styles/index.cssr.js'
 export default defineComponent({
   name: 'Thing',
   props: {
+    ...useTheme.props,
     title: {
       type: String,
       default: undefined

src/time-picker/src/Panel.vue

@@ -1,11 +1,5 @@
 <template>
-  <div
-    tabindex="0"
-    class="n-time-picker-panel"
-    :class="{
-      [`n-${theme}-theme`]: theme
-    }"
-  >
+  <div tabindex="0" class="n-time-picker-panel">
     <div class="n-time-picker-cols">
       <div
         v-if="showHour"
@@ -110,7 +104,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, defineComponent } from 'vue'
 import { NScrollbar } from '../../scrollbar'
 import { NBaseFocusDetector } from '../../_base'
 
@@ -268,7 +262,7 @@ const time = {
   period: ['AM', 'PM']
 }
 
-export default {
+export default defineComponent({
   name: 'TimePickerPanel',
   components: {
     NScrollbar,
@@ -381,5 +375,5 @@ export default {
       ...time
     }
   }
-}
+})
 </script>

src/time-picker/src/TimePicker.vue

@@ -2,8 +2,7 @@
   <div
     class="n-time-picker"
     :class="{
-      'n-time-picker--invalid': isValueInvalid,
-      [`n-${mergedTheme}-theme`]: mergedTheme
+      'n-time-picker--invalid': isValueInvalid
     }"
   >
     <v-binder>
@@ -15,7 +14,7 @@
           passively-activated
           deactivate-on-enter
           :attr-size="mergedAttrSize"
-          :theme="mergedTheme"
+          :theme="'light'"
           :stateful="stateful"
           :size="mergedSize"
           :force-focus="active"
@@ -48,7 +47,7 @@
             v-if="active"
             ref="panelRef"
             v-clickoutside="handleClickOutside"
-            :theme="mergedTheme"
+            :style="cssVars"
             :transition-disabled="transitionDisabled"
             :hour-value="hourValue"
             :show-hour="hourInFormat"
@@ -81,19 +80,10 @@
 </template>
 
 <script>
-import { ref, toRef } from 'vue'
+import { ref, toRef, defineComponent, computed } from 'vue'
 import { useIsMounted, useKeyboard, useMergedState } from 'vooks'
 import { VBinder, VTarget, VFollower } from 'vueuc'
 import { clickoutside } from 'vdirs'
-import { NInput } from '../../input'
-import { NIcon } from '../../icon'
-import {
-  configurable,
-  themeable,
-  locale,
-  withCssr,
-  useFormItem
-} from '../../_mixins'
 import {
   isValid,
   startOfSecond,
@@ -109,13 +99,17 @@ import {
   getHours,
   getSeconds
 } from 'date-fns'
+import { NInput } from '../../input'
+import { NIcon } from '../../icon'
+import { useConfig, useTheme, useLocale, useFormItem } from '../../_mixins'
 import { strictParse } from '../../date-picker/src/utils'
 import { TimeIcon } from '../../_base/icons'
-import styles from './styles'
 import { warn, call, useAdjustedTo } from '../../_utils'
+import { timePickerLight } from '../styles'
 import Panel from './Panel.vue'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'TimePicker',
   components: {
     NInput,
@@ -129,8 +123,8 @@ export default {
   directives: {
     clickoutside
   },
-  mixins: [configurable, themeable, locale('TimePicker'), withCssr(styles)],
   props: {
+    ...useTheme.props,
     bordered: {
       type: Boolean,
       default: undefined
@@ -237,6 +231,13 @@ export default {
     }
   },
   setup (props) {
+    const themeRef = useTheme(
+      'TimePicker',
+      'TimePicker',
+      style,
+      timePickerLight,
+      props
+    )
     const uncontrolledValueRef = ref(props.defaultValue)
     const controlledValueRef = toRef(props, 'value')
     const mergedValueRef = useMergedState(
@@ -251,7 +252,43 @@ export default {
       panelRef: ref(null),
       adjustedTo: useAdjustedTo(props),
       keyboardState: useKeyboard(),
-      ...useFormItem(props)
+      ...useLocale('TimePicker'),
+      ...useConfig(props),
+      ...useFormItem(props),
+      cssVars: computed(() => {
+        const {
+          self: {
+            panelColor,
+            itemTextColor,
+            itemTextColorActive,
+            itemColorHover,
+            panelDividerColor,
+            panelBoxShadow,
+            itemOpacityDisabled,
+            borderRadius,
+            itemFontSize,
+            itemWidth,
+            itemHeight,
+            panelActionPadding
+          },
+          common: { cubicBezierEaseInOut }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--border-radius': borderRadius,
+          '--item-color-hover': itemColorHover,
+          '--item-font-size': itemFontSize,
+          '--item-height': itemHeight,
+          '--item-opacity-disabled': itemOpacityDisabled,
+          '--item-text-color': itemTextColor,
+          '--item-text-color-active': itemTextColorActive,
+          '--item-width': itemWidth,
+          '--panel-action-padding': panelActionPadding,
+          '--panel-box-shadow': panelBoxShadow,
+          '--panel-color': panelColor,
+          '--panel-divider-color': panelDividerColor
+        }
+      })
     }
   },
   data () {
@@ -591,5 +628,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

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

@@ -0,0 +1,94 @@
+import { c, cE, cM, cB, cNotM } from '../../../_utils/cssr'
+import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
+
+// vars:
+// --bezier
+// --border-radius
+// --item-color-hover
+// --item-font-size
+// --item-height
+// --item-opacity-disabled
+// --item-text-color
+// --item-text-color-active
+// --item-width
+// --panel-action-padding
+// --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'
+      })
+    ]),
+    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', `
+        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/src/styles/index.js

@@ -1,9 +0,0 @@
-import themedBaseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: themedBaseStyle
-  }
-]

src/time-picker/src/styles/themed-base.cssr.js

@@ -1,138 +0,0 @@
-import { c, cE, cM, cTB, cB, cNotM } from '../../../_utils/cssr'
-import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
-
-export default c([
-  ({ props }) => {
-    const {
-      panelColor,
-      itemTextColor,
-      itemTextColorActive,
-      itemTextDecorationColorActive,
-      itemColorHover,
-      panelDividerColor,
-      panelBoxShadow,
-      itemOpacityDisabled,
-      borderRadius,
-      itemFontSize,
-      itemWidth,
-      itemHeight,
-      panelActionPadding
-    } = props.$local
-    const {
-      transformDebounceScale,
-      cubicBezierEaseInOut
-    } = props.$global
-    return [
-      cTB('time-picker', [
-        cM('invalid', [
-          c('input', {
-            textDecoration: 'line-through'
-          })
-        ])
-      ]),
-      cTB('time-picker-panel', {
-        raw: `
-          outline: none;
-          font-size: ${itemFontSize};
-          border-radius: ${borderRadius};
-          margin: 4px 0;
-          min-width: 104px;
-          overflow: hidden;
-          transform: ${transformDebounceScale};
-          background-color: ${panelColor};
-          box-shadow: ${panelBoxShadow};
-        `
-      }, [
-        fadeInScaleUpTransition(),
-        cB('time-picker-actions', {
-          raw: `
-            padding: ${panelActionPadding};
-            align-items: center;
-            display: flex;
-            justify-content: space-evenly;
-          `
-        }, [
-          cE('confirm', [
-            cM('disabled', {
-              raw: `
-                cursor: not-allowed;
-                opacity: 0.5;
-              `
-            })
-          ])
-        ]),
-        cB('time-picker-cols', {
-          raw: `
-            height: calc(${itemHeight} * 7);
-            display: flex;
-            position: relative;
-            border-bottom: 1px solid ${panelDividerColor};
-          `
-        }),
-        cB('time-picker-col', {
-          raw: `
-            flex-grow: 1;
-            min-width: ${itemWidth};
-            height: calc(${itemHeight} * 7);
-            flex-direction: column;
-            transition: box-shadow .3s ${cubicBezierEaseInOut};
-          `
-        }, [
-          cM('transition-disabled', [
-            cE('item', {
-              transition: 'none'
-            })
-          ]),
-          cE('padding', {
-            height: `calc(${itemHeight} * 6)`
-          }),
-          cE('item', {
-            raw: `
-              cursor: pointer;
-              height: ${itemHeight};
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              transition: 
-                color .3s ${cubicBezierEaseInOut},
-                background-color .3s ${cubicBezierEaseInOut},
-                opacity .3s ${cubicBezierEaseInOut},
-                text-decoration-color .3s ${cubicBezierEaseInOut};
-              background: transparent;
-              text-decoration-color: transparent;
-              color: ${itemTextColor};
-            `
-          }, [
-            cNotM('disabled', [
-              c('&:hover', {
-                backgroundColor: itemColorHover
-              })
-            ]),
-            cM('active', {
-              raw: `
-                background-color: ${itemColorHover};
-                color: ${itemTextColorActive};
-              `
-            }),
-            cM('disabled', {
-              raw: `
-                opacity: ${itemOpacityDisabled};
-                cursor: not-allowed;
-              `
-            })
-          ]),
-          cM('invalid', [
-            cE('item', [
-              cM('active', {
-                raw: `
-                  text-decoration: line-through;
-                  text-decoration-color: ${itemTextDecorationColorActive};
-                `
-              })
-            ])
-          ])
-        ])
-      ])
-    ]
-  }
-])

src/time-picker/styles/dark.js

@@ -1,14 +1,16 @@
-import create from '../../_styles/utils/create-component-base'
 import commonVars from './_common'
-import { baseDark } from '../../_styles/base'
 import { iconDark } from '../../icon/styles'
 import { scrollbarDark } from '../../scrollbar/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'TimePicker',
-  theme: 'dark',
-  peer: [baseDark, iconDark, scrollbarDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Icon: iconDark,
+    Scrollbar: scrollbarDark
+  },
+  self (vars) {
     const {
       popoverColor,
       textColor2Overlay,
@@ -19,7 +21,6 @@ export default create({
       boxShadow2,
       borderRadius
     } = vars
-
     return {
       ...commonVars,
       panelColor: popoverColor,
@@ -29,9 +30,7 @@ export default create({
       itemTextColorActive: primaryColor,
       itemColorHover: hoverColorOverlay,
       itemOpacityDisabled: opacityDisabled,
-      triggerTextDecorationColor: textColor2Overlay,
-      triggerTextDecorationColorActive: primaryColor,
       borderRadius
     }
   }
-})
+}

src/time-picker/styles/light.js

@@ -1,14 +1,16 @@
-import create from '../../_styles/utils/create-component-base'
 import commonVars from './_common'
-import { baseLight } from '../../_styles/base'
 import { iconLight } from '../../icon/styles'
-import { scrollbarLight } from '../../scrollbar/styles'
+import { scrollbarDark } from '../../scrollbar/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'TimePicker',
-  theme: 'light',
-  peer: [baseLight, iconLight, scrollbarLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Icon: iconLight,
+    Scrollbar: scrollbarDark
+  },
+  self (vars) {
     const {
       modalColor,
       textColor2Overlay,
@@ -19,7 +21,6 @@ export default create({
       boxShadow2,
       borderRadius
     } = vars
-
     return {
       ...commonVars,
       panelColor: modalColor,
@@ -29,9 +30,7 @@ export default create({
       itemTextColorActive: primaryColor,
       itemColorHover: hoverColorOverlay,
       itemOpacityDisabled: opacityDisabled,
-      triggerTextDecorationColor: textColor2Overlay,
-      triggerTextDecorationColorActive: primaryColor,
       borderRadius
     }
   }
-})
+}