feat(comp:select): add loading prop

IDuxFE · Feb 13, 2023 · ebf8fb5 · ebf8fb5
1 parent caf4dbf
commit ebf8fb5
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 4 deletions.
diff --git a/packages/components/select/demo/Loading.md 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
@@ -0,0 +1,35 @@
+<template>
+  <IxSpace vertical>
+    <IxSelect v-model:value="value" :dataSource="dataSource" :loading="isLoading"></IxSelect>
+    <IxButton @click="onLoad">Load Data</IxButton>
+  </IxSpace>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { SelectData } from '@idux/components/select'
+
+const dataSource = ref<SelectData[]>([{ label: 'Tom', value: 'tom' }])
+
+const value = ref('tom')
+const isLoading = ref(false)
+
+const onLoad = () => {
+  dataSource.value = [{ label: 'Tom', value: 'tom' }]
+  value.value = 'tom'
+
+  if (isLoading.value) {
+    return
+  }
+  isLoading.value = true
+
+  setTimeout(() => {
+    isLoading.value = false
+    dataSource.value = [
+      { label: 'Tom', value: 'tom' },
+      { label: 'Jack', value: 'jack' },
+      { label: 'Lucy', value: 'lucy' },
+    ]
+  }, 3000)
+}
+</script>
diff --git 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
@@ -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
@@ -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 = [<ListBox />]
 
@@ -107,7 +108,11 @@ export default defineComponent({
         children.push(<ɵEmpty v-slots={slots} empty={props.empty} />)
       }
 
-      return <div onMousedown={handlePanelMouseDown}>{children}</div>
+      return (
+        <div onMousedown={handlePanelMouseDown}>
+          <IxSpin spinning={loading}>{children}</IxSpin>
+        </div>
+      )
     }
   },
 })

diff --git 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<MaybeArray<(value: any) => void>>,
@@ -80,6 +81,7 @@ export const selectProps = {
   status: String as PropType<ValidateStatus>,
   suffix: { type: String, default: undefined },
   virtual: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
 
   // events
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<(value: any) => void>>,

diff --git 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
@@ -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;