@v1nt1248/3nclient-lib 0.3.30 → 0.3.32

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

@@ -11,6 +11,7 @@
     label: '',
     placeholder: '',
     disabled: false,
+    validateAtStartup: false,
   });
   const emits = defineEmits<Ui3nTextEmits>();
 
@@ -20,7 +21,7 @@
   const isFocused = ref(false);
   const errorMessage = ref('');
 
-  function validate(text: string) {
+  function validate(text: string, force = false) {
     errorMessage.value = '';
     if (props.rules && props.rules.length) {
       for (const validateFunction of props.rules) {
@@ -33,7 +34,7 @@
       }
     }
 
-    if (isDirty.value) {
+    if (isDirty.value || force || props.validateAtStartup) {
       emits('update:valid', !errorMessage.value);
     }
   }
@@ -46,13 +47,14 @@
   function onBlur(event: Event) {
     const value = (event.target as HTMLInputElement).value;
 
+    validate(value);
+    emits('update:modelValue', value);
+    emits('change', value);
+
     setTimeout(() => {
       isFocused.value = false;
-      validate(value);
       emits('blur', event);
-      emits('change', value);
-      emits('update:modelValue', value);
-    }, 100);
+    }, 50);
   }
 
   function onInput(event: Event) {
@@ -129,7 +131,7 @@
     (val, oldVal) => {
       if ((val ?? '') !== (oldVal ?? '')) {
         text.value = val ?? '';
-        validate(text.value);
+        validate(text.value, isDirty.value || props.validateAtStartup);
       }
     },
     { immediate: true },
@@ -139,7 +141,12 @@
 <template>
   <div
     :id="id"
-    :class="[$style.ui3nText, disabled && $style.disabled, isFocused && $style.focused]"
+    :class="[
+      $style.ui3nText,
+      disabled && $style.disabled,
+      isFocused && $style.focused,
+      errorMessage && $style.hasError,
+    ]"
   >
     <label
       v-if="label"
@@ -168,6 +175,13 @@
         @focusout="onBlur"
       />
     </div>
+
+    <div
+      v-if="errorMessage"
+      :class="$style.errorBlock"
+    >
+      {{ errorMessage }}
+    </div>
   </div>
 </template>
 
@@ -272,4 +286,18 @@
       background-color: var(--color-bg-control-secondary-focused);
     }
   }
+
+  .hasError {
+    .body {
+      border-color: var(--error-fill-default);
+    }
+  }
+
+  .errorBlock {
+    margin-top: 4px;
+    font-size: 11px;
+    line-height: 13px;
+    color: var(--error-content-default);
+    font-weight: 400;
+  }
 </style>

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

@@ -15,6 +15,7 @@
     offsetX: 0,
     offsetY: 0,
     trigger: 'hover',
+    disabled: false,
   });
   const emits = defineEmits<Ui3nTooltipEmits>();
   defineSlots<Ui3nTooltipSlots>();
@@ -24,6 +25,8 @@
   const floatingEl = ref<Nullable<HTMLElement>>(null);
   const floatingArrowEl = ref<Nullable<HTMLElement>>(null);
 
+  const isClient = ref(false);
+
   const mainPlacement = computed(() => {
     const [part1] = props.placement.split('-');
     return part1;
@@ -65,14 +68,21 @@
     whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
   });
 
-  const tooltipStylesComputed = computed(() => ({
-    ...floatingStyles.value,
-    '--ui3n-tooltip-bg-color': props.color,
-    '--ui3n-tooltip-text-color': props.textColor,
-    '--ui3n-tooltip-max-width': `${props.maxContentWidth}px`,
-    '--ui3n-tooltip-arrow-size': `${baseOffset}px`,
-    '--ui3n-tooltip-base-offset': `${-baseOffset}px`,
-  }));
+  const tooltipStylesComputed = computed(() => {
+    const maxWidth =
+      typeof props.maxContentWidth === 'number' || !isNaN(Number(props.maxContentWidth))
+        ? `${props.maxContentWidth}px`
+        : String(props.maxContentWidth);
+
+    return {
+      ...floatingStyles.value,
+      '--ui3n-tooltip-bg-color': props.color,
+      '--ui3n-tooltip-text-color': props.textColor,
+      '--ui3n-tooltip-max-width': maxWidth,
+      '--ui3n-tooltip-arrow-size': `${baseOffset}px`,
+      '--ui3n-tooltip-base-offset': `${-baseOffset}px`,
+    };
+  });
 
   function onMouseenter() {
     if (props.disabled) {
@@ -106,30 +116,41 @@
     }
   }
 
-  onMounted(() => {
+  function removeEventListeners() {
     if (!referenceContainer.value) {
       return;
     }
 
+    referenceContainer.value.removeEventListener('mouseenter', onMouseenter);
+    referenceContainer.value.removeEventListener('mouseleave', onMouseleave);
+    referenceContainer.value.removeEventListener('click', onClick);
+  }
+
+  function setupEventListeners() {
+    removeEventListeners();
+    if (!referenceContainer.value || props.disabled) {
+      return;
+    }
+
     if (props.trigger === 'hover') {
       referenceContainer.value.addEventListener('mouseenter', onMouseenter);
       referenceContainer.value.addEventListener('mouseleave', onMouseleave);
     } else if (props.trigger === 'click') {
       referenceContainer.value.addEventListener('click', onClick);
     }
+  }
+
+  onMounted(() => {
+    isClient.value = true;
+    setupEventListeners();
   });
 
   onBeforeUnmount(() => {
-    if (!referenceContainer.value) {
-      return;
-    }
+    removeEventListeners();
+  });
 
-    if (props.trigger === 'hover') {
-      referenceContainer.value.removeEventListener('mouseenter', onMouseenter);
-      referenceContainer.value.removeEventListener('mouseleave', onMouseleave);
-    } else if (props.trigger === 'click') {
-      referenceContainer.value.removeEventListener('click', onClick);
-    }
+  watch([() => props.trigger, () => props.disabled], () => {
+    setupEventListeners();
   });
 
   watch(

package/src/components/ui3n-virtual-scroll/ui3n-virtual-scroll.vue

@@ -235,10 +235,11 @@
       >
         <div
           v-for="(item, index) in visibleChildren"
-          :key="item.id"
+          :key="item.id ?? `v-node-${startNode + index}`"
           :ref="el => setItemRef(el, item.id ?? startNode + index)"
           v-bind="{ 'data-sid': item.id ?? startNode + index }"
           :class="$style.item"
+          :style="{ minHeight: `${props.minChildHeight}px` }"
         >
           <slot
             name="item"
@@ -271,7 +272,6 @@
 
   .item {
     position: relative;
-    min-height: v-bind('props.minChildHeight + "px"');
     box-sizing: border-box;
   }
 </style>