npm - @milaboratories/uikit - Versions diffs - 2.16.0 → 2.16.1 - Mend

@milaboratories/uikit 2.16.0 → 2.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1369) hide show

package/dist/components/PlElementList/PlElementList.style.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import './PlElementList.vue.css';var e = {
-	root: "_root_11nk6_2",
-	list: "_list_11nk6_3",
-	item: "_item_11nk6_10"
+import './PlElementList.style.css';// src/components/PlElementList/PlElementList.vue?vue&type=style&index=0&lang.module.css
+var e = "_root_11nk6_2", t = "_list_11nk6_3", n = "_item_11nk6_10", r = {
+	root: e,
+	list: t,
+	item: n
 };
-//#endregion
-export { e as default };
+export { r as default, n as item, t as list, e as root };
 //# sourceMappingURL=PlElementList.style.js.map

package/dist/components/PlElementList/PlElementList.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlElementList.vue_vue_type_style_index_0_lang.module.js","names":[],"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\ntype ItemEntry = [idx: number, item: T];\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(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => !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 = (entry: ItemEntry) => {\n return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\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<ItemEntry[]>,\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 itemsRef.value = 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 =\n pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\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 = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(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 data-testid=\"pl-element-list\" :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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\n v-if=\"hasUnpinnedItems\"\n ref=\"unpinnedContainerRef\"\n data-testid=\"pl-element-list-unpinned\"\n :class=\"$style.list\"\n >\n <PlElementListItem\n v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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":""}
1	+ {"version":3,"file":"PlElementList.vue_vue_type_style_index_0_lang.module.js","names":["root","list","item","PlElementList_vue_vue_type_style_index_0_lang_module_default"],"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\ntype ItemEntry = [idx: number, item: T];\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(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => !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 = (entry: ItemEntry) => {\n return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\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<ItemEntry[]>,\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 itemsRef.value = 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 =\n pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\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 = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(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 data-testid=\"pl-element-list\" :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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\n v-if=\"hasUnpinnedItems\"\n ref=\"unpinnedContainerRef\"\n data-testid=\"pl-element-list-unpinned\"\n :class=\"$style.list\"\n >\n <PlElementListItem\n v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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":""}

package/dist/components/PlElementList/PlElementList.vue2.js CHANGED Viewed

@@ -3,10 +3,10 @@ import { moveElements as t } from "./utils.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as ee, createSlots as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, shallowRef as m, unref as h, useModel as te, useSlots as ne, watch as re, withCtx as g } from "vue";
 import { isFunction as _, shallowHash as v } from "@milaboratories/helpers";
 import { useSortable as ie } from "@vueuse/integrations/useSortable";
-//#region src/components/PlElementList/PlElementList.vue?vue&type=script&setup=true&lang.ts
-var y = /* @__PURE__ */ c({
+// src/components/PlElementList/PlElementList.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ c({
 	__name: "PlElementList",
-	props: /* @__PURE__ */ l({
+	props: /*@__PURE__*/ l({
 		getItemKey: {
 			type: Function,
 			default: (e) => JSON.stringify(e)
@@ -135,7 +135,7 @@ var y = /* @__PURE__ */ c({
 		items: { required: !0 },
 		itemsModifiers: {}
 	}),
-	emits: /* @__PURE__ */ l(["itemClick"], ["update:items"]),
+	emits: /*@__PURE__*/ l(["itemClick"], ["update:items"]),
 	setup(c, { emit: l }) {
 		let y = te(c, "items"), b = c, x = l, S = ne(), C = r(() => b.disableDragging !== !0), w = r(() => y.value.map((e, t) => [t, e]).filter(([e, t]) => V(t, e))), ae = r(() => w.value.length > 0), T = r(() => y.value.map((e, t) => [t, e]).filter(([e, t]) => !V(t, e))), E = r(() => T.value.length > 0), D = m(), O = m(), k = m(), A = (e) => `${oe.value}-${b.getItemKey(e[1], e[0])}`, j = r(() => w.value.map(A)), M = r(() => T.value.map(A)), oe = r((e) => {
 			let t = y.value.map(b.getItemKey);
@@ -367,7 +367,6 @@ var y = /* @__PURE__ */ c({
 		]))), 128))], 2)) : a("", !0)], 2));
 	}
 });
