@platforma-sdk/ui-vue 1.37.7 → 1.37.11

package/src/components/PlElementList/PlElementList.vue

@@ -1,287 +0,0 @@
-<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 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<{
-    getItemKey: (item: T) => K;
-    onSort?: (oldIndex: number, newIndex: number) => void | boolean;
-
-    enableDragging?: boolean;
-    onDragEnd?: (oldIndex: number, newIndex: 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;
-  }>(), {
-    enableDragging: true,
-    enableRemoving: undefined,
-    enableToggling: true,
-    enablePinning: true,
-    onSort: undefined,
-    onDragEnd: undefined,
-    onRemove: undefined,
-    onToggle: undefined,
-    onPin: undefined,
-  },
-);
-
-const slots = defineSlots<{
-  ['item-title']: (props: { item: T; index: number }) => unknown;
-  ['item-content']?: (props: { item: T; index: number }) => unknown;
-}>();
-
-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 openedSetRef = shallowRef(new Set<T>());
-
-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,
-    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 isDraggable(item: T) {
-  if (props.enableDragging === false) return false;
-  return (draggableSetRef.value?.has(item) ?? true);
-}
-
-function isToggable(item: T) {
-  if (props.enableToggling === false) return false;
-  return !isNil(toggledSetRef.value) && (toggableSetRef.value?.has(item) ?? true);
-}
-
-function isToggled(item: T) {
-  return toggledSetRef.value?.has(item) ?? false;
-}
-
-function isPinnable(item: T) {
-  if (props.enablePinning === false) return false;
-  return !isNil(pinnedSetRef.value) && (pinnableSetRef.value?.has(item) ?? true);
-}
-
-function isPinned(item: T) {
-  return pinnedSetRef.value?.has(item) ?? false;
-}
-
-function isOpened(item: T) {
-  return openedSetRef.value.has(item);
-}
-
-function isRemovable(item: T) {
-  if (props.enableRemoving === false) return false;
-  if (removableSetRef.value?.has(item) === false) return false;
-  return props.enableRemoving === true || typeof props.onRemove === 'function';
-}
-
-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);
-    }
-  }
-}
-
-function handleToggleContent(item: T) {
-  const opened = openedSetRef.value;
-  if (opened.has(item)) opened.delete(item);
-  else opened.add(item);
-  optionalUpdateRef(openedSetRef);
-}
-
-// version fix problem with sync between data and rendered values
-const getKey = (item: T) => `${versionRef.value}-${props.getItemKey(item)}`;
-const pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));
-const unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));
-
-</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"
-
-        :index="pinnedIndex"
-        :item="pinnedItem"
-        :showDragHandle="props.enableDragging"
-        :isDraggable="isDraggable(pinnedItem)"
-        :isRemovable="isRemovable(pinnedItem)"
-        :isToggable="isToggable(pinnedItem)"
-        :isToggled="isToggled(pinnedItem)"
-        :isPinnable="isPinnable(pinnedItem)"
-        :isPinned="isPinned(pinnedItem)"
-        :isOpened="isOpened(pinnedItem)"
-
-        @remove="handleRemove"
-        @toggle="handleToggle"
-        @pin="handlePin"
-        @toggleContent="handleToggleContent"
-      >
-        <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"
-
-        :index="unpinnedIndex + (pinnedSetRef?.size ?? 0)"
-        :item="unpinnedItem"
-        :showDragHandle="props.enableDragging"
-        :isDraggable="isDraggable(unpinnedItem)"
-        :isRemovable="isRemovable(unpinnedItem)"
-        :isToggable="isToggable(unpinnedItem)"
-        :isToggled="isToggled(unpinnedItem)"
-        :isPinnable="isPinnable(unpinnedItem)"
-        :isPinned="isPinned(unpinnedItem)"
-        :isOpened="isOpened(unpinnedItem)"
-
-        @remove="handleRemove"
-        @toggle="handleToggle"
-        @pin="handlePin"
-        @toggleContent="handleToggleContent"
-      >
-        <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

