@agnos-ui/svelte-bootstrap 0.5.0-next.0 → 0.6.0-next.0

package/components/accordion/Accordion.svelte.d.ts

@@ -5,4 +5,5 @@ declare const Accordion: import("svelte").Component<Partial<AccordionProps> & {
 }, {
     api: AccordionApi;
 }, "">;
+type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/components/accordion/Item.svelte.d.ts

@@ -2,4 +2,5 @@ import type { AccordionItemApi, AccordionItemProps } from './accordion';
 declare const Item: import("svelte").Component<Partial<AccordionItemProps>, {
     api: AccordionItemApi;
 }, "visible">;
+type Item = ReturnType<typeof Item>;
 export default Item;

package/components/accordion/ItemDefaultStructure.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { AccordionItemContext } from './accordion';
 declare const ItemDefaultStructure: import("svelte").Component<AccordionItemContext, {}, "">;
+type ItemDefaultStructure = ReturnType<typeof ItemDefaultStructure>;
 export default ItemDefaultStructure;

package/components/accordion/accordion.d.ts

@@ -9,6 +9,6 @@ export declare function setAccordionApi(accordionApi: AccordionApi): void;
 /**
  * Retrieves the Accordion API from the Svelte context.
  *
- * @returns {AccordionApi} The Accordion API instance.
+ * @returns The Accordion API instance.
  */
 export declare function getAccordionApi(): AccordionApi;

package/components/accordion/accordion.js

