From ebf8fb5acadf8aefbb4d8b7cc57f2e34315d5bd0 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Thu, 26 Jan 2023 01:22:09 +0800
Subject: [PATCH] feat(comp:select): add loading prop
---
packages/components/select/demo/Loading.md | 13 +++++++
packages/components/select/demo/Loading.vue | 35 +++++++++++++++++++
packages/components/select/src/Select.tsx | 8 ++++-
.../select/src/composables/usePanelProps.ts | 2 +-
.../components/select/src/panel/Panel.tsx | 9 +++--
packages/components/select/src/types.ts | 2 ++
packages/components/select/style/index.less | 7 ++++
.../select/style/themes/default.variable.less | 2 ++
8 files changed, 74 insertions(+), 4 deletions(-)
create mode 100644 packages/components/select/demo/Loading.md
create mode 100644 packages/components/select/demo/Loading.vue
diff --git a/packages/components/select/demo/Loading.md b/packages/components/select/demo/Loading.md
new file mode 100644
index 000000000..1dd823e04
--- /dev/null
+++ b/packages/components/select/demo/Loading.md
@@ -0,0 +1,13 @@
+---
+title:
+ zh: 加载中
+ en: Loading
+order: 51
+---
+## zh
+
+数据还未加载完成时,展示一个加载中的状态。
+
+## en
+
+When the data has not been loaded yet, display a loading status。
diff --git a/packages/components/select/demo/Loading.vue b/packages/components/select/demo/Loading.vue
new file mode 100644
index 000000000..9a63f9568
--- /dev/null
+++ b/packages/components/select/demo/Loading.vue
@@ -0,0 +1,35 @@
+
+
+
+ Load Data
+
+
+
diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
index 42b47e9ff..2a48554b5 100644
--- a/packages/components/select/src/Select.tsx
+++ b/packages/components/select/src/Select.tsx
@@ -107,7 +107,13 @@ export default defineComponent({
}
}
- const handleBlur = () => accessor.markAsBlurred()
+ const handleBlur = () => {
+ if (props.allowInput && inputValue.value) {
+ changeSelected(inputValue.value)
+ clearInput()
+ }
+ accessor.markAsBlurred()
+ }
const handleItemRemove = (value: VKey) => {
focus()
handleRemove(value)
diff --git a/packages/components/select/src/composables/usePanelProps.ts b/packages/components/select/src/composables/usePanelProps.ts
index 3c64c7670..c9c0ed92e 100644
--- a/packages/components/select/src/composables/usePanelProps.ts
+++ b/packages/components/select/src/composables/usePanelProps.ts
@@ -29,7 +29,7 @@ export function usePanelProps(
multiple: props.multiple,
multipleLimit: props.multipleLimit,
virtual: props.virtual,
-
+ loading: props.loading,
'onUpdate:activeValue': setActiveValue,
onOptionClick,
onScroll: props.onScroll,
diff --git a/packages/components/select/src/panel/Panel.tsx b/packages/components/select/src/panel/Panel.tsx
index c8028cdea..2e0b6ce7f 100644
--- a/packages/components/select/src/panel/Panel.tsx
+++ b/packages/components/select/src/panel/Panel.tsx
@@ -18,6 +18,7 @@ import {
import { callEmit } from '@idux/cdk/utils'
import { ɵEmpty } from '@idux/components/_private/empty'
import { type SelectConfig, useGlobalConfig } from '@idux/components/config'
+import { IxSpin } from '@idux/components/spin'
import ListBox from './ListBox'
import Option from './Option'
@@ -79,7 +80,7 @@ export default defineComponent({
}
return () => {
- const { _virtualScrollHeight, _virtualScrollItemHeight, virtual, onScroll, onScrolledBottom } = props
+ const { _virtualScrollHeight, _virtualScrollItemHeight, virtual, onScroll, onScrolledBottom, loading } = props
const options = flattenedOptions.value
const children = []
@@ -107,7 +108,11 @@ export default defineComponent({
children.push(<ɵEmpty v-slots={slots} empty={props.empty} />)
}
- return
{children}
+ return (
+
+ {children}
+
+ )
}
},
})
diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
index 8268e8086..8bfdc4bec 100644
--- a/packages/components/select/src/types.ts
+++ b/packages/components/select/src/types.ts
@@ -28,6 +28,7 @@ export const selectPanelProps = {
multiple: { type: Boolean, default: false },
multipleLimit: { type: Number, default: Number.MAX_SAFE_INTEGER },
virtual: { type: Boolean, default: false },
+ loading: { type: Boolean, default: false },
// events
'onUpdate:activeValue': [Function, Array] as PropType void>>,
@@ -80,6 +81,7 @@ export const selectProps = {
status: String as PropType,
suffix: { type: String, default: undefined },
virtual: { type: Boolean, default: false },
+ loading: { type: Boolean, default: false },
// events
'onUpdate:value': [Function, Array] as PropType void>>,
diff --git a/packages/components/select/style/index.less b/packages/components/select/style/index.less
index 8c76026ca..294d6d092 100644
--- a/packages/components/select/style/index.less
+++ b/packages/components/select/style/index.less
@@ -33,6 +33,13 @@
}
}
+ &-loading {
+ height: @select-loading-height;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
&-option-group {
.reset-component();
.select-option(@select-option-font-size - 2px, @select-option-group-color);
diff --git a/packages/components/select/style/themes/default.variable.less b/packages/components/select/style/themes/default.variable.less
index 3dd5726f1..873996a03 100644
--- a/packages/components/select/style/themes/default.variable.less
+++ b/packages/components/select/style/themes/default.variable.less
@@ -51,6 +51,8 @@
@select-overlay-search-wrapper-padding: 4px 12px 8px;
+@select-loading-height: @height-3xl;
+
@select-icon-font-size: @font-size-lg;
@select-icon-margin-right: @spacing-xs;
@select-icon-color: @select-placeholder-color;