-//#endregion
 export { y as default };
 //# sourceMappingURL=PlElementList.vue2.js.map

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

	@@ -1 +1 @@
1	- {"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\ntype ItemEntry = [idx: number, item: T];\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(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => !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 = (entry: ItemEntry) => {\n return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\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<ItemEntry[]>,\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 itemsRef.value = 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 =\n pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\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 = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(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 data-testid=\"pl-element-list\" :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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\n v-if=\"hasUnpinnedItems\"\n ref=\"unpinnedContainerRef\"\n data-testid=\"pl-element-list-unpinned\"\n :class=\"$style.list\"\n >\n <PlElementListItem\n v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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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"}
1	+ {"version":3,"file":"PlElementList.vue_vue_type_script_setup_true_lang.js","names":["$style","_useModel","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","_createBlock","PlElementListItem","_unref","_createSlots","_withCtx","_renderSlot","_createCommentVNode","PlElementListItem_default","PlElementList_vue_vue_type_script_setup_true_lang_default","item","\"items\"","\"itemsModifiers\"","__emit","itemsRef","useModel","__props","props","emits","slots","useSlots","dndSortingEnabled","computed","pinnedItemsRef","index","isPinnedItem","hasPinnedItems","unpinnedItemsRef","hasUnpinnedItems","domProjectionItemsRef","shallowRef","pinnedContainerRef","unpinnedContainerRef","getKey","versionRef","entry","pinnedKeysRef","unpinnedKeysRef","currentKeys","oldVersion","shallowHash","domProjectionKeys","domProjectionKeysSet","i","createSortable","sortable","useSortable","elRef","evt","moveItems","getOffset","watch","toggler","disabled","on","oldIndex","newIndex","afterUpdateDom","moveElements","isActiveItem","isDraggableItem","isRemovableItem","isToggableItem","isFunction","isToggledItem","isPinnableItem","isExpandableItem","isExpandedItem","handleExpand","handleToggle","handlePin","alreadyPinned","originalIndex","handleRemove","getClassFunction","propsItemClass","getItemClass","getItemClassTitle","getItemClassContent","getItemClassBefore","getItemClassAfter","openBlock","createElementBlock","normalizeClass","_ctx","createElementVNode","Fragment","renderList","createBlock","pinnedIndex","unref","createSlots","withCtx","renderSlot","unpinnedIndex","createCommentVNode"],"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\ntype ItemEntry = [idx: number, item: T];\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(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => isPinnedItem(item, index)),\n);\nconst hasPinnedItems = computed(() => pinnedItemsRef.value.length > 0);\n\nconst unpinnedItemsRef = computed(() =>\n itemsRef.value\n .map((item, index) => [index, item] as ItemEntry)\n .filter(([index, item]) => !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 = (entry: ItemEntry) => {\n return `${versionRef.value}-${props.getItemKey(entry[1], entry[0])}`;\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<ItemEntry[]>,\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 itemsRef.value = 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 =\n pinnedItemsRef.value.findIndex(([originalIndex]) => originalIndex === index) !== -1;\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 = [...itemsRef.value.slice(0, index), ...itemsRef.value.slice(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 data-testid=\"pl-element-list\" :class=\"$style.root\">\n <div ref=\"pinnedContainerRef\" data-testid=\"pl-element-list-pinned\" :class=\"$style.list\">\n <PlElementListItem\n v-for=\"([originalIndex, item], pinnedIndex) in pinnedItemsRef\"\n :key=\"pinnedKeysRef[pinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"true\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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\n v-if=\"hasUnpinnedItems\"\n ref=\"unpinnedContainerRef\"\n data-testid=\"pl-element-list-unpinned\"\n :class=\"$style.list\"\n >\n <PlElementListItem\n v-for=\"([originalIndex, item], unpinnedIndex) in unpinnedItemsRef\"\n :key=\"unpinnedKeysRef[unpinnedIndex]\"\n :class=\"[$style.item, getItemClass(item, originalIndex)]\"\n :titleClass=\"getItemClassTitle(item, originalIndex)\"\n :contentClass=\"getItemClassContent(item, originalIndex)\"\n :beforeClass=\"getItemClassBefore(item, originalIndex)\"\n :afterClass=\"getItemClassAfter(item, originalIndex)\"\n :index=\"originalIndex\"\n :item=\"item\"\n :showDragHandle=\"dndSortingEnabled\"\n :isActive=\"isActiveItem(item, originalIndex)\"\n :isDraggable=\"isDraggableItem(item, originalIndex)\"\n :isRemovable=\"isRemovableItem(item, originalIndex)\"\n :isToggable=\"isToggableItem(item, originalIndex)\"\n :isToggled=\"isToggledItem(item, originalIndex)\"\n :isPinnable=\"isPinnableItem(item, originalIndex)\"\n :isPinned=\"false\"\n :isExpandable=\"isExpandableItem(item, originalIndex)\"\n :isExpanded=\"isExpandedItem(item, originalIndex)\"\n @click=\"emits('itemClick', item)\"\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 CHANGED Viewed

@@ -1,8 +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 }]]);
-//#endregion
+var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
 export { r as default };
 //# sourceMappingURL=PlElementListItem.js.map

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

	@@ -1 +1 @@
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 data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n data-testid=\"pl-element-list-item-card\"\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 data-testid=\"pl-element-list-item-head\"\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 v-if=\"props.showDragHandle \|\| isExpandable\" :class=\"$style.headIcons\">\n <div\n v-if=\"props.showDragHandle\"\n data-testid=\"pl-element-list-item-drag\"\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 data-testid=\"pl-element-list-item-expand\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\n\n <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div\n data-testid=\"pl-element-list-item-actions\"\n :class=\"[$style.actions, $style.showOnHover]\"\n >\n <div\n v-if=\"props.isToggable\"\n data-testid=\"pl-element-list-item-toggle\"\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 data-testid=\"pl-element-list-item-pin\"\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 data-testid=\"pl-element-list-item-remove\"\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 data-testid=\"pl-element-list-item-content\"\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\" data-testid=\"pl-element-list-item-after\" :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.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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":""}
1	+ {"version":3,"file":"PlElementListItem.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlElementListItem_vue_vue_type_script_setup_true_lang_default","PlElementListItem_vue_vue_type_style_index_0_lang_module_default","PlElementListItem_default","\"$style\""],"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 data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n data-testid=\"pl-element-list-item-card\"\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 data-testid=\"pl-element-list-item-head\"\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 v-if=\"props.showDragHandle \|\| isExpandable\" :class=\"$style.headIcons\">\n <div\n v-if=\"props.showDragHandle\"\n data-testid=\"pl-element-list-item-drag\"\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 data-testid=\"pl-element-list-item-expand\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\n\n <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div\n data-testid=\"pl-element-list-item-actions\"\n :class=\"[$style.actions, $style.showOnHover]\"\n >\n <div\n v-if=\"props.isToggable\"\n data-testid=\"pl-element-list-item-toggle\"\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 data-testid=\"pl-element-list-item-pin\"\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 data-testid=\"pl-element-list-item-remove\"\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 data-testid=\"pl-element-list-item-content\"\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\" data-testid=\"pl-element-list-item-after\" :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.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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 CHANGED Viewed

