@espri/vue-components 0.0.1

package/README.md

@@ -0,0 +1,27 @@
+# @espri/vue-components
+
+Une bibliothèque de composants Vue 3 réutilisables développés par **ESPRI Digital**.
+
+Cette bibliothèque est conçue pour être **modulaire** : vous pouvez importer chaque composant individuellement ou installer tous les composants globalement.
+
+---
+
+## Installation
+
+```bash
+npm install @espri/vue-components
+# ou
+yarn add @espri/vue-components
+
+vue-components/
+├─ package.json
+├─ vite.config.js
+├─ src/
+│  ├─ select/
+│  │  ├─ Select.vue
+│  │  └─ index.js
+│  ├─ inputtext/
+│  │  ├─ InputText.vue
+│  │  └─ index.js
+│  └─ index.js   <-- pour import global via app.use()
+├─ README.md

package/dist/index.es.js

@@ -0,0 +1,6 @@
+import { default as r } from "./inputtext.es.js";
+import { default as a } from "./select.es.js";
+export {
+  r as EspriInputText,
+  a as EspriSelect
+};

package/dist/inputtext.es.js

@@ -0,0 +1,65 @@
+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 { Skeleton as y, FloatLabel as B, InputText as E } from "primevue";
+const w = ["for"], C = {
+  key: 0,
+  class: "text-danger"
+}, I = { class: "text-danger" }, N = /* @__PURE__ */ V({
+  __name: "input-text",
+  props: {
+    label: {},
+    modelValue: {},
+    class: {},
+    classInput: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    loading: { type: Boolean },
+    showError: { type: Boolean },
+    rules: {},
+    maxlength: {},
+    placeholder: {}
+  },
+  emits: ["update:modelValue"],
+  setup(h, { emit: f }) {
+    const e = h, g = f, s = Math.random().toString(16).slice(2), n = r({
+      get() {
+        return e.modelValue;
+      },
+      set(o) {
+        g("update:modelValue", o);
+      }
+    }), d = r(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (o, l) => (a(), i("div", {
+      class: u(`field ${e.class || ""}`)
+    }, [
+      e.loading ? (a(), c(t(y), {
+        key: 0,
+        class: "skeleton-input mt-3"
+      })) : (a(), c(t(B), {
+        key: 1,
+        class: "mt-3"
+      }, {
+        default: _(() => [
+          v(t(E), {
+            modelValue: n.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (x) => n.value = x),
+            class: u(["w-full", e.classInput]),
+            invalid: !!d.value,
+            maxlength: e.maxlength,
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            "input-id": t(s)
+          }, 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)
+          ], 8, w)
+        ]),
+        _: 1
+      })),
+      m("small", I, p(d.value), 1)
+    ], 2));
+  }
+}), T = N;
+export {
+  T as default
+};

package/dist/select.es.js

@@ -0,0 +1,69 @@
+import { defineComponent as _, computed as r, openBlock as o, createElementBlock as i, normalizeClass as c, createBlock as u, unref as t, 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__ */ _({
+  __name: "select",
+  props: {
+    label: {},
+    options: {},
+    classInput: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    showError: { type: Boolean },
+    rules: {},
+    maxlength: {},
+    placeholder: {},
+    style: {},
+    class: {},
+    loading: { type: Boolean },
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(f, { emit: v }) {
+    const e = f, V = v, s = Math.random().toString(16).slice(2), n = r({
+      get() {
+        return e.modelValue;
+      },
+      set(a) {
+        V("update:modelValue", a);
+      }
+    }), d = r(() => e.showError && e.rules?.find((l) => l?.$invalid && l?.$message)?.$message || "");
+    return (a, l) => (o(), i("div", {
+      class: c(`field ${e.class || ""}`)
+    }, [
+      e.loading ? (o(), u(t(x), {
+        key: 0,
+        class: "skeleton-input mt-3"
+      })) : (o(), u(t(B), {
+        key: 1,
+        class: "mt-3"
+      }, {
+        default: b(() => [
+          g(t(E), {
+            modelValue: n.value,
+            "onUpdate:modelValue": l[0] || (l[0] = (h) => n.value = h),
+            options: e.options,
+            "option-label": "label",
+            "option-value": "value",
+            class: c(["w-full", e.classInput]),
+            invalid: !!d.value,
+            disabled: e.disabled,
+            placeholder: e.placeholder,
+            "input-id": t(s)
+          }, null, 8, ["modelValue", "options", "class", "invalid", "disabled", "placeholder", "input-id"]),
+          p("label", { for: t(s) }, [
+            y(m(e.label), 1),
+            e.required ? (o(), i("span", w, " *")) : k("", !0)
+          ], 8, S)
+        ]),
+        _: 1
+      })),
+      p("small", C, m(d.value), 1)
+    ], 2));
+  }
+}), I = N;
+export {
+  I as default
+};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import EspriInputText from './input-text';
+import EspriSelect from './select';
+export { EspriInputText, EspriSelect, };

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

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

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

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

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

@@ -0,0 +1,52 @@
+export default interface InputTextProps {
+    /**
+     * Label displayed above the input.
+     */
+    label: string;
+    /**
+     * Model value representing the current state of the input.
+     */
+    modelValue: any;
+    /**
+     * 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;
+    /**
+     * 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;
+}

package/dist/types/select/index.d.ts

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

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

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

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

@@ -0,0 +1,65 @@
+export default interface SelectProps {
+    /**
+     * Label displayed above the input.
+     */
+    label: string;
+    /**
+     * Array of options available for selection.
+     */
+    options: Array<{
+        /** Display text for the option */
+        label: string;
+        /** Value associated with the option */
+        value: 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;
+    /**
+     * 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;
+    /**
+     * CSS style of the component.
+     */
+    style?: any;
+    /**
+     * Class of the component.
+     */
+    class?: any;
+    /**
+     * Indicates if the input is in a loading state.
+     */
+    loading: boolean;
+    /**
+     * Model value representing the current state of the input.
+     */
+    modelValue: any;
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@espri/vue-components",
+  "version": "0.0.1",
+  "description": "ESPRI Digital - Vue components library",
+  "author": "ESPRI Digital",
+  "homepage": "https://github.com/ESPRI-Digital/vue-select#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./dist/index.es.js",
+    "./select": "./dist/select.es.js",
+    "./inputtext": "./dist/inputtext.es.js"
+  },
+  "main": "dist/index.es.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "lint": "eslint .",
+    "ts-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "primevue": ">=4.0.0 <5.0.0",
+    "vue": ">=3.0.0 <4.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "eslint": "^9.39.1",
+    "eslint-config-espri-front": "^3.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
+    "vue-tsc": "^3.1.5"
+  }
+}