@milaboratories/uikit 2.2.92 → 2.2.93

package/src/components/PlElementList/PlElementList.vue

@@ -0,0 +1,336 @@
+<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 { useSortable } from '@vueuse/integrations/useSortable';
+import { type SortableEvent } from 'sortablejs';
+import { moveElements, optionalUpdateRef } from './utils.ts';
+import PlElementListItem from './PlElementListItem.vue';
+
+const itemsRef = defineModel<T[]>('items', { required: true });
+const draggableSetRef = defineModel<Set<T>>('draggableItems');
+const removableSetRef = defineModel<Set<T>>('removableItems');
+
+const expandableSetRef = defineModel<Set<T>>('expandableItems');
+const expandedSetRef = defineModel<Set<T>>('expandedItems');
+
+const pinnableSetRef = defineModel<Set<T>>('pinnableItems');
+const pinnedSetRef = defineModel<Set<T>>('pinnedItems');
+
+const toggableSetRef = defineModel<Set<T>>('toggableItems');
+const toggledSetRef = defineModel<Set<T>>('toggledItems');
+
+const props = withDefaults(
+  defineProps<{
+    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
+    activeItems?: Set<T>;
+
+    enableDragging?: boolean;
+    getItemKey?: (item: T) => K;
+    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;
+    onRemove?: (item: T, index: number) => void | boolean;
+
+    enableToggling?: boolean;
+    onToggle?: (item: T, index: number) => void | boolean;
+
+    enablePinning?: boolean;
+    onPin?: (item: T, index: number) => void | boolean;
+  }>(), {
+    itemClass: undefined,
+    activeItems: undefined,
+
+    enableDragging: undefined,
+    enableRemoving: undefined,
+    enableExpanding: undefined,
+    enableToggling: undefined,
+    enablePinning: undefined,
+
+    getItemKey: undefined,
+    onDragEnd: undefined,
+    onSort: undefined,
+    onRemove: undefined,
+    onExpand: undefined,
+    onToggle: undefined,
+    onPin: undefined,
+  },
+);
+
+const emits = defineEmits<{
+  (e: 'itemClick', item: T): void;
+}>();
+
+const slots = defineSlots<{
+  ['item-title']: (props: { item: T; index: number }) => unknown;
+  ['item-content']?: (props: { item: T; index: number }) => unknown;
+}>();
+
+const dndSortingEnabled = computed((): boolean => {
+  return props.enableDragging !== false && !isNil(props.getItemKey);
+});
+
+const pinnedItemsRef = computed(() => itemsRef.value.filter(isPinned));
+const hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);
+
+const unpinnedItemsRef = computed(() => itemsRef.value.filter((item) => !isPinned(item)));
+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 when items have been changed
+const versionRef = computed<number>((oldVersion) => {
+  const currentVersion = shallowHash(...itemsRef.value);
+
+  if (domProjectionItemsRef.value === undefined) return oldVersion ?? currentVersion;
+
+  const lastSortedVersion = shallowHash(...domProjectionItemsRef.value);
+
+  if (currentVersion === lastSortedVersion) return oldVersion ?? currentVersion;
+
+  return oldVersion !== currentVersion ? currentVersion : lastSortedVersion;
+});
+
+createSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);
+createSortable(hasUnpinnedItems, unpinnedContainerRef, unpinnedItemsRef, () => pinnedItemsRef.value.length);
+
+function createSortable(toggler: ShallowRef<boolean>, elRef: ShallowRef<undefined | HTMLElement>, itemsRef: ShallowRef<T[]>, getOffset: () => number) {
+  const sortable = useSortable(elRef, itemsRef, {
+    handle: `[data-draggable="true"]`,
+    animation: 150,
+    forceFallback: true,
+    fallbackOnBody: true,
+    scrollSensitivity: 80,
+    forceAutoScrollFallback: true,
+    onUpdate: (evt: SortableEvent) => {
+      if (evt.oldIndex == null || evt.newIndex == null) {
+        throw new Error('Sortable event has no index');
+      }
+      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {
+        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);
+      }
+    },
+  });
+  watch(toggler, (on) => on ? sortable.start() : sortable.stop());
+
+  return sortable;
+}
+
+function moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {
+  if (oldIndex === newIndex) return;
+
+  if (afterUpdateDom) {
+    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);
+  }
+
+  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;
+
+  if (!preventDefault) {
+    moveElements(itemsRef.value, oldIndex, newIndex);
+    optionalUpdateRef(itemsRef);
+  }
+}
+
+function isActive(item: T): boolean {
+  return props.activeItems?.has(item) ?? false;
+}
+
+function isDraggable(item: T): boolean {
+  if (props.enableDragging === false) return false;
+  return (draggableSetRef.value?.has(item) ?? true);
+}
+
+function isToggable(item: T): boolean {
+  if (props.enableToggling === false) return false;
+  return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(item) ?? true);
+}
+
+function isToggled(item: T): boolean {
+  return toggledSetRef.value?.has(item) ?? false;
+}
+
+function isPinnable(item: T): boolean {
+  if (props.enablePinning === false) return false;
+  return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(item) ?? true);
+}
+
+function isPinned(item: T): boolean {
+  return pinnedSetRef.value?.has(item) ?? false;
+}
+
+function isExpandable(item: T): boolean {
+  if (props.enableExpanding === false) return false;
+  return !isNil(expandedSetRef.value) && (expandableSetRef.value?.has(item) ?? true);
+}
+
+function isExpanded(item: T): boolean {
+  return expandedSetRef.value?.has(item) ?? false;
+}
+
+function isRemovable(item: T): boolean {
+  if (props.enableRemoving === false) return false;
+  if (removableSetRef.value?.has(item) === false) return false;
+  return props.enableRemoving === true || typeof props.onRemove === 'function';
+}
+
+function handleExpand(item: T, index: number) {
+  if (props.onExpand?.(item, index) === false || isNil(expandedSetRef.value)) return;
+
+  const expanded = expandedSetRef.value;
+  if (expanded.has(item)) expanded.delete(item);
+  else expanded.add(item);
+  optionalUpdateRef(expandedSetRef);
+}
+
+function handleToggle(item: T, index: number) {
+  if (props.onToggle?.(item, index) === false || isNil(toggledSetRef.value)) return;
+
+  const toggled = toggledSetRef.value;
+  if (toggled.has(item)) toggled.delete(item);
+  else toggled.add(item);
+  optionalUpdateRef(toggledSetRef);
+}
+
+function handlePin(item: T, oldIndex: number) {
+  if (oldIndex === -1) {
+    throw new Error('Pinnable item not found');
+  }
+
+  if (props.onPin?.(item, oldIndex) === false || isNil(pinnedSetRef.value)) return;
+
+  const pinned = pinnedSetRef.value;
+  const alreadyPinned = pinned.has(item);
+  if (alreadyPinned) pinned.delete(item);
+  else pinned.add(item);
+  optionalUpdateRef(pinnedSetRef);
+  moveItems(oldIndex, pinned.size + (alreadyPinned ? 0 : -1), false);
+}
+
+function handleRemove(item: T, index: number) {
+  if (props.onRemove?.(item, index) !== false) {
+    itemsRef.value.splice(index, 1);
+    optionalUpdateRef(itemsRef);
+
+    if (pinnedSetRef.value?.has(item)) {
+      pinnedSetRef.value.delete(item);
+      optionalUpdateRef(pinnedSetRef);
+    }
+
+    if (toggledSetRef.value?.has(item)) {
+      toggledSetRef.value.delete(item);
+      optionalUpdateRef(toggledSetRef);
+    }
+  }
+}
+
+// version fix problem with sync between data and rendered values
+const getKey = (item: T, index: number) => {
+  if (isNil(props.getItemKey)) return `${versionRef.value}-${index}`;
+  return `${versionRef.value}-${props.getItemKey(item)}`;
+};
+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);
+  }
+  return props.itemClass ?? null;
+};
+
+</script>
+
+<template>
+  <div :class="$style.root">
+    <div ref="pinnedContainerRef" :class="$style.list">
+      <PlElementListItem
+        v-for="(pinnedItem, pinnedIndex) in pinnedItemsRef" :key="pinnedKeysRef[pinnedIndex]"
+        :class="[$style.item, getItemClass(pinnedItem, pinnedIndex)]"
+
+        :index="pinnedIndex"
+        :item="pinnedItem"
+        :showDragHandle="dndSortingEnabled"
+        :isActive="isActive(pinnedItem)"
+        :isDraggable="isDraggable(pinnedItem)"
+        :isRemovable="isRemovable(pinnedItem)"
+        :isToggable="isToggable(pinnedItem)"
+        :isToggled="isToggled(pinnedItem)"
+        :isPinnable="isPinnable(pinnedItem)"
+        :isPinned="isPinned(pinnedItem)"
+        :isExpandable="isExpandable(pinnedItem)"
+        :isExpanded="isExpanded(pinnedItem)"
+
+        @click="emits('itemClick', pinnedItem)"
+        @remove="handleRemove"
+        @toggle="handleToggle"
+        @pin="handlePin"
+        @expand="handleExpand"
+      >
+        <template #title="{ item, index }">
+          <slot :index="index" :item="item" name="item-title" />
+        </template>
+        <template v-if="slots['item-content']" #content="{ item, index }">
+          <slot :index="index" :item="item" name="item-content" />
+        </template>
+      </PlElementListItem>
+    </div>
+    <div v-if="hasUnpinnedItems" ref="unpinnedContainerRef" :class="$style.list">
+      <PlElementListItem
+        v-for="(unpinnedItem, unpinnedIndex) in unpinnedItemsRef" :key="unpinnedKeysRef[unpinnedIndex]"
+        :class="[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]"
+
+        :index="unpinnedIndex + (pinnedSetRef?.size ?? 0)"
+        :item="unpinnedItem"
+        :showDragHandle="dndSortingEnabled"
+        :isActive="isActive(unpinnedItem)"
+        :isDraggable="isDraggable(unpinnedItem)"
+        :isRemovable="isRemovable(unpinnedItem)"
+        :isToggable="isToggable(unpinnedItem)"
+        :isToggled="isToggled(unpinnedItem)"
+        :isPinnable="isPinnable(unpinnedItem)"
+        :isPinned="isPinned(unpinnedItem)"
+        :isExpandable="isExpandable(unpinnedItem)"
+        :isExpanded="isExpanded(unpinnedItem)"
+
+        @click="emits('itemClick', unpinnedItem)"
+        @remove="handleRemove"
+        @toggle="handleToggle"
+        @pin="handlePin"
+        @expand="handleExpand"
+      >
+        <template #title="{ item, index }">
+          <slot :index="index" :item="item" name="item-title" />
+        </template>
+        <template v-if="slots['item-content']" #content="{ item, index }">
+          <slot :index="index" :item="item" name="item-content" />
+        </template>
+      </PlElementListItem>
+    </div>
+  </div>
+</template>
+
+<style module>
+.root, .list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 180px;
+}
+
+.item {
+  width: 100%;
+}
+
+:global(.sortable-ghost) {
+  visibility: hidden;
+}
+:global(.sortable-drag) {
+  opacity: 1;
+}
+</style>

