@rokkit/states 1.0.0-next.106 → 1.0.0-next.108

package/src/node-proxy.svelte.js

@@ -0,0 +1,293 @@
+import { has, isNil } from 'ramda'
+import { defaultFields } from '@rokkit/core'
+/**
+ * Represents an individual node within a data structure
+ */
+export class NodeProxy {
+	/** @type {number[]} Path to this node */
+	path
+	/** @type {number} Depth in the hierarchy */
+	depth
+	/** @type {NodeProxy|null} Parent node */
+	parent = null
+
+	/** @type {any} Original data item */
+	original = $state({})
+	/** @type {string} Unique identifier */
+	id = $state()
+
+	/** @type {boolean} Whether this node is expanded */
+	expanded = $state(false)
+
+	/** @type {boolean} Whether this node is selected  */
+	selected = $state(false)
+
+	/** @type {boolean} Whether this node has focus */
+	focused = $state(false)
+
+	/** @type {NodeProxy[]} Child nodes */
+	children = []
+
+	#fields = {}
+	/**
+	 * Creates a new NodeProxy
+	 *
+	 * @param {any} item - Original data item
+	 * @param {number[]} path - Path to this node
+	 * @param {import('./field-mapper.js').FieldMapper} mapper - Field mapper
+	 * @param {NodeProxy|null} parent - Parent node
+	 */
+	constructor(item, path, fields, parent = null) {
+		this.original = typeof item === 'object' ? item : { text: item }
+		this.path = path
+		this.depth = path.length - 1
+		this.parent = parent
+		this.fields = { ...defaultFields, ...fields }
+
+		this._init()
+	}
+
+	_init() {
+		this.id = has(this.fields.id, this.original)
+			? String(this.original[this.fields.id])
+			: this.path.join('-')
+		this.expanded =
+			has(this.fields.expanded, this.original) && Boolean(this.original[this.fields.expanded])
+		this.selected =
+			has(this.fields.selected, this.original) && Boolean(this.original[this.fields.selected])
+		this._refreshAllChildren(this.path)
+	}
+
+	set fields(props) {
+		this.#fields = { ...defaultFields, ...props }
+	}
+
+	get fields() {
+		return this.#fields
+	}
+
+	/**
+	 * Gets a mapped attribute from the original item
+	 *
+	 * @param {string} fieldName - Name of the field to get
+	 * @returns {any|null} - The attribute value or null if not found
+	 */
+	get(fieldName) {
+		const mappedField = this.fields[fieldName]
+		if (!mappedField || !has(mappedField, this.original)) {
+			return null
+		}
+		return this.original[mappedField]
+	}
+
+	/**
+	 * Get the display text for this node
+	 * @returns {string}
+	 */
+	get text() {
+		return this.get('text')
+	}
+
+	/**
+	 * Get the icon for this node
+	 * @returns {string|null}
+	 */
+	get icon() {
+		return this.get('icon')
+	}
+
+	/**
+	 * Get formatted text using a formatter function
+	 * @param {Function} formatter - Function to format the text
+	 * @returns {string}
+	 */
+	formattedText(formatter) {
+		const text = this.get('text')
+		if (isNil(text)) return ''
+		if (typeof formatter !== 'function') return text.toString()
+		return formatter(text, this.get('currency'))
+	}
+
+	/**
+	 * Toggles the expanded state of this node
+	 */
+	toggle() {
+		this.expanded = !this.expanded
+
+		// Update original data if it has the expanded field
+		if (has(this.fields.expanded, this.original)) {
+			this.original[this.fields.expanded] = this.expanded
+		}
+		return this
+	}
+
+	/**
+	 * Checks if this node has children
+	 * @returns {boolean}
+	 */
+	hasChildren() {
+		return this.children.length > 0
+	}
+
+	/**
+	 * Expand all children
+	 */
+	expandAll() {
+		if (this.hasChildren()) {
+			this.expanded = true
+			this.children.forEach((child) => child.expandAll())
+		}
+	}
+
+	/**
+	 * Collapse all children
+	 */
+	collapseAll() {
+		if (this.hasChildren()) {
+			this.children.forEach((child) => child.collapseAll())
+			this.expanded = false
+		}
+	}
+
+	/**
+	 * Checks if this node is a leaf node (no children)
+	 * @returns {boolean}
+	 */
+	isLeaf() {
+		return !this.hasChildren()
+	}
+
+	/**
+	 * Gets the path to this node
+	 * @returns {number[]}
+	 */
+	getPath() {
+		return [...this.path]
+	}
+
+	/**
+	 * Adds a child node proxy from an existing data item.
+	 * If index is provided, the child is inserted at that index, otherwise it is appended to the end
+	 * @param {any} childData - Child data to add (already exists in original data)
+	 * @returns {NodeProxy} - The newly created child node proxy
+	 */
+	addChild(childData, index = -1) {
+		if (this.children.length === 0) {
+			this.original[this.fields.children] = []
+		}
+		if (index < 0 || index > this.children.length) {
+			index = this.children.length
+		}
+
+		this.original[this.fields.children].splice(index, 0, childData)
+		this._refreshAllChildren(this.path)
+	}
+
+	/**
+	 * Removes a child node by index
+	 * @param {number} index - Index of the child to remove
+	 * @returns {boolean} - Whether the removal was successful
+	 */
+	removeChild(index) {
+		if (index < 0 || index >= this.children.length) {
+			return null
+		}
+		const child = this.original[this.fields.children][index]
+		this.original[this.fields.children].splice(index, 1)
+		this._refreshAllChildren(this.path)
+		return child
+	}
+
+	/**
+	 * Removes all children from this node
+	 * @private
+	 */
+	_removeAllChildren() {
+		this.children.forEach((child) => child.destroy())
+		this.children = []
+	}
+
+	/**
+	 * Checks if the original data has children
+	 * @private
+	 */
+	_hasChildren() {
+		const childAttr = this.fields.children
+		return has(childAttr, this.original) && Array.isArray(this.original[childAttr])
+	}
+
+	/**
+	 * Removes all children from this node
+	 * @private
+	 */
+	_refreshAllChildren(path) {
+		if (this.children.length > 0) this._removeAllChildren()
+		if (this._hasChildren()) {
+			const childFields = this.fields.fields ?? this.fields
+			this.original[this.fields.children].forEach((child, index) => {
+				const childNode = new NodeProxy(child, [...path, index], childFields, this)
+				this.children.push(childNode)
+			})
+		}
+	}
+
+	/**
+	 * Destroys this node, cleaning up references
+	 */
+	destroy() {
+		// Clean up all children first
+		this.children.forEach((child) => child.destroy())
+
+		// Clear references
+		this.children = []
+		this.parent = null
+	}
+
+	/**
+	 * Clear selected, focused states
+	 */
+	resetStates() {
+		this.selected = false
+		this.focused = false
+		if (this.children.length > 0) {
+			this.children.forEach((child) => child.resetStates())
+		}
+	}
+
+	/**
+	 * Get/Set the value for this node
+	 */
+	get value() {
+		return this.original
+	}
+
+	set value(newValue) {
+		if (typeof newValue === 'object') {
+			const removedKeys = Object.keys(this.original).filter(
+				(key) => !Object.keys(newValue).includes(key)
+			)
+			Object.entries(newValue).forEach(([k, v]) => {
+				this.original[k] = v
+			})
+			removedKeys.forEach((key) => {
+				delete this.original[key]
+			})
+			this._refreshAllChildren(this.path)
+		} else {
+			this.original.text = newValue
+		}
+	}
+
+	/**
+	 * Find nodes matching a criteria
+	 * @param {function} condition - The condition to match
+	 * @returns {NodeProxy|null} - First matching node or null if no matches found
+	 */
+	find(condition) {
+		if (condition(this)) return this
+		let result = null
+		for (let i = 0; i < this.children.length && !result; i++)
+			result = this.children[i].find(condition)
+		return result
+	}
+}

