@fewangsit/wangsvue-fats 1.0.1-alpha.20 → 1.0.1-alpha.21

package/config/locale.es.js

@@ -62,7 +62,8 @@ const e = {
       asideRightExpandedButtonLabel: "Close <"
     },
     InputPhoneNumber: {
-      defaultPlaceholder: "Enter phone number"
+      defaultPlaceholder: "Enter phone number",
+      emptyInvalidText: "{label} must not be empty"
     },
     InputNumber: {
       defaultPlaceholder: "Enter {label}",

package/inputphonenumber/index.d.ts

@@ -1,7 +1,10 @@
 import { DefineComponent } from 'vue';
 
+import { CustomValidation } from '../form';
+
 export interface InputPhoneNumberLocaleConfig {
   defaultPlaceholder?: string;
+  emptyInvalidText?: string;
 }
 
 /**
@@ -63,7 +66,7 @@ export interface InputPhoneNumberProps {
    * Set the custom validator message.
    * By default each field has preserved with its validator message, you don't need to worrying about the message.
    */
-  validatorMessage?: string;
+  validatorMessage?: string | CustomValidation<'empty'>;
   /**
    * Show information about the field.
    */

package/inputphonenumber/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as G, onBeforeMount as V, shallowRef as u, onMounted as D, reactive as L, inject as x, computed as j, watch as C, createBlock as f, openBlock as P, withCtx as M, createElementVNode as d, withDirectives as F, createVNode as v, unref as c, normalizeClass as H, toDisplayString as R, normalizeProps as E, guardReactiveProps as J, vShow as q, nextTick as w } from "vue";
+import { defineComponent as G, onBeforeMount as V, shallowRef as u, onMounted as D, reactive as L, inject as x, computed as j, watch as C, createBlock as P, openBlock as R, withCtx as M, createElementVNode as d, withDirectives as F, createVNode as v, unref as c, normalizeClass as H, toDisplayString as w, normalizeProps as E, guardReactiveProps as J, vShow as q, nextTick as z } from "vue";
 import O from "axios";
 import { u as W } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
 import { u as Z } from "../plugins/WangsVue.es.js";
@@ -468,32 +468,42 @@ const Fc = {
         t,
         W(
           o.fieldName ?? "numberInput",
-          async (a) => await w(() => U(a))
+          async (a) => await z(() => U(a))
         )
       ), o.value != null && h(o.value), o.modelValue != null && h(o.modelValue);
     });
