pukaad-ui-lib 1.21.1 → 1.23.0

package/dist/runtime/components/data-table.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { ref, computed } from "vue";
+import {
+  Table as ShadTable,
+  TableHeader as ShadTableHeader,
+  TableBody as ShadTableBody,
+  TableRow as ShadTableRow,
+  TableHead as ShadTableHead,
+  TableCell as ShadTableCell,
+  TableEmpty as ShadTableEmpty
+} from "@/runtime/components/ui/table";
+const emit = defineEmits(["select-page", "change-page", "click-row", "change-item-per-page"]);
+const props = defineProps({
+  items: { type: Array, required: false, default: () => [] },
+  itemHeader: { type: Array, required: false, default: () => [] },
+  headerAlinement: { type: String, required: false, default: "start" },
+  cellAlinement: { type: String, required: false, default: "start" },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  fullHeight: { type: Boolean, required: false, default: false },
+  disabledHeader: { type: Boolean, required: false, default: false },
+  disabledSort: { type: Boolean, required: false, default: false },
+  disabledPagination: { type: Boolean, required: false, default: false },
+  totalPage: { type: Number, required: false, default: 1 }
+});
+const page = defineModel("page", { type: Number, ...{
+  default: 1
+} });
+const sortkey = ref("");
+const sortDesc = ref(false);
+const itemHeaders = computed(() => {
+  if (props.itemHeader.length > 0) return props.itemHeader;
+  if (props.items.length === 0) return [];
+  const header = Object.keys(props.items[0] || {}).map(
+    (key) => ({
+      label: key,
+      key,
+      sort: true
+    })
+  );
+  return header;
+});
+const sortedItems = computed(() => {
+  return props.items.slice().sort((a, b) => {
+    if (!sortkey.value) return 0;
+    const valueA = a[sortkey.value];
+    const valueB = b[sortkey.value];
+    if (valueA === valueB) return 0;
+    const comparison = valueA > valueB ? 1 : -1;
+    return sortDesc.value ? -comparison : comparison;
+  });
+});
+const onSortBy = (key) => {
+  if (sortkey.value === key) {
+    sortDesc.value = !sortDesc.value;
+  } else {
+    sortkey.value = key;
+    sortDesc.value = false;
+  }
+};
+const getAlignmentClass = (alignment = "start") => {
+  const alignmentClasses = {
+    start: "text-left",
+    center: "text-center",
+    end: "text-right"
+  };
+  return alignmentClasses[alignment];
+};
+</script>
+
+<template>
+  <div class="bg-white rounded-lg h-full flex flex-col">
+    <!-- Table Container -->
+    <div
+      class="flex-1 overflow-auto"
+      :style="{
+  height: props.fullHeight ? '100%' : props.height ? `${props.height}px` : 'auto',
+  maxHeight: props.maxHeight ? `${props.maxHeight}px` : void 0
+}"
+    >
+      <ShadTable>
+        <!-- Header -->
+        <ShadTableHeader v-if="!props.disabledHeader">
+          <slot name="header" :item="props.itemHeader">
+            <ShadTableRow>
+              <ShadTableHead
+                v-for="(header, i) in itemHeaders"
+                :key="i"
+                :class="
+  getAlignmentClass(header.alinement || props.headerAlinement)
+"
+              >
+                <div class="flex items-center gap-2">
+                  <span>{{ header.label }}</span>
+                  <button
+                    v-if="header.sort !== false && !props.disabledSort"
+                    type="button"
+                    :class="[
+  'flex items-center justify-center cursor-pointer hover:text-primary transition-colors',
+  sortkey === header.key && 'text-primary'
+]"
+                    @click="onSortBy(header.key)"
+                  >
+                    <Icon name="fa6-solid:sort" size="14" />
+                  </button>
+                </div>
+              </ShadTableHead>
+            </ShadTableRow>
+          </slot>
+        </ShadTableHeader>
+
+        <!-- Body -->
+        <slot name="body" :items="sortedItems" :header="itemHeaders">
+          <ShadTableBody>
+            <template v-if="sortedItems.length > 0">
+              <ShadTableRow
+                v-for="(item, i_body) in sortedItems"
+                :key="i_body"
+                class="cursor-pointer"
+                @click="emit('click-row', item, i_body)"
+              >
+                <slot
+                  name="item"
+                  :item="item"
+                  :header="itemHeaders"
+                  :index="i_body"
+                >
+                  <ShadTableCell
+                    v-for="(header, i_header) in itemHeaders"
+                    :key="i_header"
+                    :class="
+  getAlignmentClass(header.alinement || props.cellAlinement)
+"
+                  >
+                    <slot :name="`item-${header.key}`" :item="item">
+                      {{ item[header.key] }}
+                    </slot>
+                  </ShadTableCell>
+                </slot>
+              </ShadTableRow>
+            </template>
+
+            <!-- Empty State -->
+            <template v-else>
+              <slot name="empty">
+                <ShadTableEmpty :colspan="itemHeaders?.length || 1">
+                  <slot name="empty-content" />
+                </ShadTableEmpty>
+              </slot>
+            </template>
+          </ShadTableBody>
+        </slot>
+      </ShadTable>
+    </div>
+
+    <!-- Pagination -->
+    <div
+      v-if="sortedItems.length > 0 && !props.disabledPagination"
+      class="p-4 flex justify-center items-center border-t"
+    >
+      <Pagination
+        :totalPage="props.totalPage"
+        v-model="page"
+        @change-item-per-page="
+  (val) => emit('change-item-per-page', val)
+"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/data-table.vue.d.ts

