pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,123 +1,123 @@
 <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
-      class="flex flex-col overflow-y-auto max-h-[var(--reka-popover-content-available-height)] min-w-[min(320px,calc(100vw-16px))]"
-      align="start"
-      :collision-padding="8"
-      @openAutoFocus.prevent
-    >
-      <slot name="popover-content" :close="() => popoverOpen = false">
-        <ShadCommand
-          class="min-h-0"
-          :should-filter="!props.fetchFn && !hasCustomOptionsSlot"
-        >
-          <ShadCommandInput
-            v-model="searchQuery"
-            :placeholder="props.placeholderSearch"
-          />
-          <ShadCommandList
-            ref="commandListRef"
-            :class="['min-h-0', props.commandListClass]"
-          >
-            <ShadCommandGroup
-              v-if="resolvedOptions && resolvedOptions.length > 0 || hasCustomOptionsSlot"
-            >
-              <slot name="options" :search="searchQuery">
-                <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
+      class="flex flex-col overflow-y-auto max-h-[var(--reka-popover-content-available-height)] min-w-[min(320px,calc(100vw-16px))]"
+      align="start"
+      :collision-padding="8"
+      @openAutoFocus.prevent
+    >
+      <slot name="popover-content" :close="() => popoverOpen = false">
+        <ShadCommand
+          class="min-h-0"
+          :should-filter="!props.fetchFn && !hasCustomOptionsSlot"
+        >
+          <ShadCommandInput
+            v-model="searchQuery"
+            :placeholder="props.placeholderSearch"
+          />
+          <ShadCommandList
+            ref="commandListRef"
+            :class="['min-h-0', props.commandListClass]"
+          >
+            <ShadCommandGroup
+              v-if="resolvedOptions && resolvedOptions.length > 0 || hasCustomOptionsSlot"
+            >
+              <slot name="options" :search="searchQuery">
+                <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
-              v-if="!hasCustomOptionsSlot"
+]"
+                  @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
+              v-if="!hasCustomOptionsSlot"
               :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,54 +1,54 @@
 <template>
-  <!-- Figma "Input - Comments / Reply" (2456:53525 → 1981:2017): avatar + ช่องพิมพ์ / ปุ่มชิดขวา -->
-  <div :class="['flex flex-col gap-[16px] items-end w-full', props.class]">
-    <!-- focusin (ไม่ใช่ focus) เพราะต้องการให้ bubble ขึ้นมาจากช่องพิมพ์ข้างใน -->
-    <div class="flex gap-[8px] items-start w-full" @focusin="isFocused = true">
-      <!-- pt-[5px] ดันอวาตาร์ลงให้ตรงบรรทัดแรกของข้อความ (Figma 2477:33564) -->
-      <div
-        v-if="!props.disabledAvatar"
-        class="flex items-center pt-[5px] shrink-0"
-      >
-        <Avatar :src="props.avatar" :size="30" />
-      </div>
-      <div
-        ref="editorRef"
-        :contenteditable="isLocked ? 'false' : 'true'"
-        :data-placeholder="props.placeholder"
+  <!-- Figma "Input - Comments / Reply" (2456:53525 → 1981:2017): avatar + ช่องพิมพ์ / ปุ่มชิดขวา -->
+  <div :class="['flex flex-col gap-[16px] items-end w-full', props.class]">
+    <!-- focusin (ไม่ใช่ focus) เพราะต้องการให้ bubble ขึ้นมาจากช่องพิมพ์ข้างใน -->
+    <div class="flex gap-[8px] items-start w-full" @focusin="isFocused = true">
+      <!-- pt-[5px] ดันอวาตาร์ลงให้ตรงบรรทัดแรกของข้อความ (Figma 2477:33564) -->
+      <div
+        v-if="!props.disabledAvatar"
+        class="flex items-center pt-[5px] shrink-0"
+      >
+        <Avatar :src="props.avatar" :size="30" />
+      </div>
+      <div
+        ref="editorRef"
+        :contenteditable="isLocked ? 'false' : 'true'"
+        :data-placeholder="props.placeholder"
         :class="[
   'relative flex-1 min-w-0 min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury bg-white shadow-xs font-body-large text-black',
   'whitespace-pre-wrap break-words outline-none focus:outline-none focus:ring-2 focus:ring-primary',
   isEmpty && 'before:content-[attr(data-placeholder)] before:text-gray before:absolute before:pointer-events-none',
   isLocked && 'opacity-50 cursor-not-allowed'
-]"
-        @input="onInput"
-        @keydown.enter.exact.prevent="onEnter"
-        @keydown.shift.enter.prevent="onInsertLineBreak"
-      />
-    </div>
-
-    <div
-      v-if="isActionsVisible"
-      class="flex gap-[8px] items-center justify-end w-full"
-    >
-      <Button
-        variant="outline"
-        size="sm"
-        :disabled="props.loading"
-        @click="onCancel"
-      >
-        {{ props.cancelText }}
-      </Button>
-      <Button
-        color="primary"
-        size="sm"
-        :disabled="!modelValue.trim() || props.loading"
-        :loading="props.loading"
-        @click="onEnter"
-      >
-        {{ props.submitText }}
-      </Button>
-    </div>
-  </div>
+]"
+        @input="onInput"
+        @keydown.enter.exact.prevent="onEnter"
+        @keydown.shift.enter.prevent="onInsertLineBreak"
+      />
+    </div>
+
+    <div
+      v-if="isActionsVisible"
+      class="flex gap-[8px] items-center justify-end w-full"
+    >
+      <Button
+        variant="outline"
+        size="sm"
+        :disabled="props.loading"
+        @click="onCancel"
+      >
+        {{ props.cancelText }}
+      </Button>
+      <Button
+        color="primary"
+        size="sm"
+        :disabled="!modelValue.trim() || props.loading"
+        :loading="props.loading"
+        @click="onEnter"
+      >
+        {{ props.submitText }}
+      </Button>
+    </div>
+  </div>
 </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-special.vue

