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

package/components/pagination/pagination.gen.d.ts

@@ -8,16 +8,20 @@ export { export_getPaginationDefaultConfig as getPaginationDefaultConfig };
 /**
  * A type for the slot context of the pagination widget
  */
-export type PaginationContext = WidgetSlotContext<PaginationWidget>;
+export interface PaginationContext extends WidgetSlotContext<PaginationWidget> {
+}
 /**
  * A type for the slot context of the pagination widget when the slot is the number label
  */
-export type PaginationNumberContext = PaginationContext & {
+export interface PaginationNumberContext extends PaginationContext {
     /**
      * Displayed page
      */
     displayedPage: number;
-};
+}
+/**
+ * Represents the state of a pagination component.
+ */
 export interface PaginationState {
     /**
      * The number of pages.
@@ -53,14 +57,6 @@ export interface PaginationState {
      * @defaultValue `1`
      */
     page: number;
-    /**
-     * The pagination display size.
-     *
-     * Bootstrap currently supports small and large sizes.
-     *
-     * @defaultValue `null`
-     */
-    size: 'sm' | 'lg' | null;
     /**
      * The label for the nav element.
      *
@@ -223,7 +219,18 @@ export interface PaginationState {
      * ```
      */
     numberLabel: SlotContent<PaginationNumberContext>;
+    /**
+     * The pagination display size.
+     *
+     * Bootstrap currently supports small and large sizes.
+     *
+     * @defaultValue `null`
+     */
+    size: 'sm' | 'lg' | null;
 }
