@rokkit/core 1.0.0-next.11 → 1.0.0-next.111

package/src/types.js

@@ -0,0 +1,124 @@
+/**
+ * @typedef {'child' | 'last' | 'sibling' | 'empty' | 'icon'} LineType
+ */
+
+/**
+ * @typedef {Object.<string, Function>} EventHandlers
+ * An object where keys are event names and values are event handler functions.
+ */
+
+/**
+ * Component map to be used to render the item.
+ * @typedef {Object<string, import('svelte').SvelteComponent>} ComponentMap
+ */
+
+/**
+ * Options for the sort order of the column.
+ *
+ * @typedef {'ascending'|'descending'|'none'} SortOptions
+ */
+
+/**
+ * @typedef {'checked'|'unchecked'|'indeterminate'} SelectionState
+ */
+
+/**
+ * Options for the horizontal alignment of the column content.
+ *
+ * @typedef {'left'|'middle'|'right'} HorizontalAlignOptions
+ */
+
+/**
+ * Options for the action type of the column.
+ *
+ * @typedef {'select'|'edit'|'delete'} ActionTypes
+ */
+
+/**
+ * Structure to map custom fields for rendering. This is used to identofy the attributes for various purposes.
+ *
+ * @typedef FieldMapping
+ * @property {string} [id='id']              Unique id for the item
+ * @property {string} [text='text']          the text to render
+ * @property {string} [value='value']        the value associated with the item
+ * @property {string} [url='url']            a URL
+ * @property {string} [icon='icon']          icon to render
+ * @property {string} [image='image']        the image to render
+ * @property {string} [children='children']  children of the item
+ * @property {string} [summary='summary']    summary of the item
+ * @property {string} [notes='notes']        notes for the item
+ * @property {string} [props='props']        additional properties
+ * @property {string} [isOpen='_open']       item is open or closed
+ * @property {string} [level='level']        level of item
+ * @property {string} [parent='parent']      item is a parent
+ * @property {string} [currency='currency]   column specifying currency to be used for the current value
+ * @property {string} [isDeleted='_deleted'] item is deleted
+ * @property {FieldMapping} [fields]         Field mapping to be used on children in the next level
+ */
+
+/**
+ * Column metadata for the table.
+ *
+ * @typedef {Object} ColumnMetadata
+ *
+ * @property {string} name                    - The name of the column.
+ * @property {string} dataType                - The data type of the column (e.g., "string", "number", "date").
+ * @property {FieldMapping} [fields]          - Additional attributes for the column.
+ * @property {number} [digits=0]              - The number of digits for numeric values (defaults to 0).
+ * @property {Function} formatter             - A function to format the column value.
+ * @property {boolean} [virtual]              - Indicates if the column is virtual (true/false).
+ * @property {boolean} [sortable]             - Indicates if the column is sortable (true/false).
+ * @property {SortOptions} [sortOrder]        - The sort order of the column.
+ * @property {HorizontalAlignOptions} [align] - The alignment of the column content.
+ * @property {ActionTypes} [action]           - Action attribute for action columns.
+ */
+
+/**
+ * Track the state of a row in the table.
+ *
+ * @typedef {Object} RowState
+ * @property {number} index              - The index of the node in the flat list.
+ * @property {number} depth              - The depth of the node in the hierarchy.
+ * @property {string} [value]            - The value of the hierarchy node.
+ * @property {boolean} [isHidden]        - Indicates whether the node is visible (true/false).
+ * @property {boolean} [isParent]        - Indicates if this node is a parent (true/false).
+ * @property {boolean} [isExpanded]      - Indicates whether the node is expanded (true/false).
+ * @property {number} [parentIndex]      - The index of the parent node in the flat list.
+ * @property {SelectionState} [selected] - Indicates whether the node is selected (true/false/indeterminate).
+ * @property {Array<number>} childred    - The indices of the children in the flat list.
+ */
+
+/**
+ * Track the state of all rows in the table.
+ *
+ * @typedef {Object} RowStateMap
+ * @property {RowState[]} rows - Flat list of hierarchy nodes.
+ */
+
+/**
+ * Shade mapping for color variables
+ *
+ * @typedef {Object} ShadeMapping
+ * @property {string} key   - the variable name to be used
+ * @property {string} value - the value to be used
+ * @property {string} mode  - light or dark mode
+ */
+
+/**
+ * @typedef {Object} TickMark
+ * @property {number} value - The value of the tick mark.
+ * @property {string} label - The label for the tick mark.
+ * @property {boolean} major - Indicates if the tick mark is a major tick.
+ */
+
+/**
+ * @typedef {Object} CalendarDay
+ * @property {number}  day     - The day of the month.
+ * @property {number}  offset  - indicates the offset for positioning
+ * @property {date}    date    - Datevalue for the day.
+ * @property {string}  text    - formatted text for the day.
+ * @property {boolean} holiday - Indicates if the day is a holiday.
+ * @property {boolean} weekend - Indicates if the day is on the weekend.
+ */
+
+export default {}

