@milaboratories/uikit 2.2.3 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,8 +32,8 @@
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/helpers": "^1.6.6",
-    "@platforma-sdk/model": "^1.8.19"
+    "@platforma-sdk/model": "^1.10.2",
+    "@milaboratories/helpers": "^1.6.6"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/base.scss

@@ -168,4 +168,4 @@ body {
   display: flex;
   flex-direction: column;
   gap: 24px;
-}
+}

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

@@ -4,7 +4,6 @@
     padding: 8px 12px;
     display: flex;
     align-items: center;
-    // flex-direction: column;
     min-height: 40px;
 
     &__small {
@@ -13,9 +12,7 @@
     }
 
     &__title-container {
-        // height: 24px;
         display: flex;
-        // align-items: center;
         margin-right: 8px;
         flex-grow: 1;
         flex-direction: column;
@@ -39,10 +36,14 @@
     }
 
     &:hover {
-        background-color: var(--bg-elevated-02);
+        background-color: var(--btn-sec-hover-grey);
         cursor: pointer;
     }
 
+    &:active {
+        background-color: var(--btn-sec-press-grey);
+    }
+
     &__selected {
         background-color: var(--color-active-select) !important;
     }

package/src/assets/typography.scss

@@ -1,10 +1,9 @@
 h1 {
-  /* Title/H1 */
   font-family: var(--font-family-base);
   font-size: 64px;
   font-style: normal;
   font-weight: 400;
-  line-height: 72px; /* 112.5% */
+  line-height: 72px;
   letter-spacing: -1.28px;
   margin: 0;
 }
@@ -14,7 +13,7 @@ h2 {
   font-size: 40px;
   font-style: normal;
   font-weight: 500;
-  line-height: 48px; /* 120% */
+  line-height: 48px;
   letter-spacing: -0.8px;
   margin: 0;
 }
@@ -24,18 +23,19 @@ h3 {
   font-size: 28px;
   font-style: normal;
   font-weight: 500;
-  line-height: 32px; /* 114.286% */
+  line-height: 32px;
   letter-spacing: -0.56px;
   margin: 0;
 }
 
