pukaad-ui-lib 1.21.1 → 1.22.2

package/dist/runtime/components/input/input-file.vue

@@ -1,87 +1,87 @@
 <template>
-  <div class="space-y-[4px]">
-    <div class="flex flex-wrap gap-[8px]">
-      <Draggable v-model="arrFiles">
-        <template #item="{ item, index }">
-          <div class="relative">
-            <video
-              v-if="item.type.startsWith('video')"
-              :src="createBlobUrl(item)"
-              class="rounded-[4px] object-cover w-[98px] h-[98px]"
-            />
-            <Image
-              v-else-if="item.type.startsWith('image')"
-              width="98"
-              height="98"
-              :src="createBlobUrl(item)"
-              class="rounded-[4px]"
-            />
-            <div
-              v-else
-              class="w-[98px] h-[98px] rounded-[4px] flex justify-center items-center"
-            >
-              <Icon
-                name="material-symbols:lab-profile-rounded"
-                size="34"
-              ></Icon>
-            </div>
-            <div
-              class="absolute top-[2px] right-[2px] p-[1px] w-[20px] h-[20px] bg-white rounded-full cursor-pointer flex justify-center items-center"
-              @click="onDeleteImage(index)"
-            >
-              <Icon name="gravity-ui:xmark" size="16"></Icon>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-
-      <label
-        v-if="props.limit == 0 || arrFiles.length < props.limit"
+  <div class="space-y-[4px]">
+    <div class="flex flex-wrap gap-[8px]">
+      <Draggable v-model="arrFiles">
+        <template #item="{ item, index }">
+          <div class="relative">
+            <video
+              v-if="item.type.startsWith('video')"
+              :src="createBlobUrl(item)"
+              class="rounded-[4px] object-cover w-[98px] h-[98px]"
+            />
+            <Image
+              v-else-if="item.type.startsWith('image')"
+              width="98"
+              height="98"
+              :src="createBlobUrl(item)"
+              class="rounded-[4px]"
+            />
+            <div
+              v-else
+              class="w-[98px] h-[98px] rounded-[4px] flex justify-center items-center"
+            >
+              <Icon
+                name="material-symbols:lab-profile-rounded"
+                size="34"
+              ></Icon>
+            </div>
+            <div
+              class="absolute top-[2px] right-[2px] p-[1px] w-[20px] h-[20px] bg-white rounded-full cursor-pointer flex justify-center items-center"
+              @click="onDeleteImage(index)"
+            >
+              <Icon name="gravity-ui:xmark" size="16"></Icon>
+            </div>
+          </div>
+        </template>
+      </Draggable>
+
+      <label
+        v-if="props.limit == 0 || arrFiles.length < props.limit"
         :class="[
   'relative flex flex-col gap-[4px] justify-center items-center cursor-pointer',
   'rounded-[4px] border-dashed',
   actionOnDrop
-]"
+]"
         :style="{
   width: props.fullWidth ? '100%' : props.width,
   height: props.fullHeight ? '100%' : props.height
