@milaboratories/uikit 2.2.21 → 2.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.21",
+  "version": "2.2.22",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -32,8 +32,8 @@
     "vue-tsc": "^2.1.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@platforma-sdk/model": "^1.14.1",
-    "@milaboratories/helpers": "^1.6.8"
+    "@milaboratories/helpers": "^1.6.8",
+    "@platforma-sdk/model": "^1.14.1"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlDropdown/PlDropdown.vue

@@ -9,20 +9,19 @@ export default {
 
 <script lang="ts" setup generic="M = unknown">
 import './pl-dropdown.scss';
-import { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';
-import { tap, tapIf } from '@/helpers/functions';
+import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
+import { tap } from '@/helpers/functions';
 import { PlTooltip } from '@/components/PlTooltip';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
 import type { ListOption, ListOptionNormalized } from '@/types';
-import { scrollIntoView } from '@/helpers/dom';
 import { deepEqual } from '@/helpers/objects';
 import DropdownListItem from '@/components/DropdownListItem.vue';
 import LongText from '@/components/LongText.vue';
 import { normalizeListOptions } from '@/helpers/utils';
-import { useElementPosition } from '@/composition/usePosition';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
+import { DropdownOverlay } from '@/utils/DropdownOverlay';
 
 const emit = defineEmits<{
   /**
@@ -104,10 +103,11 @@ const props = withDefaults(
 
 const slots = useSlots();
 
-const root = ref<HTMLElement | undefined>();
-const list = ref<HTMLElement | undefined>();
+const rootRef = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
+const overlay = useTemplateRef('overlay');
+
 const data = reactive({
   search: '',
   activeIndex: -1,
@@ -216,7 +216,7 @@ const selectOption = (v: M | undefined) => {
   emit('update:modelValue', v);
   data.search = '';
   data.open = false;
-  root?.value?.focus();
+  rootRef?.value?.focus();
 };
 
 const clear = () => emit('update:modelValue', undefined);
@@ -230,24 +230,12 @@ const onInputFocus = () => (data.open = true);
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
-  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {
+  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;
   }
 };
 
-const scrollIntoActive = () => {
-  const $list = list.value;
-
-  if (!$list) {
-    return;
-  }
-
-  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {
-    scrollIntoView($list, opt);
-  });
-};
-
 const handleKeydown = (e: { code: string; preventDefault(): void }) => {
   if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.code)) {
     return;
@@ -266,7 +254,7 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
 
   if (e.code === 'Escape') {
     data.open = false;
-    root.value?.focus();
+    rootRef.value?.focus();
   }
 
   const filtered = unref(filteredRef);
@@ -290,7 +278,7 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
   data.activeIndex = filteredRef.value[newIndex].index ?? -1;
 };
 
-useLabelNotch(root);
+useLabelNotch(rootRef);
 
 watch(() => props.modelValue, updateActive, { immediate: true });
 
@@ -303,44 +291,15 @@ watchPostEffect(() => {
   data.search; // to watch
 
   if (data.activeIndex >= 0 && data.open) {
-    scrollIntoActive();
+    overlay.value?.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(root, (pos) => {
-  const focusWidth = 3; // 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="pl-dropdown__envelope">
     <div
-      ref="root"
+      ref="rootRef"
       :tabindex="tabindex"
       class="pl-dropdown"
       :class="{ open: data.open, error, disabled: isDisabled }"
@@ -383,20 +342,18 @@ useElementPosition(root, (pos) => {
             </template>
           </PlTooltip>
         </label>
-        <Teleport v-if="data.open" to="body">
-          <div ref="list" class="pl-dropdown__options" :style="optionsStyle" tabindex="-1">
-            <DropdownListItem
-              v-for="(item, index) in filteredRef"
-              :key="index"
-              :option="item"
-              :is-selected="item.isSelected"
-              :is-hovered="item.isActive"
-              :size="optionSize"
-              @click.stop="selectOption(item.value)"
-            />
-            <div v-if="!filteredRef.length" class="nothing-found">Nothing found</div>
-          </div>
-        </Teleport>
+        <DropdownOverlay v-if="data.open" ref="overlay" :root="rootRef" class="pl-dropdown__options" tabindex="-1" :gap="3">
+          <DropdownListItem
+            v-for="(item, index) in filteredRef"
+            :key="index"
+            :option="item"
+            :is-selected="item.isSelected"
+            :is-hovered="item.isActive"
+            :size="optionSize"
+            @click.stop="selectOption(item.value)"
+          />
+          <div v-if="!filteredRef.length" class="nothing-found">Nothing found</div>
+        </DropdownOverlay>
         <DoubleContour class="pl-dropdown__contour" />
       </div>
     </div>

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -9,18 +9,17 @@ export default {
 
 <script lang="ts" setup generic="M = unknown">
 import './pl-dropdown-multi.scss';
-import { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';
-import { tap, tapIf } from '@/helpers/functions';
+import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
+import { tap } from '@/helpers/functions';
 import { PlTooltip } from '@/components/PlTooltip';
 import { PlChip } from '@/components/PlChip';
 import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
 import type { ListOption } from '@/types';
-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';
+import DropdownOverlay from '@/utils/DropdownOverlay/DropdownOverlay.vue';
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: M[]): void;
@@ -77,9 +76,10 @@ const props = withDefaults(
 );
 
 const rootRef = ref<HTMLElement | undefined>();
-const list = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
+const overlay = useTemplateRef('overlay');
+
 const data = reactive({
   search: '',
   activeOption: -1,
@@ -153,24 +153,14 @@ const toggleModel = () => (data.open = !data.open);
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
-  if (!rootRef.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {
+  console.log('>>>> overlay.value?.$el', overlay.value?.$el);
+
+  if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;
   }
 };
 
-const scrollIntoActive = () => {
-  const $list = list.value;
-
-  if (!$list) {
-    return;
-  }
-
-  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {
-    scrollIntoView($list, opt);
-  });
-};
-
 const handleKeydown = (e: { code: string; preventDefault(): void }) => {
   const { open, activeOption } = data;
 
@@ -206,7 +196,7 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
 
   data.activeOption = Math.abs(activeOption + d + length) % length;
 
-  requestAnimationFrame(scrollIntoActive);
+  requestAnimationFrame(() => overlay.value?.scrollIntoActive());
 };
 
 useLabelNotch(rootRef);
@@ -221,38 +211,9 @@ watchPostEffect(() => {
   data.search;
 
   if (data.open) {
-    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'));
+    overlay.value?.scrollIntoActive();
   }
 });
-
-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>
@@ -297,27 +258,33 @@ useElementPosition(rootRef, (pos) => {
             </template>
           </PlTooltip>
         </label>
-        <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>
+        <DropdownOverlay
+          v-if="data.open"
+          ref="overlay"
+          :root="rootRef"
+          class="pl-multi-dropdown__options"
+          :gap="3"
+          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>
-        </Teleport>
+          <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>
+        </DropdownOverlay>
         <DoubleContour class="pl-multi-dropdown__contour" />
       </div>
     </div>

package/src/index.ts

@@ -90,6 +90,7 @@ export { useDraggable } from './composition/useDraggable';
  */
 
 export { default as PlCloseModalBtn } from './utils/PlCloseModalBtn.vue';
+export * from './utils/DropdownOverlay';
 
 /**
  * Technical

package/src/utils/DropdownOverlay/DropdownOverlay.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { useElementPosition } from '@/composition/usePosition';
+import { scrollIntoView } from '@/helpers/dom';
+import { tapIf } from '@milaboratories/helpers';
+import { reactive, ref, toRef, watch } from 'vue';
+
+const props = defineProps<{
+  root: HTMLElement | undefined; // element to "track"
+  gap?: number; // additional gap between overlay and "root" component
+}>();
+
+const data = reactive({
+  optionsHeight: 0,
+});
+
+const optionsStyle = reactive({
+  top: '0px',
+  left: '0px',
+  width: '0px',
+});
+
+const rootRef = toRef(props, 'root');
+
+const listRef = ref<HTMLElement>();
+
+const scrollIntoActive = () => {
+  const $list = listRef.value;
+
+  if (!$list) {
+    return;
+  }
+
+  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {
+    scrollIntoView($list, opt);
+  });
+};
+
+defineExpose({
+  scrollIntoActive,
+  listRef,
+});
+
+watch(listRef, (el) => {
+  if (el) {
+    requestAnimationFrame(() => {
+      const rect = el.getBoundingClientRect();
+      data.optionsHeight = rect.height;
+      window.dispatchEvent(new CustomEvent('adjust'));
+    });
+  }
+});
+
+useElementPosition(rootRef, (pos) => {
+  const bodyRect = document.body.getBoundingClientRect();
+
+  const top = pos.top - bodyRect.top;
+
+  const left = pos.left - bodyRect.left;
+
+  const gap = props.gap ?? 0;
+
+  const downTopOffset = top + pos.height + gap;
+
+  if (downTopOffset + data.optionsHeight > pos.clientHeight) {
+    optionsStyle.top = top - data.optionsHeight - gap + 'px';
+  } else {
+    optionsStyle.top = downTopOffset + 'px';
+  }
+
+  optionsStyle.left = left + 'px';
+  optionsStyle.width = pos.width + 'px';
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div ref="listRef" v-bind="$attrs" :style="optionsStyle" tabindex="-1">
+      <slot ref="list" />
+    </div>
+  </Teleport>
+</template>

package/src/utils/DropdownOverlay/index.ts

@@ -0,0 +1 @@
+export { default as DropdownOverlay } from './DropdownOverlay.vue';