+/**
+ * Represents the properties for the Pagination component.
+ */
 export interface PaginationProps {
     /**
      * The number of items in your paginated collection.
@@ -300,7 +307,7 @@ export interface PaginationProps {
      *
      * @defaultValue
      * ```ts
-     * (currentPage: number, pageCount: number) => `Current page is ${currentPage}`
+     * (currentPage: number) => `Current page is ${currentPage}`
      * ```
      */
     ariaLiveLabel: (currentPage: number, pageCount: number) => string;
@@ -323,14 +330,6 @@ export interface PaginationProps {
      * @defaultValue `1`
      */
     page: number;
-    /**
-     * The pagination display size.
-     *
-     * Bootstrap currently supports small and large sizes.
-     *
-     * @defaultValue `null`
-     */
-    size: 'sm' | 'lg' | null;
     /**
      * The label for the nav element.
      *
@@ -493,8 +492,22 @@ export interface PaginationProps {
      * ```
      */
     numberLabel: SlotContent<PaginationNumberContext>;
+    /**
+     * The pagination display size.
+     *
+     * Bootstrap currently supports small and large sizes.
+     *
+     * @defaultValue `null`
+     */
+    size: 'sm' | 'lg' | null;
 }
-export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, PaginationActions, PaginationDirectives>;
+/**
+ * Represents a pagination widget component.
+ *
+ * This type defines a widget that handles pagination functionality,
+ * including properties, state, api and directives specific to pagination.
+ */
+export type PaginationWidget = Widget<PaginationProps, PaginationState, PaginationApi, PaginationDirectives>;
 /**
  * Create a PaginationWidget with given config props
  * @param config - an optional alert config
@@ -502,6 +515,9 @@ export type PaginationWidget = Widget<PaginationProps, PaginationState, Paginati
  */
 declare const export_createPagination: WidgetFactory<PaginationWidget>;
 export { export_createPagination as createPagination };
+/**
+ * Interface representing the hrefs for pagination navigation links.
+ */
 export interface DirectionsHrefs {
     /**
      * The href for the 'Previous' navigation link
@@ -512,29 +528,35 @@ export interface DirectionsHrefs {
      */
     next: string;
 }
-export interface PaginationActions {
+/**
+ * Interface representing pagination API for navigating through pages.
+ */
+export interface PaginationApi {
     /**
      * To "go" to a specific page
      * @param page - The page number to select
      */
-    select(page: number, event?: MouseEvent): void;
+    select(page: number): void;
     /**
      * To "go" to the first page
      */
-    first(event?: MouseEvent): void;
+    first(): void;
     /**
      * To "go" to the previous page
      */
-    previous(event?: MouseEvent): void;
+    previous(): void;
     /**
      * To "go" to the next page
      */
-    next(event?: MouseEvent): void;
+    next(): void;
     /**
      * To "go" to the last page
      */
-    last(event?: MouseEvent): void;
+    last(): void;
 }
+/**
+ * Interface representing the directives for pagination components.
+ */
 export interface PaginationDirectives {
     /**
      * A directive to be applied to each page link
@@ -560,5 +582,3 @@ export interface PaginationDirectives {
      */
     pageLast: Directive;
 }
-export interface PaginationApi {
-}

package/components/progressbar/Progressbar.svelte

@@ -1,36 +1,33 @@
-<script>
+<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 { createProgressbar } from "./progressbar";
-import { Slot } from "@agnos-ui/svelte-headless/slot";
-import { callWidgetFactory } from "../../config";
-import ProgressbarDefaultStructure from "./ProgressbarDefaultStructure.svelte";
-const widget = callWidgetFactory({
-  factory: createProgressbar,
-  widgetName: "progressbar",
-  $$slots,
-  $$props,
-  defaultConfig: {
-    structure: ProgressbarDefaultStructure
-  },
-  events: {}
-});
-const {
-  stores: { structure$, className$ },
-  state$,
-  directives: { ariaDirective }
-} = widget;
-export const api = widget.api;
-$: widget.patchChangedProps($$props);
-$: slotContext = { widget, state: $state$ };
+
+	import {createProgressbar, type ProgressbarContext, type ProgressbarProps} from './progressbar.gen';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import {callWidgetFactory} from '../../config';
+	import ProgressbarDefaultStructure from './ProgressbarDefaultStructure.svelte';
+
+	let props: Partial<ProgressbarProps> = $props();
+
+	const widget = callWidgetFactory({
+		factory: createProgressbar,
+		widgetName: 'progressbar',
+		props,
+		enablePatchChanged: true,
+		defaultConfig: {
+			structure,
+		},
+	});
+	const {
+		state,
+		directives: {ariaDirective},
+	} = widget;
 </script>
 
-<div use:ariaDirective use:__AgnosUISveltePreprocess__classDirective={($className$ || undefined)} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(ariaDirective, [__AgnosUISveltePreprocess__classDirective, ($className$ || undefined)])}>
-	<Slot slotContent={$structure$} props={slotContext} let:component let:props>
-		<svelte:fragment slot="slot" let:props><slot name="structure" {...props} /></svelte:fragment>
-		<svelte:component this={component} {...props}>
-			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-		</svelte:component>
-	</Slot>
+{#snippet structure(props: ProgressbarContext)}
+	<ProgressbarDefaultStructure {...props} />
+{/snippet}
+
+<div use:ariaDirective use:__AgnosUISveltePreprocess__classDirective={(state.className || undefined)} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(ariaDirective, [__AgnosUISveltePreprocess__classDirective, (state.className || undefined)])}>
+	<Slot content={state.structure} props={widget} />
 </div>

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

@@ -1,21 +1,3 @@
-import { SvelteComponent } from "svelte";
-import { type ProgressbarProps, type ProgressbarSlots, type ProgressbarApi } from './progressbar';
-declare const __propDef: {
-    props: {
-        api?: ProgressbarApi;
-    } & Partial<ProgressbarProps>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: ProgressbarSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-type ProgressbarProps_ = typeof __propDef.props;
-export { ProgressbarProps_ as ProgressbarProps };
-export type ProgressbarEvents = typeof __propDef.events;
-type ProgressbarSlots_ = typeof __propDef.slots;
-export { ProgressbarSlots_ as ProgressbarSlots };
-export default class Progressbar extends SvelteComponent<ProgressbarProps_, ProgressbarEvents, ProgressbarSlots_> {
-    get api(): ProgressbarApi;
-}
+import { type ProgressbarProps } from './progressbar.gen';
+declare const Progressbar: import("svelte").Component<Partial<ProgressbarProps>, {}, "">;
+export default Progressbar;

package/components/progressbar/ProgressbarDefaultStructure.svelte

@@ -1,7 +1,8 @@
-<script>import { Slot } from "@agnos-ui/svelte-headless/slot";
-export let state;
-export let widget;
-$: slotContext = { widget, state };
+<script lang="ts">
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+	import type {ProgressbarContext} from './progressbar.gen';
+
+	let {state, api, directives}: ProgressbarContext = $props();
 </script>
 
 <div class="progress" style:height={state.height}>
@@ -11,12 +12,6 @@ $: slotContext = { widget, state };
 		class:progress-bar-animated={state.animated}
 		style:width={`${state.percentage}%`}
 	>
-		<Slot slotContent={state.children} props={slotContext} let:component let:props>
-			<svelte:fragment slot="slot" let:props><slot {...props} /></svelte:fragment>
-			<svelte:component this={component} {...props}>
-				<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-				<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-			</svelte:component>
-		</Slot>
+		<Slot content={state.children} props={{state, api, directives}} />
 	</div>
 </div>

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

@@ -1,17 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { ProgressbarSlots } from './progressbar';
-declare const __propDef: {
-    props: WidgetSlotContext<Widget<import("./progressbar.gen").ProgressbarProps, import("./progressbar.gen").ProgressbarState, import("./progressbar.gen").ProgressbarApi, object, import("./progressbar.gen").ProgressbarDirectives>>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: ProgressbarSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ProgressbarDefaultStructureProps = typeof __propDef.props;
-export type ProgressbarDefaultStructureEvents = typeof __propDef.events;
-export type ProgressbarDefaultStructureSlots = typeof __propDef.slots;
-export default class ProgressbarDefaultStructure extends SvelteComponent<ProgressbarDefaultStructureProps, ProgressbarDefaultStructureEvents, ProgressbarDefaultStructureSlots> {
-}
-export {};
+import type { ProgressbarContext } from './progressbar.gen';
+declare const ProgressbarDefaultStructure: import("svelte").Component<ProgressbarContext, {}, "">;
+export default ProgressbarDefaultStructure;

package/components/progressbar/index.d.ts

@@ -1,3 +1,3 @@
 import Progressbar from './Progressbar.svelte';
-export * from './progressbar';
+export * from './progressbar.gen';
 export { Progressbar };

package/components/progressbar/index.js

@@ -1,3 +1,3 @@
 import Progressbar from './Progressbar.svelte';
-export * from './progressbar';
+export * from './progressbar.gen';
 export { Progressbar };

package/components/progressbar/progressbar.gen.d.ts

@@ -6,7 +6,15 @@ import type { BSContextualClass } from '@agnos-ui/core-bootstrap/types';
  */
 declare const export_getProgressbarDefaultConfig: () => ProgressbarProps;
 export { export_getProgressbarDefaultConfig as getProgressbarDefaultConfig };
-export type ProgressbarContext = WidgetSlotContext<ProgressbarWidget>;
+/**
+ * Represents the context for a Progressbar widget.
+ * This interface is used to define the context object that is passed to the Progressbar widget.
+ */
+export interface ProgressbarContext extends WidgetSlotContext<ProgressbarWidget> {
+}
+/**
+ * Represents the state of a Progressbar component.
+ */
 export interface ProgressbarState {
     /**
      * Percentage of completion.
@@ -86,6 +94,9 @@ export interface ProgressbarState {
      */
     type: BSContextualClass | undefined;
 }
+/**
+ * Interface representing the properties for the Progressbar component.
+ */
 export interface ProgressbarProps {
     /**
      * Return the value for the 'aria-valuetext' attribute.
@@ -161,7 +172,12 @@ export interface ProgressbarProps {
      */
     type: BSContextualClass | undefined;
 }
-export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, ProgressbarApi, object, ProgressbarDirectives>;
+/**
+ * Represents a Progressbar widget.
+ *
+ * This type defines the structure of a Progressbar widget, including its properties, state, and directives.
+ */
+export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, object, ProgressbarDirectives>;
 /**
  * Create a Progressbar with given config props
  * @param config - an optional progressbar config
@@ -169,11 +185,12 @@ export type ProgressbarWidget = Widget<ProgressbarProps, ProgressbarState, Progr
  */
 declare const export_createProgressbar: WidgetFactory<ProgressbarWidget>;
 export { export_createProgressbar as createProgressbar };
+/**
+ * Interface representing directives for a progress bar component.
+ */
 export interface ProgressbarDirectives {
     /**
      * A directive to be applied to the main container that handles aria attributes.
      */
     ariaDirective: Directive;
 }
-export interface ProgressbarApi {
-}

package/components/rating/Rating.svelte

@@ -1,37 +1,43 @@
-<script>
+<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 { createRating } from "./rating";
-import { callWidgetFactory } from "../../config";
-import { Slot } from "@agnos-ui/svelte-headless/slot";
-export let rating = void 0;
-const widget = callWidgetFactory({
-  factory: createRating,
-  widgetName: "rating",
-  $$slots,
-  $$props,
-  events: {
-    onRatingChange: (value) => {
-      rating = value;
-    }
-  }
-});
-const {
-  stores: { visibleRating$, stars$, star$ },
-  directives: { containerDirective, starDirective }
-} = widget;
-$: widget.patchChangedProps($$props);
+
+	import type {RatingProps, StarContext} from './rating.gen';
+	import {createRating} from './rating.gen';
+	import {callWidgetFactory} from '../../config';
+	import {Slot} from '@agnos-ui/svelte-headless/slot';
+
+	let {rating = $bindable(), ...props}: Partial<RatingProps> = $props();
+
+	const {
+		state,
+		directives: {containerDirective, starDirective},
+	} = callWidgetFactory({
+		factory: createRating,
+		widgetName: 'rating',
+		get props() {
+			return {...props, rating};
+		},
+		enablePatchChanged: true,
+		defaultConfig: {star},
+		events: {
+			onRatingChange: (value: number) => {
+				rating = value;
+			},
+		},
+	});
 </script>
 
+{#snippet star({fill}: StarContext)}
+	{String.fromCharCode(fill === 100 ? 9733 : 9734)}
+{/snippet}
+
 <div use:containerDirective use:__AgnosUISveltePreprocess__classDirective={"d-inline-flex"} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(containerDirective, [__AgnosUISveltePreprocess__classDirective, "d-inline-flex"])}>
 	<!-- on:blur={onTouched} ?? -->
-	{#each $stars$ as { fill, index }}
-		<span class="visually-hidden">({index < $visibleRating$ ? '*' : ' '})</span>
+	{#each state.stars as { fill, index }}
+		<span class="visually-hidden">({index < state.visibleRating ? '*' : ' '})</span>
 		<span use:starDirective={{index}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([starDirective, {index}])}>
-			<Slot slotContent={$star$} props={{fill, index}} let:component let:props>
-				<svelte:fragment slot="slot" let:props><slot name="star" {...props} /></svelte:fragment>
-				<svelte:component this={component} {...props} />
-			</Slot>
+			<Slot content={state.star} props={{fill, index}} />
 		</span>
 	{/each}
 </div>

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

@@ -1,18 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { RatingProps, RatingSlots } from './rating';
-declare const __propDef: {
-    props: Partial<RatingProps>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: RatingSlots;
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-type RatingProps_ = typeof __propDef.props;
-export { RatingProps_ as RatingProps };
-export type RatingEvents = typeof __propDef.events;
-type RatingSlots_ = typeof __propDef.slots;
-export { RatingSlots_ as RatingSlots };
-export default class Rating extends SvelteComponent<RatingProps_, RatingEvents, RatingSlots_> {
-}
+import type { RatingProps } from './rating.gen';
+declare const Rating: import("svelte").Component<Partial<RatingProps>, {}, "rating">;
+export default Rating;

package/components/rating/index.d.ts

@@ -1,3 +1,3 @@
 import Rating from './Rating.svelte';
-export * from './rating';
+export * from './rating.gen';
 export { Rating };

package/components/rating/index.js

@@ -1,3 +1,3 @@
 import Rating from './Rating.svelte';
-export * from './rating';
+export * from './rating.gen';
 export { Rating };

package/components/rating/rating.gen.d.ts

@@ -5,6 +5,9 @@ import type { SlotContent, Widget, WidgetFactory, Directive } from '@agnos-ui/sv
  */
 declare const export_getRatingDefaultConfig: () => RatingProps;
 export { export_getRatingDefaultConfig as getRatingDefaultConfig };
+/**
+ * Represents the state of a rating component.
+ */
 export interface RatingState {
     /**
      * the aria value of the rating
@@ -89,6 +92,9 @@ export interface RatingState {
      */
     star: SlotContent<StarContext>;
 }
+/**
+ * Represents the properties for the Rating component.
+ */
 export interface RatingProps {
     /**
      * Return the value for the 'aria-valuetext' attribute.
@@ -201,7 +207,10 @@ export interface RatingProps {
      */
     star: SlotContent<StarContext>;
 }
-export type RatingWidget = Widget<RatingProps, RatingState, object, RatingActions, RatingDirectives>;
+/**
+ * Represents a Rating Widget component.
+ */
+export type RatingWidget = Widget<RatingProps, RatingState, RatingApi, RatingDirectives>;
 /**
  * Create a RatingWidget with given config props
  * @param config - an optional rating config
@@ -209,6 +218,9 @@ export type RatingWidget = Widget<RatingProps, RatingState, object, RatingAction
  */
 declare const export_createRating: WidgetFactory<RatingWidget>;
 export { export_createRating as createRating };
+/**
+ * Represents the context for a star in a rating component.
+ */
 export interface StarContext {
     /**
      * indicates how much the current star is filled, from 0 to 100
@@ -219,6 +231,9 @@ export interface StarContext {
      */
     index: number;
 }
+/**
+ * Interface representing directives for a rating component.
+ */
 export interface RatingDirectives {
     /**
      * A directive to be applied to the main container
@@ -232,31 +247,24 @@ export interface RatingDirectives {
         index: number;
     }>;
 }
-export interface RatingActions {
+/**
+ * Interface representing the API that can be performed on a rating component.
+ */
+export interface RatingApi {
     /**
-     * Method to be used when a star is clicked.
+     * Sets the rating value.
      *
-     * To be used in the onclick event of a star
      * @param index - Star index, starting from 1
      */
-    click(index: number): void;
+    setRating(index: number): void;
     /**
-     * Method to be used when the mouse enter in a star.
+     * Sets the hovered rating value.
      *
-     * To be used in the onmouseenter of a star
      * @param index - Star index, starting from 1
      */
-    hover(index: number): void;
+    setHoveredRating(index: number): void;
     /**
-     * Method to be used when the mouse leave the widget.
-     *
-     * To be used in the onmouseleave of the rating container
+     * Leave the rating, resetting the visible rating to the rating value and triggering the onLeave callback
      */
     leave(): void;
-    /**
-     * Method to be used to handle the keyboard.
-     *
-     * To be used in the onkeydown of the rating container
-     */
-    handleKey(event: KeyboardEvent): void;
 }