feat(Toggle): add loading prop (#1546)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
nuxt · Mar 25, 2024 · e1e05af · e1e05af
1 parent 224ec3c
commit e1e05af
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 6 deletions.
diff --git a/docs/content/2.components/toggle.md b/docs/content/2.components/toggle.md
@@ -52,6 +52,19 @@ excludedProps:
 ---
 ::
 
+### Loading :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `loading` prop to show a loading icon and disable the Toggle.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.toggle.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+props:
+  loading: true
+---
+::
+
 ### Disabled
 
 Use the `disabled` prop to disable the Toggle.

diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
@@ -3,15 +3,26 @@
     :id="inputId"
     v-model="active"
     :name="name"
-    :disabled="disabled"
+    :disabled="disabled || loading"
     :class="switchClass"
     v-bind="attrs"
   >
     <span :class="containerClass">
-      <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+      <span v-if="loading" :class="[ui.icon.active, ui.icon.base]" aria-hidden="true">
+        <UIcon :name="loadingIcon" :class="loadingIconClass" />
+      </span>
+      <span
+        v-if="!loading && onIcon"
+        :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]"
+        aria-hidden="true"
+      >
         <UIcon :name="onIcon" :class="onIconClass" />
       </span>
-      <span v-if="offIcon" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
+      <span
+        v-if="!loading && offIcon"
+        :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]"
+        aria-hidden="true"
+      >
         <UIcon :name="offIcon" :class="offIconClass" />
       </span>
     </span>
@@ -58,6 +69,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
     onIcon: {
       type: String,
       default: () => config.default.onIcon
@@ -66,6 +81,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.offIcon
     },
+    loadingIcon: {
+      type: String,
+      default: () => config.default.loadingIcon
+    },
     color: {
       type: String as PropType<ToggleColor>,
       default: () => config.default.color,
@@ -137,6 +156,13 @@ export default defineComponent({
       )
     })
 
+    const loadingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.size[props.size],
+        color.value && ui.value.icon.loading.replaceAll('{color}', color.value)
+      )
+    })
+
     provideUseId(() => useId())
 
     return {
@@ -150,7 +176,8 @@ export default defineComponent({
       switchClass,
       containerClass,
       onIconClass,
-      offIconClass
+      offIconClass,
+      loadingIconClass
     }
   }
 })

diff --git a/src/runtime/ui.config/forms/toggle.ts b/src/runtime/ui.config/forms/toggle.ts
@@ -49,12 +49,14 @@ export default {
       '2xl': 'h-6 w-6'
     },
     on: 'text-{color}-500 dark:text-{color}-400',
-    off: 'text-gray-400 dark:text-gray-500'
+    off: 'text-gray-400 dark:text-gray-500',
+    loading: 'animate-spin text-{color}-500 dark:text-{color}-400'
   },
   default: {
     onIcon: null,
     offIcon: null,
+    loadingIcon: 'i-heroicons-arrow-path-20-solid',
     color: 'primary',
     size: 'md'
   }
-}
+}