fds-vue-core 1.0.0

package/README.md

@@ -0,0 +1,192 @@
+# FDS Vue Core
+
+A Vue 3 component library with FDS Core integration, built with TypeScript for excellent developer experience.
+
+## Installation
+
+```bash
+yarn add fds-vue-core
+```
+
+## Peer Dependencies
+
+Make sure you have the required peer dependencies installed:
+
+```bash
+npm install vue@^3.5.0 fds-core@^3.8.0
+```
+
+## Styling
+
+This library is **style-free** and designed to work with your existing CSS framework. The components use standard HTML classes that you can style with:
+
+- **Tailwind CSS** (recommended)
+- **CSS Modules**
+- **Styled Components**
+- **Any CSS framework**
+
+The components will inherit your project's styling automatically.
+
+## Usage
+
+### Global Registration
+
+```typescript
+import { createApp } from 'vue'
+import FdsVueCore from 'fds-vue-core'
+
+const app = createApp(App)
+app.use(FdsVueCore)
+app.mount('#app')
+```
+
+### Individual Component Import
+
+```typescript
+import { FdsTreeView } from 'fds-vue-core'
+import 'fds-vue-core/style.css'
+```
+
+## Components
+
+### FdsTreeView
+
+A hierarchical tree view component with full TypeScript support.
+
+#### Basic Usage
+
+```vue
+<template>
+  <FdsTreeView
+    :nodes="treeData"
+    :nodeId="'root'"
+    :nodeExpandIcon="'arrowDown'"
+    :nodeCollapseIcon="'arrowUp'"
+    :indentation="20"
+    :showNodeDescription="true"
+    :showChildrenCount="true"
+    :showIndeterminate="true"
+  />
+</template>
+
+<script setup lang="ts">
+import { FdsTreeView, type TreeNode } from 'fds-vue-core'
+
+const treeData: TreeNode[] = [
+  {
+    nodeId: 'root-1',
+    title: 'Documents',
+    children: [
+      {
+        nodeId: 'doc-1',
+        title: 'Work',
+        children: [
+          {
+            nodeId: 'work-1',
+            title: 'Projects',
+            data: { type: 'folder', count: 5 }
+          }
+        ]
+      }
+    ]
+  }
+]
+</script>
+```
+
+#### TypeScript Support
+
+The library provides full TypeScript support with comprehensive type definitions:
+
+```typescript
+import type {
+  TreeNode,
+  TreeNodeArray,
+  TreeNodeItem,
+  TreeViewProps,
+  NodeId,
+  TreeViewEvents,
+  ComponentSize,
+  ComponentVariant
+} from 'fds-vue-core'
+
+// Typed tree data
+interface ProjectData {
+  type: 'project'
+  status: 'active' | 'completed' | 'planning'
+  priority: number
+}
+
+const typedTreeData: TreeNode<ProjectData>[] = [
+  {
+    nodeId: 'proj-1',
+    title: 'My Project',
+    data: {
+      type: 'project',
+      status: 'active',
+      priority: 1
+    }
+  }
+]
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `nodes` | `TreeNode[]` | `[]` | Array of tree nodes |
+| `nodeId` | `string` | - | Unique identifier for the current node |
+| `nodeExpandIcon` | `string` | - | Icon name for expanded state |
+| `nodeCollapseIcon` | `string` | - | Icon name for collapsed state |
+| `indentation` | `number` | - | Indentation level in pixels |
+| `showNodeDescription` | `boolean` | `false` | Show node descriptions |
+| `showChildrenCount` | `boolean` | `false` | Show children count |
+| `showIndeterminate` | `boolean` | `false` | Show indeterminate state for partial selections |
+
+#### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `node-select` | `TreeNode` | Fired when a node is selected |
+| `node-expand` | `TreeNode` | Fired when a node is expanded |
+| `node-collapse` | `TreeNode` | Fired when a node is collapsed |
+| `selection-change` | `TreeNode[]` | Fired when selection changes |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build library
+npm run build
+
+# Type checking
+npm run type-check
+
+# Linting
+npm run lint
+```
+
+## Building for Production
+
+```bash
+npm run build
+```
+
+This will generate:
+- `dist/fds-vue-core.es.js` - ES module build
+- `dist/fds-vue-core.cjs.js` - CommonJS build
+- `dist/index.d.ts` - TypeScript declarations
+- `dist/style.css` - Styles
+
+## TypeScript
+
+This library is built with TypeScript and provides comprehensive type definitions. All components, props, events, and utilities are fully typed for excellent developer experience.
+
+## License
+
+MIT

