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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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
     }
   }
 })