-    const { locale: z } = Z("InputPhoneNumber"), S = x("preset", {}).inputphonenumber, y = u(!1), b = j(() => o.invalid || !!t.errorMessage), k = navigator.userAgent.includes("Chrome"), U = (a) => o.invalid && o.validatorMessage ? o.validatorMessage : a == null && o.mandatory ? o.validatorMessage ?? `${o.label} harus diisi.` : !0, g = u(), l = u(), e = u(), I = u(0), t = L({ value: null }), T = async () => {
+    const { locale: b } = Z("InputPhoneNumber"), S = x("preset", {}).inputphonenumber, y = u(!1), k = j(() => o.invalid || !!t.errorMessage), B = navigator.userAgent.includes("Chrome"), U = (a) => {
+      var n;
+      if (o.invalid && typeof o.validatorMessage == "string")
+        return o.validatorMessage;
+      if (typeof o.validatorMessage != "string") {
+        const { empty: s } = o.validatorMessage ?? {};
+        if (a == null && o.mandatory)
+          return s ?? ((n = b.emptyInvalidText) == null ? void 0 : n.replace("{label}", o.label));
+      }
+      return !0;
+    }, g = u(), l = u(), i = u(), I = u(0), t = L({ value: null }), T = async () => {
       const { data: a } = await O.get(
         "https://assets.tagsamurai.com/json/country-dial-code.json"
       );
       return a.filter((n) => n.dial_code) ?? [];
-    }, B = () => {
-      t.value = e.value ? `${l.value} ${e.value}` : void 0, m("update:modelValue", t.value);
+    }, A = () => {
+      t.value = i.value ? `${l.value} ${i.value}` : void 0, m("update:modelValue", t.value);
     }, K = () => {
-      w(() => {
+      z(() => {
         const a = document.getElementById(
           "phone-number-input"
         );
         a && a.focus();
       });
-    }, A = (a, n) => {
-      l.value = a, e.value = n;
+    }, _ = (a, n) => {
+      l.value = a, i.value = n;
     }, h = (a) => {
       const n = a == null ? void 0 : a.split(" ");
-      n != null && n.length ? (A(n[0], n[1]), t.value = e.value ? `${l.value} ${e.value}` : void 0) : t.value = void 0;
+      n != null && n.length ? (_(n[0], n[1]), t.value = i.value ? `${l.value} ${i.value}` : void 0) : t.value = void 0;
     }, N = () => {
       if (g.value) {
-        const { country: a } = jc(), n = g.value.find((i) => i.name === a);
+        const { country: a } = jc(), n = g.value.find((s) => s.name === a);
         return n ? n.dial_code : "+62";
       }
       return "+62";
@@ -507,36 +517,36 @@ const Fc = {
     ), C(
       () => t.value,
       () => {
-        var i;
-        const [a, n] = ((i = t.value) == null ? void 0 : i.split(" ")) ?? [];
-        a && n && A(a, n);
+        var s;
+        const [a, n] = ((s = t.value) == null ? void 0 : s.split(" ")) ?? [];
+        a && n && _(a, n);
       }
     ), C(
       () => o.modelValue,
       (a) => {
         h(a);
       }
-    ), (a, n) => (P(), f(Y, {
+    ), (a, n) => (R(), P(Y, {
       info: o.fieldInfo,
       label: o.label,
       mandatory: o.mandatory
     }, {
       default: M(() => {
-        var i, _;
+        var s, f;
         return [
           d("div", Fc, [
             v(c($), {
               modelValue: l.value,
-              "onUpdate:modelValue": n[0] || (n[0] = (s) => l.value = s),
-              class: H((i = c(S)) == null ? void 0 : i.dialcode.root({ isChromeBased: c(k), invalidInput: b.value }).class),
+              "onUpdate:modelValue": n[0] || (n[0] = (e) => l.value = e),
+              class: H((s = c(S)) == null ? void 0 : s.dialcode.root({ isChromeBased: c(B), invalidInput: k.value }).class),
               disabled: o.disabled,
               "filter-fields": ["dial_code", "name"],
               options: g.value,
-              onChange: B,
+              onChange: A,
               onHide: n[1] || (n[1] = () => {
                 K(), y.value = !1;
               }),
-              onShow: n[2] || (n[2] = (s) => y.value = !0),
+              onShow: n[2] || (n[2] = (e) => y.value = !0),
               "data-wv-section": "dialcode",
               filter: "",
               "filter-placeholder": "Search",
@@ -546,32 +556,32 @@ const Fc = {
               dropdownicon: M(() => [
                 v(Q, E(J(c(S).dialcode.dropdownicon({ state: { isShowOverlay: y.value } }))), null, 16)
               ]),
-              option: M(({ option: s }) => [
+              option: M(({ option: e }) => [
                 d("div", Hc, [
                   d("img", {
-                    src: s.image,
+                    src: e.image,
                     alt: "country-img",
                     style: { height: "16px" }
                   }, null, 8, Ec),
-                  d("span", null, R(s.name), 1),
-                  d("span", null, R(s.dial_code), 1)
+                  d("span", null, w(e.name), 1),
+                  d("span", null, w(e.dial_code), 1)
                 ])
               ]),
               _: 1
             }, 8, ["modelValue", "class", "disabled", "options"]),
-            (P(), f(X, {
+            (R(), P(X, {
               key: I.value,
-              modelValue: e.value,
-              "onUpdate:modelValue": n[3] || (n[3] = (s) => e.value = s),
+              modelValue: i.value,
+              "onUpdate:modelValue": n[3] || (n[3] = (e) => i.value = e),
               "allowed-characters": /\d/,
               disabled: a.disabled,
-              "input-class": (_ = c(S)) == null ? void 0 : _.input({ isChromeBased: c(k), invalidInput: b.value }).class,
+              "input-class": (f = c(S)) == null ? void 0 : f.input({ isChromeBased: c(B), invalidInput: k.value }).class,
               "max-length": a.maxDigit,
-              placeholder: a.placeholder ?? c(z).defaultPlaceholder,
+              placeholder: a.placeholder ?? c(b).defaultPlaceholder,
               "use-field-wrapper": !1,
               "use-input-group": !1,
               "use-validator": !1,
-              onBlur: B,
+              onBlur: A,
               "data-wv-section": "phoneinput",
               "input-id": "phone-number-input",
               "prevent-input-on-max-length": ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-fats",
-  "version": "1.0.1-alpha.20",
+  "version": "1.0.1-alpha.21",
   "author": "Wangsit FE Developer",
   "description": "Fixed Asset Tagsamurai VueJS Component Library",
   "type": "module",

package/plugins/WangsVue.es.js

@@ -1,7 +1,7 @@
 import { inject as c } from "vue";
 import { x as m } from "../vendor/@wangs-ui/vue/dist/index.es.js";
-import { d as g } from "../utils/object.util.es.js";
-import { P as p } from "../vendor/primevue/config/config.esm.es.js";
+import { d as p } from "../utils/object.util.es.js";
+import { P as g } from "../vendor/primevue/config/config.esm.es.js";
 const h = {
   startsWith: "Starts with",
   contains: "Contains",
@@ -213,7 +213,8 @@ const h = {
         asideRightExpandedButtonLabel: "Tutup <"
       },
       InputPhoneNumber: {
-        defaultPlaceholder: "Masukkan nomor telepon"
+        defaultPlaceholder: "Masukkan nomor telepon",
+        emptyInvalidText: "{label} harus diisi"
       },
       InputNumber: {
         defaultPlaceholder: "Tulis {label}",
@@ -299,7 +300,7 @@ const h = {
   if (!l)
     throw new Error("WangsVue is not installed!");
   return t ? l.getComponentConfig(t) : l.config;
-}, b = (t, l) => g(t, l), P = (t = u, l = !0) => {
+}, b = (t, l) => p(t, l), P = (t = u, l = !0) => {
   const r = l ? b(u, t) : t;
   return {
     install: (o, e) => {
@@ -331,7 +332,7 @@ const h = {
           }
         })
       };
-      o.config.globalProperties.$wangsvue = n, o.config.globalProperties.$preset = n.config.preset, o.provide(d, n), o.provide("preset", a.preset), o.provide("useToastConfig", a.useToastConfig), o.use(p, {
+      o.config.globalProperties.$wangsvue = n, o.config.globalProperties.$preset = n.config.preset, o.provide(d, n), o.provide("preset", a.preset), o.provide("useToastConfig", a.useToastConfig), o.use(g, {
         unstyled: !0,
         pt: a.preset,
         locale: a.locale.global