@milaboratories/uikit 2.2.53 → 2.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.53",
+  "version": "2.2.55",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -35,8 +35,8 @@
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
     "@milaboratories/eslint-config": "^1.0.1",
-    "@milaboratories/helpers": "^1.6.11",
-    "@platforma-sdk/model": "^1.22.2"
+    "@platforma-sdk/model": "^1.22.18",
+    "@milaboratories/helpers": "^1.6.11"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/icons/icon-assets/16_cell-type-subset.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40057 4.30094C7.08923 3.33207 8.22079 2.7 9.49999 2.7C11.5987 2.7 13.3 4.40132 13.3 6.5C13.3 7.7792 12.6679 8.91076 11.6991 9.59942C11.6997 9.56636 11.7 9.53322 11.7 9.5C11.7 6.62812 9.37187 4.3 6.49999 4.3C6.46677 4.3 6.43363 4.30032 6.40057 4.30094ZM4.64182 4.64183C5.38972 2.68764 7.2828 1.3 9.49999 1.3C12.3719 1.3 14.7 3.62812 14.7 6.5C14.7 8.71719 13.3123 10.6103 11.3582 11.3582C10.6103 13.3124 8.71717 14.7 6.49999 14.7C3.62811 14.7 1.29999 12.3719 1.29999 9.5C1.29999 7.28282 2.68763 5.38973 4.64182 4.64183ZM9.59941 11.6991C8.91075 12.6679 7.77918 13.3 6.49999 13.3C4.40131 13.3 2.69999 11.5987 2.69999 9.5C2.69999 8.22081 3.33206 7.08924 4.30092 6.40058C4.3003 6.43365 4.29999 6.46679 4.29999 6.5C4.29999 9.37188 6.62811 11.7 9.49999 11.7C9.5332 11.7 9.56634 11.6997 9.59941 11.6991ZM10.2299 10.23C9.99371 10.2759 9.74966 10.3 9.49999 10.3C7.40131 10.3 5.69999 8.59869 5.69999 6.5C5.69999 6.25033 5.72407 6.00628 5.77003 5.77005C6.00626 5.72408 6.25031 5.7 6.49999 5.7C8.59867 5.7 10.3 7.40132 10.3 9.5C10.3 9.74968 10.2759 9.99373 10.2299 10.23Z" fill="#07AD3E"/>
+</svg>

package/src/assets/icons/icon-assets/24_cell-type-subset.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2552 7.75512C11.0348 6.83446 12.1991 6.25 13.5 6.25C15.8472 6.25 17.75 8.15279 17.75 10.5C17.75 11.8009 17.1655 12.9652 16.2449 13.7448C16.2483 13.6636 16.25 13.582 16.25 13.5C16.25 10.3244 13.6756 7.75 10.5 7.75C10.418 7.75 10.3364 7.75172 10.2552 7.75512ZM8.21983 8.21983C9.10256 6.17845 11.1345 4.75 13.5 4.75C16.6756 4.75 19.25 7.32436 19.25 10.5C19.25 12.8655 17.8215 14.8974 15.7802 15.7802C14.8974 17.8215 12.8655 19.25 10.5 19.25C7.32436 19.25 4.75 16.6756 4.75 13.5C4.75 11.1345 6.17845 9.10256 8.21983 8.21983ZM13.7448 16.2449C12.9652 17.1655 11.8009 17.75 10.5 17.75C8.15279 17.75 6.25 15.8472 6.25 13.5C6.25 12.1991 6.83446 11.0348 7.75512 10.2552C7.75172 10.3364 7.75 10.418 7.75 10.5C7.75 13.6756 10.3244 16.25 13.5 16.25C13.582 16.25 13.6636 16.2483 13.7448 16.2449ZM14.6049 14.6049C14.2526 14.6996 13.8822 14.75 13.5 14.75C11.1528 14.75 9.25 12.8472 9.25 10.5C9.25 10.1178 9.30045 9.74739 9.39505 9.39505C9.74739 9.30045 10.1178 9.25 10.5 9.25C12.8472 9.25 14.75 11.1528 14.75 13.5C14.75 13.8822 14.6996 14.2526 14.6049 14.6049Z" fill="#07AD3E"/>
+</svg>

