pukaad-ui-lib 1.0.1

package/dist/runtime/plugins/alert.js

@@ -0,0 +1,111 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { createApp, h } from "vue";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction
+} from "@/runtime/components/ui/alert-dialog";
+import Icon from "@/runtime/components/icons.vue";
+class Alert {
+  show(options = {}) {
+    const response = {
+      isCanceled: false,
+      isConfirmed: false
+    };
+    const {
+      type = "success",
+      confirmText = "\u0E15\u0E01\u0E25\u0E07",
+      cancelText = "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",
+      showCancelBtn = false
+    } = options;
+    return new Promise((resolve) => {
+      const app = createApp({
+        setup() {
+          const onCanceled = () => {
+            app.unmount();
+            resolve({ ...response, isCanceled: true });
+          };
+          const onConfirmed = () => {
+            app.unmount();
+            resolve({ ...response, isConfirmed: true });
+          };
+          return () => h(
+            AlertDialog,
+            {
+              open: true
+            },
+            {
+              default: () => h(AlertDialogContent, null, {
+                default: () => [
+                  h(AlertDialogHeader, null, {
+                    default: () => h(
+                      "div",
+                      {
+                        class: "flex gap-2"
+                      },
+                      {
+                        default: () => [
+                          h(Icon, {
+                            class: options.type === "success" ? "text-success" : options.type === "warning" ? "text-warning" : "text-destructive",
+                            name: options.type === "success" ? "tabler:circle-check-filled" : options.type === "warning" ? "gravity-ui:circle-question-fill" : "gravity-ui:circle-exclamation-fill",
+                            size: 24
+                          }),
+                          h("div", null, {
+                            default: () => [
+                              h(AlertDialogTitle, () => options?.title),
+                              h(
+                                AlertDialogDescription,
+                                () => options?.description
+                              )
+                            ]
+                          })
+                        ]
+                      }
+                    )
+                  }),
+                  h(AlertDialogFooter, null, {
+                    default: () => [
+                      showCancelBtn && h(
+                        AlertDialogCancel,
+                        {
+                          onClick: onCanceled
+                        },
+                        {
+                          default: () => cancelText
+                        }
+                      ),
+                      h(
+                        AlertDialogAction,
+                        {
+                          onClick: onConfirmed
+                        },
+                        {
+                          default: () => confirmText
+                        }
+                      )
+                    ]
+                  })
+                ]
+              })
+            }
+          );
+        }
+      });
+      const div = document.createElement("div");
+      document.body.appendChild(div);
+      app.mount(div);
+    });
+  }
+}
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      alert: new Alert()
+    }
+  };
+});

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

@@ -0,0 +1,8 @@
+import dayjs from "dayjs";
+import "dayjs/locale/th";
+declare const _default: import("nuxt/app").Plugin<{
+    dayjs: typeof dayjs;
+}> & import("nuxt/app").ObjectPlugin<{
+    dayjs: typeof dayjs;
+}>;
+export default _default;

package/dist/runtime/plugins/dayjs.js

@@ -0,0 +1,19 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import dayjs from "dayjs";
+import buddhistEra from "dayjs/plugin/buddhistEra";
+import minMax from "dayjs/plugin/minMax";
+import updateLocale from "dayjs/plugin/updateLocale";
+import duration from "dayjs/plugin/duration";
+import "dayjs/locale/th";
+export default defineNuxtPlugin(() => {
+  dayjs.extend(updateLocale);
+  dayjs.extend(buddhistEra);
+  dayjs.extend(minMax);
+  dayjs.extend(duration);
+  dayjs.locale("th");
+  return {
+    provide: {
+      dayjs
+    }
+  };
+});

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

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/loadingPage.js

