pukaad-ui-lib 1.282.0 → 1.282.2

package/dist/runtime/components/tab_old.vue

@@ -1,104 +1,104 @@
 <template>
-  <div v-if="!props.disabledHeader">
-    <div class="relative">
-      <button
-        v-if="!isTabScrollLeft"
+  <div v-if="!props.disabledHeader">
+    <div class="relative">
+      <button
+        v-if="!isTabScrollLeft"
         :class="[
   'absolute flex items-center justify-start left-0 top-1/2 transform -translate-y-1/2',
   'bg-gradient-to-r from-white via-white to-transparent w-12 cursor-pointer',
   buttonSize
-]"
-        @click="onScrollLeft"
-      >
-        <Icon name="mdi:chevron-left" size="24" />
-      </button>
-
-      <div
-        ref="tabHeaderRef"
-        class="flex overflow-x-hidden"
+]"
+        @click="onScrollLeft"
+      >
+        <Icon name="mdi:chevron-left" size="24" />
+      </button>
+
+      <div
+        ref="tabHeaderRef"
+        class="flex overflow-x-hidden"
         :style="{
   columnGap: `${props.tabButtonGap}px`
-}"
-      >
-        <div v-for="(tab, i) in items" :key="i" @click="activeTab = tab.value">
-          <slot
-            :name="`tab-${tab.value}-label`"
-            :active="activeTab == tab.value"
-            :disabled="tab.disabled"
-          >
-            <button
+}"
+      >
+        <div v-for="(tab, i) in items" :key="i" @click="activeTab = tab.value">
+          <slot
+            :name="`tab-${tab.value}-label`"
+            :active="activeTab == tab.value"
+            :disabled="tab.disabled"
+          >
+            <button
               :class="[
   'flex items-center justify-center font-body-large p-[16px] gap-[8px] text-nowrap',
   'cursor-pointer disabled:cursor-not-allowed',
   tab.disabled ? 'text-cloud' : 'text-gray',
   color(tab.value),
   buttonSize
-]"
-              :disabled="tab.disabled"
-            >
-              <slot :name="`tab-${tab.value}-label-text`">
-                <slot
+]"
+              :disabled="tab.disabled"
+            >
+              <slot :name="`tab-${tab.value}-label-text`">
+                <slot
                   v-if="
   $slots[`tab-${tab.value}-label-text-prepend-icon`] || props.tabButtonPrependIcon
-"
-                  :name="`tab-${tab.value}-label-text-prepend-icon`"
-                >
-                  <Icon :name="props.tabButtonPrependIcon" />
-                </slot>
-                <slot :name="`tab-${tab.value}-label-text-word`">
-                  {{ tab.label }}
-                </slot>
-                <slot
+"
+                  :name="`tab-${tab.value}-label-text-prepend-icon`"
+                >
+                  <Icon :name="props.tabButtonPrependIcon" />
+                </slot>
+                <slot :name="`tab-${tab.value}-label-text-word`">
+                  {{ tab.label }}
+                </slot>
+                <slot
                   v-if="
   $slots[`tab-${tab.value}-label-text-append-icon`] || props.tabButtonAppendIcon
-"
-                  :name="`tab-${tab.value}-label-text-append-icon`"
-                >
-                  <Icon :name="props.tabButtonAppendIcon" />
-                </slot>
-              </slot>
-            </button>
-          </slot>
-        </div>
-      </div>
-
-      <button
-        v-if="!isTabScrollRight"
+"
+                  :name="`tab-${tab.value}-label-text-append-icon`"
+                >
+                  <Icon :name="props.tabButtonAppendIcon" />
+                </slot>
+              </slot>
+            </button>
+          </slot>
+        </div>
+      </div>
+
+      <button
+        v-if="!isTabScrollRight"
         :class="[
   'absolute flex items-center justify-end right-0 top-1/2 transform -translate-y-1/2',
   'bg-gradient-to-l from-white via-white to-transparent w-12 cursor-pointer',
   buttonSize
-]"
-        @click="onScrollRight"
-      >
-        <Icon name="mdi:chevron-right" size="24" />
-      </button>
-    </div>
-
-    <Divider
-      v-if="!props.disabledHeaderDivider && props.variant == 'text'"
-      class="mt-[-2px]"
-    />
-  </div>
-
-  <div
-    v-if="!props.disabledContent"
-    v-for="(content, i_content) in items"
-    :key="i_content"
-    v-show="activeTab == content.value"
+]"
+        @click="onScrollRight"
+      >
+        <Icon name="mdi:chevron-right" size="24" />
+      </button>
+    </div>
+
+    <Divider
+      v-if="!props.disabledHeaderDivider && props.variant == 'text'"
+      class="mt-[-2px]"
+    />
+  </div>
+
+  <div
+    v-if="!props.disabledContent"
+    v-for="(content, i_content) in items"
+    :key="i_content"
+    v-show="activeTab == content.value"
     :style="{
   marginTop: !props.disabledHeader ? `${props.tabContentGab}px` : '0px'
-}"
-  >
-    <slot
-      :name="`tab-content-${content.value}`"
-      :active="activeTab == content.value"
-    >
-      <div class="font-body-medium">
-        {{ content.content }}
-      </div>
-    </slot>
-  </div>
+}"
+  >
+    <slot
+      :name="`tab-content-${content.value}`"
+      :active="activeTab == content.value"
+    >
+      <div class="font-body-medium">
+        {{ content.content }}
+      </div>
+    </slot>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/table.vue

@@ -1,88 +1,88 @@
 <template>
-  <div class="bg-white rounded-[8px] h-full">
-    <div class="overflow-auto">
-      <table class="w-full">
-        <thead v-if="!props.disabledHeader">
-          <slot name="header" :item="props.itemHeader">
-            <tr>
-              <template v-for="(header, i) in itemHeaders" :key="i">
-                <th class="sticky top-0 bg-white">
-                  <div
-                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
+  <div class="bg-white rounded-[8px] h-full">
+    <div class="overflow-auto">
+      <table class="w-full">
+        <thead v-if="!props.disabledHeader">
+          <slot name="header" :item="props.itemHeader">
+            <tr>
+              <template v-for="(header, i) in itemHeaders" :key="i">
+                <th class="sticky top-0 bg-white">
+                  <div
+                    class="p-[14px] flex gap-[8px] text-gray font-label-sans-serif-large"
                     :style="{
   justifyContent: header.alignment || props.headerAlignment
-}"
-                  >
-                    <div class="flex">
-                      {{ header.label }}
-                    </div>
-                    <div
+}"
+                  >
+                    <div class="flex">
+                      {{ header.label }}
+                    </div>
+                    <div
                       :class="[
   'flex justify-center items-center cursor-pointer',
   sortkey === header.key && 'text-primary'
-]"
-                      @click="onSortBy(header.key)"
-                    >
-                      <Icon name="fa6-solid:sort" size="16" />
-                    </div>
-                  </div>
-                </th>
-              </template>
-            </tr>
-          </slot>
-        </thead>
-
-        <slot name="body" :items="items" :header="itemHeaders">
-          <tbody>
-            <tr
-              v-for="(body, i_body) in items"
-              :key="i_body"
-              @click="emit('click-row', body, i_body)"
-            >
-              <slot
-                name="item"
-                :item="body"
-                :header="itemHeaders"
-                :index="i_body"
-              >
-                <td
-                  v-for="(header, i_header) in itemHeaders"
-                  :key="i_header"
-                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
-                >
-                  <slot :name="`item-${header.key}`" :item="body">
-                    <div>
-                      {{ body[header.key] }}
-                    </div>
-                  </slot>
-                </td>
-              </slot>
-            </tr>
-          </tbody>
-        </slot>
-      </table>
-    </div>
-
-    <div
-      v-if="items.length === 0"
-      class="w-full h-full flex justify-center items-center p-[16px]"
-    >
-      <Icon name="pukaad:page-not-found" size="150"></Icon>
-    </div>
-
-    <div
-      v-if="items.length > 0"
-      class="p-[14px] flex justify-center items-center"
-    >
-      <Pagination
-        :totalPage="props.totalPage"
-        :totalVisible="props.paginationVisible"
-        @change="(e) => emit('change-page', e)"
-        @select="(e) => emit('select-page', e)"
-        v-model="page"
-      />
-    </div>
-  </div>
+]"
+                      @click="onSortBy(header.key)"
+                    >
+                      <Icon name="fa6-solid:sort" size="16" />
+                    </div>
+                  </div>
+                </th>
+              </template>
+            </tr>
+          </slot>
+        </thead>
+
+        <slot name="body" :items="items" :header="itemHeaders">
+          <tbody>
+            <tr
+              v-for="(body, i_body) in items"
+              :key="i_body"
+              @click="emit('click-row', body, i_body)"
+            >
+              <slot
+                name="item"
+                :item="body"
+                :header="itemHeaders"
+                :index="i_body"
+              >
+                <td
+                  v-for="(header, i_header) in itemHeaders"
+                  :key="i_header"
+                  class="font-body-medium border-y-[1px] border-mercury p-[14px]"
+                >
+                  <slot :name="`item-${header.key}`" :item="body">
+                    <div>
+                      {{ body[header.key] }}
+                    </div>
+                  </slot>
+                </td>
+              </slot>
+            </tr>
+          </tbody>
+        </slot>
+      </table>
+    </div>
+
+    <div
+      v-if="items.length === 0"
+      class="w-full h-full flex justify-center items-center p-[16px]"
+    >
+      <Icon name="pukaad:page-not-found" size="150"></Icon>
+    </div>
+
+    <div
+      v-if="items.length > 0"
+      class="p-[14px] flex justify-center items-center"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        :totalVisible="props.paginationVisible"
+        @change="(e) => emit('change-page', e)"
+        @select="(e) => emit('select-page', e)"
+        v-model="page"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/tooltip.vue

