From 6c36fadf5933a18d79e1bc74384c0f95c1b11624 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 15 Feb 2021 21:55:53 +0800
Subject: [PATCH] types(Search): use tsx (#8161)
---
src/search/{index.js => index.tsx} | 24 ++++++++++++++++--------
src/vue-tsx-shim.d.ts | 1 +
2 files changed, 17 insertions(+), 8 deletions(-)
rename src/search/{index.js => index.tsx} (85%)
diff --git a/src/search/index.js b/src/search/index.tsx
similarity index 85%
rename from src/search/index.js
rename to src/search/index.tsx
index 990c06eab..ee90bcc72 100644
--- a/src/search/index.js
+++ b/src/search/index.tsx
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, PropType, CSSProperties } from 'vue';
// Utils
import { pick, createNamespace, preventDefault } from '../utils';
@@ -9,8 +9,13 @@ import { useExpose } from '../composables/use-expose';
// Components
import Field from '../field';
+// Types
+import type { FieldClearTrigger } from '../field/types';
+
const [createComponent, bem, t] = createNamespace('search');
+export type SearchShape = 'square' | 'round';
+
export default createComponent({
inheritAttrs: false,
@@ -21,9 +26,9 @@ export default createComponent({
actionText: String,
background: String,
showAction: Boolean,
- clearTrigger: String,
+ clearTrigger: String as PropType<FieldClearTrigger>,
shape: {
- type: String,
+ type: String as PropType<SearchShape>,
default: 'square',
},
clearable: {
@@ -48,7 +53,7 @@ export default createComponent({
}
};
- const onKeypress = (event) => {
+ const onKeypress = (event: KeyboardEvent) => {
const ENTER_CODE = 13;
if (event.keyCode === ENTER_CODE) {
preventDefault(event);
@@ -73,7 +78,7 @@ export default createComponent({
<div
class={bem('action')}
role="button"
- tabindex="0"
+ tabindex={0}
onClick={onCancel}
>
{slots.action ? slots.action() : text}
@@ -109,8 +114,8 @@ export default createComponent({
style: null,
class: null,
};
-
- const onInput = (value) => {
+
+ const onInput = (value: string) => {
emit('update:modelValue', value);
};
@@ -132,7 +137,10 @@ export default createComponent({
return () => (
<div
class={[bem({ 'show-action': props.showAction }), attrs.class]}
- style={{ background: props.background, ...attrs.style }}
+ style={{
+ background: props.background,
+ ...(attrs.style as CSSProperties),
+ }}
>
{slots.left?.()}
<div class={bem('content', props.shape)}>
diff --git a/src/vue-tsx-shim.d.ts b/src/vue-tsx-shim.d.ts
index 6cc043b45..e6f4db5fc 100644
--- a/src/vue-tsx-shim.d.ts
+++ b/src/vue-tsx-shim.d.ts
@@ -22,6 +22,7 @@ declare module 'vue' {
onSelect?: EventHandler;
onToggle?: EventHandler;
onConfirm?: EventHandler;
+ onKeypress?: EventHandler;
onClickStep?: EventHandler;
onTouchstart?: EventHandler;
}