@v1nt1248/3nclient-lib 0.3.3 → 0.3.5

package/dist/components/ui3n-text/types.d.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;
 }
 export interface Ui3nTextEmits {
@@ -22,6 +23,6 @@ export interface Ui3nTextEmits {
     (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/dist/components/ui3n-text/ui3n-text.vue.d.ts

@@ -13,9 +13,9 @@ declare const _default: import('vue').DefineComponent<Ui3nTextProps, {}, {}, {},
     change: (value: string) => any;
     focus: (value: Event) => any;
     init: (value: HTMLTextAreaElement) => any;
+    "update:modelValue": (value: string) => any;
     escape: (value: Event) => any;
     "update:valid": (value: boolean) => any;
-    "update:text": (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<Ui3nTextProps> & Readonly<{
     onInput?: ((value: string) => any) | undefined;
     onEnter?: ((value: {
@@ -30,9 +30,9 @@ declare const _default: import('vue').DefineComponent<Ui3nTextProps, {}, {}, {},
     onChange?: ((value: string) => any) | undefined;
     onFocus?: ((value: Event) => any) | undefined;
     onInit?: ((value: HTMLTextAreaElement) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     onEscape?: ((value: Event) => any) | undefined;
     "onUpdate:valid"?: ((value: boolean) => any) | undefined;
-    "onUpdate:text"?: ((value: string) => any) | undefined;
 }>, {
     label: string;
     disabled: boolean;

package/dist/ui3n-components.js

@@ -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.3",
+  "version": "0.3.5",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

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"