@milaboratories/uikit 2.2.72 → 2.2.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.72",
+  "version": "2.2.74",
   "type": "module",
   "main": "dist/pl-uikit.umd.js",
   "module": "dist/pl-uikit.js",
@@ -35,7 +35,7 @@
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
     "@milaboratories/eslint-config": "^1.0.4",
-    "@platforma-sdk/model": "^1.30.3",
+    "@platforma-sdk/model": "^1.30.11",
     "@milaboratories/helpers": "^1.6.11"
   },
   "scripts": {

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

@@ -52,13 +52,13 @@
     &__checkbox {
         margin-right: 8px;
         background-color: var(--control-mask-fill);
-        @include mask(url(./images/24_checkbox-base-dark.svg), 24px);
+        @include mask(url(./images/24_checkbox-dark-enabled-unchecked.svg), 24px);
     }
 
     &__checkbox.checked {
         margin-right: 8px;
         background-color: red;
-        @include mask(url(./images/24_checkbox-checked-dark.svg), 24px);
+        @include mask(url(./images/24_checkbox-dark-enabled-checked.svg), 24px);
     }
 
     &__description {

package/src/assets/images/24_checkbox-dark-disabled-checked.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#3D3D42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5431 8.51739L10.3333 16.0877L6.45691 12.0174L7.54312 10.9829L10.3333 13.9127L16.4569 7.48291L17.5431 8.51739Z" fill="#1B1B1F"/>
+</svg>

package/src/assets/images/24_checkbox-dark-disabled-indeterminate.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#3D3D42"/>
+<path d="M7 12H17" stroke="#1B1B1F" stroke-width="1.5"/>
+</svg>

package/src/assets/images/{24_checkbox-base-dark.svg → 24_checkbox-dark-disabled-unchecked.svg}

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 4.5H4.5L4.5 19.5H19.5V4.5ZM4.5 3C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H4.5Z" fill="#DFE0E6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 4.5H4.5L4.5 19.5H19.5V4.5ZM4.5 3C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H4.5Z" fill="#3D3D42"/>
 </svg>

package/src/assets/images/24_checkbox-dark-enabled-checked.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5431 8.51739L10.3333 16.0877L6.45691 12.0174L7.54312 10.9829L10.3333 13.9127L16.4569 7.48291L17.5431 8.51739Z" fill="#110529"/>
+</svg>

package/src/assets/images/24_checkbox-dark-enabled-indeterminate.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="white"/>
+<path d="M7 12H17" stroke="#110529" stroke-width="1.5"/>
+</svg>

package/src/assets/images/24_checkbox-dark-enabled-unchecked.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 4.5H4.5L4.5 19.5H19.5V4.5ZM4.5 3C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H4.5Z" fill="white"/>
+</svg>

package/src/assets/images/24_checkbox-light-disabled-checked.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#CFD1DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5431 8.51739L10.3333 16.0877L6.45691 12.0174L7.54312 10.9829L10.3333 13.9127L16.4569 7.48291L17.5431 8.51739Z" fill="white"/>
+</svg>

package/src/assets/images/24_checkbox-light-disabled-indeterminate.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#CFD1DB"/>
+<path d="M7 12H17" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/assets/images/24_checkbox-light-disabled-unchecked.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 4.5H4.5L4.5 19.5H19.5V4.5ZM4.5 3C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H4.5Z" fill="#CFD1DB"/>
+</svg>

package/src/assets/images/24_checkbox-light-enabled-checked.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#110529"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5431 8.51739L10.3333 16.0877L6.45691 12.0174L7.54312 10.9829L10.3333 13.9127L16.4569 7.48291L17.5431 8.51739Z" fill="white"/>
+</svg>

package/src/assets/images/24_checkbox-light-enabled-indeterminate.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#110529"/>
+<path d="M7 12H17" stroke="white" stroke-width="1.5"/>
+</svg>

package/src/components/DropdownListItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import CheckboxUncheckedSvg from '@/assets/images/24_checkbox-base.svg?raw';
-import CheckboxCheckedSvg from '@/assets/images/24_checkbox-checked.svg?raw';
+import CheckboxUncheckedSvg from '@/assets/images/24_checkbox-light-enabled-unchecked.svg?raw';
+import CheckboxCheckedSvg from '@/assets/images/24_checkbox-light-enabled-checked.svg?raw';
 import type { ListOptionNormalized } from '@/types';
 
 const props = withDefaults(

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -131,16 +131,6 @@ const loadedOptionsRef = ref<ListOption<M>[]>([]);
 const modelOptionRef = ref<ListOptionNormalized<M> | undefined>(); // list of 1 option that is selected or empty, to keep selected label
 
 const renderedOptionsRef = computed(() => {
-  if (model.value && !search.value) {
-    return modelOptionRef.value
-      ? [{
-          ...modelOptionRef.value,
-          index: 0,
-          isSelected: true,
-          isActive: true,
-        }]
-      : [];
-  }
   return normalizeListOptions(loadedOptionsRef.value).map((opt, index) => ({
     ...opt,
     index,
@@ -215,14 +205,12 @@ const setFocusOnInput = () => input.value?.focus();
 
 const toggleOpen = () => {
   data.open = !data.open;
-  if (!data.open) {
-    search.value = null;
-  }
-  if (data.open) {
-    search.value = '';
-  }
 };
 
+watch(() => data.open, (v) => {
+  search.value = v ? '' : null;
+})
+
 const onInputFocus = () => {
   data.open = true;
 };
@@ -298,10 +286,10 @@ watchPostEffect(() => {
   }
 });
 
-const searchDebounced = refDebounced(search, 500, { maxWait: 1000 });
+const searchDebounced = refDebounced(search, 300, { maxWait: 1000 });
 
 const optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {
-  if (v !== null && !(v === '' && model.value)) { // search is null when dropdown is closed; when search is '' and model is not empty show single selected option in the list;
+  if (v !== null) { // search is null when dropdown is closed;
     return props.optionsSearch(v);
   }
   return [];

package/src/components/PlCheckbox/PlCheckbox.vue

@@ -26,6 +26,10 @@ const props = defineProps<{
    * If `true`, the checkbox is disabled and cannot be interacted with.
    */
   disabled?: boolean;
+  /**
+   * If `true`, the checkbox is indeterminate (doesn't affect the model value).
+   */
+  indeterminate?: boolean;
 }>();
 
 const slots = useSlots();

package/src/components/PlCheckbox/PlCheckboxBase.vue

@@ -1,23 +1,26 @@
 <script lang="ts" setup>
 import './pl-checkbox-base.scss';
-import { computed } from 'vue';
 
 defineEmits(['update:modelValue']);
 
 const props = defineProps<{
   modelValue: boolean;
   disabled?: boolean;
+  indeterminate?: boolean;
 }>();
-
-const checked = computed(() => props.modelValue);
 </script>
 
 <template>
   <div
     tabindex="0"
     class="pl-checkbox-base"
-    :class="{ checked, disabled }"
+    :class="{
+      ...(props.indeterminate
+        ? { indeterminate: true }
+        : { checked: props.modelValue }),
+      disabled,
+    }"
     @click="$emit('update:modelValue', !modelValue)"
-    @keydown.enter="$emit('update:modelValue', !modelValue)"
+    @keydown.space.prevent="$emit('update:modelValue', !modelValue)"
   />
 </template>

package/src/components/PlCheckbox/pl-checkbox-base.scss

@@ -1,23 +1,33 @@
 @use "@/assets/mixins" as *;
 
 .pl-checkbox-base {
-  --base-icon: url('@/assets/images/24_checkbox-base.svg');
-  --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
-  --disabled-icon: url('@/assets/images/24_checkbox-disabled.svg');
-  background-color: red;
+  --enabled-unchecked-icon: url('@/assets/images/24_checkbox-light-enabled-unchecked.svg');
+  --enabled-checked-icon: url('@/assets/images/24_checkbox-light-enabled-checked.svg');
+  --enabled-indeterminate-icon: url('@/assets/images/24_checkbox-light-enabled-indeterminate.svg');
+  --disabled-unchecked-icon: url('@/assets/images/24_checkbox-light-disabled-unchecked.svg');
+  --disabled-checked-icon: url('@/assets/images/24_checkbox-light-disabled-checked.svg');
+  --disabled-indeterminate-icon: url('@/assets/images/24_checkbox-light-disabled-indeterminate.svg');
+
   cursor: pointer;
   outline: none;
   border-radius: 4px;
-  @include icon(var(--base-icon), 24px);
-  min-width: 24px;
-  min-height: 24px;
+  @include icon(var(--enabled-unchecked-icon), 24px);
 
   &.checked {
-    @include icon(var(--checked-icon), 24px);
+    @include icon(var(--enabled-checked-icon), 24px);
+  }
+
+  &.indeterminate {
+    @include icon(var(--enabled-indeterminate-icon), 24px);
   }
 
   &.disabled {
-    @include icon(var(--disabled-icon), 24px);
+    @include icon(var(--disabled-unchecked-icon), 24px);
+    pointer-events: none;
+  }
+
+  &.disabled:is(.checked) {
+    @include icon(var(--disabled-checked-icon), 24px);
     pointer-events: none;
   }
 
@@ -26,8 +36,11 @@
   }
 
   [data-theme="dark"] & {
-    --base-icon: url('@/assets/images/24_checkbox-base-dark.svg');
-    --checked-icon: url('@/assets/images/24_checkbox-checked-dark.svg');
-    --disabled-icon: url('@/assets/images/24_checkbox-disabled-dark.svg');
+    --enabled-unchecked-icon: url('@/assets/images/24_checkbox-dark-enabled-unchecked.svg');
+    --enabled-checked-icon: url('@/assets/images/24_checkbox-dark-enabled-checked.svg');
+    --enabled-indeterminate-icon: url('@/assets/images/24_checkbox-dark-enabled-indeterminate.svg');
+    --disabled-unchecked-icon: url('@/assets/images/24_checkbox-dark-disabled-unchecked.svg');
+    --disabled-checked-icon: url('@/assets/images/24_checkbox-dark-disabled-checked.svg');
+    --disabled-indeterminate-icon: url('@/assets/images/24_checkbox-dark-disabled-indeterminate.svg');
   }
 }

package/src/components/PlCheckbox/pl-checkbox.scss

@@ -1,41 +1,3 @@
-@use "@/assets/mixins" as *;
-
-.pl-checkbox-base {
-  --base-icon: url('@/assets/images/24_checkbox-base.svg');
-  --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
-  --disabled-icon: url('@/assets/images/24_checkbox-disabled.svg');
-  --disabled-checked-icon: url('@/assets/images/24_checkbox-disabled-checked.svg');
-
-  cursor: pointer;
-  outline: none;
-  border-radius: 4px;
-  @include icon(var(--base-icon), 24px);
-
-  &.checked {
-    @include icon(var(--checked-icon), 24px);
-  }
-
-  &.disabled {
-    @include icon(var(--disabled-icon), 24px);
-    pointer-events: none;
-  }
-
-  &.disabled:is(.checked) {
-    @include icon(var(--disabled-checked-icon), 24px);
-    pointer-events: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px var(--border-color-focus);
-  }
-
-  [data-theme="dark"] & {
-    --base-icon: url('@/assets/images/24_checkbox-base-dark.svg');
-    --checked-icon: url('@/assets/images/24_checkbox-checked-dark.svg');
-    --disabled-icon: url('@/assets/images/24_checkbox-disabled-dark.svg');
-  }
-}
-
 .pl-checkbox {
   --color-label: var(--color-text);
   --cursor-label: pointer;

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

@@ -83,8 +83,8 @@
       align-items: center;
       gap: 12px;
 
-      --base-icon: url('@/assets/images/24_checkbox-base.svg');
-      --checked-icon: url('@/assets/images/24_checkbox-checked.svg');
+      --base-icon: url('@/assets/images/24_checkbox-light-enabled-unchecked.svg');
+      --checked-icon: url('@/assets/images/24_checkbox-light-enabled-checked.svg');
 
       .pl-dropdown-multi__checkmark {
         cursor: pointer;
@@ -93,8 +93,8 @@
         @include icon(var(--base-icon), 24px);
 
         [data-theme="dark"] & {
-          --base-icon: url('@/assets/images/24_checkbox-base-dark.svg');
-          --checked-icon: url('@/assets/images/24_checkbox-checked-dark.svg');
+          --base-icon: url('@/assets/images/24_checkbox-dark-enabled-unchecked.svg');
+          --checked-icon: url('@/assets/images/24_checkbox-dark-enabled-checked.svg');
         }
       }
 

package/src/assets/images/24_checkbox-checked-dark.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="3" width="18" height="18" rx="2" fill="#DFE0E6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5431 8.51724L10.3333 16.0875L6.45691 12.0172L7.54312 10.9828L10.3333 13.9125L16.4569 7.48276L17.5431 8.51724Z" fill="black"/>
-</svg>

package/src/assets/images/24_checkbox-checked.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="3" width="18" height="18" rx="2" fill="#110529"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5431 8.51724L10.3333 16.0875L6.45691 12.0172L7.54312 10.9828L10.3333 13.9125L16.4569 7.48276L17.5431 8.51724Z" fill="white"/>
-</svg>

package/src/assets/images/24_checkbox-disabled-checked.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="24_checkbox">
-<rect id="Vector" x="3" y="3" width="18" height="18" rx="2" fill="#CFD1DB"/>
-<path id="Vector_51_(Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M17.543 8.51739L10.3332 16.0877L6.45679 12.0174L7.54299 10.9829L10.3332 13.9127L16.4568 7.48291L17.543 8.51739Z" fill="white"/>
-</g>
-</svg>

package/src/assets/images/24_checkbox-disabled-dark.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 4.5H4.5L4.5 19.5H19.5V4.5ZM4.5 3C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H4.5Z" fill="#38383D"/>
-</svg>

package/src/assets/images/24_checkbox-disabled.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 4.5H4.5L4.5 19.5H19.5V4.5ZM4.5 3C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3H4.5Z" fill="#CFD1DB"/>
-</svg>
-