@milaboratories/uikit 2.10.15 → 2.10.16

package/src/assets/mixins.scss

@@ -1,4 +1,4 @@
-@forward './base-btn';
+@forward "./base-btn";
 
 @mixin mask-var($bg) {
   -webkit-mask-image: $bg;
@@ -13,7 +13,7 @@
 }
 
 @mixin vendor-prefix($name, $value) {
-  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
+  @each $vendor in ("-webkit-", "-moz-", "-ms-", "-o-", "") {
     #{$vendor}#{$name}: #{$value};
   }
 }
@@ -23,9 +23,7 @@
 
   @if $h ==null {
     height: $w;
-  }
-
-  @else {
+  } @else {
     height: $h;
   }
 }
@@ -36,9 +34,7 @@
 
   @if $h ==null {
     height: $w;
-  }
-
-  @else {
+  } @else {
     height: $h;
   }
 }
@@ -50,9 +46,7 @@
 
   @if $h ==null {
     height: $w;
-  }
-
-  @else {
+  } @else {
     height: $h;
   }
 }
@@ -70,9 +64,7 @@
 
   @if $h ==null {
     height: $w;
-  }
-
-  @else {
+  } @else {
     height: $h;
   }
 }
@@ -116,7 +108,7 @@
   position: relative;
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: $offset;
     left: $offset;
@@ -155,7 +147,7 @@
   border-bottom-left-radius: 4px;
   background: var(--bg-elevated-01);
 
-  >span {
+  > span {
     overflow: hidden;
     white-space: pre;
     text-overflow: ellipsis;
@@ -207,4 +199,4 @@
     border: 2px solid transparent;
     border-right: 1px solid transparent;
   }
-}
+}

package/src/assets/scroll.scss

@@ -15,8 +15,8 @@
   right: 0;
   bottom: 0;
   width: var(--v-scroll-width);
