@verdnatura/vn-front-lib 0.0.2

package/LICENSE

@@ -0,0 +1,17 @@
+Copyright (C) 2026 - Verdnatura Levante S.L.
+
+This package is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+On Debian systems, the complete text of the GNU General Public
+License can be found in "/usr/share/common-licenses/GPL-3".

package/README.md

@@ -0,0 +1,75 @@
+# vn-front-lib
+
+A shared library of Vue 3 components and composables used across the
+**salix-front** and **hedera-web** projects. It is not a standalone app —
+it's built in library mode (Vite `build.lib`) and consumed as a dependency.
+
+## What's inside
+
+- `lib/components/` — Vue components (prefixed with `Vn`, e.g. `VnInput`).
+- `lib/composables/` — reusable composables (e.g. `useRequired`, `useValidator`).
+- `lib/stores/` — Pinia stores (e.g. `useValidationsStore`).
+- `lib/config.js` — internal library config, filled via `setConfig()` from the
+  `options` passed to `app.use(VnFrontLib, options)` (`axios` is required).
+- `lib/i18n/locale/` — translation files (`en.yml`, `es.yml`).
+
+`pinia`, `vue-i18n`, `axios`, `validator` and `quasar` are expected to be
+provided by the consuming project (declared as `peerDependencies`).
+
+## Recommended VS Code extension
+
+This project uses [oxlint](https://oxc.rs/docs/guide/usage/linter.html) and
+[oxfmt](https://oxc.rs/docs/guide/usage/formatter.html) for linting and
+formatting. It's advisable to install the
+[Oxc VS Code extension](https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode),
+which powers format-on-save and inline lint diagnostics based on the
+`.oxlintrc.json` and `.oxfmtrc.json` config files in this repo.
+
+## Scripts
+
+```bash
+pnpm install
+pnpm run dev         # Vite dev server
+pnpm run build       # build the library (output to dist/)
+pnpm run lint        # oxlint
+pnpm run lint:fix    # oxlint --fix
+pnpm run fmt         # oxfmt
+pnpm run fmt:check   # oxfmt --check
+```
+
+## Developing locally against another project
+
+To test changes locally in another project (e.g. `salix-front` or
+`hedera-web`) without publishing, add this repo as a real pnpm workspace
+member rather than using a plain `link:` dependency, so `vue`/`pinia` get
+deduped into a single instance across both projects:
+
+1. In the consuming project's `pnpm-workspace.yaml`, add this repo as a
+   package:
+
+    ```yaml
+    packages:
+        - .
+        - ../vn-front-lib
+    ```
+
+2. In the consuming project's `package.json`, depend on it via the workspace
+   protocol, using the real package name:
+
+    ```json
+    "vn-front-lib": "workspace:@verdnatura/vn-front-lib@*",
+    ```
+
+3. Enable the `vnSource` resolution condition in the consumer's Vite/Vitest
+   config so imports resolve to this repo's `lib/` source instead of the
+   `dist/` build:
+
+    ```js
+    resolve: {
+        conditions: ['vnSource'],
+    },
+    ```
+
+4. Reinstall dependencies in the consuming project (`pnpm install`), then run
+   `pnpm why vue -r` / `pnpm why pinia -r` to confirm only one version of
+   each resolves across the workspace.

package/dist/components-C4qIWgU6.cjs

@@ -0,0 +1 @@
+const e=require("./useRequired-I81Vonhu.cjs");let t=require("quasar"),n=require("vue"),r=require("vue-i18n");function i(e){let t=e;t.__i18n=t.__i18n||[],t.__i18n.push({locale:``,resource:{en:{inputMin:{t:0,b:{t:2,i:[{t:3,v:`Must be more than `},{t:4,k:`value`}]}},maxLength:{t:0,b:{t:2,i:[{t:3,v:`The value exceeds `},{t:4,k:`value`},{t:3,v:` characters`}]}},inputMax:{t:0,b:{t:2,i:[{t:3,v:`Must be less than `},{t:4,k:`value`}]}}},es:{inputMin:{t:0,b:{t:2,i:[{t:3,v:`Debe ser mayor a `},{t:4,k:`value`}]}},maxLength:{t:0,b:{t:2,i:[{t:3,v:`El valor excede los `},{t:4,k:`value`},{t:3,v:` carácteres`}]}},inputMax:{t:0,b:{t:2,i:[{t:3,v:`Debe ser menor a `},{t:4,k:`value`}]}},"Convert to uppercase":{t:0,b:{t:2,i:[{t:3}],s:`Convertir a mayúsculas`}},Remove:{t:0,b:{t:2,i:[{t:3}],s:`Eliminar`}}}}})}var a={__name:`VnInput`,props:(0,n.mergeModels)({isOutlined:{type:Boolean,default:!1},info:{type:String,default:``},clearable:{type:Boolean,default:!0},emptyToNull:{type:Boolean,default:!0},insertable:{type:Boolean,default:!1},maxlength:{type:Number,default:null},uppercase:{type:Boolean,default:!1}},{modelValue:{default:null},modelModifiers:{}}),emits:(0,n.mergeModels)([`remove`],[`update:modelValue`]),setup(i,{expose:a,emit:o}){let s=(0,n.useAttrs)(),{isRequired:c,requiredFieldRule:l}=e.t(s),{t:u}=(0,r.useI18n)(),d=o,f=i,p=(0,n.useModel)(i,`modelValue`),m=[`number`,`search`,`tel`,`url`,`password`],h=e=>{let t=e;f.emptyToNull&&t===``&&(t=null),p.value=t},g=(0,n.ref)(null),_=(0,n.ref)(!1),v=(0,n.computed)(()=>f.isOutlined?{dense:!0,outlined:!0,rounded:!0}:{}),y=e=>{g.value?.focus(e)},b=e=>{(0,n.nextTick)(()=>{let t=e.target||g.value?.$el?.querySelector(`input`),n=e.target.type||t?.getAttribute(`type`);if(n!==`email`){if(!m.includes(n)){if(t?.setSelectionRange){let e=t.value?.length??0;t.setSelectionRange(e,e)}return}t?.select?.()}})};a({focus:y,vnInputRef:g});let x=(0,n.computed)(()=>[l,...s.rules??[],e=>{let t=f.maxlength;if(t&&+e?.length>t)return u(`maxLength`,{value:t});let{min:n,max:r}=s,i=n===void 0?void 0:Number(n),a=r===void 0?void 0:Number(r);return i!==void 0&&i>=0&&Math.floor(e)<i?u(`inputMin`,{value:i}):a!==void 0&&a>0&&Math.floor(e)>a?u(`inputMax`,{value:a}):!0}]),S=e=>{e.key!==`Backspace`&&f.insertable&&e.key.match(/[0-9]/)&&C(e)},C=e=>{e.preventDefault();let t=e.target,r=t.selectionStart,i=f.maxlength,a=p.value;a||=e.key;let o=e.key;o&&!isNaN(o)&&r<i&&h(a.substring(0,r)+o+a.substring(r+1)),(0,n.nextTick)(()=>{t.setSelectionRange(r+1,r+1)})},w=()=>{p.value=p.value?.toUpperCase()||``};return(0,n.onMounted)(()=>{s.autofocus&&y()}),(e,r)=>{let a=t.QTooltip,o=t.QIcon,l=t.QInput;return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,{onMouseover:r[1]||=e=>_.value=!0,onMouseleave:r[2]||=e=>_.value=!1},[(0,n.createVNode)(l,(0,n.mergeProps)({ref_key:`vnInputRef`,ref:g,"model-value":(0,n.unref)(p),"onUpdate:modelValue":h},{...(0,n.unref)(s),...v.value},{class:{required:(0,n.unref)(c)},onKeydown:S,onFocus:b,clearable:!1,rules:x.value,"lazy-rules":!0,"hide-bottom-space":``,"data-cy":((0,n.unref)(s)[`data-cy`]??(0,n.unref)(s).label)+`_input`}),(0,n.createSlots)({append:(0,n.withCtx)(()=>[(0,n.createVNode)(o,{name:`close`,size:`xs`,class:`cursor-pointer`,style:(0,n.normalizeStyle)({visibility:_.value&&(0,n.unref)(p)&&!(0,n.unref)(s).disabled&&!(0,n.unref)(s).readonly&&f.clearable?`visible`:`hidden`}),onClick:r[0]||=()=>{h(null),g.value?.focus(),d(`remove`)}},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(a,null,{default:(0,n.withCtx)(()=>[(0,n.createTextVNode)((0,n.toDisplayString)((0,n.unref)(u)(`Remove`)),1)]),_:1})]),_:1},8,[`style`]),!(0,n.unref)(s).disabled&&!(0,n.unref)(s).readonly&&f.uppercase?((0,n.openBlock)(),(0,n.createBlock)(o,{key:0,name:`match_case`,size:`xs`,onClick:w,class:`uppercase-icon`},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(a,null,{default:(0,n.withCtx)(()=>[(0,n.createTextVNode)((0,n.toDisplayString)((0,n.unref)(u)(`Convert to uppercase`)),1)]),_:1})]),_:1})):(0,n.createCommentVNode)(``,!0),e.$slots.append&&!(0,n.unref)(s).disabled?(0,n.renderSlot)(e.$slots,`append`,{},void 0,void 0,1):(0,n.createCommentVNode)(``,!0),i.info?((0,n.openBlock)(),(0,n.createBlock)(o,{key:2,name:`info`},{default:(0,n.withCtx)(()=>[(0,n.createVNode)(a,{"max-width":`350px`},{default:(0,n.withCtx)(()=>[(0,n.createTextVNode)((0,n.toDisplayString)(i.info),1)]),_:1})]),_:1})):(0,n.createCommentVNode)(``,!0)]),_:2},[e.$slots.prepend?{name:`prepend`,fn:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`prepend`)]),key:`0`}:void 0]),1040,[`model-value`,`class`,`rules`,`data-cy`])],32)}}};typeof i==`function`&&i(a);var o=e.r({VnInput:()=>a});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/components-Ct0VDaxz.js