@@ -1,222 +0,0 @@
-<script generic="T extends unknown = unknown" lang="ts" setup>
-import { computed } from 'vue';
-import { PlIcon16, PlIcon24 } from '@milaboratories/uikit';
-
-const props = defineProps<{
-  item: T;
-  index: number;
-  showDragHandle: boolean;
-  isDraggable: boolean;
-  isRemovable: boolean;
-  isToggable: boolean;
-  isToggled: boolean;
-  isPinnable: boolean;
-  isPinned: boolean;
-  isOpened: 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: 'toggle', item: T, index: number): void;
-  (e: 'pin', item: T, index: number): void;
-  (e: 'remove', item: T, index: number): void;
-  (e: 'toggleContent', item: T, index: number): void;
-}>();
-</script>
-
-<template>
-  <div
-    :class="[$style.root, {
-      [$style.pinned]: props.isPinned,
-      [$style.disabled]: props.isToggled,
-    }]"
-  >
-    <div
-      :class="[$style.head, {
-        [$style.clickable]: hasContentSlot,
-      }]"
-      @click="emit('toggleContent', 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 :class="[$style.contentChevron, { [$style.opened]: props.isOpened }]" 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 && isOpened" :class="$style.body">
-      <slot name="content" :item="props.item" :index="props.index" />
-    </div>
-  </div>
-</template>
-
-<style module>
-.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);
-
-  &:hover {
-    --border-color: var(--border-color-focus);
-  }
-
-  &.disabled {
-    opacity: 0.6;
-    filter: grayscale(1);
-  }
-
-  &.pinned {
-    --background: var(--bg-base-light);
-  }
-}
-
-.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: block;
-  max-width: calc(100% - 50px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.body {
-  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

@@ -1,123 +0,0 @@
-PlElementList.vue
-=================
-A **generic, feature-rich list component** that supports drag-and-drop re-ordering,
-pin/unpin, expand/collapse, and optional removal of items. Written in the
-`<script setup lang="ts">` style and fully type-safe thanks to the generic
-parameters **`T`** (item type) and **`K`** (key type).
----------------------------------------------------------------------------
-
-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                   |
-| `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 (expand/collapse) |
-| `toggledItems`   | `Set<T>` | Tracks the expand/collapse state per item              |
-
-(*required)
-All sets are **fully replaceable**; assign a new `Set()` to trigger re-render.
----------------------------------------------------------------------------
-
-3. PROPS
-
----------------------------------------------------------------------------
-
-| Prop             | Type                                                      | Default     | Notes                                           |
-|------------------|-----------------------------------------------------------|-------------|-------------------------------------------------|
-| `getItemKey`*    | `(item:T) ⇒ K`                                            | —           | Stable key for `v-for` & SortableJS             |
-| **Sorting**      |                                                           |             |                                                 |
-| `onSort`         | `(sorted:T[], oldIdx:number, newIdx:number) ⇒ void\|bool` | —           | Return **false** to cancel applying new order   |
-| **Dragging**     |                                                           |             |                                                 |
-| `enableDragging` | `boolean`                                                 | `true`      | Master switch                                   |
-| `onDragEnd`      | `(oldIdx:number, newIdx:number) ⇒ void\|bool`             | —           | Fired by SortableJS; return **false** to ignore |
-| **Removing**     |                                                           |             |                                                 |
-| `enableRemoving` | `boolean`                                                 | `undefined` | `true` ⇒ always show remove, `false` ⇒ never    |
-| `onRemove`       | `(item:T, index:number) ⇒ void\|bool`                     | —           | Return **false** to veto                        |
-| **Toggling**     |                                                           |             |                                                 |
-| `enableToggling` | `boolean`                                                 | `true`      | Master switch                                   |
-| `onToggle`       | `(item:T, index:number) ⇒ void\|bool`                     | —           | Return **false** to veto                        |
-| **Pinning**      |                                                           |             |                                                 |
-| `enablePinning`  | `boolean`                                                 | `true`      | Master switch                                   |
-| `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 EMITTED BY `<PlElementListItem>`
-
----------------------------------------------------------------------------
-`remove`, `toggle`, `pin`, `toggleContent` – all bubble up with
-`(item:T, index:number)` so you can hook into your own logic if the higher-level
-callbacks are not enough.
----------------------------------------------------------------------------
-
-6. BEHAVIOUR SUMMARY
-
----------------------------------------------------------------------------
-
-- **Drag-and-drop** – powered by `useSortable()` (SortableJS).
-- **Pinning** – moves an item between “pinned” and “unpinned” regions; the two
-  regions render in separate `<div>` containers for visual clarity.
-- **Toggling** – expands/collapses the content slot and updates `toggledItems`.
-- **Removing** – deletes the item from `items` after `onRemove` (if supplied)
-  resolves to anything except `false`.
-- **Versioning** (`versionRef`) – a shallow hash of the items array keeps Vue
-  keys stable even when the array reference itself is unchanged but content
-  reorders.
-
----------------------------------------------------------------------------
-
-7. EXAMPLE USAGE
-
----------------------------------------------------------------------------
-
-```vue
-
-<PlElementList
-    v-model:items="elements"
-    v-model:pinnedItems="pinned"
-    v-model:toggledItems="opened"
-    :getItemKey="el => el.id"
-    :onSort="(newArr) => api.saveOrder(newArr)"
->
-  <template #item-title="{ item }">
-    {{ item.name }}
-  </template>
-  <template #item-content="{ item }">
-    <pre>{{ JSON.stringify(item.meta, null, 2) }}</pre>
-  </template>
-</PlElementList>
-```
-
----------------------------------------------------------------------------
-
-8. CAVEATS
-
----------------------------------------------------------------------------
-
-1. Each item **must** be referentially stable or provide a deterministic key.
-2. Never mutate `items` in place; always assign a new array to preserve reactivity.
-3. Indexes supplied to callbacks are **visual** indexes (pinned items are listed
-   first).

package/src/components/PlElementList/index.ts

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

package/src/components/PlElementList/utils.ts

@@ -1,17 +0,0 @@
-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);
-  }
-}