pukaad-ui-lib 1.45.0 → 1.47.0

package/dist/module.json

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

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

@@ -1,5 +1,6 @@
 import type { InputTextFieldProps } from "@/runtime/components/input/input-text-field.vue";
 interface InputPhoneProps extends InputTextFieldProps {
+    showIconStatus?: boolean;
 }
 type __VLS_Props = InputPhoneProps;
 type __VLS_ModelProps = {
@@ -8,6 +9,7 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
+    setSuccess: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -15,6 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
+    showIconStatus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,20 +1,25 @@
 <template>
   <InputTextField
     ref="phoneRef"
-    v-bind="props"
+    v-bind="$props"
     :rules="defaultRules || props.rules"
     v-model="phoneCode"
-  />
+  >
+    <template #append v-if="props.showIconStatus && validationState !== 'none'">
+      <Icon :name="validationIcon" size="20" :class="validationIconClass" />
+    </template>
+  </InputTextField>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import {
   formatPhone,
   reverseFormatPhone,
   checkPattern
 } from "@/runtime/utils/phone";
 const props = defineProps({
+  showIconStatus: { type: Boolean, required: false, default: false },
   id: { type: String, required: false, default: "input-phone" },
   name: { type: String, required: false, default: "input-phone" },
   disabled: { type: Boolean, required: false },
@@ -37,9 +42,16 @@ const props = defineProps({
 });
 const phoneRef = ref();
 const phoneCode = ref("");
+const validationState = ref("none");
 const modelValue = defineModel({ type: String, ...{
   default: ""
 } });
+const validationIcon = computed(() => {
+  return validationState.value === "success" ? "lucide:check" : "lucide:x";
+});
+const validationIconClass = computed(() => {
+  return validationState.value === "success" ? "text-success" : "text-destructive";
+});
 const defaultRules = (v) => {
   if (!v) return "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E40\u0E1A\u0E2D\u0E23\u0E4C\u0E42\u0E17\u0E23\u0E28\u0E31\u0E1E\u0E17\u0E4C";
   if (!checkPattern(v)) return "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
@@ -48,19 +60,42 @@ const defaultRules = (v) => {
 watch(
   phoneCode,
   (v) => {
-    if (!v) return;
-    const newNumber = formatPhone(v) || "";
-    phoneCode.value = newNumber;
-    modelValue.value = reverseFormatPhone(newNumber);
+    if (!v) {
+      validationState.value = "none";
+      return;
+    }
+    const isValidPattern = checkPattern(v);
+    if (isValidPattern) {
+      const newNumber = formatPhone(v) || "";
+      if (newNumber && newNumber !== v) {
+        phoneCode.value = newNumber;
+      }
+      modelValue.value = reverseFormatPhone(newNumber || v);
+      validationState.value = "success";
+    } else {
+      if (v.includes("+66")) {
+        phoneCode.value = "";
+        modelValue.value = "";
+        validationState.value = "none";
+      } else {
+        validationState.value = "error";
+      }
+    }
   },
   {
     immediate: true
   }
 );
 const setErrors = (errMsg) => {
+  validationState.value = errMsg.length > 0 ? "error" : "none";
   phoneRef.value?.setErrors(errMsg);
 };
+const setSuccess = () => {
+  validationState.value = "success";
+  phoneRef.value?.setErrors([]);
+};
 defineExpose({
-  setErrors
+  setErrors,
+  setSuccess
 });
 </script>

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

@@ -1,5 +1,6 @@
 import type { InputTextFieldProps } from "@/runtime/components/input/input-text-field.vue";
 interface InputPhoneProps extends InputTextFieldProps {
+    showIconStatus?: boolean;
 }
 type __VLS_Props = InputPhoneProps;
 type __VLS_ModelProps = {
@@ -8,6 +9,7 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     setErrors: (errMsg: string[]) => void;
+    setSuccess: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -15,6 +17,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     id: string;
     name: string;
+    showIconStatus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ui/dialog/DialogContent.d.vue.ts

@@ -12,22 +12,22 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
-    close: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
     openAutoFocus: (event: Event) => any;
     closeAutoFocus: (event: Event) => any;
+    close: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
-    onClose?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    onClose?: ((event: Event) => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/dialog/DialogContent.vue.d.ts

@@ -12,22 +12,22 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
-    close: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
     openAutoFocus: (event: Event) => any;
     closeAutoFocus: (event: Event) => any;
+    close: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
-    onClose?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    onClose?: ((event: Event) => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/package.json

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