@avenirs-esr/avenirs-dsav 0.1.118 → 0.1.119
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.
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { Meta, StoryFn } from '@storybook/vue3';
|
|
2
|
+
import { type AvPeriodInputProps } from '@/components/interaction/inputs/AvPeriodInput/AvPeriodInput.vue';
|
|
3
|
+
/**
|
|
4
|
+
* <h2 class="n2">✨ Introduction</h2>
|
|
5
|
+
*
|
|
6
|
+
* <p>
|
|
7
|
+
* <span class="b2-regular">
|
|
8
|
+
* The <code>AvPeriodInput</code> component allows users to select a period
|
|
9
|
+
* by choosing a start date and an end date under a single label.
|
|
10
|
+
* </span>
|
|
11
|
+
* </p>
|
|
12
|
+
*
|
|
13
|
+
* <h2 class="n2">🏗️ Structure</h2>
|
|
14
|
+
*
|
|
15
|
+
* <p>
|
|
16
|
+
* <span class="b2-regular">The period input is composed of:</span>
|
|
17
|
+
* </p>
|
|
18
|
+
*
|
|
19
|
+
* <ul>
|
|
20
|
+
* <li><span class="b2-regular">a wrapper label</span></li>
|
|
21
|
+
* <li><span class="b2-regular">a start date input</span></li>
|
|
22
|
+
* <li><span class="b2-regular">a spacer separator</span></li>
|
|
23
|
+
* <li><span class="b2-regular">an end date input</span></li>
|
|
24
|
+
* </ul>
|
|
25
|
+
*
|
|
26
|
+
* <h2 class="n2">🔁 Built-in range behavior</h2>
|
|
27
|
+
*
|
|
28
|
+
* <p>
|
|
29
|
+
* <span class="b2-regular">
|
|
30
|
+
* Selecting a start date automatically constrains the end date minimum, and selecting
|
|
31
|
+
* an end date automatically constrains the start date maximum.
|
|
32
|
+
* </span>
|
|
33
|
+
* </p>
|
|
34
|
+
*/
|
|
35
|
+
declare const meta: Meta<AvPeriodInputProps>;
|
|
36
|
+
export default meta;
|
|
37
|
+
export declare const Default: StoryFn<AvPeriodInputProps>;
|
|
38
|
+
export declare const Prefilled: StoryFn<AvPeriodInputProps>;
|
|
39
|
+
export declare const WithWidth: StoryFn<AvPeriodInputProps>;
|
|
40
|
+
export declare const WithCustomSpacing: StoryFn<AvPeriodInputProps>;
|
|
41
|
+
export declare const Disabled: StoryFn<AvPeriodInputProps>;
|
|
42
|
+
export declare const Stacked: StoryFn<AvPeriodInputProps>;
|
|
43
|
+
export declare const WithExternalBounds: StoryFn<AvPeriodInputProps>;
|
|
44
|
+
export declare const WithRangeBehavior: StoryFn<AvPeriodInputProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AvPeriodInput component.
|
|
3
|
+
*
|
|
4
|
+
* This component renders two date inputs (start/end) under a single label.
|
|
5
|
+
* It is designed to be used for period/range selection.
|
|
6
|
+
*/
|
|
7
|
+
export interface AvPeriodInputProps {
|
|
8
|
+
/**
|
|
9
|
+
* Unique id for the period input
|
|
10
|
+
* @default `period-input-${crypto.randomUUID()}`
|
|
11
|
+
*/
|
|
12
|
+
id?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Label displayed above the two inputs
|
|
15
|
+
*/
|
|
16
|
+
label: string;
|
|
17
|
+
/**
|
|
18
|
+
* Start date value (ISO string: YYYY-MM-DD)
|
|
19
|
+
* @default ''
|
|
20
|
+
*/
|
|
21
|
+
startModelValue?: string;
|
|
22
|
+
/**
|
|
23
|
+
* End date value (ISO string: YYYY-MM-DD)
|
|
24
|
+
* @default ''
|
|
25
|
+
*/
|
|
26
|
+
endModelValue?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Label for the start input (optional).
|
|
29
|
+
* Note: the internal labels are hidden by default since this component has a single wrapper label.
|
|
30
|
+
*/
|
|
31
|
+
startLabel: string;
|
|
32
|
+
/**
|
|
33
|
+
* Label for the end input (optional).
|
|
34
|
+
* Note: the internal labels are hidden by default since this component has a single wrapper label.
|
|
35
|
+
*/
|
|
36
|
+
endLabel: string;
|
|
37
|
+
/**
|
|
38
|
+
* If `true`, disable both inputs
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Optional width for both inputs (CSS value)
|
|
44
|
+
* e.g. '14.875rem', '240px', '100%'
|
|
45
|
+
*/
|
|
46
|
+
width?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Minimum selectable date for the start input
|
|
49
|
+
*/
|
|
50
|
+
startMinDate?: Date;
|
|
51
|
+
/**
|
|
52
|
+
* Maximum selectable date for the start input
|
|
53
|
+
*/
|
|
54
|
+
startMaxDate?: Date;
|
|
55
|
+
/**
|
|
56
|
+
* Minimum selectable date for the end input
|
|
57
|
+
*/
|
|
58
|
+
endMinDate?: Date;
|
|
59
|
+
/**
|
|
60
|
+
* Maximum selectable date for the end input
|
|
61
|
+
*/
|
|
62
|
+
endMaxDate?: Date;
|
|
63
|
+
/**
|
|
64
|
+
* If `true`, stack inputs vertically (useful for mobile layouts)
|
|
65
|
+
* @default false
|
|
66
|
+
*/
|
|
67
|
+
stacked?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Spacing between start and end inputs.
|
|
70
|
+
* Accepts any valid CSS length (e.g. '0.5rem', '1rem', '16px').
|
|
71
|
+
* @default var(--spacing-sm)
|
|
72
|
+
*/
|
|
73
|
+
separatorSpacing?: string;
|
|
74
|
+
}
|
|
75
|
+
declare const _default: import("vue").DefineComponent<AvPeriodInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
76
|
+
change: (payload: {
|
|
77
|
+
start: string;
|
|
78
|
+
end: string;
|
|
79
|
+
}) => any;
|
|
80
|
+
"update:startModelValue": (payload: string) => any;
|
|
81
|
+
"update:endModelValue": (payload: string) => any;
|
|
82
|
+
}, string, import("vue").PublicProps, Readonly<AvPeriodInputProps> & Readonly<{
|
|
83
|
+
onChange?: ((payload: {
|
|
84
|
+
start: string;
|
|
85
|
+
end: string;
|
|
86
|
+
}) => any) | undefined;
|
|
87
|
+
"onUpdate:startModelValue"?: ((payload: string) => any) | undefined;
|
|
88
|
+
"onUpdate:endModelValue"?: ((payload: string) => any) | undefined;
|
|
89
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
90
|
+
export default _default;
|