pukaad-ui-lib 1.282.0 → 1.282.2

package/dist/runtime/components/modal/modal-phone-OTP.vue

@@ -1,53 +1,53 @@
 <template>
-  <Modal
-    title="ป้อนรหัสรักษาความปลอดภัย (OTP)"
-    @close="emit('close')"
-    @submit="onVerifyOTP"
-    v-model="isOpen"
-  >
-    <div class="space-y-[16px]">
-      <div class="text-center font-body-large">
-        <div>
-          ส่งรหัส 6 หลักไปที่เบอร์โทรศัพท์
-          <span>{{ props.phoneLabel || props.phone }}</span>
-        </div>
-        <div v-if="textRef">(Ref : {{ textRef }})</div>
-      </div>
-
-      <div class="flex justify-center">
-        <InputOTP
-          name="otp"
-          columnGap="auto"
-          v-model="valueOTP"
-          :error="otpError"
-        />
-      </div>
-
-      <div class="text-center font-body-large">
-        <template v-if="countdown !== '00:00'">
-          กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
-          จะส่งรหัสยืนยันอีกครั้ง
-        </template>
-        <template v-else>
-          ไม่ได้รับรหัส?
-          <Button variant="link" color="primary" @click="onResend"
-            >ส่งรหัสอีกครั้ง</Button
-          >
-        </template>
-      </div>
-    </div>
-
-    <template #footer="{ meta }">
-      <Button
-        type="submit"
-        color="primary"
-        :disabled="!meta.valid || isLoading"
-        class="w-full"
-      >
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    title="ป้อนรหัสรักษาความปลอดภัย (OTP)"
+    @close="emit('close')"
+    @submit="onVerifyOTP"
+    v-model="isOpen"
+  >
+    <div class="space-y-[16px]">
+      <div class="text-center font-body-large">
+        <div>
+          ส่งรหัส 6 หลักไปที่เบอร์โทรศัพท์
+          <span>{{ props.phoneLabel || props.phone }}</span>
+        </div>
+        <div v-if="textRef">(Ref : {{ textRef }})</div>
+      </div>
+
+      <div class="flex justify-center">
+        <InputOTP
+          name="otp"
+          columnGap="auto"
+          v-model="valueOTP"
+          :error="otpError"
+        />
+      </div>
+
+      <div class="text-center font-body-large">
+        <template v-if="countdown !== '00:00'">
+          กรุณารอ <span class="text-primary">{{ countdown }}</span> นาที
+          จะส่งรหัสยืนยันอีกครั้ง
+        </template>
+        <template v-else>
+          ไม่ได้รับรหัส?
+          <Button variant="link" color="primary" @click="onResend"
+            >ส่งรหัสอีกครั้ง</Button
+          >
+        </template>
+      </div>
+    </div>
+
+    <template #footer="{ meta }">
+      <Button
+        type="submit"
+        color="primary"
+        :disabled="!meta.valid || isLoading"
+        class="w-full"
+      >
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-profile-edit.vue

@@ -1,78 +1,76 @@
 <template>
