pukaad-ui-lib 1.2.0 → 1.3.2

package/dist/runtime/components/modal/modal-review-detail.vue

@@ -1,124 +1,124 @@
 <template>
-  <Modal
-    v-model="modelValue"
-    :title="props.title"
-    :width="1280"
-    divider
-    @close="onClosed"
-  >
-    <Carousel
-      :items="props.items"
-      :select-index="currentIndex"
-      @clicked-image="switcComment = false"
-      :width="1280"
-      :height="768"
-    >
-      <Card v-if="switcComment" full-width>
-        <div class="flex gap-[16px] max-h-[318px]">
-          <div>
-            <!-- <Avatar :src="props.review.user?.avatar" :name="props.review.user?.name" /> -->
-          </div>
-          <div class="flex flex-col gap-[8px] w-full">
-            <div class="flex flex-col gap-[2px]">
-              <div class="flex justify-between items-center">
-                <div class="font-body-large">{{ props.review.user?.name }}</div>
-                <div class="flex gap-[8px] items-center">
-                  <Button
-                    type="text"
-                    :variant="liked ? 'primary' : 'black'"
-                    :icon-size="20"
-                    size="tiny"
+  <Modal
+    v-model="modelValue"
+    :title="props.title"
+    :width="1280"
+    divider
+    @close="onClosed"
+  >
+    <Carousel
+      :items="props.items"
+      :select-index="currentIndex"
+      @clicked-image="switcComment = false"
+      :width="1280"
+      :height="768"
+    >
+      <Card v-if="switcComment" full-width>
+        <div class="flex gap-[16px] max-h-[318px]">
+          <div>
+            <!-- <Avatar :src="props.review.user?.avatar" :name="props.review.user?.name" /> -->
+          </div>
+          <div class="flex flex-col gap-[8px] w-full">
+            <div class="flex flex-col gap-[2px]">
+              <div class="flex justify-between items-center">
+                <div class="font-body-large">{{ props.review.user?.name }}</div>
+                <div class="flex gap-[8px] items-center">
+                  <Button
+                    type="text"
+                    :variant="liked ? 'primary' : 'black'"
+                    :icon-size="20"
+                    size="tiny"
                     :prepend-icon="
   liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