package/src/utils.js

@@ -0,0 +1,134 @@
+import { has, isNil } from 'ramda'
+
+/**
+ * Finds the closest ancestor of the given element that has the given attribute.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @returns {HTMLElement|null}
+ */
+export function getClosestAncestorWithAttribute(element, attribute) {
+	if (!element) return null
+	if (element.getAttribute(attribute)) return element
+	return getClosestAncestorWithAttribute(element.parentElement, attribute)
+}
+
+/**
+ * A function that performs no operations.
+ */
+export function noop() {
+	// intentionally empty to support default actions
+}
+
+/**
+ * Generates a random id
+ *
+ * @returns {string} A random id
+ */
+export function id() {
+	return Math.random().toString(36).substring(2, 9)
+}
+
+/**
+ * Check if a value is a json object
+ *
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isObject(val) {
+	return typeof val === 'object' && !isNil(val) && !(val instanceof Date)
+}
+
+/**
+ * Converts the value to a string. If the value is an object, it will convert it to a JSON string.
+ *
+ * @param {*} value
+ * @returns {string}
+ */
+export function toString(value) {
+	if (value === null || value === undefined) return value
+	if (isObject(value)) return JSON.stringify(value, null, 2)
+	return value.toString()
+}
+
+/**
+ * Generates icon shortcuts for a collection of icons
+ *
+ * @param {string[]} icons
+ * @param {string} collection
+ * @param {string} variants
+ * @returns {Object}
+ */
+export function iconShortcuts(icons, collection, variants) {
+	const suffix = variants ? `-${variants}` : ''
+	const shortcuts = !collection
+		? {}
+		: icons.reduce(
+				(acc, name) => ({
+					...acc,
+					[name]: [collection, name].join(':') + suffix
+				}),
+				{}
+			)
+
+	return shortcuts
+}
+
+/**
+ * Scales the path by the size
+ *
+ * @param {number} size
+ * @param {string|number} x
+ * @returns {string|number}
+ */
+export function scaledPath(size, x) {
+	if (Array.isArray(x)) return x.map((v) => scaledPath(size, v)).join(' ')
+	return typeof x === 'number' ? x * size : x
+}
+
+/**
+ * Gets a key string from path
+ * @param {string[]} path
+ * @returns {string}
+ */
+export function getKeyFromPath(path) {
+	return Array.isArray(path) ? path.join('-') : [path].join('-')
+}
+
+/**
+ * Gets a path array from key string
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function getPathFromKey(key) {
+	return key.split('-').map(Number)
+}
+
+/**
+ * Get snippet function from an object
+ * @param {Object} obj
+ * @param {string} key
+ * @param {null|Function} defaultSnippet
+ * @returns {Function|undefined}
+ */
+export function getSnippet(obj, key, defaultSnippet = null) {
+	if (has(key, obj) && typeof obj[key] === 'function') {
+		return obj[key]
+	}
+	return defaultSnippet
+}
+
+/**
+ * Creates a collection of icon import functions based on an icons dictionary
+ *
+ * @param {Object} icons - Dictionary mapping collection names to file paths
+ * @returns {Object} Collections object with functions that dynamically import icon files
+ */
+export const importIcons = (icons) => {
+	if (!icons) return {}
+
+	return Object.entries(icons).reduce((acc, [key, value]) => {
+		acc[key] = () => import(value, { with: { type: 'json' } }).then((i) => i.default)
+		return acc
+	}, {})
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Jerry Thomas
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1 +0,0 @@
-# Core Components

package/src/Accordion.svelte

@@ -1,80 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Text, Summary } from './items'
-	import List from './List.svelte'
-	import { navigator } from './actions/navigator'
-
-	const dispatch = createEventDispatcher()
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let autoClose = false
-	export let value = null
-	let cursor = []
-
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
-
-	function handle(event) {
-		// console.log(event.type, event.detail)
-		value = event.detail.node
-		cursor = event.detail.path
-		if (['collapse', 'expand'].includes(event.type)) {
-			if (autoClose) {
-				items.map((x) => {
-					if (x !== value && x[fields.isOpen]) {
-						x[fields.isOpen] = false
-					}
-				})
-			}
-			items = items
-		}
-		dispatch(event.type, event.detail)
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<accordion
-	class="flex flex-col w-full select-none {className}"
-	tabindex="0"
-	use:navigator={{
-		items,
-		fields,
-		enabled: true,
-		indices: cursor
-	}}
-	on:select={handle}
-	on:move={handle}
-	on:expand={handle}
-	on:collapse={handle}
->
-	{#each items as item, index}
-		{@const hasItems =
-			item[fields.children] && item[fields.children].length > 0}
-		{@const itemFields = { ...fields, ...(fields.fields ?? fields) }}
-
-		<div
-			id={'id-' + index}
-			class="flex flex-col"
-			class:is-expanded={item[fields.isOpen]}
-			class:is-selected={item === value}
-			data-path={index}
-		>
-			<Summary {fields} {using} bind:content={item} />
-			{#if hasItems && item[fields.isOpen]}
-				<List
-					bind:items={item[fields.children]}
-					bind:value
-					fields={itemFields}
-					{using}
-					on:select
-					hierarchy={[index]}
-					tabindex="-1"
-				/>
-			{/if}
-		</div>
-	{/each}
-</accordion>

package/src/Alerts.svelte

@@ -1,39 +0,0 @@
-<script>
-	import { fade } from 'svelte/transition'
-	import { flip } from 'svelte/animate'
-	import { alerts } from './stores'
-	import { dismissable } from './actions'
-
-	function dismissAll() {
-		unreadAlerts.map((alert) => (alert.dismissed = true))
-		alerts.set([...$alerts])
-	}
-
-	function dismiss(alert) {
-		alert.dismissed = true
-		alerts.set([...$alerts])
-	}
-
-	$: unreadAlerts = $alerts.filter((x) => x.dismissed)
-</script>
-
-{#if unreadAlerts.length > 0}
-	<alert-list
-		class="flex flex-col gap-2 absolute z-10"
-		use:dismissable
-		on:dismiss={dismissAll}
-	>
-		{#each unreadAlerts as alert (alert.id)}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<alert
-				class={alert.type}
-				on:click|stopPropagation={dismiss(alert)}
-				animate:flip
-				in:fade
-				out:fade
-			>
-				{alert.message}
-			</alert>
-		{/each}
-	</alert-list>
-{/if}

package/src/DropDown.svelte

@@ -1,79 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte'
-	import { dismissable } from './actions'
-	import { defaultFields, defaultStateIcons } from './constants.js'
-
-	import Icon from './Icon.svelte'
-	import Text from './items/Text.svelte'
-	import List from './List.svelte'
-
-	const dispatch = createEventDispatcher()
-
-	let className = ''
-	export { className as class }
-	export let items = []
-	export let fields = defaultFields
-	export let using = { default: Text }
-	export let value = null
-	export let title
-	export let icon
-	export let small = false
-
-	$: using = { default: Text, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let offsetTop = 0
-	let open = false
-	let icons = defaultStateIcons.selector
-
-	function handleSelect(event) {
-		open = false
-		dispatch('change', event.detail)
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<drop-down
-	class="flex w-full relative cursor-pointer select-none dropdown {className}"
-	class:open
-	tabindex="0"
-	aria-haspopup="true"
-	aria-controls="menu"
-	use:dismissable
-	on:blur={() => (open = false)}
-	on:dismiss={() => (open = false)}
->
-	<button
-		on:click|stopPropagation={() => (open = !open)}
-		class="flex"
-		bind:clientHeight={offsetTop}
-		tabindex="-1"
-	>
-		{#if icon}
-			<Icon name={icon} />
-		{/if}
-		{#if !small && title}
-			<p>{title}</p>
-		{/if}
-		{#if open}
-			<icon class={icons.opened} />
-		{:else}
-			<icon class={icons.closed} />
-		{/if}
-	</button>
-	{#if open}
-		<div
-			class="flex flex-col absolute z-10 h-fit w-full menu"
-			style:top="{offsetTop}px"
-		>
-			<List
-				{items}
-				{fields}
-				{using}
-				bind:value
-				on:select={handleSelect}
-				tabindex="-1"
-			/>
-		</div>
-	{/if}
-</drop-down>

package/src/DropSearch.svelte

@@ -1,67 +0,0 @@
-<script>
-	import { defaultFields } from './constants.js'
-	import List from './List.svelte'
-	import Slider from './Slider.svelte'
-	import { Text } from './items'
-
-	export let data
-	export let value = null
-	export let fields = defaultFields
-	export let using = { default: Text }
-
-	$: using = { default: Text, ...using }
-	$: fields = { ...defaultFields, ...fields }
-
-	let opened = false
-	let search
-	let searchBox
-
-	// on search change filter list
-	function handleSelect(event) {
-		console.log('selected', event)
-		value = event.detail
-		search = event.detail[fields.text]
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-	class="flex flex-col outline-none w-full h-12 relative dropdown"
-	tabindex={0}
->
-	<div class="flex flex-shrink-0 h-12 items-center pl-4 selected-item">
-		<span class="flex flex-grow">
-			<input
-				type="text"
-				class="p-0 border-none bg-transparent w-full"
-				bind:value={search}
-				bind:this={searchBox}
-				on:focus={() => {
-					opened = true
-					searchBox.select()
-				}}
-				on:blur={() => {
-					opened = false
-				}}
-			/>
-		</span>
-		{#if opened}
-			<icon class="selector-opened" />
-		{:else}
-			<icon class="selector-closed" />
-		{/if}
-	</div>
-
-	{#if opened}
-		<Slider>
-			<List
-				bind:items={data}
-				bind:value
-				{fields}
-				{using}
-				on:select={handleSelect}
-				on:change
-			/>
-		</Slider>
-	{/if}
-</div>

package/src/Icon.svelte

@@ -1,15 +0,0 @@
-<script>
-	let className = ''
-	export { className as class }
-
-	export let name = ''
-	let h
-</script>
-
-<square-icon
-	class="flex flex-col flex-shrink-0 h-full items-center justify-center {className}"
-	bind:clientHeight={h}
-	style:width="{h}px"
->
-	<icon class={name} aria-hidden="true" />
-</square-icon>

package/src/List-Discard.svelte

@@ -1,48 +0,0 @@
-<script>
-	import ListActions from './ListActions.svelte'
-	import ListItems from './List.svelte'
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let searchable = false
-	export let editable = false
-
-	let search
-	let filtered
-
-	function addItem() {
-		items = [...items, {}]
-		value = items[items.length - 1]
-	}
-	function deleteSelection() {
-		if (value) value.isDeleted = true
-	}
-	function clearSelection() {
-		value = null
-	}
-
-	$: filtered =
-		searchable && search && search.length
-			? items.filter((item) => item[fields.text].includes(search))
-			: items
-</script>
-
-<list class="flex flex-col w-full {className}">
-	{#if searchable || editable}
-		<ListActions
-			bind:search
-			{searchable}
-			{editable}
-			on:delete={deleteSelection}
-			on:clear={clearSelection}
-			on:add={addItem}
-		/>
-	{/if}
-	<scroll class="flex flex-col h-full overflow-scroll">
-		<ListItems bind:items={filtered} {fields} {using} bind:value on:select />
-	</scroll>
-</list>

package/src/List.svelte

@@ -1,65 +0,0 @@
-<script>
-	import { navigator } from './actions'
-	import { createEventDispatcher } from 'svelte'
-	import { defaultFields } from './constants'
-	import { Text } from './items'
-
-	const dispatch = createEventDispatcher()
-
-	let className = 'list'
-	export { className as class }
-	export let items = []
-	export let fields = {}
-	export let using = {}
-	export let value = null
-	export let tabindex = 0
-	export let hierarchy = []
-	let cursor = []
-
-	function handleNav(event) {
-		value = event.detail.node
-		cursor = event.detail.path
-
-		dispatch('select', { item: value, indices: cursor })
-	}
-
-	$: fields = { ...defaultFields, ...fields }
-	$: using = { default: Text, ...using }
-	$: filtered = items.filter((item) => !item[fields.isDeleted])
-</script>
-
-<list
-	class="flex flex-col w-full flex-shrink-0 select-none {className}"
-	role="listbox"
-	use:navigator={{
-		items,
-		fields,
-		enabled: hierarchy.length == 0,
-		indices: cursor
-	}}
-	on:move={handleNav}
-	on:select={handleNav}
-	{tabindex}
->
-	<slot />
-	{#each filtered as item, index}
-		{@const component = item[fields.component]
-			? using[item[fields.component]] || using.default
-			: using.default}
-		{@const path = [...hierarchy, index].join(',')}
-		<item
-			class="flex flex-shrink-0 flex-grow-0 items-center cursor-pointer w-full gap-2 select-none item"
-			role="option"
-			aria-selected={value === item}
-			class:is-selected={value === item}
-			data-path={path}
-		>
-			<svelte:component
-				this={component}
-				bind:content={item}
-				{fields}
-				on:change
-			/>
-		</item>
-	{/each}
-</list>