pukaad-ui-lib 1.21.1 → 1.22.2

package/dist/runtime/components/pagination.vue

@@ -1,34 +1,34 @@
 <template>
-  <ShadPagination v-slot="{ page }" :items-per-page="itemPerPage" :total="props.totalPage" v-model:page="pageModel">
-    <ShadPaginationContent v-slot="{ items }">
-      <ShadPaginationFirst />
-      <ShadPaginationPrevious />
-      <template v-for="(item, index) in items" :key="index">
-        <ShadPaginationItem v-if="item.type === 'page'" :value="item.value" :is-active="item.value === page">
-          {{ item.value }}
-        </ShadPaginationItem>
-      </template>
-      <ShadPaginationEllipsis />
-      <ShadPaginationNext />
-      <ShadPaginationLast />
-
-      <ShadDropdownMenu>
-        <ShadDropdownMenuTrigger>
-          <Button variant="outline">
-            <div class="flex gap-2 items-center">
-              <div>{{ itemPerPage }} / หน้า</div>
-              <Icon name="lucide:chevron-down" />
-            </div>
-          </Button>
-        </ShadDropdownMenuTrigger>
-        <ShadDropdownMenuContent class="max-h-96">
-          <ShadDropdownMenuItem v-for="n in [10, 50, 100]" :key="n" @click="onSlectItemPerPage(n)">
-            {{ n }} / หน้า
-          </ShadDropdownMenuItem>
-        </ShadDropdownMenuContent>
-      </ShadDropdownMenu>
-    </ShadPaginationContent>
-  </ShadPagination>
+  <ShadPagination v-slot="{ page }" :items-per-page="itemPerPage" :total="props.totalPage" v-model:page="pageModel">
+    <ShadPaginationContent v-slot="{ items }">
+      <ShadPaginationFirst />
+      <ShadPaginationPrevious />
+      <template v-for="(item, index) in items" :key="index">
+        <ShadPaginationItem v-if="item.type === 'page'" :value="item.value" :is-active="item.value === page">
+          {{ item.value }}
+        </ShadPaginationItem>
+      </template>
+      <ShadPaginationEllipsis />
+      <ShadPaginationNext />
+      <ShadPaginationLast />
+
+      <ShadDropdownMenu>
+        <ShadDropdownMenuTrigger>
+          <Button variant="outline">
+            <div class="flex gap-2 items-center">
+              <div>{{ itemPerPage }} / หน้า</div>
+              <Icon name="lucide:chevron-down" />
+            </div>
+          </Button>
+        </ShadDropdownMenuTrigger>
+        <ShadDropdownMenuContent class="max-h-96">
+          <ShadDropdownMenuItem v-for="n in [10, 50, 100]" :key="n" @click="onSlectItemPerPage(n)">
+            {{ n }} / หน้า
+          </ShadDropdownMenuItem>
+        </ShadDropdownMenuContent>
+      </ShadDropdownMenu>
+    </ShadPaginationContent>
+  </ShadPagination>
 </template>
 
 <script setup>

package/dist/runtime/components/picker/picker-image-cover-profile.vue

@@ -1,100 +1,100 @@
 <template>
