@espri/vue-components 2.0.3 → 2.1.0

package/README.md

@@ -25,6 +25,7 @@ import EspriInputNumber from '@espri/vue-components/input-number';
 ### Inputs
 
 - `EspriInputNumber`
+- `EspriInputPassword`
 - `EspriInputText`
 - `EspriSelect`
 

package/dist/_plugin-vue_export-helper-CHgC5LLL.mjs

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};

package/dist/index.es.js

@@ -1,10 +1,12 @@
-import { default as t } from "./input-number.es.js";
-import { default as p } from "./input-text.es.js";
-import { default as f } from "./select.es.js";
-import { default as u } from "./virtual-keyboard.es.js";
+import { default as e } from "./input-number.es.js";
+import { default as p } from "./input-password.es.js";
+import { default as s } from "./input-text.es.js";
+import { default as u } from "./select.es.js";
+import { default as l } from "./virtual-keyboard.es.js";
 export {
-  t as EspriInputNumber,
-  p as EspriInputText,
-  f as EspriSelect,
-  u as EspriVirtualKeyboard
+  e as EspriInputNumber,
+  p as EspriInputPassword,
+  s as EspriInputText,
+  u as EspriSelect,
+  l as EspriVirtualKeyboard
 };

package/dist/input-number.css

@@ -0,0 +1 @@
+.error[data-v-8eb7b6a7]{color:var(--p-floatlabel-invalid-color, var(--p-red-600))}

package/dist/input-number.es.js

@@ -1,9 +1,7 @@
-import { defineComponent as b, computed as m, openBlock as i, createElementBlock as d, normalizeClass as u, createBlock as c, unref as a, withCtx as V, createVNode as _, createElementVNode as p, createTextVNode as h, toDisplayString as f, createCommentVNode as v } from "vue";
+import { defineComponent as _, computed as m, openBlock as a, createElementBlock as d, normalizeClass as u, createBlock as c, unref as o, withCtx as g, createVNode as V, createElementVNode as p, createTextVNode as v, toDisplayString as f, createCommentVNode as h } from "vue";
 import { Skeleton as k, FloatLabel as B, InputNumber as C } from "primevue";
