@espri/vue-components 1.1.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @espri/vue-components
 
-ESPRI Digital Vue 3 component library built on top of PrimeVue.
+ESPRI Digital Vue 3 component. Inputs components are built on top of PrimeVue.
 
 ---
 
@@ -13,10 +13,21 @@ npm install @espri/vue-components
 ## Import example
 
 ```javascript
+// Option 1: Import from the main Vue components entry
 import { EspriInputText } from '@espri/vue-components';
+
+// Option 2: Import the specific component directly
+import EspriInputNumber from '@espri/vue-components/input-number';
 ```
 
 ## Available Components
 
+### Inputs
+
+- `EspriInputNumber`
 - `EspriInputText`
 - `EspriSelect`
+
+### Others
+
+- `EspriVirtualKeyboard`

package/dist/index.es.js

@@ -1,6 +1,10 @@
-import { default as r } from "./input-text.es.js";
-import { default as a } from "./select.es.js";
+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";
 export {
-  r as EspriInputText,
-  a as EspriSelect
+  t as EspriInputNumber,
+  p as EspriInputText,
+  f as EspriSelect,
+  u as EspriVirtualKeyboard
 };

package/dist/input-number.es.js

@@ -0,0 +1,79 @@
+import { defineComponent as b, computed as m, openBlock as o, 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 { Skeleton as k, FloatLabel as B, InputNumber as N } from "primevue";
+const D = ["for"], E = {
+  key: 0,
+  class: "text-danger"
+}, F = { class: "text-danger" }, C = /* @__PURE__ */ b({
+  __name: "input-number",
+  props: {
+    label: {},
+    modelValue: {},
+    class: {},
+    classInput: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    step: {},
+    minFractionDigits: {},
+    maxFractionDigits: {},
+    loading: { type: Boolean },
+    showError: { type: Boolean },
+    mode: {},
+    currency: {},
+    suffix: {},
+    min: {},
+    max: {},
+    rules: {},
+    placeholder: {}
+  },
+  emits: ["update:modelValue"],
+  setup(x, { emit: g }) {
+    const e = x, i = g, n = Math.random().toString(16).slice(2), s = m({
+      get() {
+        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), i("update:modelValue", t);
+      }
+    }), r = m(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (t, l) => (o(), d("div", {
+      class: u(`field ${e.class || ""}`)
+    }, [
+      e.loading ? (o(), c(a(k), {
+        key: 0,
+        class: "skeleton-input mt-3"
+      })) : (o(), c(a(B), {
+        key: 1,
+        class: "mt-3"
+      }, {
+        default: V(() => [
+          _(a(N), {
+            modelValue: s.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (y) => s.value = y),
+            class: u(["w-full", e.classInput]),
+            min: e.min,
+            max: e.max,
+            mode: e.mode,
+            step: e.step,
+            "min-fraction-digits": e.minFractionDigits,
+            "max-fraction-digits": e.maxFractionDigits,
+            currency: e.currency,
+            suffix: e.suffix,
+            invalid: !!r.value,
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            "input-id": a(n)
+          }, null, 8, ["modelValue", "min", "max", "mode", "step", "min-fraction-digits", "max-fraction-digits", "currency", "suffix", "invalid", "class", "disabled", "placeholder", "input-id"]),
+          p("label", { for: a(n) }, [
+            h(f(e.label), 1),
+            e.required ? (o(), d("span", E, " *")) : v("", !0)
+          ], 8, D)
+        ]),
+        _: 1
+      })),
+      p("small", F, f(r.value), 1)
+    ], 2));
+  }
+}), S = C;
+export {
+  S as default
+};

