pukaad-ui-lib 1.282.0 → 1.282.2

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

@@ -1,111 +1,111 @@
 <template>
-  <ShadPopover v-model:open="popoverOpen">
-    <ShadPopoverAnchor as-child>
-      <InputTextField
-        ref="inputTextFieldRef"
-        v-model="displayText"
-        :name="props.name"
-        :label="props.label"
-        :rules="computedRules"
-        :required="props.required"
-        :disabled-border="props.disabledBorder"
-        :placeholder="props.placeholder"
-        readonly
-        class="cursor-pointer"
-        @click="handleInputClick"
-      >
-        <template #label>
-          <slot name="label">
-            <div
+  <ShadPopover v-model:open="popoverOpen">
+    <ShadPopoverAnchor as-child>
+      <InputTextField
+        ref="inputTextFieldRef"
+        v-model="displayText"
+        :name="props.name"
+        :label="props.label"
+        :rules="computedRules"
+        :required="props.required"
+        :disabled-border="props.disabledBorder"
+        :placeholder="props.placeholder"
+        readonly
+        class="cursor-pointer"
+        @click="handleInputClick"
+      >
+        <template #label>
+          <slot name="label">
+            <div
               :class="[
   'flex-1',
   props.disabledBorder && 'font-body-small-prominent'
-]"
-            >
-              {{ props.label }}
-              <span v-if="props.required" class="text-destructive">*</span>
-            </div>
-          </slot>
-          <div
-            v-if="props.showCounter && props.limit > 0"
-            :class="[props.disabledBorder && 'font-body-small']"
-          >
-            <div :class="[selectedCount > props.limit && 'text-destructive']">
-              {{ selectedCount }}/{{ props.limit }}
-            </div>
-          </div>
-        </template>
-        <template #append>
-          <Icon
-            @mousedown.stop.prevent="handleIconClick"
-            @click.stop.prevent
-            :name="hasSelection ? 'lucide:x' : 'lucide:chevron-down'"
-            size="16"
-            class="cursor-pointer text-black"
-          />
-        </template>
-      </InputTextField>
-    </ShadPopoverAnchor>
-    <ShadPopoverContent @openAutoFocus.prevent>
-      <slot name="popover-content" :close="() => popoverOpen = false">
-        <ShadCommand :should-filter="!props.fetchFn">
-          <ShadCommandInput
-            v-model="searchQuery"
-            :placeholder="props.placeholderSearch"
-          />
-          <ShadCommandList ref="commandListRef" class="max-h-64">
-            <ShadCommandGroup
-              v-if="resolvedOptions && resolvedOptions.length > 0"
-            >
-              <slot name="options">
-                <ShadCommandItem
-                  v-for="option in resolvedOptions"
-                  :key="option.value"
-                  :value="option.value"
-                  :disabled="isOptionDisabled(option.value)"
+]"
+            >
+              {{ props.label }}
+              <span v-if="props.required" class="text-destructive">*</span>
+            </div>
+          </slot>
+          <div
+            v-if="props.showCounter && props.limit > 0"
+            :class="[props.disabledBorder && 'font-body-small']"
+          >
+            <div :class="[selectedCount > props.limit && 'text-destructive']">
+              {{ selectedCount }}/{{ props.limit }}
+            </div>
+          </div>
+        </template>
+        <template #append>
+          <Icon
+            @mousedown.stop.prevent="handleIconClick"
+            @click.stop.prevent
+            :name="hasSelection ? 'lucide:x' : 'lucide:chevron-down'"
+            size="16"
+            class="cursor-pointer text-black"
+          />
+        </template>
+      </InputTextField>
+    </ShadPopoverAnchor>
+    <ShadPopoverContent @openAutoFocus.prevent>
+      <slot name="popover-content" :close="() => popoverOpen = false">
+        <ShadCommand :should-filter="!props.fetchFn">
+          <ShadCommandInput
+            v-model="searchQuery"
+            :placeholder="props.placeholderSearch"
+          />
+          <ShadCommandList ref="commandListRef" class="max-h-64">
+            <ShadCommandGroup
+              v-if="resolvedOptions && resolvedOptions.length > 0"
+            >
+              <slot name="options">
+                <ShadCommandItem
+                  v-for="option in resolvedOptions"
+                  :key="option.value"
+                  :value="option.value"
+                  :disabled="isOptionDisabled(option.value)"
                   :class="[
   isOptionDisabled(option.value) && 'cursor-not-allowed'
