@milaboratories/uikit 2.2.22 → 2.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.22",
+  "version": "2.2.23",
   "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

@@ -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;
   }
 }