@milaboratories/uikit 2.1.1 → 2.1.3

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

@@ -32,11 +32,15 @@ const props = withDefaults(
     /**
      * List of available ref options for the dropdown
      */
-    options: Readonly<RefOption[]>;
+    options?: Readonly<RefOption[]>;
     /**
      * A helper text displayed below the dropdown when there are no errors (optional).
      */
     helper?: string;
+    /**
+     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).
+     */
+    loadingOptionsHelper?: string;
     /**
      * Error message displayed below the dropdown (optional)
      */
@@ -65,6 +69,7 @@ const props = withDefaults(
   {
     label: '',
     helper: undefined,
+    loadingOptionsHelper: undefined,
     error: undefined,
     placeholder: '...',
     clearable: false,
@@ -72,11 +77,12 @@ const props = withDefaults(
     disabled: false,
     arrowIcon: undefined,
     optionSize: 'small',
+    options: undefined,
   },
 );
 
 const options = computed(() =>
-  props.options.map((opt) => ({
+  props.options?.map((opt) => ({
     label: opt.label,
     value: opt.ref,
   })),
@@ -86,5 +92,12 @@ const arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-
 </script>
 
 <template>
-  <PlDropdown v-bind="props" :options="options" :arrow-icon-large="arrowIcon" @update:model-value="$emit('update:modelValue', $event)"> </PlDropdown>
+  <PlDropdown
+    v-bind="props"
+    :options="options"
+    :loading-options-helper="loadingOptionsHelper"
+    :arrow-icon-large="arrowIcon"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+  </PlDropdown>
 </template>

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/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/index.ts

@@ -30,6 +30,7 @@ export * from './components/PlTextArea';
 export * from './components/PlDropdown';
 export * from './components/PlDropdownRef';
 export * from './components/PlDropdownLine';
+export * from './components/PlDropdownLegacy';
 export * from './components/PlTooltip';
 export * from './components/PlProgressBar';
 export * from './components/PlNumberField';