-h4, h5, h6 {
-  /* Title/Subtitle S */
+h4,
+h5,
+h6 {
   font-family: var(--font-family-base);
   font-size: 20px;
   font-style: normal;
   font-weight: 500;
-  line-height: 24px; /* 120% */
+  line-height: 24px;
   letter-spacing: -0.2px;
   margin: 0;
 }
@@ -73,7 +73,6 @@ mark {
 
 code {
   font-feature-settings: 'ss11' on, 'ss15' on, 'ss17' on;
-  /* Text/Monospace M */
   font-family: var(--font-family-monospace);
   font-size: 14px;
   font-style: normal;
@@ -185,6 +184,7 @@ blockquote {
   font-style: normal;
   font-weight: 600;
   line-height: 20px;
+  text-transform: capitalize;
 }
 
 .text-s-link {
@@ -252,4 +252,4 @@ blockquote {
   font-style: normal;
   font-weight: 500;
   line-height: 16px;
-}
+}

package/src/components/PlBtnSplit/PlBtnSplit.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts" generic="M = unknown">
+import { computed, reactive, ref, unref, watch } from 'vue';
+import './pl-btn-split.scss';
+import DropdownListItem from '../DropdownListItem.vue';
+import type { ListOption } from '@/types';
+import { useElementPosition } from '@/composition/usePosition';
+import { normalizeListOptions } from '@/helpers/utils';
+import { deepEqual } from '@milaboratories/helpers';
+import PlMaskIcon16 from '../PlMaskIcon16/PlMaskIcon16.vue';
+
+const props = defineProps<{
+  /**
+   * List of available options for the dropdown menu
+   */
+  options?: Readonly<ListOption<M>[]>;
+
+  /**
+   * If `true`, the dropdown component is disabled and cannot be interacted with.
+   */
+  disabled?: boolean;
+
+  /**
+   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.
+   */
+  loading?: boolean;
+}>();
+const emits = defineEmits(['click']);
+
+const model = defineModel<M>({ required: true });
+
+const root = ref<HTMLElement | undefined>();
+const list = ref<HTMLElement | undefined>();
+const menuActivator = ref<HTMLElement | undefined>();
+const buttonAction = ref<HTMLElement | undefined>();
+
+const data = reactive({
+  open: false,
+  optionsHeight: 0,
+  activeIndex: -1,
+});
+
+defineExpose({
+  data,
+});
+
+const optionsStyle = reactive({
+  top: '0px',
+  left: '0px',
+  width: '0px',
+});
+
+watch(
+  list,
+  (el) => {
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      data.optionsHeight = rect.height;
+      window.dispatchEvent(new CustomEvent('adjust'));
+    }
+  },
+  { immediate: true },
+);
+
+const iconState = computed(() => (data.open ? 'mask-24 mask-chevron-up' : 'mask-24 mask-chevron-down'));
+
+const selectedIndex = computed(() => {
+  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));
+});
+
+const items = computed(() =>
+  normalizeListOptions(props.options ?? []).map((opt, index) => ({
+    ...opt,
+    index,
+    isSelected: index === selectedIndex.value,
+    isActive: index === data.activeIndex,
+  })),
+);
+
+const isLoadingOptions = computed(() => props.loading || 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;
+
+  const downTopOffset = pos.top + pos.height + focusWidth;
+
+  if (downTopOffset + data.optionsHeight > pos.clientHeight) {
+    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + 'px';
+  } else {
+    optionsStyle.top = downTopOffset + 'px';
+  }
+
+  optionsStyle.left = pos.left + 'px';
+  optionsStyle.width = pos.width + 'px';
+
+  console.log(pos.top, optionsStyle);
+});
+
+const selectOption = (v: M | undefined) => {
+  model.value = v!;
+  data.open = false;
+  root?.value?.focus();
+};
+
+function emitEnter() {
+  emits('click');
+}
+
+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') {
+    emitEnter();
+    return;
+  }
+
+  const { open, activeIndex } = data;
+
+  if (!open && e.target === menuActivator.value) {
+    if (e.code === 'Enter') {
+      data.open = true;
+    }
+    return;
+  }
+
+  if (e.code === 'Escape') {
+    data.open = false;
+    root.value?.focus();
+  }
+
+  const filtered = unref(items);
+
+  const { length } = filtered;
+
+  if (!length) {
+    return;
+  }
+
+  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 newIndex = Math.abs(localIndex + delta + length) % length;
+
+  data.activeIndex = items.value[newIndex].index ?? -1;
+};
+
+const onFocusOut = (event: FocusEvent) => {
+  const relatedTarget = event.relatedTarget as Node | null;
+
+  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {
+    data.open = false;
+  }
+};
+</script>
+<template>
+  <div
+    ref="root"
+    :class="{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }"
+    class="pl-btn-split d-flex"
+    @focusout="onFocusOut"
+    @keydown="handleKeydown"
+  >
+    <div
+      ref="buttonAction"
+      class="pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn"
+      tabindex="0"
+      @click="emitEnter"
+      @keyup.stop.enter="emitEnter"
+    >
+      {{ actionName }}
+    </div>
+    <div ref="menuActivator" class="pl-btn-split__icon-container d-flex align-center justify-center" tabindex="0" @click="data.open = !data.open">
+      <PlMaskIcon16 v-if="isLoadingOptions" name="loading" />
+      <div v-else :class="iconState" class="pl-btn-split__icon" />
+    </div>
+
+    <Teleport v-if="data.open" to="body">
+      <div ref="list" class="pl-dropdown__options" :style="optionsStyle" tabindex="-1">
+        <DropdownListItem
+          v-for="(item, index) in items"
+          :key="index"
+          :option="item"
+          :is-selected="item.isSelected"
+          :is-hovered="item.isActive"
+          :size="'medium'"
+          @click.stop="selectOption(item.value)"
+        />
+      </div>
+    </Teleport>
+  </div>
+</template>

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

