diff --git a/src/_base/clear/index.js b/src/_base/clear/index.js deleted file mode 100644 index b9d4e2222..000000000 --- a/src/_base/clear/index.js +++ /dev/null @@ -1,2 +0,0 @@ -/* istanbul ignore file */ -export { default } from './src/Clear.vue' diff --git a/src/_base/clear/index.ts b/src/_base/clear/index.ts new file mode 100644 index 000000000..c464f7e2f --- /dev/null +++ b/src/_base/clear/index.ts @@ -0,0 +1,2 @@ +/* istanbul ignore file */ +export { default } from './src/Clear' diff --git a/src/_base/clear/src/Clear.tsx b/src/_base/clear/src/Clear.tsx new file mode 100644 index 000000000..c99692094 --- /dev/null +++ b/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 ( +
+ + {{ + default: () => { + return this.show ? ( + + + + ) : ( +
+ +
+ ) + } + }} +
+
+ ) + } +}) diff --git a/src/_base/clear/src/Clear.vue b/src/_base/clear/src/Clear.vue deleted file mode 100644 index 5f5b87882..000000000 --- a/src/_base/clear/src/Clear.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - diff --git a/src/_base/clear/src/styles/index.cssr.ts b/src/_base/clear/src/styles/index.cssr.ts new file mode 100644 index 000000000..f40334fe2 --- /dev/null +++ b/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%' + }) + ] + ) + ]) + ] +) diff --git a/src/_base/clear/styles/_common.js b/src/_base/clear/styles/_common.js deleted file mode 100644 index 3a5aa2f41..000000000 --- a/src/_base/clear/styles/_common.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - size: '18px' -} diff --git a/src/_base/clear/styles/dark.js b/src/_base/clear/styles/dark.js deleted file mode 100644 index d39038caa..000000000 --- a/src/_base/clear/styles/dark.js +++ /dev/null @@ -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 }) - } - } -} diff --git a/src/_base/clear/styles/index.js b/src/_base/clear/styles/index.js deleted file mode 100644 index 0e86cf179..000000000 --- a/src/_base/clear/styles/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as baseClearLight } from './light' -export { default as baseClearDark } from './dark' diff --git a/src/_base/clear/styles/light.js b/src/_base/clear/styles/light.js deleted file mode 100644 index b5a8ad008..000000000 --- a/src/_base/clear/styles/light.js +++ /dev/null @@ -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 }) - } - } -}