@@ -0,0 +1,89 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { createApp, h } from "vue";
+import Icons from "@/runtime/components/icons.vue";
+export default defineNuxtPlugin((_nuxtApp) => {
+  class LoadingPage {
+    static container = null;
+    appInstance = null;
+    loadingElement = null;
+    initContainer() {
+      if (typeof window !== "undefined") {
+        LoadingPage.container = document.createElement("ul");
+        document.body.appendChild(LoadingPage.container);
+      }
+    }
+    constructor() {
+      if (!LoadingPage.container) {
+        this.initContainer();
+      }
+    }
+    show() {
+      const app = createApp({
+        setup() {
+          return () => h(
+            "div",
+            {
+              class: "fixed top-0 left-0 right-0 bottom-0 z-loading-page flex flex-col items-center justify-center h-screen w-screen bg-white"
+            },
+            {
+              default: () => [
+                h(
+                  "div",
+                  {
+                    class: "flex flex-col items-center justify-center flex-1"
+                  },
+                  {
+                    default: () => [
+                      h(Icons, {
+                        name: "pukaad:memsg",
+                        size: 80
+                      })
+                    ]
+                  }
+                ),
+                h(
+                  "div",
+                  {
+                    class: "flex flex-col items-center justify-center h-50 font-body-large"
+                  },
+                  {
+                    default: () => [
+                      h("div", "from"),
+                      h(
+                        "div",
+                        {
+                          class: "text-primary font-headline-large-prominent"
+                        },
+                        "MeMessage"
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          );
+        }
+      });
+      this.loadingElement = document.createElement("div");
+      LoadingPage.container.appendChild(this.loadingElement);
+      app.mount(this.loadingElement);
+      this.appInstance = app;
+    }
+    hide() {
+      if (this.appInstance && this.loadingElement) {
+        this.loadingElement.classList.add(
+          "opacity-0",
+          "transition-opacity",
+          "duration-500"
+        );
+        setTimeout(() => {
+          this.appInstance.unmount();
+          this.loadingElement.remove();
+          this.appInstance = null;
+          this.loadingElement = null;
+        }, 500);
+      }
+    }
+  }
+  _nuxtApp.provide("loadingPage", new LoadingPage());
+});

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

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/lodash.js

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import lodash from "#lodash";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.$lodash = lodash;
+});

package/dist/runtime/plugins/quill.client.d.ts

@@ -0,0 +1,7 @@
+import Quill from "quill";
+declare const _default: import("nuxt/app").Plugin<{
+    quill: typeof Quill;
+}> & import("nuxt/app").ObjectPlugin<{
+    quill: typeof Quill;
+}>;
+export default _default;

package/dist/runtime/plugins/quill.client.js

@@ -0,0 +1,9 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import Quill from "quill";
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      quill: Quill
+    }
+  };
+});

package/dist/runtime/plugins/re-captcha.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/re-captcha.js

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { install as VueRecaptchaInstall } from "vue3-recaptcha-v2";
+export default defineNuxtPlugin((nuxtApp) => {
+  const recaptchaKey = nuxtApp.$config.public?.RECAPTCHA_KEY;
+  if (!recaptchaKey) {
+    console.warn("[reCAPTCHA] RECAPTCHA_KEY is missing in runtime config");
+    return;
+  }
+  nuxtApp.vueApp.use(VueRecaptchaInstall, {
+    sitekey: String(recaptchaKey),
+    cnDomains: false
+  });
+});

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

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/runtime/plugins/shadcn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

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

@@ -0,0 +1,30 @@
+export type ToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type ToastVariant = "solid" | "outline";
+export type ToastType = "success" | "warning" | "error";
+export interface ToastResponse {
+    isCanceled: boolean;
+    isConfirmed: boolean;
+}
+export interface ToastOptions {
+    position?: ToastPosition;
+    variant?: ToastVariant;
+    type?: ToastType;
+    icon?: string;
+    duration?: number;
+    message: string;
+}
+declare class Toast {
+    private static container;
+    private static ensureContainer;
+    show(options: ToastOptions): Promise<ToastResponse>;
+    success(message: string, options?: ToastOptions): Promise<ToastResponse>;
+    warning(message: string, options?: ToastOptions): Promise<ToastResponse>;
+    error(message: string, options?: ToastOptions): Promise<ToastResponse>;
+    info(message: string, options?: ToastOptions): Promise<ToastResponse>;
+}
+declare const _default: import("nuxt/app").Plugin<{
+    toast: Toast;
+}> & import("nuxt/app").ObjectPlugin<{
+    toast: Toast;
+}>;
+export default _default;

