pukaad-ui-lib 1.450.2 → 1.451.0

package/dist/runtime/components/modal/suggest-edit-place/place-phone.vue

@@ -1,30 +1,30 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:phone" :size="20" class="text-primary shrink-0" />
-      <div class="font-body-large-prominent">เบอร์โทรศัพท์</div>
-    </div>
-    <div class="flex flex-col gap-[8px]">
-      <div class="font-body-large-prominent text-gray">เบอร์โทรศัพท์เดิม</div>
-      <div class="font-body-large">{{ props.currentPhone }}</div>
-    </div>
-    <InputSelect
-      name="phone_edit_type"
-      label="ประเภทการแก้ไข"
-      v-model="editType"
-      placeholder="เลือกประเภทการแก้ไข"
-      :options="editTypeOptions"
-      class="w-full"
-    />
-    <template v-if="editType === 'new'">
-      <InputTextField
-        name="new_phone"
-        v-model="phoneValue"
-        label="เบอร์โทรศัพท์ใหม่"
-        placeholder="กรอกเบอร์โทรศัพท์"
-      />
-    </template>
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:phone" :size="20" class="text-primary shrink-0" />
+      <div class="font-body-large-prominent">เบอร์โทรศัพท์</div>
+    </div>
+    <div class="flex flex-col gap-[8px]">
+      <div class="font-body-large-prominent text-gray">เบอร์โทรศัพท์เดิม</div>
+      <div class="font-body-large">{{ props.currentPhone }}</div>
+    </div>
+    <InputSelect
+      name="phone_edit_type"
+      label="ประเภทการแก้ไข"
+      v-model="editType"
+      placeholder="เลือกประเภทการแก้ไข"
+      :options="editTypeOptions"
+      class="w-full"
+    />
+    <template v-if="editType === 'new'">
+      <InputTextField
+        name="new_phone"
+        v-model="phoneValue"
+        label="เบอร์โทรศัพท์ใหม่"
+        placeholder="กรอกเบอร์โทรศัพท์"
+      />
+    </template>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/pagination.vue

@@ -1,51 +1,51 @@
 <template>
-  <ShadPagination
-    v-slot="{ page }"
-    :items-per-page="itemPerPage"
-    :total="totalItems"
-    :show-edges="true"
-    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>
-        <ShadPaginationEllipsis
-          v-else-if="item.type === 'ellipsis'"
-          :index="index"
-        />
-      </template>
-      <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="totalItems"
+    :show-edges="true"
+    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>
+        <ShadPaginationEllipsis
+          v-else-if="item.type === 'ellipsis'"
+          :index="index"
+        />
+      </template>
+      <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,84 +1,84 @@
 <template>
