refactor(space): ts

src/space/demos/enUS/index.demo-entry.md

@@ -18,7 +18,7 @@ from-end
 | inline | `boolean` | `false` |  |
 | item-style | `string \| object` | `undefined` |  |
 | justify | `'start' \| 'end'` | `'start'` |  |
-| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` |  |
+| size | `'small' \| 'medium' \| 'large' \| [number, number]` | `'medium'` |  |
 | vertical | `boolean` | `false` |  |
 
 ## Slots

src/space/demos/zhCN/index.demo-entry.md

@@ -18,7 +18,7 @@ from-end
 | inline | `boolean` | `false` |  |
 | item-style | `string \| object` | `undefined` |  |
 | justify | `'start' \| 'end'` | `'start'` |  |
-| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` |  |
+| size | `'small' \| 'medium' \| 'large' \| [number, number]` | `'medium'` |  |
 | vertical | `boolean` | `false` |  |
 
 ## Slots

src/space/src/Space.ts

@@ -1,31 +1,30 @@
-import { h, defineComponent, computed } from 'vue'
+import { h, defineComponent, computed, PropType } from 'vue'
+import { depx } from 'seemly'
 import { createKey, flatten, getSlot } from '../../_utils'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { spaceLight } from '../styles'
-import { depx } from 'seemly'
+import type { SpaceTheme } from '../styles'
+
+type Align =
+  | 'stretch'
+  | 'baseline'
+  | 'start'
+  | 'end'
+  | 'center'
+  | 'flex-end'
+  | 'flex-start'
 
 export default defineComponent({
   name: 'Space',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<SpaceTheme>),
     align: {
-      validator (value) {
-        return [
-          'stretch',
-          'baseline',
-          'start',
-          'end',
-          'center',
-          'flex-end',
-          'flex-start'
-        ].includes(value)
-      },
+      type: String as PropType<Align>,
       default: undefined
     },
     justify: {
-      validator (value) {
-        return ['start', 'end'].includes(value)
-      },
+      type: String as PropType<'start' | 'end'>,
       default: 'start'
     },
     inline: {
@@ -37,12 +36,9 @@ export default defineComponent({
       default: false
     },
     size: {
-      validator (value) {
-        return (
-          ['small', 'medium', 'large'].includes(value) ||
-          typeof value === 'number'
-        )
-      },
+      type: [String, Array] as PropType<
+        'small' | 'medium' | 'large' | [number, number]
+      >,
       default: 'medium'
     },
     itemStyle: {
@@ -51,11 +47,16 @@ export default defineComponent({
     }
   },
   setup (props) {
-    const themeRef = useTheme('Space', 'Space', null, spaceLight, props)
+    const themeRef = useTheme('Space', 'Space', undefined, spaceLight, props)
     return {
-      margin: computed(() => {
+      margin: computed<{ horizontal: number; vertical: number }>(() => {
         const { size } = props
-        if (typeof size === 'number') return null
+        if (Array.isArray(size)) {
+          return {
+            horizontal: size[0],
+            vertical: size[1]
+          }
+        }
         const {
           self: {
             [createKey('marginHorizontal', size)]: marginHorizontal,
@@ -70,13 +71,11 @@ export default defineComponent({
     }
   },
   render () {
-    const { size, vertical, align, inline, justify, itemStyle, margin } = this
+    const { vertical, align, inline, justify, itemStyle, margin } = this
     const children = flatten(getSlot(this))
-    const sizeIsNumber = typeof size === 'number'
-    const horizontalMargin = (sizeIsNumber ? size : margin.horizontal) + 'px'
-    const verticalMargin = (sizeIsNumber ? size : margin.vertical) + 'px'
-    const semiVerticalMargin =
-      (sizeIsNumber ? size : margin.vertical) / 2 + 'px'
+    const horizontalMargin = margin.horizontal + 'px'
+    const verticalMargin = margin.vertical + 'px'
+    const semiVerticalMargin = margin.vertical / 2 + 'px'
     const lastIndex = children.length - 1
     return h(
       'div',

src/space/styles/index.js

@@ -1,2 +0,0 @@
-export { default as spaceDark } from './dark.js'
-export { default as spaceLight } from './light.js'

src/space/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as spaceDark } from './dark'
+export { default as spaceLight } from './light'
+export type { SpaceTheme, SpaceThemeVars } from './light'

src/space/styles/light.js

@@ -1,8 +0,0 @@
-import commonVars from './_common'
-
-export default {
-  name: 'Space',
-  self () {
-    return commonVars
-  }
-}

src/space/styles/light.ts

@@ -0,0 +1,16 @@
+import type { Theme } from '../../_mixins'
+import commonVars from './_common'
+
+const self = () => {
+  return commonVars
+}
+
+export type SpaceThemeVars = ReturnType<typeof self>
+
+const spaceLight: Theme<SpaceThemeVars> = {
+  name: 'Space',
+  self
+}
+
+export default spaceLight
+export type SpaceTheme = typeof spaceLight