-  <Modal class="w-[425px]" title="โปรไฟล์" @close="onClose" v-model="modelValue">
-    <template #header>
-      <div v-if="step !== 'menu'" class="flex flex-col gap-[8px]">
-        <div class="flex gap-[8px] items-center w-full">
-          <Button variant="text" @click="step = 'menu'">
-            <Icon name="lucide:chevron-left" :size="24" />
-          </Button>
-          <div class="font-title-medium-prominent">
-            <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
-            <div v-if="step === 'category'">หมวดหมู่</div>
-          </div>
-        </div>
-        <div v-if="step === 'profile-name'" class="font-body-large">
-          หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
-          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
-        </div>
-        <div v-if="step === 'category'" class="font-body-large">
-          เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์
-        </div>
-      </div>
-      <div v-if="step === 'menu'" class="flex flex-col gap-[8px]">
-        <div class="font-title-medium-prominent">โปรไฟล์</div>
-        <div class="font-body-large">
-          จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ และการเข้าถึงโปรไฟล์
-          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
-        </div>
-      </div>
-    </template>
-
-    <div v-if="step === 'menu'" class="flex flex-col gap-[16px]">
-      <div class="flex flex-col gap-[4px]">
-        <template v-for="(menu, i) in listMenu" :key="menu.label">
+  <Modal class="w-[425px]" title="โปรไฟล์" @close="onClose" v-model="modelValue">
+    <template #header>
+      <div v-if="step !== 'menu'" class="flex flex-col gap-[8px]">
+        <div class="flex gap-[8px] items-center w-full">
+          <Button variant="text" @click="step = 'menu'">
+            <Icon name="lucide:chevron-left" :size="24" />
+          </Button>
+          <div class="font-title-medium-prominent">
+            <div v-if="step === 'profile-name'">แก้ไขชื่อโปรไฟล์</div>
+            <div v-if="step === 'category'">หมวดหมู่</div>
+          </div>
+        </div>
+        <div v-if="step === 'profile-name'" class="font-body-large">
+          หากคุณเปลี่ยนชื่อ คุณจะไม่สามารถเปลี่ยนชื่อได้อีกเป็นเวลา 60 วัน
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
+        <div v-if="step === 'category'" class="font-body-large">
+          เลือกหมวดหมู่ที่สอดคล้องกับโปรไฟล์
+        </div>
+      </div>
+      <div v-if="step === 'menu'" class="flex flex-col gap-[8px]">
+        <div class="font-title-medium-prominent">โปรไฟล์</div>
+        <div class="font-body-large">
+          จัดการชื่อโปรไฟล์และชื่อผู้ใช้ของคุณสำหรับการแสดงผลในระบบ และการเข้าถึงโปรไฟล์
+          <Button variant="link" color="primary" @click="goToHelpCenter">เรียนรู้เพิ่มเติม</Button>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="step === 'menu'" class="flex flex-col gap-[16px]">
+      <div class="flex flex-col gap-[4px]">
+        <template v-for="(menu, i) in listMenu" :key="menu.label">
           <div @click="handleMenuClick(menu)" :class="[
   'flex justify-between items-center',
   isMenuClickable(menu) ? 'cursor-pointer ' : ''
-]">
-            <div class="flex flex-col w-full">
-              <div class="font-body-large-prominent">{{ menu.label }}</div>
-              <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
-            </div>
-            <Icon v-if="isMenuClickable(menu)" name="lucide:chevron-right" :size="24" class="text-black" />
-          </div>
-          <Divider v-if="i < listMenu.length - 1" />
-        </template>
-      </div>
-    </div>
-
-    <div v-else class="flex flex-col gap-[16px]">
-      <template v-if="step === 'profile-name'">
-        <Form v-slot="{ meta }" class="flex flex-col gap-[16px]" @submit="saveProfileName">
-          <InputProfileName 
-            name="profileName" 
-            label="ชื่อโปรไฟล์" 
-            :placeholder="listMenu[0]?.value || '-'" 
-            v-model="profileName" 
-          />
-          <Button type="submit" color="primary" full-width :disabled="!meta.valid || isLoading">
-            <span v-if="isLoading">กำลังบันทึก...</span>
-            <span v-else>บันทึก</span>
-          </Button>
-        </Form>
-      </template>
-
-
-
-      <template v-if="step === 'category'">
-        <div class="flex flex-col gap-[16px]">
-          <InputAutocomplete v-model="profileCategory" :options="profileCategoryItems" name="profileCategory"
-            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง" label="หมวดหมู่" />
-          <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
-        </div>
-      </template>
-    </div>
-  </Modal>
+]">
+            <div class="flex flex-col w-full">
+              <div class="font-body-large-prominent">{{ menu.label }}</div>
+              <div class="font-body-large text-gray">{{ menu.value || "-" }}</div>
+            </div>
+            <Icon v-if="isMenuClickable(menu)" name="lucide:chevron-right" :size="24" class="text-black" />
+          </div>
+          <Divider v-if="i < listMenu.length - 1" />
+        </template>
+      </div>
+    </div>
+
+    <div v-else class="flex flex-col gap-[16px]">
+      <template v-if="step === 'profile-name'">
+        <Form v-slot="{ meta }" class="flex flex-col gap-[16px]" @submit="saveProfileName">
+          <InputProfileName 
+            name="profileName" 
+            label="ชื่อโปรไฟล์" 
+            :placeholder="listMenu[0]?.value || '-'" 
+            v-model="profileName" 
+          />
+          <Button type="submit" color="primary" full-width :disabled="!meta.valid || isLoading">
+            <span v-if="isLoading">กำลังบันทึก...</span>
+            <span v-else>บันทึก</span>
+          </Button>
+        </Form>
+      </template>
+
+      <template v-if="step === 'category'">
+        <div class="flex flex-col gap-[16px]">
+          <InputAutocomplete v-model="profileCategory" :options="profileCategoryItems" name="profileCategory"
+            placeholder="ค้นหาหรือเลือกหมวดหมู่ที่เกี่ยวข้อง" label="หมวดหมู่" />
+          <Button color="primary" :disabled="!profileCategory">บันทึก</Button>
+        </div>
+      </template>
+    </div>
+  </Modal>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/modal-province-domain.vue

