@dronico/droni-kit 1.24.2 → 1.25.0
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.
- package/CHANGELOG.md +14 -0
- package/README.md +23 -0
- package/dist/droni-kit.cjs.js +9 -9
- package/dist/droni-kit.css +1 -1
- package/dist/droni-kit.es.js +870 -774
- package/dist/index.d.ts +2 -1
- package/dist/stories/Forms/DuiForm.stories.d.ts +130 -0
- package/dist/stories/Forms/DuiForm.vue.d.ts +52 -0
- package/dist/stories/Forms/DuiInput.stories.d.ts +3 -3
- package/dist/stories/Forms/DuiInput.vue.d.ts +3 -3
- package/dist/stories/Forms/DuiSelect.stories.d.ts +3 -3
- package/dist/stories/Forms/DuiSelect.vue.d.ts +3 -3
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { default as DuiLabel } from './stories/Forms/DuiLabel.vue';
|
|
|
7
7
|
import { default as DuiCheckbox } from './stories/Forms/DuiCheckbox.vue';
|
|
8
8
|
import { default as DuiRadio } from './stories/Forms/DuiRadio.vue';
|
|
9
9
|
import { default as DuiSwitch } from './stories/Forms/DuiSwitch.vue';
|
|
10
|
+
import { default as DuiForm } from './stories/Forms/DuiForm.vue';
|
|
10
11
|
import { default as DuiAlert } from './stories/Elements/DuiAlert.vue';
|
|
11
12
|
import { default as DuiTable } from './stories/Elements/DuiTable.vue';
|
|
12
13
|
import { default as DuiAction } from './stories/Elements/DuiAction.vue';
|
|
@@ -26,4 +27,4 @@ import { default as DuiToast } from './stories/Elements/DuiToast.vue';
|
|
|
26
27
|
import { default as DuiConfirmation } from './stories/Widgets/DuiConfirmation.vue';
|
|
27
28
|
import { default as DuiNavbar } from './stories/Widgets/DuiNavbar.vue';
|
|
28
29
|
import { useToast } from './stories/Elements/useToast';
|
|
29
|
-
export { DuiButton, DuiFile, DuiInput, DuiTextarea, DuiAction, DuiCard, DuiSelect, DuiLabel, DuiCheckbox, DuiRadio, DuiSwitch, DuiAlert, DuiTable, DuiModal, DuiDrawer, DuiTooltip, DuiAccordion, DuiBadge, DuiDropdown, DuiDropdownItem, DuiDropdownSeparator, DuiPagination, DuiSkeleton, DuiTabs, DuiToast, DuiConfirmation, DuiNavbar, useToast };
|
|
30
|
+
export { DuiButton, DuiFile, DuiInput, DuiTextarea, DuiAction, DuiCard, DuiSelect, DuiLabel, DuiCheckbox, DuiRadio, DuiSwitch, DuiForm, DuiAlert, DuiTable, DuiModal, DuiDrawer, DuiTooltip, DuiAccordion, DuiBadge, DuiDropdown, DuiDropdownItem, DuiDropdownSeparator, DuiPagination, DuiSkeleton, DuiTabs, DuiToast, DuiConfirmation, DuiNavbar, useToast };
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/vue3-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: {
|
|
5
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./DuiForm.vue').DuiFormProps> & Readonly<{
|
|
6
|
+
onSubmit?: ((payload: {
|
|
7
|
+
formData: FormData;
|
|
8
|
+
event: SubmitEvent;
|
|
9
|
+
}) => any) | undefined;
|
|
10
|
+
onReset?: ((event: Event) => any) | undefined;
|
|
11
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
12
|
+
submit: (payload: {
|
|
13
|
+
formData: FormData;
|
|
14
|
+
event: SubmitEvent;
|
|
15
|
+
}) => any;
|
|
16
|
+
reset: (event: Event) => any;
|
|
17
|
+
}, import('vue').PublicProps, {
|
|
18
|
+
disabled: boolean;
|
|
19
|
+
loading: boolean;
|
|
20
|
+
novalidate: boolean;
|
|
21
|
+
method: "get" | "post";
|
|
22
|
+
action: string;
|
|
23
|
+
gap: "sm" | "md" | "lg";
|
|
24
|
+
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLFormElement, import('vue').ComponentProvideOptions, {
|
|
25
|
+
P: {};
|
|
26
|
+
B: {};
|
|
27
|
+
D: {};
|
|
28
|
+
C: {};
|
|
29
|
+
M: {};
|
|
30
|
+
Defaults: {};
|
|
31
|
+
}, Readonly<import('./DuiForm.vue').DuiFormProps> & Readonly<{
|
|
32
|
+
onSubmit?: ((payload: {
|
|
33
|
+
formData: FormData;
|
|
34
|
+
event: SubmitEvent;
|
|
35
|
+
}) => any) | undefined;
|
|
36
|
+
onReset?: ((event: Event) => any) | undefined;
|
|
37
|
+
}>, {}, {}, {}, {}, {
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
loading: boolean;
|
|
40
|
+
novalidate: boolean;
|
|
41
|
+
method: "get" | "post";
|
|
42
|
+
action: string;
|
|
43
|
+
gap: "sm" | "md" | "lg";
|
|
44
|
+
}>;
|
|
45
|
+
__isFragment?: never;
|
|
46
|
+
__isTeleport?: never;
|
|
47
|
+
__isSuspense?: never;
|
|
48
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('./DuiForm.vue').DuiFormProps> & Readonly<{
|
|
49
|
+
onSubmit?: ((payload: {
|
|
50
|
+
formData: FormData;
|
|
51
|
+
event: SubmitEvent;
|
|
52
|
+
}) => any) | undefined;
|
|
53
|
+
onReset?: ((event: Event) => any) | undefined;
|
|
54
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
55
|
+
submit: (payload: {
|
|
56
|
+
formData: FormData;
|
|
57
|
+
event: SubmitEvent;
|
|
58
|
+
}) => any;
|
|
59
|
+
reset: (event: Event) => any;
|
|
60
|
+
}, string, {
|
|
61
|
+
disabled: boolean;
|
|
62
|
+
loading: boolean;
|
|
63
|
+
novalidate: boolean;
|
|
64
|
+
method: "get" | "post";
|
|
65
|
+
action: string;
|
|
66
|
+
gap: "sm" | "md" | "lg";
|
|
67
|
+
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
68
|
+
$slots: {
|
|
69
|
+
header?(_: {}): any;
|
|
70
|
+
default?(_: {}): any;
|
|
71
|
+
footer?(_: {}): any;
|
|
72
|
+
};
|
|
73
|
+
});
|
|
74
|
+
tags: string[];
|
|
75
|
+
argTypes: {
|
|
76
|
+
novalidate: {
|
|
77
|
+
control: {
|
|
78
|
+
type: "boolean";
|
|
79
|
+
};
|
|
80
|
+
description: string;
|
|
81
|
+
};
|
|
82
|
+
loading: {
|
|
83
|
+
control: {
|
|
84
|
+
type: "boolean";
|
|
85
|
+
};
|
|
86
|
+
description: string;
|
|
87
|
+
};
|
|
88
|
+
disabled: {
|
|
89
|
+
control: {
|
|
90
|
+
type: "boolean";
|
|
91
|
+
};
|
|
92
|
+
description: string;
|
|
93
|
+
};
|
|
94
|
+
method: {
|
|
95
|
+
control: {
|
|
96
|
+
type: "select";
|
|
97
|
+
};
|
|
98
|
+
options: string[];
|
|
99
|
+
description: string;
|
|
100
|
+
};
|
|
101
|
+
action: {
|
|
102
|
+
control: {
|
|
103
|
+
type: "text";
|
|
104
|
+
};
|
|
105
|
+
description: string;
|
|
106
|
+
};
|
|
107
|
+
gap: {
|
|
108
|
+
control: {
|
|
109
|
+
type: "select";
|
|
110
|
+
};
|
|
111
|
+
options: string[];
|
|
112
|
+
description: string;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
parameters: {
|
|
116
|
+
docs: {
|
|
117
|
+
description: {
|
|
118
|
+
component: string;
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
export default meta;
|
|
124
|
+
type Story = StoryObj<typeof meta>;
|
|
125
|
+
export declare const Default: Story;
|
|
126
|
+
export declare const Loading: Story;
|
|
127
|
+
export declare const Disabled: Story;
|
|
128
|
+
export declare const GapVariants: Story;
|
|
129
|
+
export declare const FullFormExample: Story;
|
|
130
|
+
export declare const Minimal: Story;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export interface DuiFormProps {
|
|
2
|
+
/** Disable native browser form validation (useful for custom validation) */
|
|
3
|
+
novalidate?: boolean;
|
|
4
|
+
/** Show loading overlay and disable all fields */
|
|
5
|
+
loading?: boolean;
|
|
6
|
+
/** Visually disable all form fields */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Native form method */
|
|
9
|
+
method?: 'get' | 'post';
|
|
10
|
+
/** Native form action URL */
|
|
11
|
+
action?: string;
|
|
12
|
+
/** Gap between form fields */
|
|
13
|
+
gap?: 'sm' | 'md' | 'lg';
|
|
14
|
+
}
|
|
15
|
+
declare function __VLS_template(): {
|
|
16
|
+
attrs: Partial<{}>;
|
|
17
|
+
slots: {
|
|
18
|
+
header?(_: {}): any;
|
|
19
|
+
default?(_: {}): any;
|
|
20
|
+
footer?(_: {}): any;
|
|
21
|
+
};
|
|
22
|
+
refs: {};
|
|
23
|
+
rootEl: HTMLFormElement;
|
|
24
|
+
};
|
|
25
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
26
|
+
declare const __VLS_component: import('vue').DefineComponent<DuiFormProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
27
|
+
submit: (payload: {
|
|
28
|
+
formData: FormData;
|
|
29
|
+
event: SubmitEvent;
|
|
30
|
+
}) => any;
|
|
31
|
+
reset: (event: Event) => any;
|
|
32
|
+
}, string, import('vue').PublicProps, Readonly<DuiFormProps> & Readonly<{
|
|
33
|
+
onSubmit?: ((payload: {
|
|
34
|
+
formData: FormData;
|
|
35
|
+
event: SubmitEvent;
|
|
36
|
+
}) => any) | undefined;
|
|
37
|
+
onReset?: ((event: Event) => any) | undefined;
|
|
38
|
+
}>, {
|
|
39
|
+
disabled: boolean;
|
|
40
|
+
loading: boolean;
|
|
41
|
+
novalidate: boolean;
|
|
42
|
+
method: "get" | "post";
|
|
43
|
+
action: string;
|
|
44
|
+
gap: "sm" | "md" | "lg";
|
|
45
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
|
|
46
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
47
|
+
export default _default;
|
|
48
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
49
|
+
new (): {
|
|
50
|
+
$slots: S;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
@@ -3,7 +3,7 @@ declare const meta: {
|
|
|
3
3
|
title: string;
|
|
4
4
|
component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
5
5
|
modelValue: {
|
|
6
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
6
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
7
7
|
default: string;
|
|
8
8
|
};
|
|
9
9
|
size: {
|
|
@@ -22,7 +22,7 @@ declare const meta: {
|
|
|
22
22
|
"update:modelValue": (value: string) => any;
|
|
23
23
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
24
24
|
modelValue: {
|
|
25
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
25
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
26
26
|
default: string;
|
|
27
27
|
};
|
|
28
28
|
size: {
|
|
@@ -43,7 +43,7 @@ declare const meta: {
|
|
|
43
43
|
size: "sm" | "md" | "lg";
|
|
44
44
|
block: boolean;
|
|
45
45
|
rounded: "all" | "top" | "bottom" | "left" | "right" | "none";
|
|
46
|
-
modelValue: string | number;
|
|
46
|
+
modelValue: string | number | null;
|
|
47
47
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
48
48
|
tags: string[];
|
|
49
49
|
argTypes: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
2
|
modelValue: {
|
|
3
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
3
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
4
4
|
default: string;
|
|
5
5
|
};
|
|
6
6
|
size: {
|
|
@@ -19,7 +19,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
19
19
|
"update:modelValue": (value: string) => any;
|
|
20
20
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
21
21
|
modelValue: {
|
|
22
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
22
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
23
23
|
default: string;
|
|
24
24
|
};
|
|
25
25
|
size: {
|
|
@@ -40,6 +40,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
40
40
|
size: "sm" | "md" | "lg";
|
|
41
41
|
block: boolean;
|
|
42
42
|
rounded: "all" | "top" | "bottom" | "left" | "right" | "none";
|
|
43
|
-
modelValue: string | number;
|
|
43
|
+
modelValue: string | number | null;
|
|
44
44
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
45
45
|
export default _default;
|
|
@@ -3,7 +3,7 @@ declare const meta: {
|
|
|
3
3
|
title: string;
|
|
4
4
|
component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
5
5
|
modelValue: {
|
|
6
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
6
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
7
7
|
default: string;
|
|
8
8
|
};
|
|
9
9
|
options: {
|
|
@@ -38,7 +38,7 @@ declare const meta: {
|
|
|
38
38
|
"update:modelValue": (value: string | number) => any;
|
|
39
39
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
40
40
|
modelValue: {
|
|
41
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
41
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
42
42
|
default: string;
|
|
43
43
|
};
|
|
44
44
|
options: {
|
|
@@ -75,7 +75,7 @@ declare const meta: {
|
|
|
75
75
|
size: "sm" | "md" | "lg";
|
|
76
76
|
block: boolean;
|
|
77
77
|
rounded: "all" | "top" | "bottom" | "left" | "right" | "none";
|
|
78
|
-
modelValue: string | number;
|
|
78
|
+
modelValue: string | number | null;
|
|
79
79
|
placeholder: string;
|
|
80
80
|
options: Record<string, any>[];
|
|
81
81
|
itemLabel: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
2
2
|
modelValue: {
|
|
3
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
3
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
4
4
|
default: string;
|
|
5
5
|
};
|
|
6
6
|
options: {
|
|
@@ -35,7 +35,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
35
35
|
"update:modelValue": (value: string | number) => any;
|
|
36
36
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
37
37
|
modelValue: {
|
|
38
|
-
type: (StringConstructor | NumberConstructor)[];
|
|
38
|
+
type: (StringConstructor | NumberConstructor | null)[];
|
|
39
39
|
default: string;
|
|
40
40
|
};
|
|
41
41
|
options: {
|
|
@@ -72,7 +72,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
72
72
|
size: "sm" | "md" | "lg";
|
|
73
73
|
block: boolean;
|
|
74
74
|
rounded: "all" | "top" | "bottom" | "left" | "right" | "none";
|
|
75
|
-
modelValue: string | number;
|
|
75
|
+
modelValue: string | number | null;
|
|
76
76
|
placeholder: string;
|
|
77
77
|
options: Record<string, any>[];
|
|
78
78
|
itemLabel: string;
|