pukaad-ui-lib 1.2.0 → 1.3.1

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

@@ -1,92 +1,93 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField }"
-    v-model="modelValue"
-  >
-    <ShadFormItem>
-      <ShadFormLabel v-if="$slots.label || props.label" class="w-full">
-        <slot name="label">
-          <div
+  <ShadFormField
+    ref="fieldRef"
+    :name="props.name"
+    :rules="props.rules || defaultRules"
+    v-slot="{ componentField }"
+    v-model="modelValue"
+  >
+    <ShadFormItem>
+      <ShadFormLabel v-if="$slots.label || props.label" class="w-full">
+        <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"
-          :class="[props.disabledBorder && 'font-body-small']"
-        >
-          <div
-            v-if="props.limit > 0"
+]"
+          >
+            {{ props.label }}
+            <span v-if="props.required" class="text-destructive">*</span>
+          </div>
+        </slot>
+        <div
+          v-if="props.showCounter"
+          :class="[props.disabledBorder && 'font-body-small']"
+        >
+          <div
+            v-if="props.limit > 0"
             :class="[
   (props.multiple ? modelValue.length : modelValue.length) > props.limit && 'text-destructive'
-]"
-          >
-            {{
-              props.multiple ? modelValue.length : modelValue.length
-            }}/{{ props.limit }}
-          </div>
-        </div>
-      </ShadFormLabel>
-      <ShadPopover v-bind="componentField">
-        <ShadPopoverTrigger as-child>
-          <ShadFormControl>
-            <ShadButton
-              variant="outline"
-              role="combobox"
-              class="w-full justify-between text-start"
-            >
-              {{ displayValue }}
-              <Icon name="lucide:chevrons-up-down" class="h-4 w-4" />
-            </ShadButton>
-          </ShadFormControl>
-        </ShadPopoverTrigger>
-        <ShadPopoverContent>
-          <ShadCommand>
-            <ShadCommandInput />
-            <ShadCommandList>
-              <ShadCommandGroup>
-                <slot name="options">
-                  <ShadCommandItem
-                    v-for="option in options"
-                    :key="option.value"
-                    :value="option.value"
-                    :disabled="isOptionDisabled(option.value)"
+]"
+          >
+            {{
+              props.multiple ? modelValue.length : modelValue.length
+            }}/{{ props.limit }}
+          </div>
+        </div>
+      </ShadFormLabel>
+      <ShadPopover v-bind="componentField">
+        <ShadPopoverTrigger as-child>
+          <ShadFormControl>
+            <ShadButton
+              variant="outline"
+              role="combobox"
+              class="w-full justify-between text-start"
+            >
+              {{ displayValue }}
+              <Icon name="lucide:chevrons-up-down" class="h-4 w-4" />
+            </ShadButton>
+          </ShadFormControl>
+        </ShadPopoverTrigger>
+        <ShadPopoverContent>
+          <ShadCommand>
+            <ShadCommandInput />
+            <ShadCommandList>
+              <ShadCommandGroup>
+                <slot name="options">
+                  <ShadCommandItem
+                    v-for="option in options"
+                    :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>
-              <ShadCommandEmpty />
-            </ShadCommandList>
-          </ShadCommand>
-        </ShadPopoverContent>
-      </ShadPopover>
-    </ShadFormItem>
-  </ShadFormField>
+]"
+                    @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>
+              <ShadCommandEmpty />
+            </ShadCommandList>
+          </ShadCommand>
+        </ShadPopoverContent>
+      </ShadPopover>
+      <ShadFormMessage />
+    </ShadFormItem>
+  </ShadFormField>
 </template>
 
 <script setup>
@@ -169,4 +170,19 @@ const handleSelect = (value) => {
     popoverOpen.value = false;
   }
 };
+const validate = async () => {
+  if (fieldRef.value) {
+    const result = await fieldRef.value.validate();
+    return result.valid;
+  }
+  return true;
+};
+const setErrors = (errMsg) => {
+  fieldRef.value?.setErrors(errMsg);
+};
+defineExpose({
+  validate,
+  setErrors,
+  fieldRef
+});
 </script>

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

@@ -25,7 +25,11 @@ type __VLS_Slots = {} & {
 } & {
     options?: (props: typeof __VLS_70) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    validate: () => Promise<any>;
+    setErrors: (errMsg: string[]) => void;
+    fieldRef: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;

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,9 +1,9 @@
 <template>
-  <div>
-    <div class="quill-wrapper">
-      <div ref="contentRef" :style="{ '--height': `${props.height}px` }" />
-    </div>
-  </div>
+  <div>
+    <div class="quill-wrapper">
+      <div ref="contentRef" :style="{ '--height': `${props.height}px` }" />
+    </div>
+  </div>
 </template>
 
 <script setup>

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

@@ -1,180 +1,179 @@
 <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

@@ -5,7 +5,7 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_22: {
-    label: any;
+    label: string;
 }, __VLS_29: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_22) => any;
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     label: string;
     name: string;
     limit: number;
-    disabledErrorMessage: boolean;
     accept: string;
+    disabledErrorMessage: boolean;
     labelIcon: string;
     disabledDrop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;