pukaad-ui-lib 1.2.0 → 1.3.2

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.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/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>