@maltjoy/core-vue 1.0.0-beta.1 → 1.0.0-beta.11
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/README.md +1 -0
- package/dist/components/JoyBadge/JoyBadge.types.d.ts +2 -0
- package/dist/components/JoyBadge/VJoyBadge.vue.d.ts +58 -0
- package/dist/components/JoyButton/JoyButton.types.d.ts +2 -5
- package/dist/components/JoyButton/VJoyButton.vue.d.ts +25 -15
- package/dist/components/JoyCheckbox/VJoyCheckbox.vue.d.ts +25 -2
- package/dist/components/JoyCounter/VJoyCounter.vue.d.ts +6 -6
- package/dist/components/JoyDropdown/JoyDropdown.types.d.ts +4 -0
- package/dist/components/JoyDropdown/VJoyDropdown.vue.d.ts +190 -0
- package/dist/components/JoyDropdownList/JoyDropdownList.types.d.ts +3 -0
- package/dist/components/JoyDropdownList/VJoyDropdownList.vue.d.ts +93 -0
- package/dist/components/JoyHighlight/JoyHighlight.types.d.ts +1 -1
- package/dist/components/JoyHighlight/VJoyHighlight.vue.d.ts +3 -3
- package/dist/components/JoyInput/VJoyInput.vue.d.ts +4 -4
- package/dist/components/JoyLabel/VJoyLabel.vue.d.ts +5 -3
- package/dist/components/JoyLink/VJoyLink.vue.d.ts +2 -0
- package/dist/components/JoyMultiCheckbox/VJoyMultiCheckbox.vue.d.ts +11 -13
- package/dist/components/JoyPanel/JoyPanel.types.d.ts +2 -0
- package/dist/components/JoyPanel/VJoyPanel.vue.d.ts +15 -3
- package/dist/components/JoyRadioGroup/JoyRadioGroup.types.d.ts +2 -0
- package/dist/components/JoySelect/VJoySelect.vue.d.ts +5 -5
- package/dist/components/JoySelectableItem/VJoySelectableItem.vue.d.ts +2 -2
- package/dist/components/JoySelectableItemGroup/VJoySelectableItemGroup.vue.d.ts +4 -4
- package/dist/components/JoyTemplate/VJoyTemplate.vue.d.ts +1 -0
- package/dist/components/JoyTextarea/VJoyTextarea.vue.d.ts +4 -4
- package/dist/components/JoyToggle/VJoyToggle.vue.d.ts +2 -2
- package/dist/components/JoyWrapper/VJoyWrapper.vue.d.ts +19 -2
- package/dist/components/index.d.ts +4 -1
- package/dist/composables/events.d.ts +5 -0
- package/dist/composables/index.d.ts +1 -0
- package/dist/composables/props.d.ts +1 -1
- package/dist/joy-vue.js +1737 -605
- package/dist/joy-vue.umd.cjs +1 -1
- package/dist/style.css +1 -1
- package/dist/tests/composables/test-components/CheckboxFormProps.vue.d.ts +2 -2
- package/dist/tests/composables/test-components/GenericFormPropsWithLabel.vue.d.ts +3 -3
- package/dist/types/index.d.ts +1 -0
- package/joy-components.d.ts +27 -24
- package/package.json +20 -15
package/README.md
CHANGED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { VariantsTypes } from './JoyBadge.types';
|
|
3
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
4
|
+
/**
|
|
5
|
+
* Display the colored bulletpoint on the left
|
|
6
|
+
*/
|
|
7
|
+
bulletpoint: {
|
|
8
|
+
type: BooleanConstructor;
|
|
9
|
+
default: boolean;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Use label or slot in order to inject the text.
|
|
13
|
+
*/
|
|
14
|
+
label: {
|
|
15
|
+
type: StringConstructor;
|
|
16
|
+
default: string;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Color of the badge. Override the color with `--badge-bg-color` and `--badge-circle-color` if needed
|
|
20
|
+
*/
|
|
21
|
+
variant: {
|
|
22
|
+
type: PropType<"info" | "gray" | "green" | "orange" | "red" | "teal" | "turquoise" | "dark-blue" | "pink" | "yellow">;
|
|
23
|
+
validator(variant: VariantsTypes): boolean;
|
|
24
|
+
};
|
|
25
|
+
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
26
|
+
/**
|
|
27
|
+
* Display the colored bulletpoint on the left
|
|
28
|
+
*/
|
|
29
|
+
bulletpoint: {
|
|
30
|
+
type: BooleanConstructor;
|
|
31
|
+
default: boolean;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Use label or slot in order to inject the text.
|
|
35
|
+
*/
|
|
36
|
+
label: {
|
|
37
|
+
type: StringConstructor;
|
|
38
|
+
default: string;
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* Color of the badge. Override the color with `--badge-bg-color` and `--badge-circle-color` if needed
|
|
42
|
+
*/
|
|
43
|
+
variant: {
|
|
44
|
+
type: PropType<"info" | "gray" | "green" | "orange" | "red" | "teal" | "turquoise" | "dark-blue" | "pink" | "yellow">;
|
|
45
|
+
validator(variant: VariantsTypes): boolean;
|
|
46
|
+
};
|
|
47
|
+
}>>, {
|
|
48
|
+
label: string;
|
|
49
|
+
bulletpoint: boolean;
|
|
50
|
+
}>, {
|
|
51
|
+
default: (_: {}) => any;
|
|
52
|
+
}>;
|
|
53
|
+
export default _default;
|
|
54
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
55
|
+
new (): {
|
|
56
|
+
$slots: S;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { GENERIC_VARIANTS, SIZES } from '@/types';
|
|
1
|
+
import { GENERIC_VARIANTS, SIZES, POSITIONS } from '@/types';
|
|
2
2
|
/** BUTTON VARIANTS/COLORS */
|
|
3
3
|
declare const BUTTONS_SPECIFIC_VARIANTS: readonly ["main", "admin", "ghost"];
|
|
4
4
|
export declare const BUTTON_VARIANTS: ((typeof GENERIC_VARIANTS)[number] | (typeof BUTTONS_SPECIFIC_VARIANTS)[number])[];
|
|
@@ -6,8 +6,5 @@ export type ButtonVariants = (typeof BUTTON_VARIANTS)[number];
|
|
|
6
6
|
/** BUTTON SIZES */
|
|
7
7
|
export type ButtonSizes = Exclude<(typeof SIZES)[number], 'xlarge'>;
|
|
8
8
|
export declare const BUTTON_SIZES: ButtonSizes[];
|
|
9
|
-
|
|
10
|
-
type ButtonSpecificIconsSizes = Exclude<(typeof SIZES)[number], 'xlarge' | 'large' | 'medium'>;
|
|
11
|
-
export declare const ICON_SIZES: ButtonSpecificIconsSizes[];
|
|
12
|
-
export type IconSizes = (typeof ICON_SIZES)[number];
|
|
9
|
+
export type ButtonIconPositions = (typeof POSITIONS)[number];
|
|
13
10
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ButtonSizes, ButtonVariants
|
|
1
|
+
import { ButtonSizes, ButtonVariants } from './JoyButton.types';
|
|
2
2
|
import { PropType } from 'vue';
|
|
3
3
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
4
4
|
/**
|
|
@@ -11,6 +11,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
11
11
|
};
|
|
12
12
|
/** Name of the icon, placed before the text */
|
|
13
13
|
icon: StringConstructor;
|
|
14
|
+
/** Left to the text or right */
|
|
15
|
+
iconPosition: {
|
|
16
|
+
type: PropType<"left" | "right">;
|
|
17
|
+
default: string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Use default slot or label property.
|
|
21
|
+
*/
|
|
22
|
+
label: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
};
|
|
14
25
|
/** Change the component's state and display a JoySpinner. */
|
|
15
26
|
loading: {
|
|
16
27
|
type: BooleanConstructor;
|
|
@@ -28,12 +39,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
28
39
|
default: string;
|
|
29
40
|
validator(variant: ButtonSizes): boolean;
|
|
30
41
|
};
|
|
31
|
-
/** Override the icon size. Default to xsmall */
|
|
32
|
-
iconSize: {
|
|
33
|
-
type: PropType<"small" | "xxsmall" | "xsmall">;
|
|
34
|
-
default: string;
|
|
35
|
-
validator(iconSize: IconSizes): boolean;
|
|
36
|
-
};
|
|
37
42
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
38
43
|
/**
|
|
39
44
|
* If you only need a button with an icon. To keep your component accessible, you can give a text as slot, it will be used as title and aria-label.
|
|
@@ -45,6 +50,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
45
50
|
};
|
|
46
51
|
/** Name of the icon, placed before the text */
|
|
47
52
|
icon: StringConstructor;
|
|
53
|
+
/** Left to the text or right */
|
|
54
|
+
iconPosition: {
|
|
55
|
+
type: PropType<"left" | "right">;
|
|
56
|
+
default: string;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* Use default slot or label property.
|
|
60
|
+
*/
|
|
61
|
+
label: {
|
|
62
|
+
type: StringConstructor;
|
|
63
|
+
};
|
|
48
64
|
/** Change the component's state and display a JoySpinner. */
|
|
49
65
|
loading: {
|
|
50
66
|
type: BooleanConstructor;
|
|
@@ -62,18 +78,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
62
78
|
default: string;
|
|
63
79
|
validator(variant: ButtonSizes): boolean;
|
|
64
80
|
};
|
|
65
|
-
/** Override the icon size. Default to xsmall */
|
|
66
|
-
iconSize: {
|
|
67
|
-
type: PropType<"small" | "xxsmall" | "xsmall">;
|
|
68
|
-
default: string;
|
|
69
|
-
validator(iconSize: IconSizes): boolean;
|
|
70
|
-
};
|
|
71
81
|
}>>, {
|
|
72
82
|
circle: boolean;
|
|
73
|
-
loading: boolean;
|
|
74
83
|
variant: "main" | "ghost" | "secondary" | "primary" | "admin";
|
|
84
|
+
iconPosition: "left" | "right";
|
|
85
|
+
loading: boolean;
|
|
75
86
|
size: ButtonSizes;
|
|
76
|
-
iconSize: "small" | "xxsmall" | "xsmall";
|
|
77
87
|
}>, {
|
|
78
88
|
default: (_: {}) => any;
|
|
79
89
|
}>;
|
|
@@ -4,6 +4,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
4
4
|
type: BooleanConstructor;
|
|
5
5
|
default: boolean;
|
|
6
6
|
};
|
|
7
|
+
/**
|
|
8
|
+
* Internal purpose in order to prevent double focus mark on selectable-item
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
displayFocus: {
|
|
12
|
+
type: BooleanConstructor;
|
|
13
|
+
default: boolean;
|
|
14
|
+
};
|
|
7
15
|
/** Use it to replace the default slot */
|
|
8
16
|
label: {
|
|
9
17
|
type: StringConstructor;
|
|
@@ -37,12 +45,24 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
37
45
|
isIndeterminate: import("vue").Ref<boolean>;
|
|
38
46
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
39
47
|
"update:checked": (value: boolean) => void;
|
|
48
|
+
} & {
|
|
49
|
+
focus: () => void;
|
|
50
|
+
} & {
|
|
51
|
+
blur: () => void;
|
|
40
52
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
41
53
|
/** Can't be used in addition of v-model. See usage : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes */
|
|
42
54
|
indeterminate: {
|
|
43
55
|
type: BooleanConstructor;
|
|
44
56
|
default: boolean;
|
|
45
57
|
};
|
|
58
|
+
/**
|
|
59
|
+
* Internal purpose in order to prevent double focus mark on selectable-item
|
|
60
|
+
* @internal
|
|
61
|
+
*/
|
|
62
|
+
displayFocus: {
|
|
63
|
+
type: BooleanConstructor;
|
|
64
|
+
default: boolean;
|
|
65
|
+
};
|
|
46
66
|
/** Use it to replace the default slot */
|
|
47
67
|
label: {
|
|
48
68
|
type: StringConstructor;
|
|
@@ -73,12 +93,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
73
93
|
default: boolean;
|
|
74
94
|
};
|
|
75
95
|
}>> & {
|
|
96
|
+
onFocus?: (() => any) | undefined;
|
|
97
|
+
onBlur?: (() => any) | undefined;
|
|
76
98
|
"onUpdate:checked"?: ((value: boolean) => any) | undefined;
|
|
77
99
|
}, {
|
|
100
|
+
value: string;
|
|
101
|
+
checked: boolean;
|
|
78
102
|
disabled: boolean;
|
|
79
103
|
indeterminate: boolean;
|
|
80
|
-
|
|
81
|
-
value: string;
|
|
104
|
+
displayFocus: boolean;
|
|
82
105
|
required: boolean;
|
|
83
106
|
}>, {
|
|
84
107
|
default: (_: {}) => any;
|
|
@@ -23,7 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
23
23
|
label: StringConstructor;
|
|
24
24
|
/** Overrides the default label size. See JoyLabel stories */
|
|
25
25
|
labelSize: {
|
|
26
|
-
type: PropType<"small" | "
|
|
26
|
+
type: PropType<"small" | "medium" | "large">;
|
|
27
27
|
default: string;
|
|
28
28
|
};
|
|
29
29
|
/** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
|
|
@@ -86,7 +86,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
86
86
|
label: StringConstructor;
|
|
87
87
|
/** Overrides the default label size. See JoyLabel stories */
|
|
88
88
|
labelSize: {
|
|
89
|
-
type: PropType<"small" | "
|
|
89
|
+
type: PropType<"small" | "medium" | "large">;
|
|
90
90
|
default: string;
|
|
91
91
|
};
|
|
92
92
|
/** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
|
|
@@ -151,7 +151,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
151
151
|
label: StringConstructor;
|
|
152
152
|
/** Overrides the default label size. See JoyLabel stories */
|
|
153
153
|
labelSize: {
|
|
154
|
-
type: PropType<"small" | "
|
|
154
|
+
type: PropType<"small" | "medium" | "large">;
|
|
155
155
|
default: string;
|
|
156
156
|
};
|
|
157
157
|
/** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
|
|
@@ -194,12 +194,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
194
194
|
}, {
|
|
195
195
|
disabled: boolean;
|
|
196
196
|
required: boolean;
|
|
197
|
-
invalid: boolean;
|
|
198
|
-
labelSize: "small" | "large" | "medium";
|
|
199
|
-
requiredMark: boolean;
|
|
200
197
|
modelValue: number;
|
|
201
198
|
min: number;
|
|
202
199
|
step: number;
|
|
200
|
+
invalid: boolean;
|
|
201
|
+
labelSize: "small" | "medium" | "large";
|
|
202
|
+
requiredMark: boolean;
|
|
203
203
|
}>, {
|
|
204
204
|
default: (_: {}) => any;
|
|
205
205
|
}>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const DROPDOWN_DIRECTIONS: readonly ["up", "down"];
|
|
2
|
+
export type DropdownDirections = (typeof DROPDOWN_DIRECTIONS)[number];
|
|
3
|
+
export declare const DROPDOWN_JUSTIFY: readonly ["left", "right"];
|
|
4
|
+
export type DropdownJustify = (typeof DROPDOWN_JUSTIFY)[number];
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { DropdownListSizes } from '../JoyDropdownList/JoyDropdownList.types';
|
|
3
|
+
export interface Option {
|
|
4
|
+
id?: string;
|
|
5
|
+
value?: string;
|
|
6
|
+
label: string;
|
|
7
|
+
href?: string;
|
|
8
|
+
/**
|
|
9
|
+
* @default false
|
|
10
|
+
*/
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
15
|
+
checked?: boolean;
|
|
16
|
+
[k: string]: any;
|
|
17
|
+
}
|
|
18
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
19
|
+
/** DOM valid selector to give to Vue3 Teleport "to" property */
|
|
20
|
+
appendTo: {
|
|
21
|
+
type: PropType<string | import("vue").RendererElement | null | undefined>;
|
|
22
|
+
default: string;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Disable teleport for testing purpose mostly.
|
|
26
|
+
*/
|
|
27
|
+
disableTeleport: {
|
|
28
|
+
type: BooleanConstructor;
|
|
29
|
+
default: boolean;
|
|
30
|
+
};
|
|
31
|
+
/** close the dropdown list when clicking on any item. Default to false */
|
|
32
|
+
closeOnSelect: {
|
|
33
|
+
type: BooleanConstructor;
|
|
34
|
+
default: boolean;
|
|
35
|
+
};
|
|
36
|
+
/** Dropdown vertical position according to the trigger */
|
|
37
|
+
direction: {
|
|
38
|
+
type: PropType<"down" | "up">;
|
|
39
|
+
default: string;
|
|
40
|
+
};
|
|
41
|
+
/** Dropdown horizontal justify according to the trigger */
|
|
42
|
+
justify: {
|
|
43
|
+
type: PropType<"left" | "right">;
|
|
44
|
+
default: string;
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* ```
|
|
48
|
+
* interface Option {id?: string; value?: string; label: string; href?: string; disabled?:boolean; checked?:boolean}
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
51
|
+
options: {
|
|
52
|
+
type: PropType<Option[]>;
|
|
53
|
+
validator(value: Array<Option>): boolean;
|
|
54
|
+
default(): never[];
|
|
55
|
+
};
|
|
56
|
+
size: {
|
|
57
|
+
type: PropType<DropdownListSizes>;
|
|
58
|
+
default: string;
|
|
59
|
+
validator(size: DropdownListSizes): boolean;
|
|
60
|
+
};
|
|
61
|
+
modelValue: {
|
|
62
|
+
type: StringConstructor;
|
|
63
|
+
default: string;
|
|
64
|
+
};
|
|
65
|
+
/**
|
|
66
|
+
* Space between the trigger and the list
|
|
67
|
+
*/
|
|
68
|
+
dropdownGap: {
|
|
69
|
+
type: StringConstructor;
|
|
70
|
+
default: string;
|
|
71
|
+
};
|
|
72
|
+
/**
|
|
73
|
+
* Max-width of the dropdown list
|
|
74
|
+
*/
|
|
75
|
+
width: {
|
|
76
|
+
type: StringConstructor;
|
|
77
|
+
default: string;
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* Max-height of the dropdown list
|
|
81
|
+
*/
|
|
82
|
+
height: {
|
|
83
|
+
type: StringConstructor;
|
|
84
|
+
default: string;
|
|
85
|
+
};
|
|
86
|
+
}, {
|
|
87
|
+
showDropdownList: import("vue").Ref<boolean>;
|
|
88
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
89
|
+
"update:modelValue": (value: string | undefined) => void;
|
|
90
|
+
} & {
|
|
91
|
+
"dropdown:open": () => void;
|
|
92
|
+
} & {
|
|
93
|
+
"dropdown:hide": () => void;
|
|
94
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
95
|
+
/** DOM valid selector to give to Vue3 Teleport "to" property */
|
|
96
|
+
appendTo: {
|
|
97
|
+
type: PropType<string | import("vue").RendererElement | null | undefined>;
|
|
98
|
+
default: string;
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* Disable teleport for testing purpose mostly.
|
|
102
|
+
*/
|
|
103
|
+
disableTeleport: {
|
|
104
|
+
type: BooleanConstructor;
|
|
105
|
+
default: boolean;
|
|
106
|
+
};
|
|
107
|
+
/** close the dropdown list when clicking on any item. Default to false */
|
|
108
|
+
closeOnSelect: {
|
|
109
|
+
type: BooleanConstructor;
|
|
110
|
+
default: boolean;
|
|
111
|
+
};
|
|
112
|
+
/** Dropdown vertical position according to the trigger */
|
|
113
|
+
direction: {
|
|
114
|
+
type: PropType<"down" | "up">;
|
|
115
|
+
default: string;
|
|
116
|
+
};
|
|
117
|
+
/** Dropdown horizontal justify according to the trigger */
|
|
118
|
+
justify: {
|
|
119
|
+
type: PropType<"left" | "right">;
|
|
120
|
+
default: string;
|
|
121
|
+
};
|
|
122
|
+
/**
|
|
123
|
+
* ```
|
|
124
|
+
* interface Option {id?: string; value?: string; label: string; href?: string; disabled?:boolean; checked?:boolean}
|
|
125
|
+
* ```
|
|
126
|
+
*/
|
|
127
|
+
options: {
|
|
128
|
+
type: PropType<Option[]>;
|
|
129
|
+
validator(value: Array<Option>): boolean;
|
|
130
|
+
default(): never[];
|
|
131
|
+
};
|
|
132
|
+
size: {
|
|
133
|
+
type: PropType<DropdownListSizes>;
|
|
134
|
+
default: string;
|
|
135
|
+
validator(size: DropdownListSizes): boolean;
|
|
136
|
+
};
|
|
137
|
+
modelValue: {
|
|
138
|
+
type: StringConstructor;
|
|
139
|
+
default: string;
|
|
140
|
+
};
|
|
141
|
+
/**
|
|
142
|
+
* Space between the trigger and the list
|
|
143
|
+
*/
|
|
144
|
+
dropdownGap: {
|
|
145
|
+
type: StringConstructor;
|
|
146
|
+
default: string;
|
|
147
|
+
};
|
|
148
|
+
/**
|
|
149
|
+
* Max-width of the dropdown list
|
|
150
|
+
*/
|
|
151
|
+
width: {
|
|
152
|
+
type: StringConstructor;
|
|
153
|
+
default: string;
|
|
154
|
+
};
|
|
155
|
+
/**
|
|
156
|
+
* Max-height of the dropdown list
|
|
157
|
+
*/
|
|
158
|
+
height: {
|
|
159
|
+
type: StringConstructor;
|
|
160
|
+
default: string;
|
|
161
|
+
};
|
|
162
|
+
}>> & {
|
|
163
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
164
|
+
"onDropdown:open"?: (() => any) | undefined;
|
|
165
|
+
"onDropdown:hide"?: (() => any) | undefined;
|
|
166
|
+
}, {
|
|
167
|
+
size: DropdownListSizes;
|
|
168
|
+
options: Option[];
|
|
169
|
+
modelValue: string;
|
|
170
|
+
width: string;
|
|
171
|
+
height: string;
|
|
172
|
+
appendTo: string | import("vue").RendererElement | null | undefined;
|
|
173
|
+
disableTeleport: boolean;
|
|
174
|
+
closeOnSelect: boolean;
|
|
175
|
+
direction: "down" | "up";
|
|
176
|
+
justify: "left" | "right";
|
|
177
|
+
dropdownGap: string;
|
|
178
|
+
}>, {
|
|
179
|
+
'dropdown-button': (_: {}) => any;
|
|
180
|
+
'dropdown-header': (_: {}) => any;
|
|
181
|
+
'dropdown-items': (_: {}) => any;
|
|
182
|
+
'dropdown-item': (_: import("../JoyDropdownList/VJoyDropdownList.vue").Option) => any;
|
|
183
|
+
'dropdown-footer': (_: {}) => any;
|
|
184
|
+
}>;
|
|
185
|
+
export default _default;
|
|
186
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
187
|
+
new (): {
|
|
188
|
+
$slots: S;
|
|
189
|
+
};
|
|
190
|
+
};
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
import { DropdownListSizes } from './JoyDropdownList.types';
|
|
3
|
+
export interface Option {
|
|
4
|
+
id?: string;
|
|
5
|
+
value?: string;
|
|
6
|
+
label: string;
|
|
7
|
+
href?: string;
|
|
8
|
+
/**
|
|
9
|
+
* @default false
|
|
10
|
+
*/
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
15
|
+
checked?: boolean;
|
|
16
|
+
[k: string]: any;
|
|
17
|
+
}
|
|
18
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
19
|
+
/**
|
|
20
|
+
* In order to make it work with v-model, you need to pass for each option, a value or an ID.
|
|
21
|
+
*/
|
|
22
|
+
options: {
|
|
23
|
+
type: PropType<Option[]>;
|
|
24
|
+
validator(value: Array<Option>): boolean;
|
|
25
|
+
default(): never[];
|
|
26
|
+
};
|
|
27
|
+
size: {
|
|
28
|
+
type: PropType<DropdownListSizes>;
|
|
29
|
+
default: string;
|
|
30
|
+
validator(size: DropdownListSizes): boolean;
|
|
31
|
+
};
|
|
32
|
+
modelValue: {
|
|
33
|
+
type: StringConstructor;
|
|
34
|
+
};
|
|
35
|
+
width: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
default: string;
|
|
38
|
+
};
|
|
39
|
+
height: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
default: string;
|
|
42
|
+
};
|
|
43
|
+
}, {
|
|
44
|
+
isSelected: import("vue").ComputedRef<(option: Option) => boolean>;
|
|
45
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
46
|
+
"update:modelValue": (value: string | undefined) => void;
|
|
47
|
+
} & {
|
|
48
|
+
"close:dropdownList": () => void;
|
|
49
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
50
|
+
/**
|
|
51
|
+
* In order to make it work with v-model, you need to pass for each option, a value or an ID.
|
|
52
|
+
*/
|
|
53
|
+
options: {
|
|
54
|
+
type: PropType<Option[]>;
|
|
55
|
+
validator(value: Array<Option>): boolean;
|
|
56
|
+
default(): never[];
|
|
57
|
+
};
|
|
58
|
+
size: {
|
|
59
|
+
type: PropType<DropdownListSizes>;
|
|
60
|
+
default: string;
|
|
61
|
+
validator(size: DropdownListSizes): boolean;
|
|
62
|
+
};
|
|
63
|
+
modelValue: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
};
|
|
66
|
+
width: {
|
|
67
|
+
type: StringConstructor;
|
|
68
|
+
default: string;
|
|
69
|
+
};
|
|
70
|
+
height: {
|
|
71
|
+
type: StringConstructor;
|
|
72
|
+
default: string;
|
|
73
|
+
};
|
|
74
|
+
}>> & {
|
|
75
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
76
|
+
"onClose:dropdownList"?: (() => any) | undefined;
|
|
77
|
+
}, {
|
|
78
|
+
size: DropdownListSizes;
|
|
79
|
+
options: Option[];
|
|
80
|
+
width: string;
|
|
81
|
+
height: string;
|
|
82
|
+
}>, {
|
|
83
|
+
'dropdown-list-header': (_: {}) => any;
|
|
84
|
+
'dropdown-list-items': (_: {}) => any;
|
|
85
|
+
label: (_: Option) => any;
|
|
86
|
+
'dropdown-list-footer': (_: {}) => any;
|
|
87
|
+
}>;
|
|
88
|
+
export default _default;
|
|
89
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
90
|
+
new (): {
|
|
91
|
+
$slots: S;
|
|
92
|
+
};
|
|
93
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { LEVELS } from '@/types';
|
|
2
2
|
export type HighlightLevels = (typeof LEVELS)[number];
|
|
3
|
-
export declare const HIGHLIGHT_LEVELS: ("
|
|
3
|
+
export declare const HIGHLIGHT_LEVELS: ("info" | "error" | "neutral" | "success" | "warning")[];
|
|
@@ -11,7 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
11
11
|
};
|
|
12
12
|
icon: StringConstructor;
|
|
13
13
|
level: {
|
|
14
|
-
type: PropType<"
|
|
14
|
+
type: PropType<"info" | "error" | "neutral" | "success" | "warning">;
|
|
15
15
|
default: string;
|
|
16
16
|
validator(level: HighlightLevels): boolean;
|
|
17
17
|
};
|
|
@@ -28,14 +28,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
28
28
|
};
|
|
29
29
|
icon: StringConstructor;
|
|
30
30
|
level: {
|
|
31
|
-
type: PropType<"
|
|
31
|
+
type: PropType<"info" | "error" | "neutral" | "success" | "warning">;
|
|
32
32
|
default: string;
|
|
33
33
|
validator(level: HighlightLevels): boolean;
|
|
34
34
|
};
|
|
35
35
|
}>>, {
|
|
36
36
|
accent: boolean;
|
|
37
37
|
displayIcon: boolean;
|
|
38
|
-
level: "
|
|
38
|
+
level: "info" | "error" | "neutral" | "success" | "warning";
|
|
39
39
|
}>, {
|
|
40
40
|
'highlight-title': (_: {}) => any;
|
|
41
41
|
default: (_: {}) => any;
|
|
@@ -24,7 +24,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
24
24
|
label: StringConstructor;
|
|
25
25
|
/** Overrides the default label size. See JoyLabel stories */
|
|
26
26
|
labelSize: {
|
|
27
|
-
type: PropType<"small" | "
|
|
27
|
+
type: PropType<"small" | "medium" | "large">;
|
|
28
28
|
default: string;
|
|
29
29
|
};
|
|
30
30
|
/** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
|
|
@@ -79,7 +79,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
79
79
|
label: StringConstructor;
|
|
80
80
|
/** Overrides the default label size. See JoyLabel stories */
|
|
81
81
|
labelSize: {
|
|
82
|
-
type: PropType<"small" | "
|
|
82
|
+
type: PropType<"small" | "medium" | "large">;
|
|
83
83
|
default: string;
|
|
84
84
|
};
|
|
85
85
|
/** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
|
|
@@ -114,10 +114,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
114
114
|
size: InputSizes;
|
|
115
115
|
disabled: boolean;
|
|
116
116
|
required: boolean;
|
|
117
|
+
modelValue: string;
|
|
117
118
|
invalid: boolean;
|
|
118
|
-
labelSize: "small" | "
|
|
119
|
+
labelSize: "small" | "medium" | "large";
|
|
119
120
|
requiredMark: boolean;
|
|
120
|
-
modelValue: string;
|
|
121
121
|
clearable: boolean;
|
|
122
122
|
}>, {
|
|
123
123
|
default: (_: {}) => any;
|
|
@@ -2,7 +2,7 @@ import { PropType } from 'vue';
|
|
|
2
2
|
import { LabelSizes } from './JoyLabel.types';
|
|
3
3
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
4
4
|
size: {
|
|
5
|
-
type: PropType<"small" | "
|
|
5
|
+
type: PropType<"small" | "medium" | "large">;
|
|
6
6
|
default: string;
|
|
7
7
|
validator(size: LabelSizes): boolean;
|
|
8
8
|
};
|
|
@@ -17,9 +17,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
17
17
|
optionalLabel: {
|
|
18
18
|
type: StringConstructor;
|
|
19
19
|
};
|
|
20
|
+
text: StringConstructor;
|
|
20
21
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
21
22
|
size: {
|
|
22
|
-
type: PropType<"small" | "
|
|
23
|
+
type: PropType<"small" | "medium" | "large">;
|
|
23
24
|
default: string;
|
|
24
25
|
validator(size: LabelSizes): boolean;
|
|
25
26
|
};
|
|
@@ -34,8 +35,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
34
35
|
optionalLabel: {
|
|
35
36
|
type: StringConstructor;
|
|
36
37
|
};
|
|
38
|
+
text: StringConstructor;
|
|
37
39
|
}>>, {
|
|
38
|
-
size: "small" | "
|
|
40
|
+
size: "small" | "medium" | "large";
|
|
39
41
|
required: boolean;
|
|
40
42
|
tagName: "label" | "legend";
|
|
41
43
|
}>, {
|
|
@@ -11,6 +11,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
11
11
|
validator(color: LinkColors): boolean;
|
|
12
12
|
};
|
|
13
13
|
icon: StringConstructor;
|
|
14
|
+
text: StringConstructor;
|
|
14
15
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
15
16
|
href: {
|
|
16
17
|
type: StringConstructor;
|
|
@@ -22,6 +23,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
22
23
|
validator(color: LinkColors): boolean;
|
|
23
24
|
};
|
|
24
25
|
icon: StringConstructor;
|
|
26
|
+
text: StringConstructor;
|
|
25
27
|
}>>, {
|
|
26
28
|
color: "teal" | "white";
|
|
27
29
|
}>, {
|