@avenirs-esr/avenirs-dsav 0.1.82 → 0.1.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,17 +7,37 @@ import { type AvCardProps } from '@/components/cards/AvCard/AvCard.vue';
7
7
  *
8
8
  * <p>
9
9
  * <span class="b2-regular">
10
- * The <code>AvCard</code> card is a component for creating customizable styled containers.
10
+ * The <code>AvCard</code> component is used to create customizable, styled containers.
11
+ * It provides a structured layout with optional sections and can include collapsible behavior
12
+ * for advanced interactions.
11
13
  * </span>
12
14
  * </p>
13
15
  *
14
16
  * <h2 class="n2">🏗️ Structure</h2>
15
17
  *
18
+ * <ul>
19
+ * <li>
20
+ * <span class="b2-regular">A main wrapper <code>div</code>.</span>
21
+ * </li>
22
+ * <li>
23
+ * <span class="b2-regular">A title area rendered through the <code>title</code> slot.</span>
24
+ * </li>
25
+ * <li>
26
+ * <span class="b2-regular">A <code>default</code> slot for general content.</span>
27
+ * </li>
28
+ * <li>
29
+ * <span class="b2-regular">A body section rendered through the <code>body</code> slot.</span>
30
+ * </li>
31
+ * <li>
32
+ * <span class="b2-regular">A footer section rendered through the <code>footer</code> slot.</span>
33
+ * </li>
34
+ * </ul>
35
+ *
16
36
  * <p>
17
37
  * <span class="b2-regular">
18
- * The card is composed of a main <code>div</code> containing a div for the title (slot <code>title</code>),
19
- * a generic slot by default, a div for the body (slot <code>body</code>) as well as a div for the footer
20
- * (slot <code>footer</code>).
38
+ * When the <code>collapsible</code> prop is enabled, the card displays only the
39
+ * <code>title</code> slot along with a toggle button that expands or collapses
40
+ * the rest of the content.
21
41
  * </span>
22
42
  * </p>
23
43
  */
@@ -26,3 +46,5 @@ export default meta;
26
46
  export declare const Default: StoryFn<AvCardProps>;
27
47
  export declare const WithCustomColors: StoryFn<AvCardProps>;
28
48
  export declare const WithOnlyDefaultSlot: StoryFn<AvCardProps>;
49
+ export declare const Collapsible: StoryFn<AvCardProps>;
50
+ export declare const CollapsedByDefault: StoryFn<AvCardProps>;
@@ -22,6 +22,17 @@ export interface AvCardProps {
22
22
  * The height of the card title.
23
23
  */
24
24
  titleHeight?: string;
25
+ /**
26
+ * Whether the card is collapsible. When collapsed, the title is still shown.
27
+ * This requires a title slot to be provided.
28
+ * @default false
29
+ */
30
+ collapsible?: boolean;
31
+ /**
32
+ * Whether the card is collapsed by default (only if collapsible is true).
33
+ * @default false
34
+ */
35
+ collapsed?: boolean;
25
36
  }
26
37
  /**
27
38
  * Slots available in the AvCard component.
@@ -514,6 +514,8 @@ export declare const WithCustomItemSlotExample: {
514
514
  CHECKBOX_MARKED: string;
515
515
  CHEVRON_DOUBLE_LEFT: string;
516
516
  CHEVRON_DOUBLE_RIGHT: string;
517
+ CHEVRON_DOWN: string;
518
+ CHEVRON_LEFT: string;
517
519
  CIRCLE: string;
518
520
  CLOSE_CIRCLE_OUTLINE: string;
519
521
  CLOSE_OCTAGON: string;