@milaboratories/uikit 2.10.37 → 2.10.39

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

@@ -1 +1 @@
-{"version":3,"file":"PlElementList.vue2.js","sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinnedItem));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value.filter((item, index) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n  return `${versionRef.value}-${props.getItemKey(item, index)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<T[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned = pinnedItemsRef.value.includes(item);\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value.splice(index, 1);\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n        :titleClass=\"getItemClassTitle(pinnedItem, pinnedIndex)\"\n        :contentClass=\"getItemClassContent(pinnedItem, pinnedIndex)\"\n        :beforeClass=\"getItemClassBefore(pinnedItem, pinnedIndex)\"\n        :afterClass=\"getItemClassAfter(pinnedItem, pinnedIndex)\"\n        :index=\"pinnedIndex\"\n        :item=\"pinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(pinnedItem, pinnedIndex)\"\n        :isDraggable=\"isDraggableItem(pinnedItem, pinnedIndex)\"\n        :isRemovable=\"isRemovableItem(pinnedItem, pinnedIndex)\"\n        :isToggable=\"isToggableItem(pinnedItem, pinnedIndex)\"\n        :isToggled=\"isToggledItem(pinnedItem, pinnedIndex)\"\n        :isPinnable=\"isPinnableItem(pinnedItem, pinnedIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(pinnedItem, pinnedIndex)\"\n        :isExpanded=\"isExpandedItem(pinnedItem, pinnedIndex)\"\n        @click=\"emits('itemClick', pinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n        :titleClass=\"getItemClassTitle(unpinnedItem, unpinnedIndex)\"\n        :contentClass=\"getItemClassContent(unpinnedItem, unpinnedIndex)\"\n        :beforeClass=\"getItemClassBefore(unpinnedItem, unpinnedIndex)\"\n        :afterClass=\"getItemClassAfter(unpinnedItem, unpinnedIndex)\"\n        :index=\"unpinnedIndex + (pinnedItemsRef?.length ?? 0)\"\n        :item=\"unpinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(unpinnedItem, unpinnedIndex)\"\n        :isDraggable=\"isDraggableItem(unpinnedItem, unpinnedIndex)\"\n        :isRemovable=\"isRemovableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggable=\"isToggableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggled=\"isToggledItem(unpinnedItem, unpinnedIndex)\"\n        :isPinnable=\"isPinnableItem(unpinnedItem, unpinnedIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(unpinnedItem, unpinnedIndex)\"\n        :isExpanded=\"isExpandedItem(unpinnedItem, unpinnedIndex)\"\n        @click=\"emits('itemClick', unpinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"names":["itemsRef","_useModel","__props","props","emits","__emit","slots","_useSlots","dndSortingEnabled","computed","pinnedItemsRef","isPinnedItem","hasPinnedItems","unpinnedItemsRef","item","index","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","getKey","versionRef","pinnedKeysRef","unpinnedKeysRef","oldVersion","currentKeys","shallowHash","domProjectionKeys","domProjectionKeysSet","i","createSortable","toggler","elRef","getOffset","sortable","useSortable","evt","_a","moveItems","watch","disabled","on","oldIndex","newIndex","afterUpdateDom","moveElements","isActiveItem","isDraggableItem","isRemovableItem","isToggableItem","isFunction","isToggledItem","isPinnableItem","isExpandableItem","isExpandedItem","handleExpand","handleToggle","handlePin","alreadyPinned","handleRemove","getClassFunction","propsItemClass","getItemClass","getItemClassTitle","getItemClassContent","getItemClassBefore","getItemClassAfter","_createElementBlock","_normalizeClass","$style","_createElementVNode","_openBlock","_Fragment","_renderList","pinnedItem","pinnedIndex","_createBlock","PlElementListItem","_unref","$event","_withCtx","_renderSlot","_ctx","unpinnedItem","unpinnedIndex"],"mappings":"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"}
+{"version":3,"file":"PlElementList.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlElementList/PlElementList.vue"],"sourcesContent":["<script\n  generic=\"T extends unknown = unknown, K extends number | string = number | string\"\n  lang=\"ts\"\n  setup\n>\nimport { isFunction, shallowHash } from \"@milaboratories/helpers\";\nimport { useSortable } from \"@vueuse/integrations/useSortable\";\nimport { type SortableEvent } from \"sortablejs\";\nimport type { ShallowRef } from \"vue\";\nimport { computed, shallowRef, watch } from \"vue\";\nimport PlElementListItem from \"./PlElementListItem.vue\";\nimport { moveElements } from \"./utils.ts\";\n\nconst itemsRef = defineModel<T[]>(\"items\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    getItemKey?: (item: T, index: number) => K;\n\n    itemClass?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);\n    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);\n    isActive?: (item: T, index: number) => boolean;\n\n    disableDragging?: boolean;\n    isDraggable?: (item: T, index: number) => boolean;\n    onDragEnd?: (oldIndex: number, newIndex: number) => void | boolean;\n    onSort?: (oldIndex: number, newIndex: number) => void | boolean;\n\n    disableRemoving?: boolean;\n    isRemovable?: (item: T, index: number) => boolean;\n    onRemove?: (item: T, index: number) => void | boolean;\n\n    disableExpanding?: boolean;\n    isExpandable?: (item: T, index: number) => boolean;\n    isExpanded?: (item: T, index: number) => boolean;\n    onExpand?: (item: T, index: number) => unknown;\n\n    disableToggling?: boolean;\n    isToggable?: (item: T, index: number) => boolean;\n    isToggled?: (item: T, index: number) => boolean;\n    onToggle?: (item: T, index: number) => unknown;\n\n    disablePinning?: boolean;\n    isPinnable?: (item: T, index: number) => boolean;\n    isPinned?: (item: T, index: number) => boolean;\n    onPin?: (item: T, index: number) => void | boolean;\n  }>(),\n  {\n    getItemKey: (item: T) => JSON.stringify(item) as K,\n\n    itemClass: undefined,\n    itemClassTitle: undefined,\n    itemClassContent: undefined,\n    itemClassBefore: undefined,\n    itemClassAfter: undefined,\n    isActive: undefined,\n\n    disableDragging: undefined,\n    isDraggable: undefined,\n    onDragEnd: undefined,\n    onSort: undefined,\n\n    disableRemoving: undefined,\n    isRemovable: undefined,\n    onRemove: undefined,\n\n    disableExpanding: undefined,\n    isExpandable: undefined,\n    isExpanded: undefined,\n    onExpand: undefined,\n\n    disableToggling: undefined,\n    isToggable: undefined,\n    isToggled: undefined,\n    onToggle: undefined,\n\n    disablePinning: undefined,\n    isPinnable: undefined,\n    isPinned: undefined,\n    onPin: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  (e: \"itemClick\", item: T): void;\n}>();\n\nconst slots = defineSlots<{\n  [\"item-title\"]: (props: { item: T; index: number }) => unknown;\n  [\"item-content\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-before\"]?: (props: { item: T; index: number }) => unknown;\n  [\"item-after\"]?: (props: { item: T; index: number }) => unknown;\n}>();\n\nconst dndSortingEnabled = computed((): boolean => {\n  return props.disableDragging !== true;\n});\n\nconst pinnedItemsRef = computed(() => itemsRef.value.filter(isPinnedItem));\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n  itemsRef.value.filter((item, index) => !isPinnedItem(item, index)),\n);\nconst hasUnpinnedItems = computed(() => unpinnedItemsRef.value.length > 0);\n\nconst domProjectionItemsRef = shallowRef<undefined | T[]>();\nconst pinnedContainerRef = shallowRef<HTMLElement>();\nconst unpinnedContainerRef = shallowRef<HTMLElement>();\n\n// version fix problem with sync between data and rendered values\nconst getKey = (item: T, index: number) => {\n  return `${versionRef.value}-${props.getItemKey(item, index)}`;\n};\nconst pinnedKeysRef = computed(() => pinnedItemsRef.value.map(getKey));\nconst unpinnedKeysRef = computed(() => unpinnedItemsRef.value.map(getKey));\n\n// version fix problem with sync between data and rendered values when items have been changed\nconst versionRef = computed<number>((oldVersion) => {\n  const currentKeys = itemsRef.value.map(props.getItemKey);\n\n  if (domProjectionItemsRef.value === undefined) return oldVersion ?? shallowHash(...currentKeys);\n  if (currentKeys.length !== domProjectionItemsRef.value.length) return shallowHash(...currentKeys);\n\n  const domProjectionKeys = domProjectionItemsRef.value.map(props.getItemKey);\n  const domProjectionKeysSet = new Set(domProjectionKeys);\n\n  for (let i = 0; i < currentKeys.length; i++) {\n    const hasInconsistentPosition =\n      domProjectionKeysSet.has(currentKeys[i]) && domProjectionKeys[i] !== currentKeys[i];\n\n    if (hasInconsistentPosition) {\n      return shallowHash(...currentKeys);\n    }\n  }\n\n  return oldVersion ?? shallowHash(...currentKeys);\n});\n\ncreateSortable(hasPinnedItems, pinnedContainerRef, pinnedItemsRef, () => 0);\ncreateSortable(\n  hasUnpinnedItems,\n  unpinnedContainerRef,\n  unpinnedItemsRef,\n  () => pinnedItemsRef.value.length,\n);\n\nfunction createSortable(\n  toggler: ShallowRef<boolean>,\n  elRef: ShallowRef<undefined | HTMLElement>,\n  itemsRef: ShallowRef<T[]>,\n  getOffset: () => number,\n) {\n  const sortable = useSortable(elRef, itemsRef, {\n    handle: `[data-draggable=\"true\"]`,\n    animation: 150,\n    forceFallback: true,\n    fallbackOnBody: true,\n    scrollSensitivity: 80,\n    forceAutoScrollFallback: true,\n    onUpdate: (evt: SortableEvent) => {\n      if (evt.oldIndex == null || evt.newIndex == null) {\n        throw new Error(\"Sortable event has no index\");\n      }\n      if (props.onDragEnd?.(evt.oldIndex, evt.newIndex) !== false) {\n        moveItems(getOffset() + evt.oldIndex, getOffset() + evt.newIndex, true);\n      }\n    },\n  });\n  watch(\n    [elRef, () => props.disableDragging, toggler],\n    ([elRef, disabled, on]) => {\n      if (!elRef || disabled || !on) {\n        sortable.stop();\n      } else {\n        sortable.start();\n      }\n    },\n    { immediate: true },\n  );\n\n  return sortable;\n}\n\nfunction moveItems(oldIndex: number, newIndex: number, afterUpdateDom: boolean) {\n  if (oldIndex === newIndex) return;\n\n  if (afterUpdateDom) {\n    domProjectionItemsRef.value = moveElements(itemsRef.value.slice(), oldIndex, newIndex);\n  }\n\n  const preventDefault = props.onSort?.(oldIndex, newIndex) === false;\n\n  if (!preventDefault) {\n    moveElements(itemsRef.value, oldIndex, newIndex);\n  }\n}\n\nfunction isActiveItem(item: T, index: number): boolean {\n  return props.isActive?.(item, index) ?? false;\n}\n\nfunction isDraggableItem(item: T, index: number): boolean {\n  if (props.disableDragging === true) return false;\n  return props.isDraggable?.(item, index) ?? true;\n}\n\nfunction isRemovableItem(item: T, index: number): boolean {\n  if (props.disableRemoving === true) return false;\n  return props.isRemovable?.(item, index) ?? true;\n}\n\nfunction isToggableItem(item: T, index: number): boolean {\n  if (props.disableToggling === true) return false;\n  return (\n    props.isToggable?.(item, index) ?? (isFunction(props.isToggled) || isFunction(props.onToggle))\n  );\n}\n\nfunction isToggledItem(item: T, index: number): boolean {\n  return props.isToggled?.(item, index) ?? false;\n}\n\nfunction isPinnableItem(item: T, index: number): boolean {\n  if (props.disablePinning === true) return false;\n  return props.isPinnable?.(item, index) ?? (isFunction(props.isPinned) || isFunction(props.onPin));\n}\n\nfunction isPinnedItem(item: T, index: number): boolean {\n  return props.isPinned?.(item, index) ?? false;\n}\n\nfunction isExpandableItem(item: T, index: number): boolean {\n  if (props.disableExpanding === true) return false;\n  return (\n    props.isExpandable?.(item, index) ??\n    (isFunction(props.isExpanded) || isFunction(props.onExpand))\n  );\n}\n\nfunction isExpandedItem(item: T, index: number): boolean {\n  return props.isExpanded?.(item, index) ?? false;\n}\n\nfunction handleExpand(item: T, index: number) {\n  props.onExpand?.(item, index);\n}\n\nfunction handleToggle(item: T, index: number) {\n  props.onToggle?.(item, index);\n}\n\nfunction handlePin(item: T, index: number) {\n  if (index === -1) {\n    throw new Error(\"Pinnable item not found\");\n  }\n\n  const alreadyPinned = pinnedItemsRef.value.includes(item);\n\n  if (props.onPin?.(item, index) === false) return;\n\n  moveItems(index, pinnedItemsRef.value.length + (alreadyPinned ? 0 : -1), false);\n}\n\nfunction handleRemove(item: T, index: number) {\n  if (props.onRemove?.(item, index) === false) return;\n  itemsRef.value.splice(index, 1);\n}\n\nfunction getClassFunction(\n  propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined,\n): (item: T, index: number) => null | string | string[] {\n  return (item: T, index: number): null | string | string[] => {\n    if (typeof propsItemClass === \"function\") {\n      return propsItemClass(item, index);\n    }\n    return propsItemClass ?? null;\n  };\n}\nconst getItemClass = getClassFunction(props.itemClass);\nconst getItemClassTitle = getClassFunction(props.itemClassTitle);\nconst getItemClassContent = getClassFunction(props.itemClassContent);\nconst getItemClassBefore = getClassFunction(props.itemClassBefore);\nconst getItemClassAfter = getClassFunction(props.itemClassAfter);\n</script>\n\n<template>\n  <div :class=\"$style.root\">\n    <div ref=\"pinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(pinnedItem, pinnedIndex) in pinnedItemsRef\"\n        :key=\"pinnedKeysRef[pinnedIndex]\"\n        :class=\"[$style.item, getItemClass(pinnedItem, pinnedIndex)]\"\n        :titleClass=\"getItemClassTitle(pinnedItem, pinnedIndex)\"\n        :contentClass=\"getItemClassContent(pinnedItem, pinnedIndex)\"\n        :beforeClass=\"getItemClassBefore(pinnedItem, pinnedIndex)\"\n        :afterClass=\"getItemClassAfter(pinnedItem, pinnedIndex)\"\n        :index=\"pinnedIndex\"\n        :item=\"pinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(pinnedItem, pinnedIndex)\"\n        :isDraggable=\"isDraggableItem(pinnedItem, pinnedIndex)\"\n        :isRemovable=\"isRemovableItem(pinnedItem, pinnedIndex)\"\n        :isToggable=\"isToggableItem(pinnedItem, pinnedIndex)\"\n        :isToggled=\"isToggledItem(pinnedItem, pinnedIndex)\"\n        :isPinnable=\"isPinnableItem(pinnedItem, pinnedIndex)\"\n        :isPinned=\"true\"\n        :isExpandable=\"isExpandableItem(pinnedItem, pinnedIndex)\"\n        :isExpanded=\"isExpandedItem(pinnedItem, pinnedIndex)\"\n        @click=\"emits('itemClick', pinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template v-if=\"slots['item-before']\" #before=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-before\" />\n        </template>\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n    <div v-if=\"hasUnpinnedItems\" ref=\"unpinnedContainerRef\" :class=\"$style.list\">\n      <PlElementListItem\n        v-for=\"(unpinnedItem, unpinnedIndex) in unpinnedItemsRef\"\n        :key=\"unpinnedKeysRef[unpinnedIndex]\"\n        :class=\"[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]\"\n        :titleClass=\"getItemClassTitle(unpinnedItem, unpinnedIndex)\"\n        :contentClass=\"getItemClassContent(unpinnedItem, unpinnedIndex)\"\n        :beforeClass=\"getItemClassBefore(unpinnedItem, unpinnedIndex)\"\n        :afterClass=\"getItemClassAfter(unpinnedItem, unpinnedIndex)\"\n        :index=\"unpinnedIndex + (pinnedItemsRef?.length ?? 0)\"\n        :item=\"unpinnedItem\"\n        :showDragHandle=\"dndSortingEnabled\"\n        :isActive=\"isActiveItem(unpinnedItem, unpinnedIndex)\"\n        :isDraggable=\"isDraggableItem(unpinnedItem, unpinnedIndex)\"\n        :isRemovable=\"isRemovableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggable=\"isToggableItem(unpinnedItem, unpinnedIndex)\"\n        :isToggled=\"isToggledItem(unpinnedItem, unpinnedIndex)\"\n        :isPinnable=\"isPinnableItem(unpinnedItem, unpinnedIndex)\"\n        :isPinned=\"false\"\n        :isExpandable=\"isExpandableItem(unpinnedItem, unpinnedIndex)\"\n        :isExpanded=\"isExpandedItem(unpinnedItem, unpinnedIndex)\"\n        @click=\"emits('itemClick', unpinnedItem)\"\n        @remove=\"handleRemove\"\n        @toggle=\"handleToggle\"\n        @pin=\"handlePin\"\n        @expand=\"handleExpand\"\n      >\n        <template #title=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-title\" />\n        </template>\n        <template v-if=\"slots['item-content']\" #content=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-content\" />\n        </template>\n        <template v-if=\"slots['item-after']\" #after=\"{ item, index }\">\n          <slot :index=\"index\" :item=\"item\" name=\"item-after\" />\n        </template>\n      </PlElementListItem>\n    </div>\n  </div>\n</template>\n\n<style module>\n.root,\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 180px;\n}\n\n.item {\n  width: 100%;\n}\n\n:global(.sortable-ghost) {\n  visibility: hidden;\n}\n:global(.sortable-drag) {\n  opacity: 1;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/PlElementList/PlElementListItem.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./PlElementListItem.vue2.js";
+import n from "./PlElementListItem.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=PlElementListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlElementListItem.js","names":[],"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=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\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\n          v-if=\"isExpandable\"\n          :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n          name=\"chevron-down\"\n        />\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=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\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  overflow: hidden;\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"],"mappings":""}

