pukaad-ui-lib 1.0.1 → 1.2.0

package/dist/runtime/components/dialog/dialog-2FA-generate.vue

@@ -1,62 +1,62 @@
 <template>
-  <ShadDialog v-model:open="isOpen">
-    <ShadDialogContent class="w-[540px]">
-      <ShadDialogHeader class="flex justify-center">
-        <ShadDialogTitle class="text-center">คำแนะนำการตั้งค่า</ShadDialogTitle>
-      </ShadDialogHeader>
-      <div class="flex flex-col gap-[16px]">
-        <div class="flex flex-col gap-[8px] text-gray font-body-large">
-          <div class="font-body-large-prominent text-black">
-            1.ดาวน์โหลดแอพยืนยันตัวตน
-          </div>
-          <div>
-            เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
-          </div>
-        </div>
-        <div class="flex flex-col gap-[8px] text-gray font-body-large">
-          <div class="font-body-large-prominent text-black">
-            2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
-          </div>
-          <div>
-            สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
-            ยืนยันตัวตน
-          </div>
-        </div>
-        <div class="flex justify-center items-center">
-          <div class="flex items-center gap-[32px]">
-            <Image width="146" height="145" :src="barcode2FA" />
-            <div class="w-[168px] gap-[8px] flex flex-col justify-between">
-              <div class="font-body-large-prominent">
-                {{ key }}
-              </div>
-              <div
-                class="cursor-pointer text-primary font-body-large"
-                @click="copyToClipboard(key)"
-              >
-                คัดลอกคีย์
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex flex-col gap-[8px] text-gray font-body-large">
-          <div class="font-body-large-prominent text-black">
-            3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
-          </div>
-          <div>
-            หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
-            แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
-            ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
-          </div>
-        </div>
-      </div>
-
-      <ShadDialogFooter>
-        <Button class="w-full" @click="onComplete">
-          {{ props.confirmedText }}
-        </Button>
-      </ShadDialogFooter>
-    </ShadDialogContent>
-  </ShadDialog>
+  <ShadDialog v-model:open="isOpen">
+    <ShadDialogContent class="w-[540px]">
+      <ShadDialogHeader class="flex justify-center">
+        <ShadDialogTitle class="text-center">คำแนะนำการตั้งค่า</ShadDialogTitle>
+      </ShadDialogHeader>
+      <div class="flex flex-col gap-[16px]">
+        <div class="flex flex-col gap-[8px] text-gray font-body-large">
+          <div class="font-body-large-prominent text-black">
+            1.ดาวน์โหลดแอพยืนยันตัวตน
+          </div>
+          <div>
+            เราแนะนำให้ดาวน์โหลด Google Authenticator หากคุณยังไม่ได้ติดตั้ง
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] text-gray font-body-large">
+          <div class="font-body-large-prominent text-black">
+            2.สแกนบาร์โค้ด/คิวอาร์โค้ดนี้หรือคัดลอกคีย์
+          </div>
+          <div>
+            สแกนบาร์โค้ด/คิวอาร์โค้ดนี้ในแอพยืนยันตัวตนหรือคัดลอกคีย์แล้ววางลงในแอพ
+            ยืนยันตัวตน
+          </div>
+        </div>
+        <div class="flex justify-center items-center">
+          <div class="flex items-center gap-[32px]">
+            <Image width="146" height="145" :src="barcode2FA" />
+            <div class="w-[168px] gap-[8px] flex flex-col justify-between">
+              <div class="font-body-large-prominent">
+                {{ key }}
+              </div>
+              <div
+                class="cursor-pointer text-primary font-body-large"
+                @click="copyToClipboard(key)"
+              >
+                คัดลอกคีย์
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] text-gray font-body-large">
+          <div class="font-body-large-prominent text-black">
+            3.คัดลอกแล้วป้อนรหัสตัวเลข 6 หลัก
+          </div>
+          <div>
+            หลังจากสแกนบาร์โค้ด/คิวอาร์โค้ด หรือคัดลอกคีย์แล้ว
+            แอพยืนยันตัวตนจะสร้าง รหัสตัวเลข 6 หลัก
+            ให้คัดลอกรหัสนั้นแล้วกลับมาป้อนบน Pukaad
+          </div>
+        </div>
+      </div>
+
+      <ShadDialogFooter>
+        <Button class="w-full" @click="onComplete">
+          {{ props.confirmedText }}
+        </Button>
+      </ShadDialogFooter>
+    </ShadDialogContent>
+  </ShadDialog>
 </template>
 
 <script setup>

