pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,181 +1,181 @@
 <template>
-  <div class="space-y-[4px]">
-    <div
+  <div class="space-y-[4px]">
+    <div
       :class="[
   'flex gap-[8px]',
   props.previewFullSize ? 'flex-col w-full' : props.column ? 'flex-col' : 'flex-wrap flex-row'
-]"
-    >
-      <Draggable
-        v-if="arrFiles.length"
-        v-model="arrFiles"
+]"
+    >
+      <Draggable
+        v-if="arrFiles.length"
+        v-model="arrFiles"
         :class="[
   'flex gap-[8px]',
   props.previewFullSize ? 'flex-col w-full' : props.column ? 'flex-col' : 'flex-wrap flex-row'
-]"
-      >
-        <template #item="{ item, index }">
-          <div
+]"
+      >
+        <template #item="{ item, index }">
+          <div
             :class="[
   props.column ? 'flex gap-[16px] w-full items-start' : props.previewFullSize ? 'relative w-full' : 'relative'
-]"
-          >
-            <div
+]"
+          >
+            <div
               :class="[
   'relative group',
   props.previewFullSize ? 'w-full' : 'shrink-0'
-]"
-            >
-              <div
-                v-if="item.file?.type?.startsWith('video')"
-                class="relative shrink-0"
-              >
-                <video
-                  :src="item.url"
-                  class="relative rounded-[4px] object-cover z-10"
-                  :style="previewSizeStyle"
-                />
-                <div
-                  class="absolute text-white bottom-0 left-0 right-0 bg-linear-to-t from-black/70 to-transparent h-[24px] z-20 rounded-b-[4px] flex items-center justify-center pointer-events-none"
-                >
-                  <div
-                    class="flex items-center justify-between w-full px-[4px]"
-                  >
-                    <Icon name="lucide:video" size="18"></Icon>
-                    <span class="font-label-sans-serif-small">
-                      {{ item.duration || "0:00" }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
+]"
+            >
+              <div
+                v-if="item.file?.type?.startsWith('video')"
+                class="relative shrink-0"
+              >
+                <video
+                  :src="item.url"
+                  class="relative rounded-[4px] object-cover z-10"
+                  :style="previewSizeStyle"
+                />
+                <div
+                  class="absolute text-white bottom-0 left-0 right-0 bg-linear-to-t from-black/70 to-transparent h-[24px] z-20 rounded-b-[4px] flex items-center justify-center pointer-events-none"
+                >
+                  <div
+                    class="flex items-center justify-between w-full px-[4px]"
+                  >
+                    <Icon name="lucide:video" size="18"></Icon>
+                    <span class="font-label-sans-serif-small">
+                      {{ item.duration || "0:00" }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div
                 v-else-if="
   item.file?.type === 'application/pdf' || item.file?.name.toLowerCase().endsWith('.pdf')
-"
-                :style="previewSizeStyle"
-              >
-                <CardFile
-                  :file-name="item.file.name"
-                  layout="vertical"
-                  class="size-full"
-                />
-              </div>
-              <div
-                v-else-if="!item.file || item.file?.type?.startsWith('image')"
-              >
-                <div
+"
+                :style="previewSizeStyle"
+              >
+                <CardFile
+                  :file-name="item.file.name"
+                  layout="vertical"
+                  class="size-full"
+                />
+              </div>
+              <div
+                v-else-if="!item.file || item.file?.type?.startsWith('image')"
+              >
+                <div
                   :class="[
   'relative',
   props.previewFullSize ? 'w-full' : 'shrink-0'
-]"
-                >
-                  <div
-                    v-if="props.previewFullSize"
-                    class="rounded-[4px] relative z-10 bg-cover bg-center"
+]"
+                >
+                  <div
+                    v-if="props.previewFullSize"
+                    class="rounded-[4px] relative z-10 bg-cover bg-center"
                     :style="{
   width: props.fullWidth ? '100%' : String(props.width).match(/^[0-9]+$/) ? `${props.width}px` : props.width,
   height: props.fullHeight ? '100%' : String(props.height).match(/^[0-9]+$/) ? `${props.height}px` : props.height,
   backgroundImage: `url(${item.url})`
