fds-vue-core 1.2.1 → 1.2.2
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.
package/dist/App.vue.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.vue.d.ts","sourceRoot":"","sources":["../src/App.vue"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"App.vue.d.ts","sourceRoot":"","sources":["../src/App.vue"],"names":[],"mappings":";AAyTA,wBACG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FdsTreeView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fds-tree-view/FdsTreeView.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FdsTreeView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fds-tree-view/FdsTreeView.vue"],"names":[],"mappings":"AAyMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,KAAK,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAA;AAE1D,KAAK,WAAW,GAAG,KAAK,CAAC;;;;;;;;;;;;;;;AAuazB,wBAGG"}
|
package/dist/fds-vue-core.cjs.js
CHANGED
|
@@ -183,23 +183,22 @@ const _hoisted_1 = {
|
|
|
183
183
|
class: "mb-4"
|
|
184
184
|
};
|
|
185
185
|
const _hoisted_2 = ["value", "label"];
|
|
186
|
-
const _hoisted_3 = { class: "
|
|
187
|
-
const _hoisted_4 =
|
|
188
|
-
const _hoisted_5 =
|
|
189
|
-
const _hoisted_6 =
|
|
190
|
-
const _hoisted_7 = ["
|
|
191
|
-
const _hoisted_8 =
|
|
192
|
-
const _hoisted_9 = {
|
|
186
|
+
const _hoisted_3 = { class: "flex" };
|
|
187
|
+
const _hoisted_4 = ["name"];
|
|
188
|
+
const _hoisted_5 = { class: "pl-0 flex-1 flex items-center" };
|
|
189
|
+
const _hoisted_6 = ["id", "checked", "indeterminate"];
|
|
190
|
+
const _hoisted_7 = ["for"];
|
|
191
|
+
const _hoisted_8 = {
|
|
193
192
|
key: 0,
|
|
194
193
|
type: "default"
|
|
195
194
|
};
|
|
196
|
-
const
|
|
197
|
-
const
|
|
195
|
+
const _hoisted_9 = { key: 1 };
|
|
196
|
+
const _hoisted_10 = {
|
|
198
197
|
key: 0,
|
|
199
198
|
type: "meta",
|
|
200
199
|
class: "flex-1"
|
|
201
200
|
};
|
|
202
|
-
const
|
|
201
|
+
const _hoisted_11 = { key: 0 };
|
|
203
202
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
204
203
|
...{
|
|
205
204
|
name: "FdsTreeView"
|
|
@@ -301,76 +300,82 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
301
300
|
vue.createElementVNode("input", { id: "tree-view-search-input" }, null, -1)
|
|
302
301
|
])], 40, _hoisted_2)
|
|
303
302
|
])) : vue.createCommentVNode("", true),
|
|
304
|
-
vue.createElementVNode("div",
|
|
303
|
+
vue.createElementVNode("div", {
|
|
304
|
+
class: vue.normalizeClass({ "overflow-x-auto": isRootComponent })
|
|
305
|
+
}, [
|
|
305
306
|
vue.createElementVNode("div", {
|
|
306
|
-
|
|
307
|
+
class: vue.normalizeClass({ "bg-white-solid p-2 rounded-md min-w-max": isRootComponent })
|
|
307
308
|
}, [
|
|
308
|
-
vue.createElementVNode("div",
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
props.nodes,
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
309
|
+
vue.createElementVNode("div", {
|
|
310
|
+
style: vue.normalizeStyle(indent.value)
|
|
311
|
+
}, [
|
|
312
|
+
vue.createElementVNode("div", _hoisted_3, [
|
|
313
|
+
hasChildrenNodes.value ? (vue.openBlock(), vue.createElementBlock("fds-icon", {
|
|
314
|
+
key: 0,
|
|
315
|
+
onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(treeState)?.toggleExpandNode(props.nodeId, props.nodes)),
|
|
316
|
+
name: vue.unref(treeState)?.getNodeIcon(
|
|
317
|
+
props.nodeId,
|
|
318
|
+
props.nodes,
|
|
319
|
+
props.nodeExpandIcon,
|
|
320
|
+
props.nodeCollapseIcon
|
|
321
|
+
) ?? props.nodeExpandIcon,
|
|
322
|
+
size: "24px",
|
|
323
|
+
class: "text-blue-500 mr-3",
|
|
324
|
+
style: { "margin-top": "3px" }
|
|
325
|
+
}, null, 8, _hoisted_4)) : vue.createCommentVNode("", true),
|
|
326
|
+
!hasChildrenNodes.value ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
327
|
+
key: 1,
|
|
328
|
+
style: vue.normalizeStyle({ width: `${_ctx.indentation}px` })
|
|
329
|
+
}, null, 4)) : vue.createCommentVNode("", true),
|
|
330
|
+
vue.createElementVNode("fds-checkbox", _hoisted_5, [
|
|
331
|
+
vue.createElementVNode("input", {
|
|
332
|
+
id: `checkbox-${props.nodeId}`,
|
|
333
|
+
style: { "margin": "0px", "margin-top": "3px" },
|
|
334
|
+
type: "checkbox",
|
|
335
|
+
checked: vue.unref(treeState)?.isNodeSelected(props.nodeId),
|
|
336
|
+
indeterminate: _ctx.showIndeterminate && isIndeterminate.value,
|
|
337
|
+
onChange: _cache[2] || (_cache[2] = ($event) => vue.unref(treeState)?.toggleSelectNode(props.nodes, props.nodeId, props.title, props.data))
|
|
338
|
+
}, null, 40, _hoisted_6),
|
|
339
|
+
vue.createElementVNode("label", {
|
|
340
|
+
for: `checkbox-${props.nodeId}`,
|
|
341
|
+
class: "flex flex-col pl-0"
|
|
342
|
+
}, [
|
|
343
|
+
vue.createElementVNode("div", null, [
|
|
344
|
+
_ctx.title ? (vue.openBlock(), vue.createElementBlock("fds-text", _hoisted_8, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true),
|
|
345
|
+
_ctx.showChildrenCount && hasChildrenNodes.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9, " (+" + vue.toDisplayString(props.nodes.length) + ") ", 1)) : vue.createCommentVNode("", true)
|
|
346
|
+
]),
|
|
347
|
+
_ctx.showNodeDescription ? (vue.openBlock(), vue.createElementBlock("fds-text", _hoisted_10, vue.toDisplayString(props.nodeId), 1)) : vue.createCommentVNode("", true)
|
|
348
|
+
], 8, _hoisted_7)
|
|
349
|
+
])
|
|
345
350
|
])
|
|
346
|
-
])
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
]
|
|
351
|
+
], 4),
|
|
352
|
+
vue.unref(expandedNodes).has(props.nodeId) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
|
|
353
|
+
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredNodes.value, (child) => {
|
|
354
|
+
return vue.openBlock(), vue.createBlock(_component_FdsTreeView, {
|
|
355
|
+
key: child.nodeId,
|
|
356
|
+
nodes: child.children || [],
|
|
357
|
+
title: child.title,
|
|
358
|
+
nodeId: child.nodeId,
|
|
359
|
+
data: child.data,
|
|
360
|
+
depth: props.depth + 1,
|
|
361
|
+
indentation: props.indentation,
|
|
362
|
+
nodeExpandIcon: props.nodeExpandIcon,
|
|
363
|
+
nodeCollapseIcon: props.nodeCollapseIcon,
|
|
364
|
+
showNodeDescription: _ctx.showNodeDescription,
|
|
365
|
+
showChildrenCount: _ctx.showChildrenCount,
|
|
366
|
+
expandChildrenOnSelect: _ctx.expandChildrenOnSelect,
|
|
367
|
+
showIndeterminate: _ctx.showIndeterminate,
|
|
368
|
+
showIndeterminateOnlyOnChildrenSelection: _ctx.showIndeterminateOnlyOnChildrenSelection,
|
|
369
|
+
expandChildrenOnParentCheck: _ctx.expandChildrenOnParentCheck,
|
|
370
|
+
expandAllChildrenOnParentCheck: _ctx.expandAllChildrenOnParentCheck,
|
|
371
|
+
searchEnabled: _ctx.searchEnabled,
|
|
372
|
+
searchExpandNodes: _ctx.searchExpandNodes,
|
|
373
|
+
searchMatchParams: _ctx.searchMatchParams
|
|
374
|
+
}, null, 8, ["nodes", "title", "nodeId", "data", "depth", "indentation", "nodeExpandIcon", "nodeCollapseIcon", "showNodeDescription", "showChildrenCount", "expandChildrenOnSelect", "showIndeterminate", "showIndeterminateOnlyOnChildrenSelection", "expandChildrenOnParentCheck", "expandAllChildrenOnParentCheck", "searchEnabled", "searchExpandNodes", "searchMatchParams"]);
|
|
375
|
+
}), 128))
|
|
376
|
+
])) : vue.createCommentVNode("", true)
|
|
377
|
+
], 2)
|
|
378
|
+
], 2)
|
|
374
379
|
]);
|
|
375
380
|
};
|
|
376
381
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fds-vue-core.cjs.js","sources":["../src/components/fds-tree-view/useTreeState.ts","../src/components/fds-tree-view/FdsTreeView.vue","../src/index.ts"],"sourcesContent":["import { reactive, ref } from 'vue'\nimport type { TreeNode, NodeId, TreeNodeArray, TreeNodeItem } from './types'\n\ninterface TreeStateOptions {\n expandChildrenOnParentCheck?: boolean\n expandAllChildrenOnParentCheck?: boolean\n showIndeterminateOnlyOnChildrenSelection?: boolean\n}\n\nconst useTreeState = (options: TreeStateOptions = {}) => {\n /**\n * The set of selected nodes\n */\n const selectedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The array of selected node objects\n */\n const selectedNodeObjects = reactive<TreeNode[]>([])\n /**\n * The set of expanded nodes\n */\n const expandedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The search term for filtering nodes\n */\n const searchTerm = ref<string>('')\n\n /**\n * Clears all selected nodes. Can be used to reset the selections to the initial state.\n */\n const clearAllSelectedNodes = () => {\n selectedNodes.clear()\n selectedNodeObjects.length = 0\n }\n\n /**\n * Collapses all expanded nodes. Can be used to reset the tree to the initial state.\n */\n const collapseAllExpandedNodes = () => expandedNodes.clear()\n\n /**\n * Returns true if the node is selected\n */\n const isNodeSelected = (nodeId: NodeId) => selectedNodes.has(nodeId)\n\n /**\n * Returns true if the node is expanded\n */\n const isNodeExpanded = (nodeId: NodeId) => expandedNodes.has(nodeId)\n\n /**\n * Expands the specific node\n */\n const expandNode = (nodeId: NodeId) => expandedNodes.add(nodeId)\n\n /**\n * Collapses the specific node\n */\n const collapseNode = (nodeId: NodeId) => expandedNodes.delete(nodeId)\n\n /**\n * Selects the specific node and adds it to the selectedNodeObjects array.\n * Used to access the node object and it's underlying data\n */\n const injectNode = (nodeObject: TreeNode) => {\n selectedNodes.add(nodeObject.nodeId)\n selectedNodeObjects.push(nodeObject)\n }\n\n /**\n * Expands all children of the specific node\n */\n const expandAllChildren = (node: TreeNode) => {\n expandNode(node.nodeId)\n if (node.children && node.children.length > 0) {\n node.children.forEach(expandAllChildren)\n }\n }\n\n /**\n * Selects this node and recursively selects all children nodes\n */\n const selectAllChildren = (node: TreeNode) => {\n // Deselect all children to avoid duplicates\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n\n // Inject the current node\n injectNode(node)\n\n if (node.children && node.children.length > 0) {\n node.children.forEach(selectAllChildren)\n }\n\n // Only expand children if the option is enabled\n if (options.expandChildrenOnParentCheck) {\n expandAllChildren(node)\n }\n }\n\n /**\n * Deselects the specific node\n */\n const deselectNode = (nodeId: NodeId) => {\n selectedNodes.delete(nodeId)\n const index = selectedNodeObjects.findIndex((node) => node.nodeId === nodeId)\n\n if (index > -1) {\n selectedNodeObjects.splice(index, 1)\n }\n }\n\n /**\n * Deselects this node and recursively deselects all children nodes\n */\n const deselectAllChildren = (node: TreeNode) => {\n // Remove the current node\n deselectNode(node.nodeId)\n\n // Recursively remove all children\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n }\n\n /**\n * Finds a node by ID\n */\n const findNodeById = (nodes: TreeNodeArray, nodeId: string): TreeNodeItem | null => {\n for (const node of nodes) {\n if (node.nodeId === nodeId) {\n return node\n }\n if (node.children) {\n const found = findNodeById(node.children, nodeId)\n if (found) return found\n }\n }\n return null\n }\n\n /**\n * Checks if a node has children\n */\n const hasChildrenNodes = (nodes: TreeNodeArray) => nodes.length > 0\n\n /**\n * Checks if a node is indeterminate (partially selected)\n */\n const isNodeIndeterminate = (nodes: TreeNodeArray, parentNodeId?: string): boolean => {\n if (!hasChildrenNodes(nodes)) return false\n\n // Check each child's state\n const childStates = nodes.map((node) => ({\n isSelected: selectedNodes.has(node.nodeId),\n isIndeterminate:\n node.children && node.children.length > 0\n ? isNodeIndeterminate(node.children, node.nodeId)\n : false,\n }))\n\n const hasSelected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isSelected,\n )\n const hasUnselected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) =>\n !child.isSelected && !child.isIndeterminate,\n )\n const hasIndeterminate = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isIndeterminate,\n )\n\n // If parent is selected, never show indeterminate\n if (parentNodeId && selectedNodes.has(parentNodeId)) return false\n\n // Standard behavior: some selected + some unselected, OR any child is indeterminate\n if (!options.showIndeterminateOnlyOnChildrenSelection) {\n return (hasSelected && hasUnselected) || hasIndeterminate\n }\n\n // Special behavior: any child selected OR any child indeterminate\n return hasSelected || hasIndeterminate\n }\n\n /**\n * Toggles the selection state of the specific node\n */\n const toggleSelectNode = (\n nodes: TreeNodeArray,\n nodeId: string,\n title?: string,\n data?: Record<string, unknown>,\n ) => {\n let node = findNodeById(nodes, nodeId)\n\n if (!node && nodeId) {\n node = {\n nodeId: nodeId,\n title: title,\n children: nodes || [],\n data: data,\n }\n }\n\n if (!node) return\n\n if (selectedNodes.has(nodeId)) {\n deselectAllChildren(node)\n } else {\n selectAllChildren(node)\n\n if (\n selectedNodes.has(nodeId) &&\n !expandedNodes.has(nodeId) &&\n options.expandChildrenOnParentCheck\n ) {\n toggleExpandNode(nodeId, nodes)\n }\n }\n }\n\n /**\n * Toggles the expansion state of the specific node\n */\n const toggleExpandNode = (nodeId: NodeId, nodes: TreeNodeArray) => {\n if (isNodeExpanded(nodeId)) {\n collapseNode(nodeId)\n } else {\n if (!hasChildrenNodes(nodes)) return\n expandNode(nodeId)\n }\n }\n\n /**\n * Gets the icons for expanded and collapsed nodes\n */\n const getNodeIcon = (\n nodeId: NodeId,\n nodes: TreeNodeArray,\n expandIcon: string,\n collapseIcon: string,\n ) => {\n return isNodeExpanded(nodeId) && hasChildrenNodes(nodes) ? collapseIcon : expandIcon\n }\n\n /**\n * Checks if a node matches the search term by searching through specified properties\n */\n const nodeMatchesSearch = (node: TreeNode, term: string, searchParams?: string[]): boolean => {\n if (!term.trim()) return true\n if (!searchParams || !Array.isArray(searchParams)) return false\n\n const searchLower = term.toLowerCase()\n\n for (const param of searchParams) {\n if (param === 'title' && node.title?.toLowerCase().includes(searchLower)) return true\n if (param === 'nodeId' && node.nodeId.toLowerCase().includes(searchLower)) return true\n\n // Check nested data properties\n if (node.data && typeof node.data === 'object') {\n const value = (node.data as Record<string, unknown>)[param]\n if (value && String(value).toLowerCase().includes(searchLower)) return true\n }\n }\n\n return false\n }\n\n /**\n * Filters nodes based on search term, including children that match\n */\n const filterNodes = (\n nodes: TreeNodeArray,\n term: string,\n searchParams?: string[],\n ): TreeNodeArray => {\n if (!term.trim()) return nodes\n\n const filtered: TreeNodeArray = []\n\n for (const node of nodes) {\n const nodeMatches = nodeMatchesSearch(node, term, searchParams)\n const filteredChildren = node.children ? filterNodes(node.children, term, searchParams) : []\n\n // Include node if it matches OR has matching children\n if (nodeMatches || filteredChildren.length > 0) {\n filtered.push({\n ...node,\n children: filteredChildren.length > 0 ? filteredChildren : node.children,\n })\n }\n }\n\n return filtered\n }\n\n /**\n * Sets the search term\n */\n const setSearchTerm = (term: string) => {\n searchTerm.value = term\n }\n\n /**\n * Clears the search term\n */\n const clearSearch = () => {\n searchTerm.value = ''\n }\n\n return {\n selectedNodes,\n selectedNodeObjects,\n expandedNodes,\n searchTerm,\n clearAllSelectedNodes,\n collapseAllExpandedNodes,\n isNodeSelected,\n isNodeExpanded,\n injectNode,\n selectAllChildren,\n deselectNode,\n deselectAllChildren,\n expandNode,\n collapseNode,\n expandAllChildren,\n findNodeById,\n hasChildrenNodes,\n isNodeIndeterminate,\n toggleSelectNode,\n toggleExpandNode,\n getNodeIcon,\n nodeMatchesSearch,\n filterNodes,\n setSearchTerm,\n clearSearch,\n }\n}\n\nexport default useTreeState\n","<script setup lang=\"ts\">\nimport { computed, inject, reactive, provide, watch } from 'vue'\nimport useTreeState from './useTreeState'\nimport type { TreeViewProps } from './types.ts'\n\ntype Props<T = Record<string, unknown>> = TreeViewProps<T>\n\nconst props = withDefaults(defineProps<Props>(), {\n nodes: () => [],\n depth: 0,\n showNodeDescription: false,\n showChildrenCount: false,\n expandChildrenOnSelect: false,\n showIndeterminate: false,\n expandChildrenOnParentCheck: false,\n expandAllChildrenOnParentCheck: true,\n showIndeterminateOnlyOnChildrenSelection: false,\n searchEnabled: false,\n searchExpandNodes: false,\n searchMatchParams: () => ['title', 'nodeId'],\n})\n\ndefineOptions({\n name: 'FdsTreeView',\n})\n\nconst isRootComponent = props.depth === 0\nconst injectedTreeState = inject<ReturnType<typeof useTreeState> | null>('treeState', null)\n\nlet treeState: ReturnType<typeof useTreeState>\nif (isRootComponent) {\n // This is the root component, create and provide treeState with props\n treeState = useTreeState({\n expandChildrenOnParentCheck: props.expandChildrenOnParentCheck,\n expandAllChildrenOnParentCheck: props.expandAllChildrenOnParentCheck,\n showIndeterminateOnlyOnChildrenSelection: props.showIndeterminateOnlyOnChildrenSelection,\n })\n provide('treeState', treeState)\n} else {\n // This is a child component, use injected treeState\n treeState = injectedTreeState!\n}\n\nconst expandedNodes = treeState?.expandedNodes ?? reactive(new Set())\n\nconst indentValue = props.depth * props.indentation\n\nconst indent = computed(() => ({\n display: 'flex',\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n transform: `translate(${indentValue}px)`,\n}))\n\nconst hasChildrenNodes = computed(() => {\n const nodesToCheck =\n props.searchEnabled && treeState?.searchTerm?.value ? filteredNodes.value : props.nodes\n return treeState?.hasChildrenNodes(nodesToCheck) ?? false\n})\n\nconst isIndeterminate = computed(\n () => treeState?.isNodeIndeterminate(props.nodes, props.nodeId) ?? false,\n)\n\nconst filteredNodes = computed(() => {\n if (!props.searchEnabled || !treeState?.searchTerm?.value) {\n return props.nodes\n }\n return treeState.filterNodes(props.nodes, treeState.searchTerm.value, props.searchMatchParams)\n})\n\n// Auto-expand nodes when searching\nwatch(\n () => treeState?.searchTerm?.value,\n (newSearchTerm) => {\n if (props.searchEnabled && props.searchExpandNodes && newSearchTerm && newSearchTerm.trim()) {\n // Expand all nodes that have matching children\n const expandMatchingNodes = (nodes: typeof props.nodes) => {\n nodes.forEach((node) => {\n if (node.children && node.children.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(node.children, newSearchTerm, props.searchMatchParams).length >\n 0\n if (hasMatchingChildren) {\n treeState?.expandNode(node.nodeId)\n }\n expandMatchingNodes(node.children)\n }\n })\n }\n\n // Auto-expand nodes that have matching children\n if (props.nodes && props.nodes.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(props.nodes, newSearchTerm, props.searchMatchParams).length > 0\n if (hasMatchingChildren) {\n treeState?.expandNode(props.nodeId)\n }\n }\n\n // Also expand individual child nodes recursively\n expandMatchingNodes(props.nodes)\n }\n },\n { immediate: false },\n)\n</script>\n\n<template>\n <div>\n <div v-if=\"isRootComponent && searchEnabled\" class=\"mb-4\">\n <fds-input\n :value=\"treeState?.searchTerm || ''\"\n @input=\"treeState?.setSearchTerm($event.target.value)\"\n class=\"w-full\"\n :label=\"searchLabel\"\n >\n <input id=\"tree-view-search-input\" />\n </fds-input>\n </div>\n\n <div class=\"bg-white-solid p-2 rounded-md\">\n <div :style=\"indent\">\n <div class=\"flex\">\n <fds-icon\n v-if=\"hasChildrenNodes\"\n @click=\"treeState?.toggleExpandNode(props.nodeId, props.nodes)\"\n :name=\"\n treeState?.getNodeIcon(\n props.nodeId,\n props.nodes,\n props.nodeExpandIcon,\n props.nodeCollapseIcon,\n ) ?? props.nodeExpandIcon\n \"\n size=\"24px\"\n class=\"text-blue-500 mr-3\"\n style=\"margin-top: 3px\"\n />\n <div v-if=\"!hasChildrenNodes\" :style=\"{ width: `${indentation}px` }\" />\n <fds-checkbox class=\"pl-0 flex-1 flex items-center\">\n <input\n :id=\"`checkbox-${props.nodeId}`\"\n style=\"margin: 0px; margin-top: 3px\"\n type=\"checkbox\"\n :checked=\"treeState?.isNodeSelected(props.nodeId)\"\n :indeterminate=\"showIndeterminate && isIndeterminate\"\n @change=\"\n treeState?.toggleSelectNode(props.nodes, props.nodeId, props.title, props.data)\n \"\n />\n <label :for=\"`checkbox-${props.nodeId}`\" class=\"flex flex-col pl-0\">\n <div>\n <fds-text v-if=\"title\" type=\"default\">{{ title }}</fds-text>\n <span v-if=\"showChildrenCount && hasChildrenNodes\">\n (+{{ props.nodes.length }})\n </span>\n </div>\n <fds-text v-if=\"showNodeDescription\" type=\"meta\" class=\"flex-1\">\n {{ props.nodeId }}\n </fds-text>\n </label>\n </fds-checkbox>\n </div>\n </div>\n </div>\n\n <div v-if=\"expandedNodes.has(props.nodeId)\">\n <FdsTreeView\n v-for=\"child in filteredNodes\"\n :key=\"child.nodeId\"\n :nodes=\"child.children || []\"\n :title=\"child.title\"\n :nodeId=\"child.nodeId\"\n :data=\"child.data\"\n :depth=\"props.depth + 1\"\n :indentation=\"props.indentation\"\n :nodeExpandIcon=\"props.nodeExpandIcon\"\n :nodeCollapseIcon=\"props.nodeCollapseIcon\"\n :showNodeDescription=\"showNodeDescription\"\n :showChildrenCount=\"showChildrenCount\"\n :expandChildrenOnSelect=\"expandChildrenOnSelect\"\n :showIndeterminate=\"showIndeterminate\"\n :showIndeterminateOnlyOnChildrenSelection=\"showIndeterminateOnlyOnChildrenSelection\"\n :expandChildrenOnParentCheck=\"expandChildrenOnParentCheck\"\n :expandAllChildrenOnParentCheck=\"expandAllChildrenOnParentCheck\"\n :searchEnabled=\"searchEnabled\"\n :searchExpandNodes=\"searchExpandNodes\"\n :searchMatchParams=\"searchMatchParams\"\n />\n </div>\n </div>\n</template>\n","import type { App } from 'vue'\n\n// Import all components\nimport FdsTreeView from './components/fds-tree-view/FdsTreeView.vue'\n\n// Import composables\nimport useTreeState from './components/fds-tree-view/useTreeState'\n\n// Export individual components\nexport { FdsTreeView }\n\n// Export composables\nexport { useTreeState }\n\n// Export component library plugin\nexport default {\n install(app: App) {\n // Register all components globally\n app.component('FdsTreeView', FdsTreeView)\n },\n}\n\nexport type {\n TreeNode,\n TreeNodeArray,\n TreeNodeItem,\n TreeViewProps,\n NodeId,\n} from './components/fds-tree-view/types.js'\n\nimport type { TreeViewProps } from './components/fds-tree-view/types.js'\nexport type FdsTreeViewProps<T = Record<string, unknown>> = TreeViewProps<T>\n"],"names":["reactive","ref","index","inject","provide","computed","watch","_createElementBlock","searchEnabled","_openBlock","_createElementVNode","_unref","searchLabel","indentation","showIndeterminate","title","_toDisplayString","showChildrenCount","showNodeDescription","_Fragment","_renderList","_createBlock","expandChildrenOnSelect","showIndeterminateOnlyOnChildrenSelection","expandChildrenOnParentCheck","expandAllChildrenOnParentCheck","searchExpandNodes","searchMatchParams","FdsTreeView"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fds-vue-core.cjs.js","sources":["../src/components/fds-tree-view/useTreeState.ts","../src/components/fds-tree-view/FdsTreeView.vue","../src/index.ts"],"sourcesContent":["import { reactive, ref } from 'vue'\nimport type { TreeNode, NodeId, TreeNodeArray, TreeNodeItem } from './types'\n\ninterface TreeStateOptions {\n expandChildrenOnParentCheck?: boolean\n expandAllChildrenOnParentCheck?: boolean\n showIndeterminateOnlyOnChildrenSelection?: boolean\n}\n\nconst useTreeState = (options: TreeStateOptions = {}) => {\n /**\n * The set of selected nodes\n */\n const selectedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The array of selected node objects\n */\n const selectedNodeObjects = reactive<TreeNode[]>([])\n /**\n * The set of expanded nodes\n */\n const expandedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The search term for filtering nodes\n */\n const searchTerm = ref<string>('')\n\n /**\n * Clears all selected nodes. Can be used to reset the selections to the initial state.\n */\n const clearAllSelectedNodes = () => {\n selectedNodes.clear()\n selectedNodeObjects.length = 0\n }\n\n /**\n * Collapses all expanded nodes. Can be used to reset the tree to the initial state.\n */\n const collapseAllExpandedNodes = () => expandedNodes.clear()\n\n /**\n * Returns true if the node is selected\n */\n const isNodeSelected = (nodeId: NodeId) => selectedNodes.has(nodeId)\n\n /**\n * Returns true if the node is expanded\n */\n const isNodeExpanded = (nodeId: NodeId) => expandedNodes.has(nodeId)\n\n /**\n * Expands the specific node\n */\n const expandNode = (nodeId: NodeId) => expandedNodes.add(nodeId)\n\n /**\n * Collapses the specific node\n */\n const collapseNode = (nodeId: NodeId) => expandedNodes.delete(nodeId)\n\n /**\n * Selects the specific node and adds it to the selectedNodeObjects array.\n * Used to access the node object and it's underlying data\n */\n const injectNode = (nodeObject: TreeNode) => {\n selectedNodes.add(nodeObject.nodeId)\n selectedNodeObjects.push(nodeObject)\n }\n\n /**\n * Expands all children of the specific node\n */\n const expandAllChildren = (node: TreeNode) => {\n expandNode(node.nodeId)\n if (node.children && node.children.length > 0) {\n node.children.forEach(expandAllChildren)\n }\n }\n\n /**\n * Selects this node and recursively selects all children nodes\n */\n const selectAllChildren = (node: TreeNode) => {\n // Deselect all children to avoid duplicates\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n\n // Inject the current node\n injectNode(node)\n\n if (node.children && node.children.length > 0) {\n node.children.forEach(selectAllChildren)\n }\n\n // Only expand children if the option is enabled\n if (options.expandChildrenOnParentCheck) {\n expandAllChildren(node)\n }\n }\n\n /**\n * Deselects the specific node\n */\n const deselectNode = (nodeId: NodeId) => {\n selectedNodes.delete(nodeId)\n const index = selectedNodeObjects.findIndex((node) => node.nodeId === nodeId)\n\n if (index > -1) {\n selectedNodeObjects.splice(index, 1)\n }\n }\n\n /**\n * Deselects this node and recursively deselects all children nodes\n */\n const deselectAllChildren = (node: TreeNode) => {\n // Remove the current node\n deselectNode(node.nodeId)\n\n // Recursively remove all children\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n }\n\n /**\n * Finds a node by ID\n */\n const findNodeById = (nodes: TreeNodeArray, nodeId: string): TreeNodeItem | null => {\n for (const node of nodes) {\n if (node.nodeId === nodeId) {\n return node\n }\n if (node.children) {\n const found = findNodeById(node.children, nodeId)\n if (found) return found\n }\n }\n return null\n }\n\n /**\n * Checks if a node has children\n */\n const hasChildrenNodes = (nodes: TreeNodeArray) => nodes.length > 0\n\n /**\n * Checks if a node is indeterminate (partially selected)\n */\n const isNodeIndeterminate = (nodes: TreeNodeArray, parentNodeId?: string): boolean => {\n if (!hasChildrenNodes(nodes)) return false\n\n // Check each child's state\n const childStates = nodes.map((node) => ({\n isSelected: selectedNodes.has(node.nodeId),\n isIndeterminate:\n node.children && node.children.length > 0\n ? isNodeIndeterminate(node.children, node.nodeId)\n : false,\n }))\n\n const hasSelected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isSelected,\n )\n const hasUnselected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) =>\n !child.isSelected && !child.isIndeterminate,\n )\n const hasIndeterminate = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isIndeterminate,\n )\n\n // If parent is selected, never show indeterminate\n if (parentNodeId && selectedNodes.has(parentNodeId)) return false\n\n // Standard behavior: some selected + some unselected, OR any child is indeterminate\n if (!options.showIndeterminateOnlyOnChildrenSelection) {\n return (hasSelected && hasUnselected) || hasIndeterminate\n }\n\n // Special behavior: any child selected OR any child indeterminate\n return hasSelected || hasIndeterminate\n }\n\n /**\n * Toggles the selection state of the specific node\n */\n const toggleSelectNode = (\n nodes: TreeNodeArray,\n nodeId: string,\n title?: string,\n data?: Record<string, unknown>,\n ) => {\n let node = findNodeById(nodes, nodeId)\n\n if (!node && nodeId) {\n node = {\n nodeId: nodeId,\n title: title,\n children: nodes || [],\n data: data,\n }\n }\n\n if (!node) return\n\n if (selectedNodes.has(nodeId)) {\n deselectAllChildren(node)\n } else {\n selectAllChildren(node)\n\n if (\n selectedNodes.has(nodeId) &&\n !expandedNodes.has(nodeId) &&\n options.expandChildrenOnParentCheck\n ) {\n toggleExpandNode(nodeId, nodes)\n }\n }\n }\n\n /**\n * Toggles the expansion state of the specific node\n */\n const toggleExpandNode = (nodeId: NodeId, nodes: TreeNodeArray) => {\n if (isNodeExpanded(nodeId)) {\n collapseNode(nodeId)\n } else {\n if (!hasChildrenNodes(nodes)) return\n expandNode(nodeId)\n }\n }\n\n /**\n * Gets the icons for expanded and collapsed nodes\n */\n const getNodeIcon = (\n nodeId: NodeId,\n nodes: TreeNodeArray,\n expandIcon: string,\n collapseIcon: string,\n ) => {\n return isNodeExpanded(nodeId) && hasChildrenNodes(nodes) ? collapseIcon : expandIcon\n }\n\n /**\n * Checks if a node matches the search term by searching through specified properties\n */\n const nodeMatchesSearch = (node: TreeNode, term: string, searchParams?: string[]): boolean => {\n if (!term.trim()) return true\n if (!searchParams || !Array.isArray(searchParams)) return false\n\n const searchLower = term.toLowerCase()\n\n for (const param of searchParams) {\n if (param === 'title' && node.title?.toLowerCase().includes(searchLower)) return true\n if (param === 'nodeId' && node.nodeId.toLowerCase().includes(searchLower)) return true\n\n // Check nested data properties\n if (node.data && typeof node.data === 'object') {\n const value = (node.data as Record<string, unknown>)[param]\n if (value && String(value).toLowerCase().includes(searchLower)) return true\n }\n }\n\n return false\n }\n\n /**\n * Filters nodes based on search term, including children that match\n */\n const filterNodes = (\n nodes: TreeNodeArray,\n term: string,\n searchParams?: string[],\n ): TreeNodeArray => {\n if (!term.trim()) return nodes\n\n const filtered: TreeNodeArray = []\n\n for (const node of nodes) {\n const nodeMatches = nodeMatchesSearch(node, term, searchParams)\n const filteredChildren = node.children ? filterNodes(node.children, term, searchParams) : []\n\n // Include node if it matches OR has matching children\n if (nodeMatches || filteredChildren.length > 0) {\n filtered.push({\n ...node,\n children: filteredChildren.length > 0 ? filteredChildren : node.children,\n })\n }\n }\n\n return filtered\n }\n\n /**\n * Sets the search term\n */\n const setSearchTerm = (term: string) => {\n searchTerm.value = term\n }\n\n /**\n * Clears the search term\n */\n const clearSearch = () => {\n searchTerm.value = ''\n }\n\n return {\n selectedNodes,\n selectedNodeObjects,\n expandedNodes,\n searchTerm,\n clearAllSelectedNodes,\n collapseAllExpandedNodes,\n isNodeSelected,\n isNodeExpanded,\n injectNode,\n selectAllChildren,\n deselectNode,\n deselectAllChildren,\n expandNode,\n collapseNode,\n expandAllChildren,\n findNodeById,\n hasChildrenNodes,\n isNodeIndeterminate,\n toggleSelectNode,\n toggleExpandNode,\n getNodeIcon,\n nodeMatchesSearch,\n filterNodes,\n setSearchTerm,\n clearSearch,\n }\n}\n\nexport default useTreeState\n","<script setup lang=\"ts\">\nimport { computed, inject, reactive, provide, watch } from 'vue'\nimport useTreeState from './useTreeState'\nimport type { TreeViewProps } from './types.ts'\n\ntype Props<T = Record<string, unknown>> = TreeViewProps<T>\n\nconst props = withDefaults(defineProps<Props>(), {\n nodes: () => [],\n depth: 0,\n showNodeDescription: false,\n showChildrenCount: false,\n expandChildrenOnSelect: false,\n showIndeterminate: false,\n expandChildrenOnParentCheck: false,\n expandAllChildrenOnParentCheck: true,\n showIndeterminateOnlyOnChildrenSelection: false,\n searchEnabled: false,\n searchExpandNodes: false,\n searchMatchParams: () => ['title', 'nodeId'],\n})\n\ndefineOptions({\n name: 'FdsTreeView',\n})\n\nconst isRootComponent = props.depth === 0\nconst injectedTreeState = inject<ReturnType<typeof useTreeState> | null>('treeState', null)\n\nlet treeState: ReturnType<typeof useTreeState>\nif (isRootComponent) {\n // This is the root component, create and provide treeState with props\n treeState = useTreeState({\n expandChildrenOnParentCheck: props.expandChildrenOnParentCheck,\n expandAllChildrenOnParentCheck: props.expandAllChildrenOnParentCheck,\n showIndeterminateOnlyOnChildrenSelection: props.showIndeterminateOnlyOnChildrenSelection,\n })\n provide('treeState', treeState)\n} else {\n // This is a child component, use injected treeState\n treeState = injectedTreeState!\n}\n\nconst expandedNodes = treeState?.expandedNodes ?? reactive(new Set())\n\nconst indentValue = props.depth * props.indentation\n\nconst indent = computed(() => ({\n display: 'flex',\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n transform: `translate(${indentValue}px)`,\n}))\n\nconst hasChildrenNodes = computed(() => {\n const nodesToCheck =\n props.searchEnabled && treeState?.searchTerm?.value ? filteredNodes.value : props.nodes\n return treeState?.hasChildrenNodes(nodesToCheck) ?? false\n})\n\nconst isIndeterminate = computed(\n () => treeState?.isNodeIndeterminate(props.nodes, props.nodeId) ?? false,\n)\n\nconst filteredNodes = computed(() => {\n if (!props.searchEnabled || !treeState?.searchTerm?.value) {\n return props.nodes\n }\n return treeState.filterNodes(props.nodes, treeState.searchTerm.value, props.searchMatchParams)\n})\n\n// Auto-expand nodes when searching\nwatch(\n () => treeState?.searchTerm?.value,\n (newSearchTerm) => {\n if (props.searchEnabled && props.searchExpandNodes && newSearchTerm && newSearchTerm.trim()) {\n // Expand all nodes that have matching children\n const expandMatchingNodes = (nodes: typeof props.nodes) => {\n nodes.forEach((node) => {\n if (node.children && node.children.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(node.children, newSearchTerm, props.searchMatchParams).length >\n 0\n if (hasMatchingChildren) {\n treeState?.expandNode(node.nodeId)\n }\n expandMatchingNodes(node.children)\n }\n })\n }\n\n // Auto-expand nodes that have matching children\n if (props.nodes && props.nodes.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(props.nodes, newSearchTerm, props.searchMatchParams).length > 0\n if (hasMatchingChildren) {\n treeState?.expandNode(props.nodeId)\n }\n }\n\n // Also expand individual child nodes recursively\n expandMatchingNodes(props.nodes)\n }\n },\n { immediate: false },\n)\n</script>\n\n<template>\n <div>\n <div v-if=\"isRootComponent && searchEnabled\" class=\"mb-4\">\n <fds-input\n :value=\"treeState?.searchTerm || ''\"\n @input=\"treeState?.setSearchTerm($event.target.value)\"\n class=\"w-full\"\n :label=\"searchLabel\"\n >\n <input id=\"tree-view-search-input\" />\n </fds-input>\n </div>\n\n <div :class=\"{ 'overflow-x-auto': isRootComponent }\">\n <div :class=\"{ 'bg-white-solid p-2 rounded-md min-w-max': isRootComponent }\">\n <div :style=\"indent\">\n <div class=\"flex\">\n <fds-icon\n v-if=\"hasChildrenNodes\"\n @click=\"treeState?.toggleExpandNode(props.nodeId, props.nodes)\"\n :name=\"\n treeState?.getNodeIcon(\n props.nodeId,\n props.nodes,\n props.nodeExpandIcon,\n props.nodeCollapseIcon,\n ) ?? props.nodeExpandIcon\n \"\n size=\"24px\"\n class=\"text-blue-500 mr-3\"\n style=\"margin-top: 3px\"\n />\n <div v-if=\"!hasChildrenNodes\" :style=\"{ width: `${indentation}px` }\" />\n\n <fds-checkbox class=\"pl-0 flex-1 flex items-center\">\n <input\n :id=\"`checkbox-${props.nodeId}`\"\n style=\"margin: 0px; margin-top: 3px\"\n type=\"checkbox\"\n :checked=\"treeState?.isNodeSelected(props.nodeId)\"\n :indeterminate=\"showIndeterminate && isIndeterminate\"\n @change=\"\n treeState?.toggleSelectNode(props.nodes, props.nodeId, props.title, props.data)\n \"\n />\n <label :for=\"`checkbox-${props.nodeId}`\" class=\"flex flex-col pl-0\">\n <div>\n <fds-text v-if=\"title\" type=\"default\">{{ title }}</fds-text>\n <span v-if=\"showChildrenCount && hasChildrenNodes\">\n (+{{ props.nodes.length }})\n </span>\n </div>\n <fds-text v-if=\"showNodeDescription\" type=\"meta\" class=\"flex-1\">\n {{ props.nodeId }}\n </fds-text>\n </label>\n </fds-checkbox>\n </div>\n </div>\n\n <div v-if=\"expandedNodes.has(props.nodeId)\">\n <FdsTreeView\n v-for=\"child in filteredNodes\"\n :key=\"child.nodeId\"\n :nodes=\"child.children || []\"\n :title=\"child.title\"\n :nodeId=\"child.nodeId\"\n :data=\"child.data\"\n :depth=\"props.depth + 1\"\n :indentation=\"props.indentation\"\n :nodeExpandIcon=\"props.nodeExpandIcon\"\n :nodeCollapseIcon=\"props.nodeCollapseIcon\"\n :showNodeDescription=\"showNodeDescription\"\n :showChildrenCount=\"showChildrenCount\"\n :expandChildrenOnSelect=\"expandChildrenOnSelect\"\n :showIndeterminate=\"showIndeterminate\"\n :showIndeterminateOnlyOnChildrenSelection=\"showIndeterminateOnlyOnChildrenSelection\"\n :expandChildrenOnParentCheck=\"expandChildrenOnParentCheck\"\n :expandAllChildrenOnParentCheck=\"expandAllChildrenOnParentCheck\"\n :searchEnabled=\"searchEnabled\"\n :searchExpandNodes=\"searchExpandNodes\"\n :searchMatchParams=\"searchMatchParams\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n","import type { App } from 'vue'\n\n// Import all components\nimport FdsTreeView from './components/fds-tree-view/FdsTreeView.vue'\n\n// Import composables\nimport useTreeState from './components/fds-tree-view/useTreeState'\n\n// Export individual components\nexport { FdsTreeView }\n\n// Export composables\nexport { useTreeState }\n\n// Export component library plugin\nexport default {\n install(app: App) {\n // Register all components globally\n app.component('FdsTreeView', FdsTreeView)\n },\n}\n\nexport type {\n TreeNode,\n TreeNodeArray,\n TreeNodeItem,\n TreeViewProps,\n NodeId,\n} from './components/fds-tree-view/types.js'\n\nimport type { TreeViewProps } from './components/fds-tree-view/types.js'\nexport type FdsTreeViewProps<T = Record<string, unknown>> = TreeViewProps<T>\n"],"names":["reactive","ref","index","inject","provide","computed","watch","_createElementBlock","searchEnabled","_openBlock","_createElementVNode","_unref","searchLabel","indentation","showIndeterminate","title","_toDisplayString","showChildrenCount","showNodeDescription","_Fragment","_renderList","_createBlock","expandChildrenOnSelect","showIndeterminateOnlyOnChildrenSelection","expandChildrenOnParentCheck","expandAllChildrenOnParentCheck","searchExpandNodes","searchMatchParams","FdsTreeView"],"mappings":"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"}
|
package/dist/fds-vue-core.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { reactive, ref, defineComponent, inject, provide, computed, watch, resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, unref, normalizeStyle, toDisplayString, Fragment, renderList, createBlock } from "vue";
|
|
1
|
+
import { reactive, ref, defineComponent, inject, provide, computed, watch, resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, unref, normalizeClass, normalizeStyle, toDisplayString, Fragment, renderList, createBlock } from "vue";
|
|
2
2
|
const useTreeState = (options = {}) => {
|
|
3
3
|
const selectedNodes = reactive(/* @__PURE__ */ new Set());
|
|
4
4
|
const selectedNodeObjects = reactive([]);
|
|
@@ -181,23 +181,22 @@ const _hoisted_1 = {
|
|
|
181
181
|
class: "mb-4"
|
|
182
182
|
};
|
|
183
183
|
const _hoisted_2 = ["value", "label"];
|
|
184
|
-
const _hoisted_3 = { class: "
|
|
185
|
-
const _hoisted_4 =
|
|
186
|
-
const _hoisted_5 =
|
|
187
|
-
const _hoisted_6 =
|
|
188
|
-
const _hoisted_7 = ["
|
|
189
|
-
const _hoisted_8 =
|
|
190
|
-
const _hoisted_9 = {
|
|
184
|
+
const _hoisted_3 = { class: "flex" };
|
|
185
|
+
const _hoisted_4 = ["name"];
|
|
186
|
+
const _hoisted_5 = { class: "pl-0 flex-1 flex items-center" };
|
|
187
|
+
const _hoisted_6 = ["id", "checked", "indeterminate"];
|
|
188
|
+
const _hoisted_7 = ["for"];
|
|
189
|
+
const _hoisted_8 = {
|
|
191
190
|
key: 0,
|
|
192
191
|
type: "default"
|
|
193
192
|
};
|
|
194
|
-
const
|
|
195
|
-
const
|
|
193
|
+
const _hoisted_9 = { key: 1 };
|
|
194
|
+
const _hoisted_10 = {
|
|
196
195
|
key: 0,
|
|
197
196
|
type: "meta",
|
|
198
197
|
class: "flex-1"
|
|
199
198
|
};
|
|
200
|
-
const
|
|
199
|
+
const _hoisted_11 = { key: 0 };
|
|
201
200
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
202
201
|
...{
|
|
203
202
|
name: "FdsTreeView"
|
|
@@ -299,76 +298,82 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
299
298
|
createElementVNode("input", { id: "tree-view-search-input" }, null, -1)
|
|
300
299
|
])], 40, _hoisted_2)
|
|
301
300
|
])) : createCommentVNode("", true),
|
|
302
|
-
createElementVNode("div",
|
|
301
|
+
createElementVNode("div", {
|
|
302
|
+
class: normalizeClass({ "overflow-x-auto": isRootComponent })
|
|
303
|
+
}, [
|
|
303
304
|
createElementVNode("div", {
|
|
304
|
-
|
|
305
|
+
class: normalizeClass({ "bg-white-solid p-2 rounded-md min-w-max": isRootComponent })
|
|
305
306
|
}, [
|
|
306
|
-
createElementVNode("div",
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
props.nodes,
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
307
|
+
createElementVNode("div", {
|
|
308
|
+
style: normalizeStyle(indent.value)
|
|
309
|
+
}, [
|
|
310
|
+
createElementVNode("div", _hoisted_3, [
|
|
311
|
+
hasChildrenNodes.value ? (openBlock(), createElementBlock("fds-icon", {
|
|
312
|
+
key: 0,
|
|
313
|
+
onClick: _cache[1] || (_cache[1] = ($event) => unref(treeState)?.toggleExpandNode(props.nodeId, props.nodes)),
|
|
314
|
+
name: unref(treeState)?.getNodeIcon(
|
|
315
|
+
props.nodeId,
|
|
316
|
+
props.nodes,
|
|
317
|
+
props.nodeExpandIcon,
|
|
318
|
+
props.nodeCollapseIcon
|
|
319
|
+
) ?? props.nodeExpandIcon,
|
|
320
|
+
size: "24px",
|
|
321
|
+
class: "text-blue-500 mr-3",
|
|
322
|
+
style: { "margin-top": "3px" }
|
|
323
|
+
}, null, 8, _hoisted_4)) : createCommentVNode("", true),
|
|
324
|
+
!hasChildrenNodes.value ? (openBlock(), createElementBlock("div", {
|
|
325
|
+
key: 1,
|
|
326
|
+
style: normalizeStyle({ width: `${_ctx.indentation}px` })
|
|
327
|
+
}, null, 4)) : createCommentVNode("", true),
|
|
328
|
+
createElementVNode("fds-checkbox", _hoisted_5, [
|
|
329
|
+
createElementVNode("input", {
|
|
330
|
+
id: `checkbox-${props.nodeId}`,
|
|
331
|
+
style: { "margin": "0px", "margin-top": "3px" },
|
|
332
|
+
type: "checkbox",
|
|
333
|
+
checked: unref(treeState)?.isNodeSelected(props.nodeId),
|
|
334
|
+
indeterminate: _ctx.showIndeterminate && isIndeterminate.value,
|
|
335
|
+
onChange: _cache[2] || (_cache[2] = ($event) => unref(treeState)?.toggleSelectNode(props.nodes, props.nodeId, props.title, props.data))
|
|
336
|
+
}, null, 40, _hoisted_6),
|
|
337
|
+
createElementVNode("label", {
|
|
338
|
+
for: `checkbox-${props.nodeId}`,
|
|
339
|
+
class: "flex flex-col pl-0"
|
|
340
|
+
}, [
|
|
341
|
+
createElementVNode("div", null, [
|
|
342
|
+
_ctx.title ? (openBlock(), createElementBlock("fds-text", _hoisted_8, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
|
|
343
|
+
_ctx.showChildrenCount && hasChildrenNodes.value ? (openBlock(), createElementBlock("span", _hoisted_9, " (+" + toDisplayString(props.nodes.length) + ") ", 1)) : createCommentVNode("", true)
|
|
344
|
+
]),
|
|
345
|
+
_ctx.showNodeDescription ? (openBlock(), createElementBlock("fds-text", _hoisted_10, toDisplayString(props.nodeId), 1)) : createCommentVNode("", true)
|
|
346
|
+
], 8, _hoisted_7)
|
|
347
|
+
])
|
|
343
348
|
])
|
|
344
|
-
])
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
]
|
|
349
|
+
], 4),
|
|
350
|
+
unref(expandedNodes).has(props.nodeId) ? (openBlock(), createElementBlock("div", _hoisted_11, [
|
|
351
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(filteredNodes.value, (child) => {
|
|
352
|
+
return openBlock(), createBlock(_component_FdsTreeView, {
|
|
353
|
+
key: child.nodeId,
|
|
354
|
+
nodes: child.children || [],
|
|
355
|
+
title: child.title,
|
|
356
|
+
nodeId: child.nodeId,
|
|
357
|
+
data: child.data,
|
|
358
|
+
depth: props.depth + 1,
|
|
359
|
+
indentation: props.indentation,
|
|
360
|
+
nodeExpandIcon: props.nodeExpandIcon,
|
|
361
|
+
nodeCollapseIcon: props.nodeCollapseIcon,
|
|
362
|
+
showNodeDescription: _ctx.showNodeDescription,
|
|
363
|
+
showChildrenCount: _ctx.showChildrenCount,
|
|
364
|
+
expandChildrenOnSelect: _ctx.expandChildrenOnSelect,
|
|
365
|
+
showIndeterminate: _ctx.showIndeterminate,
|
|
366
|
+
showIndeterminateOnlyOnChildrenSelection: _ctx.showIndeterminateOnlyOnChildrenSelection,
|
|
367
|
+
expandChildrenOnParentCheck: _ctx.expandChildrenOnParentCheck,
|
|
368
|
+
expandAllChildrenOnParentCheck: _ctx.expandAllChildrenOnParentCheck,
|
|
369
|
+
searchEnabled: _ctx.searchEnabled,
|
|
370
|
+
searchExpandNodes: _ctx.searchExpandNodes,
|
|
371
|
+
searchMatchParams: _ctx.searchMatchParams
|
|
372
|
+
}, null, 8, ["nodes", "title", "nodeId", "data", "depth", "indentation", "nodeExpandIcon", "nodeCollapseIcon", "showNodeDescription", "showChildrenCount", "expandChildrenOnSelect", "showIndeterminate", "showIndeterminateOnlyOnChildrenSelection", "expandChildrenOnParentCheck", "expandAllChildrenOnParentCheck", "searchEnabled", "searchExpandNodes", "searchMatchParams"]);
|
|
373
|
+
}), 128))
|
|
374
|
+
])) : createCommentVNode("", true)
|
|
375
|
+
], 2)
|
|
376
|
+
], 2)
|
|
372
377
|
]);
|
|
373
378
|
};
|
|
374
379
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fds-vue-core.es.js","sources":["../src/components/fds-tree-view/useTreeState.ts","../src/components/fds-tree-view/FdsTreeView.vue","../src/index.ts"],"sourcesContent":["import { reactive, ref } from 'vue'\nimport type { TreeNode, NodeId, TreeNodeArray, TreeNodeItem } from './types'\n\ninterface TreeStateOptions {\n expandChildrenOnParentCheck?: boolean\n expandAllChildrenOnParentCheck?: boolean\n showIndeterminateOnlyOnChildrenSelection?: boolean\n}\n\nconst useTreeState = (options: TreeStateOptions = {}) => {\n /**\n * The set of selected nodes\n */\n const selectedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The array of selected node objects\n */\n const selectedNodeObjects = reactive<TreeNode[]>([])\n /**\n * The set of expanded nodes\n */\n const expandedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The search term for filtering nodes\n */\n const searchTerm = ref<string>('')\n\n /**\n * Clears all selected nodes. Can be used to reset the selections to the initial state.\n */\n const clearAllSelectedNodes = () => {\n selectedNodes.clear()\n selectedNodeObjects.length = 0\n }\n\n /**\n * Collapses all expanded nodes. Can be used to reset the tree to the initial state.\n */\n const collapseAllExpandedNodes = () => expandedNodes.clear()\n\n /**\n * Returns true if the node is selected\n */\n const isNodeSelected = (nodeId: NodeId) => selectedNodes.has(nodeId)\n\n /**\n * Returns true if the node is expanded\n */\n const isNodeExpanded = (nodeId: NodeId) => expandedNodes.has(nodeId)\n\n /**\n * Expands the specific node\n */\n const expandNode = (nodeId: NodeId) => expandedNodes.add(nodeId)\n\n /**\n * Collapses the specific node\n */\n const collapseNode = (nodeId: NodeId) => expandedNodes.delete(nodeId)\n\n /**\n * Selects the specific node and adds it to the selectedNodeObjects array.\n * Used to access the node object and it's underlying data\n */\n const injectNode = (nodeObject: TreeNode) => {\n selectedNodes.add(nodeObject.nodeId)\n selectedNodeObjects.push(nodeObject)\n }\n\n /**\n * Expands all children of the specific node\n */\n const expandAllChildren = (node: TreeNode) => {\n expandNode(node.nodeId)\n if (node.children && node.children.length > 0) {\n node.children.forEach(expandAllChildren)\n }\n }\n\n /**\n * Selects this node and recursively selects all children nodes\n */\n const selectAllChildren = (node: TreeNode) => {\n // Deselect all children to avoid duplicates\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n\n // Inject the current node\n injectNode(node)\n\n if (node.children && node.children.length > 0) {\n node.children.forEach(selectAllChildren)\n }\n\n // Only expand children if the option is enabled\n if (options.expandChildrenOnParentCheck) {\n expandAllChildren(node)\n }\n }\n\n /**\n * Deselects the specific node\n */\n const deselectNode = (nodeId: NodeId) => {\n selectedNodes.delete(nodeId)\n const index = selectedNodeObjects.findIndex((node) => node.nodeId === nodeId)\n\n if (index > -1) {\n selectedNodeObjects.splice(index, 1)\n }\n }\n\n /**\n * Deselects this node and recursively deselects all children nodes\n */\n const deselectAllChildren = (node: TreeNode) => {\n // Remove the current node\n deselectNode(node.nodeId)\n\n // Recursively remove all children\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n }\n\n /**\n * Finds a node by ID\n */\n const findNodeById = (nodes: TreeNodeArray, nodeId: string): TreeNodeItem | null => {\n for (const node of nodes) {\n if (node.nodeId === nodeId) {\n return node\n }\n if (node.children) {\n const found = findNodeById(node.children, nodeId)\n if (found) return found\n }\n }\n return null\n }\n\n /**\n * Checks if a node has children\n */\n const hasChildrenNodes = (nodes: TreeNodeArray) => nodes.length > 0\n\n /**\n * Checks if a node is indeterminate (partially selected)\n */\n const isNodeIndeterminate = (nodes: TreeNodeArray, parentNodeId?: string): boolean => {\n if (!hasChildrenNodes(nodes)) return false\n\n // Check each child's state\n const childStates = nodes.map((node) => ({\n isSelected: selectedNodes.has(node.nodeId),\n isIndeterminate:\n node.children && node.children.length > 0\n ? isNodeIndeterminate(node.children, node.nodeId)\n : false,\n }))\n\n const hasSelected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isSelected,\n )\n const hasUnselected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) =>\n !child.isSelected && !child.isIndeterminate,\n )\n const hasIndeterminate = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isIndeterminate,\n )\n\n // If parent is selected, never show indeterminate\n if (parentNodeId && selectedNodes.has(parentNodeId)) return false\n\n // Standard behavior: some selected + some unselected, OR any child is indeterminate\n if (!options.showIndeterminateOnlyOnChildrenSelection) {\n return (hasSelected && hasUnselected) || hasIndeterminate\n }\n\n // Special behavior: any child selected OR any child indeterminate\n return hasSelected || hasIndeterminate\n }\n\n /**\n * Toggles the selection state of the specific node\n */\n const toggleSelectNode = (\n nodes: TreeNodeArray,\n nodeId: string,\n title?: string,\n data?: Record<string, unknown>,\n ) => {\n let node = findNodeById(nodes, nodeId)\n\n if (!node && nodeId) {\n node = {\n nodeId: nodeId,\n title: title,\n children: nodes || [],\n data: data,\n }\n }\n\n if (!node) return\n\n if (selectedNodes.has(nodeId)) {\n deselectAllChildren(node)\n } else {\n selectAllChildren(node)\n\n if (\n selectedNodes.has(nodeId) &&\n !expandedNodes.has(nodeId) &&\n options.expandChildrenOnParentCheck\n ) {\n toggleExpandNode(nodeId, nodes)\n }\n }\n }\n\n /**\n * Toggles the expansion state of the specific node\n */\n const toggleExpandNode = (nodeId: NodeId, nodes: TreeNodeArray) => {\n if (isNodeExpanded(nodeId)) {\n collapseNode(nodeId)\n } else {\n if (!hasChildrenNodes(nodes)) return\n expandNode(nodeId)\n }\n }\n\n /**\n * Gets the icons for expanded and collapsed nodes\n */\n const getNodeIcon = (\n nodeId: NodeId,\n nodes: TreeNodeArray,\n expandIcon: string,\n collapseIcon: string,\n ) => {\n return isNodeExpanded(nodeId) && hasChildrenNodes(nodes) ? collapseIcon : expandIcon\n }\n\n /**\n * Checks if a node matches the search term by searching through specified properties\n */\n const nodeMatchesSearch = (node: TreeNode, term: string, searchParams?: string[]): boolean => {\n if (!term.trim()) return true\n if (!searchParams || !Array.isArray(searchParams)) return false\n\n const searchLower = term.toLowerCase()\n\n for (const param of searchParams) {\n if (param === 'title' && node.title?.toLowerCase().includes(searchLower)) return true\n if (param === 'nodeId' && node.nodeId.toLowerCase().includes(searchLower)) return true\n\n // Check nested data properties\n if (node.data && typeof node.data === 'object') {\n const value = (node.data as Record<string, unknown>)[param]\n if (value && String(value).toLowerCase().includes(searchLower)) return true\n }\n }\n\n return false\n }\n\n /**\n * Filters nodes based on search term, including children that match\n */\n const filterNodes = (\n nodes: TreeNodeArray,\n term: string,\n searchParams?: string[],\n ): TreeNodeArray => {\n if (!term.trim()) return nodes\n\n const filtered: TreeNodeArray = []\n\n for (const node of nodes) {\n const nodeMatches = nodeMatchesSearch(node, term, searchParams)\n const filteredChildren = node.children ? filterNodes(node.children, term, searchParams) : []\n\n // Include node if it matches OR has matching children\n if (nodeMatches || filteredChildren.length > 0) {\n filtered.push({\n ...node,\n children: filteredChildren.length > 0 ? filteredChildren : node.children,\n })\n }\n }\n\n return filtered\n }\n\n /**\n * Sets the search term\n */\n const setSearchTerm = (term: string) => {\n searchTerm.value = term\n }\n\n /**\n * Clears the search term\n */\n const clearSearch = () => {\n searchTerm.value = ''\n }\n\n return {\n selectedNodes,\n selectedNodeObjects,\n expandedNodes,\n searchTerm,\n clearAllSelectedNodes,\n collapseAllExpandedNodes,\n isNodeSelected,\n isNodeExpanded,\n injectNode,\n selectAllChildren,\n deselectNode,\n deselectAllChildren,\n expandNode,\n collapseNode,\n expandAllChildren,\n findNodeById,\n hasChildrenNodes,\n isNodeIndeterminate,\n toggleSelectNode,\n toggleExpandNode,\n getNodeIcon,\n nodeMatchesSearch,\n filterNodes,\n setSearchTerm,\n clearSearch,\n }\n}\n\nexport default useTreeState\n","<script setup lang=\"ts\">\nimport { computed, inject, reactive, provide, watch } from 'vue'\nimport useTreeState from './useTreeState'\nimport type { TreeViewProps } from './types.ts'\n\ntype Props<T = Record<string, unknown>> = TreeViewProps<T>\n\nconst props = withDefaults(defineProps<Props>(), {\n nodes: () => [],\n depth: 0,\n showNodeDescription: false,\n showChildrenCount: false,\n expandChildrenOnSelect: false,\n showIndeterminate: false,\n expandChildrenOnParentCheck: false,\n expandAllChildrenOnParentCheck: true,\n showIndeterminateOnlyOnChildrenSelection: false,\n searchEnabled: false,\n searchExpandNodes: false,\n searchMatchParams: () => ['title', 'nodeId'],\n})\n\ndefineOptions({\n name: 'FdsTreeView',\n})\n\nconst isRootComponent = props.depth === 0\nconst injectedTreeState = inject<ReturnType<typeof useTreeState> | null>('treeState', null)\n\nlet treeState: ReturnType<typeof useTreeState>\nif (isRootComponent) {\n // This is the root component, create and provide treeState with props\n treeState = useTreeState({\n expandChildrenOnParentCheck: props.expandChildrenOnParentCheck,\n expandAllChildrenOnParentCheck: props.expandAllChildrenOnParentCheck,\n showIndeterminateOnlyOnChildrenSelection: props.showIndeterminateOnlyOnChildrenSelection,\n })\n provide('treeState', treeState)\n} else {\n // This is a child component, use injected treeState\n treeState = injectedTreeState!\n}\n\nconst expandedNodes = treeState?.expandedNodes ?? reactive(new Set())\n\nconst indentValue = props.depth * props.indentation\n\nconst indent = computed(() => ({\n display: 'flex',\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n transform: `translate(${indentValue}px)`,\n}))\n\nconst hasChildrenNodes = computed(() => {\n const nodesToCheck =\n props.searchEnabled && treeState?.searchTerm?.value ? filteredNodes.value : props.nodes\n return treeState?.hasChildrenNodes(nodesToCheck) ?? false\n})\n\nconst isIndeterminate = computed(\n () => treeState?.isNodeIndeterminate(props.nodes, props.nodeId) ?? false,\n)\n\nconst filteredNodes = computed(() => {\n if (!props.searchEnabled || !treeState?.searchTerm?.value) {\n return props.nodes\n }\n return treeState.filterNodes(props.nodes, treeState.searchTerm.value, props.searchMatchParams)\n})\n\n// Auto-expand nodes when searching\nwatch(\n () => treeState?.searchTerm?.value,\n (newSearchTerm) => {\n if (props.searchEnabled && props.searchExpandNodes && newSearchTerm && newSearchTerm.trim()) {\n // Expand all nodes that have matching children\n const expandMatchingNodes = (nodes: typeof props.nodes) => {\n nodes.forEach((node) => {\n if (node.children && node.children.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(node.children, newSearchTerm, props.searchMatchParams).length >\n 0\n if (hasMatchingChildren) {\n treeState?.expandNode(node.nodeId)\n }\n expandMatchingNodes(node.children)\n }\n })\n }\n\n // Auto-expand nodes that have matching children\n if (props.nodes && props.nodes.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(props.nodes, newSearchTerm, props.searchMatchParams).length > 0\n if (hasMatchingChildren) {\n treeState?.expandNode(props.nodeId)\n }\n }\n\n // Also expand individual child nodes recursively\n expandMatchingNodes(props.nodes)\n }\n },\n { immediate: false },\n)\n</script>\n\n<template>\n <div>\n <div v-if=\"isRootComponent && searchEnabled\" class=\"mb-4\">\n <fds-input\n :value=\"treeState?.searchTerm || ''\"\n @input=\"treeState?.setSearchTerm($event.target.value)\"\n class=\"w-full\"\n :label=\"searchLabel\"\n >\n <input id=\"tree-view-search-input\" />\n </fds-input>\n </div>\n\n <div class=\"bg-white-solid p-2 rounded-md\">\n <div :style=\"indent\">\n <div class=\"flex\">\n <fds-icon\n v-if=\"hasChildrenNodes\"\n @click=\"treeState?.toggleExpandNode(props.nodeId, props.nodes)\"\n :name=\"\n treeState?.getNodeIcon(\n props.nodeId,\n props.nodes,\n props.nodeExpandIcon,\n props.nodeCollapseIcon,\n ) ?? props.nodeExpandIcon\n \"\n size=\"24px\"\n class=\"text-blue-500 mr-3\"\n style=\"margin-top: 3px\"\n />\n <div v-if=\"!hasChildrenNodes\" :style=\"{ width: `${indentation}px` }\" />\n <fds-checkbox class=\"pl-0 flex-1 flex items-center\">\n <input\n :id=\"`checkbox-${props.nodeId}`\"\n style=\"margin: 0px; margin-top: 3px\"\n type=\"checkbox\"\n :checked=\"treeState?.isNodeSelected(props.nodeId)\"\n :indeterminate=\"showIndeterminate && isIndeterminate\"\n @change=\"\n treeState?.toggleSelectNode(props.nodes, props.nodeId, props.title, props.data)\n \"\n />\n <label :for=\"`checkbox-${props.nodeId}`\" class=\"flex flex-col pl-0\">\n <div>\n <fds-text v-if=\"title\" type=\"default\">{{ title }}</fds-text>\n <span v-if=\"showChildrenCount && hasChildrenNodes\">\n (+{{ props.nodes.length }})\n </span>\n </div>\n <fds-text v-if=\"showNodeDescription\" type=\"meta\" class=\"flex-1\">\n {{ props.nodeId }}\n </fds-text>\n </label>\n </fds-checkbox>\n </div>\n </div>\n </div>\n\n <div v-if=\"expandedNodes.has(props.nodeId)\">\n <FdsTreeView\n v-for=\"child in filteredNodes\"\n :key=\"child.nodeId\"\n :nodes=\"child.children || []\"\n :title=\"child.title\"\n :nodeId=\"child.nodeId\"\n :data=\"child.data\"\n :depth=\"props.depth + 1\"\n :indentation=\"props.indentation\"\n :nodeExpandIcon=\"props.nodeExpandIcon\"\n :nodeCollapseIcon=\"props.nodeCollapseIcon\"\n :showNodeDescription=\"showNodeDescription\"\n :showChildrenCount=\"showChildrenCount\"\n :expandChildrenOnSelect=\"expandChildrenOnSelect\"\n :showIndeterminate=\"showIndeterminate\"\n :showIndeterminateOnlyOnChildrenSelection=\"showIndeterminateOnlyOnChildrenSelection\"\n :expandChildrenOnParentCheck=\"expandChildrenOnParentCheck\"\n :expandAllChildrenOnParentCheck=\"expandAllChildrenOnParentCheck\"\n :searchEnabled=\"searchEnabled\"\n :searchExpandNodes=\"searchExpandNodes\"\n :searchMatchParams=\"searchMatchParams\"\n />\n </div>\n </div>\n</template>\n","import type { App } from 'vue'\n\n// Import all components\nimport FdsTreeView from './components/fds-tree-view/FdsTreeView.vue'\n\n// Import composables\nimport useTreeState from './components/fds-tree-view/useTreeState'\n\n// Export individual components\nexport { FdsTreeView }\n\n// Export composables\nexport { useTreeState }\n\n// Export component library plugin\nexport default {\n install(app: App) {\n // Register all components globally\n app.component('FdsTreeView', FdsTreeView)\n },\n}\n\nexport type {\n TreeNode,\n TreeNodeArray,\n TreeNodeItem,\n TreeViewProps,\n NodeId,\n} from './components/fds-tree-view/types.js'\n\nimport type { TreeViewProps } from './components/fds-tree-view/types.js'\nexport type FdsTreeViewProps<T = Record<string, unknown>> = TreeViewProps<T>\n"],"names":["index","_createElementBlock","searchEnabled","_openBlock","_createElementVNode","_unref","searchLabel","indentation","showIndeterminate","title","_toDisplayString","showChildrenCount","showNodeDescription","_Fragment","_renderList","_createBlock","expandChildrenOnSelect","showIndeterminateOnlyOnChildrenSelection","expandChildrenOnParentCheck","expandAllChildrenOnParentCheck","searchExpandNodes","searchMatchParams","FdsTreeView"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"fds-vue-core.es.js","sources":["../src/components/fds-tree-view/useTreeState.ts","../src/components/fds-tree-view/FdsTreeView.vue","../src/index.ts"],"sourcesContent":["import { reactive, ref } from 'vue'\nimport type { TreeNode, NodeId, TreeNodeArray, TreeNodeItem } from './types'\n\ninterface TreeStateOptions {\n expandChildrenOnParentCheck?: boolean\n expandAllChildrenOnParentCheck?: boolean\n showIndeterminateOnlyOnChildrenSelection?: boolean\n}\n\nconst useTreeState = (options: TreeStateOptions = {}) => {\n /**\n * The set of selected nodes\n */\n const selectedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The array of selected node objects\n */\n const selectedNodeObjects = reactive<TreeNode[]>([])\n /**\n * The set of expanded nodes\n */\n const expandedNodes = reactive<Set<NodeId>>(new Set())\n /**\n * The search term for filtering nodes\n */\n const searchTerm = ref<string>('')\n\n /**\n * Clears all selected nodes. Can be used to reset the selections to the initial state.\n */\n const clearAllSelectedNodes = () => {\n selectedNodes.clear()\n selectedNodeObjects.length = 0\n }\n\n /**\n * Collapses all expanded nodes. Can be used to reset the tree to the initial state.\n */\n const collapseAllExpandedNodes = () => expandedNodes.clear()\n\n /**\n * Returns true if the node is selected\n */\n const isNodeSelected = (nodeId: NodeId) => selectedNodes.has(nodeId)\n\n /**\n * Returns true if the node is expanded\n */\n const isNodeExpanded = (nodeId: NodeId) => expandedNodes.has(nodeId)\n\n /**\n * Expands the specific node\n */\n const expandNode = (nodeId: NodeId) => expandedNodes.add(nodeId)\n\n /**\n * Collapses the specific node\n */\n const collapseNode = (nodeId: NodeId) => expandedNodes.delete(nodeId)\n\n /**\n * Selects the specific node and adds it to the selectedNodeObjects array.\n * Used to access the node object and it's underlying data\n */\n const injectNode = (nodeObject: TreeNode) => {\n selectedNodes.add(nodeObject.nodeId)\n selectedNodeObjects.push(nodeObject)\n }\n\n /**\n * Expands all children of the specific node\n */\n const expandAllChildren = (node: TreeNode) => {\n expandNode(node.nodeId)\n if (node.children && node.children.length > 0) {\n node.children.forEach(expandAllChildren)\n }\n }\n\n /**\n * Selects this node and recursively selects all children nodes\n */\n const selectAllChildren = (node: TreeNode) => {\n // Deselect all children to avoid duplicates\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n\n // Inject the current node\n injectNode(node)\n\n if (node.children && node.children.length > 0) {\n node.children.forEach(selectAllChildren)\n }\n\n // Only expand children if the option is enabled\n if (options.expandChildrenOnParentCheck) {\n expandAllChildren(node)\n }\n }\n\n /**\n * Deselects the specific node\n */\n const deselectNode = (nodeId: NodeId) => {\n selectedNodes.delete(nodeId)\n const index = selectedNodeObjects.findIndex((node) => node.nodeId === nodeId)\n\n if (index > -1) {\n selectedNodeObjects.splice(index, 1)\n }\n }\n\n /**\n * Deselects this node and recursively deselects all children nodes\n */\n const deselectAllChildren = (node: TreeNode) => {\n // Remove the current node\n deselectNode(node.nodeId)\n\n // Recursively remove all children\n if (node.children && node.children.length > 0) {\n node.children.forEach(deselectAllChildren)\n }\n }\n\n /**\n * Finds a node by ID\n */\n const findNodeById = (nodes: TreeNodeArray, nodeId: string): TreeNodeItem | null => {\n for (const node of nodes) {\n if (node.nodeId === nodeId) {\n return node\n }\n if (node.children) {\n const found = findNodeById(node.children, nodeId)\n if (found) return found\n }\n }\n return null\n }\n\n /**\n * Checks if a node has children\n */\n const hasChildrenNodes = (nodes: TreeNodeArray) => nodes.length > 0\n\n /**\n * Checks if a node is indeterminate (partially selected)\n */\n const isNodeIndeterminate = (nodes: TreeNodeArray, parentNodeId?: string): boolean => {\n if (!hasChildrenNodes(nodes)) return false\n\n // Check each child's state\n const childStates = nodes.map((node) => ({\n isSelected: selectedNodes.has(node.nodeId),\n isIndeterminate:\n node.children && node.children.length > 0\n ? isNodeIndeterminate(node.children, node.nodeId)\n : false,\n }))\n\n const hasSelected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isSelected,\n )\n const hasUnselected = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) =>\n !child.isSelected && !child.isIndeterminate,\n )\n const hasIndeterminate = childStates.some(\n (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isIndeterminate,\n )\n\n // If parent is selected, never show indeterminate\n if (parentNodeId && selectedNodes.has(parentNodeId)) return false\n\n // Standard behavior: some selected + some unselected, OR any child is indeterminate\n if (!options.showIndeterminateOnlyOnChildrenSelection) {\n return (hasSelected && hasUnselected) || hasIndeterminate\n }\n\n // Special behavior: any child selected OR any child indeterminate\n return hasSelected || hasIndeterminate\n }\n\n /**\n * Toggles the selection state of the specific node\n */\n const toggleSelectNode = (\n nodes: TreeNodeArray,\n nodeId: string,\n title?: string,\n data?: Record<string, unknown>,\n ) => {\n let node = findNodeById(nodes, nodeId)\n\n if (!node && nodeId) {\n node = {\n nodeId: nodeId,\n title: title,\n children: nodes || [],\n data: data,\n }\n }\n\n if (!node) return\n\n if (selectedNodes.has(nodeId)) {\n deselectAllChildren(node)\n } else {\n selectAllChildren(node)\n\n if (\n selectedNodes.has(nodeId) &&\n !expandedNodes.has(nodeId) &&\n options.expandChildrenOnParentCheck\n ) {\n toggleExpandNode(nodeId, nodes)\n }\n }\n }\n\n /**\n * Toggles the expansion state of the specific node\n */\n const toggleExpandNode = (nodeId: NodeId, nodes: TreeNodeArray) => {\n if (isNodeExpanded(nodeId)) {\n collapseNode(nodeId)\n } else {\n if (!hasChildrenNodes(nodes)) return\n expandNode(nodeId)\n }\n }\n\n /**\n * Gets the icons for expanded and collapsed nodes\n */\n const getNodeIcon = (\n nodeId: NodeId,\n nodes: TreeNodeArray,\n expandIcon: string,\n collapseIcon: string,\n ) => {\n return isNodeExpanded(nodeId) && hasChildrenNodes(nodes) ? collapseIcon : expandIcon\n }\n\n /**\n * Checks if a node matches the search term by searching through specified properties\n */\n const nodeMatchesSearch = (node: TreeNode, term: string, searchParams?: string[]): boolean => {\n if (!term.trim()) return true\n if (!searchParams || !Array.isArray(searchParams)) return false\n\n const searchLower = term.toLowerCase()\n\n for (const param of searchParams) {\n if (param === 'title' && node.title?.toLowerCase().includes(searchLower)) return true\n if (param === 'nodeId' && node.nodeId.toLowerCase().includes(searchLower)) return true\n\n // Check nested data properties\n if (node.data && typeof node.data === 'object') {\n const value = (node.data as Record<string, unknown>)[param]\n if (value && String(value).toLowerCase().includes(searchLower)) return true\n }\n }\n\n return false\n }\n\n /**\n * Filters nodes based on search term, including children that match\n */\n const filterNodes = (\n nodes: TreeNodeArray,\n term: string,\n searchParams?: string[],\n ): TreeNodeArray => {\n if (!term.trim()) return nodes\n\n const filtered: TreeNodeArray = []\n\n for (const node of nodes) {\n const nodeMatches = nodeMatchesSearch(node, term, searchParams)\n const filteredChildren = node.children ? filterNodes(node.children, term, searchParams) : []\n\n // Include node if it matches OR has matching children\n if (nodeMatches || filteredChildren.length > 0) {\n filtered.push({\n ...node,\n children: filteredChildren.length > 0 ? filteredChildren : node.children,\n })\n }\n }\n\n return filtered\n }\n\n /**\n * Sets the search term\n */\n const setSearchTerm = (term: string) => {\n searchTerm.value = term\n }\n\n /**\n * Clears the search term\n */\n const clearSearch = () => {\n searchTerm.value = ''\n }\n\n return {\n selectedNodes,\n selectedNodeObjects,\n expandedNodes,\n searchTerm,\n clearAllSelectedNodes,\n collapseAllExpandedNodes,\n isNodeSelected,\n isNodeExpanded,\n injectNode,\n selectAllChildren,\n deselectNode,\n deselectAllChildren,\n expandNode,\n collapseNode,\n expandAllChildren,\n findNodeById,\n hasChildrenNodes,\n isNodeIndeterminate,\n toggleSelectNode,\n toggleExpandNode,\n getNodeIcon,\n nodeMatchesSearch,\n filterNodes,\n setSearchTerm,\n clearSearch,\n }\n}\n\nexport default useTreeState\n","<script setup lang=\"ts\">\nimport { computed, inject, reactive, provide, watch } from 'vue'\nimport useTreeState from './useTreeState'\nimport type { TreeViewProps } from './types.ts'\n\ntype Props<T = Record<string, unknown>> = TreeViewProps<T>\n\nconst props = withDefaults(defineProps<Props>(), {\n nodes: () => [],\n depth: 0,\n showNodeDescription: false,\n showChildrenCount: false,\n expandChildrenOnSelect: false,\n showIndeterminate: false,\n expandChildrenOnParentCheck: false,\n expandAllChildrenOnParentCheck: true,\n showIndeterminateOnlyOnChildrenSelection: false,\n searchEnabled: false,\n searchExpandNodes: false,\n searchMatchParams: () => ['title', 'nodeId'],\n})\n\ndefineOptions({\n name: 'FdsTreeView',\n})\n\nconst isRootComponent = props.depth === 0\nconst injectedTreeState = inject<ReturnType<typeof useTreeState> | null>('treeState', null)\n\nlet treeState: ReturnType<typeof useTreeState>\nif (isRootComponent) {\n // This is the root component, create and provide treeState with props\n treeState = useTreeState({\n expandChildrenOnParentCheck: props.expandChildrenOnParentCheck,\n expandAllChildrenOnParentCheck: props.expandAllChildrenOnParentCheck,\n showIndeterminateOnlyOnChildrenSelection: props.showIndeterminateOnlyOnChildrenSelection,\n })\n provide('treeState', treeState)\n} else {\n // This is a child component, use injected treeState\n treeState = injectedTreeState!\n}\n\nconst expandedNodes = treeState?.expandedNodes ?? reactive(new Set())\n\nconst indentValue = props.depth * props.indentation\n\nconst indent = computed(() => ({\n display: 'flex',\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n transform: `translate(${indentValue}px)`,\n}))\n\nconst hasChildrenNodes = computed(() => {\n const nodesToCheck =\n props.searchEnabled && treeState?.searchTerm?.value ? filteredNodes.value : props.nodes\n return treeState?.hasChildrenNodes(nodesToCheck) ?? false\n})\n\nconst isIndeterminate = computed(\n () => treeState?.isNodeIndeterminate(props.nodes, props.nodeId) ?? false,\n)\n\nconst filteredNodes = computed(() => {\n if (!props.searchEnabled || !treeState?.searchTerm?.value) {\n return props.nodes\n }\n return treeState.filterNodes(props.nodes, treeState.searchTerm.value, props.searchMatchParams)\n})\n\n// Auto-expand nodes when searching\nwatch(\n () => treeState?.searchTerm?.value,\n (newSearchTerm) => {\n if (props.searchEnabled && props.searchExpandNodes && newSearchTerm && newSearchTerm.trim()) {\n // Expand all nodes that have matching children\n const expandMatchingNodes = (nodes: typeof props.nodes) => {\n nodes.forEach((node) => {\n if (node.children && node.children.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(node.children, newSearchTerm, props.searchMatchParams).length >\n 0\n if (hasMatchingChildren) {\n treeState?.expandNode(node.nodeId)\n }\n expandMatchingNodes(node.children)\n }\n })\n }\n\n // Auto-expand nodes that have matching children\n if (props.nodes && props.nodes.length > 0) {\n const hasMatchingChildren =\n treeState?.filterNodes(props.nodes, newSearchTerm, props.searchMatchParams).length > 0\n if (hasMatchingChildren) {\n treeState?.expandNode(props.nodeId)\n }\n }\n\n // Also expand individual child nodes recursively\n expandMatchingNodes(props.nodes)\n }\n },\n { immediate: false },\n)\n</script>\n\n<template>\n <div>\n <div v-if=\"isRootComponent && searchEnabled\" class=\"mb-4\">\n <fds-input\n :value=\"treeState?.searchTerm || ''\"\n @input=\"treeState?.setSearchTerm($event.target.value)\"\n class=\"w-full\"\n :label=\"searchLabel\"\n >\n <input id=\"tree-view-search-input\" />\n </fds-input>\n </div>\n\n <div :class=\"{ 'overflow-x-auto': isRootComponent }\">\n <div :class=\"{ 'bg-white-solid p-2 rounded-md min-w-max': isRootComponent }\">\n <div :style=\"indent\">\n <div class=\"flex\">\n <fds-icon\n v-if=\"hasChildrenNodes\"\n @click=\"treeState?.toggleExpandNode(props.nodeId, props.nodes)\"\n :name=\"\n treeState?.getNodeIcon(\n props.nodeId,\n props.nodes,\n props.nodeExpandIcon,\n props.nodeCollapseIcon,\n ) ?? props.nodeExpandIcon\n \"\n size=\"24px\"\n class=\"text-blue-500 mr-3\"\n style=\"margin-top: 3px\"\n />\n <div v-if=\"!hasChildrenNodes\" :style=\"{ width: `${indentation}px` }\" />\n\n <fds-checkbox class=\"pl-0 flex-1 flex items-center\">\n <input\n :id=\"`checkbox-${props.nodeId}`\"\n style=\"margin: 0px; margin-top: 3px\"\n type=\"checkbox\"\n :checked=\"treeState?.isNodeSelected(props.nodeId)\"\n :indeterminate=\"showIndeterminate && isIndeterminate\"\n @change=\"\n treeState?.toggleSelectNode(props.nodes, props.nodeId, props.title, props.data)\n \"\n />\n <label :for=\"`checkbox-${props.nodeId}`\" class=\"flex flex-col pl-0\">\n <div>\n <fds-text v-if=\"title\" type=\"default\">{{ title }}</fds-text>\n <span v-if=\"showChildrenCount && hasChildrenNodes\">\n (+{{ props.nodes.length }})\n </span>\n </div>\n <fds-text v-if=\"showNodeDescription\" type=\"meta\" class=\"flex-1\">\n {{ props.nodeId }}\n </fds-text>\n </label>\n </fds-checkbox>\n </div>\n </div>\n\n <div v-if=\"expandedNodes.has(props.nodeId)\">\n <FdsTreeView\n v-for=\"child in filteredNodes\"\n :key=\"child.nodeId\"\n :nodes=\"child.children || []\"\n :title=\"child.title\"\n :nodeId=\"child.nodeId\"\n :data=\"child.data\"\n :depth=\"props.depth + 1\"\n :indentation=\"props.indentation\"\n :nodeExpandIcon=\"props.nodeExpandIcon\"\n :nodeCollapseIcon=\"props.nodeCollapseIcon\"\n :showNodeDescription=\"showNodeDescription\"\n :showChildrenCount=\"showChildrenCount\"\n :expandChildrenOnSelect=\"expandChildrenOnSelect\"\n :showIndeterminate=\"showIndeterminate\"\n :showIndeterminateOnlyOnChildrenSelection=\"showIndeterminateOnlyOnChildrenSelection\"\n :expandChildrenOnParentCheck=\"expandChildrenOnParentCheck\"\n :expandAllChildrenOnParentCheck=\"expandAllChildrenOnParentCheck\"\n :searchEnabled=\"searchEnabled\"\n :searchExpandNodes=\"searchExpandNodes\"\n :searchMatchParams=\"searchMatchParams\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n","import type { App } from 'vue'\n\n// Import all components\nimport FdsTreeView from './components/fds-tree-view/FdsTreeView.vue'\n\n// Import composables\nimport useTreeState from './components/fds-tree-view/useTreeState'\n\n// Export individual components\nexport { FdsTreeView }\n\n// Export composables\nexport { useTreeState }\n\n// Export component library plugin\nexport default {\n install(app: App) {\n // Register all components globally\n app.component('FdsTreeView', FdsTreeView)\n },\n}\n\nexport type {\n TreeNode,\n TreeNodeArray,\n TreeNodeItem,\n TreeViewProps,\n NodeId,\n} from './components/fds-tree-view/types.js'\n\nimport type { TreeViewProps } from './components/fds-tree-view/types.js'\nexport type FdsTreeViewProps<T = Record<string, unknown>> = TreeViewProps<T>\n"],"names":["index","_createElementBlock","searchEnabled","_openBlock","_createElementVNode","_unref","searchLabel","indentation","showIndeterminate","title","_toDisplayString","showChildrenCount","showNodeDescription","_Fragment","_renderList","_createBlock","expandChildrenOnSelect","showIndeterminateOnlyOnChildrenSelection","expandChildrenOnParentCheck","expandAllChildrenOnParentCheck","searchExpandNodes","searchMatchParams","FdsTreeView"],"mappings":";AASA,MAAM,eAAe,CAAC,UAA4B,OAAO;AAIvD,QAAM,gBAAgB,SAAsB,oBAAI,KAAK;AAIrD,QAAM,sBAAsB,SAAqB,EAAE;AAInD,QAAM,gBAAgB,SAAsB,oBAAI,KAAK;AAIrD,QAAM,aAAa,IAAY,EAAE;AAKjC,QAAM,wBAAwB,MAAM;AAClC,kBAAc,MAAA;AACd,wBAAoB,SAAS;AAAA,EAC/B;AAKA,QAAM,2BAA2B,MAAM,cAAc,MAAA;AAKrD,QAAM,iBAAiB,CAAC,WAAmB,cAAc,IAAI,MAAM;AAKnE,QAAM,iBAAiB,CAAC,WAAmB,cAAc,IAAI,MAAM;AAKnE,QAAM,aAAa,CAAC,WAAmB,cAAc,IAAI,MAAM;AAK/D,QAAM,eAAe,CAAC,WAAmB,cAAc,OAAO,MAAM;AAMpE,QAAM,aAAa,CAAC,eAAyB;AAC3C,kBAAc,IAAI,WAAW,MAAM;AACnC,wBAAoB,KAAK,UAAU;AAAA,EACrC;AAKA,QAAM,oBAAoB,CAAC,SAAmB;AAC5C,eAAW,KAAK,MAAM;AACtB,QAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AAC7C,WAAK,SAAS,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACF;AAKA,QAAM,oBAAoB,CAAC,SAAmB;AAE5C,QAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AAC7C,WAAK,SAAS,QAAQ,mBAAmB;AAAA,IAC3C;AAGA,eAAW,IAAI;AAEf,QAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AAC7C,WAAK,SAAS,QAAQ,iBAAiB;AAAA,IACzC;AAGA,QAAI,QAAQ,6BAA6B;AACvC,wBAAkB,IAAI;AAAA,IACxB;AAAA,EACF;AAKA,QAAM,eAAe,CAAC,WAAmB;AACvC,kBAAc,OAAO,MAAM;AAC3B,UAAMA,SAAQ,oBAAoB,UAAU,CAAC,SAAS,KAAK,WAAW,MAAM;AAE5E,QAAIA,SAAQ,IAAI;AACd,0BAAoB,OAAOA,QAAO,CAAC;AAAA,IACrC;AAAA,EACF;AAKA,QAAM,sBAAsB,CAAC,SAAmB;AAE9C,iBAAa,KAAK,MAAM;AAGxB,QAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AAC7C,WAAK,SAAS,QAAQ,mBAAmB;AAAA,IAC3C;AAAA,EACF;AAKA,QAAM,eAAe,CAAC,OAAsB,WAAwC;AAClF,eAAW,QAAQ,OAAO;AACxB,UAAI,KAAK,WAAW,QAAQ;AAC1B,eAAO;AAAA,MACT;AACA,UAAI,KAAK,UAAU;AACjB,cAAM,QAAQ,aAAa,KAAK,UAAU,MAAM;AAChD,YAAI,MAAO,QAAO;AAAA,MACpB;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAKA,QAAM,mBAAmB,CAAC,UAAyB,MAAM,SAAS;AAKlE,QAAM,sBAAsB,CAAC,OAAsB,iBAAmC;AACpF,QAAI,CAAC,iBAAiB,KAAK,EAAG,QAAO;AAGrC,UAAM,cAAc,MAAM,IAAI,CAAC,UAAU;AAAA,MACvC,YAAY,cAAc,IAAI,KAAK,MAAM;AAAA,MACzC,iBACE,KAAK,YAAY,KAAK,SAAS,SAAS,IACpC,oBAAoB,KAAK,UAAU,KAAK,MAAM,IAC9C;AAAA,IAAA,EACN;AAEF,UAAM,cAAc,YAAY;AAAA,MAC9B,CAAC,UAA6D,MAAM;AAAA,IAAA;AAEtE,UAAM,gBAAgB,YAAY;AAAA,MAChC,CAAC,UACC,CAAC,MAAM,cAAc,CAAC,MAAM;AAAA,IAAA;AAEhC,UAAM,mBAAmB,YAAY;AAAA,MACnC,CAAC,UAA6D,MAAM;AAAA,IAAA;AAItE,QAAI,gBAAgB,cAAc,IAAI,YAAY,EAAG,QAAO;AAG5D,QAAI,CAAC,QAAQ,0CAA0C;AACrD,aAAQ,eAAe,iBAAkB;AAAA,IAC3C;AAGA,WAAO,eAAe;AAAA,EACxB;AAKA,QAAM,mBAAmB,CACvB,OACA,QACA,OACA,SACG;AACH,QAAI,OAAO,aAAa,OAAO,MAAM;AAErC,QAAI,CAAC,QAAQ,QAAQ;AACnB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,UAAU,SAAS,CAAA;AAAA,QACnB;AAAA,MAAA;AAAA,IAEJ;AAEA,QAAI,CAAC,KAAM;AAEX,QAAI,cAAc,IAAI,MAAM,GAAG;AAC7B,0BAAoB,IAAI;AAAA,IAC1B,OAAO;AACL,wBAAkB,IAAI;AAEtB,UACE,cAAc,IAAI,MAAM,KACxB,CAAC,cAAc,IAAI,MAAM,KACzB,QAAQ,6BACR;AACA,yBAAiB,QAAQ,KAAK;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAKA,QAAM,mBAAmB,CAAC,QAAgB,UAAyB;AACjE,QAAI,eAAe,MAAM,GAAG;AAC1B,mBAAa,MAAM;AAAA,IACrB,OAAO;AACL,UAAI,CAAC,iBAAiB,KAAK,EAAG;AAC9B,iBAAW,MAAM;AAAA,IACnB;AAAA,EACF;AAKA,QAAM,cAAc,CAClB,QACA,OACA,YACA,iBACG;AACH,WAAO,eAAe,MAAM,KAAK,iBAAiB,KAAK,IAAI,eAAe;AAAA,EAC5E;AAKA,QAAM,oBAAoB,CAAC,MAAgB,MAAc,iBAAqC;AAC5F,QAAI,CAAC,KAAK,KAAA,EAAQ,QAAO;AACzB,QAAI,CAAC,gBAAgB,CAAC,MAAM,QAAQ,YAAY,EAAG,QAAO;AAE1D,UAAM,cAAc,KAAK,YAAA;AAEzB,eAAW,SAAS,cAAc;AAChC,UAAI,UAAU,WAAW,KAAK,OAAO,cAAc,SAAS,WAAW,EAAG,QAAO;AACjF,UAAI,UAAU,YAAY,KAAK,OAAO,cAAc,SAAS,WAAW,EAAG,QAAO;AAGlF,UAAI,KAAK,QAAQ,OAAO,KAAK,SAAS,UAAU;AAC9C,cAAM,QAAS,KAAK,KAAiC,KAAK;AAC1D,YAAI,SAAS,OAAO,KAAK,EAAE,cAAc,SAAS,WAAW,EAAG,QAAO;AAAA,MACzE;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAKA,QAAM,cAAc,CAClB,OACA,MACA,iBACkB;AAClB,QAAI,CAAC,KAAK,KAAA,EAAQ,QAAO;AAEzB,UAAM,WAA0B,CAAA;AAEhC,eAAW,QAAQ,OAAO;AACxB,YAAM,cAAc,kBAAkB,MAAM,MAAM,YAAY;AAC9D,YAAM,mBAAmB,KAAK,WAAW,YAAY,KAAK,UAAU,MAAM,YAAY,IAAI,CAAA;AAG1F,UAAI,eAAe,iBAAiB,SAAS,GAAG;AAC9C,iBAAS,KAAK;AAAA,UACZ,GAAG;AAAA,UACH,UAAU,iBAAiB,SAAS,IAAI,mBAAmB,KAAK;AAAA,QAAA,CACjE;AAAA,MACH;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAKA,QAAM,gBAAgB,CAAC,SAAiB;AACtC,eAAW,QAAQ;AAAA,EACrB;AAKA,QAAM,cAAc,MAAM;AACxB,eAAW,QAAQ;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3UA,UAAM,QAAQ;AAmBd,UAAM,kBAAkB,MAAM,UAAU;AACxC,UAAM,oBAAoB,OAA+C,aAAa,IAAI;AAE1F,QAAI;AACJ,QAAI,iBAAiB;AAEnB,kBAAY,aAAa;AAAA,QACvB,6BAA6B,MAAM;AAAA,QACnC,gCAAgC,MAAM;AAAA,QACtC,0CAA0C,MAAM;AAAA,MAAA,CACjD;AACD,cAAQ,aAAa,SAAS;AAAA,IAChC,OAAO;AAEL,kBAAY;AAAA,IACd;AAEA,UAAM,gBAAgB,WAAW,iBAAiB,SAAS,oBAAI,KAAK;AAEpE,UAAM,cAAc,MAAM,QAAQ,MAAM;AAExC,UAAM,SAAS,SAAS,OAAO;AAAA,MAC7B,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,WAAW,aAAa,WAAW;AAAA,IAAA,EACnC;AAEF,UAAM,mBAAmB,SAAS,MAAM;AACtC,YAAM,eACJ,MAAM,iBAAiB,WAAW,YAAY,QAAQ,cAAc,QAAQ,MAAM;AACpF,aAAO,WAAW,iBAAiB,YAAY,KAAK;AAAA,IACtD,CAAC;AAED,UAAM,kBAAkB;AAAA,MACtB,MAAM,WAAW,oBAAoB,MAAM,OAAO,MAAM,MAAM,KAAK;AAAA,IAAA;AAGrE,UAAM,gBAAgB,SAAS,MAAM;AACnC,UAAI,CAAC,MAAM,iBAAiB,CAAC,WAAW,YAAY,OAAO;AACzD,eAAO,MAAM;AAAA,MACf;AACA,aAAO,UAAU,YAAY,MAAM,OAAO,UAAU,WAAW,OAAO,MAAM,iBAAiB;AAAA,IAC/F,CAAC;AAGD;AAAA,MACE,MAAM,WAAW,YAAY;AAAA,MAC7B,CAAC,kBAAkB;AACjB,YAAI,MAAM,iBAAiB,MAAM,qBAAqB,iBAAiB,cAAc,QAAQ;AAE3F,gBAAM,sBAAsB,CAAC,UAA8B;AACzD,kBAAM,QAAQ,CAAC,SAAS;AACtB,kBAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AAC7C,sBAAM,sBACJ,WAAW,YAAY,KAAK,UAAU,eAAe,MAAM,iBAAiB,EAAE,SAC9E;AACF,oBAAI,qBAAqB;AACvB,6BAAW,WAAW,KAAK,MAAM;AAAA,gBACnC;AACA,oCAAoB,KAAK,QAAQ;AAAA,cACnC;AAAA,YACF,CAAC;AAAA,UACH;AAGA,cAAI,MAAM,SAAS,MAAM,MAAM,SAAS,GAAG;AACzC,kBAAM,sBACJ,WAAW,YAAY,MAAM,OAAO,eAAe,MAAM,iBAAiB,EAAE,SAAS;AACvF,gBAAI,qBAAqB;AACvB,yBAAW,WAAW,MAAM,MAAM;AAAA,YACpC;AAAA,UACF;AAGA,8BAAoB,MAAM,KAAK;AAAA,QACjC;AAAA,MACF;AAAA,MACA,EAAE,WAAW,MAAA;AAAA,IAAM;;;0BAKnBC,mBAqFM,OAAA,MAAA;AAAA,QApFO,mBAAmBC,KAAAA,iBAA9BC,aAAAF,mBASM,OATN,YASM;AAAA,UARJG,mBAOY,aAAA;AAAA,YANT,OAAOC,MAAA,SAAA,GAAW,cAAU;AAAA,YAC5B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEA,kBAAW,cAAc,OAAO,OAAO,KAAK;AAAA,YACpD,OAAM;AAAA,YACL,OAAOC,KAAAA;AAAAA,UAAAA;YAERF,mBAAqC,SAAA,EAA9B,IAAG,yBAAA,GAAwB,MAAA,EAAA;AAAA,UAAA;;QAItCA,mBAwEM,OAAA;AAAA,UAxEA,2CAA4B,iBAAe;AAAA,QAAA;UAC/CA,mBAsEM,OAAA;AAAA,YAtEA,mEAAoD,iBAAe;AAAA,UAAA;YACvEA,mBA2CM,OAAA;AAAA,cA3CA,sBAAO,OAAA,KAAM;AAAA,YAAA;cACjBA,mBAyCM,OAzCN,YAyCM;AAAA,gBAvCI,iBAAA,sBADRH,mBAcE,YAAA;AAAA;kBAZC,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEI,MAAA,SAAA,GAAW,iBAAiB,MAAM,QAAQ,MAAM,KAAK;AAAA,kBAC5D,MAAuBA,MAAA,SAAA,GAAW;AAAA,oBAA+B,MAAM;AAAA,oBAA0B,MAAM;AAAA,oBAAyB,MAAM;AAAA,oBAAkC,MAAM;AAAA,kBAAA,KAAuC,MAAM;AAAA,kBAQ5N,MAAK;AAAA,kBACL,OAAM;AAAA,kBACN,OAAA,EAAA,cAAA,MAAA;AAAA,gBAAA;iBAEU,iBAAA,sBAAZJ,mBAAuE,OAAA;AAAA;kBAAxC,kCAAmBM,KAAAA,WAAW,MAAA;AAAA,gBAAA;gBAE7DH,mBAsBe,gBAtBf,YAsBe;AAAA,kBArBbA,mBASE,SAAA;AAAA,oBARC,IAAE,YAAc,MAAM,MAAM;AAAA,oBAC7B,OAAA,EAAA,UAAA,OAAA,cAAA,MAAA;AAAA,oBACA,MAAK;AAAA,oBACJ,SAASC,MAAA,SAAA,GAAW,eAAe,MAAM,MAAM;AAAA,oBAC/C,eAAeG,KAAAA,qBAAqB,gBAAA;AAAA,oBACpC,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAqBH,MAAA,SAAA,GAAW,iBAAiB,MAAM,OAAO,MAAM,QAAQ,MAAM,OAAO,MAAM,IAAI;AAAA,kBAAA;kBAI5GD,mBAUQ,SAAA;AAAA,oBAVA,KAAG,YAAc,MAAM,MAAM;AAAA,oBAAI,OAAM;AAAA,kBAAA;oBAC7CA,mBAKM,OAAA,MAAA;AAAA,sBAJYK,KAAAA,sBAAhBR,mBAA4D,YAA5D,YAA4DS,gBAAnBD,KAAAA,KAAK,GAAA,CAAA;sBAClCE,KAAAA,qBAAqB,iBAAA,sBAAjCV,mBAEO,QAAA,YAF4C,QAC/CS,gBAAG,MAAM,MAAM,MAAM,IAAG,MAC5B,CAAA;;oBAEcE,KAAAA,uBAAhBT,UAAA,GAAAF,mBAEW,YAFX,aAEWS,gBADN,MAAM,MAAM,GAAA,CAAA;;;;;YAOdL,MAAA,aAAA,EAAc,IAAI,MAAM,MAAM,kBAAzCJ,mBAuBM,OAAA,aAAA;AAAA,gCAtBJA,mBAqBEY,UAAA,MAAAC,WApBgB,cAAA,OAAa,CAAtB,UAAK;oCADdC,YAqBE,wBAAA;AAAA,kBAnBC,KAAK,MAAM;AAAA,kBACX,OAAO,MAAM,YAAQ,CAAA;AAAA,kBACrB,OAAO,MAAM;AAAA,kBACb,QAAQ,MAAM;AAAA,kBACd,MAAM,MAAM;AAAA,kBACZ,OAAO,MAAM,QAAK;AAAA,kBAClB,aAAa,MAAM;AAAA,kBACnB,gBAAgB,MAAM;AAAA,kBACtB,kBAAkB,MAAM;AAAA,kBACxB,qBAAqBH,KAAAA;AAAAA,kBACrB,mBAAmBD,KAAAA;AAAAA,kBACnB,wBAAwBK,KAAAA;AAAAA,kBACxB,mBAAmBR,KAAAA;AAAAA,kBACnB,0CAA0CS,KAAAA;AAAAA,kBAC1C,6BAA6BC,KAAAA;AAAAA,kBAC7B,gCAAgCC,KAAAA;AAAAA,kBAChC,eAAejB,KAAAA;AAAAA,kBACf,mBAAmBkB,KAAAA;AAAAA,kBACnB,mBAAmBC,KAAAA;AAAAA,gBAAAA;;;;;;;;;AC9KhC,MAAA,QAAe;AAAA,EACb,QAAQ,KAAU;AAEhB,QAAI,UAAU,eAAeC,SAAW;AAAA,EAC1C;AACF;"}
|