@katlux/toolkit 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/runtime/presets/default/components/KTextarea/KTextarea.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    placeholder: string;
+    rows: number;
+};
+type __VLS_ModelProps = {
+    'text'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:text": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:text"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTextarea/KTextarea.vue

@@ -0,0 +1,29 @@
+<template lang="pug">
+textarea.KTextarea(v-model="text" :placeholder="placeholder" :rows="rows")
+</template>
+
+<script setup>
+const text = defineModel("text", { type: String });
+defineProps({
+  placeholder: { type: String, required: true },
+  rows: { type: Number, required: true }
+});
+</script>
+
+<style scoped>
+.KTextarea {
+  border: var(--input-border);
+  border-radius: var(--input-border-radius);
+  background-color: var(--neutral-50);
+  padding: var(--component-gap);
+  font-family: inherit;
+  font-size: 14px;
+  resize: vertical;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+.KTextarea:focus {
+  border-color: var(--input-focus-border-color);
+}
+</style>

package/dist/runtime/presets/default/components/KTextarea/KTextarea.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    placeholder: string;
+    rows: number;
+};
+type __VLS_ModelProps = {
+    'text'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:text": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:text"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTextbox/KTextbox.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    text: string;
+    showClearIcon: boolean;
+    clear: () => void;
+    placeholder: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:text": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:text"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTextbox/KTextbox.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+KGrid(align="center" noGap).KTextbox
+	input(type="text" v-model="text" :placeholder="placeholder")
+	KIcon(v-if="showClearIcon" @click="clear" iconname="close" width="12" height="12").closeIcon
+</template>
+
+<script setup>
+const props = defineProps({
+  text: { type: String, required: true },
+  showClearIcon: { type: Boolean, required: true },
+  clear: { type: Function, required: true },
+  placeholder: { type: String, required: true }
+});
+const emit = defineEmits(["update:text"]);
+const text = computed({
+  get: () => props.text,
+  set: (value) => emit("update:text", value)
+});
+</script>
+
+<style scoped>
+.KTextbox {
+  border: var(--input-border);
+  border-radius: var(--input-border-radius);
+  overflow: hidden;
+  background-color: var(--neutral-50);
+  height: 40px;
+}
+.KTextbox input {
+  background-color: var(--neutral-50);
+  box-sizing: border-box;
+  flex-grow: 1;
+  padding: var(--component-gap);
+  border: none;
+  outline: none;
+}
+.KTextbox .closeIcon {
+  padding-right: var(--component-gap);
+  color: var(--icon-color-medium);
+  cursor: pointer;
+}
+.KTextbox .closeIcon:hover {
+  color: var(--icon-color-dark);
+}
+</style>

package/dist/runtime/presets/default/components/KTextbox/KTextbox.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    text: string;
+    showClearIcon: boolean;
+    clear: () => void;
+    placeholder: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:text": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:text"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTooltip/KTooltip.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTooltip/KTooltip.vue

@@ -0,0 +1,5 @@
+<template lang="pug">
+.KTooltip
+	// Impl
+</template>
+<script lang="ts" setup></script>

package/dist/runtime/presets/default/components/KTooltip/KTooltip.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTree/KTree.d.vue.ts

@@ -0,0 +1,23 @@
+import { type Ref } from 'vue';
+type __VLS_Props = {
+    visibleRows: any[];
+    expandedNodes: Set<string | number>;
+    labelField: string;
+    iconField: string;
+    disabled: boolean;
+    multiSelect: boolean;
+    isNodeSelected: (node: any) => boolean;
+    toggleNode: (id: string | number) => void;
+    selectable: boolean;
+    dataProvider?: {
+        loading: Ref<boolean>;
+        initialLoad?: Ref<boolean>;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (row: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((row: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTree/KTree.vue

@@ -0,0 +1,126 @@
+<template lang="pug">
+.KTree
+	KLoader(:loading="isLoading" overlay)
+	.tree-list
+		.tree-node(
+			v-for="row in visibleRows"
+			:key="row[idKey] || row.id"
+			:class="{ 'has-children': row.__treeNode?.hasChildren }"
+			:style="{ paddingLeft: ((row.__treeNode?.depth || 0) * 20) + 'px' }"
+		)
+			.node-content
+				// Toggle
+				.tree-toggle(
+					v-if="row.__treeNode?.hasChildren" 
+					@click="toggleNode(row.__treeNode?.id)"
+					:class="{ expanded: row.__treeNode?.isExpanded }"
+				)
+					KIcon(iconname="chevron" :width="12" :height="12" :rotate="row.__treeNode?.isExpanded ? '90' : '0'")
+				
+				.tree-spacer(v-else)
+
+				// Content
+				.node-label(@click="onNodeClick(row)")
+					.selection-control(v-if="selectable") 
+						// Always show selection control if selectable (implied by usage in picker)
+						// In future we might want a 'selectable' prop on row or tree
+						KCheckbox(
+							:modelValue="isNodeSelected(row)"
+							@update:modelValue="onNodeClick(row)"
+							@click.stop
+						)
+
+					slot(name="item" :node="row.__treeNode" :data="row")
+						slot(name="default" :node="row.__treeNode" :data="row")
+							// Default content
+							.default-item
+								KIcon(v-if="iconField && row[iconField]" :iconname="row[iconField]" :width="16" :height="16")
+								span {{ row[labelField] }}
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  visibleRows: { type: Array, required: true },
+  expandedNodes: { type: Set, required: true },
+  labelField: { type: String, required: true },
+  iconField: { type: String, required: true },
+  disabled: { type: Boolean, required: true },
+  multiSelect: { type: Boolean, required: true },
+  isNodeSelected: { type: Function, required: true },
+  toggleNode: { type: Function, required: true },
+  selectable: { type: Boolean, required: true },
+  dataProvider: { type: Object, required: false }
+});
+const idKey = "id";
+const emit = defineEmits(["select"]);
+function onNodeClick(row) {
+  if (!props.disabled) {
+    emit("select", row);
+  }
+}
+const isLoading = computed(() => props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false);
+</script>
+
+<style scoped>
+.KTree {
+  width: 100%;
+  position: relative;
+}
+.KTree .tree-list {
+  display: flex;
+  flex-direction: column;
+}
+.KTree .tree-node {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  min-height: 32px;
+  transition: background-color 0.2s;
+}
+.KTree .tree-node:hover {
+  background-color: var(--hover-bg, #f5f5f5);
+}
+.KTree .tree-node .node-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 4px;
+}
+.KTree .tree-node .tree-toggle {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.KTree .tree-node .tree-toggle:hover {
+  background-color: var(--hover-light, #e0e0e0);
+}
+.KTree .tree-node .tree-spacer {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.KTree .tree-node .node-label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.KTree .tree-node .selection-control {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+}
+.KTree .tree-node .default-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>

package/dist/runtime/presets/default/components/KTree/KTree.vue.d.ts

@@ -0,0 +1,23 @@
+import { type Ref } from 'vue';
+type __VLS_Props = {
+    visibleRows: any[];
+    expandedNodes: Set<string | number>;
+    labelField: string;
+    iconField: string;
+    disabled: boolean;
+    multiSelect: boolean;
+    isNodeSelected: (node: any) => boolean;
+    toggleNode: (id: string | number) => void;
+    selectable: boolean;
+    dataProvider?: {
+        loading: Ref<boolean>;
+        initialLoad?: Ref<boolean>;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (row: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((row: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTreePicker/KTreePicker.d.vue.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    dataProvider: any;
+    idKey?: string;
+    parentKey?: string;
+    iconField?: string;
+    disabled: boolean;
+    isOptionsOpen: boolean;
+    labelField: string;
+    placeholder: string;
+    searchbox: boolean;
+    multiSelect: boolean;
+    searchtext: string;
+    filteredOptions: any[];
+    getSelectedContent: () => any[];
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    selectItem: (option: any) => void;
+    isSelected: (option: any) => boolean;
+    loading: boolean;
+    closeOnSelect: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:searchtext": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:searchtext"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTreePicker/KTreePicker.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+KCombobox(
+	:disabled="disabled"
+	:isOptionsOpen="isOptionsOpen"
+	:labelField="labelField"
+	:placeholder="placeholder"
+	:searchbox="searchbox"
+	:searchtext="searchtext"
+	:filteredOptions="filteredOptions"
+	:getSelectedContent="getSelectedContent"
+	:toggleDropdown="toggleDropdown"
+	:closeDropdown="closeDropdown"
+	:selectItem="selectItem"
+	:isSelected="isSelected"
+	:loading="loading"
+)
+	template(#default)
+		.KTreePicker__tree-container
+			.KTreePicker__search(v-if="searchbox" style="margin-bottom: 10px")
+				KTextbox(
+					v-model="searchtextModel"
+					placeholder="Search..."
+					showClear
+				)
+			KTree(
+				:dataProvider="dataProvider"
+				:idKey="idKey"
+				:parentKey="parentKey"
+				:labelField="labelField"
+				:iconField="iconField"
+				:loading="loading"
+				:multiSelect="multiSelect"
+				:isNodeSelected="isSelected"
+				:searchtext="searchtext"
+				:selectable="true"
+				@select="onTreeSelect"
+			)
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  dataProvider: { type: null, required: true },
+  idKey: { type: String, required: false },
+  parentKey: { type: String, required: false },
+  iconField: { type: String, required: false },
+  disabled: { type: Boolean, required: true },
+  isOptionsOpen: { type: Boolean, required: true },
+  labelField: { type: String, required: true },
+  placeholder: { type: String, required: true },
+  searchbox: { type: Boolean, required: true },
+  multiSelect: { type: Boolean, required: true },
+  searchtext: { type: String, required: true },
+  filteredOptions: { type: Array, required: true },
+  getSelectedContent: { type: Function, required: true },
+  toggleDropdown: { type: Function, required: true },
+  closeDropdown: { type: Function, required: true },
+  selectItem: { type: Function, required: true },
+  isSelected: { type: Function, required: true },
+  loading: { type: Boolean, required: true },
+  closeOnSelect: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:searchtext"]);
+const searchtextModel = computed({
+  get: () => props.searchtext,
+  set: (value) => emit("update:searchtext", value)
+});
+function onTreeSelect(node) {
+  props.selectItem(node);
+}
+</script>
+
+<style scoped>
+.KTreePicker__tree-container {
+  padding: 10px;
+  max-height: 400px;
+  overflow-y: auto;
+  min-width: 250px;
+}
+</style>

package/dist/runtime/presets/default/components/KTreePicker/KTreePicker.vue.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    dataProvider: any;
+    idKey?: string;
+    parentKey?: string;
+    iconField?: string;
+    disabled: boolean;
+    isOptionsOpen: boolean;
+    labelField: string;
+    placeholder: string;
+    searchbox: boolean;
+    multiSelect: boolean;
+    searchtext: string;
+    filteredOptions: any[];
+    getSelectedContent: () => any[];
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    selectItem: (option: any) => void;
+    isSelected: (option: any) => boolean;
+    loading: boolean;
+    closeOnSelect: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:searchtext": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:searchtext"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTreeView/KTreeCell.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    value: any;
+    depth: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+    toggle: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTreeView/KTreeCell.vue

@@ -0,0 +1,52 @@
+<template lang="pug">
+.tree-cell(:style="{ paddingLeft: depth * 24 + 'px' }")
+	.tree-toggle(v-if="hasChildren" @click.stop="toggle")
+		KIcon(iconname="chevron" :width="12" :height="12" :rotate="isExpanded ? '90' : '0'")
+	.tree-spacer(v-else)
+	span.tree-content {{ value }}
+</template>
+
+<script setup>
+defineProps({
+  value: { type: null, required: true },
+  depth: { type: Number, required: true },
+  hasChildren: { type: Boolean, required: true },
+  isExpanded: { type: Boolean, required: true },
+  toggle: { type: Function, required: true }
+});
+</script>
+
+<style scoped>
+.tree-cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tree-toggle {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+.tree-toggle:hover {
+  background-color: var(--hover-light, #e0e0e0);
+}
+
+.tree-spacer {
+  width: 20px;
+  flex-shrink: 0;
+  display: inline-block;
+}
+
+.tree-content {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/dist/runtime/presets/default/components/KTreeView/KTreeCell.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    value: any;
+    depth: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+    toggle: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTreeView/KTreeView.d.vue.ts

@@ -0,0 +1,24 @@
+import type { ITreeViewColumn, IRowAction } from '../../../../components/KTreeView/KTreeView.logic.js';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    dataProvider: any;
+    columns: ITreeViewColumn[];
+    treeColumnIndex?: number;
+    bulkActions?: IKDatatableAction[];
+    rowActions?: IRowAction[];
+    showCheckboxes: boolean;
+    selectedRows: any[];
+    selectAll: boolean;
+    expandedNodes: Set<string | number>;
+    toggleNode: (id: string | number) => void;
+    toggleRowSelection: (row: any) => void;
+    toggleSelectAll: () => void;
+    isRowSelected: (row: any) => boolean;
+    cellSlots?: Record<string, any>;
+    headerSlots?: Record<string, any>;
+    columnHeaders?: Record<string, string>;
+    columnWidths?: Record<string, string>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/presets/default/components/KTreeView/KTreeView.vue

@@ -0,0 +1,55 @@
+<template lang="pug">
+.KTreeView
+	KDatatable(
+		:dataProvider="dataProvider"
+		:visibleFields="visibleFields"
+		:bulkActions="bulkActions"
+		:rowActions="rowActions"
+		:cellSlots="cellSlots"
+		:headerSlots="headerSlots"
+		:columnHeaders="columnHeaders"
+		:columnWidths="columnWidths"
+	)
+		//- Tree column cell: rendered natively via dynamic slot name — no h() needed
+		template(v-if="treeColumnField" v-slot:[treeCellSlotName]="slotProps")
+			KTreeCell(
+				:value="slotProps.value"
+				:depth="slotProps.row.__treeNode?.depth ?? 0"
+				:hasChildren="slotProps.row.__treeNode?.hasChildren ?? false"
+				:isExpanded="slotProps.row.__treeNode?.isExpanded ?? false"
+				:toggle="() => toggleNode(slotProps.row.__treeNode?.id)"
+			)
+</template>
+
+<script setup>
+import { computed } from "vue";
+import KTreeCell from "./KTreeCell.vue";
+const props = defineProps({
+  dataProvider: { type: null, required: true },
+  columns: { type: Array, required: true },
+  treeColumnIndex: { type: Number, required: false },
+  bulkActions: { type: Array, required: false },
+  rowActions: { type: Array, required: false },
+  showCheckboxes: { type: Boolean, required: true },
+  selectedRows: { type: Array, required: true },
+  selectAll: { type: Boolean, required: true },
+  expandedNodes: { type: Set, required: true },
+  toggleNode: { type: Function, required: true },
+  toggleRowSelection: { type: Function, required: true },
+  toggleSelectAll: { type: Function, required: true },
+  isRowSelected: { type: Function, required: true },
+  cellSlots: { type: Object, required: false },
+  headerSlots: { type: Object, required: false },
+  columnHeaders: { type: Object, required: false },
+  columnWidths: { type: Object, required: false }
+});
+const visibleFields = computed(() => props.columns.map((col) => col.field));
+const treeColumnField = computed(() => props.columns[props.treeColumnIndex ?? 0]?.field);
+const treeCellSlotName = computed(() => treeColumnField.value ? `cell-${treeColumnField.value}` : null);
+</script>
+
+<style scoped>
+.KTreeView {
+  width: 100%;
+}
+</style>

package/dist/runtime/presets/default/components/KTreeView/KTreeView.vue.d.ts

@@ -0,0 +1,24 @@
+import type { ITreeViewColumn, IRowAction } from '../../../../components/KTreeView/KTreeView.logic.js';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    dataProvider: any;
+    columns: ITreeViewColumn[];
+    treeColumnIndex?: number;
+    bulkActions?: IKDatatableAction[];
+    rowActions?: IRowAction[];
+    showCheckboxes: boolean;
+    selectedRows: any[];
+    selectAll: boolean;
+    expandedNodes: Set<string | number>;
+    toggleNode: (id: string | number) => void;
+    toggleRowSelection: (row: any) => void;
+    toggleSelectAll: () => void;
+    isRowSelected: (row: any) => boolean;
+    cellSlots?: Record<string, any>;
+    headerSlots?: Record<string, any>;
+    columnHeaders?: Record<string, string>;
+    columnWidths?: Record<string, string>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;