@@ -1,23 +1,23 @@
-import './PlElementListItem.vue.css';var e = {
-	root: "_root_14opm_4",
-	opened: "_opened_14opm_34",
-	disabled: "_disabled_14opm_38",
-	pinned: "_pinned_14opm_45",
-	active: "_active_14opm_49",
-	head: "_head_14opm_55",
-	headIcons: "_headIcons_14opm_65",
-	contentChevron: "_contentChevron_14opm_73",
-	title: "_title_14opm_86",
-	body: "_body_14opm_94",
-	actions: "_actions_14opm_106",
-	action: "_action_14opm_106",
-	activated: "_activated_14opm_134",
-	disable: "_disable_14opm_38",
-	clickable: "_clickable_14opm_144",
-	draggable: "_draggable_14opm_148",
-	showOnHover: "_showOnHover_14opm_152"
+import './PlElementListItem.style.css';// src/components/PlElementList/PlElementListItem.vue?vue&type=style&index=0&lang.module.css
+var e = "_root_14opm_4", t = "_opened_14opm_34", n = "_disabled_14opm_38", r = "_pinned_14opm_45", i = "_active_14opm_49", a = "_head_14opm_55", o = "_headIcons_14opm_65", s = "_contentChevron_14opm_73", c = "_title_14opm_86", l = "_body_14opm_94", u = "_actions_14opm_106", d = "_action_14opm_106", f = "_activated_14opm_134", p = "_disable_14opm_38", m = "_clickable_14opm_144", h = "_draggable_14opm_148", g = "_showOnHover_14opm_152", _ = {
+	root: e,
+	opened: t,
+	disabled: n,
+	pinned: r,
+	active: i,
+	head: a,
+	headIcons: o,
+	contentChevron: s,
+	title: c,
+	body: l,
+	actions: u,
+	action: d,
+	activated: f,
+	disable: p,
+	clickable: m,
+	draggable: h,
+	showOnHover: g
 };
-//#endregion
-export { e as default };
+export { d as action, u as actions, f as activated, i as active, l as body, m as clickable, s as contentChevron, _ as default, p as disable, n as disabled, h as draggable, a as head, o as headIcons, t as opened, r as pinned, e as root, g as showOnHover, c as title };
 //# sourceMappingURL=PlElementListItem.style.js.map

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

	@@ -1 +1 @@
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 data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n data-testid=\"pl-element-list-item-card\"\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 data-testid=\"pl-element-list-item-head\"\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 v-if=\"props.showDragHandle \|\| isExpandable\" :class=\"$style.headIcons\">\n <div\n v-if=\"props.showDragHandle\"\n data-testid=\"pl-element-list-item-drag\"\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 data-testid=\"pl-element-list-item-expand\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\n\n <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div\n data-testid=\"pl-element-list-item-actions\"\n :class=\"[$style.actions, $style.showOnHover]\"\n >\n <div\n v-if=\"props.isToggable\"\n data-testid=\"pl-element-list-item-toggle\"\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 data-testid=\"pl-element-list-item-pin\"\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 data-testid=\"pl-element-list-item-remove\"\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 data-testid=\"pl-element-list-item-content\"\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\" data-testid=\"pl-element-list-item-after\" :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.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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":""}
1	+ {"version":3,"file":"PlElementListItem.vue_vue_type_style_index_0_lang.module.js","names":["root","opened","disabled","pinned","active","head","headIcons","contentChevron","title","body","actions","action","activated","disable","clickable","draggable","showOnHover","PlElementListItem_vue_vue_type_style_index_0_lang_module_default"],"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 data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n data-testid=\"pl-element-list-item-card\"\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 data-testid=\"pl-element-list-item-head\"\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 v-if=\"props.showDragHandle \|\| isExpandable\" :class=\"$style.headIcons\">\n <div\n v-if=\"props.showDragHandle\"\n data-testid=\"pl-element-list-item-drag\"\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 data-testid=\"pl-element-list-item-expand\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\n\n <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div\n data-testid=\"pl-element-list-item-actions\"\n :class=\"[$style.actions, $style.showOnHover]\"\n >\n <div\n v-if=\"props.isToggable\"\n data-testid=\"pl-element-list-item-toggle\"\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 data-testid=\"pl-element-list-item-pin\"\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 data-testid=\"pl-element-list-item-remove\"\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 data-testid=\"pl-element-list-item-content\"\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\" data-testid=\"pl-element-list-item-after\" :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.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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.vue2.js CHANGED Viewed

@@ -3,8 +3,8 @@ import "../PlIcon16/index.js";
 import t from "../PlIcon24/PlIcon24.js";
 import "../PlIcon24/index.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";
-//#region src/components/PlElementList/PlElementListItem.vue?vue&type=script&setup=true&lang.ts
-var h = ["data-draggable"], g = /* @__PURE__ */ c({
+// src/components/PlElementList/PlElementListItem.vue?vue&type=script&setup=true&lang.ts
+var h = ["data-draggable"], g = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "PlElementListItem",
 	props: {
@@ -155,7 +155,6 @@ var h = ["data-draggable"], g = /* @__PURE__ */ c({
 		]));
 	}
 });
