pukaad-ui-lib 1.3.3 → 1.4.2

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

@@ -1,179 +1,180 @@
 <template>
-  <!-- <InputTextField
-    v-if="!isConfirmed"
-    :label="props.label"
-    :placeholder="props.placeholder"
-    :full-width="props.fullWidth"
-    :required="props.required"
-    :disabled="props.disabled"
-    :readonly="props.readonly"
-    :width="props.width"
-    :height="props.height"
-    :append-icon="props.prependIcon"
-    @click="openModal"
-  />
-
-  <div v-else class="flex flex-col gap-[4px]">
-    <div class="text-gray font-body-large-prominent">วัน เวลาทำการ</div>
-    <Card variant="outline" full-width>
-      <div
-        class="flex gap-[8px] w-full items-center cursor-pointer"
-        @click="openModal"
-      >
-        <div class="flex w-[432px] gap-[8px] flex-col">
-          <div
-            v-for="item in schedules"
-            :key="item.day"
-            class="flex justify-between"
-          >
-            <div class="font-body-large">{{ getDayName(item.day) }}</div>
-            <div>
-              <div v-if="!item.isOpen" class="flex items-center gap-2">
-                <span>หยุดทำการ</span>
-              </div>
-              <div v-else-if="item.is24Hours" class="flex items-center gap-2">
-                <span>เปิด 24 ชั่วโมง</span>
-              </div>
-              <div v-else class="space-y-1">
-                <div
-                  v-for="(time, index) in item.timeSlots"
-                  :key="index"
-                  class="flex items-center gap-2"
-                >
-                  <span>{{ time.start }} - {{ time.end }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <Icon name="lucide:chevron-right" :size="24" />
-      </div>
-    </Card>
-  </div> 
-
-<Modal
-    title="วัน เวลาทำการ"
-    v-model="isOpenModal"
-    divider
-    :width="604"
-    @close="closeModal"
-  >
-    <div v-if="!isEditMode" class="p-4 space-y-4">
-      <div
-        v-for="schedule in schedules"
-        :key="schedule.day"
-        class="flex justify-between"
-      >
-        <div class="w-32 font-medium">{{ getDayName(schedule.day) }}</div>
-
-        <div class="w-40">
-          <div v-if="!schedule.isOpen" class="flex items-center gap-2">
-            <Icon name="lucide:clock" size="20" />
-            <span>หยุดทำการ</span>
-          </div>
-          <div v-else-if="schedule.is24Hours" class="flex items-center gap-2">
-            <Icon name="lucide:clock" size="20" />
-            <span>เปิด 24 ชั่วโมง</span>
-          </div>
-          <div v-else class="space-y-1">
-            <div
-              v-for="(time, index) in schedule.timeSlots"
-              :key="index"
-              class="flex items-center gap-2"
-            >
-              <Icon name="lucide:clock" size="20" />
-              <span>{{ time.start }} - {{ time.end }}</span>
-            </div>
-          </div>
-        </div>
-
-        <Button
-          prepend-icon="lucide:square-pen"
-          :icon-size="20"
-          size="tiny"
-          variant="text"
-          color="black"
-          @click="editSchedule(schedule.day)"
-        />
-      </div>
-    </div>
-
-    <div v-else class="p-4 space-y-4">
-  
-      <div class="flex justify-between">
-        <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="isOpen24h" />
-        <InputCheckbox label="หยุดทำการ" v-model="isClosed" />
-      </div>
-      <div class="flex flex-col gap-6">
-        <div v-if="!isClosed && !isOpen24h" class="space-y-4">
-          <div
-            v-for="(timeSlot, index) in timeSlots"
-            :key="timeSlot.id"
-            class="flex justify-between w-full"
-          >
-            <InputSelect
-              :name="`time-slot-start-${timeSlot.id}`"
-              v-model="timeSlots[index]!.start"
-              label="เวลาเปิด"
-              :items="timeOptions"
-              :width="140"
-              placeholder="00:00"
-            />
-            <InputSelect
-              :name="`time-slot-end-${timeSlot.id}`"
-              v-model="timeSlots[index]!.end"
-              label="เวลาปิด"
-              :items="timeOptions"
-              :width="140"
-              placeholder="00:00"
-            />
-            <div class="flex items-end">
-              <Button
-                prepend-icon="lucide:trash-2"
-                variant="text"
-                color="error"
-                @click="removeTimeSlot(index)"
-              />
-            </div>
-          </div>
-        </div>
-        <div v-if="!isClosed && !isOpen24h">
-          <Button
-            disabled-padding
-            variant="text"
-            color="primary"
-            prepend-icon="lucide:plus"
-            size="small"
-            @click="addTimeSlot"
-            >เพิ่มเวลา</Button
-          >
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="flex w-full justify-end">
-        <Button v-if="!isEditMode" color="primary" @click="saveSchedules">
-          ยืนยัน
-        </Button>
-
-        <Button v-else color="primary" @click="confirmEditChanges">
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Modal> -->
+  <!-- <InputTextField
+    v-if="!isConfirmed"
+    :label="props.label"
+    :placeholder="props.placeholder"
+    :full-width="props.fullWidth"
+    :required="props.required"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :width="props.width"
+    :height="props.height"
+    :append-icon="props.prependIcon"
+    @click="openModal"
+  />
+
+  <div v-else class="flex flex-col gap-[4px]">
+    <div class="text-gray font-body-large-prominent">วัน เวลาทำการ</div>
+    <Card variant="outline" full-width>
+      <div
+        class="flex gap-[8px] w-full items-center cursor-pointer"
+        @click="openModal"
+      >
+        <div class="flex w-[432px] gap-[8px] flex-col">
+          <div
+            v-for="item in schedules"
+            :key="item.day"
+            class="flex justify-between"
+          >
+            <div class="font-body-large">{{ getDayName(item.day) }}</div>
+            <div>
+              <div v-if="!item.isOpen" class="flex items-center gap-2">
+                <span>หยุดทำการ</span>
+              </div>
+              <div v-else-if="item.is24Hours" class="flex items-center gap-2">
+                <span>เปิด 24 ชั่วโมง</span>
+              </div>
+              <div v-else class="space-y-1">
+                <div
+                  v-for="(time, index) in item.timeSlots"
+                  :key="index"
+                  class="flex items-center gap-2"
+                >
+                  <span>{{ time.start }} - {{ time.end }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Icon name="lucide:chevron-right" :size="24" />
+      </div>
+    </Card>
+  </div> 
+
+<Modal
+    title="วัน เวลาทำการ"
+    v-model="isOpenModal"
+    divider
+    :width="604"
+    @close="closeModal"
+  >
+    <div v-if="!isEditMode" class="p-4 space-y-4">
+      <div
+        v-for="schedule in schedules"
+        :key="schedule.day"
+        class="flex justify-between"
+      >
+        <div class="w-32 font-medium">{{ getDayName(schedule.day) }}</div>
+
+        <div class="w-40">
+          <div v-if="!schedule.isOpen" class="flex items-center gap-2">
+            <Icon name="lucide:clock" size="20" />
+            <span>หยุดทำการ</span>
+          </div>
+          <div v-else-if="schedule.is24Hours" class="flex items-center gap-2">
+            <Icon name="lucide:clock" size="20" />
+            <span>เปิด 24 ชั่วโมง</span>
+          </div>
+          <div v-else class="space-y-1">
+            <div
+              v-for="(time, index) in schedule.timeSlots"
+              :key="index"
+              class="flex items-center gap-2"
+            >
+              <Icon name="lucide:clock" size="20" />
+              <span>{{ time.start }} - {{ time.end }}</span>
+            </div>
+          </div>
+        </div>
+
+        <Button
+          prepend-icon="lucide:square-pen"
+          :icon-size="20"
+          size="tiny"
+          variant="text"
+          color="black"
+          @click="editSchedule(schedule.day)"
+        />
+      </div>
+    </div>
+
+    <div v-else class="p-4 space-y-4">
+  
+      <div class="flex justify-between">
+        <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="isOpen24h" />
+        <InputCheckbox label="หยุดทำการ" v-model="isClosed" />
+      </div>
+      <div class="flex flex-col gap-6">
+        <div v-if="!isClosed && !isOpen24h" class="space-y-4">
+          <div
+            v-for="(timeSlot, index) in timeSlots"
+            :key="timeSlot.id"
+            class="flex justify-between w-full"
+          >
+            <InputSelect
+              :name="`time-slot-start-${timeSlot.id}`"
+              v-model="timeSlots[index]!.start"
+              label="เวลาเปิด"
+              :items="timeOptions"
+              :width="140"
+              placeholder="00:00"
+            />
+            <InputSelect
+              :name="`time-slot-end-${timeSlot.id}`"
+              v-model="timeSlots[index]!.end"
+              label="เวลาปิด"
+              :items="timeOptions"
+              :width="140"
+              placeholder="00:00"
+            />
+            <div class="flex items-end">
+              <Button
+                prepend-icon="lucide:trash-2"
+                variant="text"
+                color="error"
+                @click="removeTimeSlot(index)"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-if="!isClosed && !isOpen24h">
+          <Button
+            disabled-padding
+            variant="text"
+            color="primary"
+            prepend-icon="lucide:plus"
+            size="small"
+            @click="addTimeSlot"
+            >เพิ่มเวลา</Button
+          >
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <Button v-if="!isEditMode" color="primary" @click="saveSchedules">
+          ยืนยัน
+        </Button>
+
+        <Button v-else color="primary" @click="confirmEditChanges">
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Modal> -->
 </template>
 
 <script setup>

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

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

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

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,87 +1,87 @@
 <template>
-  <div class="space-y-[4px]">
-    <div class="flex flex-wrap gap-[8px]">
-      <Draggable v-model="arrFiles">
-        <template #item="{ item, index }">
-          <div class="relative">
-            <video
-              v-if="item.type.startsWith('video')"
-              :src="createBlobUrl(item)"
-              class="rounded-[4px] object-cover w-[98px] h-[98px]"
-            />
-            <Image
-              v-else-if="item.type.startsWith('image')"
-              width="98"
-              height="98"
-              :src="createBlobUrl(item)"
-              class="rounded-[4px]"
-            />
-            <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 rounded-full cursor-pointer flex justify-center items-center"
-              @click="onDeleteImage(index)"
-            >
-              <Icon name="gravity-ui:xmark" size="16"></Icon>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-
-      <label
-        v-if="props.limit == 0 || arrFiles.length < props.limit"
+  <div class="space-y-[4px]">
+    <div class="flex flex-wrap gap-[8px]">
+      <Draggable v-model="arrFiles">
+        <template #item="{ item, index }">
+          <div class="relative">
+            <video
+              v-if="item.type.startsWith('video')"
+              :src="createBlobUrl(item)"
+              class="rounded-[4px] object-cover w-[98px] h-[98px]"
+            />
+            <Image
+              v-else-if="item.type.startsWith('image')"
+              width="98"
+              height="98"
+              :src="createBlobUrl(item)"
+              class="rounded-[4px]"
+            />
+            <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 rounded-full cursor-pointer flex justify-center items-center"
+              @click="onDeleteImage(index)"
+            >
+              <Icon name="gravity-ui:xmark" size="16"></Icon>
+            </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',
   actionOnDrop
-]"
+]"
         :style="{
   width: props.fullWidth ? '100%' : props.width,
   height: props.fullHeight ? '100%' : 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-file.vue.d.ts

