pukaad-ui-lib 1.418.0 → 1.420.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.418.0",
+  "version": "1.420.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/card/card-content/card-content-menu.vue

@@ -35,9 +35,24 @@ const onActionClick = (action) => {
 };
 const isPinned = computed(() => props.item?.pinned ?? props.isPinned);
 const isHidden = computed(() => props.item?.hidden ?? props.isHidden);
-const isBookmarked = computed(() => props.item?.bookmarked ?? props.isBookmarked);
+const isBookmarked = computed(
+  () => props.item?.bookmarked ?? props.isBookmarked
+);
 const actions = computed(() => {
   if (props.state === "my-content") {
+    const pinAction = props.hidePin ? [] : [{ name: "pin", icon: "lucide:pin", isActive: isPinned.value }];
+    return [
+      ...pinAction,
+      ...props.hidePreview ? [] : [{ name: "preview", icon: "lucide:tv-minimal-play" }],
+      {
+        name: "delete",
+        icon: "lucide:trash-2",
+        variant: "default",
+        color: "destructive"
+      }
+    ];
+  }
+  if (props.state === "business") {
     const result = [];
     if (!props.hidePin && !isHidden.value) {
       result.push({
@@ -93,6 +108,47 @@ const actions = computed(() => {
     }
     return result;
   }
+  if (props.state === "expired") {
+    return [
+      ...props.hidePreview ? [] : [{ name: "preview", icon: "lucide:tv-minimal-play" }],
+      { name: "renew", icon: "lucide:history" },
+      {
+        name: "delete",
+        icon: "lucide:trash-2",
+        variant: "default",
+        color: "destructive"
+      }
+    ];
+  }
+  if (props.state === "trash") {
+    return [
+      { name: "recover", icon: "lucide:rotate-ccw" },
+      {
+        name: "delete",
+        icon: "lucide:trash-2",
+        variant: "default",
+        color: "destructive"
+      }
+    ];
+  }
+  if (props.state === "draft") {
+    return [
+      {
+        name: "preview",
+        icon: "lucide:tv-minimal-play"
+      },
+      {
+        name: "edit",
+        icon: "lucide:square-pen"
+      },
+      {
+        name: "delete",
+        icon: "lucide:trash-2",
+        variant: "default",
+        color: "destructive"
+      }
+    ];
+  }
   return [];
 });
 const visibleActions = computed(

package/dist/runtime/components/display/display-video.d.vue.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    prev: (payload: DisplayVideoAction) => any;
-    next: (payload: DisplayVideoAction) => any;
     fullscreen: (payload: DisplayVideoAction) => any;
     "play-click": (payload: DisplayVideoAction) => any;
+    prev: (payload: DisplayVideoAction) => any;
+    next: (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
-    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
     onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
     "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
+    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
+    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullHeight: boolean;

package/dist/runtime/components/display/display-video.vue.d.ts

@@ -81,16 +81,16 @@ declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
     toggle: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (payload: DisplayVideoAction) => any;
-    prev: (payload: DisplayVideoAction) => any;
-    next: (payload: DisplayVideoAction) => any;
     fullscreen: (payload: DisplayVideoAction) => any;
     "play-click": (payload: DisplayVideoAction) => any;
+    prev: (payload: DisplayVideoAction) => any;
+    next: (payload: DisplayVideoAction) => any;
 }, string, import("vue").PublicProps, Readonly<DisplayVideoProps> & Readonly<{
     onClose?: ((payload: DisplayVideoAction) => any) | undefined;
-    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
-    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
     onFullscreen?: ((payload: DisplayVideoAction) => any) | undefined;
     "onPlay-click"?: ((payload: DisplayVideoAction) => any) | undefined;
+    onPrev?: ((payload: DisplayVideoAction) => any) | undefined;
+    onNext?: ((payload: DisplayVideoAction) => any) | undefined;
 }>, {
     src: string;
     fullHeight: boolean;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     src: string;
     center: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
     src: string;
     center: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -70,9 +70,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     labelKey: string;
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -70,9 +70,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     description: string;
     options: AutocompleteOption[] | string[] | number[];
+    limit: number;
     labelKey: string;
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

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

@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     pageSize: number;
     name: string;
-    labelKey: string;
     limit: number;
+    labelKey: string;
     valueKey: string;
     multiple: boolean;
     placeholderSearch: string;

package/dist/runtime/components/input/input-localized-name.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    placeholder: string;
     limit: number;
+    placeholder: string;
     showCounter: boolean;
     addLabel: string;
     removable: boolean;

package/dist/runtime/components/input/input-localized-name.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: LocalizedNameItem[];
     options: InputSelectItem[];
-    placeholder: string;
     limit: number;
+    placeholder: string;
     showCounter: boolean;
     addLabel: string;
     removable: boolean;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    limit: number;
     labelKey: string;
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -20,9 +20,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     description: string;
+    limit: number;
     labelKey: string;
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

package/dist/runtime/components/input/input-tag-modal.d.vue.ts

@@ -0,0 +1,52 @@
+import type { InputTagModalOption, InputTagModalProps } from "../../../types/components/input/input-tag-modal.js";
+interface InputTextFieldExpose {
+    setErrors?: (errors: string[]) => void;
+    validate?: () => Promise<unknown>;
+}
+type __VLS_Props = InputTagModalProps;
+type __VLS_ModelProps = {
+    modelValue?: string | number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setErrors: (errors: string[]) => void;
+    validate: () => Promise<unknown>;
+    reload: () => Promise<void>;
+    fieldRef: import("vue").Ref<{
+        setErrors?: ((errors: string[]) => void) | undefined;
+        validate?: (() => Promise<unknown>) | undefined;
+    } | null, InputTextFieldExpose | {
+        setErrors?: ((errors: string[]) => void) | undefined;
+        validate?: (() => Promise<unknown>) | undefined;
+    } | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | null) => any;
+} & {
+    select: (option: InputTagModalOption) => any;
+    clear: () => any;
+    open: () => any;
+    "fetch-error": (error: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((option: InputTagModalOption) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onFetch-error"?: ((error: unknown) => any) | undefined;
+}>, {
+    title: string;
+    loading: boolean;
+    disabled: boolean;
+    pageSize: number;
+    id: string;
+    name: string;
+    required: boolean;
+    options: InputTagModalOption[];
+    labelKey: string;
+    placeholder: string;
+    disabledErrorMessage: boolean;
+    valueKey: string;
+    searchPlaceholder: string;
+    clearable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/input/input-tag-modal.vue

@@ -0,0 +1,307 @@
+<template>
+  <div :class="cn('w-full', props.class)">
+    <InputTextField
+        ref="fieldRef"
+        v-model="displayValue"
+        :id="props.id"
+        :name="props.name"
+        :label="props.label"
+        :placeholder="props.placeholder"
+        :description="props.description"
+        :rules="props.rules"
+        :required="props.required"
+        :disabled="props.disabled"
+        :disabled-error-message="props.disabledErrorMessage"
+        :icon-append="appendIcon"
+        class="cursor-pointer"
+        readonly
+        @click="onOpenModal"
+        @click-icon-append="onAppendClick"
+      />
+
+    <Modal v-model="isOpenModal" :title="props.title">
+      <template #title>
+        <span class="font-title-medium-prominent text-black">
+          {{ props.title }}
+        </span>
+      </template>
+
+      <div class="flex w-full flex-col gap-[16px]">
+        <InputSearch
+          v-model="searchKeyword"
+          name="tag-modal-search"
+          :placeholder="props.searchPlaceholder"
+          icon="lucide:search"
+          icon-position="right"
+          disabled-error-message
+        />
+
+        <div
+          v-if="isInitialLoading"
+          class="flex h-[392px] items-center justify-center"
+        >
+          <Icon
+            name="lucide:loader-circle"
+            :size="24"
+            class="animate-spin text-primary"
+          />
+        </div>
+
+        <div
+          v-else-if="filteredOptions.length > 0"
+          class="flex max-h-[592px] flex-wrap content-start gap-[8px] overflow-y-auto pr-[4px]"
+          @scroll.passive="onListScroll"
+        >
+          <Chip
+            v-for="option in filteredOptions"
+            :key="optionKey(option)"
+            :color="isSelected(option) ? 'primary' : 'bright'"
+            class="cursor-pointer transition-colors"
+            @click="onSelectOption(option)"
+          >
+            {{ option.label }}
+          </Chip>
+
+          <div
+            v-if="isLoadingMore"
+            class="flex w-full items-center justify-center py-[8px]"
+          >
+            <Icon
+              name="lucide:loader-circle"
+              :size="20"
+              class="animate-spin text-primary"
+            />
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="flex h-[392px] flex-col items-center justify-center gap-[8px]"
+        >
+          <Icon name="pukaad:page-not-found" class="h-[100px] w-[121px]" />
+          <div class="font-body-large text-gray">ไม่พบข้อมูล</div>
+        </div>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import { cn } from "#pukaad-ui/runtime/plugins/shadcn";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  class: { type: null, required: false },
+  id: { type: String, required: false, default: "input-tag-modal" },
+  name: { type: String, required: false, default: "input-tag-modal" },
+  label: { type: String, required: false },
+  placeholder: { type: String, required: false, default: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E17\u0E47\u0E01" },
+  searchPlaceholder: { type: String, required: false, default: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E41\u0E17\u0E47\u0E01" },
+  title: { type: String, required: false, default: "\u0E41\u0E17\u0E47\u0E01\u0E17\u0E35\u0E48\u0E40\u0E01\u0E35\u0E48\u0E22\u0E27\u0E02\u0E49\u0E2D\u0E07" },
+  description: { type: String, required: false },
+  rules: { type: [Object, String, Function], required: false },
+  options: { type: Array, required: false, default: () => [] },
+  fetchFn: { type: Function, required: false },
+  valueKey: { type: String, required: false, default: "value" },
+  labelKey: { type: String, required: false, default: "label" },
+  pageSize: { type: Number, required: false, default: 30 },
+  required: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  disabledErrorMessage: { type: Boolean, required: false, default: false },
+  clearable: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["open", "select", "clear", "fetch-error"]);
+const modelValue = defineModel({ type: [String, Number, null], ...{ default: null } });
+const fieldRef = ref(null);
+const isOpenModal = ref(false);
+const searchKeyword = ref("");
+const selectedOptionCache = ref(null);
+const suppressSearchWatch = ref(false);
+const remoteState = reactive({
+  data: [],
+  page: 1,
+  hasMore: true,
+  loading: false,
+  lastSearch: "",
+  generation: 0
+});
+const hasValue = computed(
+  () => modelValue.value !== null && modelValue.value !== void 0 && modelValue.value !== ""
+);
+const optionKey = (option) => `${typeof option.value}:${String(option.value)}`;
+const mergeOptions = (current, incoming) => {
+  const map = new Map(current.map((option) => [optionKey(option), option]));
+  incoming.forEach((option) => map.set(optionKey(option), option));
+  return Array.from(map.values());
+};
+const mapRemoteOption = (item) => {
+  if (typeof item !== "object" || item === null) return null;
+  const record = item;
+  const rawValue = record[props.valueKey];
+  const rawLabel = record[props.labelKey];
+  if (rawValue === void 0 || rawValue === null || rawLabel === void 0) {
+    return null;
+  }
+  return {
+    value: typeof rawValue === "number" ? rawValue : String(rawValue),
+    label: String(rawLabel)
+  };
+};
+const resolvedOptions = computed(
+  () => props.fetchFn ? remoteState.data : props.options
+);
+const filteredOptions = computed(() => {
+  if (props.fetchFn) return resolvedOptions.value;
+  const query = searchKeyword.value.trim().toLocaleLowerCase("th");
+  if (!query) return resolvedOptions.value;
+  return resolvedOptions.value.filter(
+    (option) => option.label.toLocaleLowerCase("th").includes(query)
+  );
+});
+const knownOptions = computed(
+  () => mergeOptions(props.options, remoteState.data)
+);
+watch(
+  [modelValue, knownOptions],
+  ([value, options]) => {
+    if (value === null || value === void 0 || value === "") {
+      selectedOptionCache.value = null;
+      return;
+    }
+    const found = options.find((option) => option.value === value);
+    if (found) {
+      selectedOptionCache.value = found;
+      return;
+    }
+    if (selectedOptionCache.value?.value !== value) {
+      selectedOptionCache.value = null;
+    }
+  },
+  { immediate: true, deep: true }
+);
+const displayValue = computed({
+  get: () => selectedOptionCache.value?.label ?? "",
+  set: () => void 0
+});
+const appendIcon = computed(
+  () => hasValue.value && props.clearable ? "lucide:x" : "lucide:chevron-down"
+);
+const isInitialLoading = computed(
+  () => (props.loading || remoteState.loading) && filteredOptions.value.length === 0
+);
+const isLoadingMore = computed(
+  () => !!props.fetchFn && remoteState.loading && remoteState.data.length > 0
+);
+const fetchRemote = async (reset = false, search = searchKeyword.value.trim()) => {
+  if (!props.fetchFn) return;
+  if (!reset && (remoteState.loading || !remoteState.hasMore)) return;
+  let generation = remoteState.generation;
+  if (reset) {
+    generation = remoteState.generation + 1;
+    remoteState.generation = generation;
+    remoteState.page = 1;
+    remoteState.data = [];
+    remoteState.hasMore = true;
+    remoteState.loading = false;
+    remoteState.lastSearch = search;
+  }
+  if (remoteState.loading) return;
+  const page = remoteState.page;
+  remoteState.loading = true;
+  try {
+    const response = await props.fetchFn(
+      page,
+      props.pageSize,
+      search || void 0
+    );
+    if (generation !== remoteState.generation) return;
+    const mapped = (response.data ?? []).map(mapRemoteOption).filter((option) => option !== null);
+    remoteState.data = reset ? mergeOptions([], mapped) : mergeOptions(remoteState.data, mapped);
+    const totalPages = Number(response.meta?.total_pages ?? 1);
+    remoteState.page = page + 1;
+    remoteState.hasMore = page < totalPages;
+  } catch (error) {
+    if (generation === remoteState.generation) {
+      remoteState.hasMore = false;
+      emit("fetch-error", error);
+      console.error("InputTagModal: Failed to fetch options:", error);
+    }
+  } finally {
+    if (generation === remoteState.generation) {
+      remoteState.loading = false;
+    }
+  }
+};
+const debouncedRemoteSearch = useDebounceFn(() => {
+  void fetchRemote(true);
+}, 300);
+watch(searchKeyword, () => {
+  if (!props.fetchFn || !isOpenModal.value || suppressSearchWatch.value) return;
+  debouncedRemoteSearch();
+});
+watch(
+  () => props.fetchFn,
+  () => {
+    remoteState.generation += 1;
+    remoteState.data = [];
+    remoteState.page = 1;
+    remoteState.hasMore = true;
+    remoteState.loading = false;
+    remoteState.lastSearch = "";
+  }
+);
+const onOpenModal = async () => {
+  if (props.disabled) return;
+  suppressSearchWatch.value = true;
+  searchKeyword.value = "";
+  isOpenModal.value = true;
+  emit("open");
+  await nextTick();
+  suppressSearchWatch.value = false;
+  if (props.fetchFn && (remoteState.data.length === 0 || remoteState.lastSearch !== "")) {
+    await fetchRemote(true, "");
+  }
+};
+const onAppendClick = () => {
+  if (props.disabled) return;
+  if (hasValue.value && props.clearable) {
+    modelValue.value = null;
+    selectedOptionCache.value = null;
+    emit("clear");
+    return;
+  }
+  void onOpenModal();
+};
+const onSelectOption = (option) => {
+  modelValue.value = option.value;
+  selectedOptionCache.value = option;
+  emit("select", option);
+  isOpenModal.value = false;
+};
+const isSelected = (option) => option.value === modelValue.value;
+const onListScroll = (event) => {
+  if (!props.fetchFn || remoteState.loading || !remoteState.hasMore) return;
+  const target = event.currentTarget;
+  if (!target) return;
+  const distanceFromBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+  if (distanceFromBottom < 48) {
+    void fetchRemote();
+  }
+};
+const reload = async () => {
+  if (!props.fetchFn) return;
+  await fetchRemote(true);
+};
+const setErrors = (errors) => {
+  fieldRef.value?.setErrors?.(errors);
+};
+const validate = async () => await fieldRef.value?.validate?.();
+defineExpose({
+  setErrors,
+  validate,
+  reload,
+  fieldRef
+});
+</script>

package/dist/runtime/components/input/input-tag-modal.vue.d.ts

@@ -0,0 +1,52 @@
+import type { InputTagModalOption, InputTagModalProps } from "../../../types/components/input/input-tag-modal.js";
+interface InputTextFieldExpose {
+    setErrors?: (errors: string[]) => void;
+    validate?: () => Promise<unknown>;
+}
+type __VLS_Props = InputTagModalProps;
+type __VLS_ModelProps = {
+    modelValue?: string | number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    setErrors: (errors: string[]) => void;
+    validate: () => Promise<unknown>;
+    reload: () => Promise<void>;
+    fieldRef: import("vue").Ref<{
+        setErrors?: ((errors: string[]) => void) | undefined;
+        validate?: (() => Promise<unknown>) | undefined;
+    } | null, InputTextFieldExpose | {
+        setErrors?: ((errors: string[]) => void) | undefined;
+        validate?: (() => Promise<unknown>) | undefined;
+    } | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | null) => any;
+} & {
+    select: (option: InputTagModalOption) => any;
+    clear: () => any;
+    open: () => any;
+    "fetch-error": (error: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((option: InputTagModalOption) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onFetch-error"?: ((error: unknown) => any) | undefined;
+}>, {
+    title: string;
+    loading: boolean;
+    disabled: boolean;
+    pageSize: number;
+    id: string;
+    name: string;
+    required: boolean;
+    options: InputTagModalOption[];
+    labelKey: string;
+    placeholder: string;
+    disabledErrorMessage: boolean;
+    valueKey: string;
+    searchPlaceholder: string;
+    clearable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    rows: number;
     limit: number;
+    rows: number;
     readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

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

@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     resize: "none" | "both" | "horizontal" | "vertical";
     fullHeight: boolean;
     fullWidth: boolean;
-    rows: number;
     limit: number;
+    rows: number;
     readonly: boolean;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue

@@ -25,7 +25,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
-const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-content", "delete-content", "content-delete", "delete", "report", "report-review", "place-close-duplicate", "review-edit", "review-delete", "review-reply", "reply-edit", "reply-delete", "archive", "profile-name-updated", "report-submit"]);
+const emit = defineEmits(["profile-edit", "profile-share", "profile-follower-delete", "profile-block", "blog-pin", "blog-unpin", "blog-edit", "blog-delete", "report-blog", "report-place", "report-profile", "report-content", "report-spotlight", "report-tag", "report-label", "delete-content", "content-delete", "delete", "report", "report-review", "place-close-duplicate", "review-edit", "review-delete", "review-reply", "reply-edit", "reply-delete", "archive", "profile-name-updated", "report-submit"]);
 const props = defineProps({
   state: { type: String, required: false },
   profileDetail: { type: Object, required: false },
@@ -173,6 +173,39 @@ const menu = [
       emit("report");
     }
   },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D\u0E41\u0E19\u0E30\u0E19\u0E33\u0E19\u0E35\u0E49",
+    name: "report-spotlight",
+    icon: "lucide:flag",
+    action: () => {
+      reportState.value = "spotlight";
+      isOpenModalReport.value = true;
+      emit("report-spotlight");
+      emit("report");
+    }
+  },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E41\u0E17\u0E47\u0E01\u0E19\u0E35\u0E49",
+    name: "report-tag",
+    icon: "lucide:flag",
+    action: () => {
+      reportState.value = "tag";
+      isOpenModalReport.value = true;
+      emit("report-tag");
+      emit("report");
+    }
+  },
+  {
+    label: "\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48\u0E19\u0E35\u0E49",
+    name: "report-label",
+    icon: "lucide:flag",
+    action: () => {
+      reportState.value = "label";
+      isOpenModalReport.value = true;
+      emit("report-label");
+      emit("report");
+    }
+  },
   {
     label: "\u0E25\u0E1A\u0E40\u0E19\u0E37\u0E49\u0E2D\u0E2B\u0E32\u0E19\u0E35\u0E49",
     name: "delete-content",
@@ -302,6 +335,21 @@ const items = computed(() => {
       (item) => ["report-content"].includes(item.name)
     );
   }
+  if (props.state === "spotlight") {
+    return menu.filter(
+      (item) => ["report-spotlight"].includes(item.name)
+    );
+  }
+  if (props.state === "tag") {
+    return menu.filter(
+      (item) => ["report-tag"].includes(item.name)
+    );
+  }
+  if (props.state === "label") {
+    return menu.filter(
+      (item) => ["report-label"].includes(item.name)
+    );
+  }
   if (props.state === "delete-content") {
     return menu.filter(
       (item) => ["delete-content", "content-delete"].includes(item.name)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.418.0",
+  "version": "1.420.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",

package/dist/runtime/components/input/input-select-tag.d.vue.ts

@@ -1,3 +0,0 @@
-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-select-tag.vue

@@ -1,57 +0,0 @@
-<template>
-  <!-- <InputTextField
-    :name="props.name"
-    :label="props.label"
-    :placeholder="props.placeholder"
-    :full-width="props.fullWidth"
-    :width="props.width"
-    :height="props.height"
-    :required="props.required"
-    :disabled="props.disabled"
-    :readonly="props.readonly"
-    :append-icon="props.appendIcon"
-    @click="isOpenModal = true"
-    @clickAppendIcon="isOpenModal = true"
-    @reset="isOpenModal = true"
-    reset
-    v-model="selectedTag"
-  />
-  <Modal
-    v-model="isOpenModal"
-    title="แท็กที่เกี่ยวข้อง"
-    :gap="16"
-    :width="604"
-    :height="670"
-  >
-    <div class="space-y-[16px]">
-      <InputSearch v-model="search" placeholder="ค้นหาแท็ก" full-width />
-      <Divider :height="0" />
-      <div
-        v-if="filteredTags.length > 0"
-        class="flex flex-wrap gap-[8px] h-[526px] overflow-y-auto"
-      >
-        <Chip
-          v-for="tag in filteredTags"
-          :key="tag"
-          size="small"
-          :color="selectedTag === tag ? 'primary' : 'default'"
-          class="cursor-pointer"
-          @click="onSelectTag(tag)"
-        >
-          {{ tag }}
-        </Chip>
-      </div>
-      <div
-        v-else
-        class="flex flex-col gap-[8px] items-center justify-center h-[526px]"
-      >
-        <Icon name="pukaad:page-not-found" size="100" />
-        <div class="text-gray font-body-large">ไม่พบข้อมูล</div>
-      </div>
-    </div>
-  </Modal> -->
-</template>
-
-<script setup>
-
-</script>

package/dist/runtime/components/input/input-select-tag.vue.d.ts

@@ -1,3 +0,0 @@
-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;