@milaboratories/uikit 2.2.22 → 2.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.22",
+  "version": "2.2.24",
   "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",
-    "@milaboratories/helpers": "^1.6.8",
-    "@platforma-sdk/model": "^1.14.1"
+    "@platforma-sdk/model": "^1.14.1",
+    "@milaboratories/helpers": "^1.6.8"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlFileDialog/Remote.vue

@@ -1,15 +1,18 @@
 <script lang="ts" setup>
-import style from './pl-file-dialog.module.scss';
-import { watch, reactive, computed, toRef, onMounted } from 'vue';
+import { useEventListener } from '@/composition/useEventListener';
+import type { ImportedFiles } from '@/types';
 import { between, notEmpty, tapIf } from '@milaboratories/helpers';
 import type { StorageHandle } from '@platforma-sdk/model';
-import type { ImportedFiles } from '@/types';
-import { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from './utils';
+import { computed, onMounted, reactive, toRef, watch } from 'vue';
 import { PlDropdown } from '../PlDropdown';
-import { useEventListener } from '@/composition/useEventListener';
-import { defaultData, useVisibleItems, vTextOverflown } from './remote';
-import { PlSearchField } from '../PlSearchField';
 import { PlIcon16 } from '../PlIcon16';
+import { PlSearchField } from '../PlSearchField';
+import style from './pl-file-dialog.module.scss';
+import { defaultData, useVisibleItems, vTextOverflown } from './remote';
+import { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from './utils';
+
+// 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;
@@ -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;
@@ -183,22 +189,18 @@ const loadAvailableStorages = () => {
   window.platforma.lsDriver
     .getStorageList()
     .then((storageEntries) => {
+      // local storage is always returned by the ML, so we need to remove it from remote dialog manually
+      storageEntries = storageEntries.filter((it) => it.name !== 'local' && !it.name.startsWith('local_disk_'));
+
       data.storageOptions = storageEntries.map((it) => ({
         text: it.name,
         value: it,
       }));
 
       if (props.autoSelectStorage) {
-        tapIf(
-          storageEntries.find(
-            (e) =>
-              e.name === 'local' || // the only local storage on unix systems
-              (e.name.startsWith('local_disk_') && e.initialFullPath.length > 4),
-          ), // local drive where home folder is stored, normally C:\
-          (entry) => {
-            data.storageEntry = entry;
-          },
-        );
+        tapIf(storageEntries[0], (entry) => {
+          data.storageEntry = entry;
+        });
       }
     })
     .catch((err) => (data.error = String(err)));
@@ -238,12 +240,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;
   }
 }