fix(button): fix slots reactivity issue

There are some classes apply the button when slots exist, because of slots are not reactivy we could
not toogle this class when slots toogle with v-if.Fix this issue my moving this classes to template,
because of vue re-render the component when slots toogle we can apply the classes

#33

src/components/Button/LuiButton.vue

@@ -10,6 +10,7 @@ import { useButtonClasses } from './composables'
 import type { PropType } from 'vue'
 import type { ButtonTag } from './button-types'
 import type { Variant, Filter, Rounded, Block, Color, Size } from '@/globals/types'
+import type { TwClassInterface } from '@/globals/interfaces'
 
 const props = defineProps({
   tag: {
@@ -40,18 +41,6 @@ const props = defineProps({
     type: Boolean as PropType<Block>,
     default: false
   }
-  // prepend: {
-  //   type: [String, Object] as PropType<Icon>,
-  //   default: "none",
-  // },
-  // append: {
-  //   type: [String, Object] as PropType<Icon>,
-  //   default: "none",
-  // },
-  // icon: {
-  //   type: [String, Object] as PropType<Icon>,
-  //   default: "none",
-  // },
   // loading: {
   //   type: Boolean as PropType<Loading>,
   //   default: false,
@@ -64,55 +53,52 @@ const props = defineProps({
 
 const { buttonClasses, computedIconSize } = useButtonClasses(toRefs(props))
 const slots = useSlots()
-// console.log(slots?.default().props.size = "lg");
+function dynamicSlotClasses() {
+  // We move this classes from composable, because of slots reactivity issue
+  // more details: https://github.com/LUI-UI/lui-vue/issues/33
+  const hasAnyIcon = slots.prepend || slots.append || slots.icon
+  const classes: TwClassInterface = {
+    display: {
+      flex: hasAnyIcon,
+      'inline-block': !hasAnyIcon && props.tag !== 'button'
+    },
+    alignItems: {
+      'items-center': hasAnyIcon
+    },
+    justifyContent: {
+      'justify-center': hasAnyIcon
+    },
+    space:
+      !!slots.prepend || !!slots.append
+        ? {
+            'space-x-1': props.size === 'xs' || props.size === 'sm',
+            'space-x-1.5': props.size === 'md',
+            'space-x-2': props.size === 'lg' || props.size === 'xl'
+          }
+        : ''
+  }
+  return Object.values({ ...classes })
+}
 </script>
 
 <template>
-  <component :is="tag" v-bind="$attrs" :class="buttonClasses" class="lui-button">
-    <!-- <lui-icon
-      v-if="icon !== 'none'"
-      :icon="icon"
-      :class="computedIconSize"
-      class="leading-none"
-    /> -->
+  <component
+    :is="tag"
+    v-bind="$attrs"
+    :class="[buttonClasses, dynamicSlotClasses()]"
+    class="lui-button"
+  >
     <span v-if="!!slots.icon" :class="computedIconSize" class="leading-none flex items-center">
       <slot name="icon" />
     </span>
     <template v-else>
-      <!-- <lui-icon
-        v-if="prepend !== 'none'"
-        :icon="prepend"
-        :class="computedIconSize"
-        class="leading-none"
-      /> -->
       <span v-if="!!slots.prepend" :class="computedIconSize" class="leading-none flex items-center">
         <slot name="prepend" />
       </span>
       <span><slot></slot></span>
       <span v-if="!!slots.append" :class="computedIconSize" class="leading-none flex items-center">
         <slot name="append" />
       </span>
-      <!-- <lui-icon
-        v-if="append !== 'none'"
-        :icon="append"
-        class="leading-none"
-        :class="computedIconSize"
-      /> -->
-      <!-- <lui-icon
-        v-if="prepend !== 'none' || (loading && loaderPosition === 'left')"
-        :icon="loading && loaderPosition === 'left' ? 'loader-4' : prepend"
-        :size="computedIconSize"
-        class="leading-none"
-        :class="loading ? 'animate-spin inline-block' : ''"
-      />
-      <span><slot></slot></span>
-      <lui-icon
-        v-if="append !== 'none' || (loading && loaderPosition === 'right')"
-        :icon="loading && loaderPosition === 'right' ? 'loader-4' : append"
-        :size="computedIconSize"
-        class="leading-none"
-        :class="loading ? 'animate-spin inline-block' : ''"
-      /> -->
     </template>
   </component>
 </template>

src/components/Button/composables/index.ts

@@ -19,7 +19,7 @@ type PropTypes = {
 export function useButtonClasses(props: PropTypes) {
   const slots = useSlots()
   const hasIcon = computed(() => !!slots.icon)
-  const hasAnyIcon = computed(() => !!slots.icon || !!slots.prepend || !!slots.append)
+  // const hasAnyIcon = computed(() => !!slots.icon || !!slots.prepend || !!slots.append)
 
   const computedButtonClasses = computed(() => {
     const buttonClasses: TwClassInterface = {
@@ -117,27 +117,7 @@ export function useButtonClasses(props: PropTypes) {
       borderRadius: {
         'rounded-lg': props.rounded.value === true,
         'rounded-full': props.rounded.value === 'full'
-      },
-      // display: "inline-block",
-      display: {
-        flex: hasAnyIcon.value,
-        'inline-block': !hasAnyIcon.value && props.tag.value !== 'button'
-      },
-      alignItems: {
-        'items-center': hasAnyIcon.value
-      },
-      justifyContent: {
-        'justify-center': hasAnyIcon.value
-      },
-      // 4 4 6 8 8
-      space:
-        !!slots.prepend || !!slots.append
-          ? {
-              'space-x-1': props.size.value === 'xs' || props.size.value === 'sm',
-              'space-x-1.5': props.size.value === 'md',
-              'space-x-2': props.size.value === 'lg' || props.size.value === 'xl'
-            }
-          : ''
+      }
     }
     return Object.values({ ...buttonClasses })
   })