pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,100 +1,100 @@
 <template>
-  <div class="flex flex-col gap-[4px]">
-    <label v-if="props.label" class="font-body-large-prominent text-gray">
-      {{ props.label }}
-      <span v-if="props.required" class="text-destructive">*</span>
-    </label>
-    <div
-      class="border-input relative flex w-full rounded-md border-[1px] bg-white px-[12px] py-[5px] gap-2 cursor-pointer"
-      @click="openModal">
-      <span v-if="!isConfirmed" class="flex-1 text-muted-foreground font-body-large">
-        {{ props.placeholder }}
-      </span>
-      <div v-else class="flex-1 flex flex-col gap-[4px]">
-        <div v-for="item in schedules" :key="item.day" class="flex justify-between font-body-large">
-          <span>{{ getDayName(item.day) }}</span>
-          <div class="text-right flex flex-col items-end gap-1">
-            <span v-if="!item.isOpen">หยุดทำการ</span>
-            <span v-else-if="item.isAllDay">เปิดตลอด 24 ชม.</span>
-            <div v-else class="flex flex-col gap-1">
-              <span v-for="(slot, i) in item.timeSlots" :key="i">{{ slot.start }} - {{ slot.end }} น.</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <Icon name="lucide:chevron-right" :size="16" class="shrink-0 self-center" />
-    </div>
-  </div>
-  <!-- Modal 1: List view -->
-  <Modal v-model="isOpenModal" title="วัน เวลาทำการ" @close="closeModal" class="w-[512px]">
-    <div class="flex flex-col gap-[8px]">
-      <div v-for="item in workingSchedules" :key="item.day" class="flex gap-[16px] items-center">
-        <div class="w-full">{{ getDayName(item.day) }}</div>
-        <div class="flex flex-col gap-[4px] w-full">
-          <div v-if="!item.isOpen" class="flex gap-[4px] items-center">
-            <Icon name="lucide:clock" :size="16" />
-            <div>หยุดทำการ</div>
-          </div>
-          <div v-else-if="item.isAllDay" class="flex gap-[4px] items-center">
-            <Icon name="lucide:clock" :size="16" />
-            <div>เปิดตลอด 24 ชม.</div>
-          </div>
-          <div v-else class="flex flex-col gap-1">
-            <div v-for="(slot, i) in item.timeSlots" :key="i" class="flex gap-[4px] items-center">
-              <Icon name="lucide:clock" :size="16" />
-              <div>{{ slot.start }} - {{ slot.end }} น.</div>
-            </div>
-          </div>
-        </div>
-        <div class="w-full flex justify-end cursor-pointer" @click="editSchedule(item.day)">
-          <Icon name="lucide:edit" :size="20" />
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="flex w-full justify-end">
-        <Button color="primary" @click="saveSchedules">บันทึก</Button>
-      </div>
-    </template>
-  </Modal>
-
-  <Modal v-model="isOpenEditModal" title="วัน เวลาทำการ" @close="closeEditModal" class="w-[512px]">
-    <div class="flex flex-col gap-4 px-4 py-2">
-      <div class="flex gap-2">
-        <div v-for="(shortName, index) in dayShortNames" :key="index" :class="getDayButtonClass(index)"
-          @click="selectDay(index)">
-          {{ shortName }}
-        </div>
-      </div>
-
-      <div class="flex gap-6">
-        <InputCheckbox label="เปิดตลอด 24 ชม." v-model="isAllDayRef" />
-        <InputCheckbox label="หยุดทำการ" v-model="isClosed" />
-      </div>
-
-      <div v-if="!isClosed && !isAllDayRef" class="flex flex-col gap-3">
-        <div v-for="(timeSlot, index) in timeSlots" :key="timeSlot.id" class="flex items-end justify-between">
-          <InputSelect :name="`time-slot-start-${timeSlot.id}`" v-model="timeSlots[index].start" label="เวลาเปิด"
-            :options="timeOptions" placeholder="00:00" />
-          <InputSelect :name="`time-slot-end-${timeSlot.id}`" v-model="timeSlots[index].end" label="เวลาปิด"
-            :options="timeOptions" placeholder="00:00" />
-
-          <Button variant="icon" color="destructive" @click="removeTimeSlot(index)">
-            <Icon name="lucide:trash-2" :size="20" />
-          </Button>
-        </div>
-        <Button variant="text" color="primary" prepend-icon="lucide:plus" size="small" class="justify-start"
-          @click="addTimeSlot">เพิ่มเวลาทำการ</Button>
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="flex w-full justify-end">
-        <Button color="primary" @click="confirmEditChanges">บันทึก</Button>
-      </div>
-    </template>
-  </Modal>
+  <div class="flex flex-col gap-[4px]">
+    <label v-if="props.label" class="font-body-large-prominent text-gray">
+      {{ props.label }}
+      <span v-if="props.required" class="text-destructive">*</span>
+    </label>
+    <div
+      class="border-input relative flex w-full rounded-md border-[1px] bg-white px-[12px] py-[5px] gap-2 cursor-pointer"
+      @click="openModal">
+      <span v-if="!isConfirmed" class="flex-1 text-muted-foreground font-body-large">
+        {{ props.placeholder }}
+      </span>
+      <div v-else class="flex-1 flex flex-col gap-[4px]">
+        <div v-for="item in schedules" :key="item.day" class="flex justify-between font-body-large">
+          <span>{{ getDayName(item.day) }}</span>
+          <div class="text-right flex flex-col items-end gap-1">
+            <span v-if="!item.isOpen">หยุดทำการ</span>
+            <span v-else-if="item.isAllDay">เปิดตลอด 24 ชม.</span>
+            <div v-else class="flex flex-col gap-1">
+              <span v-for="(slot, i) in item.timeSlots" :key="i">{{ slot.start }} - {{ slot.end }} น.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Icon name="lucide:chevron-right" :size="16" class="shrink-0 self-center" />
+    </div>
+  </div>
+  <!-- Modal 1: List view -->
+  <Modal v-model="isOpenModal" title="วัน เวลาทำการ" @close="closeModal" class="w-[512px]">
+    <div class="flex flex-col gap-[8px]">
+      <div v-for="item in workingSchedules" :key="item.day" class="flex gap-[16px] items-center">
+        <div class="w-full">{{ getDayName(item.day) }}</div>
+        <div class="flex flex-col gap-[4px] w-full">
+          <div v-if="!item.isOpen" class="flex gap-[4px] items-center">
+            <Icon name="lucide:clock" :size="16" />
+            <div>หยุดทำการ</div>
+          </div>
+          <div v-else-if="item.isAllDay" class="flex gap-[4px] items-center">
+            <Icon name="lucide:clock" :size="16" />
+            <div>เปิดตลอด 24 ชม.</div>
+          </div>
+          <div v-else class="flex flex-col gap-1">
+            <div v-for="(slot, i) in item.timeSlots" :key="i" class="flex gap-[4px] items-center">
+              <Icon name="lucide:clock" :size="16" />
+              <div>{{ slot.start }} - {{ slot.end }} น.</div>
+            </div>
+          </div>
+        </div>
+        <div class="w-full flex justify-end cursor-pointer" @click="editSchedule(item.day)">
+          <Icon name="lucide:edit" :size="20" />
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <Button color="primary" @click="saveSchedules">บันทึก</Button>
+      </div>
+    </template>
+  </Modal>
+
+  <Modal v-model="isOpenEditModal" title="วัน เวลาทำการ" @close="closeEditModal" class="w-[512px]">
+    <div class="flex flex-col gap-4 px-4 py-2">
+      <div class="flex gap-2">
+        <div v-for="(shortName, index) in dayShortNames" :key="index" :class="getDayButtonClass(index)"
+          @click="selectDay(index)">
+          {{ shortName }}
+        </div>
+      </div>
+
+      <div class="flex gap-6">
+        <InputCheckbox label="เปิดตลอด 24 ชม." v-model="isAllDayRef" />
+        <InputCheckbox label="หยุดทำการ" v-model="isClosed" />
+      </div>
+
+      <div v-if="!isClosed && !isAllDayRef" class="flex flex-col gap-3">
+        <div v-for="(timeSlot, index) in timeSlots" :key="timeSlot.id" class="flex items-end justify-between">
+          <InputSelect :name="`time-slot-start-${timeSlot.id}`" v-model="timeSlots[index].start" label="เวลาเปิด"
+            :options="timeOptions" placeholder="00:00" />
+          <InputSelect :name="`time-slot-end-${timeSlot.id}`" v-model="timeSlots[index].end" label="เวลาปิด"
+            :options="timeOptions" placeholder="00:00" />
+
+          <Button variant="icon" color="destructive" @click="removeTimeSlot(index)">
+            <Icon name="lucide:trash-2" :size="20" />
+          </Button>
+        </div>
+        <Button variant="text" color="primary" prepend-icon="lucide:plus" size="small" class="justify-start"
+          @click="addTimeSlot">เพิ่มเวลาทำการ</Button>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <Button color="primary" @click="confirmEditChanges">บันทึก</Button>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>

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

@@ -1,123 +1,123 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ errorMessage }"
-    v-model="modelValue"
-  >
-    <ShadFormItem :class="cn('flex flex-col w-full', props.class)">
-      <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 :class="cn('flex flex-col w-full', props.class)">
+      <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 gap-2 font-body-large',
     !modelValue && props.variant === 'button' ? 'justify-center' : 'justify-between',
     errorMessage && 'border-destructive hover:border-destructive'
   )
-"
-            >
-              <!-- Filled State -->
-              <template v-if="modelValue">
-                <span>{{ formattedDate }}</span>
-                <Icon
-                  name="lucide:x"
-                  :size="16"
-                  class="!pointer-events-auto cursor-pointer shrink-0"
-                  @click.stop.prevent="clearDate"
-                />
-              </template>
-
-              <!-- Empty State: button mode -->
-              <template v-else-if="props.variant === 'button'">
-                <span>{{ placeholder }}</span>
-              </template>
-
-              <!-- Empty State: default mode -->
-              <template v-else>
-                <span class="text-cloud">{{ placeholder }}</span>
-                <Icon name="lucide:calendar" :size="16" class="shrink-0" />
-              </template>
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent class="w-auto p-0" align="start">
-            <div :class="cn('sm:flex', props.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="props.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>
+"
+            >
+              <!-- Filled State -->
+              <template v-if="modelValue">
+                <span>{{ formattedDate }}</span>
+                <Icon
+                  name="lucide:x"
+                  :size="16"
+                  class="!pointer-events-auto cursor-pointer shrink-0"
+                  @click.stop.prevent="clearDate"
+                />
+              </template>
+
+              <!-- Empty State: button mode -->
+              <template v-else-if="props.variant === 'button'">
+                <span>{{ placeholder }}</span>
+              </template>
+
+              <!-- Empty State: default mode -->
+              <template v-else>
+                <span class="text-cloud">{{ placeholder }}</span>
+                <Icon name="lucide:calendar" :size="16" class="shrink-0" />
+              </template>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent class="w-auto p-0" align="start">
+            <div :class="cn('sm:flex', props.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="props.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>