package/src/proxy.svelte.js

@@ -0,0 +1,59 @@
+import { defaultFields } from '@rokkit/core'
+import { isNil, has } from 'ramda'
+
+export class Proxy {
+	#value = $state({})
+	#fields = $state(defaultFields)
+
+	constructor(value, fields) {
+		this.#value = typeof value === 'object' ? value : { text: value }
+		this.fields = fields
+	}
+
+	get fields() {
+		return this.#fields
+	}
+	set fields(value) {
+		this.#fields = { ...defaultFields, ...value }
+	}
+
+	get value() {
+		return this.#value
+	}
+
+	set value(value) {
+		if (typeof value === 'object') {
+			const removedKeys = Object.keys(this.#value).filter(
+				(key) => !Object.keys(value).includes(key)
+			)
+			Object.entries(value).forEach(([k, v]) => {
+				this.#value[k] = v
+			})
+			removedKeys.forEach((key) => {
+				delete this.#value[key]
+			})
+		} else {
+			this.#value.text = value
+		}
+	}
+
+	/**
+	 * Gets a mapped attribute from the original item
+	 *
+	 * @param {string} fieldName - Name of the field to get
+	 * @returns {any|null} - The attribute value or null if not found
+	 */
+	get(fieldName) {
+		return this.has(fieldName) ? this.value[this.fields[fieldName]] : null
+	}
+
+	/**
+	 * Checks if a mapped attribute exists in the original item
+	 * @param {string} fieldName - Name of the field to check
+	 * @returns boolean
+	 */
+	has(fieldName) {
+		const mappedField = this.fields[fieldName]
+		return !isNil(mappedField) && has(mappedField, this.value)
+	}
+}

