@milaboratories/uikit 2.1.1 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "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.0"
+    "@platforma-sdk/model": "^1.8.0",
+    "@milaboratories/helpers": "^1.6.6"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/base.scss

@@ -70,6 +70,8 @@
   --title-bar-height: 0px; // @TODO
 
   --divider-color: var(--txt-01); // @TODO
+
+  --pl-dropdown-options-bg: #fff;
 }
 
 [data-theme='dark'] {
@@ -119,6 +121,8 @@
   --chip-close-ic-hover-color: var(--border-color-focus);
 
   --theme-switcher-icon-color: var(--txt-01);
+
+  --pl-dropdown-options-bg: #1b1b1f;
 }
 
 *,

package/src/assets/variables.scss

@@ -66,10 +66,12 @@
   --main-spacing: 24px;
   --gap-v: 24px;
   --gap-h: 12px;
+  // @TODO global overlays
   --z-slide-shadow: 80;
   --z-slide-dialog: 81;
   --z-dialog: 100;
-  --z-tooltip: 103;
+  --z-dropdown-options: 110;
+  --z-tooltip: 120;
   --z-context-menu: 1001;
 }
 

package/src/components/PlCheckbox/pl-checkbox.scss

@@ -54,5 +54,7 @@
     cursor: var(--cursor-label);
     font-size: 14px;
     font-weight: 500;
+    display: inline-flex;
+    align-items: center;
   }
 }

package/src/components/PlChip/PlChip.vue

@@ -21,16 +21,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <PlTooltip position="top" class="ui-chip-tooltip" :delay="500">
+  <PlTooltip position="top" class="pl-chip-tooltip" :delay="500">
     <template v-if="canShowTooltip" #tooltip>
       <slot />
     </template>
-    <div ref="chip" class="ui-chip" :class="{ small }">
-      <div class="ui-chip__text">
+    <div ref="chip" class="pl-chip" :class="{ small }">
+      <div class="pl-chip__text">
         <slot />
       </div>
-      <div v-if="closeable" tabindex="0" class="ui-chip__close" @keydown.enter="$emit('close')" @click.stop="$emit('close')">
-        <div class="ui-chip__close--icon" />
+      <div v-if="closeable" tabindex="0" class="pl-chip__close" @keydown.enter="$emit('close')" @click.stop="$emit('close')">
+        <div class="pl-chip__close--icon" />
       </div>
     </div>
   </PlTooltip>

package/src/components/PlChip/pl-chip.scss

@@ -1,10 +1,10 @@
 @import "@/assets/mixins";
 