-  <Dropdown>
-    <template #default="{ isOpen }">
-      <Button
-        prepend-icon="lucide:camera"
-        size="small"
-        variant="flat-outline"
-        color="black"
-      >
-        แก้ไขรูปภาพหน้าปก</Button
-      >
-    </template>
-    <template #content>
-      <div
-        class="flex gap-[4px] px-[8px] py-[8px] items-center cursor-pointer hover:bg-gray-100"
-        @click="onEditImage"
-      >
-        <Icon name="lucide:crop" />
-        <div class="font-body-medium">แก้ไขรูปภาพหน้าปก</div>
-      </div>
-      <div
-        class="flex gap-[4px] px-[8px] py-[8px] items-center cursor-pointer hover:bg-gray-100"
-        @click="onUploadImage"
-      >
-        <Icon name="lucide:upload" />
-        <div class="font-body-medium">อัปโหลดรูปภาพ</div>
-      </div>
-    </template>
-  </Dropdown>
-  <input
-    ref="fileInputRef"
-    type="file"
-    accept="image/*"
-    @change="onFileChange"
-    class="hidden"
-  />
-  <Modal
-    title="ปรับแต่งรูปภาพหน้าปก"
-    :width="632"
-    v-model="isOpenModal"
-    divider
-    disabled-padding-content
-  >
-    <div
-      class="flex justify-center items-center rounded-[8px] overflow-hidden relative p-[16px]"
-    >
-      <ImageCropper
-        v-if="imageUrl"
-        ref="cropperRef"
-        dragMode="move"
+  <Dropdown>
+    <template #default="{ isOpen }">
+      <Button
+        prepend-icon="lucide:camera"
+        size="small"
+        variant="flat-outline"
+        color="black"
+      >
+        แก้ไขรูปภาพหน้าปก</Button
+      >
+    </template>
+    <template #content>
+      <div
+        class="flex gap-[4px] px-[8px] py-[8px] items-center cursor-pointer hover:bg-gray-100"
+        @click="onEditImage"
+      >
+        <Icon name="lucide:crop" />
+        <div class="font-body-medium">แก้ไขรูปภาพหน้าปก</div>
+      </div>
+      <div
+        class="flex gap-[4px] px-[8px] py-[8px] items-center cursor-pointer hover:bg-gray-100"
+        @click="onUploadImage"
+      >
+        <Icon name="lucide:upload" />
+        <div class="font-body-medium">อัปโหลดรูปภาพ</div>
+      </div>
+    </template>
+  </Dropdown>
+  <input
+    ref="fileInputRef"
+    type="file"
+    accept="image/*"
+    @change="onFileChange"
+    class="hidden"
+  />
+  <Modal
+    title="ปรับแต่งรูปภาพหน้าปก"
+    :width="632"
+    v-model="isOpenModal"
+    divider
+    disabled-padding-content
+  >
+    <div
+      class="flex justify-center items-center rounded-[8px] overflow-hidden relative p-[16px]"
+    >
+      <ImageCropper
+        v-if="imageUrl"
+        ref="cropperRef"
+        dragMode="move"
         :container-style="{
   width: '600px',
   height: '240px',
   overflow: 'hidden',
   position: 'relative'
-}"
-        :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
-        :src="imageUrl"
-        :aspect-ratio="5 / 2"
-        :initial-aspect-ratio="5 / 2"
-        :view-mode="3"
-        :guides="false"
-        :movable="true"
-        :crop-box-movable="false"
-        :crop-box-resizable="false"
-        :background="false"
-        :center="false"
-        :auto-crop-area="1"
-        :responsive="true"
-        :zoom-on-wheel="false"
-        :zoom-on-touch="false"
-        :zoomable="false"
-        :rotatable="false"
-        :scalable="false"
-      />
-
-      <div
-        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"
-      >
-        <div
-          class="flex h-[40px] items-center gap-[8px] px-[16px] py-[8px] rounded-[8px] bg-black/60"
-        >
-          <Icon name="lucide:move" color="white" />
-          <div class="text-white font-body-large">ลากเพื่อเปลี่ยนตำแหน่ง</div>
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="flex items-center gap-[16px] w-full">
-        <Button variant="outline" full-width @click="onCancel"> ยกเลิก </Button>
-        <Button color="primary" full-width @click="onCropImage">
-          บันทึก
-        </Button>
-      </div>
-    </template>
-  </Modal>
+}"
+        :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
+        :src="imageUrl"
+        :aspect-ratio="5 / 2"
+        :initial-aspect-ratio="5 / 2"
+        :view-mode="3"
+        :guides="false"
+        :movable="true"
+        :crop-box-movable="false"
+        :crop-box-resizable="false"
+        :background="false"
+        :center="false"
+        :auto-crop-area="1"
+        :responsive="true"
+        :zoom-on-wheel="false"
+        :zoom-on-touch="false"
+        :zoomable="false"
+        :rotatable="false"
+        :scalable="false"
+      />
+
+      <div
+        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+      >
+        <div
+          class="flex h-[40px] items-center gap-[8px] px-[16px] py-[8px] rounded-[8px] bg-black/60"
+        >
+          <Icon name="lucide:move" color="white" />
+          <div class="text-white font-body-large">ลากเพื่อเปลี่ยนตำแหน่ง</div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center gap-[16px] w-full">
+        <Button variant="outline" full-width @click="onCancel"> ยกเลิก </Button>
+        <Button color="primary" full-width @click="onCropImage">
+          บันทึก
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/picker/picker-image-profile.vue

@@ -1,91 +1,91 @@
 <template>