-}"
-                  />
-                  <Image
-                    v-else
-                    :width="previewWidth"
-                    :height="previewHeight"
-                    :src="item.url"
-                    class="rounded-[4px] relative z-10"
-                  />
-
-                  <div
-                    v-if="index === 0 && props.showCover"
-                    class="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black to-transparent h-[24px] z-20 rounded-b-[4px] flex items-center justify-center pointer-events-none"
-                  >
-                    <span
-                      class="text-[10px] font-medium text-white leading-none"
-                    >
-                      รูปภาพหน้าปก
-                    </span>
-                  </div>
-                </div>
-              </div>
-              <div
-                v-else
-                class="rounded-[4px] flex justify-center items-center"
-                :style="previewSizeStyle"
-              >
-                <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/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity z-30"
-                @click="onDeleteImage(index)"
-              >
-                <Icon name="gravity-ui:xmark" size="16"></Icon>
-              </div>
-            </div>
-
-            <div v-if="props.column" class="flex-1 w-full h-[98px]">
-              <textarea
-                v-model="item.description"
-                placeholder="เพิ่มคำอธิบาย..."
-                class="w-full h-full p-[8px] rounded-[4px] border-[1px] border-cloud outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none font-body text-black bg-white"
-              ></textarea>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-
-      <label
-        v-if="props.limit == 0 || arrFiles.length < props.limit"
+}"
+                  />
+                  <Image
+                    v-else
+                    :width="previewWidth"
+                    :height="previewHeight"
+                    :src="item.url"
+                    class="rounded-[4px] relative z-10"
+                  />
+
+                  <div
+                    v-if="index === 0 && props.showCover"
+                    class="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black to-transparent h-[24px] z-20 rounded-b-[4px] flex items-center justify-center pointer-events-none"
+                  >
+                    <span
+                      class="text-[10px] font-medium text-white leading-none"
+                    >
+                      รูปภาพหน้าปก
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div
+                v-else
+                class="rounded-[4px] flex justify-center items-center"
+                :style="previewSizeStyle"
+              >
+                <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/80 rounded-full cursor-pointer flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity z-30"
+                @click="onDeleteImage(index)"
+              >
+                <Icon name="gravity-ui:xmark" size="16"></Icon>
+              </div>
+            </div>
+
+            <div v-if="props.column" class="flex-1 w-full h-[98px]">
+              <textarea
+                v-model="item.description"
+                placeholder="เพิ่มคำอธิบาย..."
+                class="w-full h-full p-[8px] rounded-[4px] border-[1px] border-cloud outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none font-body text-black bg-white"
+              ></textarea>
+            </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',
   props.column ? 'self-start' : '',
   actionOnDrop
-]"
+]"
         :style="{
   width: props.fullWidth ? '100%' : String(props.width).match(/^[0-9]+$/) ? `${props.width}px` : props.width,
   height: props.fullHeight ? '100%' : String(props.height).match(/^[0-9]+$/) ? `${props.height}px` : props.height
-}"
-        @dragover.prevent="onDragOver"
-        @dragenter.prevent
-        @dragleave.prevent="onDragLeave"
-        @drop.prevent="onDrop"
-      >
-        <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 rounded-[4px]"
-            :style="previewSizeStyle"
-          >
-            <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="onDrop"
+      >
+        <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 rounded-[4px]"
+            :style="previewSizeStyle"
+          >
+            <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-id-card.vue

@@ -1,60 +1,60 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    v-model="modelValue"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ errorMessage: formError }"
-  >
-    <ShadFormItem v-bind="$attrs">
-      <ShadFormLabel v-if="props.label || $slots.label" class="w-full">
-        <slot name="label">
-          {{ props.label }}
-          <span v-if="props.required" class="text-destructive">*</span>
-        </slot>
-      </ShadFormLabel>
-
-      <div class="max-w-full overflow-x-auto p-[2px]">
-        <ShadPinInput
-          :id="props.id || props.name"
-          v-model="digits"
-          type="number"
-          placeholder="0"
-          :disabled="props.disabled"
-          :name="props.name"
-          :required="props.required"
-          @complete="handleComplete"
-        >
-          <ShadPinInputGroup class="w-full justify-between gap-0">
-            <template v-for="index in 13" :key="index">
-              <ShadFormControl :index="index - 1">
-                <ShadPinInputSlot
-                  class="h-[36px] w-[25px] px-[4px] py-[4px] rounded-[4px]"
+  <ShadFormField
+    ref="fieldRef"
+    v-model="modelValue"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ errorMessage: formError }"
+  >
+    <ShadFormItem v-bind="$attrs">
+      <ShadFormLabel v-if="props.label || $slots.label" class="w-full">
+        <slot name="label">
+          {{ props.label }}
+          <span v-if="props.required" class="text-destructive">*</span>
+        </slot>
+      </ShadFormLabel>
+
+      <div class="max-w-full overflow-x-auto p-[2px]">
+        <ShadPinInput
+          :id="props.id || props.name"
+          v-model="digits"
+          type="number"
+          placeholder="0"
+          :disabled="props.disabled"
+          :name="props.name"
+          :required="props.required"
+          @complete="handleComplete"
+        >
+          <ShadPinInputGroup class="w-full justify-between gap-0">
+            <template v-for="index in 13" :key="index">
+              <ShadFormControl :index="index - 1">
+                <ShadPinInputSlot
+                  class="h-[36px] w-[25px] px-[4px] py-[4px] rounded-[4px]"
                   :class="{
   'border-destructive': formError || props.error