@@ -13,7 +13,7 @@ export function setAccordionApi(accordionApi) {
 /**
  * Retrieves the Accordion API from the Svelte context.
  *
- * @returns {AccordionApi} The Accordion API instance.
+ * @returns The Accordion API instance.
  */
 export function getAccordionApi() {
     return getContext(contextInjectionKey);

package/components/alert/Alert.svelte.d.ts

@@ -2,4 +2,5 @@ import { type AlertApi, type AlertProps } from './alert.gen';
 declare const Alert: import("svelte").Component<Partial<AlertProps>, {
     api: AlertApi;
 }, "visible">;
+type Alert = ReturnType<typeof Alert>;
 export default Alert;

package/components/alert/AlertDefaultStructure.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { AlertContext } from './alert.gen';
 declare const AlertDefaultStructure: import("svelte").Component<AlertContext, {}, "">;
+type AlertDefaultStructure = ReturnType<typeof AlertDefaultStructure>;
 export default AlertDefaultStructure;

package/components/collapse/Collapse.svelte.d.ts

@@ -5,4 +5,5 @@ declare const Collapse: import("svelte").Component<Partial<CollapseProps> & {
 }, {
     api: CollapseApi;
 }, "visible">;
+type Collapse = ReturnType<typeof Collapse>;
 export default Collapse;

package/components/modal/modalService.d.ts

@@ -3,10 +3,10 @@ import type { ModalProps } from './modal.gen';
  * Opens a modal dialog with the specified options.
  *
  * @template Data - The type of data that the modal will handle.
- * @param {Partial<ModalProps<Data>>} options - The options to configure the modal.
- * @param {Object} [context] - Optional context to pass to the modal.
- * @param {Map<any, any>} [context.context] - A map of context values to pass to the modal.
- * @returns {Promise<any>} A promise that resolves when the modal is closed.
+ * @param options - The options to configure the modal.
+ * @param context - Optional context to pass to the modal.
+ * @param context.context - A map of context values to pass to the modal.
+ * @returns A promise that resolves when the modal is closed.
  *
  * @example
  * ```typescript

package/components/modal/modalService.js

@@ -4,10 +4,10 @@ import Modal from './Modal.svelte';
  * Opens a modal dialog with the specified options.
  *
  * @template Data - The type of data that the modal will handle.
- * @param {Partial<ModalProps<Data>>} options - The options to configure the modal.
- * @param {Object} [context] - Optional context to pass to the modal.
- * @param {Map<any, any>} [context.context] - A map of context values to pass to the modal.
- * @returns {Promise<any>} A promise that resolves when the modal is closed.
+ * @param options - The options to configure the modal.
+ * @param context - Optional context to pass to the modal.
+ * @param context.context - A map of context values to pass to the modal.
+ * @returns A promise that resolves when the modal is closed.
  *
  * @example
  * ```typescript

package/components/pagination/Pagination.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { PaginationProps } from './pagination.gen';
 declare const Pagination: import("svelte").Component<Partial<PaginationProps>, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

package/components/pagination/PaginationDefaultPages.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { PaginationContext } from './pagination.gen';
 declare const PaginationDefaultPages: import("svelte").Component<PaginationContext, {}, "">;
+type PaginationDefaultPages = ReturnType<typeof PaginationDefaultPages>;
 export default PaginationDefaultPages;

package/components/pagination/PaginationDefaultStructure.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { PaginationContext } from './pagination.gen';
 declare const PaginationDefaultStructure: import("svelte").Component<PaginationContext, {}, "">;
+type PaginationDefaultStructure = ReturnType<typeof PaginationDefaultStructure>;
 export default PaginationDefaultStructure;

package/components/progressbar/Progressbar.svelte.d.ts

@@ -1,3 +1,4 @@
 import { type ProgressbarProps } from './progressbar.gen';
 declare const Progressbar: import("svelte").Component<Partial<ProgressbarProps>, {}, "">;
+type Progressbar = ReturnType<typeof Progressbar>;
 export default Progressbar;

package/components/progressbar/ProgressbarDefaultStructure.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { ProgressbarContext } from './progressbar.gen';
 declare const ProgressbarDefaultStructure: import("svelte").Component<ProgressbarContext, {}, "">;
+type ProgressbarDefaultStructure = ReturnType<typeof ProgressbarDefaultStructure>;
 export default ProgressbarDefaultStructure;

package/components/rating/Rating.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { RatingProps } from './rating.gen';
 declare const Rating: import("svelte").Component<Partial<RatingProps>, {}, "rating">;
+type Rating = ReturnType<typeof Rating>;
 export default Rating;

package/components/select/select.gen.d.ts

@@ -306,6 +306,8 @@ declare const export_createSelect: <Item>(config?: PropsConfig<SelectProps<Item>
 export { export_createSelect as createSelect };
 /**
  * Item representation built from the items provided in parameters
+ *
+ * @template T - The type of the Select Items
  */
 export interface ItemContext<T> {
     /**
@@ -323,6 +325,8 @@ export interface ItemContext<T> {
 }
 /**
  * Interface representing the API for a Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectApi<Item> {
     /**
@@ -388,6 +392,8 @@ export interface SelectApi<Item> {
 }
 /**
  * Interface representing the directives used in the Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectDirectives<Item> {
     /**

package/components/slider/Slider.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { SliderProps } from './slider.gen';
 declare const Slider: import("svelte").Component<Partial<SliderProps>, {}, "values">;
+type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/components/slider/SliderDefaultHandle.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { SliderSlotHandleContext } from './slider.gen';
 declare const SliderDefaultHandle: import("svelte").Component<SliderSlotHandleContext, {}, "">;
+type SliderDefaultHandle = ReturnType<typeof SliderDefaultHandle>;
 export default SliderDefaultHandle;

package/components/slider/SliderDefaultStructure.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { SliderContext } from './slider.gen';
 declare const SliderDefaultStructure: import("svelte").Component<SliderContext, {}, "">;
+type SliderDefaultStructure = ReturnType<typeof SliderDefaultStructure>;
 export default SliderDefaultStructure;

package/components/toast/Toast.svelte.d.ts

@@ -2,4 +2,5 @@ import type { ToastApi, ToastProps } from './toast.gen';
 declare const Toast: import("svelte").Component<Partial<ToastProps>, {
     api: ToastApi;
 }, "visible">;
+type Toast = ReturnType<typeof Toast>;
 export default Toast;

package/components/toast/ToastDefaultStructure.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { ToastContext } from './toast.gen';
 declare const ToastDefaultStructure: import("svelte").Component<ToastContext, {}, "">;
+type ToastDefaultStructure = ReturnType<typeof ToastDefaultStructure>;
 export default ToastDefaultStructure;

package/components/tree/Tree.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import {callWidgetFactory} from '../../config';
+	import type {TreeContext, TreeProps, TreeSlotItemContext} from './tree.gen';
+	import {createTree} from './tree.gen';
+	import TreeDefaultItemContent from './TreeDefaultItemContent.svelte';
+	import TreeDefaultItem from './TreeDefaultItem.svelte';
+	import TreeDefaultStructure from './TreeDefaultStructure.svelte';
+	import TreeDefaultItemToggle from './TreeDefaultItemToggle.svelte';
+
+	let props: Partial<TreeProps> = $props();
+
+	const widget = callWidgetFactory({
+		factory: createTree,
+		widgetName: 'tree',
+		props,
+		enablePatchChanged: true,
+		defaultConfig: {structure, item, itemContent, itemToggle},
+	});
+	const {state} = widget;
+</script>
+
+{#snippet structure(props: TreeContext)}
+	<TreeDefaultStructure {...props} />
+{/snippet}
+{#snippet item(props: TreeSlotItemContext)}
+	<TreeDefaultItem {...props} />
+{/snippet}
+{#snippet itemContent(props: TreeSlotItemContext)}
+	<TreeDefaultItemContent {...props} />
+{/snippet}
+{#snippet itemToggle(props: TreeSlotItemContext)}
+	<TreeDefaultItemToggle {...props} />
+{/snippet}
+
+<Slot content={state.structure} props={widget} />

package/components/tree/Tree.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeProps } from './tree.gen';
+declare const Tree: import("svelte").Component<Partial<TreeProps>, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/components/tree/TreeDefaultItem.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import type {TreeSlotItemContext} from './tree.gen';
+
+	let {item, state, api, directives}: TreeSlotItemContext = $props();
+</script>
+
+<li use:directives.itemAttributesDirective={{item: item}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.itemAttributesDirective, {item: item}])}>
+	<Slot content={state.itemContent} props={{item, state, api, directives}} />
+	{#if state.expandedMap.get(item)}
+		<ul role="group">
+			{#each item.children as child, index (child.label + child.level + index)}
+				<Slot content={state.item} props={{item: child, state, api, directives}} />
+			{/each}
+		</ul>
+	{/if}
+</li>

package/components/tree/TreeDefaultItem.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TreeDefaultItem: import("svelte").Component<any, {}, "">;
+type TreeDefaultItem = ReturnType<typeof TreeDefaultItem>;
+export default TreeDefaultItem;

package/components/tree/TreeDefaultItemContent.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import type {TreeSlotItemContext} from './tree.gen';
+
+	let {item, state, api, directives}: TreeSlotItemContext = $props();
+</script>
+
+<span class="au-tree-item">
+	<Slot content={state.itemToggle} props={{item, state, api, directives}} />
+	{item.label}
+</span>

package/components/tree/TreeDefaultItemContent.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TreeDefaultItemContent: import("svelte").Component<any, {}, "">;
+type TreeDefaultItemContent = ReturnType<typeof TreeDefaultItemContent>;
+export default TreeDefaultItemContent;

package/components/tree/TreeDefaultItemToggle.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+
+	import type {TreeSlotItemContext} from './tree.gen';
+
+	let {item, directives}: TreeSlotItemContext = $props();
+</script>
+
+{#if item.children.length > 0}
+	<!-- svelte-ignore a11y_consider_explicit_label -->
+	<button use:directives.itemToggleDirective={{item: item}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.itemToggleDirective, {item: item}])}></button>
+{:else}
+	<span class="au-tree-expand-icon-placeholder"></span>
+{/if}

package/components/tree/TreeDefaultItemToggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TreeDefaultItemToggle: import("svelte").Component<any, {}, "">;
+type TreeDefaultItemToggle = ReturnType<typeof TreeDefaultItemToggle>;
+export default TreeDefaultItemToggle;

package/components/tree/TreeDefaultStructure.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import type {TreeContext} from './tree.gen';
+
+	let widget: TreeContext = $props();
+	let {state, directives} = widget;
+</script>
+
+<ul role="tree" use:__AgnosUISveltePreprocess__classDirective={"au-tree "+(state.className)} use:directives.navigationDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.navigationDirective, [__AgnosUISveltePreprocess__classDirective, "au-tree "+(state.className)])}>
+	{#each state.normalizedNodes as item, index (item.label + item.level + index)}
+		<Slot content={state.item} props={{item, ...widget}} />
+	{/each}
+</ul>

package/components/tree/TreeDefaultStructure.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TreeDefaultStructure: import("svelte").Component<WidgetSlotContext<Widget<import("./tree.gen").TreeProps, import("./tree.gen").TreeState, import("./tree.gen").TreeApi, import("./tree.gen").TreeDirectives>>, {}, "">;
+type TreeDefaultStructure = ReturnType<typeof TreeDefaultStructure>;
+export default TreeDefaultStructure;

package/components/tree/index.d.ts

@@ -0,0 +1,3 @@
+import Tree from './Tree.svelte';
+export * from './tree.gen';
+export { Tree };

package/components/tree/index.js

@@ -0,0 +1,3 @@
+import Tree from './Tree.svelte';
+export * from './tree.gen';
+export { Tree };

package/components/tree/tree.gen.d.ts

@@ -0,0 +1,216 @@
+import type { WidgetSlotContext, SlotContent, Widget, WidgetFactory, Directive } from '@agnos-ui/svelte-headless/types';
+/**
+ * Retrieve a shallow copy of the default Tree config
+ * @returns the default Tree config
+ */
+declare const export_getTreeDefaultConfig: () => TreeProps;
+export { export_getTreeDefaultConfig as getTreeDefaultConfig };
+/**
+ * Represents the context for a Tree widget.
+ * This interface is an alias for `WidgetSlotContext<TreeWidget>`.
+ */
+export type TreeContext = WidgetSlotContext<TreeWidget>;
+/**
+ * Represents the context for a tree item, extending the base `TreeContext`
+ * with an additional `item` property.
+ */
+export type TreeSlotItemContext = TreeContext & {
+    item: NormalizedTreeItem;
+};
+/**
+ * Represents the state of a Tree component.
+ */
+export interface TreeState {
+    /**
+     * Array of normalized tree nodes
+     */
+    normalizedNodes: NormalizedTreeItem[];
+    /**
+     * Getter of expanded state for each tree node
+     */
+    expandedMap: {
+        get(item: NormalizedTreeItem): boolean | undefined;
+    };
+    /**
+     * Optional accessibility label for the tree if there is no explicit label
+     *
+     * @defaultValue `''`
+     */
+    ariaLabel?: string;
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Slot to change the default display of the tree
+     */
+    structure: SlotContent<TreeContext>;
+    /**
+     * Slot to change the default tree item
+     */
+    item: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item content
+     */
+    itemContent: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item toggle
+     */
+    itemToggle: SlotContent<TreeSlotItemContext>;
+}
+/**
+ * Represents the properties for the Tree component.
+ */
+export interface TreeProps {
+    /**
+     * Array of the tree nodes to display
+     *
+     * @defaultValue `[]`
+     */
+    nodes: TreeItem[];
+    /**
+     * An event emitted when the user toggles the expand of the TreeItem.
+     *
+     * Event payload is equal to the TreeItem clicked.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onExpandToggle: (node: NormalizedTreeItem) => void;
+    /**
+     * Retrieves expand items of the TreeItem
+     *
+     * @param node - HTML element that is representing the expand item
+     *
+     * @defaultValue
+     * ```ts
+     * (node: HTMLElement) => node.querySelectorAll('button')
+     * ```
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLButtonElement>;
+    /**
+     * Return the value for the 'aria-label' attribute of the toggle
+     * @param label - tree item label
+     *
+     * @defaultValue
+     * ```ts
+     * (label: string) => `Toggle ${label}`
+     * ```
+     */
+    ariaLabelToggleFn: (label: string) => string;
+    /**
+     * Optional accessibility label for the tree if there is no explicit label
+     *
+     * @defaultValue `''`
+     */
+    ariaLabel?: string;
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `''`
+     */
+    className: string;
+    /**
+     * Slot to change the default display of the tree
+     */
+    structure: SlotContent<TreeContext>;
+    /**
+     * Slot to change the default tree item
+     */
+    item: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item content
+     */
+    itemContent: SlotContent<TreeSlotItemContext>;
+    /**
+     * Slot to change the default tree item toggle
+     */
+    itemToggle: SlotContent<TreeSlotItemContext>;
+}
+/**
+ * Represents a Tree widget component.
+ */
+export type TreeWidget = Widget<TreeProps, TreeState, TreeApi, TreeDirectives>;
+/**
+ * Create a Tree with given config props
+ * @param config - an optional tree config
+ * @returns a TreeWidget
+ */
+declare const export_createTree: WidgetFactory<TreeWidget>;
+export { export_createTree as createTree };
+/**
+ * Represents a tree item component.
+ */
+export interface TreeItem {
+    /**
+     * Optional accessibility label for the node
+     */
+    ariaLabel?: string;
+    /**
+     * Optional array of children nodes
+     */
+    children?: TreeItem[];
+    /**
+     * If `true` the node is expanded
+     */
+    isExpanded?: boolean;
+    /**
+     * String title of the node
+     */
+    label: string;
+}
+/**
+ * Normalized TreeItem object
+ */
+export interface NormalizedTreeItem {
+    /**
+     * Accessibility label for the node
+     */
+    ariaLabel: string;
+    /**
+     * Level in the hierarchy, starts with 0 for a root node
+     */
+    level: number;
+    /**
+     * An array of children nodes
+     */
+    children: NormalizedTreeItem[];
+    /**
+     * If `true` the node is expanded
+     */
+    isExpanded?: boolean;
+    /**
+     * String title of the node
+     */
+    label: string;
+}
+/**
+ * Interface representing the API for a Tree component.
+ */
+export interface TreeApi {
+}
+/**
+ * Interface representing various directives used in the Tree component.
+ */
+export interface TreeDirectives {
+    /**
+     * Directive to attach navManager for the tree
+     */
+    navigationDirective: Directive;
+    /**
+     * Directive to handle toggle for the tree item
+     */
+    itemToggleDirective: Directive<{
+        item: NormalizedTreeItem;
+    }>;
+    /**
+     * Directive to handle attributes for the tree item
+     */
+    itemAttributesDirective: Directive<{
+        item: NormalizedTreeItem;
+    }>;
+}

package/components/tree/tree.gen.js

@@ -0,0 +1,14 @@
+import { getTreeDefaultConfig, createTree } from '@agnos-ui/core-bootstrap/components/tree';
+/**
+ * Retrieve a shallow copy of the default Tree config
+ * @returns the default Tree config
+ */
+const export_getTreeDefaultConfig = getTreeDefaultConfig;
+export { export_getTreeDefaultConfig as getTreeDefaultConfig };
+/**
+ * Create a Tree with given config props
+ * @param config - an optional tree config
+ * @returns a TreeWidget
+ */
+const export_createTree = createTree;
+export { export_createTree as createTree };

package/config.gen.d.ts

@@ -8,6 +8,7 @@ import type { RatingProps } from './components/rating';
 import type { SelectProps } from './components/select';
 import type { SliderProps } from './components/slider';
 import type { ToastProps } from './components/toast';
+import type { TreeProps } from './components/tree';
 export type WidgetsConfig = {
     /**
      * the accordion widget config
@@ -49,4 +50,8 @@ export type WidgetsConfig = {
      * the toast widget config
      */
     toast: ToastProps;
+    /**
+     * the tree widget config
+     */
+    tree: TreeProps;
 };

package/index.d.ts

@@ -8,4 +8,5 @@ export * from './components/rating';
 export * from './components/select';
 export * from './components/slider';
 export * from './components/toast';
+export * from './components/tree';
 export * from './generated';

package/index.js

@@ -8,4 +8,5 @@ export * from './components/rating';
 export * from './components/select';
 export * from './components/slider';
 export * from './components/toast';
+export * from './components/tree';
 export * from './generated';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/svelte-bootstrap",
 	"description": "Bootstrap-based component library for Svelte.",
-	"version": "0.5.0-next.0",
+	"version": "0.6.0-next.0",
 	"type": "module",
 	"main": "./index.js",
 	"module": "./index.js",
@@ -49,13 +49,13 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core-bootstrap": "0.5.0-next.0",
-		"@agnos-ui/svelte-headless": "0.5.0-next.0"
+		"@agnos-ui/core-bootstrap": "0.6.0-next.0",
+		"@agnos-ui/svelte-headless": "0.6.0-next.0"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^1.0.0",
 		"esm-env": "^1.1.4",
-		"svelte": "^5.1.4"
+		"svelte": "^5.2.7"
 	},
 	"sideEffects": false,
 	"homepage": "https://www.agnosui.dev/latest/",