package/dist/App.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=App.vue.d.ts.map

package/dist/App.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.vue.d.ts","sourceRoot":"","sources":["../src/App.vue"],"names":[],"mappings":";AAwSA,wBACG"}

package/dist/components/fds-tree-view/FdsTreeView.vue.d.ts

@@ -0,0 +1,12 @@
+import type { TreeNode, TreeViewProps } from './types';
+type Props<T = Record<string, unknown>> = TreeViewProps<T>;
+type __VLS_Props = Props;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    nodes: TreeNode<Record<string, unknown>>[];
+    depth: number;
+    showNodeDescription: boolean;
+    showChildrenCount: boolean;
+    expandChildrenOnSelect: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=FdsTreeView.vue.d.ts.map

package/dist/components/fds-tree-view/FdsTreeView.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FdsTreeView.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fds-tree-view/FdsTreeView.vue"],"names":[],"mappings":"AAyMA,OAAO,KAAK,EAAE,QAAQ,EAA+B,aAAa,EAAE,MAAM,SAAS,CAAA;AAEnF,KAAK,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAA;AAE1D,KAAK,WAAW,GAAG,KAAK,CAAC;;;;;;;;AA2WzB,wBAGG"}

package/dist/components/fds-tree-view/useTreeState.d.ts

@@ -0,0 +1,18 @@
+import type { TreeNode, NodeId } from './types';
+declare const useTreeState: () => {
+    selectedNodes: import("vue").Reactive<Set<string>>;
+    selectedNodeObjects: import("vue").Reactive<TreeNode<Record<string, unknown>>[]>;
+    expandedNodes: import("vue").Reactive<Set<string>>;
+    clearSelection: () => void;
+    clearExpanded: () => void;
+    isSelected: (nodeId: NodeId) => boolean;
+    isExpanded: (nodeId: NodeId) => boolean;
+    select: (nodeObject: TreeNode) => void;
+    selectAllChildren: (node: TreeNode) => void;
+    deselect: (nodeId: NodeId) => void;
+    deselectAllChildren: (node: TreeNode) => void;
+    expand: (nodeId: NodeId) => import("vue").Reactive<Set<string>>;
+    collapse: (nodeId: NodeId) => boolean;
+};
+export default useTreeState;
+//# sourceMappingURL=useTreeState.d.ts.map