-//#endregion
 export { g as default };
 //# sourceMappingURL=PlElementListItem.vue2.js.map

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

	@@ -1 +1 @@
1	- {"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 data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n data-testid=\"pl-element-list-item-card\"\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 data-testid=\"pl-element-list-item-head\"\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 v-if=\"props.showDragHandle \|\| isExpandable\" :class=\"$style.headIcons\">\n <div\n v-if=\"props.showDragHandle\"\n data-testid=\"pl-element-list-item-drag\"\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 data-testid=\"pl-element-list-item-expand\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\n\n <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div\n data-testid=\"pl-element-list-item-actions\"\n :class=\"[$style.actions, $style.showOnHover]\"\n >\n <div\n v-if=\"props.isToggable\"\n data-testid=\"pl-element-list-item-toggle\"\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 data-testid=\"pl-element-list-item-pin\"\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 data-testid=\"pl-element-list-item-remove\"\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 data-testid=\"pl-element-list-item-content\"\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\" data-testid=\"pl-element-list-item-after\" :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.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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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"}
1	+ {"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createCommentVNode","_createElementVNode","_createVNode","_unref","PlIcon16","_createBlock","_withModifiers","PlIcon24","PlIcon16_default","PlIcon24_default","_hoisted_1","PlElementListItem_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","slots","useSlots","hasContentSlot","computed","\"content\"","hasAfterSlot","\"after\"","hasBeforeSlot","\"before\"","emit","openBlock","createElementBlock","_cache","event","normalizeClass","renderSlot","_ctx","createCommentVNode","createElementVNode","createVNode","unref","createBlock","withModifiers"],"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 data-testid=\"pl-element-list-item\" @click=\"(event) => emit('click', event)\">\n <div v-if=\"hasBeforeSlot\" data-testid=\"pl-element-list-item-before\" :class=\"beforeClass\">\n <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n <div\n data-testid=\"pl-element-list-item-card\"\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 data-testid=\"pl-element-list-item-head\"\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 v-if=\"props.showDragHandle \|\| isExpandable\" :class=\"$style.headIcons\">\n <div\n v-if=\"props.showDragHandle\"\n data-testid=\"pl-element-list-item-drag\"\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 data-testid=\"pl-element-list-item-expand\"\n :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n name=\"chevron-down\"\n />\n </div>\n\n <div data-testid=\"pl-element-list-item-title\" :class=\"$style.title\">\n <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n </div>\n\n <div\n data-testid=\"pl-element-list-item-actions\"\n :class=\"[$style.actions, $style.showOnHover]\"\n >\n <div\n v-if=\"props.isToggable\"\n data-testid=\"pl-element-list-item-toggle\"\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 data-testid=\"pl-element-list-item-pin\"\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 data-testid=\"pl-element-list-item-remove\"\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 data-testid=\"pl-element-list-item-content\"\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\" data-testid=\"pl-element-list-item-after\" :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.headIcons {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n flex: 0 0 auto;\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/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- ~~import~~ "./PlElementList.js";
1	+ export { default as PlElementList } from "./PlElementList.js";