-  <label class="relative cursor-pointer">
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/*"
-      class="absolute w-full h-full hidden cursor-pointer"
-      @change="onChange"
-    />
-
-    <div @click="onTriggerFileInput">
-      <slot name="default" />
-    </div>
-  </label>
-
-  <Modal
-    title="ปรับแต่งรูปภาพหน้าปก"
-    width="500"
-    title-position="left"
-    divider-header
-    divider-footer
-    disabled-padding-content
-    v-model="isOpenModal"
-  >
-    <div
-      class="h-[500px] flex justify-center items-center overflow-hidden circular-cropper-container"
-    >
-      <ImageCropper
-        v-if="imageFile"
-        ref="cropperRef"
-        dragMode="move"
+  <label class="relative cursor-pointer">
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="absolute w-full h-full hidden cursor-pointer"
+      @change="onChange"
+    />
+
+    <div @click="onTriggerFileInput">
+      <slot name="default" />
+    </div>
+  </label>
+
+  <Modal
+    title="ปรับแต่งรูปภาพหน้าปก"
+    width="500"
+    title-position="left"
+    divider-header
+    divider-footer
+    disabled-padding-content
+    v-model="isOpenModal"
+  >
+    <div
+      class="h-[500px] flex justify-center items-center overflow-hidden circular-cropper-container"
+    >
+      <ImageCropper
+        v-if="imageFile"
+        ref="cropperRef"
+        dragMode="move"
         :container-style="{
   width: '320px',
   height: '320px',
   overflow: 'visible',
   position: 'relative'
-}"
-        :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
-        :src="imageUrl"
-        :aspect-ratio="1"
-        :initial-aspect-ratio="1"
-        :view-mode="3"
-        :guides="false"
-        :movable="true"
-        :crop-box-movable="false"
-        :crop-box-resizable="false"
-        :background="false"
-        :center="false"
-        :min-crop-box-width="320"
-        :min-crop-box-height="320"
-        :min-canvas-width="320"
-        :min-canvas-height="320"
-        :auto-crop-area="1"
-        :responsive="true"
-        :zoom-on-wheel="false"
-        :zoom-on-touch="false"
-        @zoom="onZoom"
-      />
-    </div>
-
-    <div class="p-[16px] flex gap-[16px] items-center text-mercury">
-      <Button variant="text" disabled-padding @click="onZoomOut">
-        <Icon name="f7:minus" size="16" />
-      </Button>
-      <InputSlider
-        thumb-size="16"
-        :min="isZoomMin"
-        :max="isZoomMax"
-        :step="isZoomStep"
-        full-width
-        v-model="isZoom"
-      />
-      <Button variant="text" disabled-padding @click="onZoomIn">
-        <Icon name="f7:plus" size="16" />
-      </Button>
-    </div>
-
-    <template #footer>
-      <div class="flex items-center gap-[16px]">
-        <Button variant="outline" full-width @click="isOpenModal = false">
-          ยกเลิก
-        </Button>
-        <Button color="primary" full-width @click="onCropImage">
-          บันทึก
-        </Button>
-      </div>
-    </template>
-  </Modal>
+}"
+        :img-style="{ display: 'block', maxWidth: '100%', maxHeight: '100%' }"
+        :src="imageUrl"
+        :aspect-ratio="1"
+        :initial-aspect-ratio="1"
+        :view-mode="3"
+        :guides="false"
+        :movable="true"
+        :crop-box-movable="false"
+        :crop-box-resizable="false"
+        :background="false"
+        :center="false"
+        :min-crop-box-width="320"
+        :min-crop-box-height="320"
+        :min-canvas-width="320"
+        :min-canvas-height="320"
+        :auto-crop-area="1"
+        :responsive="true"
+        :zoom-on-wheel="false"
+        :zoom-on-touch="false"
+        @zoom="onZoom"
+      />
+    </div>
+
+    <div class="p-[16px] flex gap-[16px] items-center text-mercury">
+      <Button variant="text" disabled-padding @click="onZoomOut">
+        <Icon name="f7:minus" size="16" />
+      </Button>
+      <InputSlider
+        thumb-size="16"
+        :min="isZoomMin"
+        :max="isZoomMax"
+        :step="isZoomStep"
+        full-width
+        v-model="isZoom"
+      />
+      <Button variant="text" disabled-padding @click="onZoomIn">
+        <Icon name="f7:plus" size="16" />
+      </Button>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center gap-[16px]">
+        <Button variant="outline" full-width @click="isOpenModal = false">
+          ยกเลิก
+        </Button>
+        <Button color="primary" full-width @click="onCropImage">
+          บันทึก
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue

@@ -1,18 +1,18 @@
 <template>
-  <PickerOptionMenu
-    :items="items"
-    :variant="props.variant"
-    :disabled-padding="props.disabledPadding"
-    :circle="props.circle"
-    :horizontal="props.horizontal"
-    :size="props.size"
-    :icon-size="props.iconSize"
-    :disabled="props.disabled"
-  />
-
-  <ModalShare v-model="isOpenModalShare" />
-  <ModalReport state v-model="isOpenModalReport" />
-  <ModalProfileEdit v-model="isOpenModalProfileEdit" />
+  <PickerOptionMenu
+    :items="items"
+    :variant="props.variant"
+    :disabled-padding="props.disabledPadding"
+    :circle="props.circle"
+    :horizontal="props.horizontal"
+    :size="props.size"
+    :icon-size="props.iconSize"
+    :disabled="props.disabled"
+  />
+
+  <ModalShare v-model="isOpenModalShare" />
+  <ModalReport state v-model="isOpenModalReport" />
+  <ModalProfileEdit v-model="isOpenModalProfileEdit" />
 </template>
 
 <script setup>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.d.vue.ts

@@ -2,11 +2,11 @@ import type { PickerOptionMenuProps, PickerOptionMenuItem } from "@/types/compon
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PickerOptionMenuProps> & Readonly<{}>, {
     variant: ButtonVariant;
     items: PickerOptionMenuItem[];
+    circle: boolean;
     size: ButtonSize;
     horizontal: boolean;
-    disabledPadding: boolean;
     disabled: boolean;
-    circle: boolean;
+    disabledPadding: boolean;
     iconSize: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.vue

@@ -1,37 +1,37 @@
 <template>
-  <Dropdown v-model="isOpenDrawer">
-    <Button
-      :variant="props.variant"
-      :disabled-padding="props.disabledPadding"
-      :circle="props.circle"
-      :color="props.variant === 'text' ? 'black' : 'default'"
-      :icon-size="props.iconSize"
-      :size="props.size"
+  <Dropdown v-model="isOpenDrawer">
+    <Button
+      :variant="props.variant"
+      :disabled-padding="props.disabledPadding"
+      :circle="props.circle"
+      :color="props.variant === 'text' ? 'black' : 'default'"
+      :icon-size="props.iconSize"
+      :size="props.size"
       :prepend-icon="
   props.horizontal ? 'lucide:ellipsis' : 'lucide:ellipsis-vertical'
-"
-      :disabled="props.disabled"
-    />
-
-    <template #content>
-      <div v-for="(item, i) in props.items" :key="i" class="flex flex-col">
-        <div
+"
+      :disabled="props.disabled"
+    />
+
+    <template #content>
+      <div v-for="(item, i) in props.items" :key="i" class="flex flex-col">
+        <div
           :class="[
   'flex gap-[4px] p-[8px] items-center cursor-pointer hover:bg-smoke',
   i == 0 && 'rounded-t-[8px]',
   i == props.items.length - 1 && 'rounded-b-[8px]'
-]"
-          @click="onAction(item)"
-        >
-          <Icon :name="item.icon" size="16" />
-          <div class="font-body-large">
-            {{ item.label }}
-          </div>
-        </div>
-        <Divider v-if="i !== props.items.length - 1" height="0" />
-      </div>
-    </template>
-  </Dropdown>
+]"
+          @click="onAction(item)"
+        >
+          <Icon :name="item.icon" size="16" />
+          <div class="font-body-large">
+            {{ item.label }}
+          </div>
+        </div>
+        <Divider v-if="i !== props.items.length - 1" height="0" />
+      </div>
+    </template>
+  </Dropdown>
 </template>
 
 <script setup>

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu.vue.d.ts

@@ -2,11 +2,11 @@ import type { PickerOptionMenuProps, PickerOptionMenuItem } from "@/types/compon
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PickerOptionMenuProps> & Readonly<{}>, {
     variant: ButtonVariant;
     items: PickerOptionMenuItem[];
+    circle: boolean;
     size: ButtonSize;
     horizontal: boolean;
-    disabledPadding: boolean;
     disabled: boolean;
-    circle: boolean;
+    disabledPadding: boolean;
     iconSize: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;