@milaboratories/uikit 2.10.15 → 2.10.17

package/src/components/PlNumberField/PlNumberField.vue

@@ -14,53 +14,65 @@
  * />
  */
 export default {
-  name: 'PlNumberField',
+  name: "PlNumberField",
 };
 </script>
 
 <script setup lang="ts">
-import './pl-number-field.scss';
-import DoubleContour from '../../utils/DoubleContour.vue';
-import { useLabelNotch } from '../../utils/useLabelNotch';
-import { computed, ref, useSlots, watch } from 'vue';
-import { PlTooltip } from '../PlTooltip';
-import { parseNumber } from './parseNumber';
-
-const props = withDefaults(defineProps<{
-  /** 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;
-  /** Makes some of corners not rounded */
-  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
-}>(), {
-  step: 1,
-  label: undefined,
-  placeholder: undefined,
-  minValue: undefined,
-  maxValue: undefined,
-  useIncrementButtons: true,
-  updateOnEnter: false,
-  errorMessage: undefined,
-  validate: undefined,
-  groupPosition: undefined,
-});
+import "./pl-number-field.scss";
+import DoubleContour from "../../utils/DoubleContour.vue";
+import { useLabelNotch } from "../../utils/useLabelNotch";
+import { computed, ref, useSlots, watch } from "vue";
+import { PlTooltip } from "../PlTooltip";
+import { parseNumber } from "./parseNumber";
+
+const props = withDefaults(
+  defineProps<{
+    /** 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;
+    /** Makes some of corners not rounded */
+    groupPosition?:
+      | "top"
+      | "bottom"
+      | "left"
+      | "right"
+      | "top-left"
+      | "top-right"
+      | "bottom-left"
+      | "bottom-right"
+      | "middle";
+  }>(),
+  {
+    step: 1,
+    label: undefined,
+    placeholder: undefined,
+    minValue: undefined,
+    maxValue: undefined,
+    useIncrementButtons: true,
+    updateOnEnter: false,
+    errorMessage: undefined,
+    validate: undefined,
+    groupPosition: undefined,
+  },
+);
 
 const modelValue = defineModel<number | undefined>({ required: true });
 
@@ -72,14 +84,14 @@ const inputRef = ref<HTMLInputElement>();
 useLabelNotch(rootRef);
 
 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
+  return v === undefined ? "" : String(+v); // (+v) to avoid staying in input non-number values if they are provided in model
 }
 
 const parsedResult = computed(() => parseNumber(props, inputValue.value));
 
 const cachedValue = ref<string | undefined>(undefined);
 
