pukaad-ui-lib 1.0.1

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

@@ -0,0 +1,51 @@
+<template>
+  <ShadFormField :rules="defaultRules" :name="props.name" v-model="modelValue">
+    <ShadFormItem>
+      <ShadPinInput
+        :id="props.id || props.name"
+        :disabled="props.disabled"
+        @complete="handleComplete"
+        v-model="pin"
+      >
+        <ShadPinInputGroup>
+          <ShadFormControl v-for="(n, i) in props.digit" :key="n" :index="i">
+            <ShadPinInputSlot />
+          </ShadFormControl>
+        </ShadPinInputGroup>
+      </ShadPinInput>
+    </ShadFormItem>
+  </ShadFormField>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  id: { type: String, required: false, default: "input-otp" },
+  name: { type: String, required: false, default: "input-otp" },
+  digit: { type: [Number, String], required: false, default: 6 },
+  rules: { type: [Object, String, Function], required: false },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const defaultRules = (v) => {
+  if (!v) return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01 otp";
+  return true;
+};
+const pin = ref([]);
+const modelValue = defineModel({ type: String, ...{
+  default: ""
+} });
+const handleComplete = (v) => {
+  modelValue.value = v.join("");
+};
+watch(
+  pin,
+  () => {
+    if (pin.value.length < Number(props.digit)) {
+      modelValue.value = "";
+    }
+  },
+  {
+    immediate: true
+  }
+);
+</script>

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