package/dist/runtime/plugins/toast.js

@@ -0,0 +1,104 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { createApp, h, computed, ref, onMounted } from "vue";
+import Icons from "@/runtime/components/icons.vue";
+class Toast {
+  static container = null;
+  static ensureContainer() {
+    if (typeof window === "undefined") return;
+    if (!Toast.container) {
+      const container = document.createElement("ul");
+      container.className = "fixed z-toast space-y-2 pointer-events-none";
+      document.body.appendChild(container);
+      Toast.container = container;
+    }
+  }
+  show(options) {
+    return new Promise((resolve) => {
+      Toast.ensureContainer();
+      const app = createApp({
+        setup() {
+          const visible = ref(true);
+          const typeClass = computed(() => {
+            const types = {
+              success: options.variant === "outline" ? "border border-success text-success bg-white" : "bg-success border border-white text-white",
+              warning: options.variant === "outline" ? "border border-warning text-warning bg-white" : "bg-warning border border-white text-white",
+              error: options.variant === "outline" ? "border border-destructive text-error bg-white" : "bg-destructive border border-white text-white"
+            };
+            return types[options.type || "success"];
+          });
+          const iconName = computed(() => {
+            const map = {
+              success: "fa6-solid:circle-check",
+              warning: "fa6-solid:triangle-exclamation",
+              error: "fa6-solid:ban"
+            };
+            return options.icon || map[options.type || "success"];
+          });
+          onMounted(() => {
+            setTimeout(() => {
+              visible.value = false;
+              setTimeout(() => {
+                app.unmount();
+                toastElement.remove();
+                resolve({ isConfirmed: true, isCanceled: false });
+              }, 300);
+            }, options.duration || 3e3);
+          });
+          return () => h(
+            "div",
+            {
+              class: [
+                "flex items-center gap-2 px-4 py-3 rounded shadow-md transition-opacity duration-300 pointer-events-auto",
+                typeClass.value,
+                visible.value ? "opacity-100" : "opacity-0"
+              ]
+            },
+            [
+              h(Icons, { name: iconName.value }),
+              h(
+                "span",
+                { class: "flex-1 font-body-large-prominent" },
+                options.message || "Alert"
+              )
+            ]
+          );
+        }
+      });
+      const toastElement = document.createElement("li");
+      toastElement.className = "pointer-events-auto";
+      const position = options.position || "top-right";
+      Toast.container.className = `fixed z-toast space-y-2 pointer-events-none ${{
+        "top-left": "top-[16px] left-[16px] right-[16px] md:right-auto md:w-[325px]",
+        "top-right": "top-[16px] right-[16px] left-[16px] md:left-auto md:w-[325px]",
+        "bottom-left": "bottom-[16px] left-[16px] right-[16px] md:right-auto md:w-[325px]",
+        "bottom-right": "bottom-[16px] right-[16px] left-[16px] md:left-auto md:w-[325px]"
+      }[position]}`;
+      Toast.container.appendChild(toastElement);
+      app.mount(toastElement);
+    });
+  }
+  success(message, options) {
+    return this.show({ ...options, type: "success", message });
+  }
+  warning(message, options) {
+    return this.show({ ...options, type: "warning", message });
+  }
+  error(message, options) {
+    return this.show({ ...options, type: "error", message });
+  }
+  info(message, options) {
+    return this.show({
+      ...options,
+      type: "success",
+      variant: "outline",
+      message
+    });
+  }
+}
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      toast: new Toast()
+    }
+  };
+});

package/dist/runtime/utils/phone.d.ts

@@ -0,0 +1,3 @@
+export declare const checkPattern: (v: string) => boolean;
+export declare const formatPhone: (phone: string) => string | undefined;
+export declare const reverseFormatPhone: (formatNumber: string) => string;

package/dist/runtime/utils/phone.js

