@milaboratories/uikit 1.2.17 → 1.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "1.2.17",
+  "version": "1.2.19",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@vue/test-utils": "^2.4.6",
-    "jsdom": "^24.1.1",
+    "jsdom": "^24.1.3",
     "resize-observer-polyfill": "^1.5.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "tsc-alias": "^1.8.10",
@@ -30,8 +30,9 @@
     "vite": "^5.4.8",
     "vue-tsc": "^2.1.6",
     "yarpm": "^1.2.0",
+    "svgo": "^3.3.2",
     "@milaboratories/helpers": "^1.6.5",
-    "@platforma-sdk/model": "^1.2.32"
+    "@platforma-sdk/model": "^1.5.40"
   },
   "scripts": {
     "dev": "vite",

package/src/assets/icons/icon-assets/24_link-disabled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2215 15.2214L13.5701 12.8728C15.2299 11.213 15.2299 8.52208 13.5701 6.86235C11.9104 5.20262 9.21946 5.20262 7.55973 6.86235L3.31709 11.105C1.65736 12.7647 1.65736 15.4557 3.31709 17.1154C4.38619 18.1845 5.88315 18.5649 7.25677 18.2567L8.45261 19.4526C6.38306 20.2767 3.93154 19.8512 2.25643 18.1761C0.0109174 15.9305 0.0109177 12.2898 2.25643 10.0443L6.49907 5.80169C8.74459 3.55617 12.3853 3.55618 14.6308 5.80169C16.8763 8.0472 16.8763 11.6879 14.6308 13.9334L12.2821 16.2821L11.2215 15.2214Z" fill="#CFD1DB"/>
+<path d="M17.4594 18.1761C15.2139 20.4216 11.5732 20.4216 9.32772 18.1761C7.08221 15.9305 7.08221 12.2898 9.32772 10.0443L11.686 7.68602L12.7467 8.74668L10.3884 11.105C8.72865 12.7647 8.72865 15.4557 10.3884 17.1154C12.0481 18.7751 14.7391 18.7751 16.3988 17.1154L20.6414 12.8728C22.3012 11.213 22.3012 8.52208 20.6414 6.86235C19.5764 5.79734 18.0868 5.41573 16.7175 5.7175L15.5197 4.51969C17.5864 3.70296 20.0307 4.1303 21.7021 5.80169C23.9476 8.0472 23.9476 11.6879 21.7021 13.9334L17.4594 18.1761Z" fill="#CFD1DB"/>
+</svg>

package/src/assets/icons/icon-assets-min/24_link-disabled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#CFD1DB" d="m11.222 15.221 2.348-2.348a4.25 4.25 0 1 0-6.01-6.01l-4.243 4.242a4.25 4.25 0 0 0 3.94 7.152l1.196 1.196a5.751 5.751 0 0 1-6.197-9.409L6.5 5.802a5.75 5.75 0 0 1 8.132 8.131l-2.349 2.35z"/><path fill="#CFD1DB" d="M17.46 18.176a5.75 5.75 0 1 1-8.132-8.132l2.358-2.358 1.06 1.06-2.358 2.359a4.25 4.25 0 1 0 6.01 6.01l4.243-4.242a4.25 4.25 0 0 0-3.923-7.155L15.52 4.52a5.751 5.751 0 0 1 6.182 9.413z"/></svg>

package/src/assets/icons/icons-24-generated.json

@@ -85,6 +85,7 @@
   "line-jitter": "line-jitter.svg",
   "line": "line.svg",
   "linetype": "linetype.svg",
+  "link-disabled": "link-disabled.svg",
   "link": "link.svg",
   "loading": "loading.svg",
   "local": "local.svg",

package/src/assets/icons/icons-24-generated.scss

@@ -85,6 +85,7 @@ $icons24: (
   line-jitter: 'line-jitter.svg',
   line: 'line.svg',
   linetype: 'linetype.svg',
+  link-disabled: 'link-disabled.svg',
   link: 'link.svg',
   loading: 'loading.svg',
   local: 'local.svg',

package/src/assets/icons.scss

@@ -11,10 +11,6 @@
     @include icon(url("./images/16_attention.svg"), var(--icon-size));
   }
 
-  &--clear {
-    @include icon(url("./images/16_clear.svg"), var(--icon-size));
-  }
-
   &--chevron-right {
     @include icon(url("./images/16_chevron-right.svg"), var(--icon-size));
   }

package/src/assets/masks.scss

@@ -15,10 +15,6 @@
     @include mask(url("./images/16_attention.svg"), var(--mask-size));
   }
 