package/dist/components/PlElementList/PlElementListItem.style.js

@@ -0,0 +1,21 @@
+import './PlElementListItem.vue.css';var e = {
+	root: "_root_1bqtz_4",
+	opened: "_opened_1bqtz_34",
+	disabled: "_disabled_1bqtz_38",
+	pinned: "_pinned_1bqtz_45",
+	active: "_active_1bqtz_49",
+	head: "_head_1bqtz_55",
+	contentChevron: "_contentChevron_1bqtz_65",
+	title: "_title_1bqtz_78",
+	body: "_body_1bqtz_86",
+	actions: "_actions_1bqtz_98",
+	action: "_action_1bqtz_98",
+	activated: "_activated_1bqtz_126",
+	disable: "_disable_1bqtz_38",
+	clickable: "_clickable_1bqtz_136",
+	draggable: "_draggable_1bqtz_140",
+	showOnHover: "_showOnHover_1bqtz_144"
+};
+export { e as default };
+
+//# sourceMappingURL=PlElementListItem.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlElementListItem.vue_vue_type_style_index_0_lang.module.js","names":[],"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=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\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\n          v-if=\"isExpandable\"\n          :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n          name=\"chevron-down\"\n        />\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=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\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  overflow: hidden;\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"],"mappings":""}

package/dist/components/PlElementList/PlElementListItem.vue.css

@@ -0,0 +1 @@
+@use "../../assets/variables.scss" as *;._root_1bqtz_4{--background:#fffc;--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)}._root_1bqtz_4.sortable-drag,._root_1bqtz_4.sortable-chosen{--head-background:var(--gradient-light-lime);--border-color:var(--border-color-focus);--box-shadow:var(--box-shadow-active)}._root_1bqtz_4{border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);box-shadow:var(--box-shadow);flex-direction:column;justify-content:center;transition:box-shadow .15s;display:flex;overflow:hidden}._root_1bqtz_4:hover{--border-color:var(--border-color-focus);--head-background:var(--gradient-light-lime)}._root_1bqtz_4._opened_1bqtz_34{--head-background:var(--gradient-light-lime)}._root_1bqtz_4._disabled_1bqtz_38{--icon-color:var(--ic-02);--border-color:var(--border-color-div-grey);color:var(--txt-03);filter:grayscale()}._root_1bqtz_4._pinned_1bqtz_45{--background:var(--bg-base-light)}._root_1bqtz_4._active_1bqtz_49{--border-color:var(--border-color-focus);--head-background:var(--btn-accent-positive-500)}._head_1bqtz_55{border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background);align-items:center;min-height:40px;padding:8px;display:flex;position:relative}._contentChevron_1bqtz_65{width:16px;height:16px;margin-right:4px;transition:transform .15s;display:block;transform:rotate(-90deg)}._contentChevron_1bqtz_65._opened_1bqtz_34{transform:rotate(0)}._title_1bqtz_78{flex-direction:row;flex:1 1 0;gap:8px;display:flex;overflow:hidden}._body_1bqtz_86{border-radius:0 0 var(--border-radius) var(--border-radius);flex-direction:column;gap:12px;padding:24px;display:flex}._body_1bqtz_86._disabled_1bqtz_38{pointer-events:none}._actions_1bqtz_98{background-color:var(--background);border-radius:var(--border-radius);align-items:center;display:flex;position:absolute;top:8px;right:8px}._action_1bqtz_98{opacity:.6;border-radius:var(--border-radius);width:24px;height:24px;padding:4px;transition:all .15s}._action_1bqtz_98 svg{width:16px;height:16px}._action_1bqtz_98:hover{opacity:1;background-color:var(--bg-elevated-02)}._action_1bqtz_98._activated_1bqtz_126{opacity:.8}._action_1bqtz_98._disable_1bqtz_38{cursor:not-allowed;opacity:.4}._clickable_1bqtz_136{cursor:pointer}._draggable_1bqtz_140{cursor:grab}._showOnHover_1bqtz_144{opacity:0;transition:opacity .15s}._root_1bqtz_4:hover ._showOnHover_1bqtz_144{opacity:1}

package/dist/components/PlElementList/PlElementListItem.vue.d.ts

@@ -67,9 +67,7 @@ declare const _default: <T extends unknown = unknown>(__VLS_props: NonNullable<A
         (e: "pin", item: T, index: number): void;
         (e: "remove", item: T, index: number): void;
     };
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

package/dist/components/PlElementList/PlElementListItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"yBAkSiB,CAAC,SAAS,OAAO,yBACpB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WAwP1D,mBAAmB,CAAC;;;;;;;cArPpB,CAAC;eACA,MAAM;wBACG,OAAO;kBACb,OAAO;qBACJ,OAAO;qBACP,OAAO;sBACN,OAAO;oBACT,OAAO;oBACP,OAAO;mBACR,OAAO;oBACN,OAAO;kBACT,OAAO;oBACL,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;sBACtB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;oBAC1B,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;qBACvB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;mBAsOuD,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;eAlOF,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;eAHhD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;YAOnD,OAAO,QAAQ,UAAU,GAAG,IAAI;YAChC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,KAAK,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACpC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;;;;;YAyND,OAAO,CAAC,OAAO,WAAW,CAAC;;AAlQvE,wBAkQ4E;AA2B5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlElementListItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"names":[],"mappings":"yBAkSiB,CAAC,SAAS,OAAO,GAAG,OAAO,EAC3C,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAuPO,mBAAmB,CAAC;;;;;;;cArPpB,CAAC;eACA,MAAM;wBACG,OAAO;kBACb,OAAO;qBACJ,OAAO;qBACP,OAAO;sBACN,OAAO;oBACT,OAAO;oBACP,OAAO;mBACR,OAAO;oBACN,OAAO;kBACT,OAAO;oBACL,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;sBACtB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;oBAC1B,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;qBACvB,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;mBAsOuD,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;eAlOF,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;eAHhD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;kBAC3C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;gBAChD,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;iBAC7C,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO;;;YAOnD,OAAO,QAAQ,UAAU,GAAG,IAAI;YAChC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACvC,KAAK,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;YACpC,QAAQ,QAAQ,CAAC,SAAS,MAAM,GAAG,IAAI;;EAwNzC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAlQzE,wBAkQ4E;AA2B5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1,146 +1,134 @@
-import { defineComponent as E, useSlots as P, computed as b, createElementBlock as n, openBlock as t, createCommentVNode as a, createElementVNode as m, normalizeClass as l, renderSlot as v, createBlock as w, createVNode as $, unref as y, withModifiers as p } from "vue";
-import k from "../PlIcon16/PlIcon16.vue.js";
-import c from "../PlIcon24/PlIcon24.vue.js";
-const T = ["data-draggable"], A = /* @__PURE__ */ E({
-  inheritAttrs: !1,
-  __name: "PlElementListItem",
-  props: {
-    item: {},
-    index: {},
-    showDragHandle: { type: Boolean },
-    isActive: { type: Boolean },
-    isDraggable: { type: Boolean },
-    isRemovable: { type: Boolean },
-    isExpandable: { type: Boolean },
-    isExpanded: { type: Boolean },
-    isToggable: { type: Boolean },
-    isToggled: { type: Boolean },
-    isPinnable: { type: Boolean },
-    isPinned: { type: Boolean },
-    titleClass: {},
-    contentClass: {},
-    afterClass: {},
-    beforeClass: {}
-  },
-  emits: ["click", "expand", "toggle", "pin", "remove"],
-  setup(o, { emit: f }) {
-    const e = o, g = P(), u = b(() => g.content !== void 0), C = b(() => g.after !== void 0), B = b(() => g.before !== void 0), d = f;
-    return (s, i) => (t(), n("div", {
-      onClick: i[4] || (i[4] = (r) => d("click", r))
-    }, [
-      B.value ? (t(), n("div", {
-        key: 0,
-        class: l(o.beforeClass)
-      }, [
-        v(s.$slots, "before", {
-          item: e.item,
-          index: e.index
-        })
-      ], 2)) : a("", !0),
-      m("div", {
-        class: l([
-          s.$style.root,
-          s.$attrs.class,
-          {
-            [s.$style.active]: e.isActive,
-            [s.$style.pinned]: e.isPinned,
-            [s.$style.opened]: e.isExpanded,
-            [s.$style.disabled]: e.isToggled
-          }
-        ])
-      }, [
-        m("div", {
-          class: l([
-            s.$style.head,
-            o.titleClass,
-            {
-              [s.$style.clickable]: u.value
-            }
-          ]),
-          onClick: i[3] || (i[3] = (r) => o.isExpandable && d("expand", e.item, e.index))
-        }, [
-          e.showDragHandle ? (t(), n("div", {
-            key: 0,
-            class: l([s.$style.action, s.$style.draggable, { [s.$style.disable]: !e.isDraggable }]),
-            "data-draggable": e.isDraggable
-          }, [
-            $(y(k), { name: "drag-dots" })
-          ], 10, T)) : a("", !0),
-          o.isExpandable ? (t(), w(y(k), {
-            key: 1,
-            class: l([s.$style.contentChevron, { [s.$style.opened]: e.isExpanded }]),
-            name: "chevron-down"
-          }, null, 8, ["class"])) : a("", !0),
-          m("div", {
-            class: l(s.$style.title)
-          }, [
-            v(s.$slots, "title", {
-              item: e.item,
-              index: e.index
-            })
-          ], 2),
-          m("div", {
-            class: l([s.$style.actions, s.$style.showOnHover])
-          }, [
-            e.isToggable ? (t(), n("div", {
-              key: 0,
-              class: l([s.$style.action, s.$style.clickable, { [s.$style.disable]: !e.isToggable }]),
-              onClick: i[0] || (i[0] = p((r) => d("toggle", e.item, e.index), ["stop"]))
-            }, [
-              $(y(c), {
-                name: e.isToggled === !0 ? "view-hide" : "view-show",
-                size: "16"
-              }, null, 8, ["name"])
-            ], 2)) : a("", !0),
-            e.isPinnable ? (t(), n("div", {
-              key: 1,
-              class: l([
-                s.$style.action,
-                s.$style.clickable,
-                {
-                  [s.$style.disable]: !e.isPinnable,
-                  [s.$style.activated]: e.isPinned
-                }
-              ]),
-              onClick: i[1] || (i[1] = p((r) => d("pin", e.item, e.index), ["stop"]))
-            }, [
-              $(y(c), {
-                name: "pin",
-                size: "16"
-              })
-            ], 2)) : a("", !0),
-            e.isRemovable ? (t(), n("div", {
-              key: 2,
-              class: l([s.$style.action, s.$style.clickable]),
-              onClick: i[2] || (i[2] = p((r) => d("remove", e.item, e.index), ["stop"]))
-            }, [
-              $(y(k), { name: "close" })
-            ], 2)) : a("", !0)
-          ], 2)
-        ], 2),
-        u.value && e.isExpanded ? (t(), n("div", {
-          key: 0,
-          class: l([s.$style.body, o.contentClass, { [s.$style.disabled]: e.isToggled }])
-        }, [
-          v(s.$slots, "content", {
-            item: e.item,
-            index: e.index
-          })
-        ], 2)) : a("", !0)
-      ], 2),
-      C.value ? (t(), n("div", {
-        key: 1,
-        class: l(o.afterClass)
-      }, [
-        v(s.$slots, "after", {
-          item: e.item,
-          index: e.index
-        })
-      ], 2)) : a("", !0)
-    ]));
-  }
+import e from "../PlIcon24/PlIcon24.js";
+import t from "../PlIcon16/PlIcon16.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, unref as f, useSlots as p, withModifiers as m } from "vue";
+var h = ["data-draggable"], g = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "PlElementListItem",
+	props: {
+		item: {},
+		index: {},
+		showDragHandle: { type: Boolean },
+		isActive: { type: Boolean },
+		isDraggable: { type: Boolean },
+		isRemovable: { type: Boolean },
+		isExpandable: { type: Boolean },
+		isExpanded: { type: Boolean },
+		isToggable: { type: Boolean },
+		isToggled: { type: Boolean },
+		isPinnable: { type: Boolean },
+		isPinned: { type: Boolean },
+		titleClass: {},
+		contentClass: {},
+		afterClass: {},
+		beforeClass: {}
+	},
+	emits: [
+		"click",
+		"expand",
+		"toggle",
+		"pin",
+		"remove"
+	],
+	setup(c, { emit: g }) {
+		let _ = c, v = p(), y = n(() => v.content !== void 0), b = n(() => v.after !== void 0), x = n(() => v.before !== void 0), S = g;
+		return (n, p) => (u(), a("div", { onClick: p[4] ||= (e) => S("click", e) }, [
+			x.value ? (u(), a("div", {
+				key: 0,
+				class: l(c.beforeClass)
+			}, [d(n.$slots, "before", {
+				item: _.item,
+				index: _.index
+			})], 2)) : i("", !0),
+			o("div", { class: l([
+				n.$style.root,
+				n.$attrs.class,
+				{
+					[n.$style.active]: _.isActive,
+					[n.$style.pinned]: _.isPinned,
+					[n.$style.opened]: _.isExpanded,
+					[n.$style.disabled]: _.isToggled
+				}
+			]) }, [o("div", {
+				class: l([
+					n.$style.head,
+					c.titleClass,
+					{ [n.$style.clickable]: y.value }
+				]),
+				onClick: p[3] ||= (e) => c.isExpandable && S("expand", _.item, _.index)
+			}, [
+				_.showDragHandle ? (u(), a("div", {
+					key: 0,
+					class: l([
+						n.$style.action,
+						n.$style.draggable,
+						{ [n.$style.disable]: !_.isDraggable }
+					]),
+					"data-draggable": _.isDraggable
+				}, [s(f(t), { name: "drag-dots" })], 10, h)) : i("", !0),
+				c.isExpandable ? (u(), r(f(t), {
+					key: 1,
+					class: l([n.$style.contentChevron, { [n.$style.opened]: _.isExpanded }]),
+					name: "chevron-down"
+				}, null, 8, ["class"])) : i("", !0),
+				o("div", { class: l(n.$style.title) }, [d(n.$slots, "title", {
+					item: _.item,
+					index: _.index
+				})], 2),
+				o("div", { class: l([n.$style.actions, n.$style.showOnHover]) }, [
+					_.isToggable ? (u(), a("div", {
+						key: 0,
+						class: l([
+							n.$style.action,
+							n.$style.clickable,
+							{ [n.$style.disable]: !_.isToggable }
+						]),
+						onClick: p[0] ||= m((e) => S("toggle", _.item, _.index), ["stop"])
+					}, [s(f(e), {
+						name: _.isToggled === !0 ? "view-hide" : "view-show",
+						size: "16"
+					}, null, 8, ["name"])], 2)) : i("", !0),
+					_.isPinnable ? (u(), a("div", {
+						key: 1,
+						class: l([
+							n.$style.action,
+							n.$style.clickable,
+							{
+								[n.$style.disable]: !_.isPinnable,
+								[n.$style.activated]: _.isPinned
+							}
+						]),
+						onClick: p[1] ||= m((e) => S("pin", _.item, _.index), ["stop"])
+					}, [s(f(e), {
+						name: "pin",
+						size: "16"
+					})], 2)) : i("", !0),
+					_.isRemovable ? (u(), a("div", {
+						key: 2,
+						class: l([n.$style.action, n.$style.clickable]),
+						onClick: p[2] ||= m((e) => S("remove", _.item, _.index), ["stop"])
+					}, [s(f(t), { name: "close" })], 2)) : i("", !0)
+				], 2)
+			], 2), y.value && _.isExpanded ? (u(), a("div", {
+				key: 0,
+				class: l([
+					n.$style.body,
+					c.contentClass,
+					{ [n.$style.disabled]: _.isToggled }
+				])
+			}, [d(n.$slots, "content", {
+				item: _.item,
+				index: _.index
+			})], 2)) : i("", !0)], 2),
+			b.value ? (u(), a("div", {
+				key: 1,
+				class: l(c.afterClass)
+			}, [d(n.$slots, "after", {
+				item: _.item,
+				index: _.index
+			})], 2)) : i("", !0)
+		]));
+	}
 });
-export {
-  A as default
-};
-//# sourceMappingURL=PlElementListItem.vue2.js.map
+export { g as default };
+
+//# sourceMappingURL=PlElementListItem.vue2.js.map

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: \"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=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\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\n          v-if=\"isExpandable\"\n          :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n          name=\"chevron-down\"\n        />\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=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\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  overflow: hidden;\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","_normalizeClass","$style","$attrs","$event","_createVNode","_unref","PlIcon16","_createBlock","_withModifiers","PlIcon24"],"mappings":"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"}
+{"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"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=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\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\n          v-if=\"isExpandable\"\n          :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n          name=\"chevron-down\"\n        />\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=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\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  overflow: hidden;\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"],"mappings":"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"}

package/dist/components/PlElementList/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,MAAM,MAAM,MAAM,KAAG,CAAC,EAWvE,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PlElementList/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,CAAC,EAAE,OAAO,CAAC,EAAE,EAAE,MAAM,MAAM,EAAE,IAAI,MAAM,KAAG,CAAC,EAWvE,CAAC"}

package/dist/components/PlElementList/utils.js

@@ -1,14 +1,10 @@
-const t = (e, l, n) => {
-  if (n >= 0 && n < e.length) {
-    const o = e.splice(l, 1)[0];
-    e.splice(n, 0, o);
-  } else
-    console.warn(
-      `Invalid move operation: from ${l} to ${n} in array of length ${e.length}`
-    );
-  return e;
+const e = (e, t, n) => {
+	if (n >= 0 && n < e.length) {
+		let r = e.splice(t, 1)[0];
+		e.splice(n, 0, r);
+	} else console.warn(`Invalid move operation: from ${t} to ${n} in array of length ${e.length}`);
+	return e;
 };
-export {
-  t as moveElements
-};
-//# sourceMappingURL=utils.js.map
+export { e as moveElements };
+
+//# sourceMappingURL=utils.js.map

package/dist/components/PlElementList/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/PlElementList/utils.ts"],"sourcesContent":["export const moveElements = <T>(array: T[], from: number, to: number): T[] => {\n  if (to >= 0 && to < array.length) {\n    const element = array.splice(from, 1)[0];\n    array.splice(to, 0, element);\n  } else {\n    console.warn(\n      `Invalid move operation: from ${from} to ${to} in array of length ${array.length}`,\n    );\n  }\n\n  return array;\n};\n"],"names":["moveElements","array","from","to","element"],"mappings":"AAAO,MAAMA,IAAe,CAAIC,GAAYC,GAAcC,MAAoB;AAC5E,MAAIA,KAAM,KAAKA,IAAKF,EAAM,QAAQ;AAChC,UAAMG,IAAUH,EAAM,OAAOC,GAAM,CAAC,EAAE,CAAC;AACvC,IAAAD,EAAM,OAAOE,GAAI,GAAGC,CAAO;AAAA,EAC7B;AACE,YAAQ;AAAA,MACN,gCAAgCF,CAAI,OAAOC,CAAE,uBAAuBF,EAAM,MAAM;AAAA,IAAA;AAIpF,SAAOA;AACT;"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/PlElementList/utils.ts"],"sourcesContent":["export const moveElements = <T>(array: T[], from: number, to: number): T[] => {\n  if (to >= 0 && to < array.length) {\n    const element = array.splice(from, 1)[0];\n    array.splice(to, 0, element);\n  } else {\n    console.warn(\n      `Invalid move operation: from ${from} to ${to} in array of length ${array.length}`,\n    );\n  }\n\n  return array;\n};\n"],"mappings":"AAAA,MAAa,KAAmB,GAAY,GAAc,MAAoB;AAC5E,KAAI,KAAM,KAAK,IAAK,EAAM,QAAQ;EAChC,IAAM,IAAU,EAAM,OAAO,GAAM,EAAE,CAAC;AACtC,IAAM,OAAO,GAAI,GAAG,EAAQ;OAE5B,SAAQ,KACN,gCAAgC,EAAK,MAAM,EAAG,sBAAsB,EAAM,SAC3E;AAGH,QAAO"}

package/dist/components/PlErrorAlert/PlErrorAlert.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./PlErrorAlert.vue2.js";
+import n from "./PlErrorAlert.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=PlErrorAlert.js.map