package/dist/components/PlElementList/utils.js CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region src/components/PlElementList/utils.ts
+// src/components/PlElementList/utils.ts
 var e = (e, t, n) => {
 	let r = [...e];
 	if (n >= 0 && n < r.length) {
@@ -7,7 +7,6 @@ var e = (e, t, n) => {
 	} else console.warn(`Invalid move operation: from ${t} to ${n} in array of length ${r.length}`);
 	return r;
 };
-//#endregion
 export { e as moveElements };
 //# sourceMappingURL=utils.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/PlElementList/utils.ts"],"sourcesContent":["export const moveElements = <T>(array: readonly T[], from: number, to: number): T[] => {\n const result = [...array];\n if (to >= 0 && to < result.length) {\n const [element] = result.splice(from, 1);\n result.splice(to, 0, element);\n } else {\n console.warn(\n `Invalid move operation: from ${from} to ${to} in array of length ${result.length}`,\n );\n }\n\n return result;\n};\n"],"mappings":";AAAA,~~IAAa~~,KAAmB,GAAqB,GAAc,MAAoB;CACrF,~~IAAM~~,IAAS,CAAC,~~GAAG~~,~~EAAM~~;~~AACzB~~,~~KAAI~~,KAAM,~~KAAK~~,~~IAAK~~,EAAO,QAAQ;EACjC,IAAM,~~CAAC~~,~~KAAW~~,EAAO,~~OAAO~~,GAAM,~~EAAE~~;~~AACxC~~,~~IAAO~~,~~OAAO~~,GAAI,~~GAAG~~,~~EAAQ~~;~~OAE7B~~,~~SAAQ~~,KACN,~~gCAAgC~~,EAAK,~~MAAM~~,EAAG,~~sBAAsB~~,EAAO,~~SAC5E~~;~~AAGH~~,~~QAAO~~"}
1	+ {"version":3,"file":"utils.js","names":["moveElements","result","array","to","element","from"],"sources":["../../../src/components/PlElementList/utils.ts"],"sourcesContent":["export const moveElements = <T>(array: readonly T[], from: number, to: number): T[] => {\n const result = [...array];\n if (to >= 0 && to < result.length) {\n const [element] = result.splice(from, 1);\n result.splice(to, 0, element);\n } else {\n console.warn(\n `Invalid move operation: from ${from} to ${to} in array of length ${result.length}`,\n );\n }\n\n return result;\n};\n"],"mappings":";AAAA,IAAaA,KAAmB,GAAqB,GAAc,MAAoB;CACrF,IAAMC,IAAS,CAAC,GAAGC,CAAK;CACxB,IAAIC,KAAM,KAAKA,IAAKF,EAAO,QAAQ;EACjC,IAAM,CAACG,KAAWH,EAAO,OAAOI,GAAM,CAAC;EACvC,EAAO,OAAOF,GAAI,GAAGC,CAAO;CAC9B,OACE,QAAQ,KACN,gCAAgCC,EAAK,MAAMF,EAAG,sBAAsBF,EAAO,QAC7E;CAGF,OAAOA;AACT"}

package/dist/components/PlErrorAlert/PlErrorAlert.js CHANGED Viewed

@@ -1,8 +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 }]]);
-//#endregion
+var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
 export { r as default };
 //# sourceMappingURL=PlErrorAlert.js.map

