pukaad-ui-lib 1.282.0 → 1.282.2

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,22 +1,22 @@
 <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"
-    :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 v-model="isOpenModalReport" />
+  <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,37 +1,37 @@
 <template>
-  <ShadDropdownMenu v-model:open="open">
-    <ShadDropdownMenuTrigger as-child>
-      <Button
-        :variant="props.variant"
-        :size="props.size"
+  <ShadDropdownMenu v-model:open="open">
+    <ShadDropdownMenuTrigger as-child>
+      <Button
+        :variant="props.variant"
+        :size="props.size"
         :class="[
   props.circle ? 'rounded-full' : 'rounded-md',
   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"
-          @click="onAction(item)"
-        >
-          <Icon :name="item.icon" :size="16" />
-          <span class="font-body-large">{{ 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"
+          @click="onAction(item)"
+        >
+          <Icon :name="item.icon" :size="16" />
+          <span class="font-body-large">{{ item.label }}</span>
+        </ShadDropdownMenuItem>
+      </template>
+    </ShadDropdownMenuContent>
+  </ShadDropdownMenu>
 </template>
 
 <script setup>

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

@@ -1,84 +1,84 @@
 <template>
-  <!-- <div class="h-[512px] w-full">
-    <div class="relative">
-      <Image :height="512" />
-      <div class="absolute bottom-[24px] right-[24px]" v-if="props.isMyProfile">
-        <PickerImageCoverProfile />
-      </div>
-    </div>
-    <div class="relative w-full p-[24px] pl-[200px]">
-      <div
-        class="absolute left-[24px] top-[-86px] flex justify-center p-[24px]"
-      >
-        <div class="relative">
-          <Avatar :size="128" class="border-[6px] border-white" />
-          <div class="absolute bottom-0 right-0" v-if="props.isMyProfile">
-            <PickerImageProfile>
-              <Button
-                circle
-                size="small"
-                :icon-size="20"
-                prepend-icon="lucide:camera"
-              />
-            </PickerImageProfile>
-          </div>
-        </div>
-      </div>
-      <div class="flex gap-[100px]">
-        <div class="flex flex-col gap-[8px] w-full">
-          <div class="inline-flex flex-wrap items-center gap-[16px]">
-            <div class="font-headline-medium-prominent">
-              {{ props.item?.profile_name || props.item?.id || "-" }}
-            </div>
-            <Icon name="pukaad:verify" size="20" />
-          </div>
-          <div class="flex gap-[24px] text-gray font-body-large">
-            <div
-              v-for="info in infoToShow"
-              :key="info.label"
-              class="flex gap-[4px]"
-            >
-              {{ info.label }}
-              <div class="text-black">{{ info.value }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="flex gap-[16px] items-center">
-          <template v-if="props.isMyProfile">
-            <Button
-              prepend-icon="lucide:plus"
-              :icon-size="20"
-              color="primary"
-              @click="emit('create-post')"
-            >
-              สร้างโพสต์
-            </Button>
-            <PickerOptionMenuUser state="my-profile" disabled-padding />
-          </template>
-          <template v-else>
-            <Button
-              prepend-icon="lucide:message-circle"
-              :icon-size="20"
-              color="primary"
-              @click="emit('chat')"
-            >
-              แชท
-            </Button>
-            <Button
-              v-if="!props.isMyProfile"
-              prepend-icon="lucide:user-round-plus"
-              :icon-size="20"
-              variant="outline"
-              @click="emit('follow')"
-            >
-              ติดตาม
-            </Button>
-            <PickerOptionMenuUser state="profile" disabled-padding />
-          </template>
-        </div>
-      </div>
-    </div>
-  </div> -->
+  <!-- <div class="h-[512px] w-full">
+    <div class="relative">
+      <Image :height="512" />
+      <div class="absolute bottom-[24px] right-[24px]" v-if="props.isMyProfile">
+        <PickerImageCoverProfile />
+      </div>
+    </div>
+    <div class="relative w-full p-[24px] pl-[200px]">
+      <div
+        class="absolute left-[24px] top-[-86px] flex justify-center p-[24px]"
+      >
+        <div class="relative">
+          <Avatar :size="128" class="border-[6px] border-white" />
+          <div class="absolute bottom-0 right-0" v-if="props.isMyProfile">
+            <PickerImageProfile>
+              <Button
+                circle
+                size="small"
+                :icon-size="20"
+                prepend-icon="lucide:camera"
+              />
+            </PickerImageProfile>
+          </div>
+        </div>
+      </div>
+      <div class="flex gap-[100px]">
+        <div class="flex flex-col gap-[8px] w-full">
+          <div class="inline-flex flex-wrap items-center gap-[16px]">
+            <div class="font-headline-medium-prominent">
+              {{ props.item?.profile_name || props.item?.id || "-" }}
+            </div>
+            <Icon name="pukaad:verify" size="20" />
+          </div>
+          <div class="flex gap-[24px] text-gray font-body-large">
+            <div
+              v-for="info in infoToShow"
+              :key="info.label"
+              class="flex gap-[4px]"
+            >
+              {{ info.label }}
+              <div class="text-black">{{ info.value }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="flex gap-[16px] items-center">
+          <template v-if="props.isMyProfile">
+            <Button
+              prepend-icon="lucide:plus"
+              :icon-size="20"
+              color="primary"
+              @click="emit('create-post')"
+            >
+              สร้างโพสต์
+            </Button>
+            <PickerOptionMenuUser state="my-profile" disabled-padding />
+          </template>
+          <template v-else>
+            <Button
+              prepend-icon="lucide:message-circle"
+              :icon-size="20"
+              color="primary"
+              @click="emit('chat')"
+            >
+              แชท
+            </Button>
+            <Button
+              v-if="!props.isMyProfile"
+              prepend-icon="lucide:user-round-plus"
+              :icon-size="20"
+              variant="outline"
+              @click="emit('follow')"
+            >
+              ติดตาม
+            </Button>
+            <PickerOptionMenuUser state="profile" disabled-padding />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div> -->
 </template>
 
 <script setup>

package/dist/runtime/components/progress-bar.vue

@@ -1,21 +1,21 @@
 <template>
-  <div
-    class="rounded-full"
+  <div
+    class="rounded-full"
     :style="{
   backgroundColor: props.colorBackground,
   height: `${props.height}px`,
   width: props.fullWidth ? '100%' : `${props.width}px`
-}"
-  >
-    <div
-      class="rounded-full"
+}"
+  >
+    <div
+      class="rounded-full"
       :style="{
   backgroundColor: props.colorActive,
   height: `${props.height}px`,
   width: `${value}%`
-}"
-    ></div>
-  </div>
+}"
+    ></div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/read-more-text.vue

@@ -1,5 +1,5 @@
 <template>
- <div>แก้หมด</div>
+ <div>แก้หมด</div>
 </template>
 
 <script setup>