@@ -0,0 +1,24 @@
+export interface InputOTPProps {
+    id?: string;
+    name?: string;
+    digit?: number | string;
+    rules?: object | string | Function;
+    disabled?: boolean;
+}
+type __VLS_Props = InputOTPProps;
+type __VLS_ModelProps = {
+    modelValue?: 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;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    id: string;
+    name: string;
+    disabled: boolean;
+    digit: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,87 @@
+<template>
+  <!-- <div class="space-y-[16px]">
+    <Dropdown full-width v-model="isOpen">
+      <InputTextField
+        name="address"
+        label="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
+        placeholder="จังหวัด, อำเภอ/เขต, ตำบล/แขวง, รหัสไปรษณีย์"
+        input-class="cursor-pointer"
+        readonly
+        :full-width="props.fullWidth"
+        append-icon="solar:alt-arrow-down-line-duotone"
+        v-model="addressValue"
+      />
+      <template #content>
+        <Tab
+          :items="typeAddress"
+          type="text"
+          tab-content-gab="0"
+          v-model="tabValue"
+        >
+          <template #tab-content-provinces>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                v-for="(pro, i_pro) in getProvince()"
+                :key="i_pro"
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectProvince(pro)"
+              >
+                {{ pro.name_th }}
+              </li>
+            </ul>
+          </template>
+
+          <template #tab-content-districts>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                v-for="(dist, i_dist) in getDistrict({ pro_code: provineCode })"
+                :key="i_dist"
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectDistrict(dist)"
+              >
+                {{ dist.name_th }}
+              </li>
+            </ul>
+          </template>
+
+          <template #tab-content-sub-districts>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                v-for="(sub, i_sub) in getSubDistrict({
+                  dist_code: districtCode,
+                })"
+                :key="i_sub"
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectSubDistrict(sub)"
+              >
+                {{ sub.name_th }}
+              </li>
+            </ul>
+          </template>
+
+          <template #tab-content-zip-code>
+            <ul class="h-96 overflow-y-auto">
+              <li
+                class="p-2 border-b-[1px] border-mercury cursor-pointer"
+                @click="onSelectZipCode"
+              >
+                {{ zipCode }}
+              </li>
+            </ul>
+          </template>
+        </Tab>
+      </template>
+    </Dropdown>
+    <InputTextField
+      label="บ้านเลขที่, ซอย, หมู่, ถนน"
+      placeholder="บ้านเลขที่, ซอย, หมู่, ถนน"
+      :full-width="props.fullWidth"
+      :disabled="isDisabledAddressDetail"
+      v-model="addressDetailValue"
+    />
+  </div> -->
+</template>
+
+<script setup>
+
+</script>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,29 @@
+interface TypeItem {
+    label: string | number;
+    value: string | number;
+}
+type __VLS_Props = {
+    label?: string;
+    items?: TypeItem[] | string[] | number[];
+    placeholder?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    fullWidthContent?: boolean;
+    multiple?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number | TypeItem[] | undefined;
+};
+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 | number | TypeItem[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | TypeItem[] | undefined) => any) | undefined;
+}>, {
+    items: TypeItem[] | string[] | number[];
+    fullWidth: boolean;
+    fullWidthContent: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,335 @@
+<template>
+  <Dropdown
+    :full-width="props.fullWidthContent"
+    disabledToggle
+    v-model="isOpenDropdown"
+  >
+   
+    <InputTextField
+      v-if="props.multiple"
+      ref="hiddenInputRef"
+      :full-width="props.fullWidth"
+      v-model="searchQuery"
+      :placeholder="selectedItems.length === 0 ? getPlaceholder : ''"
+      :label="props.label"
+      :required="props.required"
+      @focus="onFocusInput"
+      @blur="onBlurInput"
+      @backspace="onBackspace"
+      :reset="false"
+    >
+      <template #inside>
+        <div
+          v-if="selectedItems.length > 0"
+          class="flex flex-wrap items-center gap-2"
+        >
+          <span
+            v-for="(item, index) in selectedItems"
+            :key="item.value"
+            :class="[
+  'inline-flex font-body-large',
+  chipToDelete && index === selectedItems.length - 1 ? 'text-primary' : ''
+]"
+          >
+            {{ item.label }}{{ index !== selectedItems.length - 1 ? "," : "" }}
+          </span>
+        </div>
+      </template>
+
+      <template #append>
+        <template v-if="selectedItems.length > 0">
+          <Icon
+            name="fa6-solid:xmark"
+            class="cursor-pointer"
+            @click="clearAllSelections"
+          />
+        </template>
+        <template v-else>
+          <Icon
+            :name="isOpenDropdown ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+          />
+        </template>
+      </template>
+    </InputTextField>
+
+    <InputTextField
+      v-else
+      ref="inputFieldRef"
+      :full-width="props.fullWidth"
+      :placeholder="getPlaceholder"
+      :label="props.label"
+      :required="props.required"
+      @focus="onFocusInput"
+      @blur="onBlurInput"
+      @backspace="onBackspace"
+      :append-icon="
+  isOpenDropdown ? 'lucide:chevron-up' : 'lucide:chevron-down'
+"
+      :reset="true"
+      v-model="displayValue"
+    />
+
+    <template #content>
+      <ul v-if="items.length > 0" class="max-h-96 overflow-y-auto">
+        <li
+          v-for="(item, index) in items"
+          :key="index"
+          :class="[
+  'hover:bg-smoke font-body-large',
+  index === 0 && 'rounded-t-[8px]',
+  index === items.length - 1 && 'rounded-b-[8px]',
+  index !== items.length - 1 && 'border-b-[1px] border-cloud',
+  props.multiple ? 'p-2' : 'p-[8px] cursor-pointer'
+]"
+          @click="!props.multiple && onSelectItem(item)"
+          @mousedown="props.multiple && $event.preventDefault()"
+        >
+          <div v-if="props.multiple" class="flex items-center">
+            <InputCheckbox
+              :model-value="isItemSelected(item)"
+              @change="() => toggleItemSelection(item)"
+              :label="String(item.label)"
+              label-position="right"
+              :label-gap="8"
+              :key="`checkbox-${item.value}-${isItemSelected(item)}`"
+            />
+          </div>
+          <template v-else>
+            {{ item.label }}
+          </template>
+        </li>
+      </ul>
+
+     
+      <div v-else class="h-[165px] flex justify-center items-center">
+        <div class="flex flex-col justify-center">
+          <Icon name="pukaad:page-not-found" size="70" />
+          <div class="font-body-large text-center">ไม่พบข้อมูล</div>
+        </div>
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  items: { type: Array, required: false, default: () => [] },
+  placeholder: { type: String, required: false },
+  fullWidth: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false },
+  fullWidthContent: { type: Boolean, required: false, default: true },
+  multiple: { type: Boolean, required: false, default: false }
+});
+const modelValue = defineModel({ type: null });
+const isOpenDropdown = ref(false);
+const isSearching = ref(false);
+const chipToDelete = ref(false);
+const textFieldValue = ref("");
+const searchQuery = ref("");
+const selectedItems = ref([]);
+const inputFieldRef = ref();
+const hiddenInputRef = ref();
+const normalizeItems = (items2) => {
+  if (isArrayOfObjects(items2)) {
+    return items2;
+  }
+  return items2.map((item) => ({
+    label: item,
+    value: item
+  }));
+};
+const isArrayOfObjects = (arr) => {
+  return Array.isArray(arr) && arr.every(
+    (item) => typeof item === "object" && item !== null && !Array.isArray(item)
+  );
+};
+const getCurrentSelectedLabel = () => {
+  if (!modelValue.value) return "";
+  const selectedItem = props.items.find((item) => {
+    if (typeof item === "object") {
+      return item.value === modelValue.value;
+    } else {
+      return item === modelValue.value;
+    }
+  });
+  return selectedItem ? typeof selectedItem === "object" ? String(selectedItem.label) : String(selectedItem) : "";
+};
+const getPlaceholder = computed(() => {
+  return props.placeholder || "";
+});
+const displayValue = computed({
+  get() {
+    return textFieldValue.value;
+  },
+  set(value) {
+    onInputChange(value);
+  }
+});
+const items = computed(() => {
+  const normalizedItems = normalizeItems(props.items);
+  const filterText = props.multiple ? searchQuery.value : textFieldValue.value;
+  if (!props.multiple && modelValue.value && !isSearching.value) {
+    return normalizedItems;
+  }
+  return normalizedItems.filter((item) => {
+    return String(item.label).toLowerCase().includes(filterText.toLowerCase());
+  });
+});
+watch(
+  () => modelValue.value,
+  (newValue) => {
+    if (props.multiple) {
+      selectedItems.value = Array.isArray(newValue) ? newValue : [];
+    } else {
+      if (newValue !== void 0 && newValue !== null) {
+        const selectedItem = items.value.find(
+          (item) => item.value === newValue
+        );
+        textFieldValue.value = selectedItem ? String(selectedItem.label) : String(newValue);
+        isSearching.value = false;
+      } else {
+        textFieldValue.value = "";
+        isSearching.value = false;
+      }
+    }
+  },
+  { immediate: true }
+);
+watch(
+  selectedItems,
+  (newItems) => {
+    if (props.multiple) {
+      modelValue.value = newItems;
+    }
+  },
+  { deep: true }
+);
+watch(searchQuery, (newValue) => {
+  if (newValue.trim()) {
+    chipToDelete.value = false;
+  }
+});
+watch(textFieldValue, (newValue) => {
+  if (!props.multiple && (!newValue || newValue.trim() === "")) {
+    if (modelValue.value !== void 0) {
+      modelValue.value = void 0;
+    }
+  }
+});
+const onSelectItem = (item) => {
+  if (!props.multiple) {
+    modelValue.value = item.value;
+    textFieldValue.value = String(item.label);
+    isSearching.value = false;
+    isOpenDropdown.value = false;
+  }
+};
+const isItemSelected = (item) => {
+  return selectedItems.value.some((selected) => selected.value === item.value);
+};
+const toggleItemSelection = async (item) => {
+  const isSelected = selectedItems.value.some(
+    (selected) => selected.value === item.value
+  );
+  if (isSelected) {
+    selectedItems.value = selectedItems.value.filter(
+      (selected) => selected.value !== item.value
+    );
+  } else {
+    selectedItems.value = [...selectedItems.value, item];
+  }
+  searchQuery.value = "";
+  chipToDelete.value = false;
+  await nextTick();
+  if (props.multiple && hiddenInputRef.value?.inputRef) {
+    hiddenInputRef.value.inputRef.focus();
+  }
+};
+const removeSelectedItem = async (item) => {
+  selectedItems.value = selectedItems.value.filter(
+    (selected) => selected.value !== item.value
+  );
+  chipToDelete.value = false;
+  await nextTick();
+};
+const clearAllSelections = () => {
+  selectedItems.value = [];
+  searchQuery.value = "";
+  chipToDelete.value = false;
+  modelValue.value = [];
+  textFieldValue.value = "";
+};
+const onFocusInput = () => {
+  isOpenDropdown.value = true;
+  chipToDelete.value = false;
+  if (!props.multiple && modelValue.value) {
+    isSearching.value = false;
+  }
+};
+const onBlurInput = () => {
+  if (props.multiple) {
+    return;
+  } else {
+    setTimeout(() => {
+      isOpenDropdown.value = false;
+      chipToDelete.value = false;
+    }, 200);
+  }
+};
+const onBackspace = (event) => {
+  if (props.multiple) {
+    const isSearchQueryEmpty = !searchQuery.value || searchQuery.value.trim() === "";
+    const hasSelectedItems = selectedItems.value.length > 0;
+    if (isSearchQueryEmpty && hasSelectedItems) {
+      event.preventDefault();
+      if (!chipToDelete.value) {
+        chipToDelete.value = true;
+      } else {
+        const lastItem = selectedItems.value[selectedItems.value.length - 1];
+        if (lastItem) {
+          removeSelectedItem(lastItem);
+        }
+      }
+    } else {
+      chipToDelete.value = false;
+    }
+  }
+};
+const onInputChange = (value) => {
+  if (!props.multiple) {
+    textFieldValue.value = value;
+    if (!value || value.trim() === "") {
+      modelValue.value = void 0;
+      isSearching.value = false;
+      return;
+    }
+    if (value !== String(getCurrentSelectedLabel())) {
+      isSearching.value = true;
+    } else {
+      isSearching.value = false;
+    }
+  }
+};
+const handleClickOutside = (event) => {
+  if (!props.multiple || !isOpenDropdown.value) return;
+  const target = event.target;
+  const dropdownEl = document.querySelector("[data-dropdown-content]");
+  const inputEl = hiddenInputRef.value?.$el || hiddenInputRef.value?.inputRef;
+  if (dropdownEl && inputEl && !dropdownEl.contains(target) && !inputEl.contains(target)) {
+    isOpenDropdown.value = false;
+    chipToDelete.value = false;
+  }
+};
+onMounted(() => {
+  if (props.multiple) {
+    document.addEventListener("click", handleClickOutside);
+  }
+});
+onUnmounted(() => {
+  if (props.multiple) {
+    document.removeEventListener("click", handleClickOutside);
+  }
+});
+</script>

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

@@ -0,0 +1,29 @@
+interface TypeItem {
+    label: string | number;
+    value: string | number;
+}
+type __VLS_Props = {
+    label?: string;
+    items?: TypeItem[] | string[] | number[];
+    placeholder?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    fullWidthContent?: boolean;
+    multiple?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number | TypeItem[] | undefined;
+};
+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 | number | TypeItem[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | TypeItem[] | undefined) => any) | undefined;
+}>, {
+    items: TypeItem[] | string[] | number[];
+    fullWidth: boolean;
+    fullWidthContent: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+export interface InputCheckboxProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    rules?: object | string | Function;
+}
+type __VLS_Props = InputCheckboxProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    name: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;