package/dist/types/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,80 @@
+export default interface EspriInputNumberProps {
+    /**
+     * Label displayed above the input.
+     */
+    label: string;
+    /**
+     * Model value representing the current state of the input.
+     */
+    modelValue: number;
+    /**
+     * Class of the component.
+     */
+    class?: any;
+    /**
+     * Optional CSS class applied to the input element.
+     */
+    classInput?: string;
+    /**
+     * Disables the input when true.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the input as required when true.
+     */
+    required?: boolean;
+    /**
+     * Step factor to increment/decrement the value.
+     */
+    step?: number;
+    /**
+     * The minimum number of fraction digits to use.
+     */
+    minFractionDigits?: number;
+    /**
+     * The maximum number of fraction digits to use.
+     */
+    maxFractionDigits?: number;
+    /**
+     * Indicates if the input is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * Shows error messages when true.
+     */
+    showError?: boolean;
+    /**
+     * Defines the formatting mode for the input. Possible values are 'decimal' for standard number formatting and 'currency' for currency formatting.
+     */
+    mode?: 'decimal' | 'currency';
+    /**
+     * The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes]
+     */
+    currency?: string;
+    /**
+     * Text to display after the value.
+     */
+    suffix?: string;
+    /**
+     * Minimum boundary value.
+     */
+    min?: number;
+    /**
+     * Maximum boundary value.
+     */
+    max?: number;
+    /**
+     * 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>;
+    /**
+     * Placeholder text displayed inside the input.
+     */
+    placeholder?: string;
+}

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