-"
-                    :aria-pressed="liked"
-                    @click="toggleLike"
-                    disabled-padding
-                  >
-                    <div>
-                      {{ likeCount }}
-                    </div>
-                  </Button>
-                  <PickerOptionMenuUser :state="menuType" disabled-padding />
-                </div>
-              </div>
-              <div class="flex flex-col gap-[6px]">
-                <div class="font-body-small">
-                  {{ props.review.user?.review_count }} รีวิว •
-                  {{ props.review.user?.like_count }} ชื่นชอบรีวิว
-                </div>
-                <div class="flex gap-[8px] items-center">
-                  <InputRating
-                    :size="16"
-                    readonly
-                    :model-value="props.review.review?.rating"
-                  />
-                  <div class="font-body-small">
-                    {{ props.review.review?.created_at }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              v-if="props.review.review?.description"
-              class="font-body-large max-h-[208px] overflow-y-auto"
-            >
-              {{ props.review.review?.description }}
-            </div>
-          </div>
-        </div>
-      </Card>
-      <div
-        v-else
-        class="w-full bg-gradient-to-b from-transparent to-black/70 p-[16px] text-white flex gap-[16px]"
-      >
-        <div>
-          <!-- <Avatar
-            :src="props.review.user?.avatar"
-            :name="props.review.user?.name"
-          /> -->
-        </div>
-        <div class="flex flex-col gap-[8px] w-full">
-          <div class="flex flex-col gap-[2px]">
-            <div class="flex justify-between items-center">
-              <div class="font-body-large">{{ props.review.user?.name }}</div>
-              <div class="flex gap-[8px] items-center">
-                <Button variant="text" disabled-padding @click="toggleComment">
-                  <Icon
-                    name="lucide:message-square-warning"
-                    :size="20"
-                    color="white"
-                  />
-                </Button>
-              </div>
-            </div>
-            <div class="flex flex-col gap-[6px]">
-              <div class="font-body-small">
-                {{ props.review.user?.review_count }} รีวิว •
-                {{ props.review.user?.like_count }} ชื่นชอบรีวิว
-              </div>
-              <div class="flex gap-[8px] items-center">
-                <InputRating
-                  :size="16"
-                  readonly
-                  :model-value="props.review.review?.rating"
-                />
-                <div class="font-body-small">
-                  {{ props.review.review?.created_at }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="props.review.review?.description"
-            class="font-body-large line-clamp-1"
-          >
-            {{ props.review.review?.description }}
-          </div>
-        </div>
-      </div>
-    </Carousel>
-  </Modal>
+"
+                    :aria-pressed="liked"
+                    @click="toggleLike"
+                    disabled-padding
+                  >
+                    <div>
+                      {{ likeCount }}
+                    </div>
+                  </Button>
+                  <PickerOptionMenuUser :state="menuType" disabled-padding />
+                </div>
+              </div>
+              <div class="flex flex-col gap-[6px]">
+                <div class="font-body-small">
+                  {{ props.review.user?.review_count }} รีวิว •
+                  {{ props.review.user?.like_count }} ชื่นชอบรีวิว
+                </div>
+                <div class="flex gap-[8px] items-center">
+                  <InputRating
+                    :size="16"
+                    readonly
+                    :model-value="props.review.review?.rating"
+                  />
+                  <div class="font-body-small">
+                    {{ props.review.review?.created_at }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              v-if="props.review.review?.description"
+              class="font-body-large max-h-[208px] overflow-y-auto"
+            >
+              {{ props.review.review?.description }}
+            </div>
+          </div>
+        </div>
+      </Card>
+      <div
+        v-else
+        class="w-full bg-gradient-to-b from-transparent to-black/70 p-[16px] text-white flex gap-[16px]"
+      >
+        <div>
+          <!-- <Avatar
+            :src="props.review.user?.avatar"
+            :name="props.review.user?.name"
+          /> -->
+        </div>
+        <div class="flex flex-col gap-[8px] w-full">
+          <div class="flex flex-col gap-[2px]">
+            <div class="flex justify-between items-center">
+              <div class="font-body-large">{{ props.review.user?.name }}</div>
+              <div class="flex gap-[8px] items-center">
+                <Button variant="text" disabled-padding @click="toggleComment">
+                  <Icon
+                    name="lucide:message-square-warning"
+                    :size="20"
+                    color="white"
+                  />
+                </Button>
+              </div>
+            </div>
+            <div class="flex flex-col gap-[6px]">
+              <div class="font-body-small">
+                {{ props.review.user?.review_count }} รีวิว •
+                {{ props.review.user?.like_count }} ชื่นชอบรีวิว
+              </div>
+              <div class="flex gap-[8px] items-center">
+                <InputRating
+                  :size="16"
+                  readonly
+                  :model-value="props.review.review?.rating"
+                />
+                <div class="font-body-small">
+                  {{ props.review.review?.created_at }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="props.review.review?.description"
+            class="font-body-large line-clamp-1"
+          >
+            {{ props.review.review?.description }}
+          </div>
+        </div>
+      </div>
+    </Carousel>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-secure.vue

@@ -1,14 +1,14 @@
 <template>
-  <component
-    v-for="modal in modals"
-    :key="modal.key"
-    :is="modal.component"
-    :email="props.email"
-    @complete="handleComplete(modal.key)"
-    :confirmed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
-    @close="isOpen = false"
-    v-model="modalStates[modal.key]"
-  />
+  <component
+    v-for="modal in modals"
+    :key="modal.key"
+    :is="modal.component"
+    :email="props.email"
+    @complete="handleComplete(modal.key)"
+    :confirmed-text="isLastStep ? '\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19' : '\u0E16\u0E31\u0E14\u0E44\u0E1B'"
+    @close="isOpen = false"
+    v-model="modalStates[modal.key]"
+  />
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-share.vue

@@ -1,28 +1,28 @@
 <template>
-  <Modal title="แชร์" width="396" v-model="isOpen">
-    <div class="flex justify-between">
-      <div
-        v-for="(share, i) of listShares"
-        :key="i"
-        @click="share.action()"
-        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
-      >
-        <Icon :name="share.icon" size="40" />
-        <div class="font-body-large text-gray">
-          {{ share.label }}
-        </div>
-      </div>
-      <div
-        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
-        @click="onCopyLink"
-      >
-        <ShadAvatar size="40">
-          <Icon name="fa6-solid:link" size="40" />
-        </ShadAvatar>
-        <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
-      </div>
-    </div>
-  </Modal>
+  <Modal title="แชร์" width="396" v-model="isOpen">
+    <div class="flex justify-between">
+      <div
+        v-for="(share, i) of listShares"
+        :key="i"
+        @click="share.action()"
+        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
+      >
+        <Icon :name="share.icon" size="40" />
+        <div class="font-body-large text-gray">
+          {{ share.label }}
+        </div>
+      </div>
+      <div
+        class="flex flex-col gap-[4px] items-center cursor-pointer w-[73px]"
+        @click="onCopyLink"
+      >
+        <ShadAvatar size="40">
+          <Icon name="fa6-solid:link" size="40" />
+        </ShadAvatar>
+        <div class="font-body-large text-gray text-nowrap">คัดลอกลิงค์</div>
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-user-account-list.vue

@@ -1,33 +1,33 @@
 <template>
-  <Modal title="เลือกวิธีตรวจสอบ" v-model="modelValue">
-    <template v-for="(item, index) in props.items" :key="index">
-      <div class="py-[12px] px-[16px]">
-        <InputRadio :item="item.value" label-position="left" v-model="selected">
-          <template v-slot:[`label-${item.value}-text`]>
-            <div
-              class="flex flex-col w-full text-gray font-body-medium-prominent"
-            >
-              <div v-if="item.type === 'email'">ส่งรหัสไปทางอีเมล</div>
-              <div v-else-if="item.type === 'phone'">ส่งรหัสไปทาง SMS</div>
-              <div>{{ item.label }}</div>
-            </div>
-          </template>
-        </InputRadio>
-      </div>
-      <Divider v-if="index !== props.items.length - 1" />
-    </template>
-
-    <template #footer>
-      <Button
-        color="primary"
-        full-width
-        @click="onConfirm"
-        :disabled="!selected"
-      >
-        ยืนยัน
-      </Button>
-    </template>
-  </Modal>
+  <Modal title="เลือกวิธีตรวจสอบ" v-model="modelValue">
+    <template v-for="(item, index) in props.items" :key="index">
+      <div class="py-[12px] px-[16px]">
+        <InputRadio :item="item.value" label-position="left" v-model="selected">
+          <template v-slot:[`label-${item.value}-text`]>
+            <div
+              class="flex flex-col w-full text-gray font-body-medium-prominent"
+            >
+              <div v-if="item.type === 'email'">ส่งรหัสไปทางอีเมล</div>
+              <div v-else-if="item.type === 'phone'">ส่งรหัสไปทาง SMS</div>
+              <div>{{ item.label }}</div>
+            </div>
+          </template>
+        </InputRadio>
+      </div>
+      <Divider v-if="index !== props.items.length - 1" />
+    </template>
+
+    <template #footer>
+      <Button
+        color="primary"
+        full-width
+        @click="onConfirm"
+        :disabled="!selected"
+      >
+        ยืนยัน
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-user-account-search.vue

@@ -1,28 +1,28 @@
 <template>
-  <Modal title="ค้นหาบัญชีของคุณ" v-model="modelValue">
-    <div class="flex flex-col gap-[16px]">
-      <div class="font-body-large text-2xl text-center px-[50px]">
-        ป้อนเบอร์โทรศัพท์ที่เชื่อมโยงกับบัญชีของคุณ เพื่อเปลี่ยนรหัสผ่าน
-      </div>
-      <InputPhone
-        label="เบอร์โทรศัพท์"
-        placeholder="กรอกเบอร์โทรศัพท์"
-        v-model="phone"
-        full-width
-      />
-      <InputRecaptcha ref="recaptchaRef" name="recaptcha" v-model="recaptcha" />
-    </div>
-    <template #footer>
-      <Button
-        full-width
-        variant="primary"
-        :disabled="!phone || !recaptcha"
-        @click="onNext"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal title="ค้นหาบัญชีของคุณ" v-model="modelValue">
+    <div class="flex flex-col gap-[16px]">
+      <div class="font-body-large text-2xl text-center px-[50px]">
+        ป้อนเบอร์โทรศัพท์ที่เชื่อมโยงกับบัญชีของคุณ เพื่อเปลี่ยนรหัสผ่าน
+      </div>
+      <InputPhone
+        label="เบอร์โทรศัพท์"
+        placeholder="กรอกเบอร์โทรศัพท์"
+        v-model="phone"
+        full-width
+      />
+      <InputRecaptcha ref="recaptchaRef" name="recaptcha" v-model="recaptcha" />
+    </div>
+    <template #footer>
+      <Button
+        full-width
+        variant="primary"
+        :disabled="!phone || !recaptcha"
+        @click="onNext"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal.vue

@@ -1,31 +1,31 @@
 <template>
-  <ShadDialog v-model:open="isOpen">
-    <ShadDialogContent
-      :class="props.class"
-      :disabled-close-btn="props.disabledCloseBtn"
-      v-slot="{ meta }"
-      @submit="onSubmit"
-    >
-      <ShadDialogHeader>
-        <slot name="header">
-          <ShadDialogTitle>
-            <slot name="title">
-              {{ props.title }}
-            </slot>
-          </ShadDialogTitle>
-          <ShadDialogDescription>
-            <slot name="description">
-              {{ props.description }}
-            </slot>
-          </ShadDialogDescription>
-        </slot>
-      </ShadDialogHeader>
-      <slot name="default" :meta="meta" />
-      <ShadDialogFooter>
-        <slot name="footer" :meta="meta" />
-      </ShadDialogFooter>
-    </ShadDialogContent>
-  </ShadDialog>
+  <ShadDialog v-model:open="isOpen">
+    <ShadDialogContent
+      :class="props.class"
+      :disabled-close-btn="props.disabledCloseBtn"
+      v-slot="{ meta }"
+      @submit="onSubmit"
+    >
+      <ShadDialogHeader>
+        <slot name="header">
+          <ShadDialogTitle>
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </ShadDialogTitle>
+          <ShadDialogDescription>
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </ShadDialogDescription>
+        </slot>
+      </ShadDialogHeader>
+      <slot name="default" :meta="meta" />
+      <ShadDialogFooter>
+        <slot name="footer" :meta="meta" />
+      </ShadDialogFooter>
+    </ShadDialogContent>
+  </ShadDialog>
 </template>
 
 <script setup>

package/dist/runtime/components/pagination.vue

@@ -1,47 +1,47 @@
 <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>