package/src/components/PlElementList/PlElementListItem.vue

@@ -0,0 +1,239 @@
+<script generic="T extends unknown = unknown" lang="ts" setup>
+import { computed } from 'vue';
+import { PlIcon16 } from '../PlIcon16';
+import { PlIcon24 } from '../PlIcon24';
+
+const props = defineProps<{
+  item: T;
+  index: number;
+  showDragHandle: boolean;
+  isActive: boolean;
+  isDraggable: boolean;
+  isRemovable: boolean;
+  isExpandable: boolean;
+  isExpanded: boolean;
+  isToggable: boolean;
+  isToggled: boolean;
+  isPinnable: boolean;
+  isPinned: boolean;
+}>();
+
+const slots = defineSlots<{
+  title: (props: { item: T; index: number }) => unknown;
+  content?: (props: { item: T; index: number }) => unknown;
+}>();
+const hasContentSlot = computed(() => slots['content'] !== undefined);
+
+const emit = defineEmits<{
+  (e: 'expand', item: T, index: number): void;
+  (e: 'toggle', item: T, index: number): void;
+  (e: 'pin', item: T, index: number): void;
+  (e: 'remove', item: T, index: number): void;
+}>();
+</script>
+
+<template>
+  <div
+    :class="[$style.root, {
+      [$style.active]: props.isActive,
+      [$style.pinned]: props.isPinned,
+      [$style.disabled]: props.isToggled,
+    }]"
+  >
+    <div
+      :class="[$style.head, {
+        [$style.clickable]: hasContentSlot,
+      }]"
+      @click="isExpandable && emit('expand', props.item, props.index)"
+    >
+      <div
+        v-if="props.showDragHandle"
+        :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]"
+        :data-draggable="props.isDraggable"
+      >
+        <PlIcon16 name="drag-dots" />
+      </div>
+      <PlIcon16 v-if="isExpandable" :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]" name="chevron-down" />
+
+      <div :class="$style.title">
+        <slot name="title" :item="props.item" :index="props.index" />
+      </div>
+
+      <div :class="[$style.actions, $style.showOnHover]">
+        <div
+          v-if="props.isToggable"
+          :class="[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]"
+          @click.stop="emit('toggle', props.item, props.index)"
+        >
+          <PlIcon24 :name="props.isToggled === true ? 'view-hide' : 'view-show'" size="16" />
+        </div>
+        <div
+          v-if="props.isPinnable"
+          :class="[$style.action, $style.clickable, {
+            [$style.disable]: !props.isPinnable,
+            [$style.activated]: props.isPinned,
+          }]"
+          @click.stop="emit('pin', props.item, props.index)"
+        >
+          <PlIcon24 name="pin" size="16" />
+        </div>
+        <div
+          v-if="props.isRemovable"
+          :class="[$style.action, $style.clickable]"
+          @click.stop="emit('remove', props.item, props.index)"
+        >
+          <PlIcon16 name="close" />
+        </div>
+      </div>
+    </div>
+    <div v-if="hasContentSlot && props.isExpanded" :class="$style.body">
+      <slot name="content" :item="props.item" :index="props.index" />
+    </div>
+  </div>
+</template>
+
+<style module>
+@use '../../assets/variables.scss' as *;
+
+.root {
+  --background: rgba(255, 255, 255, 0.8);
+  --border-color: var(--color-div-grey);
+  --head-background: unset;
+  --box-shadow: none;
+  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);
+
+  &:global(.sortable-drag),
+  &:global(.sortable-chosen) {
+    --head-background: var(--gradient-light-lime);
+    --border-color: var(--border-color-focus);
+    --box-shadow: var(--box-shadow-active)
+  }
+}
+.root {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  background-color: var(--background);
+  transition: box-shadow 0.15s;
+  box-shadow: var(--box-shadow);;
+  overflow: hidden;
+
+  &:hover {
+    --border-color: var(--border-color-focus);
+  }
+
+  &.disabled {
+    opacity: 0.6;
+    filter: grayscale(1);
+  }
+
+  &.pinned {
+    --background: var(--bg-base-light);
+  }
+
+  &.active {
+    --border-color: var(--border-color-focus);
+    --head-background: var(--btn-accent-positive-500);
+  }
+}
+
+.head {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  background: var(--head-background);
+
+  &:hover, &.opened {
+    --head-background: var(--gradient-light-lime);
+  }
+}
+
+.contentChevron {
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  transform: rotate(-90deg);
+  transition: transform 0.15s;
+
+  &.opened {
+    transform: rotate(0deg);
+  }
+}
+
+.title {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  max-width: calc(100% - 50px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 24px;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
+.actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  background-color: var(--background);
+  border-radius: var(--border-radius);
+}
+
+.action {
+  width: 24px;
+  height: 24px;
+  padding: 4px; /* use padding instead of gap on parent, for better accessibility */
+  opacity: 0.6;
+  border-radius: var(--border-radius);
+  transition: all 0.15s;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    opacity: 1;
+    background-color: var(--bg-elevated-02);
+  }
+
+  &.activated {
+    opacity: 0.8;
+  }
+
+  &.disable {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.draggable {
+  cursor: grab;
+}
+
+.showOnHover {
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.root:hover .showOnHover {
+  opacity: 1;
+}
+</style>

package/src/components/PlElementList/README.md

@@ -0,0 +1,92 @@
+PlElementList.vue
+=================
+
+## 1. GENERICS
+
+• **`T`** – Runtime type of a single list element
+• **`K`** – Type returned by `getItemKey` (typically `string` or `number`)
+
+
+## 2. TWO-WAY BINDINGS (`v-model`)
+
+| Model name        | Type     | Purpose / Behaviour                                    |
+|-------------------|----------|--------------------------------------------------------|
+| `items`*          | `T[]`    | Source array; the list you render & mutate             |
+| `draggableItems`  | `Set<T>` | Restricts which items may be dragged                   |
+| `removableItems`  | `Set<T>` | Restricts which items may be removed                   |
+| `expandableItems` | `Set<T>` | Restricts which items may be expanded                  |
+| `expandedItems`   | `Set<T>` | Tracks the expand/collapse state per item              |
+| `pinnableItems`   | `Set<T>` | Restricts which items may be pinned                    |
+| `pinnedItems`     | `Set<T>` | Tracks the *current* pinned elements                   |
+| `toggableItems`   | `Set<T>` | Restricts which items may be toggled (show/hide)       |
+| `toggledItems`    | `Set<T>` | Tracks the visibility toggle state per item            |
+
+(*required)
+
+## 3. PROPS
+
+| Prop             | Type                                                      | Default     | Notes                                           |
+|------------------|-----------------------------------------------------------|-------------|-------------------------------------------------|
+| `getItemKey`     | `(item:T) ⇒ K`                                            | —           | Stable key for `v-for` & SortableJS            |
+| `itemClass`      | `string \| string[] \| ((item:T, index:number) ⇒ string \| string[])` | — | CSS classes for individual items |
+| `activeItems`    | `Set<T>`                                                  | —           | Set of currently active items                   |
+| **Sorting**      |                                                           |             |                                                 |
+| `enableDragging` | `boolean`                                                 | `undefined` | Master switch for drag-and-drop                |
+| `onDragEnd`      | `(oldIdx:number, newIdx:number) ⇒ void\|bool`            | —           | Fired by SortableJS; return **false** to ignore |
+| `onSort`         | `(oldIdx:number, newIdx:number) ⇒ void\|bool`            | —           | Return **false** to cancel applying new order  |
+| **Removing**     |                                                           |             |                                                 |
+| `enableRemoving` | `boolean`                                                 | `undefined` | `true` ⇒ always show remove, `false` ⇒ never    |
+| `onRemove`       | `(item:T, index:number) ⇒ void\|bool`                    | —           | Return **false** to veto                        |
+| **Expanding**    |                                                           |             |                                                 |
+| `enableExpanding`| `boolean`                                                 | `undefined` | Master switch for expand/collapse               |
+| `onExpand`       | `(item:T, index:number) ⇒ void\|bool`                    | —           | Return **false** to veto                        |
+| **Toggling**     |                                                           |             |                                                 |
+| `enableToggling` | `boolean`                                                 | `undefined` | Master switch for visibility toggle             |
+| `onToggle`       | `(item:T, index:number) ⇒ void\|bool`                    | —           | Return **false** to veto                        |
+| **Pinning**      |                                                           |             |                                                 |
+| `enablePinning`  | `boolean`                                                 | `undefined` | Master switch for pinning                       |
+| `onPin`          | `(item:T, index:number) ⇒ void\|bool`                    | —           | Return **false** to veto                        |
+
+
+## 4. SLOTS
+
+- **`item-title`** – **required**. Receives `{ item, index }`.
+- **`item-content`** – optional. Same slot props; rendered only when the item
+  is in the “opened” state (`toggleContent` event).
+
+
+## 5. EVENTS
+
+| Event      | Payload             | Description                                    |
+|------------|---------------------|------------------------------------------------|
+| `itemClick`| `(item: T)`         | Emitted when an item is clicked               |
+
+Additionally, these events bubble up from `<PlElementListItem>`:
+- `remove` – `(item: T, index: number)` 
+- `toggle` – `(item: T, index: number)` 
+- `pin` – `(item: T, index: number)` 
+- `expand` – `(item: T, index: number)`
+
+
+## 6. EXAMPLE USAGE
+
+```vue
+<PlElementList
+    v-model:items="elements"
+    v-model:pinnedItems="pinned"
+    v-model:expandedItems="expanded"
+    v-model:toggledItems="hidden"
+    :getItemKey="el => el.id"
+    :onSort="(oldIdx, newIdx) => api.saveOrder(oldIdx, newIdx)"
+    :activeItems="activeSet"
+    :itemClass="(item, index) => ({ 'special-item': item.isSpecial })"
+    @itemClick="handleItemClick"
+>
+  <template #item-title="{ item }">
+    {{ item.name }}
+  </template>
+  <template #item-content="{ item }">
+    <pre>{{ JSON.stringify(item.meta, null, 2) }}</pre>
+  </template>
+</PlElementList>
+```

package/src/components/PlElementList/index.ts

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

package/src/components/PlElementList/utils.ts

@@ -0,0 +1,17 @@
+import { isRef, isShallow } from 'vue';
+import { shallowClone } from '@milaboratories/helpers';
+
+export const moveElements = <T>(array: T[], from: number, to: number): T[] => {
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    array.splice(to, 0, element);
+  }
+
+  return array;
+};
+
+export function optionalUpdateRef<T>(ref: T) {
+  if (isRef(ref) && isShallow(ref)) {
+    ref.value = shallowClone(ref.value);
+  }
+}

package/src/index.ts

@@ -70,6 +70,7 @@ export * from './components/PlLoaderCircular';
 export * from './components/PlSplash';
 export * from './components/PlProgressCell';
 export * from './components/PlAutocomplete';
+export * from './components/PlElementList';
 
 export * from './components/PlFileDialog';
 export * from './components/PlFileInput';