-}"
-                />
-              </ShadFormControl>
-
-              <ShadPinInputSeparator
-                v-if="separatorIndexes.includes(index)"
-                class="font-body-large text-gray"
-              >
-                –
-              </ShadPinInputSeparator>
-            </template>
-          </ShadPinInputGroup>
-        </ShadPinInput>
-      </div>
-
-      <p
-        v-if="formError || props.error"
-        class="font-body-small text-destructive"
-      >
-        {{ formError || props.error }}
-      </p>
-    </ShadFormItem>
-  </ShadFormField>
+}"
+                />
+              </ShadFormControl>
+
+              <ShadPinInputSeparator
+                v-if="separatorIndexes.includes(index)"
+                class="font-body-large text-gray"
+              >
+                –
+              </ShadPinInputSeparator>
+            </template>
+          </ShadPinInputGroup>
+        </ShadPinInput>
+      </div>
+
+      <p
+        v-if="formError || props.error"
+        class="font-body-small text-destructive"
+      >
+        {{ formError || props.error }}
+      </p>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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

@@ -1,29 +1,29 @@
 <template>
-  <div class="relative">
-    <div class="font-body-large-prominent text-gray">{{ props.label }}</div>
-    <ul class="flex flex-col gap-[16px]">
-      <li v-for="(link, i) in linkValue" :key="i">
-        <InputTypedField
-          :name="`${props.name}[${i}]`"
-          :options="listOption"
-          :placeholder="getPlaceholder(link.name)"
-          :rules="(v) => rules(v, link.name)"
-          :show-counter="props.showCounter"
-          :limit="props.limit"
-          :hide-type="props.hideType"
-          v-model:type="link.name"
-          v-model:value="link.link"
-          @remove="removeLink(i)"
-        />
-      </li>
-      <li v-if="!props.hideAddButton">
-        <Button variant="text" color="primary" @click="addLink">
-          <Icon name="lucide:plus" />
-          เพิ่มช่องทาง
-        </Button>
-      </li>
-    </ul>
-  </div>
+  <div class="relative">
+    <div class="font-body-large-prominent text-gray">{{ props.label }}</div>
+    <ul class="flex flex-col gap-[16px]">
+      <li v-for="(link, i) in linkValue" :key="i">
+        <InputTypedField
+          :name="`${props.name}[${i}]`"
+          :options="listOption"
+          :placeholder="getPlaceholder(link.name)"
+          :rules="(v) => rules(v, link.name)"
+          :show-counter="props.showCounter"
+          :limit="props.limit"
+          :hide-type="props.hideType"
+          v-model:type="link.name"
+          v-model:value="link.link"
+          @remove="removeLink(i)"
+        />
+      </li>
+      <li v-if="!props.hideAddButton">
+        <Button variant="text" color="primary" @click="addLink">
+          <Icon name="lucide:plus" />
+          เพิ่มช่องทาง
+        </Button>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/input/input-localized-name.vue

@@ -1,30 +1,30 @@
 <template>
-  <div>
-    <ul class="flex flex-col gap-[16px]">
-      <li v-for="(row, i) in rows" :key="i">
-        <InputTypedField
-          :name="`${props.name}[${i}]`"
-          :label="props.label"
-          :options="languageOptions"
-          :placeholder="props.placeholder"
-          :rules="rules"
-          :show-counter="props.showCounter"
-          :limit="props.limit"
-          :reset-on-type-change="false"
-          :removable="props.removable"
-          v-model:type="row.language"
-          v-model:value="row.name"
-          @remove="removeRow(i)"
-        />
-      </li>
-      <li>
-        <Button variant="text" color="primary" @click="addRow">
-          <Icon name="lucide:plus" />
-          {{ props.addLabel }}
-        </Button>
-      </li>
-    </ul>
-  </div>
+  <div>
+    <ul class="flex flex-col gap-[16px]">
+      <li v-for="(row, i) in rows" :key="i">
+        <InputTypedField
+          :name="`${props.name}[${i}]`"
+          :label="props.label"
+          :options="languageOptions"
+          :placeholder="props.placeholder"
+          :rules="rules"
+          :show-counter="props.showCounter"
+          :limit="props.limit"
+          :reset-on-type-change="false"
+          :removable="props.removable"
+          v-model:type="row.language"
+          v-model:value="row.name"
+          @remove="removeRow(i)"
+        />
+      </li>
+      <li>
+        <Button variant="text" color="primary" @click="addRow">
+          <Icon name="lucide:plus" />
+          {{ props.addLabel }}
+        </Button>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup>