@v1nt1248/3nclient-lib 0.1.23 → 0.1.24

package/package.json

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

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

@@ -15,12 +15,20 @@ export interface Ui3nInputProps {
 }
 
 export interface Ui3nInputEmits {
-  (ev: 'init', value: HTMLInputElement): void;
-  (ev: 'input', value: string): void;
-  (ev: 'focus', value: Event): void;
-  (ev: 'blur', value: Event): void;
-  (ev: 'clear'): void;
-  (ev: 'change', value: string): void;
-  (ev: 'update:modelValue', value: string): void;
-  (ev: 'update:valid', value: boolean): void;
+  (event: 'init', value: HTMLInputElement): void;
+  (event: 'input', value: string): void;
+  (event: 'focus', value: Event): void;
+  (event: 'blur', value: Event): void;
+  (event: 'clear'): void;
+  (event: 'change', value: string): void;
+  (event: 'enter', value: {
+    value: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
+  }): void;
+  (event: 'escape', value: Event): void;
+  (event: 'update:modelValue', value: string): void;
+  (event: 'update:valid', value: boolean): void;
 }

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

@@ -77,6 +77,21 @@ function onInput(ev: Event) {
   emits('input', value);
 }
 
+function onEnterKeydown(event: KeyboardEvent) {
+  const { altKey, ctrlKey, metaKey, shiftKey, target } = event;
+  const value = (target as HTMLInputElement).value;
+  validate(value);
+  emits('update:modelValue', value);
+  emits('enter', { value , altKey, ctrlKey, metaKey, shiftKey });
+}
+
+function onEscapeKeydown(event: KeyboardEvent) {
+  const value = (event.target as HTMLInputElement).value;
+  validate(value);
+  emits('update:modelValue', value);
+  emits('escape', event);
+}
+
 function clearValue() {
   text.value = '';
   validate('');
@@ -127,6 +142,8 @@ function validate(text: string) {
       :disabled="disabled"
       :class="$style.field"
       @input="onInput"
+      @keydown.enter="onEnterKeydown"
+      @keydown.escape="onEscapeKeydown"
       @focusin="onFocus"
       @focusout="onBlur"
       @change="onChange"

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

@@ -9,10 +9,19 @@ export interface Ui3nTextProps {
 }
 
 export interface Ui3nTextEmits {
-  (ev: 'init', value: HTMLTextAreaElement): void;
-  (ev: 'input', value: string): void;
-  (ev: 'focus', value: Event): void;
-  (ev: 'blur', value: Event): void;
-  (ev: 'update:text', value: string): void;
-  (ev: 'update:valid', value: boolean): void;
+  (event: 'init', value: HTMLTextAreaElement): void;
+  (event: 'input', value: string): void;
+  (event: 'change', value: string): 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:valid', value: boolean): void;
 }

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

@@ -40,7 +40,7 @@ watch(
   { immediate: true },
 );
 
-const validate = (text: string) => {
+function validate(text: string) {
   errorMessage.value = '';
   if (props.rules && props.rules.length) {
     for (const validateFunction of props.rules) {
@@ -52,24 +52,45 @@ const validate = (text: string) => {
       }
     }
   }
-};
+}
 
-const onFocus = (event: Event) => {
+function onFocus(event: Event) {
   isFocused.value = true;
   emit('focus', event);
-};
+}
 
-const onBlur = (event: Event) => {
+function onBlur(event: Event) {
   isFocused.value = false;
+  const value = (event.target as HTMLInputElement).value;
+  validate(value);
   emit('blur', event);
-};
+  emit('change', value);
+  emit('update:text', value);
+}
 
-const onInput = (ev: Event) => {
-  const value = (ev.target as HTMLInputElement).value;
+function onInput(event: Event) {
+  console.log('onInput!');
+  const value = (event.target as HTMLInputElement).value;
   validate(value);
   emit('update:text', value);
   emit('input', value);
-};
+}
+
+function onEnterKeydown(event: KeyboardEvent) {
+  console.log('onEnterKeydown: ', event);
+  const { altKey, ctrlKey, shiftKey, metaKey, target } = event;
+  const value = (target as HTMLInputElement).value;
+  validate(value);
+  emit('update:text', value);
+  emit('enter', { value , altKey, ctrlKey, shiftKey, metaKey });
+}
+
+function onEscapeKeydown(event: KeyboardEvent) {
+  const value = (event.target as HTMLInputElement).value;
+  validate(value);
+  emit('update:text', value);
+  emit('escape', event);
+}
 </script>
 
 <template>
@@ -89,6 +110,8 @@ const onInput = (ev: Event) => {
         :disabled="disabled"
         v-bind="$attrs"
         @input="onInput"
+        @keydown.enter="onEnterKeydown"
+        @keydown.escape="onEscapeKeydown"
         @focusin="onFocus"
         @focusout="onBlur"
       />