package/dist/runtime/components/dialog/dialog-2FA.vue

@@ -1,24 +1,24 @@
 <template>
-  <Dialog v-model:open="isOpen">
-    <DialogContent class="w-[425px]">
-      <Form v-slot="{ meta }" @submit="onVerify2FA">
-        <div class="flex flex-col gap-[24px]">
-          <DialogHeader class="flex justify-center">
-            <ShadDialogTitle>การยืนยันตัวตนแบบสองชั้น</ShadDialogTitle>
-            <DialogDescription>
-              ป้อนรหัสยืนยันที่คุณเห็นในแอปยืนยันตัวตน
-            </DialogDescription>
-          </DialogHeader>
-          <InputOTP ref="twoFaRef" v-model="valueOTP" />
-          <DialogFooter>
-            <Button class="w-full" type="submit" :disabled="!meta.valid">
-              {{ props.confirmedText }}
-            </Button>
-          </DialogFooter>
-        </div>
-      </Form>
-    </DialogContent>
-  </Dialog>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="w-[425px]">
+      <Form v-slot="{ meta }" @submit="onVerify2FA">
+        <div class="flex flex-col gap-[24px]">
+          <DialogHeader class="flex justify-center">
+            <ShadDialogTitle>การยืนยันตัวตนแบบสองชั้น</ShadDialogTitle>
+            <DialogDescription>
+              ป้อนรหัสยืนยันที่คุณเห็นในแอปยืนยันตัวตน
+            </DialogDescription>
+          </DialogHeader>
+          <InputOTP ref="twoFaRef" v-model="valueOTP" />
+          <DialogFooter>
+            <Button class="w-full" type="submit" :disabled="!meta.valid">
+              {{ props.confirmedText }}
+            </Button>
+          </DialogFooter>
+        </div>
+      </Form>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup>

package/dist/runtime/components/dialog/dialog-email-OTP.vue

@@ -1,30 +1,30 @@
 <template>
-  <Dialog v-model:open="isOpen">
-    <DialogContent class="w-[425px]">
-      <div>
-        <Form v-slot="{ meta }" @submit="onVerifyOTP">
-          <DialogHeader>
-            <ShadDialogTitle>รหัสยืนยันตัวตน</ShadDialogTitle>
-            <DialogDescription class="gap-[8px]">
-              ป้อนรหัส 6 หลักที่ส่งไปยังอีเมล <span>{{ props.email }}</span>
-              <span v-if="textRef">(Ref : {{ textRef }})</span>
-            </DialogDescription>
-          </DialogHeader>
-
-          <div class="flex flex-col gap-[8px] font-body-large">
-            <InputOTP ref="otpInputRef" v-model="valueOTP" />
-           
-          </div>
-
-          <DialogFooter>
-            <Button class="w-full" type="submit" :disabled="!meta.valid">
-              {{ props.confirmedText }}
-            </Button>
-          </DialogFooter>
-        </Form>
-      </div>
-    </DialogContent>
-  </Dialog>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="w-[425px]">
+      <div>
+        <Form v-slot="{ meta }" @submit="onVerifyOTP">
+          <DialogHeader>
+            <ShadDialogTitle>รหัสยืนยันตัวตน</ShadDialogTitle>
+            <DialogDescription class="gap-[8px]">
+              ป้อนรหัส 6 หลักที่ส่งไปยังอีเมล <span>{{ props.email }}</span>
+              <span v-if="textRef">(Ref : {{ textRef }})</span>
+            </DialogDescription>
+          </DialogHeader>
+
+          <div class="flex flex-col gap-[8px] font-body-large">
+            <InputOTP ref="otpInputRef" v-model="valueOTP" />
+           
+          </div>
+
+          <DialogFooter>
+            <Button class="w-full" type="submit" :disabled="!meta.valid">
+              {{ props.confirmedText }}
+            </Button>
+          </DialogFooter>
+        </Form>
+      </div>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup>

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

