From f6f78620453b05ca30274cb1a1a28ed934dba5d9 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Thu, 5 Aug 2021 23:32:50 +0800 Subject: [PATCH 01/14] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=20=E4=B8=8D?= =?UTF-8?q?=E8=B7=9F=E8=B8=AA=20.history=20=E6=9C=AC=E5=9C=B0=E7=BC=93?= =?UTF-8?q?=E5=AD=98=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index d424f6a8..9c5f67e6 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ dist dist-ssr *.local package-lock.json +.history -- Gitee From ff537cb1d14bce3701e1445b4f0078478efcd532 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Thu, 5 Aug 2021 23:33:14 +0800 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/search.tsx | 50 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/devui/search/search.tsx b/devui/search/search.tsx index 29717923..bbddd866 100644 --- a/devui/search/search.tsx +++ b/devui/search/search.tsx @@ -1,12 +1,54 @@ -import { defineComponent } from 'vue' +import { defineComponent, PropType, computed } from 'vue' +import { SearchProps } from './search.type' +import './search.scss' +const KEYS_MAP = { + enter: 'Enter' +} as const +const SIZE_CLASS = { + lg: 'lg', + sm: 'sm', +} as const export default defineComponent({ - name: 'd-search', + name: 'DSearch', props: { + size: { + type: String as PropType, + default: 'normal', + validator: (prop: string) => ['lg', 'sm'].includes(prop), + }, + // searchFn: Function as unknown as PropType, }, - setup(props, ctx) { + setup(props) { + // const { searchFn } = props; + const rootClasses = computed(() => ({ + 'd-search': true, + [`d-search__${props.size}`]: SIZE_CLASS[props.size!], + })) + const onInputKeydown = ($event: KeyboardEvent) => { + switch ($event.key) { + case KEYS_MAP.enter: + handleEnter(); + break; + default: + break; + } + }; + const handleEnter = () => { + console.log('键盘keydown事件') + // ctx.emit('键盘事件') + } return () => { - return
devui-search
+ return ( +
+ + + + +
+ ) } } }) \ No newline at end of file -- Gitee From 20c7e8d53c061f6116ce7faaa17298cf8edf2c06 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Thu, 5 Aug 2021 23:33:33 +0800 Subject: [PATCH 03/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/search.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 devui/search/search.scss diff --git a/devui/search/search.scss b/devui/search/search.scss new file mode 100644 index 00000000..f12b9441 --- /dev/null +++ b/devui/search/search.scss @@ -0,0 +1,16 @@ +.d-search { + span { + width: auto; + pointer-events: all; + cursor: pointer; + height: 100%; + line-height: 28px; + padding: 0 10px; + } + + &__sm { + width: 34px; + height: 26px; + line-height: 26px; + } +} -- Gitee From 0c66be92784f6ad4a2e016134771be6bc41fd516 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Thu, 5 Aug 2021 23:33:51 +0800 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E7=BB=84=E4=BB=B6demo=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/demo/demo-basic.tsx | 26 ++++++++++++++++++++++++++ devui/search/demo/search-demo.tsx | 20 ++++++++++++-------- 2 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 devui/search/demo/demo-basic.tsx diff --git a/devui/search/demo/demo-basic.tsx b/devui/search/demo/demo-basic.tsx new file mode 100644 index 00000000..58eac18e --- /dev/null +++ b/devui/search/demo/demo-basic.tsx @@ -0,0 +1,26 @@ +import { defineComponent } from 'vue' +import DSearch from '../search' +export default defineComponent({ + render() { + return ( +
+
+
{ 'Small' }
+ +
+
+
{ 'Middle' }
+ +
+
+
{ 'Large' }
+ +
+
+
{ 'Disabled' }
+ +
+
+ ) + } +}) \ No newline at end of file diff --git a/devui/search/demo/search-demo.tsx b/devui/search/demo/search-demo.tsx index 8ca5f9db..8729047a 100644 --- a/devui/search/demo/search-demo.tsx +++ b/devui/search/demo/search-demo.tsx @@ -1,12 +1,16 @@ import { defineComponent } from 'vue' - +import { useDemo } from 'hooks/use-demo'; +import DemoBasic from './demo-basic'; +import DemoBasicCode from './demo-basic?raw'; export default defineComponent({ - name: 'd-search-demo', - props: { - }, - setup(props, ctx) { - return () => { - return
devui-search-demo
- } + render () { + return useDemo([ + { + id: 'demo-basic', + title: '基本用法', + code: DemoBasicCode, + content: + } + ]); } }) \ No newline at end of file -- Gitee From 3e27925552497b934843712a81301db797a3c295 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Thu, 5 Aug 2021 23:34:08 +0800 Subject: [PATCH 05/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E7=BB=84=E4=BB=B6=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/search.type.ts | 57 +++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 devui/search/search.type.ts diff --git a/devui/search/search.type.ts b/devui/search/search.type.ts new file mode 100644 index 00000000..d3d6b175 --- /dev/null +++ b/devui/search/search.type.ts @@ -0,0 +1,57 @@ +import { EventEmitter } from '@angular/core'; +export interface SearchProps { + /** + * 搜索框尺寸 + * @default '' + */ + readonly size?: 'lg' | 'sm' + /** + * 输入框placeholder + * @default '' + */ + placeholder?: string + /** + * 输入框的max-length + * @default Number.MAX_SAFE_INTEGER + */ + maxLength?: number + /** + * debounceTime 的延迟 + * @default 300 + */ + delay?: number + /** + * 输入框是否可用 + * @default false + */ + disabled?: boolean + /** + * 输入框是否自动对焦 + * @default false + */ + autoFocus?: boolean + /** + * 是否支持输入值立即出发 searchFn + * @default false + */ + isKeyupSearch?: boolean + /** + * 搜索图标位置 + * @default '' + */ + iconPosition?: 'right' | 'left' + /** + * 是否显示边框 + * @default false + */ + noBorder?: boolean + /** + * 支持传入类名到输入框上 + * @default '' + */ + cssClass?: string + /** + * 回车或点击搜索按钮触发的回调函数，返回文本框输入的值 + */ + searchFn?: EventEmitter +} -- Gitee From 576a949969492e1716e03d4c59cb091107973496 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:20:47 +0800 Subject: [PATCH 06/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0flex=E6=B7=B7?= =?UTF-8?q?=E5=85=A5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/style/mixins/_flex.scss | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 devui/style/mixins/_flex.scss diff --git a/devui/style/mixins/_flex.scss b/devui/style/mixins/_flex.scss new file mode 100644 index 00000000..506eac1d --- /dev/null +++ b/devui/style/mixins/_flex.scss @@ -0,0 +1,9 @@ +@mixin flex($justifyContent: center, $alignItem: center,) { + display: flex; + justify-content: $justifyContent; + align-items: $alignItem; +} + +@mixin flex-direction($direction: column) { + flex-direction: $direction; +} -- Gitee From ea1ded9990ca6d26d647c45c28f295bbf45bb9c4 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:21:42 +0800 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0search=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84demo=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/demo/search-demo.scss | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 devui/search/demo/search-demo.scss diff --git a/devui/search/demo/search-demo.scss b/devui/search/demo/search-demo.scss new file mode 100644 index 00000000..f03923e9 --- /dev/null +++ b/devui/search/demo/search-demo.scss @@ -0,0 +1,3 @@ +.demo-d-search { + width: 200px; +} -- Gitee From 7c39c60fecc905c32f60f230b12803ad4f6f7e82 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:22:29 +0800 Subject: [PATCH 08/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0search=E7=BB=84?= =?UTF-8?q?=E4=BB=B6demo=E5=B1=95=E7=A4=BA=EF=BC=8C=E6=9A=82=E6=97=B6?= =?UTF-8?q?=E5=8F=AA=E6=9C=89size=E5=92=8Cdisabled=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/demo/demo-basic.tsx | 25 +++++++++++++++++-------- devui/search/demo/search-demo.tsx | 2 ++ 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/devui/search/demo/demo-basic.tsx b/devui/search/demo/demo-basic.tsx index 58eac18e..c94830df 100644 --- a/devui/search/demo/demo-basic.tsx +++ b/devui/search/demo/demo-basic.tsx @@ -1,26 +1,35 @@ -import { defineComponent } from 'vue' +import { defineComponent, ref } from 'vue' import DSearch from '../search' + export default defineComponent({ - render() { - return ( + setup() { + return () => (
{ 'Small' }
- +
+ +
{ 'Middle' }
- +
+ +
{ 'Large' }
- +
+ +
{ 'Disabled' }
- +
+ +
) - } + }, }) \ No newline at end of file diff --git a/devui/search/demo/search-demo.tsx b/devui/search/demo/search-demo.tsx index 8729047a..87f008d7 100644 --- a/devui/search/demo/search-demo.tsx +++ b/devui/search/demo/search-demo.tsx @@ -2,6 +2,8 @@ import { defineComponent } from 'vue' import { useDemo } from 'hooks/use-demo'; import DemoBasic from './demo-basic'; import DemoBasicCode from './demo-basic?raw'; +import './search-demo.scss'; + export default defineComponent({ render () { return useDemo([ -- Gitee From 2298e035923b1925503aa900d551c73b201ab867 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:23:07 +0800 Subject: [PATCH 09/14] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0search=20api?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/search.scss | 36 +++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/devui/search/search.scss b/devui/search/search.scss index f12b9441..2794d35f 100644 --- a/devui/search/search.scss +++ b/devui/search/search.scss @@ -1,16 +1,38 @@ +@import '../style/mixins/size'; +@import '../style/mixins/flex'; + .d-search { - span { - width: auto; + position: relative; + @include flex; + + input { + padding-right: 30px; + } + + &__icon { pointer-events: all; cursor: pointer; - height: 100%; - line-height: 28px; padding: 0 10px; + position: absolute; + right: 0; + top: 0; + @include size(36px, 28px); + @include flex; } &__sm { - width: 34px; - height: 26px; - line-height: 26px; + .d-search__icon { + @include size(34px, 26px); + } + } + + &__lg { + .d-search__icon { + @include size(46px, 46px); + } + + input { + padding-right: 36px; + } } } -- Gitee From 3d7d05da7ebf95ffafdf26fa7afc5cf49fd2356b Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:24:15 +0800 Subject: [PATCH 10/14] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9props=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E6=96=B9=E5=BC=8F=E3=80=81=E5=BC=95=E7=94=A8text-inpu?= =?UTF-8?q?t=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/search.tsx | 56 ++++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/devui/search/search.tsx b/devui/search/search.tsx index bbddd866..d9fbed2a 100644 --- a/devui/search/search.tsx +++ b/devui/search/search.tsx @@ -1,52 +1,50 @@ -import { defineComponent, PropType, computed } from 'vue' -import { SearchProps } from './search.type' +import { defineComponent } from 'vue' +import { SearchProps, searchProps } from './use-search' +import { getRootClass } from './class-search' +import DTextInput from '../text-input/src/text-input'; import './search.scss' const KEYS_MAP = { enter: 'Enter' } as const -const SIZE_CLASS = { - lg: 'lg', - sm: 'sm', -} as const + export default defineComponent({ name: 'DSearch', - props: { - size: { - type: String as PropType, - default: 'normal', - validator: (prop: string) => ['lg', 'sm'].includes(prop), - }, - // searchFn: Function as unknown as PropType, - }, - setup(props) { - // const { searchFn } = props; - const rootClasses = computed(() => ({ - 'd-search': true, - [`d-search__${props.size}`]: SIZE_CLASS[props.size!], - })) + props: searchProps, + setup(props: SearchProps, ctx) { + const rootClasses = getRootClass(props) const onInputKeydown = ($event: KeyboardEvent) => { switch ($event.key) { case KEYS_MAP.enter: - handleEnter(); + handleEnter($event); break; default: break; } }; - const handleEnter = () => { - console.log('键盘keydown事件') - // ctx.emit('键盘事件') + const handleEnter = ($event: KeyboardEvent) => { + if ($event.target instanceof HTMLInputElement) { + console.log(($event.target as HTMLInputElement).value) + const value = ($event.target as HTMLInputElement).value + if (value.length > 0) { + ctx.emit('searchFn', value) + } + } } return () => { return (
- - - - + > +
+ + + +
) } -- Gitee From 4b58c57d67b9afeb008c82c4fdfab2c351a8f7cc Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:25:04 +0800 Subject: [PATCH 11/14] =?UTF-8?q?feat:=20=E5=AE=9A=E4=B9=89class=20hook?= =?UTF-8?q?=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/class-search.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 devui/search/class-search.ts diff --git a/devui/search/class-search.ts b/devui/search/class-search.ts new file mode 100644 index 00000000..b75d4381 --- /dev/null +++ b/devui/search/class-search.ts @@ -0,0 +1,17 @@ +import { computed, ComputedRef } from 'vue'; +import { SearchProps } from './use-search' +const SIZE_CLASS = { + lg: 'lg', + sm: 'sm', +} as const +const ICON_POSITION = { + right: 'right', + left: 'left', +} +export const getRootClass = (props: SearchProps): ComputedRef => { + return computed(() => ({ + 'd-search': true, + [`d-search__${props.size}`]: SIZE_CLASS[props.size], + [`d-search__${props.iconPosition}`]: ICON_POSITION[props.iconPosition], + })) +} -- Gitee From 07b08f861aa7993bd7e8fd9db6947d181ea1e8e8 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:25:35 +0800 Subject: [PATCH 12/14] =?UTF-8?q?feat:=20=E5=AE=9A=E4=B9=89search=E7=BB=84?= =?UTF-8?q?=E4=BB=B6props=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/use-search.ts | 47 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 devui/search/use-search.ts diff --git a/devui/search/use-search.ts b/devui/search/use-search.ts new file mode 100644 index 00000000..fa7703e3 --- /dev/null +++ b/devui/search/use-search.ts @@ -0,0 +1,47 @@ +import { PropType, ExtractPropTypes } from 'vue' +type Size = 'lg' | 'sm' +type IconPosition = 'right' | 'left' +export const searchProps = { + size: { + type: String as PropType, + default: '', + }, + placeholder: { + type: String, + default: '请输入关键字' + }, + maxLength: { + type: Number, + default: Number.MAX_SAFE_INTEGER, + }, + delay: { + type: Number, + default: 300, + }, + disabled: { + type: Boolean, + default: false + }, + autoFocus: { + type: Boolean, + default: false + }, + isKeyupSearch: { + type: Boolean, + default: false + }, + iconPosition: { + type: String as PropType, + default: 'right', + }, + noBorder: { + type: Boolean, + default: false + }, + cssClass: { + type: String, + default: '' + } +} + +export type SearchProps = ExtractPropTypes -- Gitee From e4a70514101aa5f169286d892f1e7952267e0ac1 Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:26:22 +0800 Subject: [PATCH 13/14] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/search.type.ts | 57 ------------------------------------- 1 file changed, 57 deletions(-) delete mode 100644 devui/search/search.type.ts diff --git a/devui/search/search.type.ts b/devui/search/search.type.ts deleted file mode 100644 index d3d6b175..00000000 --- a/devui/search/search.type.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { EventEmitter } from '@angular/core'; -export interface SearchProps { - /** - * 搜索框尺寸 - * @default '' - */ - readonly size?: 'lg' | 'sm' - /** - * 输入框placeholder - * @default '' - */ - placeholder?: string - /** - * 输入框的max-length - * @default Number.MAX_SAFE_INTEGER - */ - maxLength?: number - /** - * debounceTime 的延迟 - * @default 300 - */ - delay?: number - /** - * 输入框是否可用 - * @default false - */ - disabled?: boolean - /** - * 输入框是否自动对焦 - * @default false - */ - autoFocus?: boolean - /** - * 是否支持输入值立即出发 searchFn - * @default false - */ - isKeyupSearch?: boolean - /** - * 搜索图标位置 - * @default '' - */ - iconPosition?: 'right' | 'left' - /** - * 是否显示边框 - * @default false - */ - noBorder?: boolean - /** - * 支持传入类名到输入框上 - * @default '' - */ - cssClass?: string - /** - * 回车或点击搜索按钮触发的回调函数，返回文本框输入的值 - */ - searchFn?: EventEmitter -} -- Gitee From eca336ad79678ca33b39d3acdea017e9ac2b808d Mon Sep 17 00:00:00 2001 From: lwl <1181102955@qq.com> Date: Sat, 7 Aug 2021 16:38:06 +0800 Subject: [PATCH 14/14] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9$event.target?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=96=B9=E5=BC=8F=EF=BC=8C=E5=8E=BB=E9=99=A4?= =?UTF-8?q?=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84as?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/search/search.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/devui/search/search.tsx b/devui/search/search.tsx index d9fbed2a..fca145f6 100644 --- a/devui/search/search.tsx +++ b/devui/search/search.tsx @@ -24,8 +24,8 @@ export default defineComponent({ }; const handleEnter = ($event: KeyboardEvent) => { if ($event.target instanceof HTMLInputElement) { - console.log(($event.target as HTMLInputElement).value) - const value = ($event.target as HTMLInputElement).value + console.log($event.target.value) + const value = $event.target.value if (value.length > 0) { ctx.emit('searchFn', value) } -- Gitee