pukaad-ui-lib 1.1.0 → 1.2.0

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

@@ -1,25 +1,172 @@
 <template>
-  <ShadFormField
-    ref="fieldRef"
-    :name="props.name"
-    :rules="props.rules || defaultRules"
-    v-slot="{ componentField }"
-    v-model="modelValue"
-  >
-    <ShadFormItem> </ShadFormItem>
-  </ShadFormField>
+  <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"
+            :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)"
+                    :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>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 const props = defineProps({
   name: { type: String, required: false, default: "input-combobox" },
-  rules: { type: [Object, String, Function], required: false }
+  rules: { type: [Object, String, Function], required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabledBorder: { type: Boolean, required: false },
+  showCounter: { type: Boolean, required: false },
+  limit: { type: Number, required: false, default: 0 },
+  placeholder: { type: String, required: false },
+  options: { type: Array, required: false },
+  multiple: { type: Boolean, required: false, default: false }
 });
-const modelValue = defineModel({ type: String, ...{
-  default: ""
+const modelValue = defineModel({ type: [String, Array], ...{
+  default: () => ""
 } });
+const popoverOpen = ref(false);
 const fieldRef = ref();
 const defaultRules = (v) => {
+  return true;
+};
+onMounted(() => {
+  if (props.multiple && modelValue.value === "") {
+    modelValue.value = [];
+  }
+});
+const displayValue = computed(() => {
+  if (props.multiple) {
+    const selectedValues = modelValue.value;
+    if (!selectedValues || selectedValues.length === 0) {
+      return props.placeholder || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+    }
+    const selectedLabels = selectedValues.map((val) => props.options?.find((opt) => opt.value === val)?.label).filter(Boolean);
+    return selectedLabels.length > 0 ? selectedLabels.join(", ") : props.placeholder || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+  } else {
+    const selectedOption = props.options?.find(
+      (opt) => opt.value === modelValue.value
+    );
+    return selectedOption?.label || props.placeholder || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+  }
+});
+const isLimitReached = computed(() => {
+  if (!props.multiple || props.limit <= 0) return false;
+  return modelValue.value.length >= props.limit;
+});
+const isSelected = (value) => {
+  if (props.multiple) {
+    const result = modelValue.value.includes(value);
+    return result;
+  } else {
+    return modelValue.value === value;
+  }
+};
+const isOptionDisabled = (value) => {
+  if (isLimitReached.value && !isSelected(value)) {
+    return true;
+  }
+  return false;
+};
+const handleSelect = (value) => {
+  if (props.multiple) {
+    const currentValues = modelValue.value || [];
+    if (currentValues.includes(value)) {
+      modelValue.value = currentValues.filter((v) => v !== value);
+    } else {
+      if (props.limit > 0 && currentValues.length >= props.limit) {
+        return;
+      }
+      modelValue.value = [...currentValues, value];
+    }
+  } else {
+    if (modelValue.value === value) {
+      modelValue.value = "";
+    } else {
+      modelValue.value = value;
+    }
+    popoverOpen.value = false;
+  }
 };
 </script>

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

@@ -1,18 +1,44 @@
 interface InputComboboxProps {
     name?: string;
     rules?: object | string | Function;
+    label?: string;
+    required?: boolean;
+    disabledBorder?: boolean;
+    showCounter?: boolean;
+    limit?: number;
+    placeholder?: string;
+    options?: InputComboboxOption[];
+    multiple?: boolean;
+}
+interface InputComboboxOption {
+    label: string;
+    value: string;
 }
 type __VLS_Props = InputComboboxProps;
 type __VLS_ModelProps = {
-    modelValue?: string;
+    modelValue?: string | string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+declare var __VLS_18: {}, __VLS_70: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_18) => any;
+} & {
+    options?: (props: typeof __VLS_70) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
     name: string;
+    limit: number;
+    multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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,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

@@ -5,7 +5,7 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_22: {
-    label: string;
+    label: any;
 }, __VLS_29: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_22) => any;