@agnos-ui/svelte-bootstrap 0.8.1 → 0.9.0

package/components/accordion/Accordion.svelte

@@ -9,11 +9,8 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let {children, ...props}: Partial<AccordionProps> & {children: Snippet} = $props();
 
-	const {directives, api: accordionApi} = callWidgetFactory({
-		factory: createAccordion,
-		widgetName: 'accordion',
+	const {directives, api: accordionApi} = callWidgetFactory(createAccordion, {
 		props,
-		enablePatchChanged: true,
 	});
 	export const api: AccordionApi = accordionApi;
 

package/components/accordion/Item.svelte

@@ -2,8 +2,7 @@
 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 type {AccordionItemApi, AccordionItemContext, AccordionItemProps, AccordionItemWidget} from './accordion';
-	import type {WidgetFactory} from '@agnos-ui/svelte-headless/types';
+	import type {AccordionItemApi, AccordionItemContext, AccordionItemProps} from './accordion';
 	import {Slot} from '@agnos-ui/svelte-headless/slot';
 	import {callWidgetFactory} from '../../config';
 	import {onMount} from 'svelte';
@@ -15,12 +14,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	const id = $props.id();
 	let {visible = $bindable(), ...props}: Partial<AccordionItemProps> = $props();
-	const widget = callWidgetFactory({
-		factory: registerItem as WidgetFactory<AccordionItemWidget>,
+	const widget = callWidgetFactory(registerItem, {
 		get props() {
 			return {...props, visible};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {structure, id},
 		events: {
 			onVisibleChange: (event) => {

package/components/alert/Alert.svelte

@@ -9,13 +9,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let {visible = $bindable(), ...props}: Partial<AlertProps> = $props();
 
-	const widget = callWidgetFactory({
-		factory: createAlert,
-		widgetName: 'alert',
+	const widget = callWidgetFactory(createAlert, {
 		get props() {
 			return {...props, visible};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {structure},
 		events: {
 			onVisibleChange: (event) => {
@@ -38,8 +35,8 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 {#if !state.hidden}
 	<div
 		role="alert"
-		use:__AgnosUISveltePreprocess__classDirective={"au-alert alert alert-"+(state.type)+" "+(state.className)+" "+(state.dismissible ? 'alert-dismissible' : '')}
-		use:transitionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(transitionDirective, [__AgnosUISveltePreprocess__classDirective, "au-alert alert alert-"+(state.type)+" "+(state.className)+" "+(state.dismissible ? 'alert-dismissible' : '')])}
+		use:__AgnosUISveltePreprocess__classDirective={(['au-alert', 'alert', `alert-${state.type}`, state.className, state.dismissible && 'alert-dismissible'])}
+		use:transitionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(transitionDirective, [__AgnosUISveltePreprocess__classDirective, (['au-alert', 'alert', `alert-${state.type}`, state.className, state.dismissible && 'alert-dismissible'])])}
 	>
 		<Slot content={state.structure} props={widget} />
 	</div>

package/components/carousel/Carousel.svelte

@@ -11,11 +11,8 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let props: Partial<CarouselProps<SlideData>> = $props();
 
-	const widget = callWidgetFactory({
-		factory: createCarousel<SlideData>,
-		widgetName: 'collapse',
+	const widget = callWidgetFactory(createCarousel<SlideData>, {
 		props,
-		enablePatchChanged: true,
 		defaultConfig: {
 			structure,
 			navigation,

package/components/carousel/carousel.gen.d.ts

@@ -1,4 +1,4 @@
-import type { PropsConfig, WidgetSlotContext, SlotContent, Directive, Widget } from '@agnos-ui/svelte-headless/types';
+import type { WidgetSlotContext, SlotContent, Directive, Widget, WidgetFactory, PropsConfig } from '@agnos-ui/svelte-headless/types';
 import type { EmblaPluginType, EmblaPluginsType, EmblaCarouselType } from 'embla-carousel';
 /**
  * Retrieve a shallow copy of the default Carousel config
@@ -6,17 +6,6 @@ import type { EmblaPluginType, EmblaPluginsType, EmblaCarouselType } from 'embla
  */
 declare const export_getCarouselDefaultConfig: () => CarouselProps<any>;
 export { export_getCarouselDefaultConfig as getCarouselDefaultConfig };
-/**
- * Create a Carousel with given config props
- *
- * @template SlideData - The type of the data for each slide.
- * @param config - an optional carousel config
- * @returns a CarouselWidget
- */
-declare const export_createCarousel: <SlideData extends {
-    id: string;
-}>(config?: PropsConfig<CarouselProps<SlideData>>) => CarouselWidget<SlideData>;
-export { export_createCarousel as createCarousel };
 /**
  * Represents the context for a carousel.
  *
@@ -327,6 +316,19 @@ export interface CarouselDirectives {
 export type CarouselWidget<SlideData extends {
     id: string;
 }> = Widget<CarouselProps<SlideData>, CarouselState<SlideData>, CarouselApi, CarouselDirectives>;
+/**
+ * Create a Carousel with given config props
+ *
+ * @template SlideData - The type of the data for each slide.
+ * @param config - an optional carousel config
+ * @returns a CarouselWidget
+ */
+declare const export_createCarousel: WidgetFactory<CarouselWidget<{
+    id: string;
+}>, <SlideData extends {
+    id: string;
+}>(config?: PropsConfig<CarouselProps<SlideData>>) => CarouselWidget<SlideData>>;
+export { export_createCarousel as createCarousel };
 /**
  * Represents the API for a carousel component.
  */

package/components/collapse/Collapse.svelte

@@ -13,9 +13,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	const {
 		directives: {collapseDirective},
 		api: collapseApi,
-	} = callWidgetFactory({
-		factory: createCollapse,
-		widgetName: 'collapse',
+	} = callWidgetFactory(createCollapse, {
 		get props() {
 			return {...props, visible};
 		},
@@ -27,7 +25,6 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 				visible = event;
 			},
 		},
-		enablePatchChanged: true,
 	});
 	export const api: CollapseApi = collapseApi;
 </script>

package/components/collapse/collapse.gen.d.ts

@@ -1,17 +1,10 @@
-import type { PropsConfig, Directive, Widget } from '@agnos-ui/svelte-headless/types';
+import type { Directive, Widget, WidgetFactory } from '@agnos-ui/svelte-headless/types';
 /**
  * Retrieve a shallow copy of the default collapse config
  * @returns the default collapse config
  */
 declare const export_getCollapseDefaultConfig: () => CollapseProps;
 export { export_getCollapseDefaultConfig as getCollapseDefaultConfig };
-/**
- * Create an CollapseWidget with given config props
- * @param config - an optional collapse config
- * @returns an CollapseWidget
- */
-declare const export_createCollapse: (config?: PropsConfig<CollapseProps>) => CollapseWidget;
-export { export_createCollapse as createCollapse };
 /**
  * Represents the state of a collapse component.
  * Extends the properties and state from `CollapseCommonPropsAndState`.
@@ -148,3 +141,10 @@ export interface CollapseDirectives {
  * @type {Widget<CollapseProps, CollapseState, CollapseApi, CollapseDirectives>}
  */
 export type CollapseWidget = Widget<CollapseProps, CollapseState, CollapseApi, CollapseDirectives>;
+/**
+ * Create an CollapseWidget with given config props
+ * @param config - an optional collapse config
+ * @returns an CollapseWidget
+ */
+declare const export_createCollapse: WidgetFactory<CollapseWidget>;
+export { export_createCollapse as createCollapse };

package/components/modal/Modal.svelte

@@ -11,13 +11,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let {visible = $bindable(), ...props}: Partial<ModalProps<Data>> = $props();
 
-	const widget = callWidgetFactory<ModalWidget<Data>>({
-		factory: createModal,
-		widgetName: 'modal',
+	const widget = callWidgetFactory<ModalWidget<Data>>(createModal, {
 		get props() {
 			return {...props, visible};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {
 			header,
 			structure,

package/components/pagination/Pagination.svelte

@@ -8,13 +8,10 @@
 
 	let {page = $bindable(), ...props}: Partial<PaginationProps> = $props();
 
-	const widget = callWidgetFactory({
-		factory: createPagination,
-		widgetName: 'pagination',
+	const widget = callWidgetFactory(createPagination, {
 		get props() {
 			return {...props, page};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {
 			structure,
 			pagesDisplay,

package/components/progressbar/Progressbar.svelte

@@ -9,11 +9,8 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let props: Partial<ProgressbarProps> = $props();
 
-	const widget = callWidgetFactory({
-		factory: createProgressbar,
-		widgetName: 'progressbar',
+	const widget = callWidgetFactory(createProgressbar, {
 		props,
-		enablePatchChanged: true,
 		defaultConfig: {
 			structure,
 		},

package/components/rating/Rating.svelte

@@ -13,13 +13,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 		state,
 		directives: {containerDirective, starDirective},
 		api: ratingApi,
-	} = callWidgetFactory({
-		factory: createRating,
-		widgetName: 'rating',
+	} = callWidgetFactory(createRating, {
 		get props() {
 			return {...props, rating};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {star},
 		events: {
 			onRatingChange: (value: number) => {

package/components/select/Select.svelte

@@ -9,13 +9,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let {open = $bindable(false), filterText = $bindable(), selected = $bindable(), ...props}: Partial<SelectProps<Item>> = $props();
 
-	const widget = callWidgetFactory<SelectWidget<Item>>({
-		factory: createSelect,
-		widgetName: 'select',
+	const widget = callWidgetFactory<SelectWidget<Item>>(createSelect, {
 		get props() {
 			return {...props, open, filterText, selected};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {badgeLabel, itemLabel},
 		events: {
 			onOpenChange: function (isOpen: boolean): void {

package/components/slider/Slider.svelte

@@ -12,13 +12,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let {values = $bindable(), ...props}: Partial<SliderProps> = $props();
 
-	const widget = callWidgetFactory({
-		factory: createSlider,
-		widgetName: 'slider',
+	const widget = callWidgetFactory(createSlider, {
 		get props() {
 			return {...props, values};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {structure, handle, tick, label},
 		events: {
 			onValuesChange: function (newValues: number[]): void {

package/components/toast/Toast.svelte

@@ -10,13 +10,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 
 	let {visible = $bindable(), ...props}: Partial<ToastProps> = $props();
 
-	const widget = callWidgetFactory({
-		factory: createToast,
-		widgetName: 'toast',
+	const widget = callWidgetFactory(createToast, {
 		get props() {
 			return {...props, visible};
 		},
-		enablePatchChanged: true,
 		defaultConfig: {structure},
 		events: {
 			onVisibleChange: (event) => {

package/components/tree/Tree.svelte

@@ -10,11 +10,8 @@
 
 	let props: Partial<TreeProps> = $props();
 
-	const widget = callWidgetFactory({
-		factory: createTree,
-		widgetName: 'tree',
+	const widget = callWidgetFactory(createTree, {
 		props,
-		enablePatchChanged: true,
 		defaultConfig: {structure, item, itemContent, itemToggle},
 	});
 	const {state} = widget;

package/config.d.ts

@@ -2,7 +2,72 @@ import type { Partial2Levels, WidgetsConfigStore } from '@agnos-ui/svelte-headle
 import type { ReadableSignal } from '@amadeus-it-group/tansu';
 export * from '@agnos-ui/svelte-headless/config';
 import type { WidgetsConfig } from './config.gen';
+import type { Widget, WidgetFactory, WidgetProps, WidgetSlotContext } from '@agnos-ui/svelte-headless/types';
 export type { WidgetsConfig };
 type AdaptParentConfig = (config: Partial2Levels<WidgetsConfig>) => Partial2Levels<WidgetsConfig>;
 type CreateWidgetsDefaultConfig = (adaptParentConfig?: AdaptParentConfig) => WidgetsConfigStore<WidgetsConfig>;
-export declare const widgetsDefaultConfigKey: symbol, createWidgetsDefaultConfig: CreateWidgetsDefaultConfig, getContextWidgetConfig: <N extends keyof WidgetsConfig>(widgetName: N) => ReadableSignal<Partial<WidgetsConfig[N]> | undefined>, callWidgetFactory: any;
+/**
+ * Key used in the Svelte context to get or set the widgets default configuration store.
+ */
+export declare const widgetsDefaultConfigKey: symbol;
+/**
+ * Creates in the Svelte context hierarchy a new widgets default configuration store that inherits from any widgets default configuration
+ * store already defined at an upper level in the Svelte context hierarchy.
+ * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The configuration is computed from the parent configuration in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the own$ store. The own$ store initially contains
+ * an empty object (i.e. no property from the parent is overridden). It can be changed by calling set on the store returned by this function.
+ *
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
+ * default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ *
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ *
+ * @example
+ * ```ts
+ * const widgetsConfig = createWidgetsDefaultConfig((parentConfig) => {
+ *   // first step configuration: transforms the parent configuration
+ *   parentConfig.rating = parentConfig.rating ?? {};
+ *   parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
+ *   return parentConfig;
+ * });
+ * widgetsConfig.set({
+ *   // second step configuration: overrides the parent configuration
+ *   rating: {
+ *     slotStar: MyCustomSlotStar
+ *   }
+ * });
+ * ```
+ */
+export declare const createWidgetsDefaultConfig: CreateWidgetsDefaultConfig;
+/**
+ * Retrieves a widgets configuration store from the Svelte context hierarchy.
+ *
+ * @param widgetName - the name of the widget
+ * @returns the widgets configuration store
+ */
+export declare const getContextWidgetConfig: <N extends keyof WidgetsConfig>(widgetName: N) => ReadableSignal<Partial<WidgetsConfig[N]> | undefined>;
+/**
+ * Creates and initializes a widget using the provided factory and configuration options.
+ *
+ * @param factory - the widget factory
+ * @param options  - the optional options
+ * @param options.defaultConfig - the default configuration for the widget
+ * @param options.events - the events to be passed to the widget
+ * @param options.props - the props to be passed to the widget
+ * @returns the state, api and directives to track and interact with the widget
+ */
+export declare const callWidgetFactory: <W extends Widget>(factory: WidgetFactory<W>, options?: {
+    defaultConfig?: Partial<WidgetProps<W>> | ReadableSignal<Partial<WidgetProps<W>> | undefined>;
+    events?: Partial<Pick<WidgetProps<W>, keyof WidgetProps<W> & `on${string}Change`>>;
+    props?: Partial<WidgetProps<W>>;
+}) => WidgetSlotContext<W>;

package/config.js

@@ -1,4 +1,64 @@
 import { widgetsConfigFactory } from '@agnos-ui/svelte-headless/config';
 export * from '@agnos-ui/svelte-headless/config';
 const configFactories = widgetsConfigFactory(Symbol('bootstrapWidgetsConfig'));
-export const { widgetsDefaultConfigKey, createWidgetsDefaultConfig, getContextWidgetConfig, callWidgetFactory } = configFactories;
+/**
+ * Key used in the Svelte context to get or set the widgets default configuration store.
+ */
+export const widgetsDefaultConfigKey = configFactories.widgetsDefaultConfigKey;
+/**
+ * Creates in the Svelte context hierarchy a new widgets default configuration store that inherits from any widgets default configuration
+ * store already defined at an upper level in the Svelte context hierarchy.
+ * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The configuration is computed from the parent configuration in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the own$ store. The own$ store initially contains
+ * an empty object (i.e. no property from the parent is overridden). It can be changed by calling set on the store returned by this function.
+ *
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
+ * default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ *
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ *
+ * @example
+ * ```ts
+ * const widgetsConfig = createWidgetsDefaultConfig((parentConfig) => {
+ *   // first step configuration: transforms the parent configuration
+ *   parentConfig.rating = parentConfig.rating ?? {};
+ *   parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
+ *   return parentConfig;
+ * });
+ * widgetsConfig.set({
+ *   // second step configuration: overrides the parent configuration
+ *   rating: {
+ *     slotStar: MyCustomSlotStar
+ *   }
+ * });
+ * ```
+ */
+export const createWidgetsDefaultConfig = configFactories.createWidgetsDefaultConfig;
+/**
+ * Retrieves a widgets configuration store from the Svelte context hierarchy.
+ *
+ * @param widgetName - the name of the widget
+ * @returns the widgets configuration store
+ */
+export const getContextWidgetConfig = configFactories.getContextWidgetConfig;
+/**
+ * Creates and initializes a widget using the provided factory and configuration options.
+ *
+ * @param factory - the widget factory
+ * @param options  - the optional options
+ * @param options.defaultConfig - the default configuration for the widget
+ * @param options.events - the events to be passed to the widget
+ * @param options.props - the props to be passed to the widget
+ * @returns the state, api and directives to track and interact with the widget
+ */
+export const callWidgetFactory = configFactories.callWidgetFactory;

package/generated/index.d.ts

@@ -4,6 +4,7 @@ export * from './index';
 export * from './config';
 export * from './utils/widget.svelte';
 export * from './utils/writables';
+export * from './utils/widget';
 export * from './utils/stores';
 export * from './utils/func';
 export * from './utils/directive';

package/generated/index.js

@@ -4,6 +4,7 @@ export * from './index';
 export * from './config';
 export * from './utils/widget.svelte';
 export * from './utils/writables';
+export * from './utils/widget';
 export * from './utils/stores';
 export * from './utils/func';
 export * from './utils/directive';

package/generated/utils/widget.d.ts

@@ -0,0 +1 @@
+export * from '@agnos-ui/svelte-headless/utils/widget';

package/generated/utils/widget.js

@@ -0,0 +1 @@
+export * from '@agnos-ui/svelte-headless/utils/widget';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/svelte-bootstrap",
 	"description": "Bootstrap-based component library for Svelte.",
-	"version": "0.8.1",
+	"version": "0.9.0",
 	"type": "module",
 	"main": "./index.js",
 	"module": "./index.js",
@@ -49,8 +49,8 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core-bootstrap": "0.8.1",
-		"@agnos-ui/svelte-headless": "0.8.1"
+		"@agnos-ui/core-bootstrap": "0.9.0",
+		"@agnos-ui/svelte-headless": "0.9.0"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^2.0.0",