-const N = ["for"], D = {
-  key: 0,
-  class: "text-danger"
-}, E = { class: "text-danger" }, F = /* @__PURE__ */ b({
+import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import './input-number.css';const E = ["for"], D = { key: 0 }, F = { class: "error" }, $ = /* @__PURE__ */ _({
   __name: "input-number",
   props: {
     label: {},
@@ -26,29 +24,29 @@ const N = ["for"], D = {
     placeholder: {}
   },
   emits: ["update:modelValue"],
-  setup(x, { emit: g }) {
-    const e = x, o = g, n = Math.random().toString(16).slice(2), s = m({
+  setup(x, { emit: b }) {
+    const e = x, i = b, s = Math.random().toString(16).slice(2), n = m({
       get() {
-        return (e.modelValue || e.modelValue === 0) && (typeof e.min == "number" && e.modelValue < e.min || typeof e.max == "number" && e.modelValue > e.max) ? (o("update:modelValue", null), null) : e.modelValue;
+        return (e.modelValue || e.modelValue === 0) && (typeof e.min == "number" && e.modelValue < e.min || typeof e.max == "number" && e.modelValue > e.max) ? (i("update:modelValue", null), null) : e.modelValue;
       },
       set(t) {
-        (t || t === 0) && (typeof e.min == "number" && t < e.min || typeof e.max == "number" && t > e.max) && (t = null), o("update:modelValue", t);
+        (t || t === 0) && (typeof e.min == "number" && t < e.min || typeof e.max == "number" && t > e.max) && (t = null), i("update:modelValue", t);
       }
     }), r = m(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
-    return (t, l) => (i(), d("div", {
+    return (t, l) => (a(), d("div", {
       class: u(`field ${e.class || ""}`)
     }, [
-      e.loading ? (i(), c(a(k), {
+      e.loading ? (a(), c(o(k), {
         key: 0,
         class: "skeleton-input mt-3"
-      })) : (i(), c(a(B), {
+      })) : (a(), c(o(B), {
         key: 1,
         class: "mt-3"
       }, {
-        default: V(() => [
-          _(a(C), {
-            modelValue: s.value,
-            "onUpdate:modelValue": l[0] || (l[0] = (y) => s.value = y),
+        default: g(() => [
+          V(o(C), {
+            modelValue: n.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (y) => n.value = y),
             class: u(["w-full", e.class]),
             min: e.min,
             max: e.max,
@@ -62,19 +60,19 @@ const N = ["for"], D = {
             "input-class": e.inputClass,
             disabled: e.disabled,
             placeholder: e.placeholder,
-            "input-id": a(n)
+            "input-id": o(s)
           }, null, 8, ["modelValue", "min", "max", "mode", "step", "min-fraction-digits", "max-fraction-digits", "currency", "suffix", "invalid", "class", "input-class", "disabled", "placeholder", "input-id"]),
-          p("label", { for: a(n) }, [
-            h(f(e.label), 1),
-            e.required ? (i(), d("span", D, " *")) : v("", !0)
-          ], 8, N)
+          p("label", { for: o(s) }, [
+            v(f(e.label), 1),
+            e.required ? (a(), d("span", D, " *")) : h("", !0)
+          ], 8, E)
         ]),
         _: 1
       })),
-      p("small", E, f(r.value), 1)
+      p("small", F, f(r.value), 1)
     ], 2));
   }
-}), q = F;
+}), S = /* @__PURE__ */ N($, [["__scopeId", "data-v-8eb7b6a7"]]), R = S;
 export {
-  q as default
+  R as default
 };

package/dist/input-password.css

@@ -0,0 +1 @@
+.error[data-v-e3a9900a]{color:var(--p-floatlabel-invalid-color, var(--p-red-600))}

package/dist/input-password.es.js

@@ -0,0 +1,68 @@
+import { defineComponent as k, computed as r, openBlock as o, createElementBlock as i, normalizeClass as p, createBlock as c, unref as a, withCtx as y, createVNode as w, createElementVNode as u, createTextVNode as V, toDisplayString as m, createCommentVNode as v } from "vue";
+import { Skeleton as B, FloatLabel as b, Password as x } from "primevue";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import './input-password.css';const P = ["for"], E = { key: 0 }, N = { class: "error" }, $ = /* @__PURE__ */ k({
+  __name: "input-password",
+  props: {
+    label: {},
+    modelValue: {},
+    class: {},
+    inputClass: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    loading: { type: Boolean },
+    showError: { type: Boolean },
+    rules: {},
+    maxlength: {},
+    placeholder: {},
+    displayPasswordFeedBack: { type: Boolean },
+    displayPasswordToggle: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(g, { emit: f }) {
+    const e = g, _ = f, t = Math.random().toString(16).slice(2), d = r({
+      get() {
+        return e.modelValue;
+      },
+      set(s) {
+        _("update:modelValue", s);
+      }
+    }), n = r(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (s, l) => (o(), i("div", {
+      class: p(`field ${e.class || ""}`)
+    }, [
+      e.loading ? (o(), c(a(B), {
+        key: 0,
+        class: "skeleton-input mt-3"
+      })) : (o(), c(a(b), {
+        key: 1,
+        class: "mt-3"
+      }, {
+        default: y(() => [
+          w(a(x), {
+            modelValue: d.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (h) => d.value = h),
+            class: p(["w-full", e.class]),
+            "input-class": e.inputClass,
+            invalid: !!n.value,
+            maxlength: e.maxlength,
+            feedback: e.displayPasswordFeedBack,
+            "toggle-mask": e.displayPasswordToggle,
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            "input-id": a(t)
+          }, null, 8, ["modelValue", "class", "input-class", "invalid", "maxlength", "feedback", "toggle-mask", "disabled", "placeholder", "input-id"]),
+          u("label", { for: a(t) }, [
+            V(m(e.label), 1),
+            e.required ? (o(), i("span", E, " *")) : v("", !0)
+          ], 8, P)
+        ]),
+        _: 1
+      })),
+      u("small", N, m(n.value), 1)
+    ], 2));
+  }
+}), F = /* @__PURE__ */ C($, [["__scopeId", "data-v-e3a9900a"]]), q = F;
+export {
+  q as default
+};

package/dist/input-text.css

@@ -0,0 +1 @@
+.error[data-v-2a41cea7]{color:var(--p-floatlabel-invalid-color, var(--p-red-600))}

package/dist/input-text.es.js

@@ -1,9 +1,7 @@
-import { defineComponent as V, computed as r, openBlock as a, createElementBlock as i, normalizeClass as u, createBlock as c, unref as t, withCtx as _, createVNode as v, createElementVNode as m, createTextVNode as b, toDisplayString as p, createCommentVNode as k } from "vue";
+import { defineComponent as V, computed as d, openBlock as o, createElementBlock as i, normalizeClass as u, createBlock as c, unref as t, withCtx as g, createVNode as v, createElementVNode as m, createTextVNode as b, toDisplayString as p, createCommentVNode as k } from "vue";
 import { Skeleton as y, FloatLabel as B, InputText as E } from "primevue";
-const w = ["for"], C = {
-  key: 0,
-  class: "text-danger"
-}, N = { class: "text-danger" }, $ = /* @__PURE__ */ V({
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import './input-text.css';const w = ["for"], I = { key: 0 }, N = { class: "error" }, T = /* @__PURE__ */ V({
   __name: "input-text",
   props: {
     label: {},
@@ -18,31 +16,31 @@ const w = ["for"], C = {
     placeholder: {}
   },
   emits: ["update:modelValue"],
-  setup(h, { emit: f }) {
-    const e = h, g = f, s = Math.random().toString(16).slice(2), n = r({
+  setup(_, { emit: f }) {
+    const e = _, h = f, s = Math.random().toString(16).slice(2), n = d({
       get() {
         return e.modelValue;
       },
-      set(o) {
-        g("update:modelValue", o);
+      set(a) {
+        h("update:modelValue", a);
       }
-    }), d = r(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
-    return (o, l) => (a(), i("div", {
+    }), r = d(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (a, l) => (o(), i("div", {
       class: u(`field ${e.class || ""}`)
     }, [
-      e.loading ? (a(), c(t(y), {
+      e.loading ? (o(), c(t(y), {
         key: 0,
         class: "skeleton-input mt-3"
-      })) : (a(), c(t(B), {
+      })) : (o(), c(t(B), {
         key: 1,
         class: "mt-3"
       }, {
-        default: _(() => [
+        default: g(() => [
           v(t(E), {
             modelValue: n.value,
             "onUpdate:modelValue": l[0] || (l[0] = (x) => n.value = x),
             class: u(["w-full", e.class]),
-            invalid: !!d.value,
+            invalid: !!r.value,
             maxlength: e.maxlength,
             disabled: e.disabled,
             placeholder: e.placeholder,
@@ -50,15 +48,15 @@ const w = ["for"], C = {
           }, null, 8, ["modelValue", "class", "invalid", "maxlength", "disabled", "placeholder", "input-id"]),
           m("label", { for: t(s) }, [
             b(p(e.label), 1),
-            e.required ? (a(), i("span", C, " *")) : k("", !0)
+            e.required ? (o(), i("span", I, " *")) : k("", !0)
           ], 8, w)
         ]),
         _: 1
       })),
-      m("small", N, p(d.value), 1)
+      m("small", N, p(r.value), 1)
     ], 2));
   }
-}), q = $;
+}), $ = /* @__PURE__ */ C(T, [["__scopeId", "data-v-2a41cea7"]]), z = $;
 export {
-  q as default
+  z as default
 };

package/dist/select.css

@@ -0,0 +1 @@
+.error[data-v-5a8f854e]{color:var(--p-floatlabel-invalid-color, var(--p-red-600))}

package/dist/select.es.js

@@ -1,9 +1,7 @@
-import { defineComponent as _, computed as r, openBlock as t, createElementBlock as i, normalizeClass as c, createBlock as u, unref as o, withCtx as b, createVNode as g, createElementVNode as p, createTextVNode as y, toDisplayString as m, createCommentVNode as k } from "vue";
-import { Skeleton as x, FloatLabel as B, Select as E } from "primevue";
-const S = ["for"], w = {
-  key: 0,
-  class: "text-danger"
-}, C = { class: "text-danger" }, N = /* @__PURE__ */ _({
+import { defineComponent as h, computed as i, openBlock as t, createElementBlock as d, normalizeClass as c, createBlock as p, unref as o, withCtx as b, createVNode as y, createElementVNode as u, createTextVNode as g, toDisplayString as m, createCommentVNode as k } from "vue";
+import { Skeleton as B, FloatLabel as x, Select as E } from "primevue";
+import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import './select.css';const C = ["for"], w = { key: 0 }, N = { class: "error" }, $ = /* @__PURE__ */ h({
   __name: "select",
   props: {
     label: {},
@@ -20,49 +18,49 @@ const S = ["for"], w = {
     modelValue: {}
   },
   emits: ["update:modelValue"],
-  setup(f, { emit: v }) {
-    const e = f, V = v, s = Math.random().toString(16).slice(2), n = r({
+  setup(f, { emit: _ }) {
+    const e = f, v = _, s = Math.random().toString(16).slice(2), n = i({
       get() {
         return e.modelValue;
       },
       set(a) {
-        V("update:modelValue", a);
+        v("update:modelValue", a);
       }
-    }), d = r(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
-    return (a, l) => (t(), i("div", {
+    }), r = i(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (a, l) => (t(), d("div", {
       class: c(`field ${e.class || ""}`)
     }, [
-      e.loading ? (t(), u(o(x), {
+      e.loading ? (t(), p(o(B), {
         key: 0,
         class: "skeleton-input mt-3"
-      })) : (t(), u(o(B), {
+      })) : (t(), p(o(x), {
         key: 1,
         class: "mt-3"
       }, {
         default: b(() => [
-          g(o(E), {
+          y(o(E), {
             modelValue: n.value,
-            "onUpdate:modelValue": l[0] || (l[0] = (h) => n.value = h),
+            "onUpdate:modelValue": l[0] || (l[0] = (V) => n.value = V),
             options: e.options,
             "option-label": "label",
             "option-value": "value",
             class: c(["w-full", e.class]),
-            invalid: !!d.value,
+            invalid: !!r.value,
             disabled: e.disabled,
             placeholder: e.placeholder,
             "input-id": o(s)
           }, null, 8, ["modelValue", "options", "class", "invalid", "disabled", "placeholder", "input-id"]),
-          p("label", { for: o(s) }, [
-            y(m(e.label), 1),
-            e.required ? (t(), i("span", w, " *")) : k("", !0)
-          ], 8, S)
+          u("label", { for: o(s) }, [
+            g(m(e.label), 1),
+            e.required ? (t(), d("span", w, " *")) : k("", !0)
+          ], 8, C)
         ]),
         _: 1
       })),
-      p("small", C, m(d.value), 1)
+      u("small", N, m(r.value), 1)
     ], 2));
   }
-}), R = N;
+}), q = /* @__PURE__ */ S($, [["__scopeId", "data-v-5a8f854e"]]), F = q;
 export {
-  R as default
+  F as default
 };

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import EspriInputNumber from './input-number';
+import EspriInputPassword from './input-password';
 import EspriInputText from './input-text';
 import EspriSelect from './select';
 import EspriVirtualKeyboard from './virtual-keyboard';
-export { EspriInputNumber, EspriInputText, EspriSelect, EspriVirtualKeyboard, };
+export { EspriInputNumber, EspriInputPassword, EspriInputText, EspriSelect, EspriVirtualKeyboard, };

package/dist/types/input-password/index.d.ts

@@ -0,0 +1,19 @@
+import type { DefineComponent } from 'vue';
+import type EspriInputPasswordEmits from './interfaces/input-password-emits.interface';
+import type { EspriInputPasswordEmitsForDoc } from './interfaces/input-password-emits.interface';
+import type EspriInputPasswordProps from './interfaces/input-password-props.interface';
+/**
+ * **ESPRI Digital - Input Password (Vue component)**
+ * --- ---
+ * ![ESPRIDigital](https://espridigital.fr/wp-content/uploads/2024/09/logo_espri_digital_white-100-1.png)
+ *
+ */
+declare const EspriInputPassword: DefineComponent<EspriInputPasswordProps, {}, // For slots if any
+{}, // For methods or data if any
+{}, // Computed
+{}, // Methods
+{}, // Mixin
+{}, // Extends
+EspriInputPasswordEmitsForDoc>;
+export default EspriInputPassword;
+export type { EspriInputPasswordEmits, EspriInputPasswordProps };

package/dist/types/input-password/interfaces/input-password-emits.interface.d.ts

@@ -0,0 +1,10 @@
+import type { ObjectEmitsOptions } from 'vue';
+export default interface EspriInputPasswordEmits {
+    (e: 'update:modelValue', value: any): void;
+}
+export interface EspriInputPasswordEmitsForDoc extends ObjectEmitsOptions {
+    /**
+     * Called when modelValue is updated.
+     */
+    'update:modelValue': (value: any) => void;
+}

package/dist/types/input-password/interfaces/input-password-props.interface.d.ts

@@ -0,0 +1,60 @@
+export default interface EspriInputPasswordProps {
+    /**
+     * Label displayed above the input.
+     */
+    label: string;
+    /**
+     * Model value representing the current state of the input.
+     */
+    modelValue: string | null;
+    /**
+     * Class of the component.
+     */
+    class?: any;
+    /**
+     * Optional CSS class applied to the input element.
+     */
+    inputClass?: string;
+    /**
+     * Disables the input when true.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the input as required when true.
+     */
+    required?: boolean;
+    /**
+     * Indicates if the input is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * Shows error messages when true.
+     */
+    showError?: boolean;
+    /**
+     * Validation rules for the input.
+     * Each rule can be undefined or an object containing:
+     * - $invalid: whether the rule is violated
+     * - $message: the error message associated with the rule
+     */
+    rules?: Array<{
+        $invalid: boolean;
+        $message: string;
+    } | undefined>;
+    /**
+     * Maximum number of characters allowed in the input.
+     */
+    maxlength?: number;
+    /**
+     * Placeholder text displayed inside the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to display feedback for the password field (e.g., strength meter).
+     */
+    displayPasswordFeedBack?: boolean;
+    /**
+     * Whether to display a toggle for showing/hiding the password.
+     */
+    displayPasswordToggle?: boolean;
+}

package/dist/virtual-keyboard.css

@@ -1 +1 @@
-.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span,.hg-theme-default .hg-button span svg{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px #0000004d;box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:#05194687;color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:#00000008;cursor:pointer}li.hg-candidate-box-list-item:active{background:#0000001a}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}#keyboard[data-v-7fa2df55]{position:fixed;bottom:0;left:0;width:100%}.hide-keyboard[data-v-7fa2df55]{display:none}.hg-button[data-skbtn="{shift}"],.hg-button[data-skbtn="{enter}"]{flex-grow:1;font-size:1.5em;width:20px}.hg-button[data-skbtn="{bksp}"]{width:20px}.hg-button[data-skbtn="{space}"]{flex-grow:8}
+.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span,.hg-theme-default .hg-button span svg{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px #0000004d;box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:#05194687;color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:#00000008;cursor:pointer}li.hg-candidate-box-list-item:active{background:#0000001a}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}#keyboard[data-v-d0bbce72]{position:fixed;bottom:0;left:0;width:100%;z-index:10}.hide-keyboard[data-v-d0bbce72]{display:none}.hg-button[data-skbtn="{shift}"],.hg-button[data-skbtn="{enter}"]{flex-grow:1;font-size:1.5em;width:20px}.hg-button[data-skbtn="{bksp}"]{width:20px}.hg-button[data-skbtn="{space}"]{flex-grow:8}

package/dist/virtual-keyboard.es.js

@@ -1,23 +1,24 @@
-import { defineComponent as F, ref as u, onMounted as A, onBeforeUnmount as M, watch as R, openBlock as q, createElementBlock as P, normalizeClass as T, createElementVNode as V } from "vue";
+import { defineComponent as O, ref as a, onMounted as A, onBeforeUnmount as M, watch as R, openBlock as q, createElementBlock as P, normalizeClass as w, createElementVNode as V } from "vue";
 import Y from "simple-keyboard";
-import './virtual-keyboard.css';const _ = "input:not(.not-open-keyboard), textarea:not(.not-open-keyboard)", x = "default-class", d = 230, U = /* @__PURE__ */ F({
+import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import './virtual-keyboard.css';const L = "input:not(.not-open-keyboard), textarea:not(.not-open-keyboard)", T = "default-class", i = 230, z = /* @__PURE__ */ O({
   __name: "virtual-keyboard",
   props: {
     refreshInputsTimestamp: {}
   },
-  setup(r) {
-    const l = r, t = u(null), a = u(0), s = u(!0);
-    let v = 0;
-    const o = u(null), f = u();
-    let i = 0;
-    function C() {
+  setup(x) {
+    const C = x, t = a(null), s = a(0), u = a(!0);
+    let c = 0;
+    const n = a(null), d = a();
+    let r = 0;
+    function _() {
       return !!t.value?.className.includes("keyboard-force-dispatch-event");
     }
-    function m() {
+    function v() {
       return t.value?.className.includes("keyboard-number") ? "numeric" : "text";
     }
     function I(e = !1) {
-      o.value && o.value.setOptions({
+      n.value && n.value.setOptions({
         layout: {
           default: [
             `& é " ' ( § è ! ç à ) - {bksp}`,
@@ -35,15 +36,15 @@ import './virtual-keyboard.css';const _ = "input:not(.not-open-keyboard), textar
           ]
         },
         newLineOnEnter: e
-      }), c();
+      }), l();
     }
-    function c() {
-      document.querySelectorAll("#keyboard .hg-rows, #keyboard .hg-row, #keyboard .hg-button").forEach((n) => {
-        n.removeEventListener("mousedown", g), n.addEventListener("mousedown", g), n.removeEventListener("touchstart", k), n.addEventListener("touchstart", k);
+    function l() {
+      document.querySelectorAll("#keyboard .hg-rows, #keyboard .hg-row, #keyboard .hg-button").forEach((o) => {
+        o.removeEventListener("mousedown", y), o.addEventListener("mousedown", y), o.removeEventListener("touchstart", b), o.addEventListener("touchstart", b);
       });
     }
     function B() {
-      o.value && o.value.setOptions({
+      n.value && n.value.setOptions({
         layout: {
           default: [
             "1 2 3 {bksp}",
@@ -53,76 +54,76 @@ import './virtual-keyboard.css';const _ = "input:not(.not-open-keyboard), textar
           ]
         },
         newLineOnEnter: !1
-      }), c();
+      }), l();
     }
-    function p() {
-      document.querySelectorAll(_).forEach((e) => {
-        e.addEventListener("focus", y), e.addEventListener("input", b);
+    function f() {
+      document.querySelectorAll(L).forEach((e) => {
+        e.addEventListener("focus", p), e.addEventListener("input", h);
       });
     }
-    function h(e) {
-      if (Date.now() - v < 100)
+    function m(e) {
+      if (Date.now() - c < 100)
         return;
-      const n = e.target;
-      t.value && !t.value.contains(n) && !f.value?.contains(n) && E();
+      const o = e.target;
+      t.value && !t.value.contains(o) && !d.value?.contains(o) && g();
     }
-    function y(e) {
-      v = Date.now(), t.value = e.target, o.value && (o.value.setInput(t.value.value), D());
+    function p(e) {
+      c = Date.now(), t.value = e.target, n.value && (n.value.setInput(t.value.value), D());
     }
-    function b(e) {
-      o.value?.setInput(e.target.value);
+    function h(e) {
+      n.value?.setInput(e.target.value);
     }
-    function g(e) {
+    function y(e) {
       e.preventDefault();
     }
-    function k(e) {
+    function b(e) {
       e.preventDefault();
     }
     function S() {
-      if (o.value) {
-        const n = o.value.options.layoutName === "default" ? "shift" : "default";
-        o.value.setOptions({
-          layoutName: n
-        }), c();
+      if (n.value) {
+        const o = n.value.options.layoutName === "default" ? "shift" : "default";
+        n.value.setOptions({
+          layoutName: o
+        }), l();
       }
     }
-    function E() {
-      s.value = !0, t.value = null, a.value = 0, document.body.style.marginBottom = `${i + a.value}px`;
+    function g() {
+      u.value = !0, t.value = null, s.value = 0, document.body.style.marginBottom = `${r + s.value}px`;
     }
     function D() {
-      if (s.value = !1, t.value) {
-        m() === "numeric" ? B() : I(t.value.tagName.toLowerCase() === "textarea");
-        const e = t.value.getBoundingClientRect(), n = document.documentElement.scrollHeight;
-        n - e.bottom < d && (a.value = d - (n - e.bottom) + 30, i = +document.body.style.marginBottom.split("px")[0], document.body.style.marginBottom = `${i + a.value}px`);
+      if (u.value = !1, t.value) {
+        v() === "numeric" ? B() : I(t.value.tagName.toLowerCase() === "textarea");
+        const e = t.value.getBoundingClientRect(), o = document.documentElement.scrollHeight;
+        o - e.bottom < i && (s.value = i - (o - e.bottom) + 30, r = +document.body.style.marginBottom.split("px")[0], document.body.style.marginBottom = `${r + s.value}px`);
       }
       setTimeout(() => {
         if (t.value) {
-          const e = t.value.getBoundingClientRect(), n = document.documentElement.scrollHeight, L = window.innerHeight, N = window.scrollY + L - e.bottom, H = window.scrollY + (window.scrollY + (d - N)) + 30, O = n - L;
-          window.scrollTo({ top: Math.min(H, O), behavior: "smooth" });
+          const e = t.value.getBoundingClientRect(), o = document.documentElement.scrollHeight, E = window.innerHeight, N = window.scrollY + E - e.bottom, H = window.scrollY + (window.scrollY + (i - N)) + 30, F = o - E;
+          window.scrollTo({ top: Math.min(H, F), behavior: "smooth" });
         }
       }, 100);
     }
-    function w() {
-      document.querySelectorAll(_).forEach((e) => {
-        e.removeEventListener("focus", y), e.removeEventListener("input", b);
+    function k() {
+      document.querySelectorAll(L).forEach((e) => {
+        e.removeEventListener("focus", p), e.removeEventListener("input", h);
       });
     }
     function K() {
-      w(), p();
+      k(), f();
     }
     return A(async () => {
-      o.value = new Y(x, {
+      n.value = new Y(T, {
         onChange: (e) => {
-          t.value && (t.value.value = e, (C() || m() === "text") && t.value.dispatchEvent(new Event("input")));
+          t.value && (t.value.value = e, (_() || v() === "text") && t.value.dispatchEvent(new Event("input")));
         },
         onKeyPress: (e) => {
           if (t.value) {
-            const n = (t.value.selectionStart || 0) + (e === "{bksp}" ? -1 : 1);
+            const o = (t.value.selectionStart || 0) + (e === "{bksp}" ? -1 : 1);
             setTimeout(() => {
-              t.value && t.value.setSelectionRange(n, n);
+              t.value && t.value.setSelectionRange(o, o);
             }, 0);
           }
-          e === "{shift}" || e === "{lock}" ? S() : e === "{enter}" && t.value && t.value.tagName.toLowerCase() !== "textarea" && (t.value.blur(), E());
+          e === "{shift}" || e === "{lock}" ? S() : e === "{enter}" && t.value && t.value.tagName.toLowerCase() !== "textarea" && (t.value.blur(), g());
         },
         display: {
           "{bksp}": "⌫",
@@ -132,28 +133,23 @@ import './virtual-keyboard.css';const _ = "input:not(.not-open-keyboard), textar
           "{space}": " ",
           "{tab}": "⇆"
         }
-      }), p(), document.addEventListener("click", h);
+      }), f(), document.addEventListener("click", m);
     }), M(() => {
-      w(), document.removeEventListener("click", h);
-    }), R(() => l.refreshInputsTimestamp, () => {
+      k(), document.removeEventListener("click", m);
+    }), R(() => C.refreshInputsTimestamp, () => {
       K();
-    }), (e, n) => (q(), P("div", {
+    }), (e, o) => (q(), P("div", {
       id: "keyboard",
       ref_key: "keyboardContainer",
-      ref: f,
-      class: T({ "hide-keyboard": s.value })
+      ref: d,
+      class: w({ "hide-keyboard": u.value })
     }, [
       V("div", {
-        class: T(x)
+        class: w(T)
       })
     ], 2));
   }
-}), z = (r, l) => {
-  const t = r.__vccOpts || r;
-  for (const [a, s] of l)
-    t[a] = s;
-  return t;
-}, $ = /* @__PURE__ */ z(U, [["__scopeId", "data-v-7fa2df55"]]), J = $;
+}), $ = /* @__PURE__ */ U(z, [["__scopeId", "data-v-d0bbce72"]]), Q = $;
 export {
-  J as default
+  Q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@espri/vue-components",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "ESPRI Digital - Vue components library",
   "author": "ESPRI Digital",
   "homepage": "https://github.com/ESPRI-Digital/vue-select#readme",
@@ -16,6 +16,10 @@
       "types": "./dist/types/input-number/index.d.ts",
       "import": "./dist/input-number.es.js"
     },
+    "./input-password": {
+      "types": "./dist/types/input-password/index.d.ts",
+      "import": "./dist/input-password.es.js"
+    },
     "./input-text": {
       "types": "./dist/types/input-text/index.d.ts",
       "import": "./dist/input-text.es.js"