@milaboratories/uikit 2.0.5 → 2.0.7

package/src/components/PlFileInput/PlFileInput.vue

@@ -3,7 +3,7 @@ import './pl-file-input.scss';
 import { PlTooltip } from '@/components/PlTooltip';
 import { PlFileDialog } from '@/components/PlFileDialog';
 import type { ImportedFiles } from '@/types';
-import MaskIcon24 from '@/components/MaskIcon24.vue';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
 import { computed, reactive, ref, useSlots } from 'vue';
 import type { ImportFileHandle, ImportProgress } from '@platforma-sdk/model';
 import { getFilePathFromHandle } from '@platforma-sdk/model';
@@ -166,15 +166,15 @@ if (!props.cellStyle) {
           </template>
         </PlTooltip>
       </label>
-      <MaskIcon24 v-if="hasErrors" name="restart" />
-      <MaskIcon24 v-else-if="isUploading" name="cloud-up" />
-      <MaskIcon24 v-else-if="isUploaded" name="success" />
-      <MaskIcon24 v-else name="paper-clip" />
+      <PlMaskIcon24 v-if="hasErrors" name="restart" />
+      <PlMaskIcon24 v-else-if="isUploading" name="cloud-up" />
+      <PlMaskIcon24 v-else-if="isUploaded" name="success" />
+      <PlMaskIcon24 v-else name="paper-clip" />
       <div :data-placeholder="placeholder ?? 'Choose file'" class="pl-file-input__filename" @click.stop="openFileDialog">
         {{ fileName }}
       </div>
       <div v-if="uploadStats" class="pl-file-input__stats">{{ uploadStats }}</div>
-      <MaskIcon24 v-if="modelValue" name="close" @click.stop="clear" />
+      <PlMaskIcon24 v-if="modelValue" name="close" @click.stop="clear" />
       <DoubleContour class="pl-file-input__contour" />
     </div>
     <div v-if="hasErrors" class="pl-file-input__error">

package/src/components/PlIcon16/PlIcon16.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { MaskIconName16, Size } from '@/types';
+
+const props = defineProps<{
+  name: MaskIconName16;
+  size?: Size;
+}>();
+
+const style = computed(() => (props.size === 'large' ? '--icon-size: 24px' : ''));
+
+const className = computed(() => `icon-16 icon-${props.name}`);
+</script>
+
+<template>
+  <i :style="style" :class="[className, $style.icon]" />
+</template>
+
+<style module>
+.icon {
+  display: inline-block;
+}
+</style>

package/src/components/PlIcon16/index.ts

@@ -0,0 +1 @@
+export { default as PlIcon16 } from './PlIcon16.vue';

package/src/components/PlIcon24/PlIcon24.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { MaskIconName24, Size } from '@/types';
+
+const props = defineProps<{
+  name: MaskIconName24;
+  size?: Size;
+}>();
+
+const className = computed(() => `icon-24 icon-${props.name}`);
+</script>
+
+<template>
+  <i :class="[className, $style.icon]" />
+</template>
+
+<style module>
+.icon {
+  display: inline-block;
+}
+</style>

package/src/components/PlIcon24/index.ts

@@ -0,0 +1 @@
+export { default as PlIcon24 } from './PlIcon24.vue';

package/src/components/PlLogView/PlLogView.vue

@@ -8,8 +8,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUpdated, ref } from 'vue';
-import MaskIcon24 from '../MaskIcon24.vue';
+import { computed, ref, watch } from 'vue';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
 import './pl-log-view.scss';
 import { okOptional, tapIf } from '@milaboratories/helpers';
 import type { AnyLogHandle, Platforma, ValueOrErrors } from '@platforma-sdk/model';