@@ -1,27 +1,27 @@
 <template>
-  <Modal
-    title="เลือกจังหวัดที่คุณต้องการใช้งาน"
-    :column-gap="24"
-    v-model="modelValue"
-  >
-    <div class="flex flex-col gap-[16px] w-full">
-      <div class="flex flex-col font-body-large text-center">
-        <div>เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ</div>
-        <div>เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง</div>
-      </div>
-      <InputAutocomplete
-        :items="provinces"
-        full-width
-        placeholder="เลือกจังหวัด"
-        v-model="selected"
-      />
-    </div>
-    <template #footer>
-      <Button full-width color="primary" :disabled="!selected" @click="onNext">
-        {{ props.confirmedText }}
-      </Button>
-    </template>
-  </Modal>
+  <Modal
+    title="เลือกจังหวัดที่คุณต้องการใช้งาน"
+    :column-gap="24"
+    v-model="modelValue"
+  >
+    <div class="flex flex-col gap-[16px] w-full">
+      <div class="flex flex-col font-body-large text-center">
+        <div>เลือกจังหวัดที่คุณต้องการจัดการข้อมูลธุรกิจ</div>
+        <div>เพื่อให้เข้าถึงเครื่องมือและข้อมูลในพื้นที่ได้ถูกต้อง</div>
+      </div>
+      <InputAutocomplete
+        :items="provinces"
+        full-width
+        placeholder="เลือกจังหวัด"
+        v-model="selected"
+      />
+    </div>
+    <template #footer>
+      <Button full-width color="primary" :disabled="!selected" @click="onNext">
+        {{ props.confirmedText }}
+      </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,51 +1,51 @@
 <template>
-  <Modal
-    :title="title"
-    :loading="props.loading"
-    @close="onCancel"
-    @submit="onSendReport"
-    v-model="modelValue"
-    class="w-[512px]"
-  >
-    <div class="flex flex-col">
-      <div
-        v-for="(item, i) in items"
-        :key="i"
-        class="flex flex-col border-bright px-[8px] py-[6px] border-b"
-      >
-        <InputRadio
-          name="report_value"
-          :label="item[0]?.label"
-          :items="item"
-          v-model="formState.report_value"
-        />
-        <div
-          v-show="formState.report_value === item[0]?.value"
-        >
-          <InputTextarea
-            name="report_detail"
-            rows="4"
-            height-scroll
-            placeholder="คำอธิบายประกอบการรายงาน"
-            v-model="formState.report_detail"
-          />
-        </div>
-      </div>
-    </div>
-    <template #footer>
-        <Button class="w-full" variant="outline" type="button" @click="onCancel">
-          ยกเลิก
-        </Button>
-        <Button
-          class="w-full"
-          type="submit"
-          color="primary"
-          :disabled="formState.report_value === ''"
-        >
-          ส่ง
-        </Button>
-    </template>
-  </Modal>
+  <Modal
+    :title="title"
+    :loading="props.loading"
+    @close="onCancel"
+    @submit="onSendReport"
+    v-model="modelValue"
+    class="w-[512px]"
+  >
+    <div class="flex flex-col">
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="flex flex-col border-bright px-[8px] py-[6px] border-b"
+      >
+        <InputRadio
+          name="report_value"
+          :label="item[0]?.label"
+          :items="item"
+          v-model="formState.report_value"
+        />
+        <div
+          v-show="formState.report_value === item[0]?.value"
+        >
+          <InputTextarea
+            name="report_detail"
+            rows="4"
+            height-scroll
+            placeholder="คำอธิบายประกอบการรายงาน"
+            v-model="formState.report_detail"
+          />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+        <Button class="w-full" variant="outline" type="button" @click="onCancel">
+          ยกเลิก
+        </Button>
+        <Button
+          class="w-full"
+          type="submit"
+          color="primary"
+          :disabled="formState.report_value === ''"
+        >
+          ส่ง
+        </Button>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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>