pukaad-ui-lib 1.70.0 → 1.72.0

package/dist/module.json

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

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

@@ -1,18 +1,19 @@
-import type { ChipProps, ChipColor, ChipSize } from "@/types/components/chip";
-declare var __VLS_1: {};
+type ChipColor = "default" | "primary" | "success" | "warning" | "error" | "outline";
+interface ChipProps {
+    color?: ChipColor;
+    closable?: boolean;
+}
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     closable: () => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
     onClosable?: (() => any) | undefined;
 }>, {
-    size: ChipSize;
-    flat: boolean;
     color: ChipColor;
     closable: boolean;
-    autoHeight: boolean;
 }, {}, {}, {}, 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/chip.vue

@@ -1,13 +1,5 @@
 <template>
-  <div
-    :class="[
-  'rounded-full px-[8px] py-[4px] font-body-large inline-flex gap-[4px] justify-center items-center',
-  !props.flat && 'border-[1px]',
-  props.autoHeight ? 'break-all' : height,
-  color,
-  size
-]"
-  >
+  <Badge :variant="variant" class="gap-1">
     <slot name="default" />
     <div
       v-if="props.closable"
@@ -16,44 +8,26 @@
     >
       <Icon name="fa6-solid:xmark" size="16" />
     </div>
-  </div>
+  </Badge>
 </template>
 
 <script setup>
 import { computed } from "vue";
+import Badge from "@/runtime/components/ui/badge/Badge.vue";
 const emit = defineEmits(["closable"]);
 const props = defineProps({
   color: { type: String, required: false, default: "default" },
-  flat: { type: Boolean, required: false, default: false },
-  closable: { type: Boolean, required: false, default: false },
-  autoHeight: { type: Boolean, required: false, default: false },
-  size: { type: String, required: false, default: "medium" }
+  closable: { type: Boolean, required: false, default: false }
 });