-.ui-chip-tooltip {
+.pl-chip-tooltip {
   display: inline-flex;
 }
 
-.ui-chip {
+.pl-chip {
   --chip-color: var(--txt-01);
 
   position: relative;

package/src/components/PlDropdown/PlDropdown.vue

@@ -20,6 +20,7 @@ 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';
 
 const emit = defineEmits<{
   /**
@@ -41,11 +42,15 @@ const props = withDefaults(
     /**
      * List of available options for the dropdown
      */
-    options: Readonly<ListOption<M>[]>;
+    options?: Readonly<ListOption<M>[]>;
     /**
      * 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)
      */
@@ -82,6 +87,7 @@ const props = withDefaults(
   {
     label: '',
     helper: undefined,
+    loadingOptionsHelper: undefined,
     error: undefined,
     placeholder: '...',
     clearable: false,
@@ -90,6 +96,7 @@ const props = withDefaults(
     arrowIcon: undefined,
     arrowIconLarge: undefined,
     optionSize: 'small',
+    options: undefined,
   },
 );
 
@@ -103,6 +110,7 @@ const data = reactive({
   search: '',
   activeIndex: -1,
   open: false,
+  optionsHeight: 0,
 });
 
 const findActiveIndex = () =>
@@ -113,11 +121,27 @@ const findActiveIndex = () =>
 
 const updateActive = () => (data.activeIndex = findActiveIndex());
 
+const isLoadingOptions = computed(() => {
+  return props.options === undefined;
+});
+
+const isDisabled = computed(() => {
+  if (isLoadingOptions.value) {
+    return true;
+  }
+
+  return props.disabled;
+});
+
 const selectedIndex = computed(() => {
-  return props.options.findIndex((o) => deepEqual(o.value, props.modelValue));
+  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));
 });
 
 const computedError = computed(() => {
+  if (isLoadingOptions.value) {
+    return undefined;
+  }
+
   if (props.error) {
     return props.error;
   }
@@ -130,7 +154,7 @@ const computedError = computed(() => {
 });
 
 const optionsRef = computed(() =>
-  normalizeListOptions(props.options).map((opt, index) => ({
+  normalizeListOptions(props.options ?? []).map((opt, index) => ({
     ...opt,
     index,
     isSelected: index === selectedIndex.value,
@@ -184,7 +208,7 @@ const filteredRef = computed(() => {
   return options;
 });
 
-const tabindex = computed(() => (props.disabled ? undefined : '0'));
+const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
 
 const selectOption = (v: M | undefined) => {
   emit('update:modelValue', v);
@@ -202,7 +226,9 @@ const toggleOpen = () => (data.open = !data.open);
 const onInputFocus = () => (data.open = true);
 
 const onFocusOut = (event: FocusEvent) => {
-  if (!root?.value?.contains(event.relatedTarget as Node | null)) {
+  const relatedTarget = event.relatedTarget as Node | null;
+
+  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;
   }
@@ -278,26 +304,55 @@ 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(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="ui-dropdown__envelope">
+  <div class="pl-dropdown__envelope">
     <div
       ref="root"
       :tabindex="tabindex"
-      class="ui-dropdown"
-      :class="{ open: data.open, error, disabled }"
+      class="pl-dropdown"
+      :class="{ open: data.open, error, disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
     >
-      <div class="ui-dropdown__container">
-        <div class="ui-dropdown__field">
+      <div class="pl-dropdown__container">
+        <div class="pl-dropdown__field">
           <input
             ref="input"
             v-model="data.search"
             type="text"
             tabindex="-1"
-            :disabled="disabled"
+            :disabled="isDisabled"
             :placeholder="computedPlaceholder"
             spellcheck="false"
             autocomplete="chrome-off"
@@ -308,7 +363,8 @@ watchPostEffect(() => {
             <LongText class="input-value"> {{ textValue }} </LongText>
           </div>
 
-          <div class="ui-dropdown__controls">
+          <div class="pl-dropdown__controls">
+            <div v-if="isLoadingOptions" class="mask-24 mask-loading"></div>
             <div v-if="clearable && hasValue" class="icon-16 icon-clear" @click.stop="clear" />
             <slot name="append" />
             <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" @click.stop="toggleOpen" />
@@ -325,22 +381,25 @@ watchPostEffect(() => {
             </template>
           </PlTooltip>
         </label>
-        <div v-if="data.open" ref="list" class="ui-dropdown__options">
-          <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>
-        <DoubleContour class="ui-dropdown__contour" />
+        <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>
+        <DoubleContour class="pl-dropdown__contour" />
       </div>
     </div>
-    <div v-if="computedError" class="ui-dropdown__error">{{ computedError }}</div>
-    <div v-else-if="helper" class="ui-dropdown__helper">{{ helper }}</div>
+    <div v-if="computedError" class="pl-dropdown__error">{{ computedError }}</div>
+    <div v-else-if="isLoadingOptions && loadingOptionsHelper" class="pl-dropdown__helper">{{ loadingOptionsHelper }}</div>
+    <div v-else-if="helper" class="pl-dropdown__helper">{{ helper }}</div>
   </div>
 </template>

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

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest';
 
 import { mount } from '@vue/test-utils';
 import PlDropdown from '../PlDropdown.vue';
+import { delay } from '@milaboratories/helpers';
 
 describe('PlDropdown', () => {
   it('modelValue', async () => {
@@ -18,13 +19,13 @@ describe('PlDropdown', () => {
 
     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(/Option 2/))
-      .at(0)
-      ?.trigger('click');
+    expect(options.length).toBe(2);
+
+    options[1].click();
+
+    await delay(20);
 
     expect(wrapper.props('modelValue')).toBe(2);
 

package/src/components/PlDropdown/pl-dropdown.scss

@@ -1,12 +1,73 @@
 @import "@/assets/mixins";
 
-.ui-dropdown {
+.pl-dropdown__options {
+  --option-hover-bg: var(--btn-sec-hover-grey);
+
+  z-index: var(--z-dropdown-options);
+  border: 1px solid var(--border-color-div-grey);
+  position: absolute;
+  background-color: var(--pl-dropdown-options-bg);
+  border-radius: 6px;
+  max-height: 244px;
+  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 {
+    padding: 0 10px;
+    height: var(--control-height);
+    line-height: var(--control-height);
+    background-color: #fff;
+    opacity: 0.5;
+    font-style: italic;
+  }
+
+  .option {
+    position: relative;
+    padding: 0 30px 0 10px;
+    height: var(--control-height);
+    line-height: var(--control-height);
+    cursor: pointer;
+    user-select: none;
+
+    .checkmark {
+      position: absolute;
+      display: none;
+      right: 10px;
+      @include abs-center-y();
+    }
+
+    >span {
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      text-overflow: ellipsis;
+    }
+
+    &.selected {
+      background-color: var(--color-active-select);
+
+      .checkmark {
+        display: block;
+      }
+    }
+
+    &.active:not(.selected) {
+      background-color: var(--option-hover-bg);
+    }
+
+    &:hover {
+      background-color: var(--option-hover-bg);
+    }
+  }
+}
+
+.pl-dropdown {
   $root: &;
 
   --contour-color: var(--txt-01);
   --contour-border-width: 1px;
-  --options-bg: #fff;
-  --option-hover-bg: var(--btn-sec-hover-grey);
 
   --label-offset-left-x: 8px;
   --label-offset-right-x: 8px;
@@ -20,10 +81,6 @@
   font-size: var(--font-size-base);
   font-weight: var(--font-weigh-base);
 
-  [data-theme='dark'] & {
-    --options-bg: #1b1b1f;
-  }
-
   &__envelope {
     font-family: var(--control-font-family);
     min-width: 160px;
@@ -51,64 +108,6 @@
     pointer-events: none;
   }
 
-  &__options {
-    position: relative;
-    background-color: var(--options-bg);
-    border-radius: 0 0 6px 6px;
-    max-height: 244px;
-    border-top: 1px solid var(--color-div-black);
-
-    @include scrollbar;
-
-    .nothing-found {
-      padding: 0 10px;
-      height: var(--control-height);
-      line-height: var(--control-height);
-      background-color: #fff;
-      opacity: 0.5;
-      font-style: italic;
-    }
-
-    .option {
-      position: relative;
-      padding: 0 30px 0 10px;
-      height: var(--control-height);
-      line-height: var(--control-height);
-      cursor: pointer;
-      user-select: none;
-
-      .checkmark {
-        position: absolute;
-        display: none;
-        right: 10px;
-        @include abs-center-y();
-      }
-
-      > span {
-        display: block;
-        overflow: hidden;
-        white-space: nowrap;
-        max-width: 100%;
-        text-overflow: ellipsis;
-      }
-
-      &.selected {
-        background-color: var(--color-active-select);
-        .checkmark {
-          display: block;
-        }
-      }
-
-      &.active:not(.selected) {
-        background-color: var(--option-hover-bg);
-      }
-
-      &:hover {
-        background-color: var(--option-hover-bg);
-      }
-    }
-  }
-
   &__field {
     position: relative;
     border-radius: 6px;
@@ -184,14 +183,21 @@
       cursor: pointer;
     }
 
-    .mask-16,.mask-24 {
+    .mask-16,
+    .mask-24 {
       background-color: var(--control-mask-fill);
       cursor: pointer;
     }
+
+    .mask-loading {
+      animation: spin 2.5s linear infinite;
+      background-color: #07AD3E;
+    }
   }
 
   .arrow-icon {
     cursor: pointer;
+
     // Default "arrow" icon (16x16) 
     &.arrow-icon-default {
       background-color: var(--control-mask-fill);
@@ -214,7 +220,7 @@
       border-radius: 6px 6px 0 0;
     }
 
-    .arrow {
+    .arrow-icon {
       background-color: var(--control-mask-fill);
       @include mask(url(@/assets/images/16_chevron-up.svg), 16px);
     }
@@ -246,5 +252,7 @@
     --control-mask-fill: var(--color-dis-01);
     --label-color: var(--color-dis-01);
     cursor: not-allowed;
+    pointer-events: none;
+    user-select: none;
   }
-}
+}