@milaboratories/uikit 2.1.2 → 2.2.0

package/src/components/PlDropdownLine/PlDropdownLine.vue

@@ -12,6 +12,7 @@ import DropdownListItem from '@/components/DropdownListItem.vue';
 import TabItem from '@/components/TabItem.vue';
 import type { ListOption } from '@/types';
 import { normalizeListOptions } from '@/helpers/utils';
+import { useElementPosition } from '@/composition/usePosition';
 
 const emit = defineEmits(['update:modelValue']); // at the top always
 
@@ -38,6 +39,7 @@ const props = withDefaults(
 const data = reactive({
   isOpen: false,
   activeOption: -1,
+  optionsHeight: 0,
 });
 
 const container = ref<HTMLElement>();
@@ -85,7 +87,7 @@ const placeholderVal = computed(() => {
     }
   }
 
-  return modelText.value || '...';
+  return modelText.value ?? '...';
 });
 
 useClickOutside(container, () => {
@@ -169,13 +171,14 @@ function isItemSelected(item: ListOption): boolean {
   return deepEqual(item.value, props.modelValue);
 }
 
-function onBlur(event: Event) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  if (!container?.value?.contains((event as any).relatedTarget)) {
-    data.isOpen = false;
+const onFocusOut = (event: FocusEvent) => {
+  const relatedTarget = event.relatedTarget as Node | null;
+
+  if (!container.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {
     searchPhrase.value = '';
+    data.isOpen = false;
   }
-}
+};
 
 function handleKeydown(e: { code: string; preventDefault(): void }) {
   const { activeOption } = data;
@@ -223,6 +226,33 @@ function scrollIntoActive() {
 function clearModel() {
   emit('update:modelValue', undefined);
 }
+
+const optionsStyle = reactive({
+  top: '0px',
+  left: '0px',
+});
+
+watch(list, (el) => {
+  if (el) {
+    const rect = el.getBoundingClientRect();
+    data.optionsHeight = rect.height;
+    window.dispatchEvent(new CustomEvent('adjust'));
+  }
+});
+
+useElementPosition(container, (pos) => {
+  const gap = 2;
+
+  const downTopOffset = pos.top + pos.height + gap;
+
+  if (downTopOffset + data.optionsHeight > pos.clientHeight) {
+    optionsStyle.top = pos.top - data.optionsHeight - gap + 'px';
+  } else {
+    optionsStyle.top = downTopOffset + 'px';
+  }
+
+  optionsStyle.left = pos.left + 'px';
+});
 </script>
 
 <template>
@@ -231,53 +261,62 @@ function clearModel() {
     ref="container"
     tabindex="0"
     :class="classes"
-    class="ui-line-dropdown uc-pointer"
+    class="pl-line-dropdown uc-pointer"
     @keydown="handleKeydown"
-    @focusout="onBlur"
+    @focusout="onFocusOut"
     @click="toggleList"
   >
-    <div class="ui-line-dropdown__prefix">{{ props?.prefix }}</div>
+    <div class="pl-line-dropdown__prefix">{{ props?.prefix }}</div>
 
-    <ResizableInput v-model="inputModel" :placeholder="placeholderVal" :disabled="props.disabled" class="ui-line-dropdown__input" />
+    <ResizableInput v-model="inputModel" :placeholder="placeholderVal" :disabled="props.disabled" class="pl-line-dropdown__input" />
 
-    <div class="ui-line-dropdown__icon-wrapper">
-      <div v-show="!canShowClearBtn" class="ui-line-dropdown__icon" />
-      <div v-show="canShowClearBtn" class="ui-line-dropdown__icon-clear" @click="clearModel" />
+    <div class="pl-line-dropdown__icon-wrapper">
+      <div v-show="!canShowClearBtn" class="pl-line-dropdown__icon" />
+      <div v-show="canShowClearBtn" class="pl-line-dropdown__icon-clear" @click="clearModel" />
     </div>
-    <div v-if="props.mode === 'list'" v-show="data.isOpen" ref="list" class="ui-line-dropdown__items">
-      <template v-for="(item, index) in options" :key="index">
-        <slot
-          name="item"
-          :item="item"
-          :text-item="'text'"
-          :is-selected="isItemSelected(item)"
-          :is-hovered="data.activeOption == index"
-          @click.stop="selectItem(item)"
-        >
-          <DropdownListItem
-            :option="item"
+    <Teleport v-if="data.isOpen" to="body">
+      <div v-if="props.mode === 'list'" ref="list" :style="optionsStyle" tabindex="-1" class="pl-line-dropdown__items" @focusout="onFocusOut">
+        <template v-for="(item, index) in options" :key="index">
+          <slot
+            name="item"
+            :item="item"
             :text-item="'text'"
             :is-selected="isItemSelected(item)"
             :is-hovered="data.activeOption == index"
-            size="medium"
             @click.stop="selectItem(item)"
-          />
-        </slot>
-      </template>
-
-      <div v-if="options.length === 0" class="ui-line-dropdown__no-item">
-        <div class="ui-line-dropdown__no-item-title text-s">Didn't find anything that matched</div>
+          >
+            <DropdownListItem
+              :option="item"
+              :text-item="'text'"
+              :is-selected="isItemSelected(item)"
+              :is-hovered="data.activeOption == index"
+              size="medium"
+              @click.stop="selectItem(item)"
+            />
+          </slot>
+        </template>
+
+        <div v-if="options.length === 0" class="pl-line-dropdown__no-item">
+          <div class="pl-line-dropdown__no-item-title text-s">Didn't find anything that matched</div>
+        </div>
       </div>
-    </div>
-    <div v-if="props.mode === 'tabs'" v-show="data.isOpen" ref="list" :style="props.tabsContainerStyles" class="ui-line-dropdown__items-tabs">
-      <template v-for="(item, index) in options" :key="index">
-        <slot name="item" :item="item" :is-selected="isItemSelected(item)" :is-hovered="data.activeOption == index" @click.stop="selectItem(item)">
-          <TabItem :option="item" :is-selected="isItemSelected(item)" :is-hovered="data.activeOption == index" @click.stop="selectItem(item)" />
-        </slot>
-      </template>
-      <div v-if="options.length === 0" class="ui-line-dropdown__no-item">
-        <div class="ui-line-dropdown__no-item-title text-s">Didn't find anything that matched</div>
+      <div
+        v-else-if="props.mode === 'tabs'"
+        ref="list"
+        :style="optionsStyle"
+        tabindex="-1"
+        class="pl-line-dropdown__items-tabs"
+        @focusout="onFocusOut"
+      >
+        <template v-for="(item, index) in options" :key="index">
+          <slot name="item" :item="item" :is-selected="isItemSelected(item)" :is-hovered="data.activeOption == index" @click.stop="selectItem(item)">
+            <TabItem :option="item" :is-selected="isItemSelected(item)" :is-hovered="data.activeOption == index" @click.stop="selectItem(item)" />
+          </slot>
+        </template>
+        <div v-if="options.length === 0" class="pl-line-dropdown__no-item">
+          <div class="pl-line-dropdown__no-item-title text-s">Didn't find anything that matched</div>
+        </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>

package/src/components/PlDropdownLine/pl-dropdown-line.scss

@@ -1,6 +1,6 @@
 @import "@/assets/mixins";
 
-.ui-line-dropdown {
+.pl-line-dropdown {
     display: flex;
     align-items: center;
     width: fit-content;
@@ -113,8 +113,8 @@
 
     &__items {
         position: absolute;
-        top: 110%;
-        z-index: 1;
+        top: 0;
+        z-index: var(--z-dropdown-options);
         border-radius: 6px;
         padding: 12px 0;
         border: 1px solid var(--color-div-grey);
@@ -130,8 +130,8 @@
     &__items-tabs {
         display: flex;
         position: absolute;
-        top: 110%;
-        z-index: 1;
+        top: 0;
+        z-index: var(--z-dropdown-options);
         background-color: var(--color-div-bw);
         overflow-x: scroll;
         max-width: 400px;

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -20,6 +20,7 @@ import { scrollIntoView } from '@/helpers/dom';
 import DropdownListItem from '@/components/DropdownListItem.vue';
 import { deepEqual, deepIncludes } from '@/helpers/objects';
 import { normalizeListOptions } from '@/helpers/utils';
+import { useElementPosition } from '@/composition/usePosition';
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: M[]): void;
@@ -83,6 +84,7 @@ const data = reactive({
   search: '',
   activeOption: -1,
   open: false,
+  optionsHeight: 0,
 });
 
 const selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));
@@ -149,7 +151,9 @@ const setFocusOnInput = () => input.value?.focus();
 const toggleModel = () => (data.open = !data.open);
 
 const onFocusOut = (event: FocusEvent) => {
-  if (!rootRef?.value?.contains(event.relatedTarget as Node | null)) {
+  const relatedTarget = event.relatedTarget as Node | null;
+
+  if (!rootRef.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;
   }
@@ -220,20 +224,49 @@ watchPostEffect(() => {
     scrollIntoActive();
   }
 });
+
+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'));
+  }
+});
+
+useElementPosition(rootRef, (pos) => {
+  const focusWidth = 5; // see css
+
+  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';
+});
 </script>
 
 <template>
-  <div class="ui-multi-dropdown__envelope">
+  <div class="pl-multi-dropdown__envelope">
     <div
       ref="rootRef"
       :tabindex="tabindex"
-      class="ui-multi-dropdown"
+      class="pl-multi-dropdown"
       :class="{ open: data.open, error, disabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
     >
-      <div class="ui-multi-dropdown__container">
-        <div class="ui-multi-dropdown__field">
+      <div class="pl-multi-dropdown__container">
+        <div class="pl-multi-dropdown__field">
           <input
             ref="input"
             v-model="data.search"
@@ -251,7 +284,7 @@ watchPostEffect(() => {
             </PlChip>
           </div>
           <div class="arrow" @click.stop="toggleModel" />
-          <div class="ui-multi-dropdown__append">
+          <div class="pl-multi-dropdown__append">
             <slot name="append" />
           </div>
         </div>
@@ -264,29 +297,31 @@ watchPostEffect(() => {
             </template>
           </PlTooltip>
         </label>
-        <div v-if="data.open" ref="list" class="ui-multi-dropdown__options">
-          <div class="ui-multi-dropdown__open-chips-container">
-            <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @close="unselectOption(opt.value)">
-              {{ opt.label || opt.value }}
-            </PlChip>
+        <Teleport v-if="data.open" to="body">
+          <div ref="list" class="pl-multi-dropdown__options" :style="optionsStyle" tabindex="-1" @focusout="onFocusOut">
+            <div class="pl-multi-dropdown__open-chips-container">
+              <PlChip v-for="(opt, i) in selectedOptionsRef" :key="i" closeable small @close="unselectOption(opt.value)">
+                {{ opt.label || opt.value }}
+              </PlChip>
+            </div>
+            <DropdownListItem
+              v-for="(item, index) in filteredOptionsRef"
+              :key="index"
+              :option="item"
+              :text-item="'text'"
+              :is-selected="item.selected"
+              :is-hovered="data.activeOption == index"
+              size="medium"
+              use-checkbox
+              @click.stop="selectOption(item.value)"
+            />
+            <div v-if="!filteredOptionsRef.length" class="nothing-found">Nothing found</div>
           </div>
-          <DropdownListItem
-            v-for="(item, index) in filteredOptionsRef"
-            :key="index"
-            :option="item"
-            :text-item="'text'"
-            :is-selected="item.selected"
-            :is-hovered="data.activeOption == index"
-            size="medium"
-            use-checkbox
-            @click.stop="selectOption(item.value)"
-          />
-          <div v-if="!filteredOptionsRef.length" class="nothing-found">Nothing found</div>
-        </div>
-        <DoubleContour class="ui-multi-dropdown__contour" />
+        </Teleport>
+        <DoubleContour class="pl-multi-dropdown__contour" />
       </div>
     </div>
-    <div v-if="error" class="ui-multi-dropdown__error">{{ error }}</div>
-    <div v-else-if="helper" class="ui-multi-dropdown__helper">{{ helper }}</div>
+    <div v-if="error" class="pl-multi-dropdown__error">{{ error }}</div>
+    <div v-else-if="helper" class="pl-multi-dropdown__helper">{{ helper }}</div>
   </div>
 </template>

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

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest';
 
 import { mount } from '@vue/test-utils';
 import PlDropdown from '../PlDropdownMulti.vue';
+import { delay } from '@milaboratories/helpers';
 
 describe('PlDropdownMulti', () => {
   it('modelValue', async () => {
@@ -18,16 +19,20 @@ describe('PlDropdownMulti', () => {
 
     await wrapper.find('input').trigger('focus');
 
-    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(2);
+    const getOptions = () => [...document.body.querySelectorAll('.dropdown-list-item')] as HTMLElement[];
 
-    await wrapper
-      .findAll('.dropdown-list-item')
-      .filter((node) => node.text().match(/Option 2/))
-      .at(0)
-      ?.trigger('click');
+    const options = getOptions();
+
+    console.log('options', options);
+
+    expect(options.length).toBe(2);
+
+    options[1].click();
+
+    await delay(20);
 
     expect(wrapper.props('modelValue')).toEqual([1, 2]);
 
-    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(2); // options are not closed after click
+    expect(getOptions().length).toBe(2); // options are not closed after click
   });
 });

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -1,6 +1,6 @@
 @import "@/assets/mixins";
 
-.ui-multi-dropdown {
+.pl-multi-dropdown {
   $root: &;
 
   --contour-color: var(--txt-01);
@@ -53,11 +53,14 @@
   }
 
   &__options {
-    position: relative;
-    background-color: var(--options-bg);
-    border-radius: 0 0 6px 6px;
+    position: absolute;
+    top: 0;
+    z-index: var(--z-dropdown-options);
+    border: 1px solid var(--border-color-div-grey);
+    background-color: var(--pl-dropdown-options-bg);
+    border-radius: 6px;
     max-height: 244px;
-    border-top: 1px solid var(--color-div-black);
+    box-shadow: 0px 4px 12px -2px rgba(15, 36, 77, 0.08), 0px 6px 24px -2px rgba(15, 36, 77, 0.08);
     @include scrollbar;
 
     .nothing-found {
@@ -83,7 +86,7 @@
       --base-icon: url('@/assets/images/24_checkbox-base.svg');
       --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
 
-      .ui-multi-dropdown__checkmark {
+      .pl-multi-dropdown__checkmark {
         cursor: pointer;
         outline: none;
         border-radius: 4px;
@@ -106,7 +109,7 @@
       &.selected {
         background-color: var(--color-active-select);
 
-        .ui-multi-dropdown__checkmark {
+        .pl-multi-dropdown__checkmark {
           @include icon(var(--checked-icon), 24px);
         }
       }
@@ -290,7 +293,7 @@
   &__open-chips-container {
     padding: 12px;
 
-    .ui-chip {
+    .pl-chip {
       margin-right: 4px;
       margin-bottom: 4px;
     }

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -69,6 +69,7 @@ const props = withDefaults(
   {
     label: '',
     helper: undefined,
+    loadingOptionsHelper: undefined,
     error: undefined,
     placeholder: '...',
     clearable: false,

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

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest';
 
 import { mount } from '@vue/test-utils';
 import PlDropdownRef from '../PlDropdownRef.vue';
+import { delay } from '@milaboratories/helpers';
 
 describe('PlDropdownRef', () => {
   it('modelValue', async () => {
@@ -9,8 +10,8 @@ describe('PlDropdownRef', () => {
       props: {
         modelValue: {
           __isRef: true as const,
-          blockId: '2',
-          name: 'Ref to block 2',
+          blockId: '1',
+          name: 'Ref to block 1',
         },
         'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
         options: [
@@ -36,13 +37,15 @@ describe('PlDropdownRef', () => {
 
     await wrapper.find('input').trigger('focus');
 
-    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(2);
+    const options = [...document.body.querySelectorAll('.dropdown-list-item')] as HTMLElement[];
 
-    await wrapper
-      .findAll('.dropdown-list-item')
-      .filter((node) => node.text().match(/Ref 2/))
-      .at(0)
-      ?.trigger('click');
+    expect(options.length).toBe(2);
+
+    expect(options.length).toBe(2);
+
+    options[1].click();
+
+    await delay(20);
 
     expect(wrapper.props('modelValue')).toStrictEqual({
       __isRef: true as const,

package/src/components/PlFileInput/PlFileInput.vue

@@ -167,7 +167,7 @@ if (!props.cellStyle) {
         </PlTooltip>
       </label>
       <PlMaskIcon24 v-if="hasErrors" name="restart" />
-      <PlMaskIcon24 v-else-if="isUploading" name="cloud-up" />
+      <PlMaskIcon24 v-else-if="isUploading" name="cloud-upload" />
       <PlMaskIcon24 v-else-if="isUploaded" name="success" />
       <PlMaskIcon24 v-else name="paper-clip" />
       <div :data-placeholder="placeholder ?? 'Choose file'" class="pl-file-input__filename" @click.stop="openFileDialog">

package/src/components/PlTextField/PlTextField.vue

@@ -123,7 +123,7 @@ const fieldType = computed(() => {
   }
 });
 
-const passwordIcon = computed(() => (showPassword.value ? 'view-on' : 'view-off'));
+const passwordIcon = computed(() => (showPassword.value ? 'view-show' : 'view-hide'));
 
 const clear = () => {
   if (props.clearable) {

package/src/composition/useEventListener.ts

@@ -7,8 +7,8 @@ export function useEventListener<T extends EventTarget, E extends EventMap[K], K
   target: MaybeRef<T | undefined>,
   type: K,
   callback: (this: T, evt: E) => void,
-  capture = false,
+  options?: AddEventListenerOptions | boolean,
 ) {
-  onMounted(() => unref(target)?.addEventListener(type, callback as (this: T, evt: Event) => void, capture));
-  onUnmounted(() => unref(target)?.removeEventListener(type, callback as (this: T, evt: Event) => void, capture));
+  onMounted(() => unref(target)?.addEventListener(type, callback as (this: T, evt: Event) => void, options));
+  onUnmounted(() => unref(target)?.removeEventListener(type, callback as (this: T, evt: Event) => void, options));
 }

package/src/composition/usePosition.ts

@@ -33,9 +33,9 @@ export function useElementPosition(el: Ref<HTMLElement | undefined>, cb: (pos: E
 
   onMounted(handle);
 
-  useEventListener(window, 'scroll', handle, true);
+  useEventListener(window, 'scroll', handle, { capture: true, passive: true });
 
-  useEventListener(window, 'resize', handle, true);
+  useEventListener(window, 'resize', handle, { passive: true });
 
   useEventListener(window, 'adjust', handle, true);
 }

package/src/generated/icons-16.ts

@@ -6,6 +6,11 @@ export const maskIcons16 = [
   'arrow-right',
   'arrow-up',
   'box',
+  'calendar',
+  'caret-down',
+  'caret-left',
+  'caret-right',
+  'caret-up',
   'cell-type-num',
   'cell-type-txt',
   'checkmark',
@@ -15,53 +20,46 @@ export const maskIcons16 = [
   'chevron-left',
   'chevron-right',
   'chevron-up',
-  'clear',
   'clipboard-copied',
   'clipboard',
   'close',
-  'comp',
-  'compare',
   'copy',
   'data-dimentions',
   'delete-bin',
   'delete-circle',
   'delete-clear',
-  'delete',
+  'download',
   'drag-dots',
   'duplicate',
   'edit',
   'error',
   'export',
-  'filter-2',
   'filter-on',
   'filter',
   'help-outline',
   'help',
-  'import',
   'info-outline',
   'info',
   'jump-link',
-  'link-arrow',
   'link',
   'loading',
   'lock',
   'maximize',
   'minimize',
   'minus',
-  'more-horizontal',
   'more',
   'open',
+  'paper-clip',
   'pause',
   'play',
-  'required',
+  'renew',
   'restart',
   'reverse',
-  'settings-2',
   'settings',
   'sort',
-  'sorter',
   'stop',
   'success',
+  'time',
   'tune',
   'warning',
   'x-axis',