package/dist/components/fds-tree-view/useTreeState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeState.d.ts","sourceRoot":"","sources":["../../../src/components/fds-tree-view/useTreeState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAE/C,QAAA,MAAM,YAAY;;;;;;yBAWY,MAAM;yBACN,MAAM;yBAEN,QAAQ;8BAKH,QAAQ;uBAaf,MAAM;gCAQG,QAAQ;qBAUnB,MAAM;uBACJ,MAAM;CAiBjC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/fds-vue-core.cjs.js

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const _hoisted_1 = { class: "bg-white-solid p-2 rounded-md" };
+const _hoisted_2 = { class: "flex" };
+const _hoisted_3 = ["name"];
+const _hoisted_4 = { class: "pl-0 flex-1 flex items-center" };
+const _hoisted_5 = ["id", "checked", "indeterminate"];
+const _hoisted_6 = ["for"];
+const _hoisted_7 = {
+  key: 0,
+  type: "default"
+};
+const _hoisted_8 = { key: 1 };
+const _hoisted_9 = {
+  key: 0,
+  type: "meta",
+  class: "flex-1"
+};
+const _hoisted_10 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "FdsTreeView",
+  props: {
+    nodes: { default: () => [] },
+    depth: { default: 0 },
+    nodeExpandIcon: {},
+    nodeCollapseIcon: {},
+    indentation: {},
+    nodeId: {},
+    data: {},
+    title: {},
+    showNodeDescription: { type: Boolean, default: false },
+    showChildrenCount: { type: Boolean, default: false },
+    expandChildrenOnSelect: { type: Boolean, default: false },
+    showIndeterminate: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const treeState = vue.inject("treeState", null);
+    const selectedNodes = treeState?.selectedNodes ?? vue.reactive(/* @__PURE__ */ new Set());
+    const expandedNodes = treeState?.expandedNodes ?? vue.reactive(/* @__PURE__ */ new Set());
+    const indentValue = props.depth * props.indentation;
+    const indent = vue.computed(() => ({
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      transform: `translate(${indentValue}px)`
+    }));
+    const hasChildrenNodes = vue.computed(() => props.nodes.length > 0);
+    const isIndeterminate = vue.computed(() => {
+      if (!hasChildrenNodes.value) return false;
+      let selectedCount = 0;
+      const totalCount = props.nodes.length;
+      props.nodes.forEach((node) => {
+        if (selectedNodes.has(node.nodeId)) {
+          selectedCount++;
+        }
+      });
+      return selectedCount > 0 && selectedCount < totalCount;
+    });
+    const selectAllChildren = (node) => {
+      if (treeState?.selectAllChildren) {
+        treeState.selectAllChildren(node);
+      } else {
+        selectedNodes.add(node.nodeId);
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(selectAllChildren);
+        }
+      }
+      expandAll(node);
+    };
+    const deselectAllChildren = (node) => {
+      if (treeState?.deselectAllChildren) {
+        treeState.deselectAllChildren(node);
+      } else {
+        selectedNodes.delete(node.nodeId);
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(deselectAllChildren);
+        }
+      }
+    };
+    const expandAll = (node) => {
+      treeState?.expand(node.nodeId);
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(expandAll);
+      }
+    };
+    const handleSelectNode = () => {
+      let node = findNodeById(props.nodes, props.nodeId);
+      if (!node && props.nodeId) {
+        node = {
+          nodeId: props.nodeId,
+          title: props.title,
+          children: props.nodes || [],
+          data: props.data
+        };
+      }
+      if (!node) return;
+      if (selectedNodes.has(props.nodeId)) {
+        deselectAllChildren(node);
+      } else {
+        selectAllChildren(node);
+        if (selectedNodes.has(props.nodeId) && !expandedNodes.has(props.nodeId)) {
+          handleExpandNode(props.nodeId);
+        }
+      }
+    };
+    const handleExpandNode = (nodeId) => {
+      if (treeState) {
+        if (treeState.isExpanded(nodeId)) {
+          treeState.collapse(nodeId);
+        } else {
+          if (!hasChildrenNodes.value) return;
+          treeState.expand(nodeId);
+        }
+        return;
+      }
+      if (expandedNodes.has(nodeId)) {
+        expandedNodes.delete(nodeId);
+      } else {
+        if (!hasChildrenNodes.value) return;
+        expandedNodes.add(nodeId);
+      }
+    };
+    const findNodeById = (nodes, nodeId) => {
+      for (const node of nodes) {
+        if (node.nodeId === nodeId) {
+          return node;
+        }
+        if (node.children) {
+          const found = findNodeById(node.children, nodeId);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    const getNodeIcon = () => treeState?.isExpanded(props.nodeId) && hasChildrenNodes.value ? props.nodeCollapseIcon : props.nodeExpandIcon;
+    return (_ctx, _cache) => {
+      const _component_FdsTreeView = vue.resolveComponent("FdsTreeView", true);
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("div", _hoisted_1, [
+          vue.createElementVNode("div", {
+            style: vue.normalizeStyle(indent.value)
+          }, [
+            vue.createElementVNode("div", _hoisted_2, [
+              hasChildrenNodes.value ? (vue.openBlock(), vue.createElementBlock("fds-icon", {
+                key: 0,
+                onClick: _cache[0] || (_cache[0] = ($event) => handleExpandNode(props.nodeId)),
+                name: getNodeIcon(),
+                size: "24px",
+                class: "text-blue-500 mr-3",
+                style: { "margin-top": "3px" }
+              }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true),
+              !hasChildrenNodes.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                style: vue.normalizeStyle({ width: `${_ctx.indentation}px` })
+              }, null, 4)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("fds-checkbox", _hoisted_4, [
+                vue.createElementVNode("input", {
+                  id: `checkbox-${props.nodeId}`,
+                  style: { "margin": "0px", "margin-top": "3px" },
+                  type: "checkbox",
+                  checked: vue.unref(treeState)?.isSelected(props.nodeId),
+                  indeterminate: _ctx.showIndeterminate && isIndeterminate.value,
+                  onChange: handleSelectNode
+                }, null, 40, _hoisted_5),
+                vue.createElementVNode("label", {
+                  for: `checkbox-${props.nodeId}`,
+                  class: "flex flex-col pl-0"
+                }, [
+                  vue.createElementVNode("div", null, [
+                    _ctx.title ? (vue.openBlock(), vue.createElementBlock("fds-text", _hoisted_7, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true),
+                    _ctx.showChildrenCount && hasChildrenNodes.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, " (+" + vue.toDisplayString(props.nodes.length) + ") ", 1)) : vue.createCommentVNode("", true)
+                  ]),
+                  _ctx.showNodeDescription ? (vue.openBlock(), vue.createElementBlock("fds-text", _hoisted_9, vue.toDisplayString(props.nodeId), 1)) : vue.createCommentVNode("", true)
+                ], 8, _hoisted_6)
+              ])
+            ])
+          ], 4)
+        ]),
+        vue.unref(expandedNodes).has(props.nodeId) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.nodes, (child) => {
+            return vue.openBlock(), vue.createBlock(_component_FdsTreeView, {
+              key: child.nodeId,
+              nodes: child.children || [],
+              title: child.title,
+              nodeId: child.nodeId,
+              data: child.data,
+              depth: props.depth + 1,
+              indentation: props.indentation,
+              nodeExpandIcon: props.nodeExpandIcon,
+              nodeCollapseIcon: props.nodeCollapseIcon,
+              showNodeDescription: _ctx.showNodeDescription,
+              showChildrenCount: _ctx.showChildrenCount,
+              expandChildrenOnSelect: _ctx.expandChildrenOnSelect,
+              showIndeterminate: _ctx.showIndeterminate
+            }, null, 8, ["nodes", "title", "nodeId", "data", "depth", "indentation", "nodeExpandIcon", "nodeCollapseIcon", "showNodeDescription", "showChildrenCount", "expandChildrenOnSelect", "showIndeterminate"]);
+          }), 128))
+        ])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const index = {
+  install(app) {
+    app.component("FdsTreeView", _sfc_main);
+  }
+};
+exports.FdsTreeView = _sfc_main;
+exports.default = index;
+//# sourceMappingURL=fds-vue-core.cjs.js.map

