@milaboratories/uikit 2.6.4 → 2.7.0

package/dist/components/PlElementList/PlElementListItem.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\nconst hasAfterSlot = computed(() => slots['after'] !== undefined);\nconst hasBeforeSlot = computed(() => slots['before'] !== undefined);\n\nconst emit = defineEmits<{\n  (e: 'expand', item: T, index: number): void;\n  (e: 'toggle', item: T, index: number): void;\n  (e: 'pin', item: T, index: number): void;\n  (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div>\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[$style.root, $attrs.class, {\n        [$style.active]: props.isActive,\n        [$style.pinned]: props.isPinned,\n        [$style.opened]: props.isExpanded,\n        [$style.disabled]: props.isToggled,\n      }]\"\n    >\n      <div\n        :class=\"[$style.head, titleClass, {\n          [$style.clickable]: hasContentSlot,\n        }]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div\n          v-if=\"props.showDragHandle\"\n          :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n          :data-draggable=\"props.isDraggable\"\n        >\n          <PlIcon16 name=\"drag-dots\" />\n        </div>\n        <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[$style.action, $style.clickable, {\n              [$style.disable]: !props.isPinnable,\n              [$style.activated]: props.isPinned,\n            }]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active)\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);;\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  text-overflow: ellipsis;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","hasAfterSlot","hasBeforeSlot","emit","__emit","_createElementBlock","_renderSlot","_ctx","_createElementVNode","$style","$attrs","_normalizeClass","_cache","$event","_createVNode","_unref","PlIcon16","_createBlock","_withModifiers","PlIcon24"],"mappings":"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"}
+{"version":3,"file":"PlElementListItem.vue2.js","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlIcon24 } from '../PlIcon24';\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots['content'] !== undefined);\nconst hasAfterSlot = computed(() => slots['after'] !== undefined);\nconst hasBeforeSlot = computed(() => slots['before'] !== undefined);\n\nconst emit = defineEmits<{\n  (e: 'click', item: MouseEvent): void;\n  (e: 'expand', item: T, index: number): void;\n  (e: 'toggle', item: T, index: number): void;\n  (e: 'pin', item: T, index: number): void;\n  (e: 'remove', item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[$style.root, $attrs.class, {\n        [$style.active]: props.isActive,\n        [$style.pinned]: props.isPinned,\n        [$style.opened]: props.isExpanded,\n        [$style.disabled]: props.isToggled,\n      }]\"\n    >\n      <div\n        :class=\"[$style.head, titleClass, {\n          [$style.clickable]: hasContentSlot,\n        }]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div\n          v-if=\"props.showDragHandle\"\n          :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]\"\n          :data-draggable=\"props.isDraggable\"\n        >\n          <PlIcon16 name=\"drag-dots\" />\n        </div>\n        <PlIcon16 v-if=\"isExpandable\" :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\" name=\"chevron-down\" />\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[$style.action, $style.clickable, {\n              [$style.disable]: !props.isPinnable,\n              [$style.activated]: props.isPinned,\n            }]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use '../../assets/variables.scss' as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active)\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);;\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  text-overflow: ellipsis;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"names":["props","__props","slots","_useSlots","hasContentSlot","computed","hasAfterSlot","hasBeforeSlot","emit","__emit","_createElementBlock","_cache","event","_renderSlot","_ctx","_createElementVNode","$style","$attrs","_normalizeClass","$event","_createVNode","_unref","PlIcon16","_createBlock","_withModifiers","PlIcon24"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -32,7 +32,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "canonicalize": "~2.1.0",
     "@milaboratories/helpers": "1.12.0",
-    "@platforma-sdk/model": "1.45.42"
+    "@platforma-sdk/model": "1.46.0"
   },
   "devDependencies": {
     "jsdom": "^25.0.1",
@@ -41,9 +41,9 @@
     "svgo": "^3.3.2",
     "typescript": "~5.6.3",
     "@milaboratories/ts-configs": "1.0.6",
+    "@milaboratories/eslint-config": "1.0.5",
     "@milaboratories/ts-builder": "1.0.5",
-    "@milaboratories/build-configs": "1.0.8",
-    "@milaboratories/eslint-config": "1.0.5"
+    "@milaboratories/build-configs": "1.0.8"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -7,7 +7,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup generic="M = unknown">
+<script lang="ts" setup generic="M extends null | undefined | string | number = null | undefined | string">
 import './pl-autocomplete.scss';
 import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';
 import { tap } from '../../helpers/functions';
@@ -39,11 +39,7 @@ const props = withDefaults(
     /**
      * Lambda for requesting of available options for the dropdown by search string.
      */
-    optionsSearch: (s: string) => Promise<ListOption<M>[]>;
-    /**
-     * Lambda for requesting of corresponding option for current model value. If empty, optionsSearch is used for this.
-     */
-    modelSearch?: (v: M) => Promise<ListOption<M>>;
+    optionsSearch: (string: string, type: 'value' | 'label') => Promise<ListOption<M>[]>;
     /**
      * The label text for the dropdown field (optional)
      */
@@ -301,17 +297,14 @@ const searchDebounced = refDebounced(search, 300, { maxWait: 1000 });
 
 const optionsRequest = useWatchFetch(() => searchDebounced.value, async (v) => {
   if (v !== null) { // search is null when dropdown is closed;
-    return props.optionsSearch(v);
+    return props.optionsSearch(v, 'label');
   }
   return undefined;
 });
 
 const modelOptionRequest = useWatchFetch(() => model.value, async (v) => {
-  if (v && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component
-    if (props.modelSearch) {
-      return props.modelSearch(v);
-    }
-    return (await props.optionsSearch(String(v)))?.[0];
+  if (v != null && !deepEqual(modelOptionRef.value?.value, v)) { // load label for selected value if it was updated from outside the component
+    return (await props.optionsSearch(String(v), 'value'))?.[0];
   }
   return modelOptionRef.value;
 });

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

@@ -13,7 +13,7 @@ describe('PlAutocomplete', () => {
     const wrapper = mount(PlAutocomplete, {
       props: {
         'modelValue': 1,
-        'onUpdate:modelValue': (e: unknown) => wrapper.setProps({ modelValue: e }),
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
         'optionsSearch': (_str: string) => {
           return Promise.resolve(options);
         },

package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue

@@ -37,7 +37,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup generic="M = unknown">
+<script lang="ts" setup generic="M extends string | number = string">
 import './pl-autocomplete-multi.scss';
 
 import type { ListOptionBase } from '@platforma-sdk/model';
@@ -65,6 +65,11 @@ const emitModel = (v: M[]) => emit('update:modelValue', v);
 
 const slots = useSlots();
 
+interface OptionsSearch {
+  (s: string, type: 'label'): Promise<Readonly<ListOptionBase<M>[]>>;
+  (s: M[], type: 'value'): Promise<Readonly<ListOptionBase<M>[]>>;
+}
+
 const props = withDefaults(
   defineProps<{
     /**
@@ -74,11 +79,7 @@ const props = withDefaults(
     /**
      * Lambda for requesting of available options for the dropdown by search string.
      */
-    optionsSearch: (s: string) => Promise<Readonly<ListOptionBase<M>[]>>;
-    /**
-     * Lambda for requesting options that correspond to the current model values.
-     */
-    modelSearch: (values: M[]) => Promise<Readonly<ListOptionBase<M>[]>>;
+    optionsSearch: OptionsSearch;
     /**
      * Unique identifier for the source of the options, changing it will invalidate the options cache.
      */
@@ -170,14 +171,14 @@ const placeholderRef = computed(() => {
 const debounce = toRef(props, 'debounce');
 
 const searchOptionsRef = useWatchFetch(() => [data.search, data.open, props.sourceId] as const, async ([search, _open]) => {
-  return props.optionsSearch(search);
+  return props.optionsSearch(search, 'label');
 }, {
   filterWatchResult: ([_search, open]) => open,
   debounce,
 });
 
 const modelOptionsRef = useWatchFetch(() => [props.modelValue, props.sourceId] as const, async ([v]) => {
-  return props.modelSearch(v);
+  return props.optionsSearch(v, 'value');
 }, {
   debounce,
 });

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

@@ -11,12 +11,6 @@ describe('PlAutocompleteMulti', () => {
         'modelValue': [1],
         'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
         'debounce': 0,
-        'modelSearch': async (values) => {
-          return [
-            { label: 'Option 1', value: 1 },
-            { label: 'Option 2', value: 2 },
-          ].filter((v) => values.includes(v.value));
-        },
         'optionsSearch': async () => {
           return [
             { label: 'Option 1', value: 1 },

package/src/components/PlElementList/PlElementListItem.vue

@@ -34,6 +34,7 @@ const hasAfterSlot = computed(() => slots['after'] !== undefined);
 const hasBeforeSlot = computed(() => slots['before'] !== undefined);
 
 const emit = defineEmits<{
+  (e: 'click', item: MouseEvent): void;
   (e: 'expand', item: T, index: number): void;
   (e: 'toggle', item: T, index: number): void;
   (e: 'pin', item: T, index: number): void;
@@ -42,7 +43,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div>
+  <div @click="(event) => emit('click', event)">
     <div v-if="hasBeforeSlot" :class="beforeClass">
       <slot name="before" :item="props.item" :index="props.index" />
     </div>

package/dist/components/PlAccordion/ExpandTransition.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter","_createBlock","_Transition","_renderSlot","_ctx"],"mappings":";;;;AACA,UAAMA,IAAU,CAACC,MAAgB;AAC/B,MAAAA,EAAG,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC7DA,EAAG,UAAU,OAAO,qBAAqB;AAAA,IAC3C;2BAIEE,EAEaC,GAAA;AAAA,MAFD,MAAK;AAAA,MAAmB,SAAOJ;AAAA,MAAU,SAAOA;AAAA,MAAU,cAAaE;AAAA,MAAU,cAAaA;AAAA,IAAA;iBACxG,MAAO;AAAA,QAAPG,EAAOC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue.d.ts

@@ -1,111 +0,0 @@
-import { ListOptionBase } from '@platforma-sdk/model';
-/**
- * A multi-select autocomplete component that allows users to search and select multiple values from a list of options.
- * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.
- *
- * @example
- * Basic usage:
- * <PlAutocompleteMulti
- *   v-model="selectedUsers"
- *   :options-search="searchUsers"
- *   :model-search="getUsersByIds"
- *   label="Select Users"
- *   placeholder="Search for users..."
- *   required
- *   :debounce="300"
- *   helper="Choose one or more users from the list"
- * />
- *
- * With async functions:
- * const selectedUsers = ref([])
- *
- * const searchUsers = async (searchTerm) => {
- *   const response = await fetch('/api/users/search?q=' + searchTerm)
- *   const users = await response.json()
- *   return users.map(user => ({ value: user.id, label: user.name }))
- * }
- *
- * const getUsersByIds = async (userIds) => {
- *   if (!userIds.length) return []
- *   const response = await fetch('/api/users?ids=' + userIds.join(','))
- *   const users = await response.json()
- *   return users.map(user => ({ value: user.id, label: user.name }))
- * }
- */
-declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((v: M[]) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & {
-        /**
-         * The current selected values.
-         */
-        modelValue: M[];
-        /**
-         * Lambda for requesting of available options for the dropdown by search string.
-         */
-        optionsSearch: (s: string) => Promise<Readonly<ListOptionBase<M>[]>>;
-        /**
-         * Lambda for requesting options that correspond to the current model values.
-         */
-        modelSearch: (values: M[]) => Promise<Readonly<ListOptionBase<M>[]>>;
-        /**
-         * Unique identifier for the source of the options, changing it will invalidate the options cache.
-         */
-        sourceId?: string;
-        /**
-         * The label text for the dropdown field (optional)
-         */
-        label?: string;
-        /**
-         * A helper text displayed below the dropdown when there are no errors (optional).
-         */
-        helper?: string;
-        /**
-         * Error message displayed below the dropdown (optional)
-         */
-        error?: unknown;
-        /**
-         * Placeholder text shown when no value is selected.
-         */
-        placeholder?: string;
-        /**
-         * 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;
-        /**
-         * Debounce time in ms for the options search.
-         */
-        debounce?: number;
-        /**
-         * If `true`, the search input is reset and focus is set on it when the new option is selected.
-         */
-        resetSearchOnSelect?: boolean;
-        /**
-         * The text to display when no options are found.
-         */
-        emptyOptionsText?: string;
-        /**
-         * Makes some of corners not rounded
-         * */
-        groupPosition?: "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "middle";
-    } & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {
-        append?(_: {}): any;
-        tooltip?(_: {}): any;
-    };
-    emit: (e: "update:modelValue", v: M[]) => void;
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};