@milaboratories/uikit 2.1.2 → 2.2.0

package/src/assets/icons/icons-24-generated.scss

@@ -19,14 +19,13 @@ $icons24: (
   bar-trend: 'bar-trend.svg',
   bar: 'bar.svg',
   bindot: 'bindot.svg',
-  box-dot: 'box-dot.svg',
   box: 'box.svg',
-  boxplot-1: 'boxplot-1.svg',
   boxplot-binned: 'boxplot-binned.svg',
   boxplot-jitter: 'boxplot-jitter.svg',
   boxplot-notched: 'boxplot-notched.svg',
   boxplot: 'boxplot.svg',
   bubble: 'bubble.svg',
+  calendar: 'calendar.svg',
   canvas: 'canvas.svg',
   cell-type-num: 'cell-type-num.svg',
   cell-type-txt: 'cell-type-txt.svg',
@@ -44,14 +43,11 @@ $icons24: (
   clipboard-copied: 'clipboard-copied.svg',
   clipboard: 'clipboard.svg',
   close: 'close.svg',
-  cloud-down: 'cloud-down.svg',
   cloud-download: 'cloud-download.svg',
   cloud-offline: 'cloud-offline.svg',
   cloud-online: 'cloud-online.svg',
-  cloud-up: 'cloud-up.svg',
   cloud-upload: 'cloud-upload.svg',
   cluster: 'cluster.svg',
-  code-2: 'code-2.svg',
   code: 'code.svg',
   color-fill: 'color-fill.svg',
   color-none: 'color-none.svg',
@@ -59,25 +55,21 @@ $icons24: (
   color: 'color.svg',
   columns: 'columns.svg',
   connected-points: 'connected-points.svg',
+  container: 'container.svg',
   cookie: 'cookie.svg',
   copy: 'copy.svg',
   cpu: 'cpu.svg',
-  cross-bars: 'cross-bars.svg',
-  dark-mode: 'dark-mode.svg',
   data-dimentions: 'data-dimentions.svg',
   debug: 'debug.svg',
   delete-bin: 'delete-bin.svg',
   delete-circle: 'delete-circle.svg',
   delete-clear: 'delete-clear.svg',
-  delete: 'delete.svg',
-  dendrogram-X-1: 'dendrogram-X-1.svg',
   dendrogram-X-line: 'dendrogram-X-line.svg',
   dendrogram-X: 'dendrogram-X.svg',
-  dendrogram-Y-1: 'dendrogram-Y-1.svg',
   dendrogram-Y-line: 'dendrogram-Y-line.svg',
   dendrogram-Y: 'dendrogram-Y.svg',
   dna: 'dna.svg',
-  download-files: 'download-files.svg',
+  download: 'download.svg',
   drag-dots: 'drag-dots.svg',
   drag-horizontal: 'drag-horizontal.svg',
   drag-vertical: 'drag-vertical.svg',
@@ -87,33 +79,27 @@ $icons24: (
   error: 'error.svg',
   expand-left: 'expand-left.svg',
   expand-right: 'expand-right.svg',
-  export-2: 'export-2.svg',
   export: 'export.svg',
-  external-link: 'external-link.svg',
+  file-doc-add: 'file-doc-add.svg',
+  file-doc-download: 'file-doc-download.svg',
+  file-doc-import: 'file-doc-import.svg',
+  file-doc: 'file-doc.svg',
   files-export: 'files-export.svg',
   files-import: 'files-import.svg',
-  fill-color: 'fill-color.svg',
   filter-on: 'filter-on.svg',
   filter: 'filter.svg',
-  filters-gate: 'filters-gate.svg',
   fire-tips: 'fire-tips.svg',
   folder-parent: 'folder-parent.svg',
-  frame-type--left: 'frame-type--left.svg',
   frame-type-all: 'frame-type-all.svg',
   frame-type-bottom: 'frame-type-bottom.svg',
   frame-type-left-bottom: 'frame-type-left-bottom.svg',
+  frame-type-left: 'frame-type-left.svg',
   frame-type-none: 'frame-type-none.svg',
-  frame-type: 'frame-type.svg',
   generate: 'generate.svg',
   graph: 'graph.svg',
   heatmap: 'heatmap.svg',
   help-outline: 'help-outline.svg',
   help: 'help.svg',
-  hide: 'hide.svg',
-  import-2: 'import-2.svg',
-  import-download: 'import-download.svg',
-  import: 'import.svg',
-  info-circle-outline: 'info-circle-outline.svg',
   info-outline: 'info-outline.svg',
   info: 'info.svg',
   jitter: 'jitter.svg',
@@ -124,7 +110,6 @@ $icons24: (
   legend-box-dot: 'legend-box-dot.svg',
   legend-box: 'legend-box.svg',
   legend: 'legend.svg',
-  light-mode: 'light-mode.svg',
   line-binned: 'line-binned.svg',
   line-error: 'line-error.svg',
   line-jitter: 'line-jitter.svg',
@@ -135,22 +120,15 @@ $icons24: (
   linetype-longdash: 'linetype-longdash.svg',
   linetype-solid: 'linetype-solid.svg',
   linetype-twodash: 'linetype-twodash.svg',
-  linetype: 'linetype.svg',
   link-disabled: 'link-disabled.svg',
   link: 'link.svg',
   loading: 'loading.svg',
-  local: 'local.svg',
   lock: 'lock.svg',
-  logout: 'logout.svg',
   maximize: 'maximize.svg',
   menu: 'menu.svg',
   minimize: 'minimize.svg',
   minus: 'minus.svg',
-  mode-dark: 'mode-dark.svg',
-  mode-light: 'mode-light.svg',
-  more-horizontal: 'more-horizontal.svg',
   more: 'more.svg',
-  outlier-shape: 'outlier-shape.svg',
   paper-clip: 'paper-clip.svg',
   pause: 'pause.svg',
   pin: 'pin.svg',
@@ -163,59 +141,51 @@ $icons24: (
   position-right: 'position-right.svg',
   position-top-annotation: 'position-top-annotation.svg',
   position-top: 'position-top.svg',
-  position: 'position.svg',
-  progress-2: 'progress-2.svg',
-  progress: 'progress.svg',
+  product: 'product.svg',
   publications: 'publications.svg',
-  radio-btn: 'radio-btn.svg',
   radio-button-checked: 'radio-button-checked.svg',
   radio-button: 'radio-button.svg',
+  renew: 'renew.svg',
   restart: 'restart.svg',
   reverse: 'reverse.svg',
   rotation-0: 'rotation-0.svg',
   rotation-45: 'rotation-45.svg',
   rotation-90: 'rotation-90.svg',
-  rotation: 'rotation.svg',
-  save: 'save.svg',
   search: 'search.svg',
-  server-2: 'server-2.svg',
   server-on: 'server-on.svg',
   server: 'server.svg',
-  settings-2: 'settings-2.svg',
   settings: 'settings.svg',
-  show: 'show.svg',
   sina: 'sina.svg',
   skatterplot: 'skatterplot.svg',
   slice: 'slice.svg',
   social-github: 'social-github.svg',
   social-linkedin: 'social-linkedin.svg',
-  social-media: 'social-media.svg',
   social-twitter-X: 'social-twitter-X.svg',
   social-twitter-bird: 'social-twitter-bird.svg',
   social-youtube: 'social-youtube.svg',
   sort-list-down: 'sort-list-down.svg',
   sort-list-up: 'sort-list-up.svg',
   sort: 'sort.svg',
-  stacked-bar: 'stacked-bar.svg',
   statistics: 'statistics.svg',
   stop: 'stop.svg',
   strip-plot: 'strip-plot.svg',
-  stroke-non: 'stroke-non.svg',
-  stroke: 'stroke.svg',
   success: 'success.svg',
-  table-upload: 'table-upload.svg',
+  table-add: 'table-add.svg',
+  table-alias: 'table-alias.svg',
+  table-import: 'table-import.svg',
   table: 'table.svg',
   template: 'template.svg',
   terminal: 'terminal.svg',
   text-align-center: 'text-align-center.svg',
   text-align-left: 'text-align-left.svg',
   text-align-right: 'text-align-right.svg',
-  title-position: 'title-position.svg',
+  theme-dark: 'theme-dark.svg',
+  theme-light: 'theme-light.svg',
+  time: 'time.svg',
   tune: 'tune.svg',
-  upload-files: 'upload-files.svg',
   venn: 'venn.svg',
-  view-off: 'view-off.svg',
-  view-on: 'view-on.svg',
+  view-hide: 'view-hide.svg',
+  view-show: 'view-show.svg',
   violin-binned: 'violin-binned.svg',
   violin-jitter: 'violin-jitter.svg',
   violin: 'violin.svg',

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,9 @@ 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';
 
 const emit = defineEmits<{
   /**
@@ -109,6 +112,7 @@ const data = reactive({
   search: '',
   activeIndex: -1,
   open: false,
+  optionsHeight: 0,
 });
 
 const findActiveIndex = () =>
@@ -224,7 +228,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;
   }
@@ -300,20 +306,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(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="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"
@@ -330,9 +365,9 @@ watchPostEffect(() => {
             <LongText class="input-value"> {{ textValue }} </LongText>
           </div>
 
-          <div class="ui-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" />
+          <div class="pl-dropdown__controls">
+            <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
+            <PlIcon16 v-if="clearable && hasValue" name="delete-clear" @click.stop="clear" />
             <slot name="append" />
             <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" @click.stop="toggleOpen" />
             <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" @click.stop="toggleOpen" />
@@ -348,23 +383,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="isLoadingOptions && loadingOptionsHelper" class="ui-dropdown__helper">{{ loadingOptionsHelper }}</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,65 +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;
@@ -181,7 +179,7 @@
     gap: 6px;
     margin-left: auto;
 
-    .icon-clear {
+    .icon-delete-clear {
       cursor: pointer;
     }