@@ -6,7 +6,7 @@ export default interface EspriInputTextProps {
     /**
      * Model value representing the current state of the input.
      */
-    modelValue: any;
+    modelValue: string;
     /**
      * Class of the component.
      */

package/dist/types/select/interfaces/select-props.interface.d.ts

@@ -1,7 +1,11 @@
 export interface EspriSelectOption {
-    /** Display text for the option */
+    /**
+     * Display text for the option
+     */
     label: string;
-    /** Value associated with the option */
+    /**
+     * Value associated with the option
+     */
     value: any;
 }
 export default interface EspriSelectProps {

package/dist/types/virtual-keyboard/index.d.ts

@@ -0,0 +1,17 @@
+import type { DefineComponent } from 'vue';
+import type EspriVirtualKeyboardProps from './interfaces/virtual-keyboard-props.interface';
+/**
+ * **ESPRI Digital - Virtual keyboard (Vue component)**
+ * --- ---
+ * ![ESPRIDigital](https://espridigital.fr/wp-content/uploads/2024/09/logo_espri_digital_white-100-1.png)
+ *
+ */
+declare const EspriVirtualKeyboard: DefineComponent<EspriVirtualKeyboardProps, {}, // For slots if any
+{}, // For methods or data if any
+{}, // Computed
+{}, // Methods
+{}, // Mixin
+{}, // Extends
+{}>;
+export default EspriVirtualKeyboard;
+export type { EspriVirtualKeyboardProps };

package/dist/types/virtual-keyboard/interfaces/virtual-keyboard-props.interface.d.ts

@@ -0,0 +1,7 @@
+export default interface EspriVirtualKeyboardProps {
+    /**
+     * Timestamp used to force the virtual keyboard to refresh its input focus listeners.
+     * Update this value in the parent to trigger the keyboard to rebind input events.
+     */
+    refreshInputsTimestamp?: number;
+}

package/dist/virtual-keyboard.es.js

@@ -0,0 +1,159 @@
+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 Y from "simple-keyboard";
+const _ = "input:not(.not-open-keyboard), textarea:not(.not-open-keyboard)", x = "default-class", d = 230, U = /* @__PURE__ */ F({
+  __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() {
+      return !!t.value?.className.includes("keyboard-force-dispatch-event");
+    }
+    function m() {
+      return t.value?.className.includes("keyboard-number") ? "numeric" : "text";
+    }
+    function I(e = !1) {
+      o.value && o.value.setOptions({
+        layout: {
+          default: [
+            `& é " ' ( § è ! ç à ) - {bksp}`,
+            "a z e r t y u i o p",
+            "q s d f g h j k l m",
+            "w x c v b n , ; : !",
+            "{shift} {space} {enter}"
+          ],
+          shift: [
+            "1 2 3 4 5 6 7 8 9 0 ° _ {bksp}",
+            "A Z E R T Y U I O P",
+            "Q S D F G H J K L M",
+            "W X C V B N ? . / §",
+            "{shift} {space} {enter}"
+          ]
+        },
+        newLineOnEnter: e
+      }), c();
+    }
+    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 B() {
+      o.value && o.value.setOptions({
+        layout: {
+          default: [
+            "1 2 3 {bksp}",
+            "4 5 6 {enter}",
+            "7 8 9 ",
+            ", 0 - "
+          ]
+        },
+        newLineOnEnter: !1
+      }), c();
+    }
+    function p() {
+      document.querySelectorAll(_).forEach((e) => {
+        e.addEventListener("focus", y), e.addEventListener("input", b);
+      });
+    }
+    function h(e) {
+      if (Date.now() - v < 100)
+        return;
+      const n = e.target;
+      t.value && !t.value.contains(n) && !f.value?.contains(n) && E();
+    }
+    function y(e) {
+      v = Date.now(), t.value = e.target, o.value && (o.value.setInput(t.value.value), D());
+    }
+    function b(e) {
+      o.value?.setInput(e.target.value);
+    }
+    function g(e) {
+      e.preventDefault();
+    }
+    function k(e) {
+      e.preventDefault();
+    }
+    function S() {
+      if (o.value) {
+        const n = o.value.options.layoutName === "default" ? "shift" : "default";
+        o.value.setOptions({
+          layoutName: n
+        }), c();
+      }
+    }
+    function E() {
+      s.value = !0, t.value = null, a.value = 0, document.body.style.marginBottom = `${i + a.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`);
+      }
+      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" });
+        }
+      }, 100);
+    }
+    function w() {
+      document.querySelectorAll(_).forEach((e) => {
+        e.removeEventListener("focus", y), e.removeEventListener("input", b);
+      });
+    }
+    function K() {
+      w(), p();
+    }
+    return A(async () => {
+      o.value = new Y(x, {
+        onChange: (e) => {
+          t.value && (t.value.value = e, (C() || m() === "text") && t.value.dispatchEvent(new Event("input")));
+        },
+        onKeyPress: (e) => {
+          if (t.value) {
+            const n = (t.value.selectionStart || 0) + (e === "{bksp}" ? -1 : 1);
+            setTimeout(() => {
+              t.value && t.value.setSelectionRange(n, n);
+            }, 0);
+          }
+          e === "{shift}" || e === "{lock}" ? S() : e === "{enter}" && t.value && t.value.tagName.toLowerCase() !== "textarea" && (t.value.blur(), E());
+        },
+        display: {
+          "{bksp}": "⌫",
+          "{enter}": "↵",
+          "{lock}": "⇪",
+          "{shift}": "⇧",
+          "{space}": " ",
+          "{tab}": "⇆"
+        }
+      }), p(), document.addEventListener("click", h);
+    }), M(() => {
+      w(), document.removeEventListener("click", h);
+    }), R(() => l.refreshInputsTimestamp, () => {
+      K();
+    }), (e, n) => (q(), P("div", {
+      id: "keyboard",
+      ref_key: "keyboardContainer",
+      ref: f,
+      class: T({ "hide-keyboard": s.value })
+    }, [
+      V("div", {
+        class: T(x)
+      })
+    ], 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 = $;
+export {
+  J as default
+};

package/dist/vue-components.css

@@ -0,0 +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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@espri/vue-components",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "ESPRI Digital - Vue components library",
   "author": "ESPRI Digital",
   "homepage": "https://github.com/ESPRI-Digital/vue-select#readme",
@@ -12,6 +12,10 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.es.js"
     },
+    "./input-number": {
+      "types": "./dist/types/input-number/index.d.ts",
+      "import": "./dist/input-number.es.js"
+    },
     "./input-text": {
       "types": "./dist/types/input-text/index.d.ts",
       "import": "./dist/input-text.es.js"
@@ -19,6 +23,10 @@
     "./select": {
       "types": "./dist/types/select/index.d.ts",
       "import": "./dist/select.es.js"
+    },
+    "./virtual-keyboard": {
+      "types": "./dist/types/virtual-keyboard/index.d.ts",
+      "import": "./dist/virtual-keyboard.es.js"
     }
   },
   "main": "dist/index.es.js",
@@ -38,6 +46,7 @@
     "@vitejs/plugin-vue": "^6.0.2",
     "eslint": "^9.39.1",
     "eslint-config-espri-front": "^3.0.0",
+    "simple-keyboard": "^3.0.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.6",
     "vue-tsc": "^3.1.5"