@milaboratories/uikit 2.2.21 → 2.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.21",
+  "version": "2.2.23",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",

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/components/PlFileDialog/Remote.vue

@@ -11,6 +11,9 @@ import { defaultData, useVisibleItems, vTextOverflown } from './remote';
 import { PlSearchField } from '../PlSearchField';
 import { PlIcon16 } from '../PlIcon16';
 
+// note that on a Mac, a click combined with the control key is intercepted by the operating system and used to open a context menu, so ctrlKey is not detectable on click events.
+const isCtrlOrMeta = (ev: KeyboardEvent | MouseEvent) => ev.ctrlKey || ev.metaKey;
+
 defineEmits<{
   (e: 'update:modelValue', value: boolean): void;
   (e: 'import:files', value: ImportedFiles): void;
@@ -119,7 +122,10 @@ const setDirPath = (dirPath: string) => {
 };
 
 const selectFile = (ev: MouseEvent, file: FileDialogItem) => {
-  const { shiftKey, metaKey } = ev;
+  const { shiftKey } = ev;
+
+  const ctrlOrMetaKey = isCtrlOrMeta(ev);
+
   const { lastSelected } = data;
 
   ev.preventDefault();
@@ -135,7 +141,7 @@ const selectFile = (ev: MouseEvent, file: FileDialogItem) => {
       return;
     }
 
-    if (!metaKey && !shiftKey) {
+    if (!ctrlOrMetaKey && !shiftKey) {
       data.items.forEach((f) => {
         if (f.id !== file.id) {
           f.selected = false;
@@ -238,12 +244,14 @@ useEventListener(document, 'keydown', (ev: KeyboardEvent) => {
     return;
   }
 
-  if (ev.metaKey && ev.code === 'KeyA') {
+  const ctrlOrMetaKey = isCtrlOrMeta(ev);
+
+  if (ctrlOrMetaKey && ev.code === 'KeyA') {
     ev.preventDefault();
     selectAll();
   }
 
-  if (ev.metaKey && ev.shiftKey && ev.code === 'Period') {
+  if (ctrlOrMetaKey && ev.shiftKey && ev.code === 'Period') {
     ev.preventDefault();
     data.showHiddenItems = !data.showHiddenItems;
   }

package/src/components/PlTextField/PlTextField.vue

@@ -13,7 +13,7 @@ import DoubleContour from '@/utils/DoubleContour.vue';
 import { useLabelNotch } from '@/utils/useLabelNotch';
 import { useValidation } from '@/utils/useValidation';
 import { PlIcon16 } from '../PlIcon16';
-import { PlIcon24 } from '../PlIcon24';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
 import type { Equal } from '@milaboratories/helpers';
 
 const slots = useSlots();
@@ -160,7 +160,7 @@ const displayErrors = computed(() => {
 
 const hasErrors = computed(() => displayErrors.value.length > 0);
 
-const canShowClearable = computed(() => props.clearable && nonEmpty.value && props.type !== 'password');
+const canShowClearable = computed(() => props.clearable && nonEmpty.value && props.type !== 'password' && !props.disabled);
 
 const togglePasswordVisibility = () => (showPassword.value = !showPassword.value);
 
@@ -206,7 +206,7 @@ useLabelNotch(rootRef);
       />
       <div class="pl-text-field__append">
         <PlIcon16 v-if="canShowClearable" class="pl-text-field__clearable" name="delete-clear" @click="clear" />
-        <PlIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click="togglePasswordVisibility" />
+        <PlMaskIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click="togglePasswordVisibility" />
         <slot name="append" />
       </div>
       <DoubleContour class="pl-text-field__contour" />

package/src/components/PlTextField/pl-text-field.scss

@@ -3,6 +3,7 @@
 .pl-text-field {
   $root: &;
 
+  --pl-text-field-text-color: var(--txt-01);
   --contour-color: var(--txt-01);
   --label-color: var(--txt-01);
   --contour-border-width: 1px;
@@ -36,7 +37,7 @@
     border: none;
     font-size: inherit;
     background-color: transparent;
-    color: var(--txt-01);
+    color: var(--pl-text-field-text-color);
     caret-color: var(--border-color-focus);
     cursor: inherit;
 
@@ -140,6 +141,9 @@
 
   &.disabled {
     --contour-color: var(--color-dis-01);
+    --label-color: var(--dis-01);
+    --pl-text-field-text-color: var(--dis-01);
+    --mask-icon-bg-color: var(--dis-01);
     cursor: not-allowed;
   }
 }

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';