@@ -1,29 +1,29 @@
 <template>
-  <Dialog v-model:open="isOpen">
-    <Form v-slot="{ meta }" @submit="onVerifyOTP">
-      <DialogContent class="w-[425px]">
-        <DialogHeader>
-          <ShadDialogTitle>ป้อนรหัสรักษาความปลอดภัย (OTP)</ShadDialogTitle>
-          <DialogDescription class="gap-[8px]">
-            ส่งรหัส 6 หลักไปที่เบอร์
-            <span>{{ props.phoneLabel || props.phone }}</span>
-            <div v-if="textRef">(Ref : {{ textRef }})</div>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div class="flex flex-col gap-[8px] font-body-large">
-          <InputOTP ref="otpInputRef" v-model="valueOTP" />
-         
-        </div>
-
-        <DialogFooter>
-          <Button class="w-full" type="submit" :disabled="!meta.valid">
-            {{ props.confirmedText }}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Form>
-  </Dialog>
+  <Dialog v-model:open="isOpen">
+    <Form v-slot="{ meta }" @submit="onVerifyOTP">
+      <DialogContent class="w-[425px]">
+        <DialogHeader>
+          <ShadDialogTitle>ป้อนรหัสรักษาความปลอดภัย (OTP)</ShadDialogTitle>
+          <DialogDescription class="gap-[8px]">
+            ส่งรหัส 6 หลักไปที่เบอร์
+            <span>{{ props.phoneLabel || props.phone }}</span>
+            <div v-if="textRef">(Ref : {{ textRef }})</div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="flex flex-col gap-[8px] font-body-large">
+          <InputOTP ref="otpInputRef" v-model="valueOTP" />
+         
+        </div>
+
+        <DialogFooter>
+          <Button class="w-full" type="submit" :disabled="!meta.valid">
+            {{ props.confirmedText }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Form>
+  </Dialog>
 </template>
 
 <script setup>

package/dist/runtime/components/display/display-image-place.vue

@@ -1,4 +1,4 @@
-<template>
-  <div>asdasds</div>
-</template>
-<script setup lang="ts"></script>
+<template>
+  <div>asdasds</div>
+</template>
+<script setup lang="ts"></script>

package/dist/runtime/components/display/display-image-review.vue

@@ -1,20 +1,20 @@
 <template>
-  <div class="inline-flex gap-[8px]">
-    <div
-      v-for="(img, i_img) in props.items?.slice(0, props.limit)"
-      :key="i_img"
-      class="relative cursor-pointer"
-      @click="emit('select', i_img)"
-    >
-      <Image :src="img" :height="100" :width="100" class="rounded-[4px]" />
-      <div
-        v-if="props.limit === i_img + 1"
-        class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[4px]"
-      >
-        <div class="font-headline-medium">+{{ numberMore }}</div>
-      </div>
-    </div>
-  </div>
+  <div class="inline-flex gap-[8px]">
+    <div
+      v-for="(img, i_img) in props.items?.slice(0, props.limit)"
+      :key="i_img"
+      class="relative cursor-pointer"
+      @click="emit('select', i_img)"
+    >
+      <Image :src="img" :height="100" :width="100" class="rounded-[4px]" />
+      <div
+        v-if="props.limit === i_img + 1"
+        class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[4px]"
+      >
+        <div class="font-headline-medium">+{{ numberMore }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/display/display-image.vue

@@ -1,55 +1,55 @@
 <template>
-  <div
-    class="flex gap-[8px] max-w-[844px]"
+  <div
+    class="flex gap-[8px] max-w-[844px]"
     :style="{
   height: `${heightBox}px`
-}"
-  >
-    <div
-      v-if="props.items && props.items?.length <= 2"
-      v-for="(item, i_item) in props.items"
-      :key="i_item"
-      class="w-full flex justify-center bg-black rounded-[8px] cursor-pointer"
-      @click="onSelect(i_item)"
-    >
-      <Image :src="getSrc(item)" height="auto" />
-    </div>
-    <div v-else class="flex gap-[8px] w-full">
-      <div class="flex rounded-[8px] cursor-pointer" @click="onSelect(0)">
-        <Image
-          :src="getSrc((props.items ?? [])[0])"
-          class="rounded-[8px]"
-          width="720"
-          height="auto"
-        />
-      </div>
-      <div class="flex flex-col gap-[8px]">
-        <div
-          v-for="(item, i_item) in props.items?.slice(1, 5)"
-          :key="i_item"
-          class="relative cursor-pointer"
-          @click="onSelect(i_item + 1)"
-        >
-          <Image
-            :src="getSrc(item)"
-            class="rounded-[8px]"
-            :width="widthSubImg"
-            :height="heightSubImg"
-          />
-
-          <div
-            v-if="showMore && i_item === 3"
-            class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[8px]"
-          >
-            <div class="flex flex-col gap-[6px] items-center">
-              <Icon name="fa6-solid:image" size="48" />
-              <div class="font-body-large">รูปภาพ ({{ numberMore }})</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+}"
+  >
+    <div
+      v-if="props.items && props.items?.length <= 2"
+      v-for="(item, i_item) in props.items"
+      :key="i_item"
+      class="w-full flex justify-center bg-black rounded-[8px] cursor-pointer"
+      @click="onSelect(i_item)"
+    >
+      <Image :src="getSrc(item)" height="auto" />
+    </div>
+    <div v-else class="flex gap-[8px] w-full">
+      <div class="flex rounded-[8px] cursor-pointer" @click="onSelect(0)">
+        <Image
+          :src="getSrc((props.items ?? [])[0])"
+          class="rounded-[8px]"
+          width="720"
+          height="auto"
+        />
+      </div>
+      <div class="flex flex-col gap-[8px]">
+        <div
+          v-for="(item, i_item) in props.items?.slice(1, 5)"
+          :key="i_item"
+          class="relative cursor-pointer"
+          @click="onSelect(i_item + 1)"
+        >
+          <Image
+            :src="getSrc(item)"
+            class="rounded-[8px]"
+            :width="widthSubImg"
+            :height="heightSubImg"
+          />
+
+          <div
+            v-if="showMore && i_item === 3"
+            class="absolute top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center text-white rounded-[8px]"
+          >
+            <div class="flex flex-col gap-[6px] items-center">
+              <Icon name="fa6-solid:image" size="48" />
+              <div class="font-body-large">รูปภาพ ({{ numberMore }})</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/divider.vue

