pukaad-ui-lib 1.2.0 → 1.3.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

@@ -5,7 +5,7 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_22: {
-    label: any;
+    label: string;
 }, __VLS_29: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_22) => any;

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

@@ -5,10 +5,10 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_7: {
-    item: any;
-}, __VLS_10: `label-${any}-text`, __VLS_11: {}, __VLS_14: `label-${any}-text`, __VLS_15: {}, __VLS_17: {
-    item: any;
-}, __VLS_20: `label-${any}-text`, __VLS_21: {}, __VLS_24: `label-${any}-text`, __VLS_25: {}, __VLS_27: {};
+    item: number | import("@/types/components/input/input-radio").InputRadioItem;
+}, __VLS_10: `label-${string}-text` | `label-${number}-text`, __VLS_11: {}, __VLS_14: `label-${string}-text` | `label-${number}-text`, __VLS_15: {}, __VLS_17: {
+    item: string | number;
+}, __VLS_20: `label-${string}-text` | `label-${number}-text`, __VLS_21: {}, __VLS_24: `label-${string}-text` | `label-${number}-text`, __VLS_25: {}, __VLS_27: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 } & {

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

@@ -1,105 +1,105 @@
 <template>
-  <Field
-    :name="props.name"
-    v-slot="{ field, errorMessage }"
-    :standalone="props.standalone"
-    :rules="rules"
-    v-model="modelValue"
-  >
-    <div
-      :class="[layout, layoutGapClass]"
+  <Field
+    :name="props.name"
+    v-slot="{ field, errorMessage }"
+    :standalone="props.standalone"
+    :rules="rules"
+    v-model="modelValue"
+  >
+    <div
+      :class="[layout, layoutGapClass]"
       :style="{
   gap: layoutGapStyle
-}"
-    >
-      <template v-if="items.length > 0" v-for="(item, i) in items" :key="i">
-        <slot name="default" :item="item">
-          <label
+}"
+    >
+      <template v-if="items.length > 0" v-for="(item, i) in items" :key="i">
+        <slot name="default" :item="item">
+          <label
             :class="[
   'flex items-center font-body-large',
   columnGapClass,
   cursor
-]"
-            :style="{ gap: columnGapStyle }"
-          >
-            <template v-if="props.labelPosition == 'left'">
-              <slot
-                :name="`label-${typeof item === 'object' ? item.value : item}-text`"
-              >
-                {{ typeof item === "object" ? item.label : item }}
-              </slot>
-            </template>
-
-            <input
-              v-bind="field"
-              :class="['border-[1px] accent-primary', cursor]"
-              type="radio"
-              :name="props.name"
-              :style="{ width: `${props.size}px`, height: `${props.size}px` }"
-              :value="typeof item === 'object' ? item.value : item"
+]"
+            :style="{ gap: columnGapStyle }"
+          >
+            <template v-if="props.labelPosition == 'left'">
+              <slot
+                :name="`label-${typeof item === 'object' ? item.value : item}-text`"
+              >
+                {{ typeof item === "object" ? item.label : item }}
+              </slot>
+            </template>
+
+            <input
+              v-bind="field"
+              :class="['border-[1px] accent-primary', cursor]"
+              type="radio"
+              :name="props.name"
+              :style="{ width: `${props.size}px`, height: `${props.size}px` }"
+              :value="typeof item === 'object' ? item.value : item"
               :disabled="
   props.disabled || typeof item === 'object' && item.disabled
-"
+"
               :checked="
   modelValue === (typeof item === 'object' ? item.value : item)
-"
-            />
-
-            <template v-if="props.labelPosition == 'right'">
-              <slot
-                :name="`label-${typeof item === 'object' ? item.value : item}-text`"
-              >
-                {{ typeof item === "object" ? item.label : item }}
-              </slot>
-            </template>
-          </label>
-        </slot>
-      </template>
-      <template v-else>
-        <slot name="default" :item="item">
-          <label
+"
+            />
+
+            <template v-if="props.labelPosition == 'right'">
+              <slot
+                :name="`label-${typeof item === 'object' ? item.value : item}-text`"
+              >
+                {{ typeof item === "object" ? item.label : item }}
+              </slot>
+            </template>
+          </label>
+        </slot>
+      </template>
+      <template v-else>
+        <slot name="default" :item="item">
+          <label
             :class="[
   'flex items-center font-body-large',
   columnGapClass,
   cursor
-]"
-            :style="{ gap: columnGapStyle }"
-          >
-            <template v-if="props.labelPosition == 'left'">
-              <slot :name="`label-${item}-text`">
-                {{ item }}
-              </slot>
-            </template>
-
-            <input
-              v-bind="field"
-              :class="['border-[1px] accent-primary', cursor]"
-              type="radio"
-              :name="props.name"
-              :style="{ width: `${props.size}px`, height: `${props.size}px` }"
-              :value="item"
-              :disabled="props.disabled"
-            />
-
-            <template v-if="props.labelPosition == 'right'">
-              <slot :name="`label-${item}-text`">
-                {{ item }}
-              </slot>
-            </template>
-          </label>
-        </slot>
-      </template>
-
-      <div
-        v-if="!props.disabledErrorMessage && errorMessage"
-        class="font-body-small text-error"
-      >
-        <slot name="error">
-          {{ errorMessage }}
-        </slot>
-      </div>
-    </div>
-  </Field>
+]"
+            :style="{ gap: columnGapStyle }"
+          >
+            <template v-if="props.labelPosition == 'left'">
+              <slot :name="`label-${item}-text`">
+                {{ item }}
+              </slot>
+            </template>
+
+            <input
+              v-bind="field"
+              :class="['border-[1px] accent-primary', cursor]"
+              type="radio"
+              :name="props.name"
+              :style="{ width: `${props.size}px`, height: `${props.size}px` }"
+              :value="item"
+              :disabled="props.disabled"
+            />
+
+            <template v-if="props.labelPosition == 'right'">
+              <slot :name="`label-${item}-text`">
+                {{ item }}
+              </slot>
+            </template>
+          </label>
+        </slot>
+      </template>
+
+      <div
+        v-if="!props.disabledErrorMessage && errorMessage"
+        class="font-body-small text-error"
+      >
+        <slot name="error">
+          {{ errorMessage }}
+        </slot>
+      </div>
+    </div>
+  </Field>
 </template>
 
 <script setup>