package/dist/fds-vue-core.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fds-vue-core.cjs.js","sources":["../src/components/fds-tree-view/FdsTreeView.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, reactive } from 'vue'\nimport useTreeState from './useTreeState'\nimport type { TreeNode, TreeNodeArray, TreeNodeItem, TreeViewProps } from './types'\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})\n\nconst treeState = inject<ReturnType<typeof useTreeState> | null>('treeState', null)\nconst selectedNodes = treeState?.selectedNodes ?? reactive(new Set())\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(() => props.nodes.length > 0)\n\nconst isIndeterminate = computed(() => {\n  if (!hasChildrenNodes.value) return false\n\n  let selectedCount = 0\n  const totalCount = props.nodes.length\n\n  props.nodes.forEach((node) => {\n    if (selectedNodes.has(node.nodeId)) {\n      selectedCount++\n    }\n  })\n\n  return selectedCount > 0 && selectedCount < totalCount\n})\n\nconst selectAllChildren = (node: TreeNodeItem) => {\n  if (treeState?.selectAllChildren) {\n    treeState.selectAllChildren(node)\n  } else {\n    selectedNodes.add(node.nodeId)\n    if (node.children && node.children.length > 0) {\n      node.children.forEach(selectAllChildren)\n    }\n  }\n  expandAll(node)\n}\n\nconst deselectAllChildren = (node: TreeNodeItem) => {\n  if (treeState?.deselectAllChildren) {\n    treeState.deselectAllChildren(node)\n  } else {\n    selectedNodes.delete(node.nodeId)\n    if (node.children && node.children.length > 0) {\n      node.children.forEach(deselectAllChildren)\n    }\n  }\n}\n\nconst expandAll = (node: TreeNodeItem) => {\n  treeState?.expand(node.nodeId)\n  if (node.children && node.children.length > 0) {\n    node.children.forEach(expandAll)\n  }\n}\n\nconst handleSelectNode = () => {\n  let node = findNodeById(props.nodes, props.nodeId)\n\n  if (!node && props.nodeId) {\n    node = {\n      nodeId: props.nodeId,\n      title: props.title,\n      children: props.nodes || [],\n      data: props.data,\n    }\n  }\n\n  if (!node) return\n\n  if (selectedNodes.has(props.nodeId)) {\n    deselectAllChildren(node)\n  } else {\n    selectAllChildren(node)\n\n    if (selectedNodes.has(props.nodeId) && !expandedNodes.has(props.nodeId)) {\n      handleExpandNode(props.nodeId)\n    }\n  }\n}\n\nconst handleExpandNode = (nodeId: TreeNode['nodeId']) => {\n  if (treeState) {\n    if (treeState.isExpanded(nodeId)) {\n      treeState.collapse(nodeId)\n    } else {\n      if (!hasChildrenNodes.value) return\n      treeState.expand(nodeId)\n    }\n    return\n  }\n\n  if (expandedNodes.has(nodeId)) {\n    expandedNodes.delete(nodeId)\n  } else {\n    if (!hasChildrenNodes.value) return\n    expandedNodes.add(nodeId)\n  }\n}\n\nconst 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\nconst getNodeIcon = () =>\n  treeState?.isExpanded(props.nodeId) && hasChildrenNodes.value\n    ? props.nodeCollapseIcon\n    : props.nodeExpandIcon\n</script>\n\n<template>\n  <div>\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=\"handleExpandNode(props.nodeId)\"\n            :name=\"getNodeIcon()\"\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?.isSelected(props.nodeId)\"\n              :indeterminate=\"showIndeterminate && isIndeterminate\"\n              @change=\"handleSelectNode\"\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 props.nodes\"\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      />\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// Export individual components\nexport { FdsTreeView }\n\n// Export component library plugin\nexport default {\n  install(app: App) {\n    // Register all components globally\n    app.component('FdsTreeView', FdsTreeView)\n\n    // You can add global properties here if needed\n    // app.config.globalProperties.$fds = { ... }\n  },\n}\n\n// Export all types for consumers\nexport * from './types'\n\n// Re-export component types for convenience\nexport type {\n  TreeNode,\n  TreeNodeArray,\n  TreeNodeItem,\n  TreeViewProps,\n  NodeId,\n} from './components/fds-tree-view/types'\n"],"names":["inject","reactive","computed","_createElementBlock","_createElementVNode","indentation","_unref","showIndeterminate","title","_toDisplayString","showChildrenCount","showNodeDescription","_openBlock","_Fragment","_renderList","_createBlock","expandChildrenOnSelect","FdsTreeView"],"mappings":"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"}

