@milaboratories/uikit 2.10.15 → 2.10.16

package/src/components/PlBtnPrimary/pl-btn-primary.scss

@@ -9,11 +9,11 @@
     --color-btn-background: var(--color-primary-default);
     --btn-disabled-bg: var(--color-dis-01);
     --shape-shadow: var(--btn-shape-shadow);
-  
+
     background-color: var(--color-btn-background);
     border: none;
     min-width: 160px;
-  
+
     --append-shadow: inset 0 0 0 1px #110529;
   }
 

package/src/components/PlBtnSecondary/PlBtnSecondary.vue

@@ -3,14 +3,14 @@
  * Secondary button
  */
 export default {
-  name: 'PlBtnSecondary',
+  name: "PlBtnSecondary",
 };
 </script>
 
 <script lang="ts" setup>
-import './pl-btn-secondary.scss';
-import type { MaskIconName16, Size } from '../../types';
-import BtnBase from '../../base/BtnBase.vue';
+import "./pl-btn-secondary.scss";
+import type { MaskIconName16, Size } from "../../types";
+import BtnBase from "../../base/BtnBase.vue";
 
 const props = defineProps<{
   /**

package/src/components/PlBtnSecondary/index.ts

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

package/src/components/PlBtnSecondary/pl-btn-secondary.scss

@@ -7,7 +7,7 @@
     border: 1px solid var(--color-border);
     background: transparent;
     min-width: 160px;
-  
+
     --color-border: var(--color-border-default);
     --color-text: var(--txt-01);
     --color-btn-hover: var(--btn-sec-hover-grey);

package/src/components/PlBtnSplit/PlBtnSplit.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="M = unknown">
-import { deepEqual } from '@milaboratories/helpers';
-import { computed, reactive, ref, unref, watch } from 'vue';
-import { useElementPosition } from '../../composition/usePosition';
-import { normalizeListOptions } from '../../helpers/utils';
-import type { ListOption } from '../../types';
-import DropdownListItem from '../DropdownListItem.vue';
-import { PlIcon16 } from '../PlIcon16';
+import { deepEqual } from "@milaboratories/helpers";
+import { computed, reactive, ref, unref, watch } from "vue";
+import { useElementPosition } from "../../composition/usePosition";
+import { normalizeListOptions } from "../../helpers/utils";
+import type { ListOption } from "../../types";
+import DropdownListItem from "../DropdownListItem.vue";
+import { PlIcon16 } from "../PlIcon16";
 
-import './pl-btn-split.scss';
+import "./pl-btn-split.scss";
 
 const props = defineProps<{
   /**
@@ -26,7 +26,7 @@ const props = defineProps<{
   loading?: boolean;
 }>();
 
-const emits = defineEmits(['click']);
+const emits = defineEmits(["click"]);
 
 const model = defineModel<M>({ required: true });
 
@@ -46,9 +46,9 @@ defineExpose({
 });
 
 const optionsStyle = reactive({
-  top: '0px',
-  left: '0px',
-  width: '0px',
+  top: "0px",
+  left: "0px",
+  width: "0px",
 });
 
 watch(
@@ -57,13 +57,13 @@ watch(
     if (el) {
       const rect = el.getBoundingClientRect();
       data.optionsHeight = rect.height;
-      window.dispatchEvent(new CustomEvent('adjust'));
+      window.dispatchEvent(new CustomEvent("adjust"));
     }
   },
   { immediate: true },
 );
 
-const iconName = computed(() => (data.open ? 'chevron-up' : 'chevron-down'));
+const iconName = computed(() => (data.open ? "chevron-up" : "chevron-down"));
 
 const selectedIndex = computed(() => {
   return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));
@@ -80,7 +80,11 @@ const items = computed(() =>
 
 const isLoadingOptions = computed(() => props.loading || props.options === undefined);
 
-const actionName = computed(() => items.value.find((o) => deepEqual(o.value, model.value))?.label ?? (props.options === undefined ? '...' : ''));
+const actionName = computed(
+  () =>
+    items.value.find((o) => deepEqual(o.value, model.value))?.label ??
+    (props.options === undefined ? "..." : ""),
+);
 
 useElementPosition(root, (pos) => {
   const focusWidth = 3;
@@ -88,13 +92,13 @@ useElementPosition(root, (pos) => {
   const downTopOffset = pos.top + pos.height + focusWidth;
 
   if (downTopOffset + data.optionsHeight > pos.clientHeight) {
-    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + 'px';
+    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + "px";
   } else {
-    optionsStyle.top = downTopOffset + 'px';
+    optionsStyle.top = downTopOffset + "px";
   }
 
-  optionsStyle.left = pos.left + 'px';
-  optionsStyle.width = pos.width + 'px';
+  optionsStyle.left = pos.left + "px";
+  optionsStyle.width = pos.width + "px";
 });
 
 const selectOption = (v: M | undefined) => {
@@ -104,17 +108,22 @@ const selectOption = (v: M | undefined) => {
 };
 
 function emitEnter() {
-  emits('click');
+  emits("click");
 }
 
-const handleKeydown = (e: { code: string; preventDefault(): void; stopPropagation(): void; target: EventTarget | null }) => {
-  if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {
+const handleKeydown = (e: {
+  code: string;
+  preventDefault(): void;
+  stopPropagation(): void;
+  target: EventTarget | null;
+}) => {
+  if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code)) {
     return;
   } else {
     e.preventDefault();
   }
 
-  if (e.target === buttonAction.value && e.code === 'Enter') {
+  if (e.target === buttonAction.value && e.code === "Enter") {
     emitEnter();
     return;
   }
@@ -122,13 +131,13 @@ const handleKeydown = (e: { code: string; preventDefault(): void; stopPropagatio
   const { open, activeIndex } = data;
 
   if (!open && e.target === menuActivator.value) {
-    if (e.code === 'Enter') {
+    if (e.code === "Enter") {
       data.open = true;
     }
     return;
   }
 
-  if (e.code === 'Escape') {
+  if (e.code === "Escape") {
     data.open = false;
     root.value?.focus();
   }
@@ -141,13 +150,13 @@ const handleKeydown = (e: { code: string; preventDefault(): void; stopPropagatio
     return;
   }
 
-  if (e.code === 'Enter') {
+  if (e.code === "Enter") {
     selectOption(filtered.find((it) => it.index === activeIndex)?.value);
   }
 
   const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;
 
-  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
+  const delta = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
 
   const newIndex = Math.abs(localIndex + delta + length) % length;
 
@@ -179,7 +188,12 @@ const onFocusOut = (event: FocusEvent) => {
     >
       {{ actionName }}
     </div>
-    <div ref="menuActivator" class="pl-btn-split__icon-container d-flex align-center justify-center" tabindex="0" @click="data.open = !data.open">
+    <div
+      ref="menuActivator"
+      class="pl-btn-split__icon-container d-flex align-center justify-center"
+      tabindex="0"
+      @click="data.open = !data.open"
+    >
       <PlIcon16 v-if="isLoadingOptions" name="loading" />
       <PlIcon16 v-else :name="iconName" class="pl-btn-split__icon" />
     </div>

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

@@ -1,53 +1,53 @@
-import { mount } from '@vue/test-utils';
-import { describe, it, expect, vi } from 'vitest';
-import PlBtnSplit from '../PlBtnSplit.vue';
+import { mount } from "@vue/test-utils";
+import { describe, it, expect, vi } from "vitest";
+import PlBtnSplit from "../PlBtnSplit.vue";
 
-describe('PlBtnSplit.vue', () => {
-  it('Renders correctly with options', () => {
+describe("PlBtnSplit.vue", () => {
+  it("Renders correctly with options", () => {
     const wrapper = mount(PlBtnSplit, {
       props: {
         options: [
-          { label: 'Option 1', value: 'opt1' },
-          { label: 'Option 2', value: 'opt2' },
+          { label: "Option 1", value: "opt1" },
+          { label: "Option 2", value: "opt2" },
         ],
         disabled: false,
-        modelValue: 'opt1',
+        modelValue: "opt1",
       },
     });
 
-    expect(wrapper.text()).toContain('Option 1');
+    expect(wrapper.text()).toContain("Option 1");
   });
 
-  it('Toggles dropdown on menu activator click', async () => {
+  it("Toggles dropdown on menu activator click", async () => {
     const wrapper = mount(PlBtnSplit, {
       props: {
-        modelValue: 'opt1',
+        modelValue: "opt1",
         options: [
-          { label: 'Option 1', value: 'opt1' },
-          { label: 'Option 2', value: 'opt2' },
+          { label: "Option 1", value: "opt1" },
+          { label: "Option 2", value: "opt2" },
         ],
       },
     });
 
-    const menuActivator = wrapper.find('.pl-btn-split__icon-container');
+    const menuActivator = wrapper.find(".pl-btn-split__icon-container");
 
     console.log(menuActivator);
-    await menuActivator.trigger('click');
+    await menuActivator.trigger("click");
 
-    const dropdown = document.body.querySelector('.pl-dropdown__options');
+    const dropdown = document.body.querySelector(".pl-dropdown__options");
     expect(dropdown).toBeTruthy();
-    expect(dropdown?.textContent).toContain('Option 1');
-    expect(dropdown?.textContent).not.toContain('Option 3');
+    expect(dropdown?.textContent).toContain("Option 1");
+    expect(dropdown?.textContent).not.toContain("Option 3");
 
     // Hide dropdown on focusout
-    wrapper.trigger('focusout');
+    wrapper.trigger("focusout");
     await wrapper.vm.$nextTick();
 
     // Убедимся, что dropdown закрылся
-    expect(document.body.querySelector('.pl-dropdown__options')).toBeFalsy();
+    expect(document.body.querySelector(".pl-dropdown__options")).toBeFalsy();
   });
 
-  it('Emits click event when button is clicked', async () => {
+  it("Emits click event when button is clicked", async () => {
     const clickHandler = vi.fn();
 
     const wrapper = mount(PlBtnSplit, {
@@ -60,65 +60,65 @@ describe('PlBtnSplit.vue', () => {
       },
     });
 
-    const button = wrapper.find('.pl-btn-split__title');
-    await button.trigger('click');
-    expect(wrapper.emitted('click')).toBeTruthy();
+    const button = wrapper.find(".pl-btn-split__title");
+    await button.trigger("click");
+    expect(wrapper.emitted("click")).toBeTruthy();
     expect(clickHandler).toHaveBeenCalled();
   });
 
-  it('Updates modelValue on option select', async () => {
+  it("Updates modelValue on option select", async () => {
     const wrapper = mount(PlBtnSplit, {
       props: {
-        modelValue: 'opt1',
+        modelValue: "opt1",
         options: [
-          { label: 'Option 1', value: 'opt1' },
-          { label: 'Option 2', value: 'opt2' },
+          { label: "Option 1", value: "opt1" },
+          { label: "Option 2", value: "opt2" },
         ],
       },
     });
 
-    await wrapper.setProps({ modelValue: 'opt2' });
-    expect(wrapper.text()).toContain('Option 2');
+    await wrapper.setProps({ modelValue: "opt2" });
+    expect(wrapper.text()).toContain("Option 2");
 
     await wrapper.setProps({ modelValue: undefined });
-    expect(wrapper.text()).toContain('');
+    expect(wrapper.text()).toContain("");
   });
 
-  it('Handles keyboard navigation correctly', async () => {
+  it("Handles keyboard navigation correctly", async () => {
     const wrapper = mount(PlBtnSplit, {
       props: {
-        modelValue: 'opt1',
+        modelValue: "opt1",
         options: [
-          { label: 'Option 1', value: 'opt1' },
-          { label: 'Option 2', value: 'opt2' },
+          { label: "Option 1", value: "opt1" },
+          { label: "Option 2", value: "opt2" },
         ],
       },
     });
 
-    const root = wrapper.find('.pl-btn-split');
-    await root.trigger('keydown', { code: 'ArrowDown' });
+    const root = wrapper.find(".pl-btn-split");
+    await root.trigger("keydown", { code: "ArrowDown" });
 
     expect(wrapper.vm.data.activeIndex).toBe(0);
 
-    await root.trigger('keydown', { code: 'ArrowDown' });
+    await root.trigger("keydown", { code: "ArrowDown" });
 
     expect(wrapper.vm.data.activeIndex).toBe(1);
 
-    await root.trigger('keydown', { code: 'Enter' });
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['opt2']);
+    await root.trigger("keydown", { code: "Enter" });
+    expect(wrapper.emitted("update:modelValue")![0]).toEqual(["opt2"]);
   });
 
   it('Loading status by empty options and display dots "..."', async () => {
     const wrapper = mount(PlBtnSplit, {
       props: {
-        modelValue: 'opt1',
+        modelValue: "opt1",
         options: undefined,
       },
     });
 
-    expect(wrapper.classes().includes('loading')).toBe(true);
-    const button = wrapper.find('.pl-btn-split__title');
-    expect(button.text()).toBe('...');
+    expect(wrapper.classes().includes("loading")).toBe(true);
+    const button = wrapper.find(".pl-btn-split__title");
+    expect(button.text()).toBe("...");
   });
 
   it('Loading status by empty options and empty model display dots "..."', async () => {
@@ -129,51 +129,51 @@ describe('PlBtnSplit.vue', () => {
       },
     });
 
-    expect(wrapper.classes().includes('loading')).toBe(true);
-    expect(wrapper.classes().includes('disabled')).toBe(true);
-    const button = wrapper.find('.pl-btn-split__title');
-    expect(button.text()).toBe('...');
+    expect(wrapper.classes().includes("loading")).toBe(true);
+    expect(wrapper.classes().includes("disabled")).toBe(true);
+    const button = wrapper.find(".pl-btn-split__title");
+    expect(button.text()).toBe("...");
   });
 
-  it('No dots with undefined model', async () => {
+  it("No dots with undefined model", async () => {
     const wrapper = mount(PlBtnSplit, {
       props: {
         modelValue: undefined,
         options: [
-          { label: 'Option 1', value: 'opt1' },
-          { label: 'Option 2', value: 'opt2' },
+          { label: "Option 1", value: "opt1" },
+          { label: "Option 2", value: "opt2" },
         ],
       },
     });
 
-    expect(wrapper.classes().includes('loading')).toBe(false);
-    expect(wrapper.classes().includes('disabled')).toBe(false);
-    const button = wrapper.find('.pl-btn-split__title');
-    expect(button.text()).toBe('');
+    expect(wrapper.classes().includes("loading")).toBe(false);
+    expect(wrapper.classes().includes("disabled")).toBe(false);
+    const button = wrapper.find(".pl-btn-split__title");
+    expect(button.text()).toBe("");
   });
 
-  it('Loading props', async () => {
+  it("Loading props", async () => {
     const wrapper = mount(PlBtnSplit, {
       props: {
-        modelValue: 'opt1',
+        modelValue: "opt1",
         loading: true,
         options: [
-          { label: 'Option 1', value: 'opt1' },
-          { label: 'Option 2', value: 'opt2' },
+          { label: "Option 1", value: "opt1" },
+          { label: "Option 2", value: "opt2" },
         ],
       },
     });
 
-    expect(wrapper.classes().includes('loading')).toBe(true);
-    expect(wrapper.classes().includes('disabled')).toBe(true);
-    const button = wrapper.find('.pl-btn-split__title');
-    expect(button.text()).toBe('Option 1');
+    expect(wrapper.classes().includes("loading")).toBe(true);
+    expect(wrapper.classes().includes("disabled")).toBe(true);
+    const button = wrapper.find(".pl-btn-split__title");
+    expect(button.text()).toBe("Option 1");
 
     wrapper.setProps({ loading: false });
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.classes().includes('loading')).toBe(false);
-    expect(wrapper.classes().includes('disabled')).toBe(false);
-    expect(button.text()).toBe('Option 1');
+    expect(wrapper.classes().includes("loading")).toBe(false);
+    expect(wrapper.classes().includes("disabled")).toBe(false);
+    expect(button.text()).toBe("Option 1");
   });
 });

package/src/components/PlBtnSplit/index.ts

@@ -1,4 +1,4 @@
-import PlBtnSplit from './PlBtnSplit.vue';
+import PlBtnSplit from "./PlBtnSplit.vue";
 
 export { PlBtnSplit };
 export default PlBtnSplit;

package/src/components/PlBtnSplit/pl-btn-split.scss

@@ -1,92 +1,89 @@
 @mixin btn-focus {
-    &:focus-visible {
-        position: relative;
-        outline: none;
-
-        &::after {
-            content: '';
-            position: absolute;
-            inset: -1px;
-            border: 2px solid var(--border-color-focus);
-            border-radius: 6px;
-            z-index: 2;
-        }
+  &:focus-visible {
+    position: relative;
+    outline: none;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: -1px;
+      border: 2px solid var(--border-color-focus);
+      border-radius: 6px;
+      z-index: 2;
     }
+  }
 }
 
 .pl-btn-split {
-    $root: &;
-
-    --border-color: var(--border-color-default);
+  $root: &;
 
-    height: 40px;
-    min-width: 160px;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
-    cursor: pointer;
+  --border-color: var(--border-color-default);
 
+  height: 40px;
+  min-width: 160px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  cursor: pointer;
 
+  &.disabled,
+  &.loading {
+    pointer-events: none;
+    --border-color: var(--border-color-div-grey);
+  }
 
-    &.disabled,
-    &.loading {
-        pointer-events: none;
-        --border-color: var(--border-color-div-grey);
+  &.loading {
+    .mask-loading {
+      animation: spin 2.5s linear infinite;
     }
-
-    &.loading {
-        .mask-loading {
-            animation: spin 2.5s linear infinite;
-        }
+  }
+
+  &__title {
+    padding: 8px 14px;
+    height: 100%;
+    color: var(--border-color);
+    transition: all 0.1s ease-in-out;
+    @include btn-focus;
+
+    &:hover {
+      border-radius: 6px;
+      background-color: var(--btn-sec-hover-grey);
     }
 
-    &__title {
-        padding: 8px 14px;
-        height: 100%;
-        color: var(--border-color);
-        transition: all .1s ease-in-out;
-        @include btn-focus;
-
-        &:hover {
-            border-radius: 6px;
-            background-color: var(--btn-sec-hover-grey);
-        }
-
-        &:active {
-            border-radius: 6px;
-            background-color: var(--btn-sec-press-grey);
-        }
+    &:active {
+      border-radius: 6px;
+      background-color: var(--btn-sec-press-grey);
     }
-
-    &__icon,
-    .mask-loading {
-        --icon-color: var(--border-color);
+  }
+
+  &__icon,
+  .mask-loading {
+    --icon-color: var(--border-color);
+  }
+
+  &__icon-container {
+    width: 36px;
+    height: 100%;
+    position: relative;
+    transition: all 0.1s ease-in-out;
+    @include btn-focus;
+
+    &:hover {
+      border-radius: 6px;
+      background-color: var(--btn-sec-hover-grey);
     }
 
-    &__icon-container {
-        width: 36px;
-        height: 100%;
-        position: relative;
-        transition: all .1s ease-in-out;
-        @include btn-focus;
-
-
-        &:hover {
-            border-radius: 6px;
-            background-color: var(--btn-sec-hover-grey);
-        }
-
-        &:active {
-            border-radius: 6px;
-            background-color: var(--btn-sec-press-grey);
-        }
+    &:active {
+      border-radius: 6px;
+      background-color: var(--btn-sec-press-grey);
+    }
 
-        &::before {
-            content: '';
-            background: var(--border-color);
-            height: 26px;
-            position: absolute;
-            left: 0;
-            width: 1px;
-        }
+    &::before {
+      content: "";
+      background: var(--border-color);
+      height: 26px;
+      position: absolute;
+      left: 0;
+      width: 1px;
     }
-}
+  }
+}