@@ -0,0 +1,316 @@
+import { t as e } from "./useRequired-BDeZirAF.js";
+import { QIcon as t, QInput as n, QTooltip as r } from "quasar";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createSlots as c, createTextVNode as l, createVNode as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeStyle as m, onMounted as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, useModel as S, withCtx as C } from "vue";
+import { useI18n as w } from "vue-i18n";
+//#region \0rolldown/runtime.js
+var T = Object.defineProperty, E = (e, t) => {
+	let n = {};
+	for (var r in e) T(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || T(n, Symbol.toStringTag, { value: "Module" }), n;
+};
+//#endregion
+//#region lib/components/inputs/VnInput.vue?vue&type=i18n&index=0&lang.yaml
+function D(e) {
+	let t = e;
+	t.__i18n = t.__i18n || [], t.__i18n.push({
+		locale: "",
+		resource: {
+			en: {
+				inputMin: {
+					t: 0,
+					b: {
+						t: 2,
+						i: [{
+							t: 3,
+							v: "Must be more than "
+						}, {
+							t: 4,
+							k: "value"
+						}]
+					}
+				},
+				maxLength: {
+					t: 0,
+					b: {
+						t: 2,
+						i: [
+							{
+								t: 3,
+								v: "The value exceeds "
+							},
+							{
+								t: 4,
+								k: "value"
+							},
+							{
+								t: 3,
+								v: " characters"
+							}
+						]
+					}
+				},
+				inputMax: {
+					t: 0,
+					b: {
+						t: 2,
+						i: [{
+							t: 3,
+							v: "Must be less than "
+						}, {
+							t: 4,
+							k: "value"
+						}]
+					}
+				}
+			},
+			es: {
+				inputMin: {
+					t: 0,
+					b: {
+						t: 2,
+						i: [{
+							t: 3,
+							v: "Debe ser mayor a "
+						}, {
+							t: 4,
+							k: "value"
+						}]
+					}
+				},
+				maxLength: {
+					t: 0,
+					b: {
+						t: 2,
+						i: [
+							{
+								t: 3,
+								v: "El valor excede los "
+							},
+							{
+								t: 4,
+								k: "value"
+							},
+							{
+								t: 3,
+								v: " carácteres"
+							}
+						]
+					}
+				},
+				inputMax: {
+					t: 0,
+					b: {
+						t: 2,
+						i: [{
+							t: 3,
+							v: "Debe ser menor a "
+						}, {
+							t: 4,
+							k: "value"
+						}]
+					}
+				},
+				"Convert to uppercase": {
+					t: 0,
+					b: {
+						t: 2,
+						i: [{ t: 3 }],
+						s: "Convertir a mayúsculas"
+					}
+				},
+				Remove: {
+					t: 0,
+					b: {
+						t: 2,
+						i: [{ t: 3 }],
+						s: "Eliminar"
+					}
+				}
+			}
+		}
+	});
+}
+//#endregion
+//#region lib/components/inputs/VnInput.vue
+var O = {
+	__name: "VnInput",
+	props: /*@__PURE__*/ d({
+		isOutlined: {
+			type: Boolean,
+			default: !1
+		},
+		info: {
+			type: String,
+			default: ""
+		},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		emptyToNull: {
+			type: Boolean,
+			default: !0
+		},
+		insertable: {
+			type: Boolean,
+			default: !1
+		},
+		maxlength: {
+			type: Number,
+			default: null
+		},
+		uppercase: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ d(["remove"], ["update:modelValue"]),
+	setup(d, { expose: T, emit: E }) {
+		let D = x(), { isRequired: O, requiredFieldRule: k } = e(D), { t: A } = w(), j = E, M = d, N = S(d, "modelValue"), P = [
+			"number",
+			"search",
+			"tel",
+			"url",
+			"password"
+		], F = (e) => {
+			let t = e;
+			M.emptyToNull && t === "" && (t = null), N.value = t;
+		}, I = _(null), L = _(!1), R = i(() => M.isOutlined ? {
+			dense: !0,
+			outlined: !0,
+			rounded: !0
+		} : {}), z = (e) => {
+			I.value?.focus(e);
+		}, B = (e) => {
+			p(() => {
+				let t = e.target || I.value?.$el?.querySelector("input"), n = e.target.type || t?.getAttribute("type");
+				if (n !== "email") {
+					if (!P.includes(n)) {
+						if (t?.setSelectionRange) {
+							let e = t.value?.length ?? 0;
+							t.setSelectionRange(e, e);
+						}
+						return;
+					}
+					t?.select?.();
+				}
+			});
+		};
+		T({
+			focus: z,
+			vnInputRef: I
+		});
+		let V = i(() => [
+			k,
+			...D.rules ?? [],
+			(e) => {
+				let t = M.maxlength;
+				if (t && +e?.length > t) return A("maxLength", { value: t });
+				let { min: n, max: r } = D, i = n === void 0 ? void 0 : Number(n), a = r === void 0 ? void 0 : Number(r);
+				return i !== void 0 && i >= 0 && Math.floor(e) < i ? A("inputMin", { value: i }) : a !== void 0 && a > 0 && Math.floor(e) > a ? A("inputMax", { value: a }) : !0;
+			}
+		]), H = (e) => {
+			e.key !== "Backspace" && M.insertable && e.key.match(/[0-9]/) && U(e);
+		}, U = (e) => {
+			e.preventDefault();
+			let t = e.target, n = t.selectionStart, r = M.maxlength, i = N.value;
+			i ||= e.key;
+			let a = e.key;
+			a && !isNaN(a) && n < r && F(i.substring(0, n) + a + i.substring(n + 1)), p(() => {
+				t.setSelectionRange(n + 1, n + 1);
+			});
+		}, W = () => {
+			N.value = N.value?.toUpperCase() || "";
+		};
+		return h(() => {
+			D.autofocus && z();
+		}), (e, i) => {
+			let p = r, h = t, _ = n;
+			return g(), s("div", {
+				onMouseover: i[1] ||= (e) => L.value = !0,
+				onMouseleave: i[2] ||= (e) => L.value = !1
+			}, [u(_, f({
+				ref_key: "vnInputRef",
+				ref: I,
+				"model-value": b(N),
+				"onUpdate:modelValue": F
+			}, {
+				...b(D),
+				...R.value
+			}, {
+				class: { required: b(O) },
+				onKeydown: H,
+				onFocus: B,
+				clearable: !1,
+				rules: V.value,
+				"lazy-rules": !0,
+				"hide-bottom-space": "",
+				"data-cy": (b(D)["data-cy"] ?? b(D).label) + "_input"
+			}), c({
+				append: C(() => [
+					u(h, {
+						name: "close",
+						size: "xs",
+						class: "cursor-pointer",
+						style: m({ visibility: L.value && b(N) && !b(D).disabled && !b(D).readonly && M.clearable ? "visible" : "hidden" }),
+						onClick: i[0] ||= () => {
+							F(null), I.value?.focus(), j("remove");
+						}
+					}, {
+						default: C(() => [u(p, null, {
+							default: C(() => [l(y(b(A)("Remove")), 1)]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, ["style"]),
+					!b(D).disabled && !b(D).readonly && M.uppercase ? (g(), a(h, {
+						key: 0,
+						name: "match_case",
+						size: "xs",
+						onClick: W,
+						class: "uppercase-icon"
+					}, {
+						default: C(() => [u(p, null, {
+							default: C(() => [l(y(b(A)("Convert to uppercase")), 1)]),
+							_: 1
+						})]),
+						_: 1
+					})) : o("", !0),
+					e.$slots.append && !b(D).disabled ? v(e.$slots, "append", {}, void 0, void 0, 1) : o("", !0),
+					d.info ? (g(), a(h, {
+						key: 2,
+						name: "info"
+					}, {
+						default: C(() => [u(p, { "max-width": "350px" }, {
+							default: C(() => [l(y(d.info), 1)]),
+							_: 1
+						})]),
+						_: 1
+					})) : o("", !0)
+				]),
+				_: 2
+			}, [e.$slots.prepend ? {
+				name: "prepend",
+				fn: C(() => [v(e.$slots, "prepend")]),
+				key: "0"
+			} : void 0]), 1040, [
+				"model-value",
+				"class",
+				"rules",
+				"data-cy"
+			])], 32);
+		};
+	}
+};
+typeof D == "function" && D(O);
+//#endregion
+//#region lib/components/index.js
+var k = /* @__PURE__ */ E({ VnInput: () => O });
+//#endregion
+export { O as n, k as t };

package/dist/components.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./components-C4qIWgU6.cjs");exports.VnInput=e.n;

package/dist/components.js

@@ -0,0 +1,2 @@
+import { n as e } from "./components-Ct0VDaxz.js";
+export { e as VnInput };

package/dist/composables.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./useRequired-I81Vonhu.cjs");exports.useRequired=e.t,exports.useValidator=e.n;

package/dist/composables.js

@@ -0,0 +1,2 @@
+import { n as e, t } from "./useRequired-BDeZirAF.js";
+export { t as useRequired, e as useValidator };

package/dist/stores.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./useValidationsStore-CmGCLBNO.cjs");exports.useValidationsStore=e.t;

package/dist/stores.js

@@ -0,0 +1,2 @@
+import { t as e } from "./useValidationsStore-B5R8zW5O.js";
+export { e as useValidationsStore };

package/dist/useRequired-BDeZirAF.js

@@ -0,0 +1,58 @@
+import { t as e } from "./useValidationsStore-B5R8zW5O.js";
+import { useI18n as t } from "vue-i18n";
+import n from "validator";
+//#region lib/composables/useValidator.js
+function r() {
+	let r = e().validations;
+	function i(e) {
+		let t = r;
+		if (!t || !e) return;
+		let n = e.split("."), i = n[0], a = n[1], s = i.charAt(0).toUpperCase() + i.slice(1);
+		if (!t[s]) return;
+		let c = t[s].validations;
+		if (c[a]) return c[a].map((e) => o(e)[e.validation]);
+	}
+	let { t: a } = t({ useScope: "global" }), o = function(e = {}) {
+		return {
+			format: (t) => {
+				let { allowNull: n, with: r, allowBlank: i } = e, o = a(e.message) || e.message;
+				if (!i && t === "" || !n && t === null || !new RegExp(r).test(t)) return o;
+			},
+			presence: (t) => {
+				let r = a("globals.valueCantBeEmpty");
+				return e.message && (r = a(e.message) || e.message), !n.isEmpty(t ? String(t) : "") || r;
+			},
+			required: (e, t) => e ? t === 0 || !!t || a("globals.fieldRequired") : null,
+			length: (t) => {
+				let r = {
+					min: e.min || e.is,
+					max: e.max || e.is
+				};
+				t = String(t), t ||= "";
+				let i = `Value should have at most ${r.max} characters`;
+				return e.is && (i = `Value should be ${e.is} characters long`), e.min && (i = `Value should have at least ${e.min} characters`), e.min && e.max && (i = `Value should have a length between ${e.min} and ${e.max}`), n.isLength(t, r) || i;
+			},
+			numericality: (t) => e.int ? n.isInt(t) || "Value should be integer" : n.isNumeric(t) || "Value should be a number",
+			min: (e, t) => {
+				if (t >= 0 && Math.floor(e) < t) return a("inputMin", { value: t });
+			},
+			custom: (t) => Function(`return (${e.bindedFunction})`)()(t) || "Invalid value"
+		};
+	};
+	return {
+		validate: i,
+		validations: o,
+		models: r
+	};
+}
+//#endregion
+//#region lib/composables/useRequired.js
+function i(e) {
+	let { validations: t } = r(), n = typeof e.required == "boolean" ? e.required : Object.keys(e).includes("required");
+	return {
+		isRequired: n,
+		requiredFieldRule: (e) => t().required(n, e)
+	};
+}
+//#endregion
+export { r as n, i as t };

package/dist/useRequired-I81Vonhu.cjs

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const l=require("./useValidationsStore-CmGCLBNO.cjs");let u=require("vue-i18n"),d=require("validator");d=c(d,1);function f(){let e=l.t().validations;function t(t){let n=e;if(!n||!t)return;let i=t.split(`.`),a=i[0],o=i[1],s=a.charAt(0).toUpperCase()+a.slice(1);if(!n[s])return;let c=n[s].validations;if(c[o])return c[o].map(e=>r(e)[e.validation])}let{t:n}=(0,u.useI18n)({useScope:`global`}),r=function(e={}){return{format:t=>{let{allowNull:r,with:i,allowBlank:a}=e,o=n(e.message)||e.message;if(!a&&t===``||!r&&t===null||!new RegExp(i).test(t))return o},presence:t=>{let r=n(`globals.valueCantBeEmpty`);return e.message&&(r=n(e.message)||e.message),!d.default.isEmpty(t?String(t):``)||r},required:(e,t)=>e?t===0||!!t||n(`globals.fieldRequired`):null,length:t=>{let n={min:e.min||e.is,max:e.max||e.is};t=String(t),t||=``;let r=`Value should have at most ${n.max} characters`;return e.is&&(r=`Value should be ${e.is} characters long`),e.min&&(r=`Value should have at least ${e.min} characters`),e.min&&e.max&&(r=`Value should have a length between ${e.min} and ${e.max}`),d.default.isLength(t,n)||r},numericality:t=>e.int?d.default.isInt(t)||`Value should be integer`:d.default.isNumeric(t)||`Value should be a number`,min:(e,t)=>{if(t>=0&&Math.floor(e)<t)return n(`inputMin`,{value:t})},custom:t=>Function(`return (${e.bindedFunction})`)()(t)||`Invalid value`}};return{validate:t,validations:r,models:e}}function p(e){let{validations:t}=f(),n=typeof e.required==`boolean`?e.required:Object.keys(e).includes(`required`);return{isRequired:n,requiredFieldRule:e=>t().required(n,e)}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});

package/dist/useValidationsStore-B5R8zW5O.js

@@ -0,0 +1,19 @@
+import { defineStore as e } from "pinia";
+//#region lib/config.js
+var t = {}, n = ["axios"], r;
+function i(e = {}) {
+	let i = n.filter((t) => !e[t]);
+	if (i.length) throw Error(`vn-front-lib: missing required configuration: ${i.join(", ")}. Pass app.use(VnFrontLib, { ${i.join(", ")} })`);
+	Object.assign(t, e), r = t.axios;
+}
+//#endregion
+//#region lib/stores/useValidationsStore.js
+var a = e("validationsStore", {
+	state: () => ({ validations: null }),
+	actions: { async fetchModels() {
+		let { data: e } = await r.get("Schemas/modelinfo");
+		this.validations = e;
+	} }
+});
+//#endregion
+export { r as n, i as r, a as t };

package/dist/useValidationsStore-CmGCLBNO.cjs

@@ -0,0 +1 @@
+let e=require("pinia");var t={},n=[`axios`],r;function i(e={}){let i=n.filter(t=>!e[t]);if(i.length)throw Error(`vn-front-lib: missing required configuration: ${i.join(`, `)}. Pass app.use(VnFrontLib, { ${i.join(`, `)} })`);Object.assign(t,e),r=t.axios}var a=(0,e.defineStore)(`validationsStore`,{state:()=>({validations:null}),actions:{async fetchModels(){let{data:e}=await r.get(`Schemas/modelinfo`);this.validations=e}}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/dist/vn-front-lib.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./useRequired-I81Vonhu.cjs"),t=require("./useValidationsStore-CmGCLBNO.cjs"),n=require("./components-C4qIWgU6.cjs");require("./composables.cjs");function r(e,r={}){t.r(r);for(let t in n.t)e.component(t,n.t[t])}var i={install:r};exports.VnInput=n.n,Object.defineProperty(exports,"axios",{enumerable:!0,get:function(){return t.n}}),exports.default=i,exports.setConfig=t.r,exports.useRequired=e.t,exports.useValidator=e.n;

package/dist/vn-front-lib.css

@@ -0,0 +1,2 @@
+.uppercase-icon{cursor:pointer;transition:color .3s,transform .2s}.uppercase-icon:hover{color:#ed9937;transform:scale(1.2)}
+/*$vite$:1*/

package/dist/vn-front-lib.js

@@ -0,0 +1,12 @@
+import { n as e, t } from "./components-Ct0VDaxz.js";
+import { n, r } from "./useValidationsStore-B5R8zW5O.js";
+import { n as i, t as a } from "./useRequired-BDeZirAF.js";
+import "./composables.js";
+//#region lib/main.js
+function o(e, n = {}) {
+	r(n);
+	for (let n in t) e.component(n, t[n]);
+}
+var s = { install: o };
+//#endregion
+export { e as VnInput, n as axios, s as default, r as setConfig, a as useRequired, i as useValidator };

package/lib/components/index.js

@@ -0,0 +1 @@
+export { default as VnInput } from './inputs/VnInput.vue';

package/lib/components/inputs/VnInput.vue

@@ -0,0 +1,243 @@
+<script setup>
+import { computed, ref, useAttrs, nextTick, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRequired } from 'lib/composables/useRequired';
+
+const $attrs = useAttrs();
+const { isRequired, requiredFieldRule } = useRequired($attrs);
+const { t } = useI18n();
+const emit = defineEmits(['remove']);
+
+const $props = defineProps({
+    isOutlined: { type: Boolean, default: false },
+    info: {
+        type: String,
+        default: '',
+    },
+    clearable: {
+        type: Boolean,
+        default: true,
+    },
+    emptyToNull: {
+        type: Boolean,
+        default: true,
+    },
+    insertable: {
+        type: Boolean,
+        default: false,
+    },
+    maxlength: {
+        type: Number,
+        default: null,
+    },
+    uppercase: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const model = defineModel({ default: null });
+const value = model;
+const selectableTypes = ['number', 'search', 'tel', 'url', 'password'];
+
+const update = (val) => {
+    let next = val;
+    if ($props.emptyToNull && next === '') next = null;
+    value.value = next;
+};
+
+const vnInputRef = ref(null);
+
+const hover = ref(false);
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+
+const focus = (evt) => {
+    vnInputRef.value?.focus(evt);
+};
+
+const onFocus = (evt) => {
+    nextTick(() => {
+        const inputEl = evt.target || vnInputRef.value?.$el?.querySelector('input');
+        const realType = evt.target.type || inputEl?.getAttribute('type');
+        if (realType === 'email') {
+            return;
+        }
+        if (!selectableTypes.includes(realType)) {
+            if (inputEl?.setSelectionRange) {
+                const end = inputEl.value?.length ?? 0;
+                inputEl.setSelectionRange(end, end);
+            }
+            return;
+        }
+        inputEl?.select?.();
+    });
+};
+
+defineExpose({
+    focus,
+    vnInputRef,
+});
+
+const mixinRules = computed(() => {
+    return [
+        requiredFieldRule,
+        ...($attrs.rules ?? []),
+        (val) => {
+            const maxlength = $props.maxlength;
+            if (maxlength && +val?.length > maxlength)
+                return t('maxLength', { value: maxlength });
+            const { min, max } = $attrs;
+            const minNum = min !== undefined ? Number(min) : undefined;
+            const maxNum = max !== undefined ? Number(max) : undefined;
+
+            if (minNum !== undefined && minNum >= 0 && Math.floor(val) < minNum)
+                return t('inputMin', { value: minNum });
+
+            if (maxNum !== undefined && maxNum > 0 && Math.floor(val) > maxNum)
+                return t('inputMax', { value: maxNum });
+
+            return true;
+        },
+    ];
+});
+
+const handleKeydown = (e) => {
+    if (e.key === 'Backspace') return;
+
+    if ($props.insertable && e.key.match(/[0-9]/)) {
+        handleInsertMode(e);
+    }
+};
+
+const handleInsertMode = (e) => {
+    e.preventDefault();
+    const input = e.target;
+    const cursorPos = input.selectionStart;
+    const maxlength = $props.maxlength;
+    let currentValue = value.value;
+    if (!currentValue) currentValue = e.key;
+    const newValue = e.key;
+    if (newValue && !isNaN(newValue) && cursorPos < maxlength) {
+        update(
+            currentValue.substring(0, cursorPos) +
+                newValue +
+                currentValue.substring(cursorPos + 1),
+        );
+    }
+
+    nextTick(() => {
+        input.setSelectionRange(cursorPos + 1, cursorPos + 1);
+    });
+};
+
+const handleUppercase = () => {
+    value.value = value.value?.toUpperCase() || '';
+};
+
+onMounted(() => {
+    if ($attrs.autofocus) focus();
+});
+</script>
+
+<template>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QInput
+            ref="vnInputRef"
+            :model-value="value"
+            @update:model-value="update"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: isRequired }"
+            @keydown="handleKeydown"
+            @focus="onFocus"
+            :clearable="false"
+            :rules="mixinRules"
+            :lazy-rules="true"
+            hide-bottom-space
+            :data-cy="($attrs['data-cy'] ?? $attrs.label) + '_input'"
+        >
+            <template #prepend v-if="$slots.prepend">
+                <slot name="prepend" />
+            </template>
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    class="cursor-pointer"
+                    :style="{
+                        visibility:
+                            hover &&
+                            value &&
+                            !$attrs.disabled &&
+                            !$attrs.readonly &&
+                            $props.clearable
+                                ? 'visible'
+                                : 'hidden',
+                    }"
+                    @click="
+                        () => {
+                            update(null);
+                            vnInputRef?.focus();
+                            emit('remove');
+                        }
+                    "
+                >
+                    <QTooltip>{{ t('Remove') }}</QTooltip>
+                </QIcon>
+
+                <QIcon
+                    name="match_case"
+                    size="xs"
+                    v-if="!$attrs.disabled && !$attrs.readonly && $props.uppercase"
+                    @click="handleUppercase"
+                    class="uppercase-icon"
+                >
+                    <QTooltip>
+                        {{ t('Convert to uppercase') }}
+                    </QTooltip>
+                </QIcon>
+
+                <slot name="append" v-if="$slots.append && !$attrs.disabled" />
+                <QIcon v-if="info" name="info">
+                    <QTooltip max-width="350px">
+                        {{ info }}
+                    </QTooltip>
+                </QIcon>
+            </template>
+        </QInput>
+    </div>
+</template>
+
+<style>
+.uppercase-icon {
+    transition:
+        color 0.3s,
+        transform 0.2s;
+    cursor: pointer;
+}
+
+.uppercase-icon:hover {
+    color: #ed9937;
+    transform: scale(1.2);
+}
+</style>
+<i18n lang="yaml">
+en:
+    inputMin: Must be more than {value}
+    maxLength: The value exceeds {value} characters
+    inputMax: Must be less than {value}
+
+es:
+    inputMin: Debe ser mayor a {value}
+    maxLength: El valor excede los {value} carácteres
+    inputMax: Debe ser menor a {value}
+    Convert to uppercase: Convertir a mayúsculas
+    Remove: Eliminar
+</i18n>

package/lib/composables/index.js

@@ -0,0 +1,2 @@
+export * from './useRequired';
+export * from './useValidator';

package/lib/composables/useRequired.js

@@ -0,0 +1,15 @@
+import { useValidator } from 'lib/composables/useValidator';
+
+export function useRequired($attrs) {
+    const { validations } = useValidator();
+    const isRequired =
+        typeof $attrs['required'] === 'boolean'
+            ? $attrs['required']
+            : Object.keys($attrs).includes('required');
+    const requiredFieldRule = (val) => validations().required(isRequired, val);
+
+    return {
+        isRequired,
+        requiredFieldRule,
+    };
+}

package/lib/composables/useValidator.js

@@ -0,0 +1,94 @@
+import { useI18n } from 'vue-i18n';
+import validator from 'validator';
+import { useValidationsStore } from 'lib/stores/useValidationsStore';
+
+export function useValidator() {
+    const models = useValidationsStore().validations;
+
+    function validate(propertyRule) {
+        const modelInfo = models;
+        if (!modelInfo || !propertyRule) return;
+
+        const rule = propertyRule.split('.');
+        const model = rule[0];
+        const property = rule[1];
+        const modelName = model.charAt(0).toUpperCase() + model.slice(1);
+
+        if (!modelInfo[modelName]) return;
+
+        const modelValidations = modelInfo[modelName].validations;
+
+        if (!modelValidations[property]) return;
+
+        const rules = modelValidations[property].map((validation) => {
+            return validations(validation)[validation.validation];
+        });
+
+        return rules;
+    }
+
+    const { t } = useI18n({ useScope: 'global' });
+    const validations = function (validation = {}) {
+        return {
+            format: (value) => {
+                const { allowNull, with: format, allowBlank } = validation;
+                const message = t(validation.message) || validation.message;
+                if (!allowBlank && value === '') return message;
+                if (!allowNull && value === null) return message;
+
+                const isValid = new RegExp(format).test(value);
+                if (!isValid) return message;
+            },
+            presence: (value) => {
+                let message = t(`globals.valueCantBeEmpty`);
+                if (validation.message)
+                    message = t(validation.message) || validation.message;
+
+                return !validator.isEmpty(value ? String(value) : '') || message;
+            },
+            required: (required, value) => {
+                return required
+                    ? value === 0 || !!value || t('globals.fieldRequired')
+                    : null;
+            },
+            length: (value) => {
+                const options = {
+                    min: validation.min || validation.is,
+                    max: validation.max || validation.is,
+                };
+
+                value = String(value);
+
+                if (!value) value = '';
+
+                let message = `Value should have at most ${options.max} characters`;
+                if (validation.is)
+                    message = `Value should be ${validation.is} characters long`;
+                if (validation.min)
+                    message = `Value should have at least ${validation.min} characters`;
+                if (validation.min && validation.max)
+                    message = `Value should have a length between ${validation.min} and ${validation.max}`;
+
+                return validator.isLength(value, options) || message;
+            },
+            numericality: (value) => {
+                if (validation.int)
+                    return validator.isInt(value) || 'Value should be integer';
+                return validator.isNumeric(value) || 'Value should be a number';
+            },
+            min: (value, min) => {
+                if (min >= 0)
+                    if (Math.floor(value) < min) return t('inputMin', { value: min });
+            },
+            custom: (value) =>
+                new Function(`return (${validation.bindedFunction})`)()(value) ||
+                'Invalid value',
+        };
+    };
+
+    return {
+        validate,
+        validations,
+        models,
+    };
+}

package/lib/config.js

@@ -0,0 +1,16 @@
+// Default library configuration, overridden by whatever is passed to app.use(VnFrontLib, options)
+const config = {};
+const requiredOptions = ['axios'];
+export default config;
+export let axios;
+
+export function setConfig(options = {}) {
+    const missing = requiredOptions.filter((key) => !options[key]);
+    if (missing.length) {
+        throw new Error(
+            `vn-front-lib: missing required configuration: ${missing.join(', ')}. Pass app.use(VnFrontLib, { ${missing.join(', ')} })`,
+        );
+    }
+    Object.assign(config, options);
+    axios = config.axios;
+}

package/lib/i18n/locale/en.yml

@@ -0,0 +1,4 @@
+globals:
+    fieldRequired: This field is required
+    valueCantBeEmpty: This field cannot be empty
+inputMin: Must be more than {value}

package/lib/i18n/locale/es.yml

@@ -0,0 +1,4 @@
+globals:
+    fieldRequired: Este campo es obligatorio
+    valueCantBeEmpty: Este campo no puede estar vacío
+inputMin: Debe ser mayor a {value}

package/lib/main.js

@@ -0,0 +1,16 @@
+export * from './components';
+export * from './composables';
+export * from './config';
+import * as components from './components';
+import { setConfig } from './config';
+
+function install(app, options = {}) {
+    setConfig(options);
+    for (const name in components) {
+        app.component(name, components[name]);
+    }
+}
+
+export default {
+    install,
+};

package/lib/stores/index.js

@@ -0,0 +1 @@
+export * from './useValidationsStore';

package/lib/stores/useValidationsStore.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia';
+import { axios } from 'lib/config';
+
+export const useValidationsStore = defineStore('validationsStore', {
+    state: () => ({
+        validations: null,
+    }),
+    actions: {
+        async fetchModels() {
+            const { data } = await axios.get('Schemas/modelinfo');
+            this.validations = data;
+        },
+    },
+});

package/package.json

@@ -0,0 +1,68 @@
+{
+    "name": "@verdnatura/vn-front-lib",
+    "version": "0.0.2",
+    "files": [
+        "dist",
+        "lib"
+    ],
+    "type": "module",
+    "main": "./dist/vn-front-lib.cjs",
+    "module": "./dist/vn-front-lib.js",
+    "exports": {
+        ".": {
+            "vnSource": "./lib/main.js",
+            "import": "./dist/vn-front-lib.js",
+            "require": "./dist/vn-front-lib.cjs"
+        },
+        "./components": {
+            "vnSource": "./lib/components/index.js",
+            "import": "./dist/components.js",
+            "require": "./dist/components.cjs"
+        },
+        "./composables": {
+            "vnSource": "./lib/composables/index.js",
+            "import": "./dist/composables.js",
+            "require": "./dist/composables.cjs"
+        },
+        "./stores": {
+            "vnSource": "./lib/stores/index.js",
+            "import": "./dist/stores.js",
+            "require": "./dist/stores.cjs"
+        },
+        "./style.css": "./dist/vn-front-lib.css"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "lint": "oxlint",
+        "lint:fix": "oxlint --fix",
+        "fmt": "oxfmt",
+        "fmt:check": "oxfmt --check"
+    },
+    "devDependencies": {
+        "@intlify/unplugin-vue-i18n": "^11.2.4",
+        "@quasar/vite-plugin": "^1.12.0",
+        "@vitejs/plugin-vue": "^6.0.8",
+        "@vue/test-utils": "^2.4.11",
+        "axios": "^1.18.1",
+        "jsdom": "^30.0.1",
+        "oxfmt": "^0.61.0",
+        "oxlint": "^1.76.0",
+        "pinia": "^2.3.1",
+        "unplugin-vue-components": "^32.1.0",
+        "validator": "^13.15.35",
+        "vite": "^8.1.1",
+        "vitest": "^4.1.10",
+        "vue": "^3.5.13",
+        "vue-i18n": "^9.14.4",
+        "yaml": "^2.9.0"
+    },
+    "peerDependencies": {
+        "axios": ">=1.0.0",
+        "pinia": ">=2.0.0",
+        "quasar": ">=2.0.0",
+        "validator": ">=13.0.0",
+        "vue": ">=3.5.0",
+        "vue-i18n": ">=9.0.0"
+    }
+}