@katlux/toolkit 0.1.0-beta.5 → 0.1.0-beta.50

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

@@ -36,91 +36,113 @@
 							.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);
-  }
+<script lang="ts" setup>
+import { computed, type Ref } from 'vue'
+
+const props = defineProps<{
+	visibleRows: any[] // Rows with __treeNode attached
+	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>
+	}
+}>()
+
+// Helper to get ID if needed, but we use row[idKey] or row.id in key
+const idKey = 'id' // Simplify for now, or pass as prop if needed. usually id.
+
+const emit = defineEmits<{
+	(e: 'select', row: any): void
+}>()
+
+function onNodeClick(row: any) {
+	if (!props.disabled) {
+		emit('select', row)
+	}
 }
-const isLoading = computed(() => props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false);
+
+const isLoading = computed(() => props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false)
 </script>
 
-<style scoped>
+<style lang="scss" 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;
+	width: 100%;
+	position: relative; // Ensure loader overlay is contained
+	
+	.tree-list {
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.tree-node {
+		display: flex;
+		align-items: center;
+		padding: 4px 8px;
+		min-height: 32px;
+		transition: background-color 0.2s;
+		
+		&:hover {
+			background-color: var(--hover-bg, #f5f5f5);
+		}
+		
+		.node-content {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			gap: 4px;
+		}
+		
+		.tree-toggle {
+			cursor: pointer;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 20px;
+			height: 20px;
+			border-radius: 4px;
+			flex-shrink: 0;
+			
+			&:hover {
+				background-color: var(--hover-light, #e0e0e0);
+			}
+		}
+		
+		.tree-spacer {
+			width: 20px;
+			height: 20px;
+			flex-shrink: 0;
+		}
+		
+		.node-label {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.selection-control {
+			margin-right: 8px;
+			display: flex;
+			align-items: center;
+		}
+		
+		.default-item {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+		}
+	}
 }
 </style>

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

@@ -1,5 +1,6 @@
 <template lang="pug">
 KCombobox(
+	:dataProvider="dataProvider"
 	:disabled="disabled"
 	:isOptionsOpen="isOptionsOpen"
 	:labelField="labelField"
@@ -37,44 +38,64 @@ KCombobox(
 			)
 </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"]);
+<script lang="ts" setup>
+import { computed } from 'vue'
+// Props passed from global component (which handles the logic)
+const props = defineProps<{
+	// Tree specific
+	dataProvider: any 
+	idKey?: string
+	parentKey?: string
+	iconField?: string
+	
+	// Combobox Logic Props
+	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
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:searchtext', value: string): void
+}>()
+
 const searchtextModel = computed({
-  get: () => props.searchtext,
-  set: (value) => emit("update:searchtext", value)
-});
-function onTreeSelect(node) {
-  props.selectItem(node);
+	get: () => props.searchtext,
+	set: (value) => emit('update:searchtext', value)
+})
+
+function onTreeSelect(node: any) {
+	// Call the selectItem method from logic
+	props.selectItem(node)
+	
+	// If closeOnSelect is true, we should close the dropdown
+	// but selectItem might have already toggled it if it was a distinct action?
+	// In KCombobox.logic.ts: selectItem sets isOptionsOpen = !closeOnSelect
+	// So it should be handled there!
+	
+	// However, selectItem expects a ComboboxItem (TDataRow).
+	// KTree returns a node object which should be compatible.
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KTreePicker__tree-container {
-  padding: 10px;
-  max-height: 400px;
-  overflow-y: auto;
-  min-width: 250px;
+	padding: 10px;
+	max-height: 400px;
+	overflow-y: auto;
+	min-width: 250px; // Ensure tree has some width
 }
+
+
 </style>

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

@@ -6,47 +6,48 @@
 	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 lang="ts" setup>
+defineProps<{
+	value: any
+	depth: number
+	hasChildren: boolean
+	isExpanded: boolean
+	toggle: () => void
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .tree-cell {
-  display: flex;
-  align-items: center;
-  gap: 4px;
+	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);
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	border-radius: 2px;
+	flex-shrink: 0;
+
+	&:hover {
+		background-color: var(--hover-light, #e0e0e0);
+	}
 }
 
 .tree-spacer {
-  width: 20px;
-  flex-shrink: 0;
-  display: inline-block;
+	width: 20px;
+	flex-shrink: 0;
+	display: inline-block;
 }
 
 .tree-content {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 </style>

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

@@ -21,35 +21,42 @@
 			)
 </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 lang="ts" setup>
+import { computed } from 'vue'
+import KTreeCell from './KTreeCell.vue'
+import type { ITreeViewColumn, IRowAction } from '../../../../components/KTreeView/KTreeView.logic'
+import type { IKDatatableAction } from '@katlux/providers'
+
+const props = defineProps<{
+	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
+	// Merged cell slots from global (external slots like gantt timeline)
+	cellSlots?: Record<string, any>
+	headerSlots?: Record<string, any>
+	columnHeaders?: Record<string, string>
+	columnWidths?: Record<string, string>
+}>()
+
+const visibleFields = computed(() => (props.columns as ITreeViewColumn[]).map(col => col.field))
+
+// Compute the tree column field and the dynamic slot name
+const treeColumnField = computed(() => (props.columns as ITreeViewColumn[])[props.treeColumnIndex ?? 0]?.field)
+const treeCellSlotName = computed(() => treeColumnField.value ? `cell-${treeColumnField.value}` : null)
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KTreeView {
-  width: 100%;
+	width: 100%;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/toolkit",
-	"version": "0.1.0-beta.5",
+	"version": "0.1.0-beta.50",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",
@@ -9,16 +9,16 @@
 	},
 	"main": "./dist/module.mjs",
 	"scripts": {
-		"build": "nuxt-module-build build && unbuild",
+		"build": "nuxt-module-build build && unbuild && mkdir -p dist/runtime && cp -r src/runtime/presets dist/runtime/",
 		"dev": "nuxt-module-build build --stub",
 		"prepare": "nuxi prepare",
 		"prepublishOnly": "npm run build"
 	},
 	"exports": {
 		".": {
-			"types": "./dist/types.d.ts",
+			"types": "./dist/types.d.mts",
 			"import": "./dist/module.mjs",
-			"require": "./dist/module.cjs"
+			"require": "./dist/module.mjs"
 		},
 		"./package.json": "./package.json",
 		"./components/*": "./dist/runtime/components/*",
@@ -36,7 +36,7 @@
 	},
 	"dependencies": {
 		"@katlux/providers": "*",
-		"@nuxt/kit": "^3.20.1",
+		"@nuxt/kit": "^3.12.0",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"
 	},