@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,43 +1,43 @@
 <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`"
-          width="172"
-          :items="listOption"
-          @select="onSelectSocial(i)"
-          v-model="link.name"
-        />
-        <div class="flex-1">
-          <InputTextField
-            :name="`${props.name}[${i}]link`"
-            full-width
-            :placeholder="listSocial.find((f) => f.name === link.name)?.example"
-            :rules="(v) => rules(v, link.name)"
-            @change="onChangeLink(link, i)"
-            v-model="link.link"
-          />
-        </div>
-      </li>
-      <li>
-        <Button
-          type="text"
-          variant="primary"
-          disabled-padding
-          prepend-icon="lucide:plus"
-          @click="addLink"
-        >
-          เพิ่มช่องทาง
-        </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`"
+          width="172"
+          :items="listOption"
+          @select="onSelectSocial(i)"
+          v-model="link.name"
+        />
+        <div class="flex-1">
+          <InputTextField
+            :name="`${props.name}[${i}]link`"
+            full-width
+            :placeholder="listSocial.find((f) => f.name === link.name)?.example"
+            :rules="(v) => rules(v, link.name)"
+            @change="onChangeLink(link, i)"
+            v-model="link.link"
+          />
+        </div>
+      </li>
+      <li>
+        <Button
+          type="text"
+          variant="primary"
+          disabled-padding
+          prepend-icon="lucide:plus"
+          @click="addLink"
+        >
+          เพิ่มช่องทาง
+        </Button>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script setup>