-]"
-                  @click="() => handleSelect(option.value)"
-                >
-                  <ShadCheckbox
-                    v-if="props.multiple"
-                    :model-value="isSelected(option.value)"
-                    :disabled="isOptionDisabled(option.value)"
-                    class="mr-2 pointer-events-none"
-                  />
-
-                  {{ option.label }}
-                  <Icon
-                    v-if="!props.multiple && isSelected(option.value)"
-                    name="lucide:check"
-                    class="ml-auto h-4 w-4"
-                  />
-                </ShadCommandItem>
-              </slot>
-            </ShadCommandGroup>
-
-            <!-- Loading Indicator -->
-            <div
-              v-if="props.fetchFn && paginationState.loading"
-              class="flex justify-center p-2"
-            >
-              <Icon
-                name="lucide:loader-2"
-                class="animate-spin h-5 w-5 text-primary"
-              />
-            </div>
-
-            <ShadCommandEmpty
+]"
+                  @click="() => handleSelect(option.value)"
+                >
+                  <ShadCheckbox
+                    v-if="props.multiple"
+                    :model-value="isSelected(option.value)"
+                    :disabled="isOptionDisabled(option.value)"
+                    class="mr-2 pointer-events-none"
+                  />
+
+                  {{ option.label }}
+                  <Icon
+                    v-if="!props.multiple && isSelected(option.value)"
+                    name="lucide:check"
+                    class="ml-auto h-4 w-4"
+                  />
+                </ShadCommandItem>
+              </slot>
+            </ShadCommandGroup>
+
+            <!-- Loading Indicator -->
+            <div
+              v-if="props.fetchFn && paginationState.loading"
+              class="flex justify-center p-2"
+            >
+              <Icon
+                name="lucide:loader-2"
+                class="animate-spin h-5 w-5 text-primary"
+              />
+            </div>
+
+            <ShadCommandEmpty
               :force-show="
   (!resolvedOptions || resolvedOptions.length === 0) && !(props.fetchFn && paginationState.loading)
-"
-            />
-          </ShadCommandList>
-        </ShadCommand>
-      </slot>
-    </ShadPopoverContent>
-  </ShadPopover>
+"
+            />
+          </ShadCommandList>
+        </ShadCommand>
+      </slot>
+    </ShadPopoverContent>
+  </ShadPopover>
 </template>
 
 <script setup>

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

@@ -1,10 +1,10 @@
 <template>
-  <div
-    contenteditable="true"
-    ref="editorRef"
-    @input="onInput"
-    class="w-full min-h-[40px] px-[12px] py-[8px] font-body-large bg-white ring-[1px] ring-cloud rounded-[8px] outline-none focus:outline-none focus:ring-[2px] focus:ring-primary whitespace-pre-wrap break-words text-black"
-  />
+  <div
+    contenteditable="true"
+    ref="editorRef"
+    @input="onInput"
+    class="w-full min-h-[40px] px-[12px] py-[8px] font-body-large bg-white ring-[1px] ring-cloud rounded-[8px] outline-none focus:outline-none focus:ring-[2px] focus:ring-primary whitespace-pre-wrap break-words text-black"
+  />
 </template>
 
 <script setup>

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

@@ -1,38 +1,38 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="defaultRules"
-    v-slot="{ componentField, 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>
-
-      <div
-        class="quill-wrapper"
-        :class="{ 'drag-not-allowed': isDraggingMedia }"
-      >
-        <div
-          ref="contentRef"
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="defaultRules"
+    v-slot="{ componentField, 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>
+
+      <div
+        class="quill-wrapper"
+        :class="{ 'drag-not-allowed': isDraggingMedia }"
+      >
+        <div
+          ref="contentRef"
           :style="{
   '--height': `${props.height}px`
-}"
-        />
-      </div>
-
-      <ShadFormDescription v-if="props.description">
-        {{ props.description }}
-      </ShadFormDescription>
-    </ShadFormItem>
-  </ShadFormField>
+}"
+        />
+      </div>
+
+      <ShadFormDescription v-if="props.description">
+        {{ props.description }}
+      </ShadFormDescription>
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>

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>