@@ -0,0 +1,179 @@
+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', () => {
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        options: [
+          { label: 'Option 1', value: 'opt1' },
+          { label: 'Option 2', value: 'opt2' },
+        ],
+        disabled: false,
+        modelValue: 'opt1',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Option 1');
+  });
+
+  it('Toggles dropdown on menu activator click', async () => {
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        modelValue: 'opt1',
+        options: [
+          { label: 'Option 1', value: 'opt1' },
+          { label: 'Option 2', value: 'opt2' },
+        ],
+      },
+    });
+
+    const menuActivator = wrapper.find('.pl-btn-split__icon-container');
+
+    console.log(menuActivator);
+    await menuActivator.trigger('click');
+
+    const dropdown = document.body.querySelector('.pl-dropdown__options');
+    expect(dropdown).toBeTruthy();
+    expect(dropdown?.textContent).toContain('Option 1');
+    expect(dropdown?.textContent).not.toContain('Option 3');
+
+    //Hide dropdown on focusout
+    wrapper.trigger('focusout');
+    await wrapper.vm.$nextTick();
+
+    // Убедимся, что dropdown закрылся
+    expect(document.body.querySelector('.pl-dropdown__options')).toBeFalsy();
+  });
+
+  it('Emits click event when button is clicked', async () => {
+    const clickHandler = vi.fn();
+
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        modelValue: undefined,
+        options: [],
+      },
+      attrs: {
+        onclick: clickHandler,
+      },
+    });
+
+    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 () => {
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        modelValue: 'opt1',
+        options: [
+          { 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: undefined });
+    expect(wrapper.text()).toContain('');
+  });
+
+  it('Handles keyboard navigation correctly', async () => {
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        modelValue: 'opt1',
+        options: [
+          { label: 'Option 1', value: 'opt1' },
+          { label: 'Option 2', value: 'opt2' },
+        ],
+      },
+    });
+
+    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' });
+
+    expect(wrapper.vm.data.activeIndex).toBe(1);
+
+    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',
+        options: undefined,
+      },
+    });
+
+    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 () => {
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        modelValue: undefined,
+        options: undefined,
+      },
+    });
+
+    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 () => {
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        modelValue: undefined,
+        options: [
+          { 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('');
+  });
+
+  it('Loading props', async () => {
+    const wrapper = mount(PlBtnSplit, {
+      props: {
+        modelValue: 'opt1',
+        loading: true,
+        options: [
+          { 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');
+
+    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');
+  });
+});

package/src/components/PlBtnSplit/index.ts

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

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

@@ -0,0 +1,93 @@
+@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;
+        }
+    }
+}
+
+.pl-btn-split {
+    $root: &;
+
+    --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);
+    }
+
+    &.loading {
+        .mask-loading {
+            animation: spin 2.5s linear infinite;
+        }
+    }
+
+    &__title {
+        padding: 8px 14px;
+        height: 100%;
+        @include btn-focus;
+        color: var(--border-color);
+        transition: all .1s ease-in-out;
+
+        &:hover {
+            border-radius: 6px;
+            background-color: var(--btn-sec-hover-grey);
+        }
+
+        &:active {
+            border-radius: 6px;
+            background-color: var(--btn-sec-press-grey);
+        }
+    }
+
+    &__icon,
+    .mask-loading {
+        background-color: var(--border-color);
+    }
+
+    &__icon-container {
+        width: 36px;
+        height: 100%;
+        position: relative;
+        @include btn-focus;
+        transition: all .1s ease-in-out;
+
+
+
+        &:hover {
+            border-radius: 6px;
+            background-color: var(--btn-sec-hover-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;
+        }
+    }
+}

package/src/index.ts

@@ -18,6 +18,7 @@ export * from './layout/PlGrid';
  * Components
  */
 export * from './components/PlAlert';
+export * from './components/PlBtnSplit';
 export * from './components/PlBtnPrimary';
 export * from './components/PlBtnAccent';
 export * from './components/PlBtnDanger';