-  &--clear {
-    @include mask(url("./images/16_clear.svg"), var(--mask-size));
-  }
-
   &--chevron-right {
     @include mask(url("./images/16_chevron-right.svg"), var(--mask-size));
   }

package/src/assets/mixins.scss

@@ -79,6 +79,14 @@
 @mixin scrollbar($y: true, $x: false, $over: auto) {
   --thumb-color: var(--ic-02);
 
+  @if $y {
+    overflow-y: $over;
+  }
+
+  @if $x {
+    overflow-x: $over;
+  }
+
   &::-webkit-scrollbar {
     width: 6px;
     height: 5px;
@@ -92,14 +100,6 @@
     border-radius: 5px;
   }
 
-  @if $y {
-    overflow-y: $over;
-  }
-
-  @if $x {
-    overflow-x: $over;
-  }
-
   &:hover {
     --thumb-color: var(--border-color-focus);
   }

package/src/components/PlBtnAccent/pl-btn-accent.scss

@@ -3,11 +3,13 @@
 .ui-btn-accent {
   @include base-btn;
 
-  --color-btn-background: var(--color-accent-default);
-  --color-btn-hover: var(--color-accent-hover);
+  & {
+    --color-btn-background: var(--color-accent-default);
+    --color-btn-hover: var(--color-accent-hover);
 
-  background-color: var(--color-btn-background);
-  border: none;
+    background-color: var(--color-btn-background);
+    border: none;
+  }
 
   &.large {
     --drop-shadow: 3px 3px 0px #000000;

package/src/components/PlBtnGhost/pl-btn-ghost.scss

@@ -2,13 +2,16 @@
 
 .ui-btn-ghost {
   @include base-btn;
-  gap: 10px;
-  background: transparent;
-  border: none;
-  width: fit-content;
 
-  --color-text: var(--txt-01);
-  --color-btn-hover: var(--btn-sec-hover-grey);
+  & {
+    gap: 10px;
+    background: transparent;
+    border: none;
+    width: fit-content;
+  
+    --color-text: var(--txt-01);
+    --color-btn-hover: var(--btn-sec-hover-grey);
+  }
 
   [data-theme="dark"] & {
     &:hover {

package/src/components/PlBtnPrimary/pl-btn-primary.scss

@@ -3,16 +3,18 @@
 .pl-btn-primary {
   @include base-btn;
 
-  --color-btn-hover: var(--color-primary-hover);
-  --color-btn-background: var(--color-primary-default);
-  --btn-disabled-bg: var(--color-dis-01);
-  --shape-shadow: var(--btn-shape-shadow);
-
-  background-color: var(--color-btn-background);
-  border: none;
-  min-width: 160px;
-
-  --append-shadow: inset 0 0 0 1px #110529;
+  & {
+    --color-btn-hover: var(--color-primary-hover);
+    --color-btn-background: var(--color-primary-default);
+    --btn-disabled-bg: var(--color-dis-01);
+    --shape-shadow: var(--btn-shape-shadow);
+  
+    background-color: var(--color-btn-background);
+    border: none;
+    min-width: 160px;
+  
+    --append-shadow: inset 0 0 0 1px #110529;
+  }
 
   &.loading {
     background: rgba(7, 5, 41, 0.8);

package/src/components/PlBtnSecondary/pl-btn-secondary.scss

@@ -3,13 +3,15 @@
 .pl-btn-secondary {
   @include base-btn;
 
-  --color-border: var(--color-border-default);
-  --color-text: var(--txt-01);
-  --color-btn-hover: var(--btn-sec-hover-grey);
-
-  border: 1px solid var(--color-border);
-  background: transparent;
-  min-width: 160px;
+  & {
+    border: 1px solid var(--color-border);
+    background: transparent;
+    min-width: 160px;
+  
+    --color-border: var(--color-border-default);
+    --color-text: var(--txt-01);
+    --color-btn-hover: var(--btn-sec-hover-grey);
+  }
 
   &:disabled {
     --color-text: var(--color-dis-01);

package/src/components/PlDropdown/PlDropdown.vue

@@ -67,9 +67,13 @@ const props = withDefaults(
      */
     disabled?: boolean;
     /**
-     * Custom icon class for the dropdown arrow (optional)
+     * Custom icon (16px) class for the dropdown arrow (optional)
      */
     arrowIcon?: string;
+    /**
+     * Custom icon (24px) class for the dropdown arrow (optional)
+     */
+    arrowIconLarge?: string;
     /**
      * Option list item size
      */
@@ -84,6 +88,7 @@ const props = withDefaults(
     required: false,
     disabled: false,
     arrowIcon: undefined,
+    arrowIconLarge: undefined,
     optionSize: 'small',
   },
 );
@@ -301,14 +306,14 @@ watchPostEffect(() => {
 
           <div v-if="!data.open" @click="setFocusOnInput">
             <LongText class="input-value"> {{ textValue }} </LongText>
-            <div v-if="clearable" class="close" @click.stop="clear" />
           </div>
 
-          <div v-if="arrowIcon" class="arrow-altered icon" :class="[`icon--${arrowIcon}`]" @click.stop="toggleOpen" />
-          <div v-else class="arrow" @click.stop="toggleOpen" />
-          <div class="ui-dropdown__append">
-            <div v-if="clearable && hasValue" class="icon icon--clear" @click.stop="clear" />
+          <div class="ui-dropdown__controls">
+            <div v-if="clearable && hasValue" class="icon-16 icon-clear" @click.stop="clear" />
             <slot name="append" />
+            <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" @click.stop="toggleOpen" />
+            <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" @click.stop="toggleOpen" />
+            <div v-else class="arrow-icon arrow-icon-default" @click.stop="toggleOpen" />
           </div>
         </div>
         <label v-if="label">

package/src/components/PlDropdown/pl-dropdown.scss

@@ -12,10 +12,6 @@
   --label-offset-right-x: 8px;
   --label-color: var(--txt-01);
 
-  [data-theme='dark'] & {
-    --options-bg: #1b1b1f;
-  }
-
   position: relative;
   outline: none;
   min-height: var(--control-height);
@@ -24,6 +20,10 @@
   font-size: var(--font-size-base);
   font-weight: var(--font-weigh-base);
 
+  [data-theme='dark'] & {
+    --options-bg: #1b1b1f;
+  }
+
   &__envelope {
     font-family: var(--control-font-family);
     min-width: 160px;
@@ -56,9 +56,10 @@
     background-color: var(--options-bg);
     border-radius: 0 0 6px 6px;
     max-height: 244px;
-    @include scrollbar;
     border-top: 1px solid var(--color-div-black);
 
+    @include scrollbar;
+
     .nothing-found {
       padding: 0 10px;
       height: var(--control-height);
@@ -79,8 +80,8 @@
       .checkmark {
         position: absolute;
         display: none;
-        @include abs-center-y();
         right: 10px;
+        @include abs-center-y();
       }
 
       > span {
@@ -162,12 +163,6 @@
         color: var(--color-placeholder);
       }
     }
-
-    &:hover {
-      .clear {
-        display: block;
-      }
-    }
   }
 
   &__helper {
@@ -178,43 +173,30 @@
     @include field-error();
   }
 
-  &__append {
-    padding-right: 24px;
+  &__controls {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 4px;
-    .icon {
+    gap: 6px;
+    margin-left: auto;
+
+    .icon-clear {
       cursor: pointer;
     }
-    .mask {
+
+    .mask-16,.mask-24 {
       background-color: var(--control-mask-fill);
       cursor: pointer;
     }
   }
 
-  .arrow {
-    position: absolute;
-    @include abs-center-y;
-    right: 12px;
-    background-color: var(--control-mask-fill);
-    @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
-  }
-
-  .arrow-altered {
-    position: absolute;
-    @include abs-center-y;
-    right: 12px;
-  }
-
-  .clear {
-    display: none;
-    position: absolute;
-    @include abs-center-y;
-    right: 36px;
-    z-index: 1;
-    @include icon(url('@/assets/images/16_clear.svg'), 16px); // @todo mask-image
+  .arrow-icon {
     cursor: pointer;
+    // Default "arrow" icon (16x16) 
+    &.arrow-icon-default {
+      background-color: var(--control-mask-fill);
+      @include mask(url('@/assets/images/16_chevron-down.svg'), 16px);
+    }
   }
 
   &.open,

package/src/components/PlDropdownLine/pl-dropdown-line.scss

@@ -123,8 +123,8 @@
         max-height: 320px;
         overflow-y: auto;
         background-color: var(--bg-elevated-01);
-        @include scrollbar;
         box-shadow: var(--shadow-m);
+        @include scrollbar;
     }
 
     &__items-tabs {
@@ -138,7 +138,7 @@
         padding: 6px 12px 12px 12px;
         border: 1px solid var(--color-div-grey);
         border-radius: 6px;
-        @include scrollbar(false, true);
         box-shadow: var(--shadow-m);
+        @include scrollbar(false, true);
     }
 }

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -12,10 +12,6 @@
   --label-offset-right-x: 8px;
   --label-color: var(--txt-01);
 
-  [data-theme="dark"] & {
-    --options-bg: #1B1B1F;
-  }
-
   position: relative;
   outline: none;
   min-height: var(--control-height);
@@ -24,6 +20,10 @@
   font-size: var(--font-size-base);
   font-weight: var(--font-weigh-base);
 
+  [data-theme="dark"] & {
+    --options-bg: #1B1B1F;
+  }
+
   &__envelope {
     font-family: var(--control-font-family);
     min-width: 160px;
@@ -57,8 +57,8 @@
     background-color: var(--options-bg);
     border-radius: 0 0 6px 6px;
     max-height: 244px;
-    @include scrollbar;
     border-top: 1px solid var(--color-div-black);
+    @include scrollbar;
 
     .nothing-found {
       padding: 0 10px;

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+/**
+ * A component for selecting one value from a list of options
+ */
+export default {
+  name: 'PlDropdownRef',
+};
+</script>
+
+<script lang="ts" setup>
+import type { ModelRef, RefOption } from '@/types';
+import { PlDropdown } from '../PlDropdown';
+import { computed } from 'vue';
+
+defineEmits<{
+  /**
+   * Emitted when the model value is updated.
+   */
+  (e: 'update:modelValue', value: ModelRef | undefined): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The current selected ref of the dropdown.
+     */
+    modelValue: ModelRef | undefined;
+    /**
+     * The label text for the dropdown field (optional)
+     */
+    label?: string;
+    /**
+     * List of available ref options for the dropdown
+     */
+    options: Readonly<RefOption[]>;
+    /**
+     * A helper text displayed below the dropdown when there are no errors (optional).
+     */
+    helper?: string;
+    /**
+     * Error message displayed below the dropdown (optional)
+     */
+    error?: string;
+    /**
+     * Placeholder text shown when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Enables a button to clear the selected value (default: false)
+     */
+    clearable?: boolean;
+    /**
+     * If `true`, the dropdown component is marked as required.
+     */
+    required?: boolean;
+    /**
+     * If `true`, the dropdown component is disabled and cannot be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * Option list item size
+     */
+    optionSize?: 'small' | 'medium';
+  }>(),
+  {
+    label: '',
+    helper: undefined,
+    error: undefined,
+    placeholder: '...',
+    clearable: false,
+    required: false,
+    disabled: false,
+    arrowIcon: undefined,
+    optionSize: 'small',
+  },
+);
+
+const options = computed(() =>
+  props.options.map((opt) => ({
+    label: opt.label,
+    value: opt.ref,
+  })),
+);
+
+const arrowIcon = computed(() => (props.disabled ? 'icon-link-disabled' : 'icon-link'));
+</script>
+
+<template>
+  <PlDropdown v-bind="props" :options="options" :arrow-icon-large="arrowIcon" @update:model-value="$emit('update:modelValue', $event)"> </PlDropdown>
+</template>

package/src/components/PlDropdownRef/__tests__/PlDropdownRef.spec.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import PlDropdownRef from '../PlDropdownRef.vue';
+
+describe('PlDropdownRef', () => {
+  it('modelValue', async () => {
+    const wrapper = mount(PlDropdownRef, {
+      props: {
+        modelValue: {
+          __isRef: true as const,
+          blockId: '2',
+          name: 'Ref to block 2',
+        },
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        options: [
+          {
+            label: 'Ref 1',
+            ref: {
+              __isRef: true as const,
+              blockId: '1',
+              name: 'Ref to block 1',
+            },
+          },
+          {
+            label: 'Ref 2',
+            ref: {
+              __isRef: true as const,
+              blockId: '2',
+              name: 'Ref to block 2',
+            },
+          },
+        ],
+      },
+    });
+
+    await wrapper.find('input').trigger('focus');
+
+    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(2);
+
+    await wrapper
+      .findAll('.dropdown-list-item')
+      .filter((node) => node.text().match(/Ref 2/))
+      .at(0)
+      ?.trigger('click');
+
+    expect(wrapper.props('modelValue')).toStrictEqual({
+      __isRef: true as const,
+      blockId: '2',
+      name: 'Ref to block 2',
+    });
+
+    expect(await wrapper.findAll('.dropdown-list-item').length).toBe(0); // options are closed after click
+  });
+});

package/src/components/PlDropdownRef/index.ts

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

package/src/components/PlFileDialog/pl-file-dialog.scss

@@ -114,11 +114,11 @@
   .ls-body {
     padding: 12px;
     height: 366px;
-    @include scrollbar(true);
     overflow: auto;
     user-select: none;
     display: flex;
     flex-direction: column;
+    @include scrollbar(true);
     > div {
       font-family: var(--font-family-monospace);
       color: var(--txt-01);

package/src/index.ts

@@ -30,6 +30,7 @@ export * from './components/PlBtnGroup';
 export * from './components/PlTextField';
 export * from './components/PlTextArea';
 export * from './components/PlDropdown';
+export * from './components/PlDropdownRef';
 export * from './components/PlDropdownLine';
 export * from './components/PlTooltip';
 export * from './components/PlProgressBar';

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { ImportFileHandle, Platforma, StorageHandle } from '@platforma-sdk/model';
+import type { ImportFileHandle, Platforma, StorageHandle, Ref as ModelRef } from '@platforma-sdk/model';
 import type { Ref, ComputedRef } from 'vue';
 
 export type Size = 'small' | 'medium' | 'large';
@@ -37,6 +37,13 @@ export type ListOption<T = unknown> =
       value: T;
     };
 
+export type { ModelRef };
+
+export type RefOption = {
+  readonly label: string;
+  readonly ref: ModelRef;
+};
+
 export type ListOptionNormalized<T = unknown> = {
   label: string;
   description?: string;