pukaad-ui-lib 1.282.0 → 1.282.2

package/dist/runtime/components/input/input-date-picker.vue

@@ -1,112 +1,112 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ errorMessage }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel v-if="props.label || $slots.label" class="w-full">
-        <slot name="label">
-          <div class="flex-1">
-            {{ props.label }}
-            <span v-if="props.required" class="text-destructive">*</span>
-          </div>
-        </slot>
-      </ShadFormLabel>
-
-      <ShadFormControl>
-        <Popover v-model:open="isPopoverOpen">
-          <PopoverTrigger as-child>
-            <Button
-              variant="outline"
-              color="default"
-              :disabled="props.disabled"
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ errorMessage }"
+    v-model="modelValue"
+  >
+    <ShadFormItem>
+      <ShadFormLabel v-if="props.label || $slots.label" class="w-full">
+        <slot name="label">
+          <div class="flex-1">
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+      </ShadFormLabel>
+
+      <ShadFormControl>
+        <Popover v-model:open="isPopoverOpen">
+          <PopoverTrigger as-child>
+            <Button
+              variant="outline"
+              color="default"
+              :disabled="props.disabled"
               :class="
   cn(
     'w-full flex items-center justify-between gap-2 font-body-large',
     errorMessage && 'border-destructive hover:border-destructive',
     props.class
   )
-"
-            >
-              <span v-if="modelValue">{{ formattedDate }}</span>
-              <span v-else class="text-cloud">{{ placeholder }}</span>
-              <Icon
-                v-if="modelValue"
-                name="lucide:x"
-                :size="16"
-                class="!pointer-events-auto cursor-pointer"
-                @click.stop.prevent="clearDate"
-              />
-              <Icon v-else name="lucide:calendar" :size="16" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent class="w-auto p-0" align="start">
-            <div :class="cn('sm:flex', showTime && 'flex-row')">
-              <Calendar
-                v-model="calendarValue"
-                initial-focus
-                :locale="locale"
-                :layout="layout"
-                :max-value="maxCalendarValue"
-                :min-value="minCalendarValue"
-                :is-date-disabled="props.isDateDisabled"
-                :default-placeholder="props.defaultPlaceholder"
-                :reverse-years="props.reverseYears"
-              />
-              <!-- Time Picker -->
-              <div
-                v-if="showTime"
-                class="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x sm:border-t-0"
-              >
-                <!-- Hours -->
-                <ScrollArea class="w-64 sm:w-auto">
-                  <div class="flex sm:flex-col p-2">
-                    <Button
-                      v-for="hour in hours"
-                      :key="hour"
-                      size="icon"
-                      :variant="selectedHour === hour ? 'default' : 'ghost'"
-                      :color="selectedHour === hour ? 'primary' : 'default'"
-                      class="sm:w-full shrink-0 aspect-square"
-                      @click="handleTimeChange('hour', hour)"
-                    >
-                      {{ hour.toString().padStart(2, "0") }}
-                    </Button>
-                  </div>
-                  <ScrollBar orientation="horizontal" class="sm:hidden" />
-                </ScrollArea>
-
-                <!-- Minutes -->
-                <ScrollArea class="w-64 sm:w-auto">
-                  <div class="flex sm:flex-col p-2">
-                    <Button
-                      v-for="minute in minutes"
-                      :key="minute"
-                      size="icon"
-                      :variant="selectedMinute === minute ? 'default' : 'ghost'"
-                      :color="selectedMinute === minute ? 'primary' : 'default'"
-                      class="sm:w-full shrink-0 aspect-square"
-                      @click="handleTimeChange('minute', minute)"
-                    >
-                      {{ minute.toString().padStart(2, "0") }}
-                    </Button>
-                  </div>
-                  <ScrollBar orientation="horizontal" class="sm:hidden" />
-                </ScrollArea>
-              </div>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </ShadFormControl>
-      <ShadFormMessage v-if="!props.disabledErrorMessage" />
-      <ShadFormDescription v-if="props.description" class="text-gray">
-        {{ props.description }}
-      </ShadFormDescription>
-    </ShadFormItem>
-  </ShadFormField>
+"
+            >
+              <span v-if="modelValue">{{ formattedDate }}</span>
+              <span v-else class="text-cloud">{{ placeholder }}</span>
+              <Icon
+                v-if="modelValue"
+                name="lucide:x"
+                :size="16"
+                class="!pointer-events-auto cursor-pointer"
+                @click.stop.prevent="clearDate"
+              />
+              <Icon v-else name="lucide:calendar" :size="16" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent class="w-auto p-0" align="start">
+            <div :class="cn('sm:flex', showTime && 'flex-row')">
+              <Calendar
+                v-model="calendarValue"
+                initial-focus
+                :locale="locale"
+                :layout="layout"
+                :max-value="maxCalendarValue"
+                :min-value="minCalendarValue"
+                :is-date-disabled="props.isDateDisabled"
+                :default-placeholder="props.defaultPlaceholder"
+                :reverse-years="props.reverseYears"
+              />
+              <!-- Time Picker -->
+              <div
+                v-if="showTime"
+                class="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x sm:border-t-0"
+              >
+                <!-- Hours -->
+                <ScrollArea class="w-64 sm:w-auto">
+                  <div class="flex sm:flex-col p-2">
+                    <Button
+                      v-for="hour in hours"
+                      :key="hour"
+                      size="icon"
+                      :variant="selectedHour === hour ? 'default' : 'ghost'"
+                      :color="selectedHour === hour ? 'primary' : 'default'"
+                      class="sm:w-full shrink-0 aspect-square"
+                      @click="handleTimeChange('hour', hour)"
+                    >
+                      {{ hour.toString().padStart(2, "0") }}
+                    </Button>
+                  </div>
+                  <ScrollBar orientation="horizontal" class="sm:hidden" />
+                </ScrollArea>
+
+                <!-- Minutes -->
+                <ScrollArea class="w-64 sm:w-auto">
+                  <div class="flex sm:flex-col p-2">
+                    <Button
+                      v-for="minute in minutes"
+                      :key="minute"
+                      size="icon"
+                      :variant="selectedMinute === minute ? 'default' : 'ghost'"
+                      :color="selectedMinute === minute ? 'primary' : 'default'"
+                      class="sm:w-full shrink-0 aspect-square"
+                      @click="handleTimeChange('minute', minute)"
+                    >
+                      {{ minute.toString().padStart(2, "0") }}
+                    </Button>
+                  </div>
+                  <ScrollBar orientation="horizontal" class="sm:hidden" />
+                </ScrollArea>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </ShadFormControl>
+      <ShadFormMessage v-if="!props.disabledErrorMessage" />
+      <ShadFormDescription v-if="props.description" class="text-gray">
+        {{ props.description }}
+      </ShadFormDescription>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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

