pukaad-ui-lib 1.2.0 → 1.3.2

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

@@ -11,11 +11,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AlertDialogTitle
-    data-slot="alert-dialog-title"
-    v-bind="delegatedProps"
-    :class="cn('font-body-large-prominent', props.class)"
-  >
-    <slot />
-  </AlertDialogTitle>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('font-body-large-prominent', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
 </template>

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

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
 </template>

package/dist/runtime/components/ui/avatar/Avatar.vue

@@ -7,10 +7,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <AvatarRoot
-    data-slot="avatar"
-    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
-  >
-    <slot />
-  </AvatarRoot>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
 </template>

package/dist/runtime/components/ui/avatar/AvatarFallback.vue

@@ -12,16 +12,16 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AvatarFallback
-    data-slot="avatar-fallback"
-    v-bind="delegatedProps"
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
     :class="
   cn(
     'bg-muted flex size-full items-center justify-center rounded-full',
     props.class
   )
-"
-  >
-    <slot />
-  </AvatarFallback>
+"
+  >
+    <slot />
+  </AvatarFallback>
 </template>

package/dist/runtime/components/ui/avatar/AvatarImage.vue

@@ -10,11 +10,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <AvatarImage
-    data-slot="avatar-image"
-    v-bind="props"
-    class="aspect-square size-full"
-  >
-    <slot />
-  </AvatarImage>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
 </template>

package/dist/runtime/components/ui/button/Button.vue

@@ -13,12 +13,12 @@ const props = defineProps({
 </script>
 
 <template>
-  <Primitive
-    data-slot="button"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, color, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, color, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/ui/card/Card.vue

@@ -1,17 +1,17 @@
 <template>
-  <Form v-slot="{ meta }" @submit="onSubmit">
-    <div
-      data-slot="card"
+  <Form v-slot="{ meta }" @submit="onSubmit">
+    <div
+      data-slot="card"
       :class="
   cn(
     'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-4',
     props.class
   )
-"
-    >
-      <slot name="default" :meta="meta" />
-    </div>
-  </Form>
+"
+    >
+      <slot name="default" :meta="meta" />
+    </div>
+  </Form>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/card/CardAction.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="card-action"
+  <div
+    data-slot="card-action"
     :class="
   cn(
     'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/card/CardContent.vue

@@ -1,10 +1,10 @@
 <template>
-  <div
-    data-slot="card-content"
-    :class="cn('px-4 font-body-large', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="card-content"
+    :class="cn('px-4 font-body-large', props.class)"
+  >
+    <slot />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/card/CardDescription.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <p
-    data-slot="card-description"
-    :class="cn('text-muted-foreground font-body-large', props.class)"
-  >
-    <slot />
-  </p>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground font-body-large', props.class)"
+  >
+    <slot />
+  </p>
 </template>

package/dist/runtime/components/ui/card/CardFooter.vue

@@ -6,12 +6,12 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="card-footer"
+  <div
+    data-slot="card-footer"
     :class="
   cn('flex items-center px-4 [.border-t]:pt-6 font-body-large', props.class)
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/card/CardHeader.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="card-header"
+  <div
+    data-slot="card-header"
     :class="
   cn(
     '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/card/CardTitle.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <h3
-    data-slot="card-title"
-    :class="cn('leading-none font-title-medium-prominent', props.class)"
-  >
-    <slot />
-  </h3>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-title-medium-prominent', props.class)"
+  >
+    <slot />
+  </h3>
 </template>

package/dist/runtime/components/ui/checkbox/Checkbox.vue

@@ -20,23 +20,23 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <CheckboxRoot
-    data-slot="checkbox"
-    v-bind="forwarded"
+  <CheckboxRoot
+    data-slot="checkbox"
+    v-bind="forwarded"
     :class="
   cn(
     'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
     props.class
   )
-"
-  >
-    <CheckboxIndicator
-      data-slot="checkbox-indicator"
-      class="grid place-content-center text-current transition-none"
-    >
-      <slot>
-        <Icon name="lucide:check" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
+"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot>
+        <Icon name="lucide:check" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
 </template>

package/dist/runtime/components/ui/command/Command.vue

@@ -71,11 +71,11 @@ provideCommandContext({
 </script>
 
 <template>
-  <ListboxRoot
-    data-slot="command"
-    v-bind="forwarded"
-    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
-  >
-    <slot />
-  </ListboxRoot>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
 </template>

package/dist/runtime/components/ui/command/CommandDialog.d.vue.ts

@@ -3,7 +3,7 @@ type __VLS_Props = DialogRootProps & {
     title?: string;
     description?: string;
 };
-declare var __VLS_31: any;
+declare var __VLS_31: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_31) => any;
 };

package/dist/runtime/components/ui/command/CommandDialog.vue

@@ -14,15 +14,15 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <Dialog v-slot="slotProps" v-bind="forwarded">
-    <DialogContent class="overflow-hidden p-0 ">
-      <DialogHeader class="sr-only">
-        <DialogTitle>{{ title }}</DialogTitle>
-        <DialogDescription>{{ description }}</DialogDescription>
-      </DialogHeader>
-      <Command>
-        <slot v-bind="slotProps" />
-      </Command>
-    </DialogContent>
-  </Dialog>
+  <Dialog v-slot="slotProps" v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot v-bind="slotProps" />
+      </Command>
+    </DialogContent>
+  </Dialog>
 </template>

package/dist/runtime/components/ui/command/CommandDialog.vue.d.ts

@@ -3,7 +3,7 @@ type __VLS_Props = DialogRootProps & {
     title?: string;
     description?: string;
 };
-declare var __VLS_31: any;
+declare var __VLS_31: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_31) => any;
 };

package/dist/runtime/components/ui/command/CommandEmpty.vue

@@ -17,19 +17,19 @@ const isRender = computed(
 </script>
 
 <template>
-  <Primitive
-    v-if="isRender"
-    data-slot="command-empty"
-    v-bind="delegatedProps"
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps"
     :class="
   cn(
     'flex flex-col h-[192px] items-center justify-center gap-[8px] ',
     props.class
   )
-"
-  >
-    <slot />
-    <Icon name="pukaad:page-not-found" class="h-[64px] w-[74px]" />
-    <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
-  </Primitive>
+"
+  >
+    <slot />
+    <Icon name="pukaad:page-not-found" class="h-[64px] w-[74px]" />
+    <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
+  </Primitive>
 </template>

package/dist/runtime/components/ui/command/CommandGroup.vue

@@ -25,16 +25,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ListboxGroup
-    v-bind="delegatedProps"
-    :id="id"
-    data-slot="command-group"
-    :class="cn('text-foreground overflow-hidden p-1', props.class)"
-    :hidden="isRender ? void 0 : true"
-  >
-    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-      {{ heading }}
-    </ListboxGroupLabel>
-    <slot />
-  </ListboxGroup>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? void 0 : true"
+  >
+    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
 </template>

package/dist/runtime/components/ui/command/CommandInput.vue

@@ -20,22 +20,22 @@ const { filterState } = useCommand();
 </script>
 
 <template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex h-9 items-center gap-2 border-b px-3"
-  >
-    <Icon name="lucide:search" class="h-4 w-4" />
-    <ListboxFilter
-      v-bind="{ ...forwardedProps, ...$attrs }"
-      v-model="filterState.search"
-      data-slot="command-input"
-      auto-focus
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <Icon name="lucide:search" class="h-4 w-4" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
       :class="
   cn(
     'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
     props.class
   )
-"
-    />
-  </div>
+"
+    />
+  </div>
 </template>

package/dist/runtime/components/ui/command/CommandItem.vue

@@ -49,17 +49,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ListboxItem
-    v-if="isRender"
-    v-bind="forwarded"
-    :id="id"
-    ref="itemRef"
-    data-slot="command-item"
-    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
     @select="() => {
   filterState.search = '';
-}"
-  >
-    <slot />
-  </ListboxItem>
+}"
+  >
+    <slot />
+  </ListboxItem>
 </template>

package/dist/runtime/components/ui/command/CommandList.vue

@@ -12,13 +12,13 @@ const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <ListboxContent
-    data-slot="command-list"
-    v-bind="forwarded"
-    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
-  >
-    <div role="presentation">
-      <slot />
-    </div>
-  </ListboxContent>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
 </template>

package/dist/runtime/components/ui/command/CommandSeparator.vue

@@ -13,11 +13,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <Separator
-    data-slot="command-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 h-px', props.class)"
-  >
-    <slot />
-  </Separator>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
 </template>

package/dist/runtime/components/ui/command/CommandShortcut.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <span
-    data-slot="command-shortcut"
-    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
-  >
-    <slot />
-  </span>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
 </template>

package/dist/runtime/components/ui/dialog/Dialog.vue

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

package/dist/runtime/components/ui/dialog/DialogClose.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <DialogClose data-slot="dialog-close" v-bind="props">
-    <slot />
-  </DialogClose>
+  <DialogClose data-slot="dialog-close" v-bind="props">
+    <slot />
+  </DialogClose>
 </template>

package/dist/runtime/components/ui/dialog/DialogContent.vue

@@ -1,30 +1,30 @@
 <template>
-  <DialogPortal>
-    <DialogOverlay />
-    <Form v-slot="{ meta }" @submit="onSubmit">
-      <DialogContent
-        data-slot="dialog-content"
-        v-bind="forwarded"
+  <DialogPortal>
+    <DialogOverlay />
+    <Form v-slot="{ meta }" @submit="onSubmit">
+      <DialogContent
+        data-slot="dialog-content"
+        v-bind="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
   )
-"
-        @escape-key-down="onOutSideClick"
-        @pointer-down-outside="onOutSideClick"
-      >
-        <slot :meta="meta" />
-        <DialogClose
-          v-if="!props.disabledCloseBtn"
-          class="absolute top-4 right-4 rounded-xs opacity-70 cursor-pointer transition-opacity hover:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"
-        >
-          <Icon name="lucide:x" size="24" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </Form>
-  </DialogPortal>
+"
+        @escape-key-down="onOutSideClick"
+        @pointer-down-outside="onOutSideClick"
+      >
+        <slot :meta="meta" />
+        <DialogClose
+          v-if="!props.disabledCloseBtn"
+          class="absolute top-4 right-4 rounded-xs opacity-70 cursor-pointer transition-opacity hover:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"
+        >
+          <Icon name="lucide:x" size="24" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </Form>
+  </DialogPortal>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/dialog/DialogDescription.vue

@@ -12,11 +12,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogDescription
-    data-slot="dialog-description"
-    v-bind="forwardedProps"
-    :class="cn('text-muted-foreground font-body-large', props.class)"
-  >
-    <slot />
-  </DialogDescription>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground font-body-large', props.class)"
+  >
+    <slot />
+  </DialogDescription>
 </template>