wip(clear): ts

src/_base/clear/index.js

@@ -1,2 +0,0 @@
-/* istanbul ignore file */
-export { default } from './src/Clear.vue'

src/_base/clear/index.ts

@@ -0,0 +1,2 @@
+/* istanbul ignore file */
+export { default } from './src/Clear'

src/_base/clear/src/Clear.tsx

@@ -0,0 +1,59 @@
+import { h, defineComponent, PropType } from 'vue'
+import { useStyle } from '../../../_mixins'
+import { DismissCircleIcon } from '../../icons'
+import NBaseIcon from '../../icon'
+import NIconSwitchTransition from '../../icon-switch-transition'
+import style from './styles/index.cssr'
+
+export default defineComponent({
+  name: 'BaseClear',
+  components: {
+    NBaseIcon,
+    DismissCircleIcon,
+    NIconSwitchTransition
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    onClear: {
+      type: Function as PropType<((e: MouseEvent) => void) | undefined>,
+      default: undefined
+    }
+  },
+  setup () {
+    useStyle('BaseClear', style)
+    return {
+      handleMouseDown (e: MouseEvent) {
+        e.preventDefault()
+      }
+    }
+  },
+  render () {
+    return (
+      <div class="n-base-clear">
+        <NIconSwitchTransition>
+          {{
+            default: () => {
+              return this.show ? (
+                <NBaseIcon
+                  key="dismiss"
+                  class="n-base-clear__clear"
+                  onClick={this.onClear}
+                  onMousedown={this.handleMouseDown}
+                >
+                  <DismissCircleIcon />
+                </NBaseIcon>
+              ) : (
+                <div key="icon" class="n-base-clear__placeholder">
+                  <slot />
+                </div>
+              )
+            }
+          }}
+        </NIconSwitchTransition>
+      </div>
+    )
+  }
+})

src/_base/clear/src/Clear.vue

@@ -1,73 +0,0 @@
-<template>
-  <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
-      >
-        <dismiss-circle-icon />
-      </n-base-icon>
-      <div v-else key="icon" class="n-base-clear__placeholder">
-        <slot />
-      </div>
-    </n-icon-switch-transition>
-  </div>
-</template>
-
-<script>
-import { computed, defineComponent } from 'vue'
-import { useTheme } from '../../../_mixins'
-import { DismissCircleIcon } from '../../icons'
-import NBaseIcon from '../../icon'
-import NIconSwitchTransition from '../../icon-switch-transition'
-import { baseClearLight } from '../styles'
-import style from './styles/index.cssr.js'
-
-export default defineComponent({
-  name: 'BaseClear',
-  components: {
-    NBaseIcon,
-    DismissCircleIcon,
-    NIconSwitchTransition
-  },
-  props: {
-    ...useTheme.props,
-    show: {
-      type: Boolean,
-      default: false
-    },
-    onClear: {
-      type: Function,
-      default: undefined
-    }
-  },
-  setup (props) {
-    const themeRef = useTheme(
-      'BaseClear',
-      'BaseClear',
-      style,
-      baseClearLight,
-      props
-    )
-    return {
-      cssVars: computed(() => {
-        const {
-          common: { cubicBezierEaseInOut },
-          self: { size, color, colorHover, colorPressed }
-        } = themeRef.value
-        return {
-          '--bezier': cubicBezierEaseInOut,
-          '--color': color,
-          '--size': size,
-          '--color-hover': colorHover,
-          '--color-pressed': colorPressed
-        }
-      })
-    }
-  }
-})
-</script>

src/_base/clear/src/styles/index.cssr.ts

@@ -0,0 +1,58 @@
+import { cB, c, cE } from '../../../../_utils/cssr'
+import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch'
+
+// vars:
+// --bezier
+// --color
+// --size
+// --color-hover
+// --color-pressed
+export default cB(
+  'base-clear',
+  {
+    flexShrink: 0,
+    height: '1em',
+    width: '1em',
+    position: 'relative'
+  },
+  [
+    c('>', [
+      cE(
+        'clear',
+        {
+          fontSize: 'var(--size)',
+          cursor: 'pointer',
+          color: 'var(--color)',
+          transition: 'color .3s var(--bezier)'
+        },
+        [
+          c('&:hover', {
+            color: 'var(--color-hover)!important'
+          }),
+          c('&:active', {
+            color: 'var(--color-pressed)!important'
+          })
+        ]
+      ),
+      cE('placeholder', {
+        display: 'flex'
+      }),
+      cE(
+        'clear, placeholder',
+        {
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translateX(-50%) translateY(-50%)'
+        },
+        [
+          createIconSwitchTransition({
+            originalTransform: 'translateX(-50%) translateY(-50%)',
+            left: '50%',
+            top: '50%'
+          })
+        ]
+      )
+    ])
+  ]
+)

src/_base/clear/styles/_common.js

@@ -1,3 +0,0 @@
-export default {
-  size: '18px'
-}

src/_base/clear/styles/dark.js

@@ -1,17 +0,0 @@
-import commonVariables from './_common'
-import { scaleColor } from 'seemly'
-import { commonDark } from '../../../_styles/new-common'
-
-export default {
-  name: 'BaseClear',
-  common: commonDark,
-  self (vars) {
-    const { textColor4Overlay } = vars
-    return {
-      ...commonVariables,
-      color: textColor4Overlay,
-      colorHover: scaleColor(textColor4Overlay, { alpha: 1.25 }),
-      colorPressed: scaleColor(textColor4Overlay, { alpha: 0.75 })
-    }
-  }
-}

src/_base/clear/styles/index.js

@@ -1,2 +0,0 @@
-export { default as baseClearLight } from './light'
-export { default as baseClearDark } from './dark'

src/_base/clear/styles/light.js

@@ -1,17 +0,0 @@
-import commonVariables from './_common'
-import { scaleColor } from 'seemly'
-import { commonLight } from '../../../_styles/new-common'
-
-export default {
-  name: 'BaseClear',
-  common: commonLight,
-  self (vars) {
-    const { textColor4Overlay } = vars
-    return {
-      ...commonVariables,
-      color: textColor4Overlay,
-      colorHover: scaleColor(textColor4Overlay, { alpha: 0.75 }),
-      colorPressed: scaleColor(textColor4Overlay, { alpha: 1.25 })
-    }
-  }
-}