-  border: 1px solid #E1E3EB;
-  background-color: #FFF;
+  border: 1px solid #e1e3eb;
+  background-color: #fff;
   transition-delay: 1s;
   z-index: 10;
   &__scrollbar {
@@ -24,7 +24,7 @@
     left: 0;
     right: 0;
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 2px;
       left: 2px;
@@ -43,8 +43,8 @@
   right: 0;
   bottom: 0;
   height: var(--v-scroll-width);
-  border: 1px solid #E1E3EB;
-  background-color: #FFF;
+  border: 1px solid #e1e3eb;
+  background-color: #fff;
   transition-delay: 1s;
   z-index: 9;
   &__scrollbar {
@@ -52,7 +52,7 @@
     top: 0;
     bottom: 0;
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 2px;
       left: 2px;

package/src/assets/slider.scss

@@ -1,7 +1,7 @@
 @use "./mixins" as *;
 
 .ui-slider {
-  --progress-bg: linear-gradient(to right, #A1E59C, #D0F5B0);
+  --progress-bg: linear-gradient(to right, #a1e59c, #d0f5b0);
   --border-color: var(--color-border-default);
   --padding-gap: 8px; // half of thumb width
 
@@ -122,8 +122,10 @@
     width: 16px;
     height: 16px;
     border: 1px solid var(--color-border-default);
-    background: var(--color-ic-00, #FFF);
-    box-shadow: 0 2px 6px 0 rgba(17, 5, 41, 0.16), 0px -3px 0px 0px rgba(36, 34, 61, 0.12) inset;
+    background: var(--color-ic-00, #fff);
+    box-shadow:
+      0 2px 6px 0 rgba(17, 5, 41, 0.16),
+      0px -3px 0px 0px rgba(36, 34, 61, 0.12) inset;
   }
 
   &__thumb:active {
@@ -225,7 +227,6 @@
   }
 
   &__disabled {
-
     *,
     *::before,
     *::after {
@@ -238,4 +239,4 @@
       opacity: 0.5;
     }
   }
-}
+}

package/src/assets/sortable.scss

@@ -7,4 +7,4 @@
   &__animate {
     transition: transform 0.15s ease-in-out;
   }
-}
+}

package/src/assets/theme-switcher.scss

@@ -13,12 +13,12 @@
 
   > div {
     background-color: var(--theme-switcher-icon-color);
-    @include mask(url('./images/24_dark-mode.svg'), 24px);
+    @include mask(url("./images/24_dark-mode.svg"), 24px);
   }
 
   &.dark {
     > div {
-      @include mask(url('./images/24_light-mode.svg'), 24px);
+      @include mask(url("./images/24_light-mode.svg"), 24px);
     }
 
     &:hover {

package/src/assets/typography.scss

@@ -67,12 +67,15 @@ des {
 mark {
   padding: 2px 4px;
   border-radius: 4px;
-  background: #D7F5C9;
+  background: #d7f5c9;
   line-height: 20px;
 }
 
 code {
-  font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
+  font-feature-settings:
+    "ss11" on,
+    "ss15" on,
+    "ss17" on;
   font-family: var(--font-family-monospace);
   font-size: 14px;
   font-style: normal;
@@ -111,8 +114,8 @@ blockquote {
 .text-h3 {
   color: var(--txt-01);
   font-feature-settings:
-    'clig' off,
-    'liga' off;
+    "clig" off,
+    "liga" off;
   font-family: RoadRadio;
   font-size: 48px;
   font-style: normal;
@@ -200,10 +203,10 @@ blockquote {
 .text-mono-m {
   color: var(--txt-01);
   font-feature-settings:
-    'ss17' on,
-    'ss15' on,
-    'ss11' on;
-  font-family: 'Spline Sans Mono';
+    "ss17" on,
+    "ss15" on,
+    "ss11" on;
+  font-family: "Spline Sans Mono";
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -213,10 +216,10 @@ blockquote {
 .text-mono-s {
   color: var(--txt-01);
   font-feature-settings:
-    'ss17' on,
-    'ss15' on,
-    'ss11' on;
-  font-family: 'Spline Sans Mono';
+    "ss17" on,
+    "ss15" on,
+    "ss11" on;
+  font-family: "Spline Sans Mono";
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
@@ -252,4 +255,4 @@ blockquote {
   font-style: normal;
   font-weight: 500;
   line-height: 16px;
-}
+}

package/src/assets/ui.scss

@@ -1,19 +1,19 @@
-@use './base';
-@use './fonts';
-@use './common';
-@use './utils';
-@use './animations';
-@use './icons';
-@use './masks';
-@use './slider';
-@use './theme-switcher';
-@use './progress-bar';
-@use './scroll';
-@use './dropdown-list-item';
-@use './typography';
-@use './dropdown-tab-item';
-@use './input-range';
-@use './sortable';
-@use './layout';
-@use './css-utils';
-@use './file-base-input';
+@use "./base";
+@use "./fonts";
+@use "./common";
+@use "./utils";
+@use "./animations";
+@use "./icons";
+@use "./masks";
+@use "./slider";
+@use "./theme-switcher";
+@use "./progress-bar";
+@use "./scroll";
+@use "./dropdown-list-item";
+@use "./typography";
+@use "./dropdown-tab-item";
+@use "./input-range";
+@use "./sortable";
+@use "./layout";
+@use "./css-utils";
+@use "./file-base-input";

package/src/assets/utils.scss

@@ -24,7 +24,7 @@ span.ripple {
   position: relative;
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;
@@ -44,18 +44,19 @@ span.ripple {
 
   --offset-left-x: calc(var(--label-offset-left-x) + var(--contour-offset));
 
-  clip-path:
-    polygon(0 0,
-      var(--offset-left-x) 0,
-      var(--offset-left-x) 12px,
-      var(--label-offset-right-x) 12px,
-      var(--label-offset-right-x) 0,
-      100% 0,
-      100% 100%,
-      0 100%,
-      0 0);
-
-  >div {
+  clip-path: polygon(
+    0 0,
+    var(--offset-left-x) 0,
+    var(--offset-left-x) 12px,
+    var(--label-offset-right-x) 12px,
+    var(--label-offset-right-x) 0,
+    100% 0,
+    100% 100%,
+    0 100%,
+    0 0
+  );
+
+  > div {
     position: absolute;
     top: var(--contour-offset);
     left: var(--contour-offset);
@@ -111,22 +112,21 @@ a.btn-link {
   }
 }
 
-
 .info {
   display: block;
   margin: 0 4px;
-  @include icon(url('./images/16_info.svg'), 16px);
+  @include icon(url("./images/16_info.svg"), 16px);
 
   [data-theme="dark"] & {
-    @include icon(url('./images/16_info-dark.svg'), 16px);
+    @include icon(url("./images/16_info-dark.svg"), 16px);
   }
 }
 
 .checkmark {
-  @include icon(url('./images/16_checkmark.svg'), 16px);
+  @include icon(url("./images/16_checkmark.svg"), 16px);
 
   [data-theme="dark"] & {
-    @include icon(url('./images/16_checkmark-dark.svg'), 16px);
+    @include icon(url("./images/16_checkmark-dark.svg"), 16px);
   }
 }
 
@@ -194,4 +194,4 @@ a.btn-link {
   .gap-#{$i} {
     gap: #{$i}px;
   }
-}
+}

package/src/assets/variables.scss

@@ -32,7 +32,7 @@
   --btn-active-select: rgba(99, 224, 36, 0.24);
   --btn-switcher: linear-gradient(180deg, #a1e59c 0%, #d0f5b0 100%);
 
-  --btn-accent-positive-500: #ECFBE5;
+  --btn-accent-positive-500: #ecfbe5;
   //disable
   --dis-00: #ffffff;
   --dis-01: light-dark(#cfd1db, #3d3d42);
@@ -41,7 +41,7 @@
   --bg-base-light: #f7f8fa;
   --bg-elevated-01: #ffffff;
   --bg-elevated-02: #e1e3eb;
-  --bg-error: #FFF5F5;
+  --bg-error: #fff5f5;
   //filled
   --filled-V-BG: #d0f0c0;
   --filled-D-BG: #ffcecc;
@@ -64,7 +64,7 @@
   --gradient-red: linear-gradient(0deg, #ffd5cc 0%, #ff9494 100%);
   --gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);
   --TT-gradient-violet: linear-gradient(180deg, #bca3ff 0%, #e5e5ff 100%);
-  --gradient-light-lime: linear-gradient(180deg, #EBFFEB 0%, transparent 100%);
+  --gradient-light-lime: linear-gradient(180deg, #ebffeb 0%, transparent 100%);
   //box shadow
   --shadow-l: 0px 8px 16px -4px rgba(15, 36, 77, 0.16), 0px 12px 32px -4px rgba(15, 36, 77, 0.16);
   // Layout
@@ -86,18 +86,18 @@
   --scrollbar-width: 6px;
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --txt-00: #ffffff;
-  --txt-01: #FFFFFF;
+  --txt-01: #ffffff;
   --txt-02: #adaeb8;
   --txt-03: #60616b;
-  --txt-mask: #3D3D42;
+  --txt-mask: #3d3d42;
   --txt-focus: #87e087;
   --txt-error: #ff5c5c;
   --txt-link: #9470ff;
   //icon
   --ic-00: #ffffff;
-  --ic-01: #FFFFFF;
+  --ic-01: #ffffff;
   --ic-02: #60616b;
   --ic-accent: #87e087;
   //border
@@ -121,13 +121,13 @@
   --btn-switcher: #5e5e70;
   //disable
   --dis-00: #65656b;
-  --dis-01: #3D3D42;
+  --dis-01: #3d3d42;
   //background
   --bg-base-dark: #0d0d0f;
   --bg-base-light: #0d0d0f;
   --bg-elevated-01: #1b1b1f;
   --bg-elevated-02: #2d2d33;
-  --bg-error: #FFF5F5;
+  --bg-error: #fff5f5;
   //filled
   --filled-V-BG: rgba(66, 184, 66, 0.4);
   --filled-D-BG: rgba(229, 83, 229, 0.4);
@@ -149,5 +149,4 @@
   --gradient-rose: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
   --gradient-red: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
   --gradient-violet: linear-gradient(0deg, #478063 0%, #2e4652 45.93%, #24223d 91.63%);
-
 }

package/src/base/BtnBase.vue

@@ -5,10 +5,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import type { MaskIconName16, Size } from '../types';
-import { computed, ref } from 'vue';
-import { PlMaskIcon16 } from '../components/PlMaskIcon16';
-import { useRipple } from '../composition/useRipple';
+import type { MaskIconName16, Size } from "../types";
+import { computed, ref } from "vue";
+import { PlMaskIcon16 } from "../components/PlMaskIcon16";
+import { useRipple } from "../composition/useRipple";
 
 const props = defineProps<{
   loading?: boolean;
@@ -23,8 +23,8 @@ const props = defineProps<{
 
 const btn = ref();
 
-const small = computed(() => props.small || props.size === 'small');
-const large = computed(() => props.large || props.size === 'large');
+const small = computed(() => props.small || props.size === "small");
+const large = computed(() => props.large || props.size === "large");
 
 useRipple(btn);
 </script>

package/src/colors/__tests__/colors.spec.ts

@@ -1,10 +1,10 @@
-import { describe, expect, test } from 'vitest';
-import { Gradient } from '../gradient';
-import { viridis } from '../palette';
-import { Color } from '../color';
+import { describe, expect, test } from "vitest";
+import { Gradient } from "../gradient";
+import { viridis } from "../palette";
+import { Color } from "../color";
 
-describe('Colors', () => {
-  test('gradients', () => {
+describe("Colors", () => {
+  test("gradients", () => {
     const viridis5colors = Gradient(viridis).split(5);
 
     viridis5colors.forEach((color, i) => {
@@ -13,12 +13,14 @@ describe('Colors', () => {
 
     const viridis15 = Gradient(viridis).split(15);
 
-    expect(viridis.map((it) => it + 'FF').join(',')).toEqual(viridis15.map((it) => it.hex.toUpperCase()).join(','));
+    expect(viridis.map((it) => it + "FF").join(",")).toEqual(
+      viridis15.map((it) => it.hex.toUpperCase()).join(","),
+    );
   });
 
-  test('categorical colors', () => {
-    const color = Color.categorical('lime_light');
+  test("categorical colors", () => {
+    const color = Color.categorical("lime_light");
 
-    expect(color.hex.toUpperCase()).toEqual('#CBEB67FF');
+    expect(color.hex.toUpperCase()).toEqual("#CBEB67FF");
   });
 });

package/src/colors/color.ts

@@ -1,4 +1,4 @@
-import { categoricalColors, type CategoricalColor } from './palette';
+import { categoricalColors, type CategoricalColor } from "./palette";
 
 /**
  * Represents a color with red, green, blue, and alpha channels.
@@ -10,7 +10,7 @@ import { categoricalColors, type CategoricalColor } from './palette';
  * @param {number} [a=1] - Alpha channel (0-1).
  */
 export function Color(r: number, g: number, b: number, a: number = 1) {
-  return new class {
+  return new (class {
     constructor(
       public readonly r: number,
       public readonly g: number,
@@ -19,10 +19,12 @@ export function Color(r: number, g: number, b: number, a: number = 1) {
     ) {}
 
     get hex() {
-      const hexR = r.toString(16).padStart(2, '0');
-      const hexG = g.toString(16).padStart(2, '0');
-      const hexB = b.toString(16).padStart(2, '0');
-      const hexA = Math.round(a * 255).toString(16).padStart(2, '0'); // Alpha in 2-digit hex
+      const hexR = r.toString(16).padStart(2, "0");
+      const hexG = g.toString(16).padStart(2, "0");
+      const hexB = b.toString(16).padStart(2, "0");
+      const hexA = Math.round(a * 255)
+        .toString(16)
+        .padStart(2, "0"); // Alpha in 2-digit hex
 
       return `#${hexR}${hexG}${hexB}${hexA}`;
     }
@@ -38,15 +40,18 @@ export function Color(r: number, g: number, b: number, a: number = 1) {
     toJSON() {
       return this.hex;
     }
-  }(r, g, b, a);
+  })(r, g, b, a);
 }
 
 export type Color = ReturnType<typeof Color>;
 
 Color.fromHex = (hex: string): Color => {
-  hex = hex.replace('#', '');
+  hex = hex.replace("#", "");
 
-  let r: number, g: number, b: number, a: number = 1;
+  let r: number,
+    g: number,
+    b: number,
+    a: number = 1;
 
   if (hex.length === 6) {
     r = parseInt(hex.slice(0, 2), 16);
@@ -58,7 +63,7 @@ Color.fromHex = (hex: string): Color => {
     b = parseInt(hex.slice(4, 6), 16);
     a = parseInt(hex.slice(6, 8), 16) / 255;
   } else {
-    throw new Error('Invalid HEX color format.');
+    throw new Error("Invalid HEX color format.");
   }
 
   return Color(r, g, b, a);
@@ -68,11 +73,11 @@ Color.fromHex = (hex: string): Color => {
  * Parses a color string (attention: currently supports only HEX, @todo)
  */
 Color.fromString = (str: string) => {
-  if (str.startsWith('#')) {
+  if (str.startsWith("#")) {
     return Color.fromHex(str);
   }
 
-  throw Error('TODO: implement rgb(a), hsl');
+  throw Error("TODO: implement rgb(a), hsl");
 };
 
 Color.categorical = (name: CategoricalColor) => {

package/src/colors/gradient.ts

@@ -1,13 +1,16 @@
-import type { Palette } from './palette';
-import { palettes } from './palette';
-import { Color } from './color';
+import type { Palette } from "./palette";
+import { palettes } from "./palette";
+import { Color } from "./color";
 
 export type GradientSource = (string | Color)[] | Palette;
 
 Color.fromHex = (hex: string): Color => {
-  hex = hex.replace('#', '');
+  hex = hex.replace("#", "");
 
-  let r: number, g: number, b: number, a: number = 1;
+  let r: number,
+    g: number,
+    b: number,
+    a: number = 1;
 
   if (hex.length === 6) {
     r = parseInt(hex.slice(0, 2), 16);
@@ -19,7 +22,7 @@ Color.fromHex = (hex: string): Color => {
     b = parseInt(hex.slice(4, 6), 16);
     a = parseInt(hex.slice(6, 8), 16) / 255;
   } else {
-    throw new Error('Invalid HEX color format.');
+    throw new Error("Invalid HEX color format.");
   }
 
   return Color(r, g, b, a);
@@ -29,11 +32,11 @@ Color.fromHex = (hex: string): Color => {
  * Parses a color string (attention: currently supports only HEX, @todo)
  */
 Color.fromString = (str: string) => {
-  if (str.startsWith('#')) {
+  if (str.startsWith("#")) {
     return Color.fromHex(str);
   }
 
-  throw Error('TODO: implement rgb(a), hsl');
+  throw Error("TODO: implement rgb(a), hsl");
 };
 
 function lerp(a: number, b: number, t: number): number {
@@ -62,12 +65,12 @@ export function interpolateColor(color1: Color, color2: Color, t: number): Color
  * @returns {Color[]} Array of normalized Color objects.
  */
 export function normalizeGradient(raw: GradientSource): Color[] {
-  if (typeof raw === 'string') {
+  if (typeof raw === "string") {
     return palettes[raw].map((it) => Color.fromString(it));
   }
 
   return raw.map((it) => {
-    if (typeof it === 'string') {
+    if (typeof it === "string") {
       return Color.fromString(it);
     }
 
@@ -79,7 +82,7 @@ export function normalizeGradient(raw: GradientSource): Color[] {
  * Creates a gradient with utilities to sample or split colors.
  */
 export function Gradient(gradient: GradientSource) {
-  return new class {
+  return new (class {
     constructor(public readonly colors: Color[]) {}
 
     /**
@@ -88,8 +91,8 @@ export function Gradient(gradient: GradientSource) {
      * @param {number} t - A value in [0, 1] representing the position in the gradient.
      */
     fromInterval(t: number) {
-      if (t < 0) throw new Error('t must be greater than or equal to 0');
-      if (t > 1) throw new Error('t must be less than or equal to 1');
+      if (t < 0) throw new Error("t must be greater than or equal to 0");
+      if (t > 1) throw new Error("t must be less than or equal to 1");
 
       const colors = this.colors;
 
@@ -112,8 +115,8 @@ export function Gradient(gradient: GradientSource) {
      * @param {number} segments - Total number of segments.
      */
     getNthOf(n: number, segments: number) {
-      if (n <= 0) throw new Error('n must be greater than 0');
-      if (n > segments) throw Error('n must be lower or equal than count of segments');
+      if (n <= 0) throw new Error("n must be greater than 0");
+      if (n > segments) throw Error("n must be lower or equal than count of segments");
       return this.fromInterval((n - 1) / (segments - 1));
     }
 
@@ -121,7 +124,7 @@ export function Gradient(gradient: GradientSource) {
      * Splits the gradient into n evenly spaced colors.
      */
     split(n: number) {
-      if (n <= 0) throw new Error('n must be greater than 0');
+      if (n <= 0) throw new Error("n must be greater than 0");
 
       const colors: Color[] = [];
 
@@ -132,5 +135,5 @@ export function Gradient(gradient: GradientSource) {
 
       return colors;
     }
-  }(normalizeGradient(gradient));
+  })(normalizeGradient(gradient));
 }

package/src/colors/index.ts

@@ -1,3 +1,3 @@
-export * from './palette';
-export * from './color';
-export * from './gradient';
+export * from "./palette";
+export * from "./color";
+export * from "./gradient";