pukaad-ui-lib 1.396.0 → 1.398.0

package/dist/module.json

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

package/dist/runtime/components/button.d.vue.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "vue";
 import type { ButtonVariants } from "./ui/button/index.js";
 export type ButtonType = "button" | "submit" | "reset";
 export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
-export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
+export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | "dark";
 export type ButtonSize = ButtonVariants["size"];
 export interface ButtonProps {
     type?: ButtonType;

package/dist/runtime/components/button.vue.d.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "vue";
 import type { ButtonVariants } from "./ui/button/index.js";
 export type ButtonType = "button" | "submit" | "reset";
 export type ButtonVariant = "default" | "outline" | "ghost" | "link" | "text" | "icon" | "glass";
-export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success";
+export type ButtonColor = "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | "dark";
 export type ButtonSize = ButtonVariants["size"];
 export interface ButtonProps {
     type?: ButtonType;

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

@@ -0,0 +1,126 @@
+export interface DisplayVideoSource {
+    src: string;
+    type?: string;
+    media?: string;
+}
+export interface DisplayVideoTrack {
+    src: string;
+    kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+    srclang?: string;
+    label?: string;
+    default?: boolean;
+}
+export interface DisplayVideoProps {
+    src?: string;
+    sources?: DisplayVideoSource[];
+    tracks?: DisplayVideoTrack[];
+    poster?: string;
+    width?: string | number;
+    height?: string | number;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: "none" | "metadata" | "auto";
+    crossorigin?: "anonymous" | "use-credentials";
+    controlsList?: string;
+    disablePictureInPicture?: boolean;
+    disableRemotePlayback?: boolean;
+    volume?: number;
+    playbackRate?: number;
+    startTime?: number;
+    fullscreenButton?: boolean;
+    closeButton?: boolean;
+    playButton?: boolean;
+    playButtonAutoHide?: boolean;
+    playButtonHideDelay?: number;
+    clickToPlay?: boolean;
+    controlsHeight?: number;
+    navButton?: boolean;
+}
+type DisplayVideoAction = {
+    video: HTMLVideoElement | null;
+    currentTime: number;
+    paused: boolean;
+};
+declare var __VLS_1: {
+    click: () => void;
+}, __VLS_16: {
+    click: () => void;
+    paused: boolean;
+}, __VLS_43: {
+    click: () => void;
+}, __VLS_58: {
+    prev: () => void;
+    next: () => void;
+}, __VLS_86: {};
+type __VLS_Slots = {} & {
+    close?: (props: typeof __VLS_1) => any;
+} & {
+    play?: (props: typeof __VLS_16) => any;
+} & {
+    fullscreen?: (props: typeof __VLS_43) => any;
+} & {
+    nav?: (props: typeof __VLS_58) => any;
+} & {
+    default?: (props: typeof __VLS_86) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
+    videoRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+    paused: import("vue").Ref<boolean, boolean>;
+    play: () => Promise<void> | undefined;
+    pause: () => void | undefined;
+    load: () => void | undefined;
+    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;
+}, 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;
+}>, {
+    src: string;
+    fullHeight: boolean;
+    fullWidth: boolean;
+    fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    poster: string;
+    autoplay: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    preload: "none" | "metadata" | "auto";
+    sources: DisplayVideoSource[];
+    tracks: DisplayVideoTrack[];
+    playsinline: boolean;
+    disablePictureInPicture: boolean;
+    disableRemotePlayback: boolean;
+    volume: number;
+    playbackRate: number;
+    startTime: number;
+    fullscreenButton: boolean;
+    closeButton: boolean;
+    playButton: boolean;
+    playButtonAutoHide: boolean;
+    playButtonHideDelay: number;
+    clickToPlay: boolean;
+    controlsHeight: number;
+    navButton: 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/display/display-video.vue

@@ -0,0 +1,250 @@
+<template>
+  <div
+    class="relative inline-flex"
+    :class="[props.fullWidth && 'w-full', props.fullHeight && 'h-full']"
+  >
+    <!-- ปุ่มปิด -->
+    <slot v-if="props.closeButton" name="close" :click="onClose">
+      <div class="absolute top-[24px] left-[24px] z-10">
+        <Button circle color="dark" @click="onClose">
+          <Icon name="lucide:x" />
+        </Button>
+      </div>
+    </slot>
+
+    <!-- ปุ่มเล่น / หยุด -->
+    <slot
+      v-if="props.playButton"
+      name="play"
+      :click="onPlayClick"
+      :paused="paused"
+    >
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0 scale-75"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-300 ease-out"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-150"
+      >
+        <div
+          v-show="showPlayButton"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10"
+        >
+          <Button
+            circle
+            color="dark"
+            class="w-[80px] h-[80px]"
+            :aria-label="paused ? '\u0E40\u0E25\u0E48\u0E19' : '\u0E2B\u0E22\u0E38\u0E14'"
+            @click="onPlayClick"
+          >
+            <Transition
+              mode="out-in"
+              enter-active-class="transition duration-150 ease-out"
+              enter-from-class="opacity-0 scale-75"
+              enter-to-class="opacity-100 scale-100"
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100 scale-100"
+              leave-to-class="opacity-0 scale-125"
+            >
+              <Icon
+                :key="paused ? 'play' : 'pause'"
+                :name="paused ? 'lucide:play' : 'lucide:pause'"
+                class="w-[56px] h-[56px]"
+              />
+            </Transition>
+          </Button>
+        </div>
+      </Transition>
+    </slot>
+
+    <!-- ปุ่มขยายเต็มจอ -->
+    <slot v-if="props.fullscreenButton" name="fullscreen" :click="onFullscreen">
+      <div class="absolute top-[16px] right-[16px] z-10">
+        <Button circle color="dark" @click="onFullscreen">
+          <Icon name="lucide:maximize" />
+        </Button>
+      </div>
+    </slot>
+
+    <!-- ปุ่มเลื่อนขึ้นลงวีดีโอ -->
+    <slot
+      v-if="props.navButton"
+      name="nav"
+      :prev="onPrev"
+      :next="onNext"
+    >
+      <div class="absolute top-1/2 right-[16px] -translate-y-1/2 z-10">
+        <div class="flex flex-col gap-[32px] items-center">
+          <Button circle color="dark" class="w-[50px] h-[50px]" @click="onPrev">
+            <Icon name="lucide:chevron-up" class="w-[32px] h-[32px]" />
+          </Button>
+          <Button circle color="dark" class="w-[50px] h-[50px]" @click="onNext">
+            <Icon name="lucide:chevron-down" class="w-[32px] h-[32px]" />
+          </Button>
+        </div>
+      </div>
+    </slot>
+
+    <video
+      ref="videoRef"
+      v-bind="$attrs"
+      :class="props.clickToPlay && 'cursor-pointer'"
+      :src="props.src || void 0"
+      :poster="props.poster || void 0"
+      :preload="props.preload"
+      :controls="props.controls"
+      :autoplay="props.autoplay"
+      :loop="props.loop"
+      :muted="props.muted"
+      :playsinline="props.playsinline"
+      :crossorigin="props.crossorigin || void 0"
+      :controlslist="controlsList || void 0"
+      :disablepictureinpicture="props.disablePictureInPicture"
+      :disableremoteplayback="props.disableRemotePlayback"
+      :style="{
+  width: props.fullWidth ? '100%' : toSize(props.width),
+  height: props.fullHeight ? '100%' : toSize(props.height),
+  objectFit: props.fit
+}"
+      @click="onSurfaceClick"
+      @play="onPaused(false)"
+      @pause="onPaused(true)"
+      @ended="onPaused(true)"
+    >
+      <source
+        v-for="(source, i_source) in props.sources"
+        :key="i_source"
+        :src="source.src"
+        :type="source.type"
+        :media="source.media"
+      />
+      <track
+        v-for="(track, i_track) in props.tracks"
+        :key="i_track"
+        :src="track.src"
+        :kind="track.kind"
+        :srclang="track.srclang"
+        :label="track.label"
+        :default="track.default"
+      />
+      <slot />
+    </video>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+defineOptions({ inheritAttrs: false });
+const emit = defineEmits(["fullscreen", "close", "play-click", "prev", "next"]);
+const props = defineProps({
+  src: { type: String, required: false, default: "" },
+  sources: { type: Array, required: false, default: () => [] },
+  tracks: { type: Array, required: false, default: () => [] },
+  poster: { type: String, required: false, default: "" },
+  width: { type: [String, Number], required: false },
+  height: { type: [String, Number], required: false },
+  fullWidth: { type: Boolean, required: false, default: false },
+  fullHeight: { type: Boolean, required: false, default: false },
+  fit: { type: String, required: false, default: "contain" },
+  controls: { type: Boolean, required: false, default: true },
+  autoplay: { type: Boolean, required: false, default: false },
+  loop: { type: Boolean, required: false, default: false },
+  muted: { type: Boolean, required: false, default: false },
+  playsinline: { type: Boolean, required: false, default: true },
+  preload: { type: String, required: false, default: "metadata" },
+  crossorigin: { type: String, required: false },
+  controlsList: { type: String, required: false },
+  disablePictureInPicture: { type: Boolean, required: false, default: false },
+  disableRemotePlayback: { type: Boolean, required: false, default: false },
+  volume: { type: Number, required: false, default: 1 },
+  playbackRate: { type: Number, required: false, default: 1 },
+  startTime: { type: Number, required: false, default: 0 },
+  fullscreenButton: { type: Boolean, required: false, default: false },
+  closeButton: { type: Boolean, required: false, default: false },
+  playButton: { type: Boolean, required: false, default: false },
+  playButtonAutoHide: { type: Boolean, required: false, default: true },
+  playButtonHideDelay: { type: Number, required: false, default: 600 },
+  clickToPlay: { type: Boolean, required: false, default: false },
+  controlsHeight: { type: Number, required: false, default: 56 },
+  navButton: { type: Boolean, required: false, default: false }
+});
+const videoRef = ref(null);
+const paused = ref(true);
+const showPlayButton = ref(true);
+let hideTimer;
+const clearHideTimer = () => {
+  if (hideTimer) clearTimeout(hideTimer);
+  hideTimer = void 0;
+};
+const controlsList = computed(() => {
+  const list = (props.controlsList ?? "").split(" ").filter(Boolean);
+  if (props.fullscreenButton && !list.includes("nofullscreen")) {
+    list.push("nofullscreen");
+  }
+  return list.join(" ");
+});
+const toSize = (value) => {
+  if (value === void 0 || value === null || value === "") return void 0;
+  return typeof value === "number" || /^\d+(\.\d+)?$/.test(String(value)) ? `${value}px` : String(value);
+};
+const syncPlayback = () => {
+  const el = videoRef.value;
+  if (!el) return;
+  el.muted = props.muted;
+  el.volume = props.volume;
+  el.playbackRate = props.playbackRate;
+};
+onMounted(() => {
+  syncPlayback();
+  const el = videoRef.value;
+  if (!el) return;
+  if (props.startTime) el.currentTime = props.startTime;
+  onPaused(el.paused);
+});
+onBeforeUnmount(clearHideTimer);
+watch(() => [props.muted, props.volume, props.playbackRate], syncPlayback);
+const actionPayload = () => ({
+  video: videoRef.value,
+  currentTime: videoRef.value?.currentTime ?? 0,
+  paused: paused.value
+});
+const onPaused = (value) => {
+  paused.value = value;
+  clearHideTimer();
+  if (value || !props.playButtonAutoHide) {
+    showPlayButton.value = true;
+    return;
+  }
+  showPlayButton.value = true;
+  hideTimer = setTimeout(() => {
+    showPlayButton.value = false;
+  }, props.playButtonHideDelay);
+};
+const onSurfaceClick = (event) => {
+  if (!props.clickToPlay) return;
+  const el = videoRef.value;
+  if (props.controls && el) {
+    const rect = el.getBoundingClientRect();
+    if (event.clientY > rect.bottom - props.controlsHeight) return;
+  }
+  onPlayClick();
+};
+const onPlayClick = () => {
+  const el = videoRef.value;
+  if (el) {
+    if (el.paused) el.play();
+    else el.pause();
+  }
+  emit("play-click", actionPayload());
+};
+const onFullscreen = () => emit("fullscreen", actionPayload());
+const onClose = () => emit("close", actionPayload());
+const onPrev = () => emit("prev", actionPayload());
+const onNext = () => emit("next", actionPayload());
+const play = () => videoRef.value?.play();
+const pause = () => videoRef.value?.pause();
+const load = () => videoRef.value?.load();
+const toggle = () => onPlayClick();
+defineExpose({ videoRef, paused, play, pause, load, toggle });
+</script>

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

@@ -0,0 +1,126 @@
+export interface DisplayVideoSource {
+    src: string;
+    type?: string;
+    media?: string;
+}
+export interface DisplayVideoTrack {
+    src: string;
+    kind?: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+    srclang?: string;
+    label?: string;
+    default?: boolean;
+}
+export interface DisplayVideoProps {
+    src?: string;
+    sources?: DisplayVideoSource[];
+    tracks?: DisplayVideoTrack[];
+    poster?: string;
+    width?: string | number;
+    height?: string | number;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: "none" | "metadata" | "auto";
+    crossorigin?: "anonymous" | "use-credentials";
+    controlsList?: string;
+    disablePictureInPicture?: boolean;
+    disableRemotePlayback?: boolean;
+    volume?: number;
+    playbackRate?: number;
+    startTime?: number;
+    fullscreenButton?: boolean;
+    closeButton?: boolean;
+    playButton?: boolean;
+    playButtonAutoHide?: boolean;
+    playButtonHideDelay?: number;
+    clickToPlay?: boolean;
+    controlsHeight?: number;
+    navButton?: boolean;
+}
+type DisplayVideoAction = {
+    video: HTMLVideoElement | null;
+    currentTime: number;
+    paused: boolean;
+};
+declare var __VLS_1: {
+    click: () => void;
+}, __VLS_16: {
+    click: () => void;
+    paused: boolean;
+}, __VLS_43: {
+    click: () => void;
+}, __VLS_58: {
+    prev: () => void;
+    next: () => void;
+}, __VLS_86: {};
+type __VLS_Slots = {} & {
+    close?: (props: typeof __VLS_1) => any;
+} & {
+    play?: (props: typeof __VLS_16) => any;
+} & {
+    fullscreen?: (props: typeof __VLS_43) => any;
+} & {
+    nav?: (props: typeof __VLS_58) => any;
+} & {
+    default?: (props: typeof __VLS_86) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DisplayVideoProps, {
+    videoRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+    paused: import("vue").Ref<boolean, boolean>;
+    play: () => Promise<void> | undefined;
+    pause: () => void | undefined;
+    load: () => void | undefined;
+    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;
+}, 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;
+}>, {
+    src: string;
+    fullHeight: boolean;
+    fullWidth: boolean;
+    fit: "cover" | "contain" | "fill" | "none" | "scale-down";
+    poster: string;
+    autoplay: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    preload: "none" | "metadata" | "auto";
+    sources: DisplayVideoSource[];
+    tracks: DisplayVideoTrack[];
+    playsinline: boolean;
+    disablePictureInPicture: boolean;
+    disableRemotePlayback: boolean;
+    volume: number;
+    playbackRate: number;
+    startTime: number;
+    fullscreenButton: boolean;
+    closeButton: boolean;
+    playButton: boolean;
+    playButtonAutoHide: boolean;
+    playButtonHideDelay: number;
+    clickToPlay: boolean;
+    controlsHeight: number;
+    navButton: 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/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    background: boolean;
-    modal: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
-    background: boolean;
-    modal: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials";
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
-    crossorigin: "" | "anonymous" | "use-credentials";
+    modal: boolean;
     guides: boolean;
     highlight: boolean;
+    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

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

@@ -3,6 +3,7 @@ interface AutocompleteOption {
     label: string;
     description?: string;
     value: string | number;
+    [key: string]: any;
 }
 interface FetchFnResult {
     data: Record<string, any>[];
@@ -31,19 +32,38 @@ interface InputAutocompleteProps {
     valueKey?: string;
     labelKey?: string;
     pageSize?: number;
+    iconPosition?: "left" | "right";
+    icon?: string;
+    disabledIcon?: boolean;
 }
 type __VLS_Props = InputAutocompleteProps;
 type __VLS_ModelProps = {
-    modelValue?: string | number;
+    modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare var __VLS_27: {}, __VLS_37: {}, __VLS_63: {
+    option: AutocompleteOption;
+};
+type __VLS_Slots = {} & {
+    prepend?: (props: typeof __VLS_27) => any;
+} & {
+    append?: (props: typeof __VLS_37) => any;
+} & {
+    option?: (props: typeof __VLS_63) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number) => any;
+    "update:modelValue": (value: any) => any;
+} & {
+    select: (option: AutocompleteOption) => any;
+    clear: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    onSelect?: ((option: AutocompleteOption) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    icon: string;
     pageSize: number;
     id: string;
     name: string;
@@ -52,13 +72,21 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;
+    iconPosition: "left" | "right";
+    disabledIcon: 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-autocomplete.vue

@@ -19,13 +19,32 @@
         :show-counter="props.showCounter"
         :limit="props.limit"
       >
-        <template #append>
-          <Icon
-            @mousedown.stop.prevent="handleIconMouseDown"
-            :name="modelValue ? 'lucide:x' : 'lucide:search'"
-            size="16"
-            class="cursor-pointer text-black"
-          />
+        <template
+          v-if="$slots.prepend || props.iconPosition === 'left' && !props.disabledIcon"
+          #prepend
+        >
+          <slot name="prepend">
+            <Icon
+              :name="props.icon"
+              size="16"
+              class="cursor-pointer text-black"
+              @mousedown.stop.prevent="open = true"
+            />
+          </slot>
+        </template>
+        <template
+          v-if="$slots.append || modelValue || props.iconPosition === 'right' && !props.disabledIcon"
+          #append
+        >
+          <slot name="append">
+            <Icon
+              v-if="modelValue || props.iconPosition === 'right' && !props.disabledIcon"
+              @mousedown.stop.prevent="handleIconMouseDown"
+              :name="modelValue ? 'lucide:x' : props.icon"
+              size="16"
+              class="cursor-pointer text-black"
+            />
+          </slot>
         </template>
       </InputTextField>
     </ShadPopoverAnchor>
@@ -53,19 +72,21 @@
           class="cursor-pointer hover:bg-smoke flex items-center gap-[8px] px-[8px] py-[6px]"
           @mousedown.prevent="selectOption(option)"
         >
-          <div class="flex flex-col gap-[4px] w-full">
-            <div class="font-body-medium">
-              {{ option.label }}
-            </div>
-            <div v-if="option.description" class="font-body-small text-gray">
-              {{ option.description }}
+          <slot name="option" :option="option">
+            <div class="flex flex-col gap-[4px] w-full">
+              <div class="font-body-medium">
+                {{ option.label }}
+              </div>
+              <div v-if="option.description" class="font-body-small text-gray">
+                {{ option.description }}
+              </div>
             </div>
-          </div>
-          <Icon
-            v-if="modelValue === option.value"
-            name="lucide:check"
-            size="16"
-          />
+            <Icon
+              v-if="modelValue === option.value"
+              name="lucide:check"
+              size="16"
+            />
+          </slot>
         </div>
 
         <!-- Loading Indicator -->
@@ -105,9 +126,13 @@ const props = defineProps({
   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: 10 }
+  pageSize: { type: Number, required: false, default: 10 },
+  iconPosition: { type: String, required: false, default: "right" },
+  icon: { type: String, required: false, default: "lucide:search" },
+  disabledIcon: { type: Boolean, required: false, default: false }
 });
-const modelValue = defineModel({ type: [String, Number], ...{
+const emit = defineEmits(["select", "clear"]);
+const modelValue = defineModel({ type: null, ...{
   default: ""
 } });
 const open = ref(false);
@@ -138,6 +163,7 @@ const fetchData = async (reset = false) => {
     );
     if (res && res.data) {
       const mapped = res.data.map((item) => ({
+        ...item,
         value: typeof item[props.valueKey] === "number" ? item[props.valueKey] : String(item[props.valueKey]),
         label: String(item[props.labelKey]),
         description: item.description ? String(item.description) : void 0

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

@@ -3,6 +3,7 @@ interface AutocompleteOption {
     label: string;
     description?: string;
     value: string | number;
+    [key: string]: any;
 }
 interface FetchFnResult {
     data: Record<string, any>[];
@@ -31,19 +32,38 @@ interface InputAutocompleteProps {
     valueKey?: string;
     labelKey?: string;
     pageSize?: number;
+    iconPosition?: "left" | "right";
+    icon?: string;
+    disabledIcon?: boolean;
 }
 type __VLS_Props = InputAutocompleteProps;
 type __VLS_ModelProps = {
-    modelValue?: string | number;
+    modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare var __VLS_27: {}, __VLS_37: {}, __VLS_63: {
+    option: AutocompleteOption;
+};
+type __VLS_Slots = {} & {
+    prepend?: (props: typeof __VLS_27) => any;
+} & {
+    append?: (props: typeof __VLS_37) => any;
+} & {
+    option?: (props: typeof __VLS_63) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number) => any;
+    "update:modelValue": (value: any) => any;
+} & {
+    select: (option: AutocompleteOption) => any;
+    clear: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    onSelect?: ((option: AutocompleteOption) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    icon: string;
     pageSize: number;
     id: string;
     name: string;
@@ -52,13 +72,21 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     options: AutocompleteOption[] | string[] | number[];
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     returnObject: boolean;
     freeText: boolean;
     valueKey: string;
+    iconPosition: "left" | "right";
+    disabledIcon: 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-file.d.vue.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     name: string;
     fullHeight: boolean;
     fullWidth: boolean;
-    disabledErrorMessage: boolean;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;

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

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     name: string;
     fullHeight: boolean;
     fullWidth: boolean;
-    disabledErrorMessage: boolean;
     limit: number;
+    disabledErrorMessage: boolean;
     accept: string;
     labelIcon: string;
     disabledDrop: boolean;

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

@@ -17,8 +17,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     format: "legacy" | "contact_channel";
     hideType: boolean;
     hideAddButton: boolean;

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

@@ -17,8 +17,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     label: string;
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     format: "legacy" | "contact_channel";
     hideType: boolean;
     hideAddButton: boolean;

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

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

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

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

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

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     placeholder: string;
     readonly: boolean;
     disabledErrorMessage: boolean;
-    disabledIcon: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
+    disabledIcon: boolean;
     roundedFull: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     placeholder: string;
     readonly: boolean;
     disabledErrorMessage: boolean;
-    disabledIcon: boolean;
     iconPosition: import("#pukaad-ui/types/components/input/input-search").InputSearchIconPosition;
+    disabledIcon: boolean;
     roundedFull: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     description: string;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     description: string;
     labelKey: string;
     placeholder: string;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     descriptionKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-text-field.d.vue.ts

@@ -60,10 +60,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/input/input-text-field.vue.d.ts

@@ -60,10 +60,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     name: string;
     required: boolean;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -48,10 +48,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullWidth: boolean;
     rows: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -48,10 +48,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     fullWidth: boolean;
     rows: number;
     readonly: boolean;
+    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;
-    limit: number;
     heightScroll: boolean;
     spaceToComma: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/input/input-typed-field.d.vue.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     name: string;
     required: boolean;
     options: import("../../../types/components/input/input-select.js").InputSelectItem[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     removable: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;

package/dist/runtime/components/input/input-typed-field.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     name: string;
     required: boolean;
     options: import("../../../types/components/input/input-select.js").InputSelectItem[];
-    showCounter: boolean;
     limit: number;
+    showCounter: boolean;
     removable: boolean;
     selectClass: import("vue").HTMLAttributes["class"];
     resetOnTypeChange: boolean;

package/dist/runtime/components/modal/suggest-edit-place/place-Adddateopening.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon name="lucide:clock" :size="20" class="text-primary shrink-0" />
-      <div class="font-body-large-prominent">เพิ่มวัน เวลาทำการ</div>
-    </div>
-    <InputDateOpening name="new_opening_hours" v-model="newOpeningHours" />
-    <InputDateOpeningSpecial
-      v-if="isNewOpeningHoursCompleted"
-      name="new_special_days"
-      v-model="newSpecialDays"
-    />
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon name="lucide:clock" :size="20" class="text-primary shrink-0" />
+      <div class="font-body-large-prominent">เพิ่มวัน เวลาทำการ</div>
+    </div>
+    <InputDateOpening name="new_opening_hours" v-model="newOpeningHours" />
+    <InputDateOpeningSpecial
+      v-if="isNewOpeningHoursCompleted"
+      name="new_special_days"
+      v-model="newSpecialDays"
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/modal/suggest-edit-place/place-Adddescription.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="flex flex-col gap-[16px]">
-    <div class="flex gap-[8px] items-center">
-      <Icon
-        name="lucide:circle-alert"
-        :size="20"
-        class="text-primary shrink-0"
-      />
-      <div class="font-body-large-prominent">เพิ่มคำอธิบาย</div>
-    </div>
-    <InputTextarea
-      name="new_description"
-      v-model="descriptionValue"
-      label="คำอธิบาย"
-      placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
-      :limit="220"
-      show-counter
-    />
-  </div>
+  <div class="flex flex-col gap-[16px]">
+    <div class="flex gap-[8px] items-center">
+      <Icon
+        name="lucide:circle-alert"
+        :size="20"
+        class="text-primary shrink-0"
+      />
+      <div class="font-body-large-prominent">เพิ่มคำอธิบาย</div>
+    </div>
+    <InputTextarea
+      name="new_description"
+      v-model="descriptionValue"
+      label="คำอธิบาย"
+      placeholder="คำอธิบายเกี่ยวกับสถานที่ (สูงสุด 220 ตัวอักษร)"
+      :limit="220"
+      show-counter
+    />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/button/index.d.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from "class-variance-authority";
 export { default as Button } from "./Button.vue.js";
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "text" | "default" | "outline" | "ghost" | "icon" | "glass" | null | undefined;
-    color?: "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | null | undefined;
+    color?: "default" | "primary" | "secondary" | "destructive" | "info" | "warning" | "success" | "dark" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-xs" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/runtime/components/ui/button/index.js

@@ -20,7 +20,8 @@ export const buttonVariants = cva(
         destructive: "text-destructive",
         info: "text-info-foreground",
         warning: "text-warning",
-        success: "text-success"
+        success: "text-success",
+        dark: "text-dark"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -68,6 +69,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "bg-success text-white hover:bg-success/90"
       },
+      {
+        variant: "default",
+        color: "dark",
+        class: "bg-dark text-white hover:bg-dark/90"
+      },
       {
         variant: "outline",
         color: "default",
@@ -103,6 +109,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "border border-success text-success hover:text-success/90 bg-white"
       },
+      {
+        variant: "outline",
+        color: "dark",
+        class: "border border-dark text-dark hover:text-dark/80 bg-white"
+      },
       {
         variant: "ghost",
         color: "default",
@@ -138,6 +149,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "text-success hover:bg-success/90 hover:text-white"
       },
+      {
+        variant: "ghost",
+        color: "dark",
+        class: "text-dark hover:bg-dark hover:text-white"
+      },
       {
         variant: "icon",
         color: "default",
@@ -173,12 +189,22 @@ export const buttonVariants = cva(
         color: "success",
         class: "text-success hover:bg-success/90 hover:text-white"
       },
+      {
+        variant: "icon",
+        color: "dark",
+        class: "text-dark hover:bg-dark hover:text-white"
+      },
       // glass variant - โปร่งบนพื้นรูป ไอคอนขาวตลอด hover ถึงเป็นสีเต็ม
       {
         variant: "glass",
         color: "primary",
         class: "bg-black/30 text-white hover:bg-primary"
       },
+      {
+        variant: "glass",
+        color: "dark",
+        class: "bg-black/30 text-white hover:bg-dark"
+      },
       // text variant - just plain text with color, no background or hover effects
       {
         variant: "text",
@@ -215,6 +241,11 @@ export const buttonVariants = cva(
         color: "success",
         class: "text-success hover:opacity-80"
       },
+      {
+        variant: "text",
+        color: "dark",
+        class: "text-dark hover:opacity-80"
+      },
       // link variant - inline link style, primary blue by default, no padding
       {
         variant: "link",
@@ -250,6 +281,11 @@ export const buttonVariants = cva(
         variant: "link",
         color: "success",
         class: "text-success hover:opacity-80"
+      },
+      {
+        variant: "link",
+        color: "dark",
+        class: "text-dark hover:opacity-80"
       }
     ],
     defaultVariants: {

package/package.json

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