From e05619f8c8da4e1b20de4363ee6ac5207a02aca0 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 31 May 2023 23:53:31 +0200
Subject: [PATCH] chore: add `leading` and `trailing` slots

Resolves #246
---
 src/runtime/components/elements/Button.vue  | 10 ++++++--
 src/runtime/components/forms/Input.vue      | 26 ++++++++++++++-------
 src/runtime/components/forms/Select.vue     | 24 ++++++++++++-------
 src/runtime/components/forms/SelectMenu.vue | 24 ++++++++++++-------
 4 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/runtime/components/elements/Button.vue b/src/runtime/components/elements/Button.vue
index 5c2191ef..e34b9d2f 100644
--- a/src/runtime/components/elements/Button.vue
+++ b/src/runtime/components/elements/Button.vue
@@ -5,13 +5,19 @@
     :aria-label="ariaLabel"
     v-bind="buttonProps"
   >
-    <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    <slot name="leading" :disabled="disabled" :loading="loading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    </slot>
+
     <slot>
       <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
         {{ label }}
       </span>
     </slot>
-    <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+
+    <slot name="trailing" :disabled="disabled" :loading="loading">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    </slot>
   </component>
 </template>
 
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
index bdcca4c4..ff950348 100644
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -18,11 +18,17 @@
       @blur="$emit('blur', $event)"
     >
     <slot />
-    <div v-if="isLeading && leadingIconName" :class="leadingWrapperIconClass">
-      <UIcon :name="leadingIconName" :class="leadingIconClass" />
+
+    <div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+      <slot name="leading" :disabled="disabled" :loading="loading">
+        <UIcon :name="leadingIconName" :class="leadingIconClass" />
+      </slot>
     </div>
-    <div v-if="isTrailing && trailingIconName" :class="trailingWrapperIconClass">
-      <UIcon :name="trailingIconName" :class="trailingIconClass" />
+
+    <div v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+      <slot name="trailing" :disabled="disabled" :loading="loading">
+        <UIcon :name="trailingIconName" :class="trailingIconClass" />
+      </slot>
     </div>
   </div>
 </template>
@@ -147,7 +153,7 @@ export default defineComponent({
     }
   },
   emits: ['update:modelValue', 'focus', 'blur'],
-  setup (props, { emit }) {
+  setup (props, { emit, slots }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
@@ -181,8 +187,8 @@ export default defineComponent({
         ui.value.size[props.size],
         props.padded && ui.value.padding[props.size],
         variant?.replaceAll('{color}', props.color),
-        isLeading.value && ui.value.leading.padding[props.size],
-        isTrailing.value && ui.value.trailing.padding[props.size],
+        (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size],
         ui.value.custom
       )
     })
@@ -214,7 +220,8 @@ export default defineComponent({
     const leadingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.padding[props.size]
+        ui.value.icon.leading.padding[props.size],
+        slots.leading && '!pointer-events-auto'
       )
     })
 
@@ -230,7 +237,8 @@ export default defineComponent({
     const trailingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.padding[props.size]
+        ui.value.icon.trailing.padding[props.size],
+        slots.trailing && '!pointer-events-auto'
       )
     })
 
diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
index 492ac4e4..c3612472 100644
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -36,12 +36,16 @@
       </template>
     </select>
 
-    <div v-if="isLeading && leadingIconName" :class="leadingWrapperIconClass">
-      <UIcon :name="leadingIconName" :class="leadingIconClass" />
+    <div v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+      <slot name="leading" :disabled="disabled" :loading="loading">
+        <UIcon :name="leadingIconName" :class="leadingIconClass" />
+      </slot>
     </div>
 
-    <span v-if="isTrailing && trailingIconName" :class="trailingWrapperIconClass">
-      <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+      <slot name="trailing" :disabled="disabled" :loading="loading">
+        <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+      </slot>
     </span>
   </div>
 </template>
@@ -159,7 +163,7 @@ export default defineComponent({
     }
   },
   emits: ['update:modelValue', 'focus', 'blur'],
-  setup (props, { emit }) {
+  setup (props, { emit, slots }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
@@ -230,8 +234,8 @@ export default defineComponent({
         ui.value.size[props.size],
         props.padded && ui.value.padding[props.size],
         variant?.replaceAll('{color}', props.color),
-        isLeading.value && ui.value.leading.padding[props.size],
-        isTrailing.value && ui.value.trailing.padding[props.size],
+        (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size],
         ui.value.custom
       )
     })
@@ -263,7 +267,8 @@ export default defineComponent({
     const leadingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.leading.wrapper,
-        ui.value.icon.leading.padding[props.size]
+        ui.value.icon.leading.padding[props.size],
+        slots.leading && '!pointer-events-auto'
       )
     })
 
@@ -279,7 +284,8 @@ export default defineComponent({
     const trailingWrapperIconClass = computed(() => {
       return classNames(
         ui.value.icon.trailing.wrapper,
-        ui.value.icon.trailing.padding[props.size]
+        ui.value.icon.trailing.padding[props.size],
+        slots.trailing && '!pointer-events-auto'
       )
     })
 
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index 48d95757..f37ab05f 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -29,8 +29,10 @@
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
         <button :class="selectMenuClass" :disabled="disabled || loading" type="button">
-          <span v-if="isLeading && leadingIconName" :class="leadingWrapperIconClass">
-            <UIcon :name="leadingIconName" :class="leadingIconClass" />
+          <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+            <slot name="leading" :disabled="disabled" :loading="loading">
+              <UIcon :name="leadingIconName" :class="leadingIconClass" />
+            </slot>
           </span>
 
           <slot name="label">
@@ -39,8 +41,10 @@
             <span v-else class="block truncate" :class="ui.placeholder">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
-          <span v-if="isTrailing && trailingIconName" :class="trailingWrapperIconClass">
-            <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+          <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+            <slot name="trailing" :disabled="disabled" :loading="loading">
+              <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+            </slot>
           </span>
         </button>
       </slot>
@@ -269,7 +273,7 @@ export default defineComponent({
     }
   },
   emits: ['update:modelValue', 'open', 'close'],
-  setup (props, { emit }) {
+  setup (props, { emit, slots }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
@@ -294,8 +298,8 @@ export default defineComponent({
         uiSelect.value.gap[props.size],
         props.padded && uiSelect.value.padding[props.size],
         variant?.replaceAll('{color}', props.color),
-        isLeading.value && uiSelect.value.leading.padding[props.size],
-        isTrailing.value && uiSelect.value.trailing.padding[props.size],
+        (isLeading.value || slots.leading) && uiSelect.value.leading.padding[props.size],
+        (isTrailing.value || slots.trailing) && uiSelect.value.trailing.padding[props.size],
         uiSelect.value.custom,
         'inline-flex items-center'
       )
@@ -328,7 +332,8 @@ export default defineComponent({
     const leadingWrapperIconClass = computed(() => {
       return classNames(
         uiSelect.value.icon.leading.wrapper,
-        uiSelect.value.icon.leading.padding[props.size]
+        uiSelect.value.icon.leading.padding[props.size],
+        slots.leading && '!pointer-events-auto'
       )
     })
 
@@ -344,7 +349,8 @@ export default defineComponent({
     const trailingWrapperIconClass = computed(() => {
       return classNames(
         uiSelect.value.icon.trailing.wrapper,
-        uiSelect.value.icon.trailing.padding[props.size]
+        uiSelect.value.icon.trailing.padding[props.size],
+        slots.trailing && '!pointer-events-auto'
       )
     })