@@ -0,0 +1,76 @@
+import type { TableHeader, TableHeaderAlignment } from "@/types/components/table";
+export interface DataTableProps {
+    items?: Record<string, any>[];
+    itemHeader?: TableHeader[];
+    headerAlinement?: TableHeaderAlignment;
+    cellAlinement?: TableHeaderAlignment;
+    height?: number | string;
+    maxHeight?: number | string;
+    fullHeight?: boolean;
+    disabledHeader?: boolean;
+    disabledSort?: boolean;
+    disabledPagination?: boolean;
+    totalPage?: number;
+}
+type __VLS_Props = DataTableProps;
+type __VLS_ModelProps = {
+    "page"?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_11: {
+    item: TableHeader[];
+}, __VLS_28: {
+    items: any;
+    header: any;
+}, __VLS_43: {
+    item: any;
+    header: any;
+    index: number;
+}, __VLS_51: `item-${any}`, __VLS_52: {
+    item: any;
+}, __VLS_54: {}, __VLS_61: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_51>]?: (props: typeof __VLS_52) => any;
+} & {
+    header?: (props: typeof __VLS_11) => any;
+} & {
+    body?: (props: typeof __VLS_28) => any;
+} & {
+    item?: (props: typeof __VLS_43) => any;
+} & {
+    empty?: (props: typeof __VLS_54) => any;
+} & {
+    'empty-content'?: (props: typeof __VLS_61) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:page": (value: number) => any;
+} & {
+    "select-page": (value: number) => any;
+    "change-page": (value: number) => any;
+    "click-row": (item: Record<string, any>, index: number) => any;
+    "change-item-per-page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onSelect-page"?: ((value: number) => any) | undefined;
+    "onChange-page"?: ((value: number) => any) | undefined;
+    "onClick-row"?: ((item: Record<string, any>, index: number) => any) | undefined;
+    "onChange-item-per-page"?: ((value: number) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+}>, {
+    items: Record<string, any>[];
+    fullHeight: boolean;
+    itemHeader: TableHeader[];
+    headerAlinement: TableHeaderAlignment;
+    cellAlinement: TableHeaderAlignment;
+    disabledHeader: boolean;
+    disabledSort: boolean;
+    disabledPagination: boolean;
+    totalPage: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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.d.vue.ts

@@ -7,12 +7,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    complete: () => any;
     close: () => any;
+    complete: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onComplete?: (() => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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-email-OTP.vue.d.ts

@@ -7,12 +7,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    complete: () => any;
     close: () => any;
+    complete: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onComplete?: (() => any) | undefined;
 }>, {
     confirmedText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -7,12 +7,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    complete: (value: string) => any;
     close: () => any;
+    complete: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: string) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
 }>, {
     confirmedText: string;
     phone: string;

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/dialog/dialog-phone-OTP.vue.d.ts

@@ -7,12 +7,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    complete: (value: string) => any;
     close: () => any;
+    complete: (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onComplete?: ((value: string) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
 }>, {
     confirmedText: string;
     phone: string;

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.d.vue.ts

@@ -2,7 +2,11 @@ type __VLS_Props = {
     items?: string[];
     limit?: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((...args: any[]) => any) | undefined;
+}>, {
     limit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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>