package/dist/components/PlErrorAlert/PlErrorAlert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlErrorAlert.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n defineProps<{\n title?: string;\n message?: string;\n maxHeight?: string;\n copyMessage?: string;\n }>(),\n {\n title: undefined,\n message: undefined,\n maxHeight: \"300px\",\n copyMessage: undefined,\n },\n);\n\nfunction onCopy() {\n const value = props.copyMessage ?? props.message;\n if (typeof value === \"string\") {\n navigator.clipboard.writeText(value);\n }\n}\n</script>\n\n<template>\n <div data-testid=\"pl-error-alert\" :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n <PlClipboard data-testid=\"pl-error-alert-copy\" :class=\"$style.copy\" @copy=\"onCopy\" />\n <slot name=\"title\">\n <div data-testid=\"pl-error-alert-title\" :class=\"$style.title\">\n <PlMaskIcon16 data-testid=\"pl-error-alert-icon\" :class=\"$style.titleIcon\" name=\"warning\" />\n <div data-testid=\"pl-error-alert-title-text\" :class=\"$style.titleText\">\n {{ props.title }}\n </div>\n </div>\n </slot>\n <slot name=\"message\">\n <div data-testid=\"pl-error-alert-message\" :class=\"$style.message\">\n {{ props.message }}\n </div>\n </slot>\n </div>\n</template>\n\n<style module>\n.root {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px;\n background: var(--bg-error);\n border: 1px var(--border-color-error) solid;\n border-radius: var(--border-radius-control);\n /* color: var(--txt-error); */\n}\n\n.copy {\n position: absolute;\n right: 12px;\n top: 12px;\n opacity: 0.4;\n transition: opacity 0.3s;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.title {\n display: flex;\n align-items: center;\n gap: 10px;\n max-width: calc(100% - 20px);\n min-height: 24px;\n line-height: 24px;\n font-weight: bold;\n overflow: hidden;\n}\n\n.titleIcon {\n --icon-color: var(--txt-error);\n}\n\n.titleText {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.message {\n overflow: auto;\n max-height: 100%;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlErrorAlert.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlErrorAlert_vue_vue_type_script_setup_true_lang_default","PlErrorAlert_vue_vue_type_style_index_0_lang_module_default","PlErrorAlert_default","\"$style\""],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n defineProps<{\n title?: string;\n message?: string;\n maxHeight?: string;\n copyMessage?: string;\n }>(),\n {\n title: undefined,\n message: undefined,\n maxHeight: \"300px\",\n copyMessage: undefined,\n },\n);\n\nfunction onCopy() {\n const value = props.copyMessage ?? props.message;\n if (typeof value === \"string\") {\n navigator.clipboard.writeText(value);\n }\n}\n</script>\n\n<template>\n <div data-testid=\"pl-error-alert\" :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n <PlClipboard data-testid=\"pl-error-alert-copy\" :class=\"$style.copy\" @copy=\"onCopy\" />\n <slot name=\"title\">\n <div data-testid=\"pl-error-alert-title\" :class=\"$style.title\">\n <PlMaskIcon16 data-testid=\"pl-error-alert-icon\" :class=\"$style.titleIcon\" name=\"warning\" />\n <div data-testid=\"pl-error-alert-title-text\" :class=\"$style.titleText\">\n {{ props.title }}\n </div>\n </div>\n </slot>\n <slot name=\"message\">\n <div data-testid=\"pl-error-alert-message\" :class=\"$style.message\">\n {{ props.message }}\n </div>\n </slot>\n </div>\n</template>\n\n<style module>\n.root {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px;\n background: var(--bg-error);\n border: 1px var(--border-color-error) solid;\n border-radius: var(--border-radius-control);\n /* color: var(--txt-error); */\n}\n\n.copy {\n position: absolute;\n right: 12px;\n top: 12px;\n opacity: 0.4;\n transition: opacity 0.3s;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.title {\n display: flex;\n align-items: center;\n gap: 10px;\n max-width: calc(100% - 20px);\n min-height: 24px;\n line-height: 24px;\n font-weight: bold;\n overflow: hidden;\n}\n\n.titleIcon {\n --icon-color: var(--txt-error);\n}\n\n.titleText {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.message {\n overflow: auto;\n max-height: 100%;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlErrorAlert/PlErrorAlert.style.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import './PlErrorAlert.vue.css';var e = {
-	root: "_root_o15c5_2",
-	copy: "_copy_o15c5_15",
-	title: "_title_o15c5_27",
-	titleIcon: "_titleIcon_o15c5_38",
-	titleText: "_titleText_o15c5_42",
-	message: "_message_o15c5_48"
+import './PlErrorAlert.style.css';// src/components/PlErrorAlert/PlErrorAlert.vue?vue&type=style&index=0&lang.module.css
+var e = "_root_o15c5_2", t = "_copy_o15c5_15", n = "_title_o15c5_27", r = "_titleIcon_o15c5_38", i = "_titleText_o15c5_42", a = "_message_o15c5_48", o = {
+	root: e,
+	copy: t,
+	title: n,
+	titleIcon: r,
+	titleText: i,
+	message: a
 };
-//#endregion
-export { e as default };
+export { t as copy, o as default, a as message, e as root, n as title, r as titleIcon, i as titleText };
 //# sourceMappingURL=PlErrorAlert.style.js.map

package/dist/components/PlErrorAlert/PlErrorAlert.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlErrorAlert.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n defineProps<{\n title?: string;\n message?: string;\n maxHeight?: string;\n copyMessage?: string;\n }>(),\n {\n title: undefined,\n message: undefined,\n maxHeight: \"300px\",\n copyMessage: undefined,\n },\n);\n\nfunction onCopy() {\n const value = props.copyMessage ?? props.message;\n if (typeof value === \"string\") {\n navigator.clipboard.writeText(value);\n }\n}\n</script>\n\n<template>\n <div data-testid=\"pl-error-alert\" :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n <PlClipboard data-testid=\"pl-error-alert-copy\" :class=\"$style.copy\" @copy=\"onCopy\" />\n <slot name=\"title\">\n <div data-testid=\"pl-error-alert-title\" :class=\"$style.title\">\n <PlMaskIcon16 data-testid=\"pl-error-alert-icon\" :class=\"$style.titleIcon\" name=\"warning\" />\n <div data-testid=\"pl-error-alert-title-text\" :class=\"$style.titleText\">\n {{ props.title }}\n </div>\n </div>\n </slot>\n <slot name=\"message\">\n <div data-testid=\"pl-error-alert-message\" :class=\"$style.message\">\n {{ props.message }}\n </div>\n </slot>\n </div>\n</template>\n\n<style module>\n.root {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px;\n background: var(--bg-error);\n border: 1px var(--border-color-error) solid;\n border-radius: var(--border-radius-control);\n /* color: var(--txt-error); */\n}\n\n.copy {\n position: absolute;\n right: 12px;\n top: 12px;\n opacity: 0.4;\n transition: opacity 0.3s;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.title {\n display: flex;\n align-items: center;\n gap: 10px;\n max-width: calc(100% - 20px);\n min-height: 24px;\n line-height: 24px;\n font-weight: bold;\n overflow: hidden;\n}\n\n.titleIcon {\n --icon-color: var(--txt-error);\n}\n\n.titleText {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.message {\n overflow: auto;\n max-height: 100%;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlErrorAlert.vue_vue_type_style_index_0_lang.module.js","names":["root","copy","title","titleIcon","titleText","message","PlErrorAlert_vue_vue_type_style_index_0_lang_module_default"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n defineProps<{\n title?: string;\n message?: string;\n maxHeight?: string;\n copyMessage?: string;\n }>(),\n {\n title: undefined,\n message: undefined,\n maxHeight: \"300px\",\n copyMessage: undefined,\n },\n);\n\nfunction onCopy() {\n const value = props.copyMessage ?? props.message;\n if (typeof value === \"string\") {\n navigator.clipboard.writeText(value);\n }\n}\n</script>\n\n<template>\n <div data-testid=\"pl-error-alert\" :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n <PlClipboard data-testid=\"pl-error-alert-copy\" :class=\"$style.copy\" @copy=\"onCopy\" />\n <slot name=\"title\">\n <div data-testid=\"pl-error-alert-title\" :class=\"$style.title\">\n <PlMaskIcon16 data-testid=\"pl-error-alert-icon\" :class=\"$style.titleIcon\" name=\"warning\" />\n <div data-testid=\"pl-error-alert-title-text\" :class=\"$style.titleText\">\n {{ props.title }}\n </div>\n </div>\n </slot>\n <slot name=\"message\">\n <div data-testid=\"pl-error-alert-message\" :class=\"$style.message\">\n {{ props.message }}\n </div>\n </slot>\n </div>\n</template>\n\n<style module>\n.root {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 12px;\n background: var(--bg-error);\n border: 1px var(--border-color-error) solid;\n border-radius: var(--border-radius-control);\n /* color: var(--txt-error); */\n}\n\n.copy {\n position: absolute;\n right: 12px;\n top: 12px;\n opacity: 0.4;\n transition: opacity 0.3s;\n\n &:hover {\n opacity: 1;\n }\n}\n\n.title {\n display: flex;\n align-items: center;\n gap: 10px;\n max-width: calc(100% - 20px);\n min-height: 24px;\n line-height: 24px;\n font-weight: bold;\n overflow: hidden;\n}\n\n.titleIcon {\n --icon-color: var(--txt-error);\n}\n\n.titleText {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.message {\n overflow: auto;\n max-height: 100%;\n white-space: pre-wrap;\n word-break: break-word;\n font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import "../PlMaskIcon16/index.js";
 import t from "../PlClipboard/PlClipboard.js";
 import "../PlClipboard/index.js";
 import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
-var f = /* @__PURE__ */ a({
+var f = /*@__PURE__*/ a({
 	name: "PlErrorAlert",
 	props: {
 		title: { default: void 0 },
@@ -45,7 +45,6 @@ var f = /* @__PURE__ */ a({
 		], 6));
 	}
 });
-//#endregion
 export { f as default };
 //# sourceMappingURL=PlErrorAlert.vue2.js.map