-const color = computed(() => {
-  const colors = {
-    default: props.flat ? "border-gray bg-mercury" : "border-gray bg-white",
-    primary: "border-primary bg-info text-primary",
-    success: "border-success bg-green-light text-success",
-    warning: "border-warning bg-yellow-light text-warning",
-    error: "border-error bg-red-light text-error"
+const variant = computed(() => {
+  const colorToVariant = {
+    default: "default",
+    primary: "primary",
+    success: "success",
+    warning: "warning",
+    error: "destructive",
+    outline: "outline"
   };
-  return colors[props.color];
-});
-const height = computed(() => {
-  const sizes = {
-    tiny: "h-[24px]",
-    small: "h-[32px]",
-    medium: "h-[40px]",
-    large: "h-[48px]",
-    "x-large": "h-[52px]"
-  };
-  return sizes[props.size];
-});
-const size = computed(() => {
-  if (props.size === "tiny") {
-    return "font-body-small";
-  } else {
-    return "font-body-large";
-  }
+  return colorToVariant[props.color];
 });
 </script>

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

@@ -1,18 +1,19 @@
-import type { ChipProps, ChipColor, ChipSize } from "@/types/components/chip";
-declare var __VLS_1: {};
+type ChipColor = "default" | "primary" | "success" | "warning" | "error" | "outline";
+interface ChipProps {
+    color?: ChipColor;
+    closable?: boolean;
+}
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     closable: () => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
     onClosable?: (() => any) | undefined;
 }>, {
-    size: ChipSize;
-    flat: boolean;
     color: ChipColor;
     closable: boolean;
-    autoHeight: boolean;
 }, {}, {}, {}, 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/drawer/drawer-profile-about.vue

@@ -38,7 +38,7 @@
     </div>
     <template #footer="{ meta }">
       <div class="flex justify-end gap-[16px] items-center">
-        <Button type="outline" @click="onClose"> ยกเลิก </Button>
+        <Button variant="outline" @click="onClose"> ยกเลิก </Button>
         <Button type="submit" color="primary" :disabled="!meta.valid">
           ยืนยัน
         </Button>
@@ -82,14 +82,7 @@ watch(isDrawerOpen, (newVal) => {
 const onClose = async () => {
   const isModified = JSON.stringify(form.value) !== JSON.stringify(props.item);
   if (isModified) {
-    const { isConfirmed } = await $alert.show({
-      type: "warning",
-      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
-      description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
-      confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
-      cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
-      showCancelBtn: true
-    });
+    const isConfirmed = await $alert.confirmUnsavedChanges();
     if (isConfirmed) {
       isDrawerOpen.value = false;
     }

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

@@ -48,8 +48,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
-    placeholder: string;
     gap: string;
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

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

@@ -48,8 +48,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     required: boolean;
     name: string;
-    placeholder: string;
     gap: string;
+    placeholder: string;
     labelDetail: string;
     placeholderDetail: string;
     requiredDetail: boolean;

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

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

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

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

package/dist/runtime/components/input/input-birth-date.d.vue.ts

@@ -29,8 +29,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     required: boolean;
     id: string;
     name: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     disabledErrorMessage: boolean;
     locale: string;
     layout: "month-and-year" | "month-only" | "year-only";

package/dist/runtime/components/input/input-birth-date.vue.d.ts

@@ -29,8 +29,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     required: boolean;
     id: string;
     name: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     disabledErrorMessage: boolean;
     locale: string;
     layout: "month-and-year" | "month-only" | "year-only";

package/dist/runtime/components/input/input-date-picker.d.vue.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     disabledErrorMessage: boolean;
     locale: string;
     layout: "month-and-year" | "month-only" | "year-only";

package/dist/runtime/components/input/input-date-picker.vue.d.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     required: boolean;
     id: string;
     name: string;
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     disabledErrorMessage: boolean;
     locale: string;
     layout: "month-and-year" | "month-only" | "year-only";

package/dist/runtime/components/ui/badge/Badge.d.vue.ts

@@ -0,0 +1,20 @@
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { BadgeVariants } from ".";
+type __VLS_Props = PrimitiveProps & {
+    variant?: BadgeVariants["variant"];
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/ui/badge/Badge.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Primitive } from "reka-ui";
+import { cn } from "@/runtime/plugins/shadcn";
+import { badgeVariants } from ".";
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  variant: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/ui/badge/Badge.vue.d.ts

@@ -0,0 +1,20 @@
+import type { PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { BadgeVariants } from ".";
+type __VLS_Props = PrimitiveProps & {
+    variant?: BadgeVariants["variant"];
+    class?: HTMLAttributes["class"];
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/ui/badge/index.d.ts

@@ -0,0 +1,6 @@
+import type { VariantProps } from "class-variance-authority";
+export { default as Badge } from "./Badge.vue.js";
+export declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "primary" | "secondary" | "destructive" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

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

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+export { default as Badge } from "./Badge.vue";
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-[12px] py-[6px] font-body-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-white [a&]:hover:bg-white/90",
+        primary: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        success: "border-success bg-green-light text-success [a&]:hover:bg-green-light/80",
+        warning: "border-warning bg-yellow-light text-warning [a&]:hover:bg-yellow-light/80",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground "
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);

package/dist/runtime/components/ui/pin-input/PinInput.d.vue.ts

@@ -1,12 +1,12 @@
 import type { PinInputRootProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 declare const __VLS_export: <Type extends "text" | "number" = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(PinInputRootProps<Type> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(PinInputRootProps<Type> & {
         class?: HTMLAttributes["class"];
     }) & {
         "onUpdate:modelValue"?: ((value: [Type] extends ["number"] ? number[] : string[]) => any) | undefined;
         onComplete?: ((value: [Type] extends ["number"] ? number[] : string[]) => any) | undefined;
-    }> & import("vue").PublicProps & (typeof globalThis extends {
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;

package/dist/runtime/components/ui/pin-input/PinInput.vue.d.ts

@@ -1,12 +1,12 @@
 import type { PinInputRootProps } from "reka-ui";
 import type { HTMLAttributes } from "vue";
 declare const __VLS_export: <Type extends "text" | "number" = "text">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<(PinInputRootProps<Type> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(PinInputRootProps<Type> & {
         class?: HTMLAttributes["class"];
     }) & {
         "onUpdate:modelValue"?: ((value: [Type] extends ["number"] ? number[] : string[]) => any) | undefined;
         onComplete?: ((value: [Type] extends ["number"] ? number[] : string[]) => any) | undefined;
-    }> & import("vue").PublicProps & (typeof globalThis extends {
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;

package/dist/runtime/components/ui/select/SelectContent.vue

@@ -34,6 +34,7 @@ const props = defineProps({
   reference: { type: null, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
   class: { type: null, required: false }
 });
 const emits = defineEmits(["closeAutoFocus", "escapeKeyDown", "pointerDownOutside"]);

package/dist/runtime/plugins/alert.d.ts

@@ -13,6 +13,11 @@ export interface AlertResponse {
 }
 export declare class Alert {
     show(options?: AlertOptions): Promise<AlertResponse>;
+    /**
+     * แสดง alert ยืนยันการออกจากหน้าที่มีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก
+     * @returns Promise<boolean> - true ถ้าผู้ใช้กด "ละทิ้ง", false ถ้ากด "แก้ไขต่อ"
+     */
+    confirmUnsavedChanges(): Promise<boolean>;
 }
 declare const _default: import("nuxt/app").Plugin<{
     alert: Alert;

package/dist/runtime/plugins/alert.js

@@ -106,6 +106,21 @@ export class Alert {
       app.mount(div);
     });
   }
+  /**
+   * แสดง alert ยืนยันการออกจากหน้าที่มีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก
+   * @returns Promise<boolean> - true ถ้าผู้ใช้กด "ละทิ้ง", false ถ้ากด "แก้ไขต่อ"
+   */
+  async confirmUnsavedChanges() {
+    const result = await this.show({
+      type: "warning",
+      title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
+      confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
+      cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
+      showCancelBtn: true
+    });
+    return result.isConfirmed;
+  }
 }
 export default defineNuxtPlugin(() => {
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.70.0",
+  "version": "1.72.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "pinia-plugin-persistedstate": "^4.4.1",
     "quill": "^2.0.3",
     "quill-delta-to-html": "^0.12.1",
-    "reka-ui": "^2.6.1",
+    "reka-ui": "^2.7.0",
     "shadcn-nuxt": "^2.3.3",
     "shadcn-vue": "^2.3.2",
     "tailwind-merge": "^3.4.0",
@@ -88,4 +88,4 @@
     "@types/vue-cropperjs": "^4.1.6",
     "@vue/compiler-sfc": "^3.5.24"
   }
-}
+}