package/src/assets/icons/icon-assets-min/16_cell-type-subset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#07AD3E" fill-rule="evenodd" d="M6.4 4.3A3.8 3.8 0 1 1 11.7 9.599l.001-.098a5.2 5.2 0 0 0-5.3-5.2m-1.758.342A5.202 5.202 0 0 1 14.7 6.5a5.2 5.2 0 0 1-3.342 4.858A5.202 5.202 0 0 1 1.3 9.5a5.2 5.2 0 0 1 3.342-4.858m4.957 7.057A3.8 3.8 0 1 1 4.301 6.4l-.001.1a5.2 5.2 0 0 0 5.3 5.2m.63-1.469q-.354.07-.729.07a3.8 3.8 0 0 1-3.73-4.53q.354-.07.73-.07a3.8 3.8 0 0 1 3.73 4.53" clip-rule="evenodd"/></svg>

package/src/assets/icons/icon-assets-min/24_cell-type-subset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#07AD3E" fill-rule="evenodd" d="M10.255 7.755a4.25 4.25 0 1 1 5.99 5.99q.005-.122.005-.245a5.75 5.75 0 0 0-5.995-5.745M8.22 8.22a5.751 5.751 0 1 1 7.56 7.56A5.752 5.752 0 0 1 4.75 13.5a5.75 5.75 0 0 1 3.47-5.28m5.525 8.025a4.25 4.25 0 1 1-5.99-5.99 5.75 5.75 0 0 0 5.99 5.99m.86-1.64a4.25 4.25 0 0 1-5.21-5.21 4.25 4.25 0 0 1 5.21 5.21" clip-rule="evenodd"/></svg>

package/src/assets/icons/icons-16-generated.json

@@ -12,6 +12,7 @@
   "caret-right": "caret-right.svg",
   "caret-up": "caret-up.svg",
   "cell-type-num": "cell-type-num.svg",
+  "cell-type-subset": "cell-type-subset.svg",
   "cell-type-txt": "cell-type-txt.svg",
   "checkmark": "checkmark.svg",
   "chevron-down": "chevron-down.svg",

package/src/assets/icons/icons-16-generated.scss