@@ -54,6 +54,8 @@ const props = defineProps<{
 
 const logState = useLogHandle(props);
 
+const isAnchored = ref<boolean>(true);
+
 const contentRef = ref<HTMLElement>();
 
 const computedError = computed(() => logState.value?.error ?? props.error ?? getOutputError(props.output));
@@ -68,22 +70,32 @@ const onClickCopy = () => {
 
 const scrollDown = () => {
   tapIf(contentRef.value, (el) => {
-    // 100px from bottom (temp)
-    if (el.clientHeight + el.scrollTop + 100 > el.scrollHeight) {
+    if (isAnchored.value) {
       el.scrollTo(el.scrollLeft, el.scrollHeight);
     }
   });
 };
 
-onMounted(scrollDown);
+watch(
+  computedValue,
+  () => {
+    requestAnimationFrame(() => {
+      scrollDown();
+    });
+  },
+  { immediate: true },
+);
 
-onUpdated(scrollDown);
+const onContentScroll = (ev: Event) => {
+  const el = ev.target as HTMLElement;
+  isAnchored.value = el.scrollTop + 20 /* ~ 1 line height */ >= el.scrollHeight - el.offsetHeight;
+};
 </script>
 
 <template>
   <div class="pl-log-view" :class="{ 'has-error': computedError }">
-    <MaskIcon24 title="Copy content" class="pl-log-view__copy" name="clipboard" @click="onClickCopy" />
+    <PlMaskIcon24 title="Copy content" class="pl-log-view__copy" name="clipboard" @click="onClickCopy" />
     <div v-if="computedError" class="pl-log-view__error">{{ computedError }}</div>
-    <div v-else ref="contentRef" class="pl-log-view__content">{{ computedValue }}</div>
+    <div v-else ref="contentRef" class="pl-log-view__content" @scroll="onContentScroll">{{ computedValue }}</div>
   </div>
 </template>

package/src/components/PlMaskIcon16/index.ts

@@ -0,0 +1 @@
+export { default as PlMaskIcon16 } from './PlMaskIcon16.vue';

package/src/components/PlMaskIcon24/index.ts

@@ -0,0 +1 @@
+export { default as PlMaskIcon24 } from './PlMaskIcon24.vue';

package/src/generated/icons-16.ts

@@ -2,8 +2,10 @@ export const maskIcons16 = [
   'add',
   'arrow-down',
   'arrow-left',
+  'arrow-link',
   'arrow-right',
   'arrow-up',
+  'box',
   'cell-type-num',
   'cell-type-txt',
   'checkmark',
@@ -21,16 +23,24 @@ export const maskIcons16 = [
   'compare',
   'copy',
   'data-dimentions',
+  'delete-bin',
+  'delete-circle',
+  'delete-clear',
   'delete',
   'drag-dots',
+  'duplicate',
   'edit',
   'error',
   'export',
   'filter-2',
+  'filter-on',
   'filter',
+  'help-outline',
   'help',
   'import',
+  'info-outline',
   'info',
+  'jump-link',
   'link-arrow',
   'link',
   'loading',
@@ -39,16 +49,20 @@ export const maskIcons16 = [
   'minimize',
   'minus',
   'more-horizontal',
+  'more',
   'open',
   'pause',
   'play',
   'required',
   'restart',
+  'reverse',
   'settings-2',
+  'settings',
   'sort',
   'sorter',
   'stop',
   'success',
+  'tune',
   'warning',
   'x-axis',
   'y-axis',

package/src/generated/icons-24.ts

@@ -1,19 +1,26 @@
 export const maskIcons24 = [
   'add-layer',
   'add',
+  'align-center',
+  'align-left',
+  'align-right',
   'annotate',
   'annotation',
   'area',
   'arrow-down',
   'arrow-left',
+  'arrow-link',
   'arrow-right',
   'arrow-up',
   'axes',
+  'bar-cross',
   'bar-error',
+  'bar-stacked',
   'bar-trend',
   'bar',
   'bindot',
   'box-dot',
+  'box',
   'boxplot-1',
   'boxplot-binned',
   'boxplot-jitter',
@@ -21,9 +28,15 @@ export const maskIcons24 = [
   'boxplot',
   'bubble',
   'canvas',
+  'cell-type-num',
+  'cell-type-txt',
+  'checkbox-checked',
+  'checkbox-intermediate',
   'checkbox',
   'checkmark',
   'chevron-down',
+  'chevron-first',
+  'chevron-last',
   'chevron-left',
   'chevron-right',
   'chevron-sort',
@@ -32,26 +45,42 @@ export const maskIcons24 = [
   'clipboard',
   'close',
   'cloud-down',
+  'cloud-download',
   'cloud-offline',
   'cloud-online',
   'cloud-up',
+  'cloud-upload',
+  'cluster',
   'code-2',
   'code',
+  'color-fill',
+  'color-none',
+  'color-stroke',
   'color',
   'columns',
   'connected-points',
+  'cookie',
   'copy',
   'cpu',
   'cross-bars',
   'dark-mode',
+  'data-dimentions',
+  'debug',
   'delete-bin',
+  'delete-circle',
+  'delete-clear',
   'delete',
   'dendrogram-X-1',
+  'dendrogram-X-line',
   'dendrogram-X',
   'dendrogram-Y-1',
+  'dendrogram-Y-line',
   'dendrogram-Y',
   'dna',
   'download-files',
+  'drag-dots',
+  'drag-horizontal',
+  'drag-vertical',
   'duplicate',
   'edit',
   'error-bar',
@@ -61,61 +90,115 @@ export const maskIcons24 = [
   'export-2',
   'export',
   'external-link',
+  'files-export',
+  'files-import',
   'fill-color',
   'filter-on',
   'filter',
   'filters-gate',
   'fire-tips',
   'folder-parent',
+  'frame-type--left',
+  'frame-type-all',
+  'frame-type-bottom',
+  'frame-type-left-bottom',
+  'frame-type-none',
   'frame-type',
   'generate',
   'graph',
   'heatmap',
+  'help-outline',
   'help',
   'hide',
   'import-2',
   'import-download',
+  'import',
   'info-circle-outline',
+  'info-outline',
+  'info',
   'jitter',
+  'jump-link',
+  'lasso',
   'layers',
   'learn',
+  'legend-box-dot',
+  'legend-box',
   'legend',
   'light-mode',
   'line-binned',
   'line-error',
   'line-jitter',
   'line',
+  'linetype-dashed',
+  'linetype-dotdash',
+  'linetype-dotted',
+  'linetype-longdash',
+  'linetype-solid',
+  'linetype-twodash',
   'linetype',
   'link-disabled',
   'link',
   'loading',
   'local',
+  'lock',
   'logout',
+  'maximize',
   'menu',
+  'minimize',
   'minus',
+  'mode-dark',
+  'mode-light',
   'more-horizontal',
+  'more',
   'outlier-shape',
   'paper-clip',
+  'pause',
   'pin',
+  'play',
+  'position-bottom-annotation',
+  'position-bottom',
+  'position-left-annotation',
+  'position-left',
+  'position-right-annotation',
+  'position-right',
+  'position-top-annotation',
+  'position-top',
   'position',
   'progress-2',
   'progress',
   'publications',
   'radio-btn',
+  'radio-button-checked',
+  'radio-button',
   'restart',
   'reverse',
+  'rotation-0',
+  'rotation-45',
+  'rotation-90',
   'rotation',
   'save',
   'search',
   'server-2',
+  'server-on',
+  'server',
   'settings-2',
+  'settings',
   'show',
   'sina',
   'skatterplot',
+  'slice',
+  'social-github',
+  'social-linkedin',
   'social-media',
+  'social-twitter-X',
+  'social-twitter-bird',
+  'social-youtube',
+  'sort-list-down',
+  'sort-list-up',
   'sort',
   'stacked-bar',
   'statistics',
+  'stop',
   'strip-plot',
   'stroke-non',
   'stroke',
@@ -123,13 +206,26 @@ export const maskIcons24 = [
   'table-upload',
   'table',
   'template',
+  'terminal',
+  'text-align-center',
+  'text-align-left',
+  'text-align-right',
   'title-position',
+  'tune',
   'upload-files',
   'venn',
+  'view-off',
+  'view-on',
   'violin-binned',
   'violin-jitter',
   'violin',
   'warning',
   'wetlab',
+  'windows-collapse',
+  'windows-expand',
+  'x-axis',
+  'y-axis',
+  'zip',
   'zoom-in',
+  'zoom-out',
 ] as const;

package/src/index.ts

@@ -1,10 +1,7 @@
 import './assets/ui.scss';
 
 // @TODO review
-import GridTable from '@/components/GridTable/index.vue';
 import * as DataTable from '@/components/DataTable';
-import type { Settings as GridTableSettings } from './components/GridTable/types';
-import type * as GridTableTypes from './components/GridTable/types';
 import ThemeSwitcher from './components/ThemeSwitcher.vue';
 
 /**
@@ -50,12 +47,15 @@ export * from './components/PlFileInput';
 export * from './components/PlNotificationAlert';
 export * from './components/PlCopyData';
 
+export * from './components/PlMaskIcon16';
+export * from './components/PlMaskIcon24';
+export * from './components/PlIcon16';
+export * from './components/PlIcon24';
+
 // @TODO review (may be private)
 import DropdownListItem from './components/DropdownListItem.vue';
 
 // @TODO review
-import MaskIcon16 from './components/MaskIcon16.vue';
-import MaskIcon24 from './components/MaskIcon24.vue';
 import ContextProvider from './components/ContextProvider.vue';
 import Slider from './components/Slider.vue';
 import { showContextMenu } from './components/contextMenu/index.ts';
@@ -107,14 +107,11 @@ export * from './helpers/utils';
 /**
  * @TODO review
  */
-export { ThemeSwitcher, DropdownListItem, MaskIcon16, MaskIcon24, GridTable, DataTable, ContextProvider, Slider };
+export { ThemeSwitcher, DropdownListItem, DataTable, ContextProvider, Slider };
 
 // Helpers
 export { showContextMenu };
 
-// types
-export type { GridTableSettings, GridTableTypes };
-
 //move to new version pl-uikit
 export { LongText, SliderRangeTriple, SliderRange, Scrollable };