feat: loading select

CyanSalt · Jul 19, 2023 · ed3999f · ed3999f
1 parent 0b6bd60
commit ed3999f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -66,6 +66,35 @@ import { RCheckbox, RSelect } from 'roughness'
   <RCheckbox value="Left Leg" label="Left Leg" />
 </RSelect>
 
+### State
+
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RCheckbox, RSelect } from 'roughness'
+</script>
+
+<template>
+  <RSpace>
+    <RSelect :model-value="['basic']" multiple disabled>
+      <RCheckbox value="basic" label="Basic User Info" />
+    </RSelect>
+    <RSelect loading placeholder="Arsenal" />
+  </RSpace>
+</template>
+```
+
+</RDetails>
+
+<RSpace>
+  <RSelect :model-value="['basic']" multiple disabled>
+    <RCheckbox value="basic" label="Basic User Info" />
+  </RSelect>
+  <RSelect loading placeholder="Arsenal" />
+</RSpace>
+
 ### Tree
 
 See [Checkbox Tree](/components/checkbox#tree).
@@ -77,7 +106,7 @@ See [Checkbox Tree](/components/checkbox#tree).
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['graphics-options', 'model-value', 'multiple', 'reactions']"
+  :rows="['graphics-options', 'loading', 'model-value', 'multiple', 'reactions']"
 >
   <template #body:*:name="{ row }">{{ row }}</template>
 
@@ -94,6 +123,20 @@ See [Checkbox Tree](/components/checkbox#tree).
 
   </template>
 
+  <template #body:loading:type>
+
+  `boolean`
+
+  </template>
+  <template #body:loading:default>
+
+  `false`
+
+  </template>
+  <template #body:loading:description>
+    Whether the select is loading. It will be non-interactive in loading state.
+  </template>
+
   <template #body:model-value:type>
 
   `string | number | undefined` or `(string | number)[]`

diff --git a/src/select/index.vue b/src/select/index.vue
@@ -18,18 +18,18 @@ defineOptions({
 
 const {
   disabled = false,
+  loading = false,
   modelValue,
   multiple = false,
   placeholder,
-  readonly = false,
   reactions = (() => ['focus']) as never,
   graphicsOptions,
 } = defineProps<{
   disabled?: boolean,
+  loading?: boolean,
   modelValue?: CheckboxValue[] | CheckboxValue | undefined,
   multiple?: boolean,
   placeholder?: string,
-  readonly?: boolean,
 } & GraphicsProps>()
 
 const emit = defineEmits<{
@@ -73,7 +73,7 @@ let input = $ref<HTMLInputElement>()
 let state = $ref(false)
 
 function toggle() {
-  if (readonly || disabled) return
+  if (disabled || loading) return
   state = !state
 }
 
@@ -127,7 +127,7 @@ provide(labelsInjection, labels)
 </script>
 
 <template>
-  <label v-on-click-outside.bubble="close" :class="['r-select', { 'is-readonly': readonly }]">
+  <label v-on-click-outside.bubble="close" :class="['r-select', { 'is-loading': loading }]">
     <RGraphics :options="graphicsOptions" @draw="draw" />
     <input
       ref="input"
@@ -141,7 +141,7 @@ provide(labelsInjection, labels)
       @keydown.escape="close"
     >
     <RIcon
-      name="chevron-down"
+      :name="loading ? 'loader' : 'chevron-down'"
       :graphics-options="graphicsOptions"
       class="r-select__icon"
     />
@@ -201,7 +201,7 @@ provide(labelsInjection, labels)
     cursor: not-allowed;
     text-decoration-line: line-through;
   }
-  .r-select:not(.is-readonly) > & {
+  .r-select:not(.is-loading) > & {
     cursor: pointer;
   }
   &::placeholder {