@@ -12,6 +12,7 @@ $icons16: (
   caret-right: 'caret-right.svg',
   caret-up: 'caret-up.svg',
   cell-type-num: 'cell-type-num.svg',
+  cell-type-subset: 'cell-type-subset.svg',
   cell-type-txt: 'cell-type-txt.svg',
   checkmark: 'checkmark.svg',
   chevron-down: 'chevron-down.svg',

package/src/assets/icons/icons-24-generated.json

@@ -28,6 +28,7 @@
   "calendar": "calendar.svg",
   "canvas": "canvas.svg",
   "cell-type-num": "cell-type-num.svg",
+  "cell-type-subset": "cell-type-subset.svg",
   "cell-type-txt": "cell-type-txt.svg",
   "checkbox-checked": "checkbox-checked.svg",
   "checkbox-intermediate": "checkbox-intermediate.svg",

package/src/assets/icons/icons-24-generated.scss

@@ -28,6 +28,7 @@ $icons24: (
   calendar: 'calendar.svg',
   canvas: 'canvas.svg',
   cell-type-num: 'cell-type-num.svg',
+  cell-type-subset: 'cell-type-subset.svg',
   cell-type-txt: 'cell-type-txt.svg',
   checkbox-checked: 'checkbox-checked.svg',
   checkbox-intermediate: 'checkbox-intermediate.svg',

package/src/components/PlNumberField/PlNumberField.vue

@@ -2,18 +2,29 @@
 import './pl-number-field.scss';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
-import { computed, nextTick, ref, useSlots } from 'vue';
+import { computed, ref, useSlots, watch } from 'vue';
 import { PlTooltip } from '@/components/PlTooltip';
 
 type NumberInputProps = {
-  modelValue: number | undefined;
+  /** Input is disabled if true */
   disabled?: boolean;
+  /** Label on the top border of the field, empty by default */
   label?: string;
+  /** Input placeholder, empty by default */
   placeholder?: string;
+  /** Step for increment/decrement buttons, 1 by default */
   step?: number;
+  /** If defined - show an error if value is lower  */
   minValue?: number;
+  /** If defined - show an error if value is higher */
   maxValue?: number;
+  /** If false - remove buttons on the right */
+  useIncrementButtons?: boolean;
+  /** If true - changes do not apply immediately, they apply only by removing focus from the input (by click enter or by click outside)  */
+  updateOnEnterOrClickOutside?: boolean;
+  /** Error message that shows always when it's provided, without other checks */
   errorMessage?: string;
+  /** Additional validity check for input value that must return an error text if failed */
   validate?: (v: number) => string | undefined;
 };
 
@@ -23,68 +34,100 @@ const props = withDefaults(defineProps<NumberInputProps>(), {
   placeholder: undefined,
   minValue: undefined,
   maxValue: undefined,
+  useIncrementButtons: true,
+  updateOnEnter: false,
   errorMessage: undefined,
   validate: undefined,
 });
 
-const emit = defineEmits<{ (e: 'update:modelValue', number?: number): void }>();
+const modelValue = defineModel<number | undefined>({ required: true });
 
 const root = ref<HTMLElement>();
 const slots = useSlots();
 const input = ref<HTMLInputElement>();
-// const localErrors = ref<string[]>([]);
 
 useLabelNotch(root);
 
-const canRenderValue = ref(true);
+function modelToString(v: number | undefined) {
+  return v === undefined ? '' : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model
+}
+
+function isPartial(v: string) {
+  return v === '.' || v === ',' || v === '-';
+}
+function stringToModel(v: string) {
+  if (v === '') {
+    return undefined;
+  }
+  if (isPartial(v)) {
+    return 0;
+  }
+  let forParsing = v;
+  forParsing = forParsing.replace(',', '.');
+  forParsing = forParsing.replace('−', '-'); // minus, replacing for the case of input the whole copied value
+  forParsing = forParsing.replace('–', '-'); // dash, replacing for the case of input the whole copied value
+  forParsing = forParsing.replace('+', '');
+  return parseFloat(forParsing);
+}
+
+const innerTextValue = ref(modelToString(modelValue.value));
+const innerNumberValue = computed(() => stringToModel(innerTextValue.value));
+
+watch(() => modelValue.value, (outerValue) => { // update inner value if outer value is changed
+  if (parseFloat(innerTextValue.value) !== outerValue) {
+    innerTextValue.value = modelToString(outerValue);
+  }
+});
 
-const computedValue = computed({
+const NUMBER_REGEX = /^[-−–+]?(\d+)?[\\.,]?(\d+)?$/; // parseFloat works without errors on strings with multiple dots, or letters in value
+const inputValue = computed({
   get() {
-    if (canRenderValue.value) {
-      if (props.modelValue !== undefined) {
-        const num = new Number(props.modelValue);
-        return num.toString();
-      }
-      return '';
-    }
-    return '';
+    return innerTextValue.value;
   },
-  set(val) {
-    val = val.replace(/,/g, '');
-    if (isNumeric(val)) {
-      emit('update:modelValue', +val);
-      // try press 123.12345678912345 and than 6
-      if (val.toString() !== props.modelValue?.toString() && +val === props.modelValue && val[val.length - 1] !== '.') {
-        canRenderValue.value = false;
-        nextTick(() => {
-          canRenderValue.value = true;
-        });
+  set(nextValue: string) {
+    const parsedValue = stringToModel(nextValue);
+    // we allow to set empty value or valid numeric value, otherwise reset input value to previous valid
+    if (parsedValue === undefined
+      || (nextValue.match(NUMBER_REGEX) && !isNaN(parsedValue))
+    ) {
+      innerTextValue.value = nextValue;
+      if (!props.updateOnEnterOrClickOutside && !isPartial(nextValue)) { // to avoid applying '-' or '.'
+        applyChanges();
       }
-    } else {
-      if (val.trim() === '') {
-        emit('update:modelValue', undefined);
-      }
-      canRenderValue.value = false;
-      nextTick(() => {
-        canRenderValue.value = true;
-      });
+    } else if (input.value) {
+      input.value.value = innerTextValue.value;
     }
   },
 });
+const focused = ref(false);
+
+function applyChanges() {
+  if (innerTextValue.value === '') {
+    modelValue.value = undefined;
+    return;
+  }
+  modelValue.value = innerNumberValue.value;
+}
 
 const errors = computed(() => {
   let ers: string[] = [];
   if (props.errorMessage) {
     ers.push(props.errorMessage);
   }
-  if (!isNumeric(props.modelValue)) {
-    ers.push('Model value is not a number.');
+  const parsedValue = innerNumberValue.value;
+  if (parsedValue !== undefined && isNaN(parsedValue)) {
+    ers.push('Value is not a number');
+  } else if (props.validate && parsedValue !== undefined) {
+    const error = props.validate(parsedValue);
+    if (error) {
+      ers.push(error);
+    }
   } else {
-    if (props.minValue !== undefined && props.modelValue !== undefined && props.modelValue < props.minValue) {
-      ers.push(`Model value must be higher than ${props.minValue}`);
+    if (props.minValue !== undefined && parsedValue !== undefined && parsedValue < props.minValue) {
+      ers.push(`Value must be higher than ${props.minValue}`);
     }
-    if (props.maxValue !== undefined && props.modelValue !== undefined && props.modelValue > props.maxValue) {
-      ers.push(`Model value must be less than ${props.maxValue}`);
+    if (props.maxValue !== undefined && parsedValue !== undefined && parsedValue > props.maxValue) {
+      ers.push(`Value must be less than ${props.maxValue}`);
     }
   }
 
@@ -94,69 +137,76 @@ const errors = computed(() => {
 });
 
 const isIncrementDisabled = computed(() => {
-  if (props.maxValue && props.modelValue !== undefined) {
-    if ((props.modelValue || 0) + props.step > props.maxValue) {
-      return true;
-    }
+  const parsedValue = innerNumberValue.value;
+  if (props.maxValue !== undefined && parsedValue !== undefined) {
+    return parsedValue >= props.maxValue;
   }
-
   return false;
 });
 
 const isDecrementDisabled = computed(() => {
-  if (props.minValue && props.modelValue !== undefined) {
-    if ((props.modelValue || 0) - props.step < props.minValue) {
-      return true;
-    }
+  const parsedValue = innerNumberValue.value;
+  if (props.minValue !== undefined && parsedValue !== undefined) {
+    return parsedValue <= props.minValue;
   }
-
   return false;
 });
 
-function isNumeric(str: string | number | undefined) {
-  if (str !== undefined) {
-    str = str?.toString();
-    return !isNaN(+str) && !isNaN(parseFloat(str));
-  }
-  return false;
-}
-
 function increment() {
+  const parsedValue = innerNumberValue.value;
   if (!isIncrementDisabled.value) {
-    let nV = 0;
-    if (props.modelValue === undefined) {
+    let nV;
+    if (parsedValue === undefined) {
       nV = props.minValue ? props.minValue : 0;
     } else {
-      nV = +(props.modelValue || 0) + props.step;
+      nV = (parsedValue || 0) + props.step;
     }
-
-    computedValue.value = nV.toString();
+    modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;
   }
 }
 
 function decrement() {
+  const parsedValue = innerNumberValue.value;
   if (!isDecrementDisabled.value) {
-    let nV = 0;
-    if (props.modelValue === undefined) {
+    let nV;
+    if (parsedValue === undefined) {
       nV = 0;
     } else {
-      nV = +(props.modelValue || 0) - props.step;
+      nV = +(parsedValue || 0) - props.step;
     }
-
-    computedValue.value = props.minValue ? Math.max(props.minValue, nV).toString() : nV.toString();
+    modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;
   }
 }
 
 function handleKeyPress(e: { code: string; preventDefault(): void }) {
+  if (props.updateOnEnterOrClickOutside) {
+    if (e.code === 'Escape') {
+      innerTextValue.value = modelToString(modelValue.value);
+      input.value?.blur();
+    }
+    if (e.code === 'Enter') {
+      input.value?.blur();
+    }
+  }
+
+  if (e.code === 'Enter') {
+    innerTextValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc
+  }
+
   if (['ArrowDown', 'ArrowUp'].includes(e.code)) {
     e.preventDefault();
   }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  e.code === 'ArrowUp' ? increment() : e.code === 'ArrowDown' ? decrement() : undefined;
+  if (props.useIncrementButtons && e.code === 'ArrowUp') {
+    increment();
+  }
+  if (props.useIncrementButtons && e.code === 'ArrowDown') {
+    decrement();
+  }
 }
 
 // https://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click#:~:text=If%20you%20encounter%20a%20situation,none%3B%20to%20the%20summary%20element.
+// this prevents selecting of more than input content in some cases,
+// but also disable selecting input content by double-click (useful feature)
 const onMousedown = (ev: MouseEvent) => {
   if (ev.detail > 1) {
     ev.preventDefault();
@@ -169,23 +219,33 @@ const onMousedown = (ev: MouseEvent) => {
     ref="root"
     :class="{ error: !!errors.trim(), disabled: disabled }"
     class="mi-number-field d-flex-column"
-    @mousedown="onMousedown"
     @keydown="handleKeyPress($event)"
   >
     <div class="mi-number-field__main-wrapper d-flex">
-      <DoubleContour class="mi-number-field__contour" />
-      <div class="mi-number-field__wrapper flex-grow d-flex flex-align-center">
+      <DoubleContour class="mi-number-field__contour"/>
+      <div
+        class="mi-number-field__wrapper flex-grow d-flex flex-align-center"
+        :class="{withoutArrows: !useIncrementButtons}"
+      >
         <label v-if="label" class="text-description">
           {{ label }}
           <PlTooltip v-if="slots.tooltip" class="info" position="top">
             <template #tooltip>
-              <slot name="tooltip" />
+              <slot name="tooltip"/>
             </template>
           </PlTooltip>
         </label>
-        <input ref="input" v-model="computedValue" :disabled="disabled" :placeholder="placeholder" class="text-s flex-grow" />
+        <input
+          ref="input"
+          v-model="inputValue"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          class="text-s flex-grow"
+          @focusin="focused = true"
+          @focusout="focused = false; applyChanges()"
+        />
       </div>
-      <div class="mi-number-field__icons d-flex-column">
+      <div v-if="useIncrementButtons" class="mi-number-field__icons d-flex-column" @mousedown="onMousedown">
         <div
           :class="{ disabled: isIncrementDisabled }"
           class="mi-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"

package/src/components/PlNumberField/__tests__/PlNumberField.spec.ts

@@ -31,7 +31,7 @@ describe('NumberInput.vue', () => {
     });
     const incrementButton = wrapper.find('.mi-number-field__icons div:first-child');
     await incrementButton.trigger('click');
-    expect(wrapper.emitted('update:modelValue')).toEqual([[12]]);
+    expect(wrapper.vm.modelValue).toEqual(12);
   });
 
   it('decrements the value when decrement button is clicked', async () => {
@@ -43,7 +43,7 @@ describe('NumberInput.vue', () => {
     });
     const decrementButton = wrapper.find('.mi-number-field__icons div:last-child');
     await decrementButton.trigger('click');
-    expect(wrapper.emitted('update:modelValue')).toEqual([[9]]);
+    expect(wrapper.vm.modelValue).toEqual(9);
   });
 
   it('disables increment button when value exceeds maxValue', () => {
@@ -77,7 +77,7 @@ describe('NumberInput.vue', () => {
       },
     });
     expect(wrapper.find('.mi-number-field__hint').text()).toContain('Custom error message');
-    expect(wrapper.find('.mi-number-field__hint').text()).toContain('Model value must be higher than 10');
+    expect(wrapper.find('.mi-number-field__hint').text()).toContain('Value must be higher than 10');
   });
 
   it('validates and updates the computedValue when the user types in the input field', async () => {
@@ -87,11 +87,29 @@ describe('NumberInput.vue', () => {
       },
     });
     const input = wrapper.find('input');
+    await input.setValue('1.1.1');
+    await input.trigger('focusout');
+    expect(wrapper.vm.modelValue).toEqual(5);
+
     await input.setValue('15');
-    expect(wrapper.emitted('update:modelValue')).toEqual([[15]]);
+    await input.trigger('focusout');
+    expect(wrapper.vm.modelValue).toEqual(15);
+
+    await input.setValue('.');
+    await input.trigger('focusout');
+    expect(wrapper.vm.modelValue).toEqual(0);
+
+    await input.setValue(',');
+    await input.trigger('focusout');
+    expect(wrapper.vm.modelValue).toEqual(0);
+
+    await input.setValue('1,1');
+    await input.trigger('focusout');
+    expect(wrapper.vm.modelValue).toEqual(1.1);
+    expect(input.element.value).toEqual('1.1');
   });
 
-  it('emits update:modelValue with undefined when input is cleared', async () => {
+  it('update model with undefined when input is cleared', async () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
@@ -99,6 +117,7 @@ describe('NumberInput.vue', () => {
     });
     const input = wrapper.find('input');
     await input.setValue('');
-    expect(wrapper.emitted('update:modelValue')).toEqual([[undefined]]);
+    await input.trigger('focusout');
+    expect(wrapper.vm.modelValue).toEqual(undefined);
   });
 });

package/src/components/PlNumberField/pl-number-field.scss

@@ -25,6 +25,9 @@
     // background-color: rgb(111, 94, 94);
     border-radius: 6px;
   }
+  &__wrapper.withoutArrows {
+    padding-right: 12px;
+  }
 
   &__icons {
     // background-color: green;
@@ -67,6 +70,7 @@
     border: none;
     width: 100%;
     background: unset;
+    text-overflow: ellipsis;
   }
 
   &__contour {

package/src/generated/icons-16.ts

@@ -12,6 +12,7 @@ export const maskIcons16 = [
   'caret-right',
   'caret-up',
   'cell-type-num',
+  'cell-type-subset',
   'cell-type-txt',
   'checkmark',
   'chevron-down',

package/src/generated/icons-24.ts

@@ -28,6 +28,7 @@ export const maskIcons24 = [
   'calendar',
   'canvas',
   'cell-type-num',
+  'cell-type-subset',
   'cell-type-txt',
   'checkbox-checked',
   'checkbox-intermediate',