-const resetCachedValue = () => cachedValue.value = undefined;
+const resetCachedValue = () => (cachedValue.value = undefined);
 
 watch(modelValue, (n) => {
   const r = parsedResult.value;
@@ -133,7 +145,7 @@ const errors = computed(() => {
 
   ers = [...ers];
 
-  return ers.join(' ');
+  return ers.join(" ");
 });
 
 const isIncrementDisabled = computed(() => {
@@ -156,9 +168,7 @@ const isDecrementDisabled = computed(() => {
   return false;
 });
 
-const multiplier = computed(() =>
-  10 ** (props.step.toString().split('.').at(1)?.length ?? 0),
-);
+const multiplier = computed(() => 10 ** (props.step.toString().split(".").at(1)?.length ?? 0));
 
 function increment() {
   const r = parsedResult.value;
@@ -170,9 +180,8 @@ function increment() {
     if (parsedValue === undefined) {
       nV = props.minValue ? props.minValue : 0;
     } else {
-      nV = ((parsedValue || 0) * multiplier.value
-        + props.step * multiplier.value)
-      / multiplier.value;
+      nV =
+        ((parsedValue || 0) * multiplier.value + props.step * multiplier.value) / multiplier.value;
     }
     modelValue.value = props.maxValue !== undefined ? Math.min(props.maxValue, nV) : nV;
   }
@@ -188,9 +197,8 @@ function decrement() {
     if (parsedValue === undefined) {
       nV = 0;
     } else {
-      nV = ((parsedValue || 0) * multiplier.value
-        - props.step * multiplier.value)
-      / multiplier.value;
+      nV =
+        ((parsedValue || 0) * multiplier.value - props.step * multiplier.value) / multiplier.value;
     }
     modelValue.value = props.minValue !== undefined ? Math.max(props.minValue, nV) : nV;
   }
@@ -198,28 +206,28 @@ function decrement() {
 
 function handleKeyPress(e: { code: string; preventDefault(): void }) {
   if (props.updateOnEnterOrClickOutside) {
-    if (e.code === 'Escape') {
+    if (e.code === "Escape") {
       inputValue.value = modelToString(modelValue.value);
       inputRef.value?.blur();
     }
-    if (e.code === 'Enter') {
+    if (e.code === "Enter") {
       inputRef.value?.blur();
     }
   }
 
-  if (e.code === 'Enter') {
+  if (e.code === "Enter") {
     inputValue.value = String(modelValue.value); // to make .1 => 0.1, 10.00 => 10, remove leading zeros etc
   }
 
-  if (['ArrowDown', 'ArrowUp'].includes(e.code)) {
+  if (["ArrowDown", "ArrowUp"].includes(e.code)) {
     e.preventDefault();
   }
 
-  if (props.useIncrementButtons && e.code === 'ArrowUp') {
+  if (props.useIncrementButtons && e.code === "ArrowUp") {
     increment();
   }
 
-  if (props.useIncrementButtons && e.code === 'ArrowDown') {
+  if (props.useIncrementButtons && e.code === "ArrowDown") {
     decrement();
   }
 }
@@ -242,16 +250,16 @@ const onMousedown = (ev: MouseEvent) => {
     @keydown="handleKeyPress($event)"
   >
     <div class="pl-number-field__main-wrapper d-flex">
-      <DoubleContour class="pl-number-field__contour" :group-position="groupPosition"/>
+      <DoubleContour class="pl-number-field__contour" :group-position="groupPosition" />
       <div
         class="pl-number-field__wrapper flex-grow d-flex flex-align-center"
-        :class="{withoutArrows: !useIncrementButtons}"
+        :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>
@@ -262,16 +270,29 @@ const onMousedown = (ev: MouseEvent) => {
           :placeholder="placeholder"
           class="text-s flex-grow"
           @focusin="focused = true"
-          @focusout="focused = false; applyChanges()"
+          @focusout="
+            focused = false;
+            applyChanges();
+          "
         />
       </div>
-      <div v-if="useIncrementButtons" class="pl-number-field__icons d-flex-column" @mousedown="onMousedown">
+      <div
+        v-if="useIncrementButtons"
+        class="pl-number-field__icons d-flex-column"
+        @mousedown="onMousedown"
+      >
         <div
           :class="{ disabled: isIncrementDisabled }"
           class="pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"
           @click="increment"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+          >
             <path
               fill-rule="evenodd"
               clip-rule="evenodd"
@@ -285,7 +306,13 @@ const onMousedown = (ev: MouseEvent) => {
           class="pl-number-field__icon d-flex flex-justify-center uc-pointer flex-grow flex-align-center"
           @click="decrement"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+          >
             <path
               fill-rule="evenodd"
               clip-rule="evenodd"

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

@@ -1,180 +1,182 @@
-import PlNumberField from '../PlNumberField.vue';
-import { mount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
+import PlNumberField from "../PlNumberField.vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
 
-describe('NumberInput.vue', () => {
-  it('renders correctly with default props', () => {
+describe("NumberInput.vue", () => {
+  it("renders correctly with default props", () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
       },
     });
-    expect(wrapper.find('input').element.value).toBe('10');
+    expect(wrapper.find("input").element.value).toBe("10");
   });
 
-  it('displays the label when provided', () => {
+  it("displays the label when provided", () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
-        label: 'Test Label',
+        label: "Test Label",
       },
     });
-    expect(wrapper.find('label').text()).toBe('Test Label');
+    expect(wrapper.find("label").text()).toBe("Test Label");
   });
 
-  it('increments the value when increment button is clicked', async () => {
+  it("increments the value when increment button is clicked", async () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
         step: 2,
       },
     });
-    const incrementButton = wrapper.find('.pl-number-field__icons div:first-child');
-    await incrementButton.trigger('click');
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    await incrementButton.trigger("click");
     expect(wrapper.vm.modelValue).toEqual(12);
   });
 
-  it('decrements the value when decrement button is clicked', async () => {
+  it("decrements the value when decrement button is clicked", async () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
         step: 1,
       },
     });
-    const decrementButton = wrapper.find('.pl-number-field__icons div:last-child');
-    await decrementButton.trigger('click');
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    await decrementButton.trigger("click");
     expect(wrapper.vm.modelValue).toEqual(9);
   });
 
-  it('disables increment button when value exceeds maxValue', () => {
+  it("disables increment button when value exceeds maxValue", () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
         maxValue: 10,
       },
     });
-    const incrementButton = wrapper.find('.pl-number-field__icons div:first-child');
-    expect(incrementButton.classes()).toContain('disabled');
+    const incrementButton = wrapper.find(".pl-number-field__icons div:first-child");
+    expect(incrementButton.classes()).toContain("disabled");
   });
 
-  it('disables decrement button when value is below minValue', () => {
+  it("disables decrement button when value is below minValue", () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 1,
         minValue: 1,
       },
     });
-    const decrementButton = wrapper.find('.pl-number-field__icons div:last-child');
-    expect(decrementButton.classes()).toContain('disabled');
+    const decrementButton = wrapper.find(".pl-number-field__icons div:last-child");
+    expect(decrementButton.classes()).toContain("disabled");
   });
 
-  it('renders error messages when there are validation errors', () => {
+  it("renders error messages when there are validation errors", () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 5,
         minValue: 10,
-        errorMessage: 'Custom error message',
+        errorMessage: "Custom error message",
       },
     });
-    expect(wrapper.find('.pl-number-field__error').text()).toContain('Custom error message');
-    expect(wrapper.find('.pl-number-field__error').text()).toContain('Value must be higher than 10');
+    expect(wrapper.find(".pl-number-field__error").text()).toContain("Custom error message");
+    expect(wrapper.find(".pl-number-field__error").text()).toContain(
+      "Value must be higher than 10",
+    );
   });
 
-  it('validates and updates the computedValue when the user types in the input field', async () => {
+  it("validates and updates the computedValue when the user types in the input field", async () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 5,
       },
     });
-    const input = wrapper.find('input');
-    await input.setValue('1.1.1');
-    await input.trigger('focusout');
+    const input = wrapper.find("input");
+    await input.setValue("1.1.1");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(1.1);
 
-    await input.setValue('15');
-    await input.trigger('focusout');
+    await input.setValue("15");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(15);
 
-    await input.setValue('.');
-    await input.trigger('focusout');
+    await input.setValue(".");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(15);
 
-    await input.setValue('..');
-    await input.trigger('focusout');
+    await input.setValue("..");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual('.');
+    expect(input.element.value).toEqual(".");
 
-    await input.setValue(',,');
-    await input.trigger('focusout');
+    await input.setValue(",,");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual('.');
+    expect(input.element.value).toEqual(".");
 
-    await input.setValue('-');
-    await input.trigger('focusout');
+    await input.setValue("-");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual('-');
+    expect(input.element.value).toEqual("-");
 
-    await input.setValue('-a');
-    await input.trigger('focusout');
+    await input.setValue("-a");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(15);
-    expect(input.element.value).toEqual('-');
+    expect(input.element.value).toEqual("-");
 
-    await input.setValue('-1');
-    await input.trigger('focusout');
+    await input.setValue("-1");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(-1);
-    expect(input.element.value).toEqual('-1');
+    expect(input.element.value).toEqual("-1");
 
-    await input.setValue(',');
-    await input.trigger('focusout');
+    await input.setValue(",");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(-1);
 
-    await input.setValue('1,1');
-    await input.trigger('focusout');
+    await input.setValue("1,1");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(1.1);
-    expect(input.element.value).toEqual('1.1');
+    expect(input.element.value).toEqual("1.1");
 
-    await input.setValue('-1.1');
-    await input.trigger('focusout');
+    await input.setValue("-1.1");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(-1.1);
-    expect(input.element.value).toEqual('-1.1');
+    expect(input.element.value).toEqual("-1.1");
   });
 
-  it('update model with undefined when input is cleared', async () => {
+  it("update model with undefined when input is cleared", async () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
       },
     });
-    const input = wrapper.find('input');
-    await input.setValue('');
-    await input.trigger('focusout');
+    const input = wrapper.find("input");
+    await input.setValue("");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(undefined);
   });
 
-  it('external modelValue change', async () => {
+  it("external modelValue change", async () => {
     const wrapper = mount(PlNumberField, {
       props: {
         modelValue: 10,
       },
     });
 
-    const input = wrapper.find('input');
-    await input.trigger('focusout');
+    const input = wrapper.find("input");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(10);
-    expect(input.element.value).toEqual('10');
+    expect(input.element.value).toEqual("10");
 
-    await input.setValue('');
-    await input.trigger('focusout');
+    await input.setValue("");
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(undefined);
 
     wrapper.setProps({ modelValue: 1 });
 
-    await input.trigger('focusout');
+    await input.trigger("focusout");
     expect(wrapper.vm.modelValue).toEqual(1);
-    expect(input.element.value).toEqual('1');
+    expect(input.element.value).toEqual("1");
 
     await input.setValue(10);
     expect(wrapper.vm.modelValue).toEqual(10);
-    expect(input.element.value).toEqual('10');
+    expect(input.element.value).toEqual("10");
   });
 });

package/src/components/PlNumberField/index.ts

@@ -1 +1 @@
-export { default as PlNumberField } from './PlNumberField.vue';
+export { default as PlNumberField } from "./PlNumberField.vue";

package/src/components/PlNumberField/parseNumber.ts

@@ -7,15 +7,15 @@ type ParseResult = {
 const NUMBER_REGEX = /^[-−–+]?(\d+)?[.,]?(\d+)?$/; // parseFloat works without errors on strings with multiple dots, or letters in value
 
 function isPartial(v: string) {
-  return v === '.' || v === ',' || v === '-';
+  return v === "." || v === "," || v === "-";
 }
 
 function clearNumericValue(v: string) {
   v = v.trim();
-  v = v.replace(',', '.');
-  v = v.replace('−', '-'); // minus, replacing for the case of input the whole copied value
-  v = v.replace('–', '-'); // dash, replacing for the case of input the whole copied value
-  v = v.replace('+', '');
+  v = v.replace(",", ".");
+  v = v.replace("−", "-"); // minus, replacing for the case of input the whole copied value
+  v = v.replace("–", "-"); // dash, replacing for the case of input the whole copied value
+  v = v.replace("+", "");
   return v;
 }
 
@@ -31,12 +31,12 @@ function clearInput(v: string): string {
   }
 
   if (/^-[^0-9.]/.test(v)) {
-    return '-';
+    return "-";
   }
 
   const match = v.match(/^(.*)[.,][^0-9].*$/);
   if (match) {
-    return match[1] + '.';
+    return match[1] + ".";
   }
 
   if (v.match(NUMBER_REGEX)) {
@@ -45,19 +45,22 @@ function clearInput(v: string): string {
 
   const n = stringToNumber(v);
 
-  return isNaN(n) ? '' : String(+n);
+  return isNaN(n) ? "" : String(+n);
 }
 
-export function parseNumber(props: {
-  minValue?: number;
-  maxValue?: number;
-  validate?: (v: number) => string | undefined;
-}, str: string): ParseResult {
+export function parseNumber(
+  props: {
+    minValue?: number;
+    maxValue?: number;
+    validate?: (v: number) => string | undefined;
+  },
+  str: string,
+): ParseResult {
   str = str.trim();
 
   const cleanInput = clearInput(str);
 
-  if (str === '') {
+  if (str === "") {
     return {
       value: undefined,
       cleanInput,
@@ -66,14 +69,14 @@ export function parseNumber(props: {
 
   if (!str.match(NUMBER_REGEX)) {
     return {
-      error: Error('Value is not a number'),
+      error: Error("Value is not a number"),
       cleanInput,
     };
   }
 
   if (isPartial(str)) {
     return {
-      error: Error('Enter a number'),
+      error: Error("Enter a number"),
       cleanInput,
     };
   }
@@ -82,7 +85,7 @@ export function parseNumber(props: {
 
   if (isNaN(value)) {
     return {
-      error: Error('Value is not a number'),
+      error: Error("Value is not a number"),
       cleanInput,
     };
   }

package/src/components/PlProgressBar/PlProgressBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -7,18 +7,18 @@ const props = withDefaults(
     progress: number;
     completeMessage: string;
   }>(),
-  { progress: 0, completeMessage: 'Completed' },
+  { progress: 0, completeMessage: "Completed" },
 );
 
-const readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : ''));
+const readyMsg = computed(() => (props.progress === 100 ? props.completeMessage : ""));
 </script>
 
 <template>
   <div v-if="loading" class="ui-progress-bar">
-    <div class="ui-progress-bar__indicator" :style="{ width: progress + '%' }"/>
+    <div class="ui-progress-bar__indicator" :style="{ width: progress + '%' }" />
     <div class="ui-progress-bar__messages d-flex align-center pl-6 pr-6">
       <div class="ui-progress-bar__message flex-grow-1">{{ readyMsg }}</div>
-      <div class="ui-progress-bar__percent">{{ progress + '%' }}</div>
+      <div class="ui-progress-bar__percent">{{ progress + "%" }}</div>
     </div>
   </div>
 </template>

package/src/components/PlProgressBar/index.ts

@@ -1 +1 @@
-export { default as PlProgressBar } from './PlProgressBar.vue';
+export { default as PlProgressBar } from "./PlProgressBar.vue";