@milaboratories/uikit 2.2.95 → 2.2.97

package/src/components/PlDropdown/PlDropdown.vue

@@ -9,21 +9,22 @@ export default {
 
 <script lang="ts" setup generic="M = unknown">
 import './pl-dropdown.scss';
-import { computed, reactive, ref, unref, useSlots, useTemplateRef, watch, watchPostEffect } from 'vue';
+import { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from 'vue';
 import { tap } from '../../helpers/functions';
 import { PlTooltip } from '../PlTooltip';
 import DoubleContour from '../../utils/DoubleContour.vue';
 import { useLabelNotch } from '../../utils/useLabelNotch';
 import type { ListOption, ListOptionNormalized } from '../../types';
 import { deepEqual } from '../../helpers/objects';
-import DropdownListItem from '../DropdownListItem.vue';
 import LongText from '../LongText.vue';
 import { normalizeListOptions } from '../../helpers/utils';
 import { PlIcon16 } from '../PlIcon16';
 import { PlMaskIcon24 } from '../PlMaskIcon24';
-import { DropdownOverlay } from '../../utils/DropdownOverlay';
 import SvgRequired from '../../generated/components/svg/images/SvgRequired.vue';
 import { getErrorMessage } from '../../helpers/error.ts';
+import OptionList from './OptionList.vue';
+import { useGroupBy } from './useGroupBy';
+import type { LOption } from './types';
 
 const emit = defineEmits<{
   /**
@@ -110,7 +111,7 @@ const slots = defineSlots<{
 const rootRef = ref<HTMLElement | undefined>();
 const input = ref<HTMLInputElement | undefined>();
 
-const overlayRef = useTemplateRef('overlay');
+const optionListRef = useTemplateRef<InstanceType<typeof OptionList>>('optionListRef');
 
 const data = reactive({
   search: '',
@@ -121,7 +122,7 @@ const data = reactive({
 
 const findActiveIndex = () =>
   tap(
-    filteredRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),
+    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),
     (v) => (v < 0 ? 0 : v),
   );
 
@@ -159,7 +160,7 @@ const computedError = computed(() => {
   return undefined;
 });
 
-const optionsRef = computed(() =>
+const optionsRef = computed<LOption<M>[]>(() =>
   normalizeListOptions(props.options ?? []).map((opt, index) => ({
     ...opt,
     index,
@@ -214,6 +215,8 @@ const filteredRef = computed(() => {
   return options;
 });
 
+const { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, 'group');
+
 const tabindex = computed(() => (isDisabled.value ? undefined : '0'));
 
 const selectOption = (v: M | undefined) => {
@@ -223,6 +226,10 @@ const selectOption = (v: M | undefined) => {
   rootRef?.value?.focus();
 };
 
+const selectOptionWrapper = (v: unknown) => {
+  selectOption(v as M | undefined);
+};
+
 const clear = () => emit('update:modelValue', undefined);
 
 const setFocusOnInput = () => input.value?.focus();
@@ -239,7 +246,7 @@ const onInputFocus = () => (data.open = true);
 const onFocusOut = (event: FocusEvent) => {
   const relatedTarget = event.relatedTarget as Node | null;
 
-  if (!rootRef.value?.contains(relatedTarget) && !overlayRef.value?.listRef?.contains(relatedTarget)) {
+  if (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {
     data.search = '';
     data.open = false;
   }
@@ -266,25 +273,25 @@ const handleKeydown = (e: { code: string; preventDefault(): void }) => {
     rootRef.value?.focus();
   }
 
-  const filtered = unref(filteredRef);
+  const ordered = orderedRef.value;
 
-  const { length } = filtered;
+  const { length } = ordered;
 
   if (!length) {
     return;
   }
 
   if (e.code === 'Enter') {
-    selectOption(filtered.find((it) => it.index === activeIndex)?.value);
+    selectOption(ordered.find((it) => it.index === activeIndex)?.value);
   }
 
-  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;
+  const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;
 
   const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;
 
   const newIndex = Math.abs(localIndex + delta + length) % length;
 
-  data.activeIndex = filteredRef.value[newIndex].index ?? -1;
+  data.activeIndex = ordered[newIndex].index ?? -1;
 };
 
 useLabelNotch(rootRef);
@@ -301,7 +308,7 @@ watchPostEffect(() => {
   data.search; // to watch
 
   if (data.activeIndex >= 0 && data.open) {
-    overlayRef.value?.scrollIntoActive();
+    optionListRef.value?.scrollIntoActive();
   }
 });
 </script>
@@ -354,18 +361,15 @@ watchPostEffect(() => {
             </template>
           </PlTooltip>
         </label>
-        <DropdownOverlay v-if="data.open" ref="overlay" :root="rootRef" class="pl-dropdown__options" tabindex="-1" :gap="3">
-          <DropdownListItem
-            v-for="(item, index) in filteredRef"
-            :key="index"
-            :option="item"
-            :is-selected="item.isSelected"
-            :is-hovered="item.isActive"
-            :size="optionSize"
-            @click.stop="selectOption(item.value)"
-          />
-          <div v-if="!filteredRef.length" class="nothing-found">Nothing found</div>
-        </DropdownOverlay>
+        <OptionList
+          v-if="data.open"
+          ref="optionListRef"
+          :root-ref="rootRef!"
+          :groups="groupsRef"
+          :rest="restRef"
+          :option-size="optionSize"
+          :select-option="selectOptionWrapper"
+        />
         <DoubleContour class="pl-dropdown__contour" />
       </div>
     </div>

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

@@ -22,6 +22,10 @@
     font-style: italic;
   }
 
+  .group-container {
+    padding: 4px 0;
+  }
+
   .option {
     position: relative;
     padding: 0 30px 0 10px;

package/src/components/PlDropdown/types.ts

@@ -0,0 +1,3 @@
+import type { ListOptionNormalized } from '../../types';
+
+export type LOption<M = unknown> = ListOptionNormalized<M> & { isSelected: boolean; isActive: boolean; index: number };

package/src/components/PlDropdown/useGroupBy.ts

@@ -0,0 +1,63 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+function groupBy<T, K extends keyof T>(
+  list: T[],
+  groupBy: K,
+): {
+    grouped: Map<NonNullable<T[K]>, T[]>;
+    rest: T[];
+    ordered: T[];
+  } {
+  const grouped: Map<NonNullable<T[K]>, T[]> = new Map();
+
+  if (!list) {
+    return {
+      grouped,
+      rest: [],
+      ordered: [],
+    };
+  }
+
+  // Group items by the specified key
+  for (const item of list) {
+    const key = item[groupBy];
+    if (key === undefined) continue;
+    if (key === null) continue;
+    if (!grouped.has(key)) grouped.set(key, []);
+    grouped.get(key)?.push(item);
+  }
+
+  // Items without a group key
+  const rest = list.filter((item: T) => {
+    const key = item[groupBy];
+    return key === undefined || key === null;
+  });
+
+  const ordered = [...Array.from(grouped.values()).flat(), ...rest];
+
+  return {
+    grouped,
+    rest,
+    ordered,
+  };
+}
+
+export function useGroupBy<T, K extends keyof T>(
+  list: Ref<T[]>,
+  byKey: K,
+) {
+  const result = computed(() => groupBy(list.value, byKey));
+
+  const orderedRef = computed(() => result.value.ordered);
+
+  const groupsRef = computed(() => result.value.grouped);
+
+  const restRef = computed(() => result.value.rest);
+
+  return {
+    orderedRef,
+    groupsRef,
+    restRef,
+  };
+}

package/src/components/PlDropdownRef/PlDropdownRef.vue

@@ -88,6 +88,7 @@ const options = computed(() =>
   props.options?.map((opt) => ({
     label: opt.label,
     value: opt.ref,
+    group: opt.group,
   })),
 );
 

package/src/components/PlElementList/PlElementList.vue

@@ -1,62 +1,72 @@
 <script generic="T extends unknown = unknown, K extends number | string = number | string" lang="ts" setup>
 import type { ShallowRef } from 'vue';
 import { computed, shallowRef, watch } from 'vue';
-import { isNil, shallowHash } from '@milaboratories/helpers';
+import { isFunction, shallowHash } from '@milaboratories/helpers';
 import { useSortable } from '@vueuse/integrations/useSortable';
 import { type SortableEvent } from 'sortablejs';
-import { moveElements, optionalUpdateRef } from './utils.ts';
+import { moveElements } from './utils.ts';
 import PlElementListItem from './PlElementListItem.vue';
 
 const itemsRef = defineModel<T[]>('items', { required: true });
-const draggableSetRef = defineModel<Set<K>>('draggableItems');
-const removableSetRef = defineModel<Set<K>>('removableItems');
-
-const expandableSetRef = defineModel<Set<K>>('expandableItems');
-const expandedSetRef = defineModel<Set<K>>('expandedItems');
-
-const pinnableSetRef = defineModel<Set<K>>('pinnableItems');
-const pinnedSetRef = defineModel<Set<K>>('pinnedItems');
-
-const toggableSetRef = defineModel<Set<K>>('toggableItems');
-const toggledSetRef = defineModel<Set<K>>('toggledItems');
 
 const props = withDefaults(
   defineProps<{
-    getItemKey: (item: T, index: number) => K;
+    getItemKey?: (item: T, index: number) => K;
 
     itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
-    activeItems?: Set<K>;
+    isActive?: (item: T, index: number) => boolean;
 
-    enableDragging?: boolean;
+    disableDragging?: boolean;
+    isDraggable?: (item: T, index: number) => boolean;
     onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;
     onSort?: (oldIndex: number, newIndex: number) => void | boolean;
 
-    enableExpanding?: boolean;
-    onExpand?: (item: T, index: number) => void | boolean;
-
-    enableRemoving?: boolean;
+    disableRemoving?: boolean;
+    isRemovable?: (item: T, index: number) => boolean;
     onRemove?: (item: T, index: number) => void | boolean;
 
-    enableToggling?: boolean;
-    onToggle?: (item: T, index: number) => void | boolean;
+    disableExpanding?: boolean;
+    isExpandable?: (item: T, index: number) => boolean;
+    isExpanded?: (item: T, index: number) => boolean;
+    onExpand?: (item: T, index: number) => unknown;
+
+    disableToggling?: boolean;
+    isToggable?: (item: T, index: number) => boolean;
+    isToggled?: (item: T, index: number) => boolean;
+    onToggle?: (item: T, index: number) => unknown;
 
-    enablePinning?: boolean;
+    disablePinning?: boolean;
+    isPinnable?: (item: T, index: number) => boolean;
+    isPinned?: (item: T, index: number) => boolean;
     onPin?: (item: T, index: number) => void | boolean;
   }>(), {
-    itemClass: undefined,
-    activeItems: undefined,
+    getItemKey: (item: T) => JSON.stringify(item) as K,
 
-    enableDragging: undefined,
-    enableRemoving: undefined,
-    enableExpanding: undefined,
-    enableToggling: undefined,
-    enablePinning: undefined,
+    itemClass: undefined,
+    isActive: undefined,
 
+    disableDragging: undefined,
+    isDraggable: undefined,
     onDragEnd: undefined,
     onSort: undefined,
+
+    disableRemoving: undefined,
+    isRemovable: undefined,
     onRemove: undefined,
+
+    disableExpanding: undefined,
+    isExpandable: undefined,
+    isExpanded: undefined,
     onExpand: undefined,
+
+    disableToggling: undefined,
+    isToggable: undefined,
+    isToggled: undefined,
     onToggle: undefined,
+
+    disablePinning: undefined,
+    isPinnable: undefined,
+    isPinned: undefined,
     onPin: undefined,
   },
 );
@@ -71,30 +81,45 @@ const slots = defineSlots<{
 }>();
 
 const dndSortingEnabled = computed((): boolean => {
-  return props.enableDragging !== false;
+  return props.disableDragging !== true;
 });
 
-const pinnedItemsRef = computed(() => itemsRef.value.filter(isPinned));
+const pinnedItemsRef = computed(() => itemsRef.value.filter(isPinnedItem));
 const hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);
 
-const unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinned(item, index)));
+const unpinnedItemsRef = computed(() => itemsRef.value.filter((item, index) => !isPinnedItem(item, index)));
 const hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);
 
 const domProjectionItemsRef = shallowRef<undefined | T[]>();
 const pinnedContainerRef = shallowRef<HTMLElement>();
 const unpinnedContainerRef = shallowRef<HTMLElement>();
 
+// version fix problem with sync between data and rendered values
+const getKey = (item: T, index: number) => {
+  return `${versionRef.value}-${props.getItemKey(item, index)}`;
+};
+const pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));
+const unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));
+
 // version fix problem with sync between data and rendered values when items have been changed
 const versionRef = computed<number>((oldVersion) => {
-  const currentVersion = shallowHash(...itemsRef.value.map(props.getItemKey));
+  const currentKeys = itemsRef.value.map(props.getItemKey);
 
-  if (domProjectionItemsRef.value === undefined) return oldVersion ?? currentVersion;
+  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);
+  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);
 
-  const lastSortedVersion = shallowHash(...domProjectionItemsRef.value.map(props.getItemKey));
+  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);
+  const domProjectionKeysSet = new Set(domProjectionKeys);
 
-  if (currentVersion === lastSortedVersion) return oldVersion ?? currentVersion;
+  for (let i = 0; i < currentKeys.length; i++) {
+    const hasInconsistentPosition = domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];
 
-  return oldVersion !== currentVersion ? currentVersion : lastSortedVersion;
+    if (hasInconsistentPosition) {
+      return shallowHash(...currentKeys);
+    }
+  }
+
+  return oldVersion ?? shallowHash(...currentKeys);
 });
 
 createSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);
@@ -117,7 +142,9 @@ function createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefine
       }
     },
   });
-  watch(toggler, (on) => on ? sortable.start() : sortable.stop());
+  watch([() => props.disableDragging, toggler], ([disabled, on]) => disabled || !on ? sortable.stop() : sortable.start(), {
+    immediate: true,
+  });
 
   return sortable;
 }
@@ -133,77 +160,56 @@ function moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean)
 
   if (!preventDefault) {
     moveElements(itemsRef.value, oldIndex, newIndex);
-    optionalUpdateRef(itemsRef);
   }
 }
 
-function isActive(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  return props.activeItems?.has(k) ?? false;
+function isActiveItem(item: T, index: number): boolean {
+  return props.isActive?.(item, index) ?? false;
 }
 
-function isDraggable(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  if (props.enableDragging === false) return false;
-  return (draggableSetRef.value?.has(k) ?? true);
+function isDraggableItem(item: T, index: number): boolean {
+  if (props.disableDragging === true) return false;
+  return (props.isDraggable?.(item, index) ?? true);
 }
 
-function isToggable(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  if (props.enableToggling === false) return false;
-  return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(k) ?? true);
+function isRemovableItem(item: T, index: number): boolean {
+  if (props.disableRemoving === true) return false;
+  return (props.isRemovable?.(item, index) ?? true);
 }
 
-function isToggled(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  return toggledSetRef.value?.has(k) ?? false;
+function isToggableItem(item: T, index: number): boolean {
+  if (props.disableToggling === true) return false;
+  return (props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle)));
 }
 
-function isPinnable(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  if (props.enablePinning === false) return false;
-  return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(k) ?? true);
+function isToggledItem(item: T, index: number): boolean {
+  return props.isToggled?.(item, index) ?? false;
 }
 
-function isPinned(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  return pinnedSetRef.value?.has(k) ?? false;
+function isPinnableItem(item: T, index: number): boolean {
+  if (props.disablePinning === true) return false;
+  return (props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin)));
 }
 
-function isExpandable(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  if (props.enableExpanding === false) return false;
-  return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(k) ?? true);
+function isPinnedItem(item: T, index: number): boolean {
+  return props.isPinned?.(item, index) ?? false;
 }
 
-function isExpanded(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  return expandedSetRef.value?.has(k) ?? false;
+function isExpandableItem(item: T, index: number): boolean {
+  if (props.disableExpanding === true) return false;
+  return (props.isExpandable?.(item, index) ?? (isFunction(props.isExpanded) || isFunction(props.onExpand)));
 }
 
-function isRemovable(item: T, index: number): boolean {
-  const k = props.getItemKey(item, index);
-  if (props.enableRemoving === false) return false;
-  if (removableSetRef.value?.has(k) === false) return false;
-  return props.enableRemoving === true || typeof props.onRemove === 'function';
+function isExpandedItem(item: T, index: number): boolean {
+  return props.isExpanded?.(item, index) ?? false;
 }
 
 function handleExpand(item: T, index: number) {
-  if (props.onExpand?.(item, index) === false || isNil(expandedSetRef.value)) return;
-  const k = props.getItemKey(item, index);
-  const expanded = expandedSetRef.value;
-  if (expanded.has(k)) expanded.delete(k);
-  else expanded.add(k);
-  optionalUpdateRef(expandedSetRef);
+  props.onExpand?.(item, index);
 }
 
 function handleToggle(item: T, index: number) {
-  if (props.onToggle?.(item, index) === false || isNil(toggledSetRef.value)) return;
-  const k = props.getItemKey(item, index);
-  const toggled = toggledSetRef.value;
-  if (toggled.has(k)) toggled.delete(k);
-  else toggled.add(k);
-  optionalUpdateRef(toggledSetRef);
+  props.onToggle?.(item, index);
 }
 
 function handlePin(item: T, index: number) {
@@ -211,43 +217,18 @@ function handlePin(item: T, index: number) {
     throw new Error('Pinnable item not found');
   }
 
-  if (props.onPin?.(item, index) === false || isNil(pinnedSetRef.value)) return;
+  const alreadyPinned = pinnedItemsRef.value.includes(item);
+
+  if (props.onPin?.(item, index) === false) return;
 
-  const k = props.getItemKey(item, index);
-  const pinned = pinnedSetRef.value;
-  const alreadyPinned = pinned.has(k);
-  if (alreadyPinned) pinned.delete(k);
-  else pinned.add(k);
-  optionalUpdateRef(pinnedSetRef);
-  moveItems(index, pinned.size + (alreadyPinned ? 0 : -1), false);
+  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);
 }
 
 function handleRemove(item: T, index: number) {
-  if (props.onRemove?.(item, index) !== false) {
-    const k = props.getItemKey(item, index);
-
-    itemsRef.value.splice(index, 1);
-    optionalUpdateRef(itemsRef);
-
-    if (pinnedSetRef.value?.has(k)) {
-      pinnedSetRef.value.delete(k);
-      optionalUpdateRef(pinnedSetRef);
-    }
-
-    if (toggledSetRef.value?.has(k)) {
-      toggledSetRef.value.delete(k);
-      optionalUpdateRef(toggledSetRef);
-    }
-  }
+  if (props.onRemove?.(item, index) === false) return;
+  itemsRef.value.splice(index, 1);
 }
 
-// version fix problem with sync between data and rendered values
-const getKey = (item: T, index: number) => {
-  return `${versionRef.value}-${props.getItemKey(item, index)}`;
-};
-const pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));
-const unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));
-
 const getItemClass = (item: T, index: number): null | string | string[] => {
   if (typeof props.itemClass === 'function') {
     return props.itemClass(item, index);
@@ -267,15 +248,15 @@ const getItemClass = (item: T, index: number): null | string | string[] => {
         :index="pinnedIndex"
         :item="pinnedItem"
         :showDragHandle="dndSortingEnabled"
-        :isActive="isActive(pinnedItem, pinnedIndex)"
-        :isDraggable="isDraggable(pinnedItem, pinnedIndex)"
-        :isRemovable="isRemovable(pinnedItem, pinnedIndex)"
-        :isToggable="isToggable(pinnedItem, pinnedIndex)"
-        :isToggled="isToggled(pinnedItem, pinnedIndex)"
-        :isPinnable="isPinnable(pinnedItem, pinnedIndex)"
-        :isPinned="isPinned(pinnedItem, pinnedIndex)"
-        :isExpandable="isExpandable(pinnedItem, pinnedIndex)"
-        :isExpanded="isExpanded(pinnedItem, pinnedIndex)"
+        :isActive="isActiveItem(pinnedItem, pinnedIndex)"
+        :isDraggable="isDraggableItem(pinnedItem, pinnedIndex)"
+        :isRemovable="isRemovableItem(pinnedItem, pinnedIndex)"
+        :isToggable="isToggableItem(pinnedItem, pinnedIndex)"
+        :isToggled="isToggledItem(pinnedItem, pinnedIndex)"
+        :isPinnable="isPinnableItem(pinnedItem, pinnedIndex)"
+        :isPinned="true"
+        :isExpandable="isExpandableItem(pinnedItem, pinnedIndex)"
+        :isExpanded="isExpandedItem(pinnedItem, pinnedIndex)"
 
         @click="emits('itemClick', pinnedItem)"
         @remove="handleRemove"
@@ -296,18 +277,18 @@ const getItemClass = (item: T, index: number): null | string | string[] => {
         v-for="(unpinnedItem, unpinnedIndex) in unpinnedItemsRef" :key="unpinnedKeysRef[unpinnedIndex]"
         :class="[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]"
 
-        :index="unpinnedIndex + (pinnedSetRef?.size ?? 0)"
+        :index="unpinnedIndex + (pinnedItemsRef?.length ?? 0)"
         :item="unpinnedItem"
         :showDragHandle="dndSortingEnabled"
-        :isActive="isActive(unpinnedItem, unpinnedIndex)"
-        :isDraggable="isDraggable(unpinnedItem, unpinnedIndex)"
-        :isRemovable="isRemovable(unpinnedItem, unpinnedIndex)"
-        :isToggable="isToggable(unpinnedItem, unpinnedIndex)"
-        :isToggled="isToggled(unpinnedItem, unpinnedIndex)"
-        :isPinnable="isPinnable(unpinnedItem, unpinnedIndex)"
-        :isPinned="isPinned(unpinnedItem, unpinnedIndex)"
-        :isExpandable="isExpandable(unpinnedItem, unpinnedIndex)"
-        :isExpanded="isExpanded(unpinnedItem, unpinnedIndex)"
+        :isActive="isActiveItem(unpinnedItem, unpinnedIndex)"
+        :isDraggable="isDraggableItem(unpinnedItem, unpinnedIndex)"
+        :isRemovable="isRemovableItem(unpinnedItem, unpinnedIndex)"
+        :isToggable="isToggableItem(unpinnedItem, unpinnedIndex)"
+        :isToggled="isToggledItem(unpinnedItem, unpinnedIndex)"
+        :isPinnable="isPinnableItem(unpinnedItem, unpinnedIndex)"
+        :isPinned="false"
+        :isExpandable="isExpandableItem(unpinnedItem, unpinnedIndex)"
+        :isExpanded="isExpandedItem(unpinnedItem, unpinnedIndex)"
 
         @click="emits('itemClick', unpinnedItem)"
         @remove="handleRemove"

package/src/components/PlElementList/PlElementListItem.vue

@@ -86,7 +86,10 @@ const emit = defineEmits<{
         </div>
       </div>
     </div>
-    <div v-if="hasContentSlot && props.isExpanded" :class="$style.body">
+    <div
+      v-if="hasContentSlot && props.isExpanded"
+      :class="[$style.body, { [$style.disabled]: props.isToggled }]"
+    >
       <slot name="content" :item="props.item" :index="props.index" />
     </div>
   </div>
@@ -144,6 +147,7 @@ const emit = defineEmits<{
   display: flex;
   align-items: center;
   padding: 8px;
+  min-height: 40px;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
   background: var(--head-background);
 
@@ -180,6 +184,10 @@ const emit = defineEmits<{
   gap: 12px;
   padding: 24px;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
+
+  &.disabled {
+    pointer-events: none;
+  }
 }
 
 .actions {