@milaboratories/uikit 2.10.15 → 2.10.17

package/src/__tests__/compositions/useValidation.spec.ts

@@ -1,66 +1,79 @@
-import { useValidation } from '../../utils/useValidation';
-import { describe, expect, test } from 'vitest';
-import { ref } from 'vue';
+import { useValidation } from "../../utils/useValidation";
+import { describe, expect, test } from "vitest";
+import { ref } from "vue";
 
-describe('Test useValidation', () => {
-  test('Empty rules', () => {
-    const model = ref('12345');
+describe("Test useValidation", () => {
+  test("Empty rules", () => {
+    const model = ref("12345");
     const rules: ((v: string) => boolean | string)[] = [];
 
     const validationData = useValidation(model, rules);
 
-    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value).to.have.property("isValid");
     expect(validationData.value.isValid).to.equal(true);
   });
 
-  test('Check correct', () => {
-    const model = ref('12345');
-    const rules: ((v: string) => boolean | string)[] = [(v: string) => v.length === 5 || 'Length must be 5'];
+  test("Check correct", () => {
+    const model = ref("12345");
+    const rules: ((v: string) => boolean | string)[] = [
+      (v: string) => v.length === 5 || "Length must be 5",
+    ];
 
     const validationData = useValidation(model, rules);
 
-    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value).to.have.property("isValid");
     expect(validationData.value.isValid).to.equal(true);
 
-    expect(validationData.value).to.have.property('errors');
+    expect(validationData.value).to.have.property("errors");
     expect(validationData.value.errors.length).to.equal(0);
   });
 
-  test('Check errors', () => {
-    const model = ref('12345');
+  test("Check errors", () => {
+    const model = ref("12345");
     const rules: ((v: string) => boolean | string)[] = [
-      (v: string) => v.length > 5 || 'Length must be 5',
-      (v: string) => v.length > 5 || 'Length must be 5 second message',
+      (v: string) => v.length > 5 || "Length must be 5",
+      (v: string) => v.length > 5 || "Length must be 5 second message",
     ];
 
     const validationData = useValidation(model, rules);
 
-    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value).to.have.property("isValid");
     expect(validationData.value.isValid).to.equal(false);
 
-    expect(validationData.value.errors).toEqual(['Length must be 5', 'Length must be 5 second message']);
+    expect(validationData.value.errors).toEqual([
+      "Length must be 5",
+      "Length must be 5 second message",
+    ]);
   });
 
-  test('Check value changes', () => {
-    const model = ref('12345');
-    const rules: ((v: string) => boolean | string)[] = [(v: string) => v.length === 5 || 'Length must be 5!!!'];
+  test("Check value changes", () => {
+    const model = ref("12345");
+    const rules: ((v: string) => boolean | string)[] = [
+      (v: string) => v.length === 5 || "Length must be 5!!!",
+    ];
 
     const validationData = useValidation(model, rules);
 
-    expect(validationData.value).to.have.property('isValid');
+    expect(validationData.value).to.have.property("isValid");
     expect(validationData.value.isValid).to.equal(true);
 
-    model.value = '098';
+    model.value = "098";
     expect(validationData.value.isValid).to.equal(false);
-    expect(validationData.value.errors).toEqual(['Length must be 5!!!']);
+    expect(validationData.value.errors).toEqual(["Length must be 5!!!"]);
   });
 
-  test('should return multiple error messages', () => {
-    const value = ref('no');
-    const rules = [(v: string) => v.length > 3 || 'Must be longer than 3 characters', (v: string) => v.includes('@') || 'Must include "@" symbol'];
+  test("should return multiple error messages", () => {
+    const value = ref("no");
+    const rules = [
+      (v: string) => v.length > 3 || "Must be longer than 3 characters",
+      (v: string) => v.includes("@") || 'Must include "@" symbol',
+    ];
     const validation = useValidation(value, rules);
 
     expect(validation.value.isValid).toBe(false);
-    expect(validation.value.errors).toEqual(['Must be longer than 3 characters', 'Must include "@" symbol']);
+    expect(validation.value.errors).toEqual([
+      "Must be longer than 3 characters",
+      'Must include "@" symbol',
+    ]);
   });
 });

package/src/__tests__/setup.ts

@@ -1,2 +1,2 @@
-import ResizeObserver from 'resize-observer-polyfill';
+import ResizeObserver from "resize-observer-polyfill";
 globalThis.ResizeObserver = ResizeObserver;

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

@@ -1,17 +1,21 @@
-import { expect, test } from 'vitest';
-import { useDebounceFn } from '@vueuse/core';
-import { delay } from '@milaboratories/helpers';
+import { expect, test } from "vitest";
+import { useDebounceFn } from "@vueuse/core";
+import { delay } from "@milaboratories/helpers";
 
-test.skip('useDebounceFn', async () => {
+test.skip("useDebounceFn", async () => {
   const s = {
     r: 0,
   };
 
-  const debouncedFn = useDebounceFn(async (i: number) => {
-    await delay(0);
-    console.log('fn', i);
-    s.r = i;
-  }, 20, { maxWait: 40 });
+  const debouncedFn = useDebounceFn(
+    async (i: number) => {
+      await delay(0);
+      console.log("fn", i);
+      s.r = i;
+    },
+    20,
+    { maxWait: 40 },
+  );
 
   const t1 = performance.now();
   for (let i = 0; i < 10; i++) {
@@ -19,9 +23,9 @@ test.skip('useDebounceFn', async () => {
     debouncedFn(i);
   }
 
-  console.log('calls span', performance.now() - t1);
+  console.log("calls span", performance.now() - t1);
 
   await delay(200);
-  console.log('s.r', s.r);
+  console.log("s.r", s.r);
   expect(s.r).toBe(9);
 });

package/src/assets/animations.scss

@@ -12,7 +12,6 @@
 }
 
 @keyframes shake {
-
   10%,
   90% {
     transform: translate3d(-1px, 0, 0);
@@ -37,17 +36,17 @@
 
 .shake {
   &-enter-active {
-    animation: shake .5s cubic-bezier(.36, .07, .19, .97) both;
+    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
   }
 }
 
 .slide-panel {
   &-enter-active {
-    transition: transform .3s ease-out;
+    transition: transform 0.3s ease-out;
   }
 
   &-leave-active {
-    transition: transform .3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
   }
 
   &-enter-from {
@@ -72,7 +71,8 @@
     overflow: hidden;
   }
 
-  &-enter-from, &-leave-to {
+  &-enter-from,
+  &-leave-to {
     height: 0;
     margin: 0;
     padding: 0;

package/src/assets/base-btn.scss

@@ -37,8 +37,9 @@
 
   transition: box-shadow 0.05s ease-in-out;
 
-  box-shadow: var(--focus-shadow), var(--append-shadow), var(--shape-shadow),
-  var(--active-shadow), var(--drop-shadow);
+  box-shadow:
+    var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow),
+    var(--drop-shadow);
 
   // @todo
   &.justifyCenter {
@@ -120,4 +121,4 @@
   > span {
     display: inline-flex;
   }
-}
+}

package/src/assets/base.scss

@@ -1,4 +1,4 @@
-@use './variables.scss';
+@use "./variables.scss";
 
 :root {
   --main-dark-color: #110529;
@@ -32,8 +32,8 @@
 
   --border-radius-control: 6px;
 
-  --font-family-base: 'Manrope', sans-serif;
-  --font-family-monospace: 'Spline Sans Mono', monospace;
+  --font-family-base: "Manrope", sans-serif;
+  --font-family-monospace: "Spline Sans Mono", monospace;
 
   --font-size-base: 14px;
   --font-weigh-base: 500;
@@ -46,8 +46,10 @@
 
   --contour-offset: 4px;
 
-  --btn-shape-shadow: inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
-  --btn-group-shape-shadow: inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
+  --btn-shape-shadow:
+    inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
+  --btn-group-shape-shadow:
+    inset 0px -3px 0px rgba(36, 34, 61, 0.12), inset 0px 3px 0px rgba(255, 255, 255, 0.4);
 
   --btn-switcher-bg: linear-gradient(180deg, #a1e69c 0%, #d0f5b0 100%);
   --btn-switcher-option-color: var(--txt-01);
@@ -72,7 +74,7 @@
   --pl-dropdown-options-bg: #fff;
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --color-div-grey: #232329;
   --color-div-bw: #000000;
   --color-div-black: #000000;
@@ -106,7 +108,8 @@
   --control-mask-fill: var(--color-ic-01);
 
   --btn-shape-shadow: none;
-  --btn-group-shape-shadow: inset 0px -3px 0px rgba(13, 13, 15, 0.24), inset 0px 3px 0px rgba(255, 255, 255, 0.12);
+  --btn-group-shape-shadow:
+    inset 0px -3px 0px rgba(13, 13, 15, 0.24), inset 0px 3px 0px rgba(255, 255, 255, 0.12);
 
   --btn-switcher-bg: #5e5e70;
   --btn-switcher-option-color: var(--txt-03);
@@ -156,4 +159,4 @@ body {
   display: flex;
   flex-direction: column;
   gap: 24px;
-}
+}

package/src/assets/common.scss

@@ -12,68 +12,68 @@
 }
 
 .d-flex-column {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .flex-justify-center {
-    justify-content: center;
+  justify-content: center;
 }
 
 .flex-items-start {
-    align-items: flex-start;
+  align-items: flex-start;
 }
 
 .flex-self-start {
-    align-self: flex-start;
+  align-self: flex-start;
 }
 
 .flex-align-center {
-    align-items: center;
+  align-items: center;
 }
 
 .flex-grow {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .ui-focused-border {
-    --contour-color: var(--txt-01);
-    --label-color: var(--txt-01);
-    --contour-border-width: 1px;
-    --contour-box-shadow: none;
-    --label-offset-left-x: 8px;
-    --label-offset-right-x: 8px;
-    --prefix-color: var(--color-placeholder);
+  --contour-color: var(--txt-01);
+  --label-color: var(--txt-01);
+  --contour-border-width: 1px;
+  --contour-box-shadow: none;
+  --label-offset-left-x: 8px;
+  --label-offset-right-x: 8px;
+  --prefix-color: var(--color-placeholder);
 
-    &.error {
-        --contour-color: var(--txt-error);
-    }
+  &.error {
+    --contour-color: var(--txt-error);
+  }
 
-    &::after {
-        content: '';
-        position: absolute;
-        pointer-events: none;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 10;
-        border-radius: var(--border-radius-control);
-        border-width: var(--contour-border-width);
-        border-color: var(--contour-color);
-        border-style: solid;
-        box-shadow: var(--contour-box-shadow);
-    }
+  &::after {
+    content: "";
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    border-radius: var(--border-radius-control);
+    border-width: var(--contour-border-width);
+    border-color: var(--contour-color);
+    border-style: solid;
+    box-shadow: var(--contour-box-shadow);
+  }
 
-    &:focus-within:not(.error) {
-        --label-color: var(--txt-focus);
-        --contour-color: var(--border-color-focus);
-        --contour-border-width: 2px;
-        --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
-    }
+  &:focus-within:not(.error) {
+    --label-color: var(--txt-focus);
+    --contour-color: var(--border-color-focus);
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow);
+  }
 
-    &:focus-within.error {
-        --contour-border-width: 2px;
-        --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
-    }
-}
+  &:focus-within.error {
+    --contour-border-width: 2px;
+    --contour-box-shadow: 0 0 0 4px var(--color-error-shadow);
+  }
+}

package/src/assets/dropdown-list-item.scss

@@ -1,67 +1,67 @@
 @use "./mixins" as *;
 
 .dropdown-list-item {
-    padding: 8px 12px;
-    display: flex;
-    align-items: center;
-    min-height: 40px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
 
-    &__small {
-        padding: 4px 12px;
-        min-height: 32px;
-    }
+  &__small {
+    padding: 4px 12px;
+    min-height: 32px;
+  }
 
-    &__title-container {
-        display: flex;
-        margin-right: 8px;
-        flex-grow: 1;
-        flex-direction: column;
-    }
+  &__title-container {
+    display: flex;
+    margin-right: 8px;
+    flex-grow: 1;
+    flex-direction: column;
+  }
 
-    &__title {
-        line-height: 24px !important;
-        display: flex;
-        align-items: center;
-        word-break: break-word;
-    }
+  &__title {
+    line-height: 24px !important;
+    display: flex;
+    align-items: center;
+    word-break: break-word;
+  }
 
-    &__icon {
-        background-color: var(--control-mask-fill);
-        @include mask(url(./images/16_checkmark.svg), 16px);
-        min-width: 16px;
-        margin-top: 2px;
-    }
+  &__icon {
+    background-color: var(--control-mask-fill);
+    @include mask(url(./images/16_checkmark.svg), 16px);
+    min-width: 16px;
+    margin-top: 2px;
+  }
 
-    &.hovered-item {
-        background-color: var(--bg-elevated-02);
-    }
+  &.hovered-item {
+    background-color: var(--bg-elevated-02);
+  }
 
-    &:hover {
-        background-color: var(--btn-sec-hover-grey);
-        cursor: pointer;
-    }
+  &:hover {
+    background-color: var(--btn-sec-hover-grey);
+    cursor: pointer;
+  }
 
-    &:active {
-        background-color: var(--btn-sec-press-grey);
-    }
+  &:active {
+    background-color: var(--btn-sec-press-grey);
+  }
 
-    &__selected {
-        background-color: var(--color-active-select) !important;
-    }
+  &__selected {
+    background-color: var(--color-active-select) !important;
+  }
 
-    &__checkbox {
-        margin-right: 8px;
-        background-color: var(--control-mask-fill);
-        @include mask(url(./images/24_checkbox-dark-enabled-unchecked.svg), 24px);
-    }
+  &__checkbox {
+    margin-right: 8px;
+    background-color: var(--control-mask-fill);
+    @include mask(url(./images/24_checkbox-dark-enabled-unchecked.svg), 24px);
+  }
 
-    &__checkbox.checked {
-        margin-right: 8px;
-        background-color: red;
-        @include mask(url(./images/24_checkbox-dark-enabled-checked.svg), 24px);
-    }
+  &__checkbox.checked {
+    margin-right: 8px;
+    background-color: red;
+    @include mask(url(./images/24_checkbox-dark-enabled-checked.svg), 24px);
+  }
 
-    &__description {
-        color: var(--txt-03);
-    }
-}
+  &__description {
+    color: var(--txt-03);
+  }
+}

package/src/assets/dropdown-tab-item.scss

@@ -1,10 +1,10 @@
-.dropdown-tab-item{
+.dropdown-tab-item {
   display: flex;
   margin-right: 2px;
   padding: 13px 12px;
   border-bottom: 2px solid var(--color-div-grey);
 
-  &.hovered-item{
+  &.hovered-item {
     border-bottom: 2px solid var(--border-color-focus);
   }
 
@@ -13,7 +13,7 @@
     border-bottom: 2px solid var(--border-color-focus);
   }
 
-  &__title{
+  &__title {
     text-wrap: nowrap;
   }
-}
+}

package/src/assets/icons.scss

@@ -92,4 +92,4 @@
   }
 
   /* End of deprecated */
-}
+}

package/src/assets/input-range.scss

@@ -1,34 +1,33 @@
 .ui-input-range {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  background: var(--bg-elevated-01);
+  width: 56px;
+  padding: 6px 4px;
+  position: relative;
 
+  input {
+    outline: none;
+    border: none;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 6px;
     background: var(--bg-elevated-01);
-    width: 56px;
-    padding: 6px 4px;
-    position: relative;
+    width: 100%;
+    padding: 0;
+  }
 
-    input {
-        outline: none;
-        border: none;
-        display: flex;
-        background: var(--bg-elevated-01);
-        width: 100%;
-        padding: 0;
-    }
+  input:first-child {
+    text-align: right;
+  }
 
-    input:first-child {
-        text-align: right;
-    }
+  input:last-child {
+    text-align: left;
+  }
 
-    input:last-child {
-        text-align: left;
-    }
-
-    &__separator {
-        color: var(--txt-01);
-        min-width: 12px;
-        text-align: center;
-    }
-}
+  &__separator {
+    color: var(--txt-01);
+    min-width: 12px;
+    text-align: center;
+  }
+}

package/src/assets/layout.scss

@@ -3,4 +3,4 @@
 //   &:hover {
 //     outline: 1px solid #33333322;
 //   }
-// }
+// }

package/src/assets/masks.scss

@@ -114,4 +114,4 @@
   }
 
   /* End of deprecated */
-}
+}