@@ -1,13 +1,13 @@
 <template>
-  <InputTextField
-    ref="inputRef"
-    v-model="modelValue"
-    :name="props.name"
-    :label="props.label"
-    :placeholder="props.placeholder"
-    :required="props.required"
-    :rules="rules"
-  />
+  <InputTextField
+    ref="inputRef"
+    v-model="modelValue"
+    :name="props.name"
+    :label="props.label"
+    :placeholder="props.placeholder"
+    :required="props.required"
+    :rules="rules"
+  />
 </template>
 
 <script setup>

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

@@ -1,145 +1,145 @@
 <template>
-  <div class="space-y-[4px]">
-    <div
+  <div class="space-y-[4px]">
+    <div
       :class="[
   'flex gap-[8px]',
   props.column ? 'flex-col' : 'flex-wrap flex-row'
-]"
-    >
-      <Draggable
-        v-model="arrFiles"
+]"
+    >
+      <Draggable
+        v-model="arrFiles"
         :class="[
   'flex gap-[8px]',
   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' : 'relative'
-]"
-          >
-            <div class="relative shrink-0 group">
-              <div
-                v-if="item.file?.type?.startsWith('video')"
-                class="relative shrink-0"
-              >
-                <video
-                  :src="item.url"
-                  class="relative rounded-[4px] object-cover w-[98px] h-[98px] z-10"
-                />
-                <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 || item.file?.type?.startsWith('image')"
-              >
-                <div class="relative shrink-0">
-                  <Image
-                    width="98"
-                    height="98"
-                    :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="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/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"
+]"
+          >
+            <div class="relative shrink-0 group">
+              <div
+                v-if="item.file?.type?.startsWith('video')"
+                class="relative shrink-0"
+              >
+                <video
+                  :src="item.url"
+                  class="relative rounded-[4px] object-cover w-[98px] h-[98px] z-10"
+                />
+                <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 || item.file?.type?.startsWith('image')"
+              >
+                <div class="relative shrink-0">
+                  <Image
+                    width="98"
+                    height="98"
+                    :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="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/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="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-link.vue

@@ -1,39 +1,39 @@
 <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`"
-          class="w-[172px]"
-          :options="listOption"
-          @update:modelValue="(val) => onSelectSocial(i, val)"
-          v-model="link.name"
-        />
-        <div class="flex-1">
-          <InputTextField
-            :key="getInputKey(i)"
-            :name="`${props.name}[${i}]link`"
-            class="w-full"
-            :placeholder="getPlaceholder(link.name)"
-            :rules="(v) => rules(v, link.name)"
-            @change="onChangeLink(link, i)"
-            v-model="link.link"
-          />
-        </div>
-      </li>
-      <li>
-        <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">ช่องทางการติดต่อ</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`"
+          class="w-[172px]"
+          :options="listOption"
+          @update:modelValue="(val) => onSelectSocial(i, val)"
+          v-model="link.name"
+        />
+        <div class="flex-1">
+          <InputTextField
+            :key="getInputKey(i)"
+            :name="`${props.name}[${i}]link`"
+            class="w-full"
+            :placeholder="getPlaceholder(link.name)"
+            :rules="(v) => rules(v, link.name)"
+            @change="onChangeLink(link, i)"
+            v-model="link.link"
+          />
+        </div>
+      </li>
+      <li>
+        <Button variant="text" color="primary" @click="addLink">
+          <Icon name="lucide:plus" />
+          เพิ่มช่องทาง
+        </Button>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup>