@avenirs-esr/avenirs-dsav 0.1.56 → 0.1.57

package/dist/components/interaction/selects/AvMultiselect/components/MultiselectCollapse.vue.d.ts

@@ -0,0 +1,39 @@
+import type { Slot } from 'vue';
+import type { AvMultiselectOption } from '@/components/interaction/selects/AvMultiselect/AvMultiselect.types';
+import type { UseCollapsableReturn } from '@/composables/use-collapsable/use-collapsable';
+export interface MultiselectCollapseProps {
+    isVisible: boolean;
+    selected: AvMultiselectOption[];
+    options: AvMultiselectOption[];
+    hint?: string;
+    legend?: string;
+    id: string;
+    selectAll?: boolean;
+    search?: boolean;
+    selectAllLabel?: [string, string];
+    maxOverflowHeight?: CSSStyleDeclaration['maxHeight'];
+    useCollapsableReturn: Omit<UseCollapsableReturn, 'adjust'>;
+    noResultLabel?: string;
+}
+type __VLS_Props = MultiselectCollapseProps;
+type __VLS_Slots = {
+    'legend'?: Slot;
+    'no-results'?: Slot;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: (string | number)[];
+};
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number)[]) => any;
+} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/interaction/selects/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AvAutocomplete/AvAutocomplete.types';
 export { default as AvAutocomplete } from './AvAutocomplete/AvAutocomplete.vue';
-export { default as AvMultiselect, type AvMultiselectOption, type AvMultiselectProps } from './AvMultiselect/AvMultiselect.vue';
+export type { AvMultiselectOption } from './AvMultiselect/AvMultiselect.types';
+export { default as AvMultiselect, type AvMultiselectProps } from './AvMultiselect/AvMultiselect.vue';
 export { default as AvSelect } from './AvSelect/AvSelect.vue';

package/dist/components/interaction/toggles/AvToggle/AvToggle.stories.d.ts

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/vue3';
 import { type AvToggleProps } from '@/components/interaction/toggles/AvToggle/AvToggle.vue';
 /**
+ * <h1 class="n1">Toggles - <code>AvToggle</code></h1>
+ *
  * <h2 class="n2">✨ Introduction</h2>
  *
  * <p>

package/dist/components/interaction/toggles/AvToggle/AvToggle.stub.d.ts

@@ -1,17 +1,17 @@
 export declare const AvToggleStub: import("vue").DefineComponent<{
-    name?: any;
     id?: any;
-    modelValue?: any;
+    name?: any;
     disabled?: any;
     description?: any;
+    modelValue?: any;
     activeText?: any;
     inactiveText?: any;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<{
-    name?: any;
     id?: any;
-    modelValue?: any;
+    name?: any;
     disabled?: any;
     description?: any;
+    modelValue?: any;
     activeText?: any;
     inactiveText?: any;
 }> & Readonly<{

package/dist/components/navigation/AvBreadcrumb/AvBreadcrumb.stories.d.ts

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/vue3';
 import { type AvBreadcrumbProps } from '@/components/navigation/AvBreadcrumb/AvBreadcrumb.vue';
 /**
+ * <h1 class="n1">Navigation - <code>AvBreadcrumb</code></h1>
+ *
  * <h2 class="n2">✨ Introduction</h2>
  *
  * <p>

package/dist/composables/index.d.ts

@@ -1,3 +1,4 @@
 export * from './use-av-breakpoints/use-av-breakpoints';
+export * from './use-collapsable/use-collapsable';
 export * from './use-focus-trap/use-focus-trap';
 export * from './use-global-background-color/use-global-background-color';

package/dist/composables/use-collapsable/use-collapsable.d.ts

@@ -0,0 +1,101 @@
+import type { Ref } from 'vue';
+/**
+ * Return type of the {@link useCollapsable} composable.
+ *
+ * This composable provides a reactive API to manage a collapsible section
+ * (expand/collapse behavior) in sync with DSFR's CSS-based collapse system.
+ *
+ * It exposes the current state (`collapsing`, `cssExpanded`),
+ * DOM reference (`collapse`), and imperative methods to adjust or toggle
+ * the collapsible container.
+ */
+export interface UseCollapsableReturn {
+    /**
+     * Reference to the collapsible container element.
+     * Should be bound via `ref="collapse"` in the template.
+     */
+    collapse: Ref<HTMLElement | undefined>;
+    /**
+     * Indicates whether a transition (expand/collapse animation)
+     * is currently in progress.
+     */
+    collapsing: Ref<boolean>;
+    /**
+     * Reflects the final expanded/collapsed CSS state.
+     * True if the section is expanded, false if collapsed.
+     */
+    cssExpanded: Ref<boolean>;
+    /**
+     * Programmatically toggles expansion or collapse of the container.
+     *
+     * This method updates internal CSS variables and waits for
+     * the next `requestAnimationFrame` to ensure transitions are properly triggered.
+     *
+     * @param {boolean} newValue - `true` to expand, `false` to collapse.
+     * @example
+     * ```ts
+     * const { doExpand } = useCollapsable()
+     * doExpand(true) // expands the container
+     * ```
+     */
+    doExpand: (newValue: boolean) => void;
+    /**
+     * Recomputes the current collapsible height and updates
+     * the related CSS custom properties.
+     *
+     * Should be called before starting an animation or when content changes dynamically.
+     *
+     * Mirrors DSFR’s internal behavior:
+     * {@link https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L61 collapse.js#L61}
+     */
+    adjust: () => void;
+    /**
+     * Callback to handle the end of a CSS transition.
+     *
+     * Typically attached to a `transitionend` event listener
+     * to finalize the expand/collapse state.
+     *
+     * - Resets internal flags.
+     * - Optionally focuses the first anchor (`<a>`) when expanded.
+     * - Removes collapse height restrictions when fully collapsed.
+     *
+     * @param {boolean} expanded - Final expanded state (`true` = expanded, `false` = collapsed).
+     * @param {boolean} [autoFocus=true] - If true, focus the first anchor after expansion.
+     *
+     * @example
+     * ```ts
+     * const { onTransitionEnd } = useCollapsable()
+     * collapse.value?.addEventListener('transitionend', () => onTransitionEnd(cssExpanded.value))
+     * ```
+     *
+     * @see {@link https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L25 collapse.js#L25}
+     */
+    onTransitionEnd: (expanded: boolean, autoFocus?: boolean) => void;
+}
+/**
+ * Vue composable providing a reactive API for collapsible sections,
+ * consistent with DSFR’s collapse mechanism.
+ *
+ * It manages internal CSS variables (`--collapse`, `--collapse-max-height`) and
+ * state flags (`collapsing`, `cssExpanded`) to synchronize DOM transitions.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <div ref="collapse" class="fr-collapse" @transitionend="onTransitionEnd(cssExpanded)">
+ *     <slot />
+ *   </div>
+ *   <button @click="doExpand(!cssExpanded)">Toggle</button>
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { useCollapsable } from '@avenirs-esr/avenirs-dsav'
+ *
+ * const { collapse, cssExpanded, doExpand, onTransitionEnd } = useCollapsable()
+ * </script>
+ * ```
+ *
+ * @returns {UseCollapsableReturn} Object exposing the reactive refs and methods
+ * to control collapsible elements.
+ */
+export declare function useCollapsable(): UseCollapsableReturn;

package/dist/composables/use-collapsable/use-collapsable.test.d.ts

@@ -0,0 +1 @@
+export {};