@milaboratories/uikit 1.2.30 → 2.0.0

package/package.json

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

package/scripts/parse-icons.js

@@ -39,7 +39,12 @@ async function generateSCSS() {
       return `  ${icon}: '${name}'`; // keep extension
     });
 
+    const names = Object.keys(json)
+      .map((k) => `  '${k}'`)
+      .join(',\n');
+
     await fp.writeFile(`./src/assets/icons/icons-${size}-generated.scss`, `$icons${size}: (\n${lines.join(',\n')}\n)`);
+    await fp.writeFile(`./src/generated/icons-${size}.ts`, `export const maskIcons${size} = [\n${names},\n] as const;\n`);
     await fp.writeFile(`./src/assets/icons/icons-${size}-generated.json`, JSON.stringify(json, null, 2));
   }
 }

package/src/components/PlDialogModal/pl-dialog-modal.scss

@@ -51,13 +51,13 @@
     min-height: 0;
     line-height: 20px;
     // background-color: #33333333; //
+    @include scrollbar();
     &.no-content-gutters {
       padding: 0 0;
     }
     &.no-top-content-gutter {
       padding-top: 0;
     }
-    @include scrollbar();
   }
 
   &__actions {

package/src/components/PlFileInput/PlFileInput.vue

@@ -68,6 +68,11 @@ const props = withDefaults(
      * If `true`, only the file name is displayed, not the full path to it.
      */
     showFilenameOnly?: boolean;
+
+    /**
+     * Remove rounded border and change styles
+     */
+    cellStyle?: boolean;
   }>(),
   {
     label: undefined,
@@ -77,6 +82,7 @@ const props = withDefaults(
     progress: undefined,
     error: undefined,
     helper: undefined,
+    cellStyle: false,
   },
 );
 
@@ -142,14 +148,16 @@ const clear = () => emit('update:modelValue', undefined);
 
 const rootRef = ref();
 
-useLabelNotch(rootRef);
+if (!props.cellStyle) {
+  useLabelNotch(rootRef);
+}
 </script>
 
 <template>
-  <div class="pl-file-input__envelope">
+  <div :class="{ 'pl-file-input__cell-style': !!cellStyle, 'has-file': !!fileName }" class="pl-file-input__envelope">
     <div ref="rootRef" class="pl-file-input" tabindex="0" :class="{ dashed, error: hasErrors }" @keyup.enter="openFileDialog">
       <div class="pl-file-input__progress" :style="progressStyle" />
-      <label v-if="label" ref="label">
+      <label v-if="!cellStyle && label" ref="label">
         <i v-if="required" class="required-icon" />
         <span>{{ label }}</span>
         <PlTooltip v-if="slots.tooltip" class="info" position="top">

package/src/components/PlFileInput/pl-file-input.scss

@@ -14,8 +14,8 @@
   --icon-color: #000;
 
   width: 100%;
-  min-width: 160px;
-  min-height: var(--control-height);
+  // min-width: 160px;
+  height: 40px;
   position: relative;
   border-radius: var(--border-radius-control);
   display: flex;
@@ -28,6 +28,10 @@
 
   &__envelope {
     font-family: var(--font-family-base);
+    height: var(--control-height);
+    display: flex;
+    align-items: center;
+    min-width: 160px;
   }
 
   .mask-24 {
@@ -52,14 +56,12 @@
   }
 
   &__filename {
-    height: 100%;
     width: 100%;
     border: none;
     font-size: inherit;
     background-color: transparent;
     color: var(--text-color);
     caret-color: var(--border-color-focus);
-    cursor: inherit;
     z-index: 1;
     white-space: nowrap;
     overflow: hidden;
@@ -118,9 +120,11 @@
     flex-direction: row;
     align-items: center;
     gap: 4px;
+
     .icon {
       cursor: pointer;
     }
+
     .mask {
       background-color: var(--control-mask-fill);
       cursor: pointer;
@@ -166,6 +170,7 @@
     --label-color: var(--txt-error);
     --text-color: var(--txt-error);
     --icon-color: var(--txt-error);
+
     .pl-file-input__progress {
       display: none;
     }
@@ -176,3 +181,76 @@
     cursor: not-allowed;
   }
 }
+
+// @TODO
+.pl-file-input__cell-style {
+  $root: &;
+
+  --border-radius-control: 0px;
+  --input-active-color: var(--bg-base-light);
+  --border-color: var(--border-color-div-grey);
+
+  background-color: var(--input-active-color);
+  padding: 4px;
+  height: 100%;
+  position: relative;
+
+  .mask-paper-clip {
+    display: none;
+  }
+
+  .pl-file-input {
+    height: 100% !important;
+    position: unset;
+
+    .double-contour {
+      inset: 2px;
+    }
+
+    &__contour {
+      border-width: 1px;
+      box-shadow: unset !important;
+      border-color: var(--border-color);
+      border-style: dashed;
+    }
+
+    &__filename {
+      text-align: center !important;
+    }
+
+    &__error {
+      margin-top: 0;
+      margin-right: 8px;
+    }
+  }
+
+  &:hover {
+    --border-color: var(--border-color-focus);
+    background-color: #D9F8CA;
+  }
+
+  &:hover .pl-file-input__filename::before {
+    color: #110529 !important;
+  }
+
+  &.has-file:hover {
+    background-color: var(--input-active-color);
+  }
+
+  &.has-file {
+    padding-left: 0;
+    padding-right: 0;
+
+    .pl-file-input__contour {
+      border: unset;
+    }
+
+    .pl-file-input__filename {
+      text-align: left !important;
+    }
+
+    .mask-paper-clip {
+      display: block;
+    }
+  }
+}

package/src/generated/icons-16.ts

@@ -0,0 +1,56 @@
+export const maskIcons16 = [
+  'add',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'cell-type-num',
+  'cell-type-txt',
+  'checkmark',
+  'chevron-down',
+  'chevron-first',
+  'chevron-last',
+  'chevron-left',
+  'chevron-right',
+  'chevron-up',
+  'clear',
+  'clipboard-copied',
+  'clipboard',
+  'close',
+  'comp',
+  'compare',
+  'copy',
+  'data-dimentions',
+  'delete',
+  'drag-dots',
+  'edit',
+  'error',
+  'export',
+  'filter-2',
+  'filter',
+  'help',
+  'import',
+  'info',
+  'link-arrow',
+  'link',
+  'loading',
+  'lock',
+  'maximize',
+  'minimize',
+  'minus',
+  'more-horizontal',
+  'open',
+  'pause',
+  'play',
+  'required',
+  'restart',
+  'settings-2',
+  'sort',
+  'sorter',
+  'stop',
+  'success',
+  'warning',
+  'x-axis',
+  'y-axis',
+  'zip',
+] as const;

package/src/generated/icons-24.ts

@@ -0,0 +1,134 @@
+export const maskIcons24 = [
+  'add-layer',
+  'add',
+  'annotate',
+  'annotation',
+  'area',
+  'arrow-down',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'axes',
+  'bar-error',
+  'bar-trend',
+  'bar',
+  'bindot',
+  'box-dot',
+  'boxplot-1',
+  'boxplot-binned',
+  'boxplot-jitter',
+  'boxplot-notched',
+  'boxplot',
+  'bubble',
+  'canvas',
+  'checkbox',
+  'checkmark',
+  'chevron-down',
+  'chevron-left',
+  'chevron-right',
+  'chevron-sort',
+  'chevron-up',
+  'clipboard-copied',
+  'clipboard',
+  'close',
+  'cloud-down',
+  'cloud-offline',
+  'cloud-online',
+  'cloud-up',
+  'code-2',
+  'code',
+  'color',
+  'columns',
+  'connected-points',
+  'copy',
+  'cpu',
+  'cross-bars',
+  'dark-mode',
+  'delete',
+  'dendrogram-X-1',
+  'dendrogram-X',
+  'dendrogram-Y-1',
+  'dendrogram-Y',
+  'dna',
+  'download-files',
+  'duplicate',
+  'edit',
+  'error-bar',
+  'error',
+  'expand-left',
+  'expand-right',
+  'export-2',
+  'export',
+  'external-link',
+  'fill-color',
+  'filter-on',
+  'filter',
+  'filters-gate',
+  'fire-tips',
+  'folder-parent',
+  'frame-type',
+  'generate',
+  'graph',
+  'heatmap',
+  'help',
+  'hide',
+  'import-2',
+  'import-download',
+  'info-circle-outline',
+  'jitter',
+  'layers',
+  'learn',
+  'legend',
+  'light-mode',
+  'line-binned',
+  'line-error',
+  'line-jitter',
+  'line',
+  'linetype',
+  'link-disabled',
+  'link',
+  'loading',
+  'local',
+  'logout',
+  'menu',
+  'minus',
+  'more-horizontal',
+  'outlier-shape',
+  'paper-clip',
+  'pin',
+  'position',
+  'progress-2',
+  'progress',
+  'publications',
+  'radio-btn',
+  'restart',
+  'reverse',
+  'rotation',
+  'save',
+  'search',
+  'server-2',
+  'settings-2',
+  'show',
+  'sina',
+  'skatterplot',
+  'social-media',
+  'sort',
+  'stacked-bar',
+  'statistics',
+  'strip-plot',
+  'stroke-non',
+  'stroke',
+  'success',
+  'table-upload',
+  'table',
+  'template',
+  'title-position',
+  'upload-files',
+  'venn',
+  'violin-binned',
+  'violin-jitter',
+  'violin',
+  'warning',
+  'wetlab',
+  'zoom-in',
+] as const;

package/src/types.ts

@@ -1,5 +1,7 @@
 import type { ImportFileHandle, Platforma, StorageHandle, Ref as ModelRef } from '@platforma-sdk/model';
 import type { Ref, ComputedRef } from 'vue';
+import { maskIcons16 } from './generated/icons-16';
+import { maskIcons24 } from './generated/icons-24';
 
 export type Size = 'small' | 'medium' | 'large';
 
@@ -63,28 +65,10 @@ export type RefOption = {
 
 export type ListOptionType<Type> = Type extends ListOption<infer X>[] ? X : never;
 
-export const maskIcons16 = [
-  'checkmark',
-  'import',
-  'clear',
-  'chevron-right',
-  'add',
-  'play',
-  'loading',
-  'arrow-right',
-  'clipboard',
-  'link',
-  'comp',
-  'close',
-  'restart',
-  'stop',
-  'settings-2',
-] as const;
+export { maskIcons16, maskIcons24 };
 
 export type MaskIconName16 = (typeof maskIcons16)[number];
 
-export const maskIcons24 = ['paper-clip', 'cloud-up', 'success', 'restart', 'close', 'clipboard'];
-
 export type MaskIconName24 = (typeof maskIcons24)[number];
 
 export type SliderMode = 'input' | 'text';