@milaboratories/uikit 2.2.24 → 2.2.26

package/package.json

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

package/src/assets/base.scss

@@ -61,7 +61,7 @@
   --chip-close-ic-hover-color: #110529;
 
   --tooltip-link-color: hsla(160, 100%, 37%, 1);
-  --tooltip-bg: #24223d;
+  --tooltip-bg: var(--bg-base-dark, #110529);
 
   --theme-switcher-icon-color: var(--txt-01);
 

package/src/assets/dropdown-list-item.scss

@@ -22,6 +22,7 @@
         line-height: 24px !important;
         display: flex;
         align-items: center;
+        word-break: break-word;
     }
 
     &__icon {

package/src/components/PlFileDialog/Remote.vue

@@ -6,6 +6,8 @@ import type { StorageHandle } from '@platforma-sdk/model';
 import { computed, onMounted, reactive, toRef, watch } from 'vue';
 import { PlDropdown } from '../PlDropdown';
 import { PlIcon16 } from '../PlIcon16';
+import Shortcuts from './Shortcuts.vue';
+import { PlMaskIcon16 } from '../PlMaskIcon16';
 import { PlSearchField } from '../PlSearchField';
 import style from './pl-file-dialog.module.scss';
 import { defaultData, useVisibleItems, vTextOverflown } from './remote';
@@ -135,7 +137,7 @@ const selectFile = (ev: MouseEvent, file: FileDialogItem) => {
       data.items.forEach((f) => (f.selected = false));
     }
 
-    file.selected = true;
+    file.selected = !file.selected;
 
     if (!props.multi) {
       return;
@@ -283,7 +285,10 @@ onMounted(loadAvailableStorages);
             <PlIcon16 v-if="s.index !== breadcrumbs.length - 1" name="chevron-right" />
           </template>
         </div>
-        <div :class="style.selected">Selected: {{ selectedFiles.length }}</div>
+        <div :class="style.selected">
+          <span>Selected: {{ selectedFiles.length }}</span>
+          <Shortcuts />
+        </div>
       </div>
       <div v-if="data.currentLoadingPath !== undefined" class="ls-loader">
         <i class="mask-24 mask-loading loader-icon" />
@@ -299,7 +304,7 @@ onMounted(loadAvailableStorages);
       <div v-else :class="style['ls-body']">
         <template v-for="file in visibleItems" :key="file.id">
           <div v-if="file.isDir" :class="style.isDir" @click="setDirPath(file.path)">
-            <i class="icon-16 icon-chevron-right" />
+            <PlIcon16 name="chevron-right" />
             <span v-text-overflown :title="file.name">{{ file.name }}</span>
           </div>
           <div
@@ -307,7 +312,7 @@ onMounted(loadAvailableStorages);
             :class="{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }"
             @click.stop="(ev) => selectFile(ev, file)"
           >
-            <i class="mask-16 mask-box" :class="style.isFile" />
+            <PlMaskIcon16 name="box" :class="style.isFile" />
             <span v-text-overflown :title="file.name">{{ file.name }}</span>
           </div>
         </template>

package/src/components/PlFileDialog/Shortcuts.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { PlTooltip } from '../PlTooltip';
+</script>
+
+<template>
+  <PlTooltip class="info" position="southwest" max-width="420px">
+    <template #tooltip>
+      <span :class="$style.title">Shortcuts</span>
+
+      <div :class="[$style.row, $style.head]">
+        <div></div>
+        <div>MacOS</div>
+        <div>Windows/Linux</div>
+      </div>
+
+      <div :class="[$style.row, $style.body]">
+        <div>Single File</div>
+        <div>Click the file</div>
+        <div>Click the file</div>
+
+        <div>Adjacent multiple files</div>
+        <div>Hold Shift, click first and last files</div>
+        <div>Hold Shift, click first and last files</div>
+
+        <div>Non-adjacent multiple files</div>
+        <div>Hold Command (⌘), click each file</div>
+        <div>Hold Ctrl, click each file</div>
+
+        <div>All files</div>
+        <div>Press Command (⌘) + A</div>
+        <div>Press Ctrl + A</div>
+      </div>
+    </template>
+  </PlTooltip>
+</template>
+
+<style lang="css" module>
+.title {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  margin-bottom: 10px;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+  color: #fff;
+  column-gap: 1px;
+
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.row > div:nth-child(3n + 1) {
+  padding-left: 4px;
+}
+
+.row > div:nth-child(3n) {
+  padding-right: 4px;
+}
+
+.head {
+  background-color: #110529;
+  position: relative;
+}
+
+.head:before {
+  position: absolute;
+  content: '';
+  background-color: #231842;
+  width: 12px;
+  left: -12px;
+  height: 100%;
+}
+
+.head:after {
+  position: absolute;
+  content: '';
+  background-color: #231842;
+  width: 12px;
+  right: -12px;
+  height: 100%;
+}
+
+.head > div {
+  padding: 6px 12px;
+  background-color: #231842;
+}
+
+.body {
+  background-color: #231842;
+}
+
+.body > div {
+  padding: 6px 12px;
+  background: #110529;
+}
+</style>

package/src/components/PlTooltip/PlTooltip.vue

@@ -7,7 +7,7 @@ export default {
 
 <script lang="ts" setup>
 import './pl-tooltip.scss';
-import { onUnmounted, reactive, ref, toRef, watch } from 'vue';
+import { computed, onUnmounted, reactive, ref, toRef, watch } from 'vue';
 import { useTooltipPosition } from './useTooltipPosition';
 import * as utils from '@/helpers/utils';
 import { useClickOutside } from '@/composition/useClickOutside';
@@ -31,7 +31,7 @@ const props = withDefaults(
     /**
      * Tooltip position
      */
-    position?: 'top-left' | 'left' | 'right' | 'top';
+    position?: 'top-left' | 'left' | 'right' | 'top' | 'southwest';
     /**
      * external prop to hide tooltips
      */
@@ -44,6 +44,10 @@ const props = withDefaults(
      * base html element for tooltip
      */
     element?: 'div' | 'span' | 'a' | 'p' | 'h1' | 'h2' | 'h3';
+    /**
+     * Max width (css value) of the tooltip container (default is 300px)
+     */
+    maxWidth?: string;
   }>(),
   {
     openDelay: 100,
@@ -51,6 +55,7 @@ const props = withDefaults(
     gap: 8,
     position: 'top',
     element: 'div',
+    maxWidth: '300px',
   },
 );
 
@@ -135,6 +140,10 @@ const style = useTooltipPosition(rootRef, toRef(props));
 
 useClickOutside([rootRef, tooltip], () => closeTooltip());
 
+const tooltipStyle = computed(() => ({
+  '--pl-tooltip-max-width': props.maxWidth,
+}));
+
 onUnmounted(() => {
   tMap.delete(tKey);
 });
@@ -146,7 +155,7 @@ onUnmounted(() => {
     <Teleport v-if="$slots['tooltip'] && data.open" to="body">
       <Transition name="tooltip-transition">
         <div v-if="data.tooltipOpen" class="pl-tooltip__container" :style="style">
-          <div ref="tooltip" class="pl-tooltip" :class="position" @mouseover="onOver" @mouseleave="onLeave">
+          <div ref="tooltip" class="pl-tooltip" :style="tooltipStyle" :class="position" @mouseover="onOver" @mouseleave="onLeave">
             <!-- should be one line -->
             <div><slot name="tooltip" /></div>
             <Beak />

package/src/components/PlTooltip/pl-tooltip.scss

@@ -1,14 +1,16 @@
 .pl-tooltip {
+  --pl-tooltip-max-width: 300px;
+
   z-index: var(--z-tooltip);
   position: absolute;
   display: inline-block;
-  padding: 7px 12px 9px 12px;
+  padding: 8px 12px 9px 12px;
   background: var(--tooltip-bg);
   border-radius: 6px;
   width: max-content;
   word-break: normal;
   transform-origin: 0 50%;
-  max-width: 300px;
+  max-width: var(--pl-tooltip-max-width);
   color: #fff;
 
   &__container {
@@ -82,6 +84,18 @@
       left: 50%;
     }
   }
+
+  &.southwest {
+    transform: translateY(100%);
+    bottom: 0;
+    right: -6px;
+    .beak {
+      position: absolute;
+      top: -2px;
+      transform: translateY(-50%) rotate(90deg);
+      right: 12px;
+    }
+  }
 }
 
 .tooltip-transition {

package/src/components/PlTooltip/useTooltipPosition.ts

@@ -3,7 +3,7 @@ import { useElementPosition } from '@/composition/usePosition';
 import type { ElementPosition } from '@/types';
 
 type Options = {
-  position: 'top-left' | 'right' | 'left' | 'top';
+  position: 'top-left' | 'right' | 'left' | 'top' | 'southwest';
   gap: number;
 };
 
@@ -33,6 +33,7 @@ export function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef:
 
     const offsetMiddleY = pos.offsetY + Math.floor(pos.height / 2);
     const offsetMiddleX = pos.offsetX + Math.floor(pos.width / 2);
+
     if (position === 'top-left') {
       return `left: ${pos.offsetX}px; top: ${pos.offsetY - gap}px;`;
     }
@@ -49,6 +50,10 @@ export function useTooltipPosition(el: Ref<HTMLElement | undefined>, optionsRef:
       return `right: ${pos.scrollWidth - pos.x + gap}px; top: ${offsetMiddleY}px;`;
     }
 
+    if (position === 'southwest') {
+      return `left: ${pos.offsetX + pos.width}px; top: ${pos.offsetY + pos.height + gap}px;`;
+    }
+
     return '';
   });
 }