@v1nt1248/3nclient-lib 0.3.23 → 0.3.24

package/dist/ui3n-components.js

@@ -17693,9 +17693,14 @@ var Rl = {
 	ui3nEmoji: "_ui3nEmoji_2j41l_1",
 	readonly: "_readonly_2j41l_14"
 } }]]), Zl = [
+	"autocomplete",
 	"type",
 	"placeholder",
-	"disabled"
+	"disabled",
+	"readonly",
+	"name",
+	"maxlength",
+	"minlength"
 ], Ql = /* @__PURE__ */ Q(/* @__PURE__ */ d({
 	__name: "ui3n-input",
 	props: {
@@ -17712,8 +17717,14 @@ var Rl = {
 			type: Boolean,
 			default: !1
 		},
-		icon: { default: "" },
-		iconColor: { default: "" },
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		name: {},
+		maxlength: {},
+		minlength: {},
+		autocomplete: { default: "off" },
 		rules: { default: () => [] },
 		validateAtStartup: {
 			type: Boolean,
@@ -17748,152 +17759,164 @@ var Rl = {
 		"update:valid"
 	],
 	setup(e, { expose: t, emit: n }) {
-		M((e) => ({ v39c82ea0: _.value }));
-		let r = e, l = n, u = C(null), d = C(""), f = C(!1), p = C(!1), m = C(""), _ = i(() => r.disabled ? "var(--color-icon-control-primary-disabled)" : r.iconColor || "var(--color-icon-control-primary-default)"), v = i(() => r.displayStateMode === "success" && r.displayStateWithIcon && !p.value), y = i(() => !r.disabled && r.clearable && !!d.value && !v.value), S = i(() => !!m.value || !!(r.displayStateMode && r.displayStateMessage)), w = i(() => !!m.value || r.displayStateMode === "error" && !!r.displayStateMessage), T = i(() => r.displayStateMode === "success" && !!r.displayStateMessage);
-		function E(e) {
+		let r = e, l = n, u = N(), d = C(null), f = C(""), p = C(!1), m = C(!1), _ = C(""), v = i(() => !!u["prepend-icon"]), y = i(() => !!u["append-icon"]), S = i(() => r.displayStateMode === "success" && r.displayStateWithIcon && !m.value), w = i(() => !r.disabled && r.clearable && !!f.value && !S.value), E = i(() => S.value || w.value || y.value), O = i(() => !!_.value || !!(r.displayStateMode && r.displayStateMessage)), k = i(() => !!_.value || r.displayStateMode === "error" && !!r.displayStateMessage), A = i(() => r.displayStateMode === "success" && !!r.displayStateMessage);
+		function j(e) {
 			return e.target.value;
 		}
-		function O(e) {
+		function M(e) {
 			let t = [];
 			for (let n of r.rules) {
 				if (typeof n != "function") continue;
 				let r = n(e);
 				typeof r == "string" ? t.push(r) : r || t.push("Invalid");
 			}
-			m.value = t.join(". "), (f.value || r.validateAtStartup) && l("update:valid", t.length === 0);
+			_.value = t.join(". "), (p.value || r.validateAtStartup) && l("update:valid", t.length === 0);
 		}
-		function k(e) {
-			p.value = !0, l("focus", e);
+		function P(e) {
+			m.value = !0, l("focus", e);
 		}
-		function A(e) {
+		function F(e) {
 			h(() => {
-				p.value = !1, l("blur", e);
+				m.value = !1, l("blur", e);
 			});
 		}
-		function j(e) {
-			let t = E(e);
-			O(t), l("change", t);
+		function L(e) {
+			let t = j(e);
+			M(t), l("change", t);
 		}
-		function N(e) {
-			let t = E(e);
-			d.value = t, f.value = !0, O(t), l("update:modelValue", t), l("input", t);
+		function R(e) {
+			let t = j(e);
+			f.value = t, p.value = !0, M(t), l("update:modelValue", t), l("input", t);
 		}
-		function P(e) {
+		function V(e) {
 			let { altKey: t, ctrlKey: n, metaKey: r, shiftKey: i } = e;
-			f.value = !0, O(d.value), l("enter", {
-				value: d.value,
+			p.value = !0, M(f.value), l("enter", {
+				value: f.value,
 				altKey: t,
 				ctrlKey: n,
 				metaKey: r,
 				shiftKey: i
 			});
 		}
-		function F(e) {
-			f.value = !0, O(d.value), l("escape", e);
+		function H(e) {
+			p.value = !0, M(f.value), l("escape", e);
 		}
-		function L(e) {
+		function ee(e) {
 			l("keydown", e);
 		}
-		function R() {
-			d.value = "", f.value = !1, m.value = "", u.value && (u.value.value = "", u.value.focus()), l("update:modelValue", ""), l("input", ""), l("change", ""), l("clear"), l("update:valid", !0);
+		function te() {
+			f.value = "", p.value = !1, _.value = "", d.value && (d.value.value = "", d.value.focus()), l("update:modelValue", ""), l("input", ""), l("change", ""), l("clear"), l("update:valid", !0);
 		}
 		return t({
-			isDirty: f,
-			isFocused: p,
-			clearValue: R
+			inputElement: d,
+			isDirty: p,
+			isFocused: m,
+			clearValue: te
 		}), b(() => {
-			d.value = r.modelValue ?? "", u.value && (u.value.value = d.value, r.autofocus && u.value.focus(), l("init", u.value)), r.validateAtStartup && (f.value = !0, O(d.value));
+			f.value = r.modelValue ?? "", d.value && (d.value.value = f.value, r.autofocus && d.value.focus(), l("init", d.value)), r.validateAtStartup && (p.value = !0, M(f.value));
 		}), I(() => r.modelValue, (e) => {
 			let t = e ?? "";
-			t !== d.value && (d.value = t, u.value && (u.value.value = t), O(t));
+			t !== f.value && (f.value = t, d.value && (d.value.value = t), M(t));
 		}), (t, n) => (x(), s("div", { class: g([
 			t.$style.ui3nInput,
 			e.size === "large" && t.$style.large,
 			e.label && t.$style.withLabel,
 			e.hideBottomSpace && t.$style.withoutBottomSpace,
-			e.icon && t.$style.withIcon,
-			e.clearable && d.value && t.$style.clearable,
 			e.disabled && t.$style.disabled,
-			(!!m.value || e.displayStateMode === "error") && t.$style.error,
+			(!!_.value || e.displayStateMode === "error") && t.$style.error,
 			e.displayStateMode === "success" && t.$style.success
 		]) }, [
 			e.label ? (x(), s("label", {
 				key: 0,
 				class: g(t.$style.ui3nInputLabel)
 			}, D(e.label), 3)) : o("", !0),
-			c("input", {
-				ref_key: "inputElement",
-				ref: u,
-				autocomplete: "off",
-				type: e.type,
-				placeholder: e.placeholder,
-				disabled: e.disabled,
-				class: g(t.$style.ui3nInputField),
-				onInput: N,
-				onKeydown: [
-					z(P, ["enter"]),
-					z(F, ["esc"]),
-					L
-				],
-				onFocusin: k,
-				onFocusout: A,
-				onChange: j
-			}, null, 42, Zl),
-			e.icon ? (x(), a(Hl, {
+			c("div", { class: g([
+				t.$style.inputWrapper,
+				v.value && t.$style.withPrepend,
+				E.value && t.$style.withAppend
+			]) }, [
+				v.value ? (x(), s("div", {
+					key: 0,
+					class: g(t.$style.prependIconSlot)
+				}, [T(t.$slots, "prepend-icon")], 2)) : o("", !0),
+				c("input", {
+					ref_key: "inputElement",
+					ref: d,
+					autocomplete: e.autocomplete,
+					type: e.type,
+					placeholder: e.placeholder,
+					disabled: e.disabled,
+					readonly: e.readonly,
+					name: e.name,
+					maxlength: e.maxlength,
+					minlength: e.minlength,
+					class: g(t.$style.ui3nInputField),
+					onInput: R,
+					onKeydown: [
+						z(V, ["enter"]),
+						z(H, ["esc"]),
+						ee
+					],
+					onFocus: P,
+					onBlur: F,
+					onChange: L
+				}, null, 42, Zl),
+				E.value ? (x(), s("div", {
+					key: 1,
+					class: g(t.$style.appendIconSlot)
+				}, [
+					S.value ? (x(), a(Hl, {
+						key: 0,
+						icon: "round-check-circle-outline",
+						size: 16,
+						color: "var(--success-content-default)",
+						class: g(t.$style.appendSlotItem)
+					}, null, 8, ["class"])) : o("", !0),
+					w.value ? (x(), a(Gl, {
+						key: 1,
+						type: "icon",
+						size: "small",
+						color: "transparent",
+						icon: "round-close",
+						"icon-size": "16",
+						"icon-color": "var(--color-icon-control-accent-default)",
+						class: g(t.$style.appendSlotItem),
+						onMousedown: n[0] ||= B(() => {}, ["prevent"]),
+						onTouchstart: n[1] ||= B(() => {}, ["prevent"]),
+						onClick: te
+					}, null, 8, ["class"])) : o("", !0),
+					y.value ? T(t.$slots, "append-icon", { key: 2 }) : o("", !0)
+				], 2)) : o("", !0)
+			], 2),
+			O.value ? (x(), s("div", {
 				key: 1,
-				icon: e.icon,
-				size: 16,
-				class: g([t.$style.ui3nInputIcon, e.disabled && t.$style.ui3nInputIconDisabled])
-			}, null, 8, ["icon", "class"])) : o("", !0),
-			v.value ? (x(), a(Hl, {
-				key: 2,
-				icon: "round-check-circle-outline",
-				size: 16,
-				color: "var(--success-content-default)",
-				class: g(t.$style.ui3nInputSuccessIcon)
-			}, null, 8, ["class"])) : o("", !0),
-			y.value ? (x(), a(Gl, {
-				key: 3,
-				type: "icon",
-				size: "small",
-				color: "transparent",
-				icon: "round-close",
-				"icon-size": "16",
-				"icon-color": "var(--color-icon-control-accent-default)",
-				class: g(t.$style.clearBtn),
-				onMousedown: n[0] ||= B(() => {}, ["prevent"]),
-				onTouchstart: n[1] ||= B(() => {}, ["prevent"]),
-				onClick: R
-			}, null, 8, ["class"])) : o("", !0),
-			S.value ? (x(), s("div", {
-				key: 4,
 				class: g([
 					t.$style.ui3nInputFieldMessage,
-					w.value && t.$style.ui3nInputErrorMessage,
-					T.value && t.$style.ui3nInputSuccessMessage
+					k.value && t.$style.ui3nInputErrorMessage,
+					A.value && t.$style.ui3nInputSuccessMessage
 				])
-			}, D(m.value || e.displayStateMessage), 3)) : o("", !0)
+			}, D(_.value || e.displayStateMessage), 3)) : o("", !0)
 		], 2));
 	}
 }), [["__cssModules", { $style: {
-	ui3nInput: "_ui3nInput_m8cvd_1",
-	withLabel: "_withLabel_m8cvd_11",
-	large: "_large_m8cvd_14",
-	clearBtn: "_clearBtn_m8cvd_21",
-	withIcon: "_withIcon_m8cvd_24",
-	ui3nInputIcon: "_ui3nInputIcon_m8cvd_24",
-	withoutBottomSpace: "_withoutBottomSpace_m8cvd_33",
-	ui3nInputField: "_ui3nInputField_m8cvd_36",
-	ui3nInputLabel: "_ui3nInputLabel_m8cvd_50",
-	ui3nInputIconDisabled: "_ui3nInputIconDisabled_m8cvd_98",
-	ui3nInputFieldMessage: "_ui3nInputFieldMessage_m8cvd_109",
-	ui3nInputErrorMessage: "_ui3nInputErrorMessage_m8cvd_120",
-	ui3nInputSuccessMessage: "_ui3nInputSuccessMessage_m8cvd_124",
-	clearable: "_clearable_m8cvd_128",
-	error: "_error_m8cvd_142",
-	success: "_success_m8cvd_149",
-	ui3nInputSuccessIcon: "_ui3nInputSuccessIcon_m8cvd_153",
-	disabled: "_disabled_m8cvd_159"
+	ui3nInput: "_ui3nInput_11ztm_1",
+	withLabel: "_withLabel_11ztm_13",
+	large: "_large_11ztm_18",
+	withoutBottomSpace: "_withoutBottomSpace_11ztm_30",
+	inputWrapper: "_inputWrapper_11ztm_33",
+	ui3nInputField: "_ui3nInputField_11ztm_36",
+	ui3nInputLabel: "_ui3nInputLabel_11ztm_44",
+	prependIconSlot: "_prependIconSlot_11ztm_97",
+	appendIconSlot: "_appendIconSlot_11ztm_104",
+	withPrepend: "_withPrepend_11ztm_112",
+	withAppend: "_withAppend_11ztm_116",
+	appendSlotItem: "_appendSlotItem_11ztm_120",
+	ui3nInputFieldMessage: "_ui3nInputFieldMessage_11ztm_124",
+	ui3nInputErrorMessage: "_ui3nInputErrorMessage_11ztm_135",
+	ui3nInputSuccessMessage: "_ui3nInputSuccessMessage_11ztm_139",
+	error: "_error_11ztm_143",
+	success: "_success_11ztm_150",
+	disabled: "_disabled_11ztm_154"
 } }]]), $l = /* @__PURE__ */ W(((e, t) => {
 	var n = Ei(), r = ca(), i = aa(), a = "[object String]";
 	function o(e) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.23",
+  "version": "0.3.24",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/index.ts

@@ -10,7 +10,7 @@ import type { Ui3nDropFilesProps, Ui3nDropFilesEmits, Ui3nDropFilesSlots } from
 import Ui3nEmoji from './ui3n-emoji/ui3n-emoji.vue';
 import type { Ui3nEmojiProps, Ui3nEmojiEmits } from './ui3n-emoji/types';
 import Ui3nInput from './ui3n-input/ui3n-input.vue';
-import type { Ui3nInputProps, Ui3nInputEmits } from './ui3n-input/types';
+import type { Ui3nInputProps, Ui3nInputEmits, Ui3nInputSlots, Ui3nInputExpose } from './ui3n-input/types';
 import Ui3nInputFile from './ui3n-input-file/ui3n-input-file.vue';
 import type { Ui3nInputFileProps, Ui3nInputFileEmits } from './ui3n-input-file/types';
 import Ui3nText from './ui3n-text/ui3n-text.vue';
@@ -142,6 +142,8 @@ export {
   Ui3nInput,
   Ui3nInputProps,
   Ui3nInputEmits,
+  Ui3nInputSlots,
+  Ui3nInputExpose,
   Ui3nInputFile,
   Ui3nInputFileProps,
   Ui3nInputFileEmits,

package/src/components/ui3n-input/types.ts

@@ -1,3 +1,5 @@
+import type { Ref, VNode } from 'vue';
+
 export interface Ui3nInputProps {
   /**
    * Input value
@@ -32,13 +34,27 @@ export interface Ui3nInputProps {
    */
   autofocus?: boolean;
   /**
-   * Input icon
+   * Whether input is readonly
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Input name attribute (for use in native forms)
+   */
+  name?: string;
+  /**
+   * Maximum length of input value
    */
-  icon?: string;
+  maxlength?: number;
   /**
-   * Input icon color
+   * Minimum length of input value
    */
-  iconColor?: string;
+  minlength?: number;
+  /**
+   * Autocomplete attribute
+   * @default 'off'
+   */
+  autocomplete?: string;
   /**
    * Validation rules
    */
@@ -128,3 +144,33 @@ export interface Ui3nInputEmits {
    */
   (event: 'update:valid', value: boolean): void;
 }
+
+export interface Ui3nInputSlots {
+  /**
+   * Slot for prepend icon (displayed at the start of the input)
+   */
+  'prepend-icon'?: () => VNode[];
+  /**
+   * Slot for append icon (displayed at the end of the input)
+   */
+  'append-icon'?: () => VNode[];
+}
+
+export interface Ui3nInputExpose {
+  /**
+   * Reference to the input DOM element
+   */
+  inputElement: Ref<HTMLInputElement | null>;
+  /**
+   * Whether the input has been modified
+   */
+  isDirty: Ref<boolean>;
+  /**
+   * Whether the input is currently focused
+   */
+  isFocused: Ref<boolean>;
+  /**
+   * Clear the input value
+   */
+  clearValue: () => void;
+}