@@ -1,16 +1,16 @@
 <template>
-  <ShadTooltipProvider :delay-duration="props.delay">
-    <ShadTooltip>
-      <ShadTooltipTrigger as-child>
-        <slot />
-      </ShadTooltipTrigger>
-      <ShadTooltipContent :side="props.position" :class="props.class">
-        <slot name="text">
-          <p>{{ props.text }}</p>
-        </slot>
-      </ShadTooltipContent>
-    </ShadTooltip>
-  </ShadTooltipProvider>
+  <ShadTooltipProvider :delay-duration="props.delay">
+    <ShadTooltip>
+      <ShadTooltipTrigger as-child>
+        <slot />
+      </ShadTooltipTrigger>
+      <ShadTooltipContent :side="props.position" :class="props.class">
+        <slot name="text">
+          <p>{{ props.text }}</p>
+        </slot>
+      </ShadTooltipContent>
+    </ShadTooltip>
+  </ShadTooltipProvider>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/accordion/Accordion.vue

@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AccordionRoot>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
 </template>

package/dist/runtime/components/ui/accordion/AccordionContent.vue

@@ -12,13 +12,13 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AccordionContent
-    data-slot="accordion-content"
-    v-bind="delegatedProps"
-    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-  >
-    <div :class="cn('pt-0 pb-4', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
 </template>

package/dist/runtime/components/ui/accordion/AccordionItem.vue

@@ -15,12 +15,12 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <AccordionItem
-    v-slot="slotProps"
-    data-slot="accordion-item"
-    v-bind="forwardedProps"
-    :class="cn('border-b ', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </AccordionItem>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b ', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
 </template>

package/dist/runtime/components/ui/accordion/AccordionTrigger.vue

@@ -11,25 +11,25 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      data-slot="accordion-trigger"
-      v-bind="delegatedProps"
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
       :class="
   cn(
     'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
     props.class
   )
-"
-    >
-      <slot />
-      <slot name="icon">
-        <Icon
-          name="lucide:chevron-down"
-          class="text-gray pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
-          :size="24"
-        />
-      </slot>
-    </AccordionTrigger>
-  </AccordionHeader>
+"
+    >
+      <slot />
+      <slot name="icon">
+        <Icon
+          name="lucide:chevron-down"
+          class="text-gray pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
+          :size="24"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
 </template>

package/dist/runtime/components/ui/alert/Alert.vue

@@ -8,11 +8,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert/AlertDescription.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert/AlertTitle.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="alert-title"
-    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialog.vue

@@ -9,7 +9,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AlertDialogRoot>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogAction.vue

@@ -12,7 +12,7 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -12,14 +12,14 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogCancel
-    v-bind="delegatedProps"
+  <AlertDialogCancel
+    v-bind="delegatedProps"
     :class="cn(
   buttonVariants({ variant: 'outline' }),
   'mt-2 sm:mt-0',
   props.class
-)"
-  >
-    <slot />
-  </AlertDialogCancel>
+)"
+  >
+    <slot />
+  </AlertDialogCancel>
 </template>

package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.d.vue.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/alert-dialog/AlertDialogContent.vue

@@ -23,22 +23,22 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      data-slot="alert-dialog-overlay"
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
-    />
-    <AlertDialogContent
-      data-slot="alert-dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
       :class="
   cn(
     'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
     props.class
   )
-"
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
+"
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
 </template>