-}"
-        @dragover.prevent="onDragOver"
-        @dragenter.prevent
-        @dragleave.prevent="onDragLeave"
-        @drop.prevent="onSelectFile"
-      >
-        <input
-          class="absolute w-full h-full cursor-pointer hidden"
-          type="file"
-          :accept="props.accept"
-          multiple
-          @change="onSelectFile"
-        />
-        <slot name="default" :label="label">
-          <div
-            class="flex flex-col gap-[4px] justify-center items-center w-[98px] h-[98px] rounded-[4px]"
-          >
-            <Icon
-              :class="isDrag ? 'text-primary' : 'text-gray'"
-              :name="labelIcon"
-              size="34"
-            ></Icon>
-            <div class="font-body-large">{{ `\u0E40\u0E1E\u0E34\u0E48\u0E21${label}` }}</div>
-          </div>
-        </slot>
-      </label>
-    </div>
-
-    <div
-      v-if="!props.disabledErrorMessage && errorMessage"
-      class="font-body-small text-error"
-    >
-      <slot name="error">
-        {{ errorMessage }}
-      </slot>
-    </div>
-  </div>
+}"
+        @dragover.prevent="onDragOver"
+        @dragenter.prevent
+        @dragleave.prevent="onDragLeave"
+        @drop.prevent="onSelectFile"
+      >
+        <input
+          class="absolute w-full h-full cursor-pointer hidden"
+          type="file"
+          :accept="props.accept"
+          multiple
+          @change="onSelectFile"
+        />
+        <slot name="default" :label="label">
+          <div
+            class="flex flex-col gap-[4px] justify-center items-center w-[98px] h-[98px] rounded-[4px]"
+          >
+            <Icon
+              :class="isDrag ? 'text-primary' : 'text-gray'"
+              :name="labelIcon"
+              size="34"
+            ></Icon>
+            <div class="font-body-large">{{ `\u0E40\u0E1E\u0E34\u0E48\u0E21${label}` }}</div>
+          </div>
+        </slot>
+      </label>
+    </div>
+
+    <div
+      v-if="!props.disabledErrorMessage && errorMessage"
+      class="font-body-small text-error"
+    >
+      <slot name="error">
+        {{ errorMessage }}
+      </slot>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -4,28 +4,28 @@ type __VLS_ModelProps = {
     modelValue?: Array<File>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_23: {
+declare var __VLS_22: {
     label: any;
-}, __VLS_30: {};
+}, __VLS_29: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_22) => any;
 } & {
-    error?: (props: typeof __VLS_30) => any;
+    error?: (props: typeof __VLS_29) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: File[]) => any;
 } & {
     select: (files: File[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
     onSelect?: ((files: File[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
 }>, {
     width: number | string;
     height: number | string;
     fullWidth: boolean;
     fullHeight: boolean;
-    name: string;
     label: string;
+    name: string;
     limit: number;
     disabledErrorMessage: boolean;
     accept: string;

package/dist/runtime/components/input/input-link.vue

@@ -1,43 +1,43 @@
 <template>
-  <div class="relative">
-    <div class="font-body-large-prominent text-gray">ช่องทางการติดต่อ</div>
-    <ul class="flex flex-col gap-[16px]">
-      <li
-        v-for="(link, i) in linkValue"
-        :key="i"
-        class="flex items-start gap-[8px] font-body-large"
-      >
-        <InputSelect
-          :name="`${props.name}[${i}]name`"
-          width="172"
-          :items="listOption"
-          @select="onSelectSocial(i)"
-          v-model="link.name"
-        />
-        <div class="flex-1">
-          <InputTextField
-            :name="`${props.name}[${i}]link`"
-            full-width
-            :placeholder="listSocial.find((f) => f.name === link.name)?.example"
-            :rules="(v) => rules(v, link.name)"
-            @change="onChangeLink(link, i)"
-            v-model="link.link"
-          />
-        </div>
-      </li>
-      <li>
-        <Button
-          type="text"
-          variant="primary"
-          disabled-padding
-          prepend-icon="lucide:plus"
-          @click="addLink"
-        >
-          เพิ่มช่องทาง
-        </Button>
-      </li>
-    </ul>
-  </div>
+  <div class="relative">
+    <div class="font-body-large-prominent text-gray">ช่องทางการติดต่อ</div>
+    <ul class="flex flex-col gap-[16px]">
+      <li
+        v-for="(link, i) in linkValue"
+        :key="i"
+        class="flex items-start gap-[8px] font-body-large"
+      >
+        <InputSelect
+          :name="`${props.name}[${i}]name`"
+          width="172"
+          :items="listOption"
+          @select="onSelectSocial(i)"
+          v-model="link.name"
+        />
+        <div class="flex-1">
+          <InputTextField
+            :name="`${props.name}[${i}]link`"
+            full-width
+            :placeholder="listSocial.find((f) => f.name === link.name)?.example"
+            :rules="(v) => rules(v, link.name)"
+            @change="onChangeLink(link, i)"
+            v-model="link.link"
+          />
+        </div>
+      </li>
+      <li>
+        <Button
+          type="text"
+          variant="primary"
+          disabled-padding
+          prepend-icon="lucide:plus"
+          @click="addLink"
+        >
+          เพิ่มช่องทาง
+        </Button>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-media.vue

@@ -1,45 +1,45 @@
 <template>
-  <InputFile
-    v-if="files.length == 0"
-    :name="props.name"
-    :accept="`${acceptImage},${acceptVideo}`"
-    full-width
-    full-height
+  <InputFile
+    v-if="files.length == 0"
+    :name="props.name"
+    :accept="`${acceptImage},${acceptVideo}`"
+    full-width
+    full-height
     :limit="
   props.limitImage > props.limitVideo ? props.limitImage : props.limitVideo
-"
-    @select="onSelect"
-    v-model="files"
-  >
-    <div
-      class="flex flex-col justify-center items-center gap-[4px] p-[10px]"
+"
+    @select="onSelect"
+    v-model="files"
+  >
+    <div
+      class="flex flex-col justify-center items-center gap-[4px] p-[10px]"
       :style="{
   width: props.fullWidth ? '100%' : props.width,
   height: props.fullHeight ? '100%' : props.height
-}"
-    >
-      <Icon name="fa6-solid:cloud-arrow-up" size="24" />
-      <div class="font-body-large">เพิ่มรูปภาพ/วิดีโอ</div>
-      <div class="font-body-small">หรือลากและวาง</div>
-    </div>
-  </InputFile>
-
-  <template v-else>
-    <InputFile
-      v-if="fileType == 'image'"
-      :name="props.name"
-      :accept="acceptImage"
-      :limit="props.limitImage"
-      v-model="files"
-    />
-    <InputFile
-      v-if="fileType == 'video'"
-      :name="props.name"
-      :accept="acceptVideo"
-      :limit="props.limitVideo"
-      v-model="files"
-    />
-  </template>
+}"
+    >
+      <Icon name="fa6-solid:cloud-arrow-up" size="24" />
+      <div class="font-body-large">เพิ่มรูปภาพ/วิดีโอ</div>
+      <div class="font-body-small">หรือลากและวาง</div>
+    </div>
+  </InputFile>
+
+  <template v-else>
+    <InputFile
+      v-if="fileType == 'image'"
+      :name="props.name"
+      :accept="acceptImage"
+      :limit="props.limitImage"
+      v-model="files"
+    />
+    <InputFile
+      v-if="fileType == 'video'"
+      :name="props.name"
+      :accept="acceptVideo"
+      :limit="props.limitVideo"
+      v-model="files"
+    />
+  </template>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-password.vue

@@ -1,46 +1,46 @@
 <template>
-  <InputTextField
-    v-bind="props"
-    :type="isShowPassword ? 'text' : 'password'"
-    :icon-append="isShowPassword ? 'lucide:eye' : 'lucide:eye-off'"
-    :disabled-error-message="props.new"
-    :rules="defaultRules || props.rules"
-    @click-icon-append="switchEye"
-    v-model="modelValue"
-  >
-    <template #label>
-      <ShadFormLabel class="w-full flex justify-between">
-        <div>
-          {{ props.label }}
-          <span v-if="props.required" class="text-destructive">*</span>
-        </div>
-        <div
-          v-if="!props.disabledForgotPassword"
-          class="font-body-medium text-primary"
-          @click="handleForgotPassword"
-        >
-          ลืมรหัสผ่าน
-        </div>
-      </ShadFormLabel>
-    </template>
-  </InputTextField>
-  <div v-if="props.new" class="space-y-[4px]">
-    <div
-      v-for="(item, i) in listValid"
-      :key="i"
-      class="font-body-large text-gray flex gap-[8px] items-center"
-    >
-      <Icon
+  <InputTextField
+    v-bind="props"
+    :type="isShowPassword ? 'text' : 'password'"
+    :icon-append="isShowPassword ? 'lucide:eye' : 'lucide:eye-off'"
+    :disabled-error-message="props.new"
+    :rules="defaultRules || props.rules"
+    @click-icon-append="switchEye"
+    v-model="modelValue"
+  >
+    <template #label>
+      <ShadFormLabel class="w-full flex justify-between">
+        <div>
+          {{ props.label }}
+          <span v-if="props.required" class="text-destructive">*</span>
+        </div>
+        <div
+          v-if="!props.disabledForgotPassword"
+          class="font-body-medium text-primary"
+          @click="handleForgotPassword"
+        >
+          ลืมรหัสผ่าน
+        </div>
+      </ShadFormLabel>
+    </template>
+  </InputTextField>
+  <div v-if="props.new" class="space-y-[4px]">
+    <div
+      v-for="(item, i) in listValid"
+      :key="i"
+      class="font-body-large text-gray flex gap-[8px] items-center"
+    >
+      <Icon
         :name="
   item.valid ? 'fa6-solid:circle-check' : 'fa6-solid:circle-exclamation'
-"
-        :class="colorValidate(item.valid)"
-      />
-      <div>
-        {{ item.label }}
-      </div>
-    </div>
-  </div>
+"
+        :class="colorValidate(item.valid)"
+      />
+      <div>
+        {{ item.label }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-phone.vue

@@ -1,10 +1,10 @@
 <template>
-  <InputTextField
-    ref="phoneRef"
-    v-bind="props"
-    :rules="defaultRules || props.rules"
-    v-model="phoneCode"
-  />
+  <InputTextField
+    ref="phoneRef"
+    v-bind="props"
+    :rules="defaultRules || props.rules"
+    v-model="phoneCode"
+  />
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-radio.d.vue.ts

@@ -4,25 +4,25 @@ type __VLS_ModelProps = {
     modelValue?: string | number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_8: {
+declare var __VLS_7: {
     item: any;
-}, __VLS_11: any, __VLS_12: {}, __VLS_15: any, __VLS_16: {}, __VLS_18: {
+}, __VLS_10: `label-${any}-text`, __VLS_11: {}, __VLS_14: `label-${any}-text`, __VLS_15: {}, __VLS_17: {
     item: any;
-}, __VLS_21: any, __VLS_22: {}, __VLS_25: any, __VLS_26: {}, __VLS_28: {};
+}, __VLS_20: `label-${any}-text`, __VLS_21: {}, __VLS_24: `label-${any}-text`, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 } & {
-    [K in NonNullable<typeof __VLS_15>]?: (props: typeof __VLS_16) => any;
+    [K in NonNullable<typeof __VLS_14>]?: (props: typeof __VLS_15) => any;
 } & {
-    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
+    [K in NonNullable<typeof __VLS_20>]?: (props: typeof __VLS_21) => any;
 } & {
-    [K in NonNullable<typeof __VLS_25>]?: (props: typeof __VLS_26) => any;
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
 } & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_17) => any;
 } & {
-    error?: (props: typeof __VLS_28) => any;
+    error?: (props: typeof __VLS_27) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number | undefined) => any;
@@ -33,12 +33,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     size: number | string;
     item: string | number;
     name: string;
+    columnGap: number | string;
     disabled: boolean;
     disabledErrorMessage: boolean;
     labelPosition: "left" | "right";
     layout: "vertical" | "horizontal";
     layoutGap: number | string;
-    columnGap: number | string;
     standalone: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;