package/src/nested.svelte.js

@@ -1,267 +0,0 @@
-import { has, equals, pick, omit } from 'ramda'
-import { SvelteMap } from 'svelte/reactivity'
-import { DEFAULT_EVENTS } from './constants'
-import { FieldMapper, getKeyFromPath } from '@rokkit/core'
-
-export class DataWrapper {
-	/* @type number[] */
-	#path = []
-	#events = {}
-	#init = false
-	#keys = null
-	#options = { multiselect: false, autoCloseSiblings: false }
-
-	items = null
-	data = $state(null)
-	value = $state(null)
-	mapping = new FieldMapper()
-	currentNode = $state(null)
-	selected = new SvelteMap()
-
-	constructor(items, mapper, value, options = {}) {
-		this.items = items
-		this.data = items
-		if (mapper) this.mapping = mapper
-
-		this.#events = { ...DEFAULT_EVENTS, ...options.events }
-		this.#options = { ...options, ...pick(['multiselect', 'autoCloseSiblings'], options) }
-		this.#keys = options.keys || null
-		this.moveToValue(value)
-	}
-
-	moveToValue(value) {
-		this.#init = true
-		this.value = value
-		this.moveTo(this.findPathToItem(value))
-		this.#expandPath(this.#path)
-
-		this.#init = false
-	}
-
-	#expandPath(path) {
-		if (!path.length) return
-		for (let i = 0; i < path.length; i++) {
-			const item = this.mapping.getItemByPath(this.data, path.slice(0, i + 1))
-			if (!this.mapping.isExpanded(item)) {
-				this.mapping.toggleExpansion(item)
-			}
-		}
-	}
-	#matchItems(a, b) {
-		if (this.#keys) {
-			return equals(pick(this.#keys, a), pick(this.#keys, b))
-		} else {
-			return equals(a, b)
-		}
-	}
-	/**
-	 * Finds an item in a tree structure and returns the path as array of indices
-	 * @param {*} value - The value to find
-	 * @param {number[]} parent - The current path being explored
-	 * @returns {number[]|null} - Array of indices representing path to item, or null if not found
-	 */
-	findPathToItem(value, parent = []) {
-		const children = this.mapping.getChildrenByPath(this.data, parent)
-		// Direct child check
-		const directIndex = children.findIndex((item) => this.#matchItems(item, value))
-		if (directIndex !== -1) {
-			return [...parent, directIndex]
-		}
-
-		// Recursive search in children
-		return children.reduce((path, _, index) => {
-			if (path.length > 0) return path
-			if (!this.mapping.hasChildren(children[index])) return []
-
-			return this.findPathToItem(value, [...parent, index])
-		}, [])
-	}
-
-	#getLastVisibleDescendant(node, nodePath) {
-		if (!this.mapping.hasChildren(node) || !this.mapping.isExpanded(node)) {
-			return { node, path: nodePath }
-		}
-
-		const children = this.mapping.getChildren(node)
-		if (children.length === 0) {
-			return { node, path: nodePath }
-		}
-
-		const lastChildIndex = children.length - 1
-		const lastChild = children[lastChildIndex]
-		return this.#getLastVisibleDescendant(lastChild, [...nodePath, lastChildIndex])
-	}
-
-	#getPreviousSiblingPath() {
-		const currentIndex = this.#path[this.#path.length - 1]
-		const prevSiblingPath = [...this.#path.slice(0, -1), currentIndex - 1]
-		const prevSibling = this.mapping.getItemByPath(this.data, prevSiblingPath)
-
-		if (this.mapping.isExpanded(prevSibling)) {
-			const { path } = this.#getLastVisibleDescendant(prevSibling, prevSiblingPath)
-			return path
-		} else {
-			return prevSiblingPath
-		}
-	}
-
-	#getNextSiblingPath(inputPath) {
-		const parentPath = inputPath.slice(0, -1)
-		const currentIndex = Number(inputPath[inputPath.length - 1])
-
-		const siblings = this.mapping.getChildrenByPath(this.data, parentPath)
-		if (currentIndex < siblings.length - 1) {
-			return [...parentPath, currentIndex + 1]
-		} else if (parentPath.length > 0) {
-			return this.#getNextSiblingPath(parentPath)
-		}
-		return null
-	}
-
-	emit(type, data) {
-		if (!this.#init && has(type, this.#events)) this.#events[type](data)
-	}
-
-	moveTo(path) {
-		if (!path) return
-		const currentPath = Array.isArray(path) ? path : [path]
-
-		if (equals(currentPath, this.#path)) return
-
-		this.#path = currentPath
-		if (currentPath.length === 0) {
-			this.currentNode = null
-		} else {
-			this.currentNode = this.mapping.getItemByPath(this.data, currentPath)
-			this.emit('move', { path: this.#path, node: this.currentNode })
-		}
-	}
-	movePrev() {
-		let currentPath = [0]
-		if (this.#path.length === 0) this.moveTo([0])
-
-		// Return false if at root level first item
-		if (this.#path.length === 1 && this.#path[0] === 0) {
-			return
-		}
-
-		// Get previous sibling index
-		const currentIndex = this.#path[this.#path.length - 1]
-		if (currentIndex > 0) {
-			// Has previous sibling
-			currentPath = this.#getPreviousSiblingPath()
-		} else {
-			// Move to parent
-			currentPath = this.#path.slice(0, -1)
-		}
-		this.moveTo(currentPath)
-	}
-
-	moveNext() {
-		if (this.#path.length === 0) {
-			this.moveTo([0])
-			return
-		}
-
-		const currentNode = this.currentNode
-
-		// If current node is expanded and has children, move to first child
-		if (this.mapping.isExpanded(currentNode) && this.mapping.hasChildren(currentNode)) {
-			this.moveTo([...this.#path, 0])
-			return
-		}
-
-		// Try to move to next sibling
-		const nextSiblingPath = this.#getNextSiblingPath(this.#path)
-		if (nextSiblingPath) {
-			this.moveTo(nextSiblingPath)
-			return
-		}
-	}
-
-	#collapseParent() {
-		this.moveTo(this.#path.slice(0, -1))
-		if (this.mapping.isExpanded(this.currentNode)) {
-			this.toggleExpansion()
-		}
-	}
-
-	collapse() {
-		// if not expanded child move to parent?
-		if (this.mapping.isExpanded(this.currentNode)) {
-			this.toggleExpansion()
-		} else if (this.#path.length > 1) {
-			this.#collapseParent()
-		}
-	}
-
-	expand() {
-		if (this.mapping.isExpanded(this.currentNode)) return
-		this.toggleExpansion()
-	}
-
-	collapseSiblings() {
-		if (!this.#options.autoCloseSiblings || !this.mapping.isExpanded(this.currentNode)) return
-
-		const parentPath = this.#path.slice(0, -1)
-		const siblings = this.mapping.getChildrenByPath(this.data, parentPath)
-		const currentIndex = this.#path[this.#path.length - 1]
-
-		siblings.forEach((sibling, index) => {
-			if (currentIndex !== index && this.mapping.isExpanded(sibling)) {
-				this.mapping.toggleExpansion(sibling)
-			}
-		})
-	}
-
-	toggleExpansion() {
-		if (!this.currentNode || !this.mapping.hasChildren(this.currentNode)) return
-
-		const eventType = this.mapping.isExpanded(this.currentNode) ? 'collapse' : 'expand'
-		this.mapping.toggleExpansion(this.currentNode)
-		this.collapseSiblings()
-		this.emit(eventType, { path: this.#path, node: this.currentNode })
-	}
-
-	select(path = null) {
-		this.moveTo(path)
-
-		if (this.currentNode) {
-			this.value = this.mapping.getItemByPath(this.data, this.#path)
-			this.selected.clear()
-			this.selected.set(getKeyFromPath(this.#path), this.currentNode)
-			this.emit('select', {
-				path: this.#path,
-				node: this.currentNode,
-				selected: this.selected
-			})
-		}
-	}
-
-	#toggleSelection() {
-		if (!this.currentNode) return
-
-		const isSelected = this.selected.has(getKeyFromPath(this.#path))
-
-		if (isSelected) {
-			this.selected.delete(getKeyFromPath(this.#path))
-		} else {
-			this.selected.set(getKeyFromPath(this.#path), this.currentNode)
-		}
-
-		this.emit('select', {
-			path: this.#path,
-			node: this.currentNode,
-			selected: this.selected
-		})
-	}
-
-	extendSelection(path = null) {
-		this.moveTo(path)
-		if (this.#options.multiselect) {
-			this.#toggleSelection()
-		} else {
-			this.select()
-		}
-	}
-}