@@ -1,130 +1,130 @@
 <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, i) in modelValue"
-          :key="i"
-          class="flex justify-between font-body-large"
-        >
-          <span>{{ formatDate(item.date) }}</span>
-          <div class="text-right flex flex-col items-end gap-1">
-            <span v-if="!item.isOpen">หยุดทำการ</span>
-            <span v-else-if="item.timeSlots.length === 0">เปิดตลอด 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
-    v-model="isOpenModal"
-    title="วันทำการพิเศษ"
-    @close="closeModal"
-    class="w-[512px]"
-    :content-max-height="450"
-  >
-    <div class="flex flex-col gap-[24px]">
-      <div
-        v-for="(day, dayIndex) in workingDays"
-        :key="day.id"
-        class="flex flex-col gap-[16px]"
-      >
-        <InputDatePicker
-          :name="`special-date-${day.id}`"
-          v-model="day.date"
-          label="วันที่"
-          placeholder="เลือกวันที่"
-          :min-value="today"
-        />
-
-        <div class="flex gap-6">
-          <InputCheckbox
-            label="เปิดตลอด 24 ชม."
-            :model-value="day.isAllDay"
-            @update:model-value="(v) => setAllDay(day, v)"
-          />
-          <InputCheckbox
-            label="หยุดทำการ"
-            :model-value="day.isClosed"
-            @update:model-value="(v) => setClosed(day, v)"
-          />
-        </div>
-
-        <div
-          v-if="!day.isClosed && !day.isAllDay"
-          class="flex flex-col gap-[8px]"
-        >
-          <div
-            v-for="(timeSlot, slotIndex) in day.timeSlots"
-            :key="timeSlot.id"
-            class="flex items-end justify-between gap-2"
-          >
-            <InputSelect
-              :name="`special-time-start-${timeSlot.id}`"
-              v-model="timeSlot.start"
-              label="เวลาเปิด"
-              :options="timeOptions"
-              placeholder="00:00"
-            />
-            <InputSelect
-              :name="`special-time-end-${timeSlot.id}`"
-              v-model="timeSlot.end"
-              label="เวลาปิด"
-              :options="timeOptions"
-              placeholder="00:00"
-            />
-
-            <PickerOptionMenu
-              :items="getTimeSlotMenuItems(dayIndex, slotIndex)"
-            />
-          </div>
-        </div>
-      </div>
-
-      <Button
-        variant="text"
-        color="primary"
-        size="sm"
-        class="justify-start"
-        @click="addDay"
-      >
-        <Icon name="lucide:plus" :size="16" />
-        เพิ่มวันที่
-      </Button>
-    </div>
-
-    <template #footer>
-      <div class="flex w-full justify-end">
-        <Button color="primary" :disabled="!isScheduleValid" @click="saveDays"
-          >บันทึก</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, i) in modelValue"
+          :key="i"
+          class="flex justify-between font-body-large"
+        >
+          <span>{{ formatDate(item.date) }}</span>
+          <div class="text-right flex flex-col items-end gap-1">
+            <span v-if="!item.isOpen">หยุดทำการ</span>
+            <span v-else-if="item.timeSlots.length === 0">เปิดตลอด 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
+    v-model="isOpenModal"
+    title="วันทำการพิเศษ"
+    @close="closeModal"
+    class="w-[512px]"
+    :content-max-height="450"
+  >
+    <div class="flex flex-col gap-[24px]">
+      <div
+        v-for="(day, dayIndex) in workingDays"
+        :key="day.id"
+        class="flex flex-col gap-[16px]"
+      >
+        <InputDatePicker
+          :name="`special-date-${day.id}`"
+          v-model="day.date"
+          label="วันที่"
+          placeholder="เลือกวันที่"
+          :min-value="today"
+        />
+
+        <div class="flex gap-6">
+          <InputCheckbox
+            label="เปิดตลอด 24 ชม."
+            :model-value="day.isAllDay"
+            @update:model-value="(v) => setAllDay(day, v)"
+          />
+          <InputCheckbox
+            label="หยุดทำการ"
+            :model-value="day.isClosed"
+            @update:model-value="(v) => setClosed(day, v)"
+          />
+        </div>
+
+        <div
+          v-if="!day.isClosed && !day.isAllDay"
+          class="flex flex-col gap-[8px]"
+        >
+          <div
+            v-for="(timeSlot, slotIndex) in day.timeSlots"
+            :key="timeSlot.id"
+            class="flex items-end justify-between gap-2"
+          >
+            <InputSelect
+              :name="`special-time-start-${timeSlot.id}`"
+              v-model="timeSlot.start"
+              label="เวลาเปิด"
+              :options="timeOptions"
+              placeholder="00:00"
+            />
+            <InputSelect
+              :name="`special-time-end-${timeSlot.id}`"
+              v-model="timeSlot.end"
+              label="เวลาปิด"
+              :options="timeOptions"
+              placeholder="00:00"
+            />
+
+            <PickerOptionMenu
+              :items="getTimeSlotMenuItems(dayIndex, slotIndex)"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Button
+        variant="text"
+        color="primary"
+        size="sm"
+        class="justify-start"
+        @click="addDay"
+      >
+        <Icon name="lucide:plus" :size="16" />
+        เพิ่มวันที่
+      </Button>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <Button color="primary" :disabled="!isScheduleValid" @click="saveDays"
+          >บันทึก</Button
+        >
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup>