@v1nt1248/3nclient-lib 0.3.2 → 0.3.5

package/dist/ui3n-components.js

@@ -17457,7 +17457,7 @@ var Vo = {
 		"update:valid"
 	],
 	setup(e, { expose: t, emit: n }) {
-		M((e) => ({ v1f1b197f: h.value }));
+		M((e) => ({ a55771ac: h.value }));
 		let r = e, l = n, u = C(null), d = C(""), f = C(!1), p = C(!1), m = C(""), h = i(() => r.disabled ? "var(--color-icon-control-primary-disabled)" : r.iconColor || "var(--color-icon-control-primary-default)");
 		function _(e) {
 			p.value = !0, l("focus", e);
@@ -17469,15 +17469,15 @@ var Vo = {
 		}
 		function y(e) {
 			let t = e.target.value;
-			k(t), console.log("[Ui3nInput] ON_CHANGE"), l("change", t);
+			k(t), l("change", t);
 		}
 		function S(e) {
 			let t = e.target.value;
-			d.value = t, f.value = !0, k(t), console.log("[Ui3nInput] ON_INPUT"), l("update:modelValue", t), l("input", t);
+			d.value = t, f.value = !0, k(t), l("update:modelValue", t), l("input", t);
 		}
 		function w(e) {
 			let { altKey: t, ctrlKey: n, metaKey: r, shiftKey: i, target: a } = e, o = a.value;
-			f.value = !0, k(o), console.log("[Ui3nInput] ON_ENTER_KEYDOWN"), l("update:modelValue", o), l("enter", {
+			f.value = !0, k(o), l("update:modelValue", o), l("enter", {
 				value: o,
 				altKey: t,
 				ctrlKey: n,
@@ -17487,13 +17487,13 @@ var Vo = {
 		}
 		function T(e) {
 			let t = e.target.value;
-			f.value = !0, k(t), console.log("[Ui3nInput] ON_ESCAPE_KEYDOWN"), l("update:modelValue", t), l("escape", e);
+			f.value = !0, k(t), l("update:modelValue", t), l("escape", e);
 		}
 		function E(e) {
 			l("keydown", e);
 		}
 		function O() {
-			d.value = "", f.value = !1, k(""), console.log("[Ui3nInput] CLEAR_VALUE"), l("update:modelValue", ""), l("input", ""), l("change", ""), l("clear");
+			d.value = "", f.value = !1, k(""), l("update:modelValue", ""), l("input", ""), l("change", ""), l("clear");
 		}
 		function k(e) {
 			if (m.value = "", r.rules && r.rules.length) {
@@ -17502,16 +17502,16 @@ var Vo = {
 					typeof n == "string" && (m.value += `${n} `);
 				}
 			}
-			f.value && (console.log("[Ui3nInput] UPDATE:VALID => ", !m.value, " | ", m.value), l("update:valid", !m.value));
+			f.value && l("update:valid", !m.value);
 		}
 		return t({
 			isDirty: f,
 			isFocused: p,
 			clearValue: O
 		}), b(() => {
-			r.autofocus && u.value && u.value.focus(), l("init", u.value), r.validateAtStartup && (console.log("[Ui3nInput] ON_MOUNTED"), k(d.value));
+			r.autofocus && u.value && u.value.focus(), l("init", u.value), r.validateAtStartup && k(d.value);
 		}), F(() => r.modelValue, (e, t) => {
-			(e ?? "") !== (t ?? "") && (d.value = e ?? "", console.log("[Ui3nInput] WATCH => ", t, " => ", e), k(d.value));
+			(e ?? "") !== (t ?? "") && (d.value = e ?? "", k(d.value));
 		}, { immediate: !0 }), (t, n) => (x(), s("div", { class: g([
 			t.$style.ui3nInput,
 			e.label && t.$style.withLabel,
@@ -17832,12 +17832,13 @@ var Vo = {
 ], zs = /* @__PURE__ */ X(/* @__PURE__ */ d({
 	__name: "ui3n-text",
 	props: {
-		text: {},
+		modelValue: {},
 		rows: { default: 6 },
 		maxRows: { default: 6 },
 		label: { default: "" },
 		placeholder: { default: "" },
 		rules: {},
+		validateAtStartup: { type: Boolean },
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -17852,37 +17853,37 @@ var Vo = {
 		"escape",
 		"focus",
 		"blur",
-		"update:text",
+		"update:modelValue",
 		"update:valid"
 	],
 	setup(e, { emit: t }) {
-		let n = e, r = t, a = C(null), l = C(!1), u = C(""), d = i(() => n.text ? !u.value : !0);
-		b(() => {
-			a.value && (Za(a.value), r("init", a.value));
-		}), F(() => d.value, (e) => r("update:valid", e), { immediate: !0 });
+		let n = e, r = t, i = C(null), a = C(""), l = C(!1), u = C(!1), d = C("");
 		function f(e) {
-			if (u.value = "", n.rules && n.rules.length) {
+			if (d.value = "", n.rules && n.rules.length) {
 				for (let t of n.rules) if (typeof t == "function") {
 					let n = t(e);
-					typeof n == "string" && (u.value += n);
+					typeof n == "string" && (d.value += n);
 				}
 			}
+			l.value && r("update:valid", !d.value);
 		}
 		function p(e) {
-			l.value = !0, r("focus", e);
+			u.value = !0, r("focus", e);
 		}
 		function h(e) {
-			l.value = !1;
-			let t = e.target.value;
-			f(t), r("blur", e), r("change", t), r("update:text", t);
+			setTimeout(() => {
+				u.value = !1;
+				let t = e.target.value;
+				f(t), r("blur", e), r("change", t), r("update:modelValue", t);
+			}, 100);
 		}
 		function _(e) {
 			let t = e.target.value;
-			f(t), r("update:text", t), r("input", t);
+			a.value = t, l.value = !0, f(t), r("update:modelValue", t), r("input", t);
 		}
 		function v(e) {
 			let { altKey: t, ctrlKey: n, shiftKey: i, metaKey: a, target: o } = e, s = o.value;
-			f(s), r("update:text", s), r("enter", {
+			l.value = !0, f(s), r("update:modelValue", s), r("enter", {
 				value: s,
 				altKey: t,
 				ctrlKey: n,
@@ -17892,23 +17893,27 @@ var Vo = {
 		}
 		function y(e) {
 			let t = e.target.value;
-			f(t), r("update:text", t), r("escape", e);
+			l.value = !0, f(t), r("update:modelValue", t), r("escape", e);
 		}
 		function S(e) {
 			r("keydown", e);
 		}
-		return (t, n) => (x(), s("div", { class: g([
+		return b(() => {
+			i.value && (Za(i.value), r("init", i.value)), n.validateAtStartup && f(a.value);
+		}), F(() => n.modelValue, (e, t) => {
+			(e ?? "") !== (t ?? "") && (a.value = e ?? "", f(a.value));
+		}, { immediate: !0 }), (t, n) => (x(), s("div", { class: g([
 			t.$style.ui3nText,
 			e.disabled && t.$style.disabled,
-			l.value && t.$style.focused
+			u.value && t.$style.focused
 		]) }, [e.label ? (x(), s("label", {
 			key: 0,
 			class: g(t.$style.label)
 		}, D(e.label), 3)) : o("", !0), c("div", { class: g(t.$style.body) }, [c("textarea", m({
 			ref_key: "textareaElement",
-			ref: a,
+			ref: i,
 			class: t.$style.content,
-			value: e.text,
+			value: a.value,
 			placeholder: e.placeholder,
 			readonly: e.disabled,
 			rows: e.rows,
@@ -17918,7 +17923,7 @@ var Vo = {
 			onInput: _,
 			onKeydown: [
 				R(v, ["enter"]),
-				R(y, ["escape"]),
+				R(y, ["esc"]),
 				S
 			],
 			onFocusin: p,

package/package.json

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

package/src/components/ui3n-input/ui3n-input.vue

@@ -36,7 +36,6 @@
   function onChange(event: Event) {
     const value = (event.target as HTMLInputElement).value;
     validate(value);
-    console.log('[Ui3nInput] ON_CHANGE');
     emits('change', value);
   }
 
@@ -45,7 +44,6 @@
     text.value = value;
     isDirty.value = true;
     validate(value);
-    console.log('[Ui3nInput] ON_INPUT');
     emits('update:modelValue', value);
     emits('input', value);
   }
@@ -55,7 +53,6 @@
     const value = (target as HTMLInputElement).value;
     isDirty.value = true;
     validate(value);
-    console.log('[Ui3nInput] ON_ENTER_KEYDOWN');
     emits('update:modelValue', value);
     emits('enter', { value, altKey, ctrlKey, metaKey, shiftKey });
   }
@@ -64,7 +61,6 @@
     const value = (event.target as HTMLInputElement).value;
     isDirty.value = true;
     validate(value);
-    console.log('[Ui3nInput] ON_ESCAPE_KEYDOWN');
     emits('update:modelValue', value);
     emits('escape', event);
   }
@@ -77,7 +73,6 @@
     text.value = '';
     isDirty.value = false;
     validate('');
-    console.log('[Ui3nInput] CLEAR_VALUE');
     emits('update:modelValue', '');
     emits('input', '');
     emits('change', '');
@@ -98,7 +93,6 @@
     }
 
     if (isDirty.value) {
-      console.log('[Ui3nInput] UPDATE:VALID => ', !errorMessage.value, ' | ', errorMessage.value);
       emits('update:valid', !errorMessage.value);
     }
   }
@@ -116,7 +110,6 @@
 
     emits('init', inputElement.value!);
     if (props.validateAtStartup) {
-      console.log('[Ui3nInput] ON_MOUNTED');
       validate(text.value);
     }
   });
@@ -126,7 +119,6 @@
     (val, oldVal) => {
       if ((val ?? '') !== (oldVal ?? '')) {
         text.value = val ?? '';
-        console.log('[Ui3nInput] WATCH => ', oldVal, ' => ', val);
         validate(text.value);
       }
     },

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

@@ -1,10 +1,11 @@
 export interface Ui3nTextProps {
-  text: string;
+  modelValue: string;
   rows?: number;
   maxRows?: number;
   label?: string;
   placeholder?: string;
   rules?: Array<(v: string) => string | boolean>;
+  validateAtStartup?: boolean;
   disabled?: boolean;
 }
 
@@ -13,16 +14,19 @@ export interface Ui3nTextEmits {
   (event: 'input', value: string): void;
   (event: 'change', value: string): void;
   (event: 'keydown', value: KeyboardEvent): void;
-  (event: 'enter', value: {
-    value: string;
-    altKey: boolean;
-    ctrlKey: boolean;
-    shiftKey: boolean;
-    metaKey: boolean;
-  }): void;
+  (
+    event: 'enter',
+    value: {
+      value: string;
+      altKey: boolean;
+      ctrlKey: boolean;
+      shiftKey: boolean;
+      metaKey: boolean;
+    },
+  ): void;
   (event: 'escape', value: Event): void;
   (event: 'focus', value: Event): void;
   (event: 'blur', value: Event): void;
-  (event: 'update:text', value: string): void;
+  (event: 'update:modelValue', value: string): void;
   (event: 'update:valid', value: boolean): void;
 }

package/src/components/ui3n-text/ui3n-text.vue

@@ -1,45 +1,23 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref, watch } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
   import { patchTextareaMaxRowsSupport } from '@/utils';
   import type { Ui3nTextEmits, Ui3nTextProps } from './types';
 
-  const props = withDefaults(
-    defineProps<Ui3nTextProps>(),
-    {
-      rows: 6,
-      maxRows: 6,
-      label: '',
-      placeholder: '',
-      disabled: false,
-    },
-  );
+  const props = withDefaults(defineProps<Ui3nTextProps>(), {
+    rows: 6,
+    maxRows: 6,
+    label: '',
+    placeholder: '',
+    disabled: false,
+  });
   const emits = defineEmits<Ui3nTextEmits>();
 
   const textareaElement = ref<HTMLTextAreaElement | null>(null);
+  const text = ref<string>('');
+  const isDirty = ref(false);
   const isFocused = ref(false);
   const errorMessage = ref('');
 
-  const isValid = computed(() => {
-    if (!props.text) {
-      return true;
-    }
-
-    return !errorMessage.value;
-  });
-
-  onMounted(() => {
-    if (textareaElement.value) {
-      patchTextareaMaxRowsSupport(textareaElement.value!);
-      emits('init', textareaElement.value!);
-    }
-  });
-
-  watch(
-    () => isValid.value,
-    val => emits('update:valid', val),
-    { immediate: true },
-  );
-
   function validate(text: string) {
     errorMessage.value = '';
     if (props.rules && props.rules.length) {
@@ -52,6 +30,10 @@
         }
       }
     }
+
+    if (isDirty.value) {
+      emits('update:valid', !errorMessage.value);
+    }
   }
 
   function onFocus(event: Event) {
@@ -60,39 +42,67 @@
   }
 
   function onBlur(event: Event) {
-    isFocused.value = false;
-    const value = (event.target as HTMLInputElement).value;
-    validate(value);
-    emits('blur', event);
-    emits('change', value);
-    emits('update:text', value);
+    setTimeout(() => {
+      isFocused.value = false;
+      const value = (event.target as HTMLInputElement).value;
+      validate(value);
+      emits('blur', event);
+      emits('change', value);
+      emits('update:modelValue', value);
+    }, 100);
   }
 
   function onInput(event: Event) {
     const value = (event.target as HTMLInputElement).value;
+    text.value = value;
+    isDirty.value = true;
     validate(value);
-    emits('update:text', value);
+    emits('update:modelValue', value);
     emits('input', value);
   }
 
   function onEnterKeydown(event: KeyboardEvent) {
     const { altKey, ctrlKey, shiftKey, metaKey, target } = event;
     const value = (target as HTMLInputElement).value;
+    isDirty.value = true;
     validate(value);
-    emits('update:text', value);
+    emits('update:modelValue', value);
     emits('enter', { value, altKey, ctrlKey, shiftKey, metaKey });
   }
 
   function onEscapeKeydown(event: KeyboardEvent) {
     const value = (event.target as HTMLInputElement).value;
+    isDirty.value = true;
     validate(value);
-    emits('update:text', value);
+    emits('update:modelValue', value);
     emits('escape', event);
   }
 
   function onKeydown(event: KeyboardEvent) {
     emits('keydown', event);
   }
+
+  onMounted(() => {
+    if (textareaElement.value) {
+      patchTextareaMaxRowsSupport(textareaElement.value!);
+      emits('init', textareaElement.value!);
+    }
+
+    if (props.validateAtStartup) {
+      validate(text.value);
+    }
+  });
+
+  watch(
+    () => props.modelValue,
+    (val, oldVal) => {
+      if ((val ?? '') !== (oldVal ?? '')) {
+        text.value = val ?? '';
+        validate(text.value);
+      }
+    },
+    { immediate: true },
+  );
 </script>
 
 <template>
@@ -117,7 +127,7 @@
         v-bind="$attrs"
         @input="onInput"
         @keydown.enter="onEnterKeydown"
-        @keydown.escape="onEscapeKeydown"
+        @keydown.esc="onEscapeKeydown"
         @keydown="onKeydown"
         @focusin="onFocus"
         @focusout="onBlur"