@a-vision-software/vue-input-components 1.3.24 → 1.3.26
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 +4 -0
- package/dist/src/components/Action.vue.d.ts +10 -2
- package/dist/src/components/Checkbox.vue.d.ts +5 -2
- package/dist/src/components/List.vue.d.ts +7 -4
- package/dist/src/config.d.ts +6 -0
- package/dist/src/types/action.d.ts +5 -3
- package/dist/src/types/checkbox.d.ts +7 -4
- package/dist/src/types/index.d.ts +1 -0
- package/dist/src/types/list.d.ts +17 -12
- package/dist/vue-input-components.cjs.js +1 -561
- package/dist/vue-input-components.css +1 -1
- package/dist/vue-input-components.es.js +4979 -7939
- package/dist/vue-input-components.umd.js +1 -561
- package/package.json +1 -1
- package/src/assets/colors.css +6 -0
- package/src/components/Action.vue +34 -32
- package/src/components/Checkbox.vue +79 -29
- package/src/components/List.vue +348 -166
- package/src/config.ts +10 -0
- package/src/router/index.ts +4 -4
- package/src/types/action.ts +5 -3
- package/src/types/checkbox.ts +8 -4
- package/src/types/index.ts +1 -0
- package/src/types/list.ts +18 -13
- package/src/views/DashboardView.vue +29 -19
- package/src/views/ListTestView.vue +300 -43
package/README.md
CHANGED
|
@@ -38,6 +38,10 @@ A dropdown component that supports single/multiple selection, filtering, and cus
|
|
|
38
38
|
|
|
39
39
|
A checkbox component with support for single/multiple selection and various presentation modes.
|
|
40
40
|
|
|
41
|
+
### [List](docs/components/List.md)
|
|
42
|
+
|
|
43
|
+
A flexible and customizable list component that supports sorting, filtering, and different presentation styles.
|
|
44
|
+
|
|
41
45
|
## Installation
|
|
42
46
|
|
|
43
47
|
```bash
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
interface ActionProps {
|
|
2
|
+
id?: string;
|
|
2
3
|
icon?: string;
|
|
3
4
|
label?: string;
|
|
4
5
|
href?: string;
|
|
@@ -7,8 +8,10 @@ interface ActionProps {
|
|
|
7
8
|
color?: string;
|
|
8
9
|
size?: 'small' | 'regular' | 'large';
|
|
9
10
|
variant?: 'solid' | 'transparent';
|
|
11
|
+
presentation?: 'default' | 'minimal';
|
|
10
12
|
}
|
|
11
13
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ActionProps>, {
|
|
14
|
+
id: undefined;
|
|
12
15
|
icon: undefined;
|
|
13
16
|
label: undefined;
|
|
14
17
|
href: undefined;
|
|
@@ -17,9 +20,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
17
20
|
color: string;
|
|
18
21
|
size: string;
|
|
19
22
|
variant: string;
|
|
23
|
+
presentation: string;
|
|
20
24
|
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
21
|
-
click: (event: MouseEvent) => void;
|
|
25
|
+
click: (event: MouseEvent, action: ActionProps) => void;
|
|
22
26
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ActionProps>, {
|
|
27
|
+
id: undefined;
|
|
23
28
|
icon: undefined;
|
|
24
29
|
label: undefined;
|
|
25
30
|
href: undefined;
|
|
@@ -28,17 +33,20 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
28
33
|
color: string;
|
|
29
34
|
size: string;
|
|
30
35
|
variant: string;
|
|
36
|
+
presentation: string;
|
|
31
37
|
}>>> & Readonly<{
|
|
32
|
-
onClick?: ((event: MouseEvent) => any) | undefined;
|
|
38
|
+
onClick?: ((event: MouseEvent, action: ActionProps) => any) | undefined;
|
|
33
39
|
}>, {
|
|
34
40
|
disabled: boolean;
|
|
35
41
|
type: "reset" | "submit" | "button";
|
|
42
|
+
id: string;
|
|
36
43
|
icon: string;
|
|
37
44
|
label: string;
|
|
38
45
|
href: string;
|
|
39
46
|
color: string;
|
|
40
47
|
size: "small" | "regular" | "large";
|
|
41
48
|
variant: "solid" | "transparent";
|
|
49
|
+
presentation: "default" | "minimal";
|
|
42
50
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
43
51
|
export default _default;
|
|
44
52
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { CheckboxProps } from '../types/checkbox';
|
|
1
|
+
import { CheckboxProps, CheckboxOption } from '../types/checkbox';
|
|
2
2
|
|
|
3
3
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CheckboxProps>, {
|
|
4
4
|
multiple: boolean;
|
|
5
5
|
disabled: boolean;
|
|
6
|
+
options: () => never[];
|
|
6
7
|
width: string;
|
|
7
8
|
color: string;
|
|
8
9
|
hoverColor: string;
|
|
@@ -28,6 +29,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
28
29
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CheckboxProps>, {
|
|
29
30
|
multiple: boolean;
|
|
30
31
|
disabled: boolean;
|
|
32
|
+
options: () => never[];
|
|
31
33
|
width: string;
|
|
32
34
|
color: string;
|
|
33
35
|
hoverColor: string;
|
|
@@ -56,7 +58,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
56
58
|
icon: string;
|
|
57
59
|
label: string;
|
|
58
60
|
color: string;
|
|
61
|
+
presentation: "default" | "minimal";
|
|
59
62
|
backgroundColor: string;
|
|
63
|
+
options: CheckboxOption[];
|
|
60
64
|
multiple: boolean;
|
|
61
65
|
width: string;
|
|
62
66
|
hoverColor: string;
|
|
@@ -70,7 +74,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
70
74
|
labelAlign: "left" | "center" | "right";
|
|
71
75
|
labelWidth: string;
|
|
72
76
|
columns: number;
|
|
73
|
-
presentation: "default" | "minimal";
|
|
74
77
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
75
78
|
export default _default;
|
|
76
79
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,25 +1,28 @@
|
|
|
1
|
-
import { ListProps
|
|
1
|
+
import { ListProps } from '../types/list';
|
|
2
2
|
|
|
3
3
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ListProps>, {
|
|
4
4
|
presentation: string;
|
|
5
5
|
loading: boolean;
|
|
6
|
+
width: string;
|
|
6
7
|
}>>, {
|
|
7
8
|
focus: () => void;
|
|
8
9
|
blur: () => void;
|
|
9
10
|
clearFilter: () => void;
|
|
10
11
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
11
12
|
"update:filter": (value: string) => void;
|
|
12
|
-
sort: (column: ListColumn, direction: "desc" | "asc") => void;
|
|
13
13
|
"row-click": (row: any, index: number) => void;
|
|
14
|
+
"row-dblclick": (row: any, index: number) => void;
|
|
14
15
|
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ListProps>, {
|
|
15
16
|
presentation: string;
|
|
16
17
|
loading: boolean;
|
|
18
|
+
width: string;
|
|
17
19
|
}>>> & Readonly<{
|
|
18
|
-
onSort?: ((column: ListColumn, direction: "desc" | "asc") => any) | undefined;
|
|
19
20
|
"onUpdate:filter"?: ((value: string) => any) | undefined;
|
|
20
21
|
"onRow-click"?: ((row: any, index: number) => any) | undefined;
|
|
22
|
+
"onRow-dblclick"?: ((row: any, index: number) => any) | undefined;
|
|
21
23
|
}>, {
|
|
22
|
-
presentation:
|
|
24
|
+
presentation: "default" | "minimal";
|
|
25
|
+
width: string;
|
|
23
26
|
loading: boolean;
|
|
24
27
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
25
28
|
export default _default;
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
export interface ActionProps {
|
|
2
|
+
id?: string;
|
|
2
3
|
icon?: string;
|
|
3
4
|
label?: string;
|
|
4
5
|
href?: string;
|
|
5
6
|
type?: 'button' | 'submit' | 'reset';
|
|
6
7
|
disabled?: boolean;
|
|
7
8
|
color?: string;
|
|
8
|
-
size?: 'small' | 'regular' | 'large';
|
|
9
9
|
variant?: 'solid' | 'transparent';
|
|
10
|
+
size?: 'small' | 'regular' | 'large';
|
|
11
|
+
presentation?: 'default' | 'minimal';
|
|
10
12
|
}
|
|
11
|
-
export interface
|
|
12
|
-
(
|
|
13
|
+
export interface ListActionProps extends ActionProps {
|
|
14
|
+
onActionClick: (row: any, action: any) => void;
|
|
13
15
|
}
|
|
14
16
|
export interface ActionComponent {
|
|
15
17
|
focus: () => void;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export interface CheckboxOption {
|
|
2
|
-
id: string;
|
|
3
|
-
label
|
|
2
|
+
id: string | boolean;
|
|
3
|
+
label?: string | null;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
}
|
|
6
6
|
export interface CheckboxProps {
|
|
7
|
-
options
|
|
8
|
-
modelValue: string | string[];
|
|
7
|
+
options?: CheckboxOption[];
|
|
8
|
+
modelValue: string | string[] | boolean;
|
|
9
9
|
multiple?: boolean;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
width?: string;
|
|
@@ -28,3 +28,6 @@ export interface CheckboxProps {
|
|
|
28
28
|
columns?: number;
|
|
29
29
|
presentation?: 'default' | 'minimal';
|
|
30
30
|
}
|
|
31
|
+
export interface ListCheckboxProps extends CheckboxProps {
|
|
32
|
+
onCheckboxClick: (row: any, itemKey: string) => void;
|
|
33
|
+
}
|
package/dist/src/types/list.d.ts
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
|
+
import { ListActionProps } from './action';
|
|
2
|
+
|
|
1
3
|
export type ListPresentation = 'default' | 'minimal';
|
|
2
4
|
export type ListDataType = 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon';
|
|
3
5
|
export interface ListColumn {
|
|
4
6
|
key: string;
|
|
5
7
|
label: string;
|
|
6
|
-
type
|
|
8
|
+
type?: 'text' | 'number' | 'date' | 'action' | 'checkbox' | 'icon';
|
|
9
|
+
align?: 'left' | 'center' | 'right';
|
|
7
10
|
sortable?: boolean;
|
|
8
11
|
filterable?: boolean;
|
|
9
12
|
width?: string;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
export interface ListAction {
|
|
13
|
-
label: string;
|
|
14
|
-
icon?: string;
|
|
15
|
-
onClick: () => void;
|
|
16
|
-
disabled?: boolean;
|
|
13
|
+
minWidth?: string;
|
|
14
|
+
maxWidth?: string;
|
|
17
15
|
}
|
|
18
16
|
export interface ListFilter {
|
|
19
17
|
placeholder?: string;
|
|
@@ -22,19 +20,26 @@ export interface ListFilter {
|
|
|
22
20
|
export interface ListProps {
|
|
23
21
|
columns: ListColumn[];
|
|
24
22
|
data: any[];
|
|
25
|
-
|
|
26
|
-
filter?:
|
|
27
|
-
|
|
23
|
+
actions?: ListActionProps[];
|
|
24
|
+
filter?: {
|
|
25
|
+
placeholder?: string;
|
|
26
|
+
};
|
|
28
27
|
loading?: boolean;
|
|
29
28
|
emptyMessage?: string;
|
|
29
|
+
presentation?: 'default' | 'minimal';
|
|
30
|
+
width?: string;
|
|
30
31
|
}
|
|
31
32
|
export interface ListEmits {
|
|
32
33
|
(e: 'update:filter', value: string): void;
|
|
33
|
-
(e: 'sort', column: ListColumn, direction: 'asc' | 'desc'): void;
|
|
34
34
|
(e: 'row-click', row: any, index: number): void;
|
|
35
|
+
(e: 'row-dblclick', row: any, index: number): void;
|
|
35
36
|
}
|
|
36
37
|
export interface ListComponent {
|
|
37
38
|
focus: () => void;
|
|
38
39
|
blur: () => void;
|
|
39
40
|
clearFilter: () => void;
|
|
40
41
|
}
|
|
42
|
+
export interface ListIconProps {
|
|
43
|
+
icon: string;
|
|
44
|
+
color?: string;
|
|
45
|
+
}
|