feat: add icons slots (#96)

* feat: add icons slots * fix: message icon * fix: slot names to kebab-case
shuriken-ui · Oct 8, 2023 · eb0ab38 · eb0ab38
1 parent cc8c4c9
commit eb0ab38
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 23 deletions.
diff --git a/components/base/BaseBreadcrumb.vue b/components/base/BaseBreadcrumb.vue
@@ -102,7 +102,9 @@ const items = computed(() => {
             class="nui-item-inner"
             :class="[item.to && 'nui-has-link']"
           >
-            <Icon v-if="item.icon" :name="item.icon" class="nui-item-icon" />
+            <slot name="icon" :icon-name="item.icon">
+              <Icon v-if="item.icon" :name="item.icon" class="nui-item-icon" />
+            </slot>
             <span :class="[item.hideLabel && 'sr-only']">{{ item.label }}</span>
           </NuxtLink>
         </li>

diff --git a/components/base/BaseMessage.vue b/components/base/BaseMessage.vue
@@ -92,7 +92,9 @@ const icon = computed(() =>
     :class="[shape && shapeStyle[shape], typeStyle[props.type]]"
   >
     <div v-if="props.icon" class="nui-message-icon-outer">
-      <Icon v-if="icon" :name="icon" class="nui-message-icon" />
+      <slot name="icon" icon-name="icon">
+        <Icon v-if="icon" :name="icon" class="nui-message-icon" />
+      </slot>
     </div>
     <span class="nui-message-inner-text">
       <slot>{{ props.message }}</slot>

diff --git a/components/base/BasePagination.vue b/components/base/BasePagination.vue
@@ -249,7 +249,9 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
         @keydown.space="(e: any) => (e.target as HTMLAnchorElement).click()"
         @click="(e: any) => handleLinkClick(e, currentPage - 1)"
       >
-        <Icon :name="previousIcon" class="pagination-button-icon" />
+        <slot name="previous-icon">
+          <Icon :name="previousIcon" class="pagination-button-icon" />
+        </slot>
       </NuxtLink>
 
       <!-- Next -->
@@ -260,7 +262,9 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
         @keydown.space="(e: any) => (e.target as HTMLAnchorElement).click()"
         @click="(e: any) => handleLinkClick(e, currentPage + 1)"
       >
-        <Icon :name="nextIcon" class="pagination-button-icon" />
+        <slot name="next-icon">
+          <Icon :name="nextIcon" class="pagination-button-icon" />
+        </slot>
       </NuxtLink>
       <slot name="after-navigation"></slot>
     </BaseFocusLoop>

diff --git a/components/base/BaseSnack.vue b/components/base/BaseSnack.vue
@@ -56,7 +56,9 @@ const colorStyle = {
     ]"
   >
     <div v-if="props.icon && !props.image" class="nui-snack-icon">
-      <Icon :name="props.icon" class="nui-snack-icon-inner" />
+      <slot name="icon">
+        <Icon :name="props.icon" class="nui-snack-icon-inner" />
+      </slot>
     </div>
     <div v-else-if="props.image && !props.icon" class="nui-snack-image">
       <img :src="props.image" class="nui-snack-image-inner" alt="" />

diff --git a/components/base/BaseTabs.vue b/components/base/BaseTabs.vue
@@ -90,7 +90,9 @@ watch(activeValue, (value) => {
         tabindex="0"
         @click="toggle(tab.value)"
       >
-        <Icon v-if="tab.icon" :name="tab.icon" class="me-1 block h-5 w-5" />
+        <slot v-if="tab.icon" name="icon" :icon-name="tab.icon">
+          <Icon :name="tab.icon" class="me-1 block h-5 w-5" />
+        </slot>
         <span
           :class="[
             props.type === 'box' && tab.icon && 'text-[.85rem]',

diff --git a/components/form/BaseAutocomplete.vue b/components/form/BaseAutocomplete.vue
@@ -390,10 +390,12 @@ function removeItem(item: any) {
             <div class="nui-autocomplete-multiple-list-item">
               {{ props.displayValue(item) }}
               <button type="button" @click="removeItem(item)">
-                <Icon
-                  :name="chipClearIcon"
-                  class="nui-autocomplete-multiple-list-item-icon"
-                />
+                <slot name="chip-clear-icon">
+                  <Icon
+                    :name="chipClearIcon"
+                    class="nui-autocomplete-multiple-list-item-icon"
+                  />
+                </slot>
               </button>
             </div>
           </li>
@@ -427,7 +429,9 @@ function removeItem(item: any) {
             </slot>
           </ComboboxLabel>
           <div v-if="iconResolved" class="nui-autocomplete-icon">
-            <Icon :name="iconResolved" class="nui-autocomplete-icon-inner" />
+            <slot name="icon" :icon-name="iconResolved">
+              <Icon :name="iconResolved" class="nui-autocomplete-icon-inner" />
+            </slot>
           </div>
           <button
             v-if="props.clearable && value"
@@ -436,21 +440,25 @@ function removeItem(item: any) {
             :class="[props.classes?.icon, props.dropdown && 'me-6']"
             @click="clear"
           >
-            <Icon
-              :name="props.clearIcon"
-              class="nui-autocomplete-clear-inner"
-            />
+            <slot name="clear-icon">
+              <Icon
+                :name="props.clearIcon"
+                class="nui-autocomplete-clear-inner"
+              />
+            </slot>
           </button>
           <ComboboxButton
             v-if="props.dropdown"
             v-slot="{ open }: { open: boolean }"
             class="nui-autocomplete-clear"
           >
-            <Icon
-              :name="props.dropdownIcon"
-              class="nui-autocomplete-clear-inner transition-transform duration-300"
-              :class="[props.classes?.icon, open && 'rotate-180']"
-            />
+            <slot name="dropdown-icon">
+              <Icon
+                :name="props.dropdownIcon"
+                class="nui-autocomplete-clear-inner transition-transform duration-300"
+                :class="[props.classes?.icon, open && 'rotate-180']"
+              />
+            </slot>
           </ComboboxButton>
 
           <div v-if="props.loading" class="nui-autocomplete-placeload">

diff --git a/components/form/BaseAutocompleteItem.vue b/components/form/BaseAutocompleteItem.vue
@@ -128,7 +128,9 @@ const markedText = useNinjaMark(() => props.value?.text, query, mark)
       class="ms-auto flex items-center justify-center"
       :class="[props.value.media && 'h-8 w-8', props.value.icon && 'h-8 w-8']"
     >
-      <Icon :name="selectedIcon" class="text-success-500 block h-4 w-4" />
+      <slot name="selected-icon">
+        <Icon :name="selectedIcon" class="text-success-500 block h-4 w-4" />
+      </slot>
     </div>
   </div>
 </template>
diff --git a/components/form/BaseListbox.vue b/components/form/BaseListbox.vue
@@ -258,7 +258,9 @@ const value = computed(() => {
                     shape="rounded"
                     class="nui-icon-box"
                   >
-                    <Icon :name="props.icon" class="nui-icon-box-inner" />
+                    <slot name="icon">
+                      <Icon :name="props.icon" class="nui-icon-box-inner" />
+                    </slot>
                   </BaseIconBox>
 
                   <template v-if="Array.isArray(value)">

diff --git a/components/form/BaseTreeSelectItem.vue b/components/form/BaseTreeSelectItem.vue
@@ -100,7 +100,9 @@ const wrapperProps = computed(() => {
         size="xs"
         shape="full"
       >
-        <Icon :name="props.value.icon" class="h-4 w-4" />
+        <slot name="item-icon">
+          <Icon :name="props.value.icon" class="h-4 w-4" />
+        </slot>
       </BaseIconBox>
       <div class="flex flex-col items-start">
         <div