-  <div class="w-full">
-    <ShadDropdownMenu>
-      <ShadDropdownMenuTrigger as-child>
-        <Button variant="outline" class="bg-white">
-          <Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
-        </Button>
-      </ShadDropdownMenuTrigger>
-
-      <ShadDropdownMenuContent align="start">
-        <ShadDropdownMenuItem
-          v-if="hasImage"
-          class="flex gap-[4px] items-center cursor-pointer"
-          @click="onEditImage"
-        >
-          <Icon name="lucide:crop" :size="16" />
-          <span class="font-body-medium">จัดตำแหน่ง</span>
-        </ShadDropdownMenuItem>
-        <ShadDropdownMenuItem
-          class="flex gap-[4px] items-center cursor-pointer"
-          @click="onUploadImage"
-        >
-          <Icon name="lucide:upload" :size="16" />
-          <span class="font-body-medium">อัปโหลดรูปภาพ</span>
-        </ShadDropdownMenuItem>
-      </ShadDropdownMenuContent>
-    </ShadDropdownMenu>
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/*"
-      class="hidden"
-      @change="onFileChange"
-    />
-    <Modal
-      title="ปรับแต่งรูปภาพหน้าปก"
-      class="w-[512px]"
-      v-model="isOpenModal"
-      @close="onCancel"
-    >
-      <div
-        ref="containerRef"
-        class="relative w-full h-[261px] overflow-hidden select-none cursor-move group"
-        @mousedown="startDrag"
-        @touchstart="startDrag"
-      >
-        <img
-          v-if="imageUrl"
-          :src="imageUrl"
-          class="absolute inset-0 w-full h-full object-cover pointer-events-none"
-          :style="{ objectPosition: `${posX}% ${posY}%` }"
-          @load="onImageLoad"
-          alt="Cover Preview"
-          draggable="false"
-        />
-
-        <div
-          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity"
-          :class="{ 'opacity-0': isDragging, 'opacity-100': !isDragging }"
-        >
-          <div
-            class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-[8px] bg-black/50"
-          >
-            <Icon name="lucide:move" class="text-white" :size="16" />
-            <span class="text-white font-body-medium">ลากเพื่อจัดตำแหน่ง</span>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex items-center gap-[16px] w-full">
-          <Button variant="outline" class="w-full" @click="onCancel">
-            ยกเลิก
-          </Button>
-          <Button color="primary" class="w-full" @click="onSave">
-            บันทึก
-          </Button>
-        </div>
-      </template>
-    </Modal>
-  </div>
+  <div class="w-full">
+    <ShadDropdownMenu>
+      <ShadDropdownMenuTrigger as-child>
+        <Button variant="outline" class="bg-white">
+          <Icon name="lucide:camera" /> แก้ไขรูปภาพหน้าปก
+        </Button>
+      </ShadDropdownMenuTrigger>
+
+      <ShadDropdownMenuContent align="start">
+        <ShadDropdownMenuItem
+          v-if="hasImage"
+          class="flex gap-[4px] items-center cursor-pointer"
+          @click="onEditImage"
+        >
+          <Icon name="lucide:crop" :size="16" />
+          <span class="font-body-medium">จัดตำแหน่ง</span>
+        </ShadDropdownMenuItem>
+        <ShadDropdownMenuItem
+          class="flex gap-[4px] items-center cursor-pointer"
+          @click="onUploadImage"
+        >
+          <Icon name="lucide:upload" :size="16" />
+          <span class="font-body-medium">อัปโหลดรูปภาพ</span>
+        </ShadDropdownMenuItem>
+      </ShadDropdownMenuContent>
+    </ShadDropdownMenu>
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onFileChange"
+    />
+    <Modal
+      title="ปรับแต่งรูปภาพหน้าปก"
+      class="w-[512px]"
+      v-model="isOpenModal"
+      @close="onCancel"
+    >
+      <div
+        ref="containerRef"
+        class="relative w-full h-[261px] overflow-hidden select-none cursor-move group"
+        @mousedown="startDrag"
+        @touchstart="startDrag"
+      >
+        <img
+          v-if="imageUrl"
+          :src="imageUrl"
+          class="absolute inset-0 w-full h-full object-cover pointer-events-none"
+          :style="{ objectPosition: `${posX}% ${posY}%` }"
+          @load="onImageLoad"
+          alt="Cover Preview"
+          draggable="false"
+        />
+
+        <div
+          class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none transition-opacity"
+          :class="{ 'opacity-0': isDragging, 'opacity-100': !isDragging }"
+        >
+          <div
+            class="flex items-center gap-[8px] px-[8px] py-[6px] rounded-[8px] bg-black/50"
+          >
+            <Icon name="lucide:move" class="text-white" :size="16" />
+            <span class="text-white font-body-medium">ลากเพื่อจัดตำแหน่ง</span>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex items-center gap-[16px] w-full">
+          <Button variant="outline" class="w-full" @click="onCancel">
+            ยกเลิก
+          </Button>
+          <Button color="primary" class="w-full" @click="onSave">
+            บันทึก
+          </Button>
+        </div>
+      </template>
+    </Modal>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,111 +1,111 @@
 <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="ปรับแต่งรูปภาพหน้าโปรไฟล์"
-    class="lg:max-w-[512px] gap-[24px]"
-    v-model="isOpenModal"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div
-        class="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="ปรับแต่งรูปภาพหน้าโปรไฟล์"
+    class="lg:max-w-[512px] gap-[24px]"
+    v-model="isOpenModal"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div
+        class="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="flex gap-[40px] items-center p-[16px]">
-        <div class="flex gap-[8px] items-center w-full">
-          <Icon name="lucide:zoom-in" size="20" />
-          <div @click="onZoomOut">
-            <Icon name="f7:minus" size="20" />
-          </div>
-          <InputSlider
-            thumb-size="16"
-            :min="isZoomMin"
-            :max="isZoomMax"
-            :step="isZoomStep"
-            full-width
-            v-model="isZoom"
-          />
-          <div @click="onZoomIn">
-            <Icon name="f7:plus" size="20" />
-          </div>
-        </div>
-        <div class="flex gap-[8px] items-center w-full">
-          <Icon name="lucide:rotate-cw" size="20" />
-          <div @click="onRotateLeft" class="cursor-pointer">
-            <Icon name="f7:minus" size="20" />
-          </div>
-          <InputSlider
-            thumb-size="16"
-            :min="isRotateMin"
-            :max="isRotateMax"
-            :step="isRotateStep"
-            full-width
-            v-model="isRotate"
-          />
-          <div @click="onRotateRight" class="cursor-pointer">
-            <Icon name="f7:plus" size="20" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <div class="flex items-center gap-[16px] w-[464px]">
-        <Button
-          variant="outline"
-          class="w-[224px]"
-          @click="isOpenModal = false"
-        >
-          ยกเลิก
-        </Button>
-        <Button color="primary" class="w-[224px]" @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="flex gap-[40px] items-center p-[16px]">
+        <div class="flex gap-[8px] items-center w-full">
+          <Icon name="lucide:zoom-in" size="20" />
+          <div @click="onZoomOut">
+            <Icon name="f7:minus" size="20" />
+          </div>
+          <InputSlider
+            thumb-size="16"
+            :min="isZoomMin"
+            :max="isZoomMax"
+            :step="isZoomStep"
+            full-width
+            v-model="isZoom"
+          />
+          <div @click="onZoomIn">
+            <Icon name="f7:plus" size="20" />
+          </div>
+        </div>
+        <div class="flex gap-[8px] items-center w-full">
+          <Icon name="lucide:rotate-cw" size="20" />
+          <div @click="onRotateLeft" class="cursor-pointer">
+            <Icon name="f7:minus" size="20" />
+          </div>
+          <InputSlider
+            thumb-size="16"
+            :min="isRotateMin"
+            :max="isRotateMax"
+            :step="isRotateStep"
+            full-width
+            v-model="isRotate"
+          />
+          <div @click="onRotateRight" class="cursor-pointer">
+            <Icon name="f7:plus" size="20" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex items-center gap-[16px] w-[464px]">
+        <Button
+          variant="outline"
+          class="w-[224px]"
+          @click="isOpenModal = false"
+        >
+          ยกเลิก
+        </Button>
+        <Button color="primary" class="w-[224px]" @click="onCropImage">
+          บันทึก
+        </Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,26 +1,26 @@
 <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="reportState"
-    v-model="isOpenModalReport"
-    @submit="onReportSubmit"
-  />
-  <ModalProfileEdit
-    v-model="isOpenModalProfileEdit"
-    :profile-detail="props.profileDetail"
-    @profile-name-updated="(name) => emit('profile-name-updated', name)"
-  />
+  <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="reportState"
+    v-model="isOpenModalReport"
+    @submit="onReportSubmit"
+  />
+  <ModalProfileEdit
+    v-model="isOpenModalProfileEdit"
+    :profile-detail="props.profileDetail"
+    @profile-name-updated="(name) => emit('profile-name-updated', name)"
+  />
 </template>
 
 <script setup>

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

@@ -1,39 +1,39 @@
 <template>
-  <ShadDropdownMenu v-model:open="open">
-    <ShadDropdownMenuTrigger as-child>
-      <Button
-        :variant="resolvedVariant"
-        :size="props.size"
-        :circle="props.circle"
+  <ShadDropdownMenu v-model:open="open">
+    <ShadDropdownMenuTrigger as-child>
+      <Button
+        :variant="resolvedVariant"
+        :size="props.size"
+        :circle="props.circle"
         :class="[
   props.circle && 'size-[32px]',
   props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
   props.disabledPadding ? 'p-0' : '',
   props.triggerClass
-]"
-      >
-        <Icon
+]"
+      >
+        <Icon
           :name="
   props.horizontal ? 'lucide:ellipsis' : 'lucide:ellipsis-vertical'
-"
-          :size="props.iconSize"
-        />
-      </Button>
-    </ShadDropdownMenuTrigger>
-
-    <ShadDropdownMenuContent align="start">
-      <template v-for="(item, i) in props.items" :key="i">
-        <ShadDropdownMenuItem
-          class="flex gap-[4px] items-center cursor-pointer hover:bg-smoke"
-          :class="item.class"
-          @click="onAction(item)"
-        >
-          <Icon :name="item.icon" :size="16" :class="item.class" />
-          <span class="font-body-large" :class="item.class">{{ item.label }}</span>
-        </ShadDropdownMenuItem>
-      </template>
-    </ShadDropdownMenuContent>
-  </ShadDropdownMenu>
+"
+          :size="props.iconSize"
+        />
+      </Button>
+    </ShadDropdownMenuTrigger>
+
+    <ShadDropdownMenuContent align="start">
+      <template v-for="(item, i) in props.items" :key="i">
+        <ShadDropdownMenuItem
+          class="flex gap-[4px] items-center cursor-pointer hover:bg-smoke"
+          :class="item.class"
+          @click="onAction(item)"
+        >
+          <Icon :name="item.icon" :size="16" :class="item.class" />
+          <span class="font-body-large" :class="item.class">{{ item.label }}</span>
+        </ShadDropdownMenuItem>
+      </template>
+    </ShadDropdownMenuContent>
+  </ShadDropdownMenu>
 </template>
 
 <script setup>