@milaboratories/uikit 2.2.80 → 2.2.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.80",
+  "version": "2.2.82",
   "type": "module",
   "main": "dist/pl-uikit.js",
   "module": "dist/pl-uikit.js",
@@ -31,9 +31,9 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
+    "@platforma-sdk/model": "^1.33.10",
     "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/helpers": "^1.6.12",
-    "@platforma-sdk/model": "^1.33.2"
+    "@milaboratories/helpers": "^1.6.12"
   },
   "scripts": {
     "dev": "vite",

package/src/__tests__/use-debounce-fn.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from 'vitest';
 import { useDebounceFn } from '@vueuse/core';
 import { delay } from '@milaboratories/helpers';
 
-test('useDebounceFn', async () => {
+test.skip('useDebounceFn', async () => {
   const s = {
     r: 0,
   };

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -24,6 +24,7 @@ import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { DropdownOverlay } from '@/utils/DropdownOverlay';
 import { refDebounced } from '@vueuse/core';
 import { useWatchFetch } from '@/composition/useWatchFetch.ts';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 /**
  * The current selected value.
@@ -55,7 +56,7 @@ const props = withDefaults(
     /**
      * Error message displayed below the dropdown (optional)
      */
-    error?: string;
+    error?: unknown;
     /**
      * Placeholder text shown when no value is selected.
      */
@@ -155,7 +156,7 @@ const computedError = computed(() => {
   }
 
   if (props.error) {
-    return props.error;
+    return getErrorMessage(props.error);
   }
 
   if (isLoadingError.value) {

package/src/components/PlBtnGroup/PlBtnGroup.vue

@@ -13,6 +13,7 @@ import { computed, useSlots } from 'vue';
 import { PlTooltip } from '@/components/PlTooltip';
 import InnerBorder from '@/utils/InnerBorder.vue';
 import type { SimpleOption } from '@/types';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const slots = useSlots();
 
@@ -53,7 +54,7 @@ const props = defineProps<{
   /**
    * Error message displayed below the component (optional)
    */
-  error?: string;
+  error?: unknown;
 }>();
 
 const normalizedOptions = computed(() =>
@@ -88,6 +89,6 @@ const normalizedOptions = computed(() =>
       </div>
     </InnerBorder>
     <div v-if="helper" class="pl-btn-group__helper">{{ helper }}</div>
-    <div v-else-if="error" class="pl-btn-group__error">{{ error }}</div>
+    <div v-else-if="error" class="pl-btn-group__error">{{ getErrorMessage(error) }}</div>
   </div>
 </template>

package/src/components/PlDropdown/PlDropdown.vue

@@ -22,6 +22,7 @@ import { normalizeListOptions } from '@/helpers/utils';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { DropdownOverlay } from '@/utils/DropdownOverlay';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const emit = defineEmits<{
   /**
@@ -55,7 +56,7 @@ const props = withDefaults(
     /**
      * Error message displayed below the dropdown (optional)
      */
-    error?: string;
+    error?: unknown;
     /**
      * Placeholder text shown when no value is selected.
      */
@@ -145,7 +146,7 @@ const computedError = computed(() => {
   }
 
   if (props.error) {
-    return props.error;
+    return getErrorMessage(props.error);
   }
 
   if (props.modelValue !== undefined && selectedIndex.value === -1) {

package/src/components/PlDropdownLegacy/PlDropdownLegacy.vue

@@ -22,6 +22,7 @@ import LongText from '@/components/LongText.vue';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { normalizeListOptions } from '@/helpers/utils';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const emit = defineEmits<{
   /**
@@ -55,7 +56,7 @@ const props = withDefaults(
     /**
      * Error message displayed below the dropdown (optional)
      */
-    error?: string;
+    error?: unknown;
     /**
      * Placeholder text shown when no value is selected.
      */
@@ -143,7 +144,7 @@ const computedError = computed(() => {
   }
 
   if (props.error) {
-    return props.error;
+    return getErrorMessage(props.error);
   }
 
   if (props.modelValue !== undefined && selectedIndex.value === -1) {

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -21,6 +21,7 @@ import { deepEqual, deepIncludes } from '@/helpers/objects';
 import { normalizeListOptions } from '@/helpers/utils';
 import DropdownOverlay from '@/utils/DropdownOverlay/DropdownOverlay.vue';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: M[]): void;
@@ -51,7 +52,7 @@ const props = withDefaults(
     /**
      * Error message displayed below the dropdown (optional)
      */
-    error?: string;
+    error?: unknown;
     /**
      * Placeholder text shown when no value is selected.
      */
@@ -312,7 +313,7 @@ watchPostEffect(() => {
         <DoubleContour class="pl-dropdown-multi__contour" />
       </div>
     </div>
-    <div v-if="error" class="pl-dropdown-multi__error">{{ error }}</div>
+    <div v-if="error" class="pl-dropdown-multi__error">{{ getErrorMessage(error) }}</div>
     <div v-else-if="helper" class="pl-dropdown-multi__helper">{{ helper }}</div>
   </div>
 </template>

package/src/components/PlDropdownMultiRef/PlDropdownMultiRef.vue

@@ -34,7 +34,7 @@ const props = withDefaults(
     /**
      * Error message displayed below the dropdown (optional)
      */
-    error?: string;
+    error?: unknown;
     /**
      * Placeholder text shown when no value is selected.
      */

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -47,7 +47,7 @@ const props = withDefaults(
     /**
      * Error message displayed below the dropdown (optional)
      */
-    error?: string;
+    error?: unknown;
     /**
      * Placeholder text shown when no value is selected.
      */

package/src/components/PlFileInput/PlFileInput.vue

@@ -9,11 +9,12 @@ import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
 import { getFileNameFromHandle, getFilePathFromHandle } from '@platforma-sdk/model';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
-import { isErrorLike, prettyBytes, tryDo } from '@milaboratories/helpers';
+import { prettyBytes } from '@milaboratories/helpers';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const data = reactive({
   fileDialogOpen: false,
-  error: '',
+  error: undefined as undefined | string,
 });
 
 const slots = useSlots();
@@ -107,28 +108,9 @@ const isUploading = computed(() => props.progress && !props.progress.done);
 
 const isUploaded = computed(() => props.progress && props.progress.done);
 
-const computedError = computed(() => {
-  let message: undefined | string = undefined;
-
-  if (data.error.length > 0) {
-    message = data.error;
-  } else if (typeof props.error === 'string') {
-    message = props.error;
-  } else if (isErrorLike(props.error)) {
-    message = props.error.message;
-  } else if (props.error != null) {
-    const unknownString = tryDo(() => JSON.stringify(props.error, null, 4), () => String(props.error));
-    message = `Unknown error type:\n${unknownString}`;
-  }
-
-  if (typeof message === 'string' && message.length === 0) {
-    message = 'Empty error';
-  }
+const computedErrorMessage = computed(() => getErrorMessage(data.error, props.error));
 
-  return message;
-});
-
-const hasErrors = computed(() => typeof computedError.value === 'string' && computedError.value.length > 0);
+const hasErrors = computed(() => typeof computedErrorMessage.value === 'string');
 
 const uploadStats = computed(() => {
   const { status, done } = props.progress ?? {};
@@ -170,9 +152,7 @@ const clear = () => emit('update:modelValue', undefined);
 
 watch(
   () => props.modelValue,
-  () => {
-    data.error = '';
-  },
+  () => (data.error = undefined),
   { immediate: true },
 );
 
@@ -216,7 +196,7 @@ if (!props.cellStyle) {
       <DoubleContour class="pl-file-input__contour" />
     </div>
     <div v-if="hasErrors" class="pl-file-input__error">
-      {{ computedError }}
+      {{ computedErrorMessage }}
     </div>
     <div v-else-if="helper" class="pl-file-input__helper">{{ helper }}</div>
   </div>

package/src/components/PlProgressCell/PlProgressCell.vue

@@ -3,13 +3,14 @@ import { computed } from 'vue';
 import './pl-progress-cell.scss';
 import PlMaskIcon24 from '../PlMaskIcon24/PlMaskIcon24.vue';
 import type { PlProgressCellProps } from './types';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const props = withDefaults(defineProps<PlProgressCellProps>(), {
   stage: 'not_started',
   step: '', // main text (left)
   progressString: '', // appended text on the right side (right)
   progress: undefined,
-  error: '',
+  error: undefined,
 });
 
 const canShowWhiteBg = computed(() => props.stage !== 'not_started');
@@ -27,7 +28,7 @@ const canShowInfinityLoader = computed(() => props.progress === undefined && pro
     <div v-if="!canShowInfinityLoader && !error" class="progress-cell__indicator" :style="{ width: currentProgress + '%' }"/>
     <div class="progress-cell__body">
       <div class="progress-cell__stage text-s">
-        {{ error ? error : step }}
+        {{ error ? getErrorMessage(error) : step }}
       </div>
       <div class="progress-cell__percentage text-s d-flex align-center justify-end">
         <PlMaskIcon24 v-if="error" name="error" />

package/src/components/PlProgressCell/types.ts

@@ -3,5 +3,5 @@ export type PlProgressCellProps = {
   step?: string; // "Alignment" / "Queued" (main left text)
   progressString?: string; // "20%" or "2 / 4" (right text)
   progress?: number; // Percent value! (from 0 to 100) i.e. 20 for 20%; 'undefined' for unknown progress = animated progressbar
-  error?: string;
+  error?: unknown;
 };

package/src/components/PlTextArea/PlTextArea.vue

@@ -12,6 +12,7 @@ import { PlTooltip } from '@/components/PlTooltip';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
 import { useValidation } from '@/utils/useValidation';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const slots = useSlots();
 
@@ -38,7 +39,7 @@ const props = defineProps<{
   /**
    * An error message to display below the textarea.
    */
-  error?: string;
+  error?: unknown;
   /**
    * A helper text to display below the textarea when there are no errors.
    */
@@ -92,10 +93,14 @@ useLabelNotch(root);
 
 const displayErrors = computed(() => {
   const errors: string[] = [];
-  if (props.error) {
-    errors.push(props.error);
+  const propsError = getErrorMessage(props.error);
+
+  if (propsError) {
+    errors.push(propsError);
   }
+
   errors.push(...validationData.value.errors);
+
   return errors;
 });
 

package/src/components/PlTextField/PlTextField.vue

@@ -17,6 +17,7 @@ import { useValidation } from '@/utils/useValidation';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
 import type { Equal } from '@milaboratories/helpers';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const slots = useSlots();
 
@@ -51,7 +52,7 @@ const props = defineProps<{
   /**
    * An error message to display below the input field.
    */
-  error?: string;
+  error?: unknown;
   /**
    * A helper text to display below the input field when there are no errors.
    */
@@ -148,8 +149,9 @@ const nonEmpty = computed(() => !isEmpty.value);
 
 const displayErrors = computed(() => {
   const errors: string[] = [];
-  if (props.error) {
-    errors.push(props.error);
+  const propsError = getErrorMessage(props.error);
+  if (propsError) {
+    errors.push(propsError);
   }
   if (data.cached) {
     errors.push(data.cached.error);

package/src/components/PlTooltip/PlTooltip.vue

@@ -108,7 +108,7 @@ const onOver = async () => {
 
   clearTimeout();
 
-  await utils.delay(100);
+  await utils.delay(props.openDelay ?? 100);
 
   if (data.over) {
     showTooltip();
@@ -154,7 +154,7 @@ onUnmounted(() => {
     <slot />
     <Teleport v-if="$slots['tooltip'] && data.open" to="body">
       <Transition name="tooltip-transition">
-        <div v-if="data.tooltipOpen" class="pl-tooltip__container" :style="style">
+        <div v-if="data.tooltipOpen" class="pl-tooltip__container" :style="style" @click.stop>
           <div ref="tooltip" class="pl-tooltip" :style="tooltipStyle" :class="position" @mouseover="onOver" @mouseleave="onLeave">
             <!-- should be one line -->
             <div><slot name="tooltip" /></div>

package/src/components/Slider.vue

@@ -6,6 +6,7 @@ import { clamp } from '@/helpers/math';
 import { PlTooltip } from '@/components/PlTooltip';
 import type { SliderMode } from '@/types';
 import { useSliderBreakpoints } from '@/composition/useSliderBreakpoints';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const slots = useSlots();
 
@@ -19,7 +20,7 @@ const props = withDefaults(
     step?: number;
     label?: string;
     helper?: string;
-    error?: string;
+    error?: unknown;
     mode?: SliderMode;
     measure?: string;
     breakpoints?: boolean;
@@ -65,7 +66,7 @@ const error = computed(() => {
     return `Max value: ${props.max}`;
   }
 
-  return props.error;
+  return getErrorMessage(props.error);
 });
 
 const propsRef = computed(() => props);

package/src/components/SliderRange.vue

@@ -7,6 +7,7 @@ import { PlTooltip } from '@/components/PlTooltip';
 import type { SliderMode } from '@/types';
 import InputRange from '@/components/InputRange.vue';
 import { useSliderBreakpoints } from '@/composition/useSliderBreakpoints';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 const slots = useSlots();
 
@@ -20,7 +21,7 @@ const props = withDefaults(
     step?: number;
     label?: string;
     helper?: string;
-    error?: string;
+    error?: unknown;
     mode?: SliderMode;
     measure?: string;
     breakpoints?: boolean;
@@ -74,7 +75,7 @@ const error = computed(() => {
     return 'Expected model [number, number]';
   }
 
-  return props.error;
+  return getErrorMessage(props.error);
 });
 
 const position1 = computed(() => {

package/src/components/SliderRangeTriple.vue

@@ -6,6 +6,7 @@ import { clamp } from '@/helpers/math';
 import { PlTooltip } from '@/components/PlTooltip';
 import type { SliderMode } from '@/types';
 import { useSliderBreakpoints } from '@/composition/useSliderBreakpoints';
+import { getErrorMessage } from '@/helpers/error.ts';
 
 type ModelType = [number, number, number];
 const slots = useSlots();
@@ -20,7 +21,7 @@ const props = withDefaults(
     step?: number;
     label?: string;
     helper?: string;
-    error?: string;
+    error?: unknown;
     mode?: SliderMode;
     measure?: string;
     breakpoints?: boolean;
@@ -84,7 +85,7 @@ const error = computed(() => {
     return errors.join(' ');
   }
 
-  return props.error;
+  return getErrorMessage(props.error);
 });
 
 const position1 = computed(() => {

package/src/helpers/error.ts

@@ -0,0 +1,27 @@
+import { isErrorLike, tryDo } from '@milaboratories/helpers';
+
+// order of errors is important, we will show first
+export function getErrorMessage(...errors: unknown[]): undefined | string {
+  for (let i = 0; i < errors.length; i++) {
+    const error = errors[i];
+    const message = extractMessage(error);
+    if (message !== undefined) return message;
+  }
+}
+
+function extractMessage(error: unknown): undefined | string {
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  if (isErrorLike(error) && error.message.length > 0) {
+    return error.message;
+  }
+
+  if (error != null) {
+    const unknownString = tryDo(() => JSON.stringify(error, null, 4), () => String(error));
+    return `Unknown error message:\n${unknownString}`;
+  }
+
+  return undefined;
+}