package/dist/fds-vue-core.es.js

@@ -0,0 +1,211 @@
+import { defineComponent, inject, reactive, computed, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeStyle, unref, toDisplayString, Fragment, renderList, createBlock } from "vue";
+const _hoisted_1 = { class: "bg-white-solid p-2 rounded-md" };
+const _hoisted_2 = { class: "flex" };
+const _hoisted_3 = ["name"];
+const _hoisted_4 = { class: "pl-0 flex-1 flex items-center" };
+const _hoisted_5 = ["id", "checked", "indeterminate"];
+const _hoisted_6 = ["for"];
+const _hoisted_7 = {
+  key: 0,
+  type: "default"
+};
+const _hoisted_8 = { key: 1 };
+const _hoisted_9 = {
+  key: 0,
+  type: "meta",
+  class: "flex-1"
+};
+const _hoisted_10 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FdsTreeView",
+  props: {
+    nodes: { default: () => [] },
+    depth: { default: 0 },
+    nodeExpandIcon: {},
+    nodeCollapseIcon: {},
+    indentation: {},
+    nodeId: {},
+    data: {},
+    title: {},
+    showNodeDescription: { type: Boolean, default: false },
+    showChildrenCount: { type: Boolean, default: false },
+    expandChildrenOnSelect: { type: Boolean, default: false },
+    showIndeterminate: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const treeState = inject("treeState", null);
+    const selectedNodes = treeState?.selectedNodes ?? reactive(/* @__PURE__ */ new Set());
+    const expandedNodes = treeState?.expandedNodes ?? reactive(/* @__PURE__ */ new Set());
+    const indentValue = props.depth * props.indentation;
+    const indent = computed(() => ({
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      transform: `translate(${indentValue}px)`
+    }));
+    const hasChildrenNodes = computed(() => props.nodes.length > 0);
+    const isIndeterminate = computed(() => {
+      if (!hasChildrenNodes.value) return false;
+      let selectedCount = 0;
+      const totalCount = props.nodes.length;
+      props.nodes.forEach((node) => {
+        if (selectedNodes.has(node.nodeId)) {
+          selectedCount++;
+        }
+      });
+      return selectedCount > 0 && selectedCount < totalCount;
+    });
+    const selectAllChildren = (node) => {
+      if (treeState?.selectAllChildren) {
+        treeState.selectAllChildren(node);
+      } else {
+        selectedNodes.add(node.nodeId);
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(selectAllChildren);
+        }
+      }
+      expandAll(node);
+    };
+    const deselectAllChildren = (node) => {
+      if (treeState?.deselectAllChildren) {
+        treeState.deselectAllChildren(node);
+      } else {
+        selectedNodes.delete(node.nodeId);
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(deselectAllChildren);
+        }
+      }
+    };
+    const expandAll = (node) => {
+      treeState?.expand(node.nodeId);
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(expandAll);
+      }
+    };
+    const handleSelectNode = () => {
+      let node = findNodeById(props.nodes, props.nodeId);
+      if (!node && props.nodeId) {
+        node = {
+          nodeId: props.nodeId,
+          title: props.title,
+          children: props.nodes || [],
+          data: props.data
+        };
+      }
+      if (!node) return;
+      if (selectedNodes.has(props.nodeId)) {
+        deselectAllChildren(node);
+      } else {
+        selectAllChildren(node);
+        if (selectedNodes.has(props.nodeId) && !expandedNodes.has(props.nodeId)) {
+          handleExpandNode(props.nodeId);
+        }
+      }
+    };
+    const handleExpandNode = (nodeId) => {
+      if (treeState) {
+        if (treeState.isExpanded(nodeId)) {
+          treeState.collapse(nodeId);
+        } else {
+          if (!hasChildrenNodes.value) return;
+          treeState.expand(nodeId);
+        }
+        return;
+      }
+      if (expandedNodes.has(nodeId)) {
+        expandedNodes.delete(nodeId);
+      } else {
+        if (!hasChildrenNodes.value) return;
+        expandedNodes.add(nodeId);
+      }
+    };
+    const findNodeById = (nodes, nodeId) => {
+      for (const node of nodes) {
+        if (node.nodeId === nodeId) {
+          return node;
+        }
+        if (node.children) {
+          const found = findNodeById(node.children, nodeId);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    const getNodeIcon = () => treeState?.isExpanded(props.nodeId) && hasChildrenNodes.value ? props.nodeCollapseIcon : props.nodeExpandIcon;
+    return (_ctx, _cache) => {
+      const _component_FdsTreeView = resolveComponent("FdsTreeView", true);
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            style: normalizeStyle(indent.value)
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              hasChildrenNodes.value ? (openBlock(), createElementBlock("fds-icon", {
+                key: 0,
+                onClick: _cache[0] || (_cache[0] = ($event) => handleExpandNode(props.nodeId)),
+                name: getNodeIcon(),
+                size: "24px",
+                class: "text-blue-500 mr-3",
+                style: { "margin-top": "3px" }
+              }, null, 8, _hoisted_3)) : createCommentVNode("", true),
+              !hasChildrenNodes.value ? (openBlock(), createElementBlock("div", {
+                key: 1,
+                style: normalizeStyle({ width: `${_ctx.indentation}px` })
+              }, null, 4)) : createCommentVNode("", true),
+              createElementVNode("fds-checkbox", _hoisted_4, [
+                createElementVNode("input", {
+                  id: `checkbox-${props.nodeId}`,
+                  style: { "margin": "0px", "margin-top": "3px" },
+                  type: "checkbox",
+                  checked: unref(treeState)?.isSelected(props.nodeId),
+                  indeterminate: _ctx.showIndeterminate && isIndeterminate.value,
+                  onChange: handleSelectNode
+                }, null, 40, _hoisted_5),
+                createElementVNode("label", {
+                  for: `checkbox-${props.nodeId}`,
+                  class: "flex flex-col pl-0"
+                }, [
+                  createElementVNode("div", null, [
+                    _ctx.title ? (openBlock(), createElementBlock("fds-text", _hoisted_7, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+                    _ctx.showChildrenCount && hasChildrenNodes.value ? (openBlock(), createElementBlock("span", _hoisted_8, " (+" + toDisplayString(props.nodes.length) + ") ", 1)) : createCommentVNode("", true)
+                  ]),
+                  _ctx.showNodeDescription ? (openBlock(), createElementBlock("fds-text", _hoisted_9, toDisplayString(props.nodeId), 1)) : createCommentVNode("", true)
+                ], 8, _hoisted_6)
+              ])
+            ])
+          ], 4)
+        ]),
+        unref(expandedNodes).has(props.nodeId) ? (openBlock(), createElementBlock("div", _hoisted_10, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.nodes, (child) => {
+            return openBlock(), createBlock(_component_FdsTreeView, {
+              key: child.nodeId,
+              nodes: child.children || [],
+              title: child.title,
+              nodeId: child.nodeId,
+              data: child.data,
+              depth: props.depth + 1,
+              indentation: props.indentation,
+              nodeExpandIcon: props.nodeExpandIcon,
+              nodeCollapseIcon: props.nodeCollapseIcon,
+              showNodeDescription: _ctx.showNodeDescription,
+              showChildrenCount: _ctx.showChildrenCount,
+              expandChildrenOnSelect: _ctx.expandChildrenOnSelect,
+              showIndeterminate: _ctx.showIndeterminate
+            }, null, 8, ["nodes", "title", "nodeId", "data", "depth", "indentation", "nodeExpandIcon", "nodeCollapseIcon", "showNodeDescription", "showChildrenCount", "expandChildrenOnSelect", "showIndeterminate"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const index = {
+  install(app) {
+    app.component("FdsTreeView", _sfc_main);
+  }
+};
+export {
+  _sfc_main as FdsTreeView,
+  index as default
+};
+//# sourceMappingURL=fds-vue-core.es.js.map

package/dist/fds-vue-core.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fds-vue-core.es.js","sources":["../src/components/fds-tree-view/FdsTreeView.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, reactive } from 'vue'\nimport useTreeState from './useTreeState'\nimport type { TreeNode, TreeNodeArray, TreeNodeItem, TreeViewProps } from './types'\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})\n\nconst treeState = inject<ReturnType<typeof useTreeState> | null>('treeState', null)\nconst selectedNodes = treeState?.selectedNodes ?? reactive(new Set())\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(() => props.nodes.length > 0)\n\nconst isIndeterminate = computed(() => {\n  if (!hasChildrenNodes.value) return false\n\n  let selectedCount = 0\n  const totalCount = props.nodes.length\n\n  props.nodes.forEach((node) => {\n    if (selectedNodes.has(node.nodeId)) {\n      selectedCount++\n    }\n  })\n\n  return selectedCount > 0 && selectedCount < totalCount\n})\n\nconst selectAllChildren = (node: TreeNodeItem) => {\n  if (treeState?.selectAllChildren) {\n    treeState.selectAllChildren(node)\n  } else {\n    selectedNodes.add(node.nodeId)\n    if (node.children && node.children.length > 0) {\n      node.children.forEach(selectAllChildren)\n    }\n  }\n  expandAll(node)\n}\n\nconst deselectAllChildren = (node: TreeNodeItem) => {\n  if (treeState?.deselectAllChildren) {\n    treeState.deselectAllChildren(node)\n  } else {\n    selectedNodes.delete(node.nodeId)\n    if (node.children && node.children.length > 0) {\n      node.children.forEach(deselectAllChildren)\n    }\n  }\n}\n\nconst expandAll = (node: TreeNodeItem) => {\n  treeState?.expand(node.nodeId)\n  if (node.children && node.children.length > 0) {\n    node.children.forEach(expandAll)\n  }\n}\n\nconst handleSelectNode = () => {\n  let node = findNodeById(props.nodes, props.nodeId)\n\n  if (!node && props.nodeId) {\n    node = {\n      nodeId: props.nodeId,\n      title: props.title,\n      children: props.nodes || [],\n      data: props.data,\n    }\n  }\n\n  if (!node) return\n\n  if (selectedNodes.has(props.nodeId)) {\n    deselectAllChildren(node)\n  } else {\n    selectAllChildren(node)\n\n    if (selectedNodes.has(props.nodeId) && !expandedNodes.has(props.nodeId)) {\n      handleExpandNode(props.nodeId)\n    }\n  }\n}\n\nconst handleExpandNode = (nodeId: TreeNode['nodeId']) => {\n  if (treeState) {\n    if (treeState.isExpanded(nodeId)) {\n      treeState.collapse(nodeId)\n    } else {\n      if (!hasChildrenNodes.value) return\n      treeState.expand(nodeId)\n    }\n    return\n  }\n\n  if (expandedNodes.has(nodeId)) {\n    expandedNodes.delete(nodeId)\n  } else {\n    if (!hasChildrenNodes.value) return\n    expandedNodes.add(nodeId)\n  }\n}\n\nconst 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\nconst getNodeIcon = () =>\n  treeState?.isExpanded(props.nodeId) && hasChildrenNodes.value\n    ? props.nodeCollapseIcon\n    : props.nodeExpandIcon\n</script>\n\n<template>\n  <div>\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=\"handleExpandNode(props.nodeId)\"\n            :name=\"getNodeIcon()\"\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?.isSelected(props.nodeId)\"\n              :indeterminate=\"showIndeterminate && isIndeterminate\"\n              @change=\"handleSelectNode\"\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 props.nodes\"\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      />\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// Export individual components\nexport { FdsTreeView }\n\n// Export component library plugin\nexport default {\n  install(app: App) {\n    // Register all components globally\n    app.component('FdsTreeView', FdsTreeView)\n\n    // You can add global properties here if needed\n    // app.config.globalProperties.$fds = { ... }\n  },\n}\n\n// Export all types for consumers\nexport * from './types'\n\n// Re-export component types for convenience\nexport type {\n  TreeNode,\n  TreeNodeArray,\n  TreeNodeItem,\n  TreeViewProps,\n  NodeId,\n} from './components/fds-tree-view/types'\n"],"names":["_createElementBlock","_createElementVNode","indentation","_unref","showIndeterminate","title","_toDisplayString","showChildrenCount","showNodeDescription","_openBlock","_Fragment","_renderList","_createBlock","expandChildrenOnSelect","FdsTreeView"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import FdsTreeView from './components/fds-tree-view/FdsTreeView.vue';
+export { FdsTreeView };
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;
+export * from './types';
+export type { TreeNode, TreeNodeArray, TreeNodeItem, TreeViewProps, NodeId, } from './components/fds-tree-view/types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAG9B,OAAO,WAAW,MAAM,4CAA4C,CAAA;AAGpE,OAAO,EAAE,WAAW,EAAE,CAAA;;iBAIP,GAAG;;AADlB,wBAQC;AAGD,cAAc,SAAS,CAAA;AAGvB,YAAY,EACV,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,MAAM,GACP,MAAM,kCAAkC,CAAA"}

package/dist/main.d.ts

@@ -0,0 +1,3 @@
+import './style.css';
+import 'fds-core/dist/fds-core/fds-core.css';
+//# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAEA,OAAO,aAAa,CAAA;AAIpB,OAAO,qCAAqC,CAAA"}

package/dist/types/index.d.ts

@@ -0,0 +1,19 @@
+import type { TreeNode, TreeNodeArray, TreeNodeItem, TreeViewProps, NodeId } from '../components/fds-tree-view/types';
+export type { TreeNode, TreeNodeArray, TreeNodeItem, TreeViewProps, NodeId, };
+export interface FdsTreeViewInstance {
+    [key: string]: unknown;
+}
+export interface FdsVueCoreConfig {
+    theme?: 'light' | 'dark';
+    locale?: string;
+}
+export interface TreeViewEvents {
+    'node-select': (node: TreeNode) => void;
+    'node-expand': (node: TreeNode) => void;
+    'node-collapse': (node: TreeNode) => void;
+    'selection-change': (selectedNodes: TreeNode[]) => void;
+}
+export type ComponentSize = 'small' | 'medium' | 'large';
+export type ComponentVariant = 'default' | 'primary' | 'secondary' | 'danger';
+export type { App } from 'vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,MAAM,EACP,MAAM,mCAAmC,CAAA;AAE1C,YAAY,EACV,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,aAAa,EACb,MAAM,GACP,CAAA;AAGD,MAAM,WAAW,mBAAmB;IAIlC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAGD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;CAEhB;AAGD,MAAM,WAAW,cAAc;IAC7B,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACvC,eAAe,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACzC,kBAAkB,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;CACxD;AAGD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AACxD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAA;AAG7E,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "fds-vue-core",
+  "version": "1.0.0",
+  "description": "FDS Vue Core Component Library",
+  "type": "module",
+  "main": "./dist/fds-vue-core.cjs.js",
+  "module": "./dist/fds-vue-core.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fds-vue-core.es.js",
+      "require": "./dist/fds-vue-core.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "library",
+    "fds"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build && npm run build:types",
+    "build:types": "vue-tsc --project tsconfig.build.json",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "fds-core": "^3.8.0"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.1.13"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.13",
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.16.5",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-vue": "~10.3.0",
+    "prettier": "3.6.2",
+    "typescript": "~5.8.0",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-vue-devtools": "^8.0.0",
+    "vue": "^3.5.18",
+    "vue-tsc": "^3.0.4"
+  }
+}