@@ -0,0 +1,39 @@
+export const checkPattern = (v) => {
+  if (!v) return false;
+  const telPattern = [
+    /^(06|08|09)\d{8}$/,
+    /^(8|9)\d{8}$/,
+    /^\+66(06|08|09)\d{8}$/,
+    /^\+66(6|8|9)\d{8}$/,
+    /^\(\+66\)(06|08|09)\d{8}$/,
+    /^\(\+66\)(6|8|9)\d{8}$/,
+    /^66(06|08|09)\d{8}$/,
+    /^66(6|8|9)\d{8}$/,
+    /^\(\+66\) (06|08|09) \d{3} \d{4}\D?$/,
+    /^\(\+66\) (6|8|9)\d{1} \d{3} \d{4}\D?$/,
+    /^\+66 (06|08|09) \d{3} \d{4}/,
+    /^\+66 (6|8|9) \d{3} \d{4}/
+  ];
+  return telPattern.some((sm) => sm.test(v));
+};
+export const formatPhone = (phone) => {
+  if (!checkPattern(phone)) return;
+  const newPhone = phone.startsWith("(+66)") ? phone.replace("(+66)", "+66") : phone.startsWith("66") ? phone.replace("66", "") : phone.startsWith("0") ? phone.slice(1) : phone;
+  const prefix = newPhone.startsWith("+66") ? newPhone : "+66" + newPhone;
+  const formatNumber = prefix.replace(/^(\+66|66)(\s)?/, "$1 ");
+  const formatNumberWithSpaces = formatNumber.replace(
+    /(\d{2})(\d{3})(\d{4})/,
+    "$1 $2 $3"
+  );
+  return formatNumberWithSpaces.replace("+66", "(+66)");
+};
+export const reverseFormatPhone = (formatNumber) => {
+  const digitsOnly = formatNumber.replace(/\D/g, "");
+  if (digitsOnly.startsWith("66")) {
+    return "+" + digitsOnly;
+  } else if (digitsOnly.startsWith("0")) {
+    return "+66" + digitsOnly.slice(1);
+  } else {
+    return "+" + digitsOnly;
+  }
+};

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "pukaad-ui-lib",
+  "version": "1.0.1",
+  "description": "pukaad-ui for MeMSG",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/pukaad/pukaad/webs/webs/pukaad-ui.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground --port 8000 --no-fork",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@cropper/element-canvas": "^2.0.0",
+    "@nuxt/icon": "^1.10.3",
+    "@nuxt/image": "^1.9.0",
+    "@pinia/nuxt": "^0.11.1",
+    "@tailwindcss/vite": "4.0.7",
+    "@tanstack/vue-table": "^8.21.3",
+    "@vee-validate/nuxt": "^4.15.0",
+    "@vee-validate/yup": "^4.15.0",
+    "@vee-validate/zod": "^4.15.1",
+    "@vueup/vue-quill": "^1.2.0",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/nuxt": "^12.7.0",
+    "changelogen": "^0.5.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cropperjs": "^1.6.2",
+    "dayjs": "^1.11.13",
+    "input-otp": "^1.4.2",
+    "lodash": "^4.17.21",
+    "nuxt": "^4.0.3",
+    "nuxt-google-translate": "^1.2.0",
+    "nuxt-rating": "^0.1.6",
+    "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.4.1",
+    "quill": "^2.0.3",
+    "quill-delta-to-html": "^0.12.1",
+    "reka-ui": "^2.6.1",
+    "shadcn-nuxt": "^2.3.3",
+    "shadcn-vue": "^2.3.2",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.1.1",
+    "tailwindcss": "4.0.7",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "vee-validate": "^4.15.1",
+    "vitest": "^3.0.4",
+    "vue-cropperjs": "^5.0.0",
+    "vue-sfc-transformer": "^0.1.17",
+    "vue-tsc": "^3.1.3",
+    "vue3-recaptcha-v2": "^2.1.0",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.72",
+    "@nuxt/devtools": "^1.7.0",
+    "@nuxt/eslint-config": "^0.7.5",
+    "@nuxt/kit": "^4.0.0",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "^4.0.0",
+    "@nuxt/test-utils": "^3.15.4",
+    "@nuxt/types": "^2.18.1",
+    "@types/cropperjs": "^1.1.5",
+    "@types/node": "^24.9.1",
+    "@types/vue-cropperjs": "^4.1.6",
+    "@vue/compiler-sfc": "^3.5.24"
+  }
+}