refactor(list): ts

src/list/index.js

@@ -1,3 +0,0 @@
-/* istanbul ignore file */
-export { default as NList } from './src/List.vue'
-export { default as NListItem } from './src/ListItem.vue'

src/list/index.ts

@@ -0,0 +1,3 @@
+/* istanbul ignore file */
+export { default as NList } from './src/List'
+export { default as NListItem } from './src/ListItem'

src/list/src/List.tsx

@@ -1,34 +1,23 @@
-<template>
-  <ul
-    class="n-list"
-    :class="{
-      'n-list--bordered': bordered,
-      [`n-list--${size}-size`]: size
-    }"
-    :style="cssVars"
-  >
-    <div v-if="$slots.header" class="n-list__header">
-      <slot name="header" />
-    </div>
-    <slot />
-    <div v-if="$slots.footer" class="n-list__footer">
-      <slot name="footer" />
-    </div>
-  </ul>
-</template>
-
-<script>
-import { computed, defineComponent } from 'vue'
+import {
+  computed,
+  defineComponent,
+  h,
+  renderSlot,
+  PropType,
+  CSSProperties
+} from 'vue'
 import { useTheme } from '../../_mixins'
+import type { ThemeProps } from '../../_mixins'
 import { listLight } from '../styles'
-import style from './styles/index.cssr.js'
+import type { ListTheme } from '../styles'
+import style from './styles/index.cssr'
 
 export default defineComponent({
   name: 'List',
   props: {
-    ...useTheme.props,
+    ...(useTheme.props as ThemeProps<ListTheme>),
     size: {
-      type: String,
+      type: String as PropType<'small' | 'medium' | 'large'>,
       default: 'medium'
     },
     bordered: {
@@ -62,6 +51,29 @@ export default defineComponent({
         }
       })
     }
+  },
+  render () {
+    const { $slots } = this
+    return (
+      <ul
+        class={[
+          'n-list',
+          {
+            'n-list--bordered': this.bordered
+          }
+        ]}
+        style={this.cssVars as CSSProperties}
+      >
+        {$slots.header ? (
+          <div class="n-list__header">{renderSlot($slots, 'header')}</div>
+        ) : null}
+        {renderSlot($slots, 'default')}
+        {$slots.footer ? (
+          <div v-if="$slots.footer" class="n-list__footer">
+            {renderSlot($slots, 'footer')}
+          </div>
+        ) : null}
+      </ul>
+    )
   }
 })
-</script>

src/list/src/ListItem.tsx

@@ -0,0 +1,21 @@
+import { h, renderSlot, defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ListItem',
+  render () {
+    const { $slots } = this
+    return (
+      <li class="n-list-item">
+        {$slots.prefix ? (
+          <div class="n-list-item__prefix">{renderSlot($slots, 'prefix')}</div>
+        ) : null}
+        {$slots.default ? (
+          <div class="n-list-item__main">{renderSlot($slots, 'default')}</div>
+        ) : null}
+        {$slots.suffix ? (
+          <div class="n-list-item__suffix">{renderSlot($slots, 'suffix')}</div>
+        ) : null}
+      </li>
+    )
+  }
+})

src/list/src/ListItem.vue

@@ -1,21 +0,0 @@
-<template>
-  <li class="n-list-item">
-    <div v-if="$slots.prefix" class="n-list-item__prefix">
-      <slot name="prefix" />
-    </div>
-    <div v-if="$slots.default" class="n-list-item__main">
-      <slot />
-    </div>
-    <div v-if="$slots.suffix" class="n-list-item__suffix">
-      <slot name="suffix" />
-    </div>
-  </li>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'ListItem'
-})
-</script>

src/list/styles/dark.ts

@@ -1,6 +1,7 @@
 import { commonDark } from '../../_styles/new-common'
+import type { ListTheme } from './light'
 
-export default {
+const listDark: ListTheme = {
   name: 'List',
   common: commonDark,
   self (vars) {
@@ -22,3 +23,5 @@ export default {
     }
   }
 }
+
+export default listDark

src/list/styles/index.js

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

src/list/styles/index.ts

@@ -0,0 +1,3 @@
+export { default as listDark } from './dark'
+export { default as listLight } from './light'
+export { ListTheme, ListThemeVars } from './light'

src/list/styles/light.js

@@ -1,24 +0,0 @@
-import { commonLight } from '../../_styles/new-common'
-
-export default {
-  name: 'List',
-  common: commonLight,
-  self (vars) {
-    const {
-      textColor2,
-      cardColor,
-      modalColor,
-      dividerColorOverlay,
-      borderRadius,
-      fontSize
-    } = vars
-    return {
-      textColor: textColor2,
-      color: cardColor,
-      colorModal: modalColor,
-      borderColor: dividerColorOverlay,
-      borderRadius,
-      fontSize
-    }
-  }
-}

src/list/styles/light.ts

@@ -0,0 +1,32 @@
+import { commonLight } from '../../_styles/new-common'
+import type { ThemeCommonVars } from '../../_styles/new-common'
+
+const self = (vars: ThemeCommonVars) => {
+  const {
+    textColor2,
+    cardColor,
+    modalColor,
+    dividerColorOverlay,
+    borderRadius,
+    fontSize
+  } = vars
+  return {
+    textColor: textColor2,
+    color: cardColor,
+    colorModal: modalColor,
+    borderColor: dividerColorOverlay,
+    borderRadius,
+    fontSize
+  }
+}
+
+export type ListThemeVars = ReturnType<typeof self>
+
+const listLight = {
+  name: 'List',
+  common: commonLight,
+  self
+}
+
+export default listLight
+export type ListTheme = typeof listLight