@@ -1,23 +1,23 @@
 <template>
-  <div
+  <div
     :style="{
   paddingLeft: props.width && `${props.width}px`,
   paddingRight: props.width && `${props.width}px`,
   paddingTop: props.height && `${props.height}px`,
   paddingBottom: props.height && `${props.height}px`
-}"
-  >
-    <hr
-      :class="[props.alignment === 'vertical' ? 'h-full' : 'w-full']"
+}"
+  >
+    <hr
+      :class="[props.alignment === 'vertical' ? 'h-full' : 'w-full']"
       :style="{
   border: 0,
   borderLeft: props.alignment === 'vertical' ? `${props.size}px` : '',
   borderBottom: props.alignment === 'horizontal' ? `${props.size}px` : '',
   borderStyle: props.style,
   borderColor: color
-}"
-    />
-  </div>
+}"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/draggable.vue

@@ -1,17 +1,17 @@
 <template>
-  <div
-    v-for="(n, i) in items"
-    :key="i"
-    class="cursor-grab active:cursor-grabbing"
-    draggable="true"
-    @dragstart="onDragStart($event, i)"
-    @dragover.prevent="onDragOver($event, i)"
-    @dragend="onDragEnd($event, i)"
-    @dragenter.prevent
-    @dragleave.prevent
-  >
-    <slot name="item" :item="n" :index="i"></slot>
-  </div>
+  <div
+    v-for="(n, i) in items"
+    :key="i"
+    class="cursor-grab active:cursor-grabbing"
+    draggable="true"
+    @dragstart="onDragStart($event, i)"
+    @dragover.prevent="onDragOver($event, i)"
+    @dragend="onDragEnd($event, i)"
+    @dragenter.prevent
+    @dragleave.prevent
+  >
+    <slot name="item" :item="n" :index="i"></slot>
+  </div>
 </template>
 
 <script setup>