@v1nt1248/3nclient-lib 0.2.99 → 0.3.2

package/package.json

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

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

@@ -8,6 +8,7 @@ export interface Ui3nInputProps {
   icon?: string;
   iconColor?: string;
   rules?: Array<(v: unknown) => boolean | string>;
+  validateAtStartup?: boolean;
   hideBottomSpace?: boolean;
   displayStateMode?: 'error' | 'success';
   displayStateWithIcon?: boolean;

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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref, watch, useCssModule } from 'vue';
-  import isEmpty from 'lodash/isEmpty';
+  import { computed, onMounted, ref, watch } from 'vue';
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
   import type { Ui3nInputEmits, Ui3nInputProps } from './types';
@@ -8,8 +7,6 @@
   const props = defineProps<Ui3nInputProps>();
   const emits = defineEmits<Ui3nInputEmits>();
 
-  const css = useCssModule();
-
   const inputElement = ref<HTMLInputElement | null>(null);
   const text = ref<string>('');
   const isDirty = ref(false);
@@ -24,43 +21,6 @@
     return props.iconColor || 'var(--color-icon-control-primary-default)';
   });
 
-  const isValid = computed(() => {
-    if (!isDirty.value) {
-      return true;
-    }
-
-    return !errorMessage.value;
-  });
-
-  const mainCssClasses = computed(() => {
-    const val = [css.ui3nInput];
-    props.label && val.push(css.withLabel);
-    props.hideBottomSpace && val.push(css.withoutBottomSpace);
-    props.icon && val.push(css.withIcon);
-    props.clearable && text.value && val.push(css.clearable);
-    props.disabled && val.push(css.disabled);
-    ((!!errorMessage.value && !isValid.value) || props.displayStateMode === 'error') && val.push(css.error);
-    props.displayStateMode === 'success' && val.push(css.success);
-
-    return val;
-  });
-
-  const iconCssClasses = computed(() => {
-    const val = [css.ui3nInputIcon];
-    props.disabled && val.push(css.ui3nInputIconDisabled);
-
-    return val;
-  });
-
-  const messageCssClasses = computed(() => {
-    const val = [css.ui3nInputFieldMessage];
-    (errorMessage.value || (props.displayStateMode === 'error' && !!props.displayStateMessage)) &&
-      val.push(css.ui3nInputErrorMessage);
-    props.displayStateMode === 'success' && props.displayStateMessage && val.push(css.ui3nInputSuccessMessage);
-
-    return val;
-  });
-
   function onFocus(event: Event) {
     isFocused.value = true;
     emits('focus', event);
@@ -76,6 +36,7 @@
   function onChange(event: Event) {
     const value = (event.target as HTMLInputElement).value;
     validate(value);
+    console.log('[Ui3nInput] ON_CHANGE');
     emits('change', value);
   }
 
@@ -84,6 +45,7 @@
     text.value = value;
     isDirty.value = true;
     validate(value);
+    console.log('[Ui3nInput] ON_INPUT');
     emits('update:modelValue', value);
     emits('input', value);
   }
@@ -93,6 +55,7 @@
     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 });
   }
@@ -101,6 +64,7 @@
     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);
   }
@@ -113,6 +77,7 @@
     text.value = '';
     isDirty.value = false;
     validate('');
+    console.log('[Ui3nInput] CLEAR_VALUE');
     emits('update:modelValue', '');
     emits('input', '');
     emits('change', '');
@@ -131,6 +96,11 @@
         }
       }
     }
+
+    if (isDirty.value) {
+      console.log('[Ui3nInput] UPDATE:VALID => ', !errorMessage.value, ' | ', errorMessage.value);
+      emits('update:valid', !errorMessage.value);
+    }
   }
 
   defineExpose({
@@ -145,21 +115,20 @@
     }
 
     emits('init', inputElement.value!);
+    if (props.validateAtStartup) {
+      console.log('[Ui3nInput] ON_MOUNTED');
+      validate(text.value);
+    }
   });
 
   watch(
     () => props.modelValue,
-    val => {
-      text.value = val;
-      validate(text.value);
-    },
-    { immediate: true },
-  );
-
-  watch(
-    () => isValid.value,
-    val => {
-      emits('update:valid', val);
+    (val, oldVal) => {
+      if ((val ?? '') !== (oldVal ?? '')) {
+        text.value = val ?? '';
+        console.log('[Ui3nInput] WATCH => ', oldVal, ' => ', val);
+        validate(text.value);
+      }
     },
     { immediate: true },
   );
@@ -167,8 +136,16 @@
 
 <template>
   <div
-    ref="wrapperElement"
-    :class="mainCssClasses"
+    :class="[
+      $style.ui3nInput,
+      label && $style.withLabel,
+      hideBottomSpace && $style.withoutBottomSpace,
+      icon && $style.withIcon,
+      clearable && text && $style.clearable,
+      disabled && $style.disabled,
+      (!!errorMessage || displayStateMode === 'error') && $style.error,
+      displayStateMode === 'success' && $style.success,
+    ]"
   >
     <label
       v-if="label"
@@ -199,7 +176,7 @@
       :icon="icon"
       :width="16"
       :height="16"
-      :class="iconCssClasses"
+      :class="[$style.ui3nInputIcon, disabled && $style.ui3nInputIconDisabled]"
     />
 
     <ui3n-icon
@@ -225,7 +202,11 @@
 
     <div
       v-if="(isDirty && errorMessage) || (displayStateMode && displayStateMessage)"
-      :class="messageCssClasses"
+      :class="[
+        $style.ui3nInputFieldMessage,
+        (errorMessage || (displayStateMode === 'error' && displayStateMessage)) && $style.ui3nInputErrorMessage,
+        displayStateMode === 'success' && displayStateMessage && $style.ui3nInputSuccessMessage,
+      ]"
     >
       {{ errorMessage || displayStateMessage }}
     </div>

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

@@ -35,7 +35,6 @@
     label: '',
     items: () => [] as T[],
     itemValue: 'id',
-    itemDisplay: 'id' as keyof T,
     clearable: false,
     withSearch: false,
     returnObject: false,
@@ -95,23 +94,24 @@
   });
 
   function getItemTitle(value: T | T[keyof T], withProcessing?: boolean): string {
-    if (props.returnObject || typeof value === 'object') {
-      const isItemDisplayFunction = typeof props.itemDisplay === 'function';
-      const val = isItemDisplayFunction
-        ? (props.itemDisplay as Ui3nSelectorItemDisplayingFunction<T>)(value as T)
-        : value
-          ? ((value as T)[props.itemDisplay as keyof T] as string)
-          : '';
+    if (!value) {
+      return '';
+    }
+
+    if (typeof value !== 'object') {
+      const val = (value as T[keyof T]).toString();
       return withProcessing ? val.toLowerCase() : val;
     }
 
-    return withProcessing
-      ? value
-        ? (value as T[keyof T] as string).toLowerCase()
-        : ''
-      : value
-        ? (value as T[keyof T] as string)
-        : '';
+    const isItemDisplayFunction = props.itemDisplay && typeof props.itemDisplay === 'function';
+    const preVal = isItemDisplayFunction
+      ? (props.itemDisplay as Ui3nSelectorItemDisplayingFunction<T>)(value as T)
+      : props.itemDisplay
+        ? (value as T)[props.itemDisplay as keyof T]
+        : (value as T).id;
+    // @ts-expect-error
+    const val = preVal.toString();
+    return withProcessing ? val.toLowerCase() : val;
   }
 
   function onFocus() {