@ironsource/shared-ui 2.2.0-rc.24 → 2.2.0-rc.25
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/TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css +1 -0
- package/components/tag/Tag.vue.d.ts +100 -0
- package/components/tag/index.d.ts +141 -0
- package/components/tagsField/TagsFieldChip.vue.d.ts +0 -43
- package/components/tagsField/TagsFieldChip.vue.js +5 -5
- package/components/tagsField/TagsFieldChip.vue2.js +55 -101
- package/components/tagsField/index.d.ts +0 -74
- package/index.js +1 -1
- package/package.json +1 -1
- package/TagsFieldChip.vue_vue_type_style_index_0_scoped_cbb21c6a_lang.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-d186b7ef],.font-chart-2[data-v-d186b7ef],.font-chart-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:700}.chip-input[data-v-d186b7ef],.font-chip-label[data-v-d186b7ef],.font-table-label[data-v-d186b7ef],.font-button[data-v-d186b7ef],.font-heading-6[data-v-d186b7ef],.font-heading-5[data-v-d186b7ef],.font-heading-4[data-v-d186b7ef],.font-heading-3[data-v-d186b7ef],.font-heading-2[data-v-d186b7ef],.font-heading-1[data-v-d186b7ef],.font-title[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-d186b7ef],.font-input-label[data-v-d186b7ef],.font-overline[data-v-d186b7ef],.font-subtitle-2[data-v-d186b7ef],.font-subtitle-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-d186b7ef],.font-body-2[data-v-d186b7ef],.font-body-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-d186b7ef]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-d186b7ef]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-d186b7ef]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-d186b7ef]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-d186b7ef]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-d186b7ef]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-d186b7ef]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-d186b7ef]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-d186b7ef]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-d186b7ef]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-d186b7ef]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-d186b7ef]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-d186b7ef],.font-tab-label2[data-v-d186b7ef]{font-size:.875rem;line-height:1rem}.chip-input[data-v-d186b7ef],.font-chip-label[data-v-d186b7ef]{font-size:.75rem;line-height:1rem}h1[data-v-d186b7ef],h2[data-v-d186b7ef],h3[data-v-d186b7ef],h4[data-v-d186b7ef],h5[data-v-d186b7ef],h6[data-v-d186b7ef]{margin:0}.tags-field-chip[data-v-d186b7ef]{--outline-color: var(--default-outlined-border);border-radius:100px}.tags-field-chip--invalid[data-v-d186b7ef]{--outline-color: var(--error-outlined-border)}.tags-field-chip--editing[data-v-d186b7ef]{outline:1px solid var(--outline-color)}.chip-content[data-v-d186b7ef]{display:flex;position:relative}.chip-label[data-v-d186b7ef]{min-width:.5rem}.chip-label--hidden[data-v-d186b7ef]{visibility:hidden}.chip-input[data-v-d186b7ef]{position:absolute;left:0;top:-.5px;width:100%;height:100%;background:transparent;color:var(--text-primary);line-height:normal;min-width:.5rem;padding:0;border:none}.chip-input[data-v-d186b7ef]:focus{outline:none}.clear-button[data-v-d186b7ef]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-d186b7ef]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-d186b7ef]{color:var(--error-dark)}.clear-button--invalid[data-v-d186b7ef]:hover{color:var(--error-darker)}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { ChipSize, ChipColor, ChipVariant } from '../chip/v4/Chip.types';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
|
+
label: string;
|
|
4
|
+
isSelected: boolean;
|
|
5
|
+
isInvalid?: boolean;
|
|
6
|
+
testId?: string;
|
|
7
|
+
size?: ChipSize;
|
|
8
|
+
rounded?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
color?: ChipColor;
|
|
11
|
+
variant?: ChipVariant;
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
iconName?: string;
|
|
14
|
+
editable?: boolean;
|
|
15
|
+
selectable?: boolean;
|
|
16
|
+
maxLength?: number;
|
|
17
|
+
}>, {
|
|
18
|
+
isInvalid: boolean;
|
|
19
|
+
label: string;
|
|
20
|
+
testId: string;
|
|
21
|
+
size: string;
|
|
22
|
+
rounded: boolean;
|
|
23
|
+
disabled: boolean;
|
|
24
|
+
color: string;
|
|
25
|
+
variant: string;
|
|
26
|
+
placeholder: string;
|
|
27
|
+
iconName: string;
|
|
28
|
+
editable: boolean;
|
|
29
|
+
selectable: boolean;
|
|
30
|
+
maxLength: any;
|
|
31
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
32
|
+
"update:label": (value: string) => void;
|
|
33
|
+
remove: () => void;
|
|
34
|
+
stopEditing: () => void;
|
|
35
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
36
|
+
label: string;
|
|
37
|
+
isSelected: boolean;
|
|
38
|
+
isInvalid?: boolean;
|
|
39
|
+
testId?: string;
|
|
40
|
+
size?: ChipSize;
|
|
41
|
+
rounded?: boolean;
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
color?: ChipColor;
|
|
44
|
+
variant?: ChipVariant;
|
|
45
|
+
placeholder?: string;
|
|
46
|
+
iconName?: string;
|
|
47
|
+
editable?: boolean;
|
|
48
|
+
selectable?: boolean;
|
|
49
|
+
maxLength?: number;
|
|
50
|
+
}>, {
|
|
51
|
+
isInvalid: boolean;
|
|
52
|
+
label: string;
|
|
53
|
+
testId: string;
|
|
54
|
+
size: string;
|
|
55
|
+
rounded: boolean;
|
|
56
|
+
disabled: boolean;
|
|
57
|
+
color: string;
|
|
58
|
+
variant: string;
|
|
59
|
+
placeholder: string;
|
|
60
|
+
iconName: string;
|
|
61
|
+
editable: boolean;
|
|
62
|
+
selectable: boolean;
|
|
63
|
+
maxLength: any;
|
|
64
|
+
}>>> & {
|
|
65
|
+
onRemove?: () => any;
|
|
66
|
+
"onUpdate:label"?: (value: string) => any;
|
|
67
|
+
onStopEditing?: () => any;
|
|
68
|
+
}, {
|
|
69
|
+
label: string;
|
|
70
|
+
testId: string;
|
|
71
|
+
variant: ChipVariant;
|
|
72
|
+
disabled: boolean;
|
|
73
|
+
color: ChipColor;
|
|
74
|
+
size: ChipSize;
|
|
75
|
+
iconName: string;
|
|
76
|
+
rounded: boolean;
|
|
77
|
+
maxLength: number;
|
|
78
|
+
placeholder: string;
|
|
79
|
+
editable: boolean;
|
|
80
|
+
isInvalid: boolean;
|
|
81
|
+
selectable: boolean;
|
|
82
|
+
}>;
|
|
83
|
+
export default _default;
|
|
84
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
85
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
86
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
87
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
88
|
+
} : {
|
|
89
|
+
type: import('vue').PropType<T[K]>;
|
|
90
|
+
required: true;
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
type __VLS_WithDefaults<P, D> = {
|
|
94
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
95
|
+
default: D[K];
|
|
96
|
+
}> : P[K];
|
|
97
|
+
};
|
|
98
|
+
type __VLS_Prettify<T> = {
|
|
99
|
+
[K in keyof T]: T[K];
|
|
100
|
+
} & {};
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import Tag from './Tag.vue';
|
|
2
|
+
declare const TagTypes: () => import("vue").DefineComponent<{
|
|
3
|
+
label: {
|
|
4
|
+
type: import("vue").PropType<string>;
|
|
5
|
+
required: true;
|
|
6
|
+
default: string;
|
|
7
|
+
};
|
|
8
|
+
testId: {
|
|
9
|
+
type: import("vue").PropType<string>;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
variant: {
|
|
13
|
+
type: import("vue").PropType<"filled" | "outlined">;
|
|
14
|
+
default: string;
|
|
15
|
+
};
|
|
16
|
+
disabled: {
|
|
17
|
+
type: import("vue").PropType<boolean>;
|
|
18
|
+
default: boolean;
|
|
19
|
+
};
|
|
20
|
+
color: {
|
|
21
|
+
type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
|
|
22
|
+
default: string;
|
|
23
|
+
};
|
|
24
|
+
size: {
|
|
25
|
+
type: import("vue").PropType<"small" | "medium">;
|
|
26
|
+
default: string;
|
|
27
|
+
};
|
|
28
|
+
iconName: {
|
|
29
|
+
type: import("vue").PropType<string>;
|
|
30
|
+
default: string;
|
|
31
|
+
};
|
|
32
|
+
rounded: {
|
|
33
|
+
type: import("vue").PropType<boolean>;
|
|
34
|
+
default: boolean;
|
|
35
|
+
};
|
|
36
|
+
maxLength: {
|
|
37
|
+
type: import("vue").PropType<number>;
|
|
38
|
+
default: any;
|
|
39
|
+
};
|
|
40
|
+
placeholder: {
|
|
41
|
+
type: import("vue").PropType<string>;
|
|
42
|
+
default: string;
|
|
43
|
+
};
|
|
44
|
+
isSelected: {
|
|
45
|
+
type: import("vue").PropType<boolean>;
|
|
46
|
+
required: true;
|
|
47
|
+
};
|
|
48
|
+
editable: {
|
|
49
|
+
type: import("vue").PropType<boolean>;
|
|
50
|
+
default: boolean;
|
|
51
|
+
};
|
|
52
|
+
isInvalid: {
|
|
53
|
+
type: import("vue").PropType<boolean>;
|
|
54
|
+
default: boolean;
|
|
55
|
+
};
|
|
56
|
+
selectable: {
|
|
57
|
+
type: import("vue").PropType<boolean>;
|
|
58
|
+
default: boolean;
|
|
59
|
+
};
|
|
60
|
+
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
61
|
+
"update:label": (value: string) => void;
|
|
62
|
+
remove: () => void;
|
|
63
|
+
stopEditing: () => void;
|
|
64
|
+
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
65
|
+
label: {
|
|
66
|
+
type: import("vue").PropType<string>;
|
|
67
|
+
required: true;
|
|
68
|
+
default: string;
|
|
69
|
+
};
|
|
70
|
+
testId: {
|
|
71
|
+
type: import("vue").PropType<string>;
|
|
72
|
+
default: string;
|
|
73
|
+
};
|
|
74
|
+
variant: {
|
|
75
|
+
type: import("vue").PropType<"filled" | "outlined">;
|
|
76
|
+
default: string;
|
|
77
|
+
};
|
|
78
|
+
disabled: {
|
|
79
|
+
type: import("vue").PropType<boolean>;
|
|
80
|
+
default: boolean;
|
|
81
|
+
};
|
|
82
|
+
color: {
|
|
83
|
+
type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
|
|
84
|
+
default: string;
|
|
85
|
+
};
|
|
86
|
+
size: {
|
|
87
|
+
type: import("vue").PropType<"small" | "medium">;
|
|
88
|
+
default: string;
|
|
89
|
+
};
|
|
90
|
+
iconName: {
|
|
91
|
+
type: import("vue").PropType<string>;
|
|
92
|
+
default: string;
|
|
93
|
+
};
|
|
94
|
+
rounded: {
|
|
95
|
+
type: import("vue").PropType<boolean>;
|
|
96
|
+
default: boolean;
|
|
97
|
+
};
|
|
98
|
+
maxLength: {
|
|
99
|
+
type: import("vue").PropType<number>;
|
|
100
|
+
default: any;
|
|
101
|
+
};
|
|
102
|
+
placeholder: {
|
|
103
|
+
type: import("vue").PropType<string>;
|
|
104
|
+
default: string;
|
|
105
|
+
};
|
|
106
|
+
isSelected: {
|
|
107
|
+
type: import("vue").PropType<boolean>;
|
|
108
|
+
required: true;
|
|
109
|
+
};
|
|
110
|
+
editable: {
|
|
111
|
+
type: import("vue").PropType<boolean>;
|
|
112
|
+
default: boolean;
|
|
113
|
+
};
|
|
114
|
+
isInvalid: {
|
|
115
|
+
type: import("vue").PropType<boolean>;
|
|
116
|
+
default: boolean;
|
|
117
|
+
};
|
|
118
|
+
selectable: {
|
|
119
|
+
type: import("vue").PropType<boolean>;
|
|
120
|
+
default: boolean;
|
|
121
|
+
};
|
|
122
|
+
}>> & {
|
|
123
|
+
onRemove?: () => any;
|
|
124
|
+
"onUpdate:label"?: (value: string) => any;
|
|
125
|
+
onStopEditing?: () => any;
|
|
126
|
+
}, {
|
|
127
|
+
label: string;
|
|
128
|
+
testId: string;
|
|
129
|
+
variant: "filled" | "outlined";
|
|
130
|
+
disabled: boolean;
|
|
131
|
+
color: "dark" | "default" | "primary" | "info" | "success" | "warning" | "error";
|
|
132
|
+
size: "small" | "medium";
|
|
133
|
+
iconName: string;
|
|
134
|
+
rounded: boolean;
|
|
135
|
+
maxLength: number;
|
|
136
|
+
placeholder: string;
|
|
137
|
+
editable: boolean;
|
|
138
|
+
isInvalid: boolean;
|
|
139
|
+
selectable: boolean;
|
|
140
|
+
}>[];
|
|
141
|
+
export { Tag, TagTypes };
|
|
@@ -1,72 +1,29 @@
|
|
|
1
|
-
import { ChipSize, ChipColor, ChipVariant } from '../chip/v4/Chip.types';
|
|
2
1
|
declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
3
2
|
label: string;
|
|
4
3
|
isInvalid?: boolean;
|
|
5
4
|
testId?: string;
|
|
6
|
-
size?: ChipSize;
|
|
7
|
-
rounded?: boolean;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
removable?: boolean;
|
|
10
|
-
color?: ChipColor;
|
|
11
|
-
iconColor?: string;
|
|
12
|
-
variant?: ChipVariant;
|
|
13
|
-
placeholder?: string;
|
|
14
5
|
}>, {
|
|
15
6
|
isInvalid: boolean;
|
|
16
7
|
label: string;
|
|
17
8
|
testId: string;
|
|
18
|
-
size: string;
|
|
19
|
-
rounded: boolean;
|
|
20
|
-
disabled: boolean;
|
|
21
|
-
removable: boolean;
|
|
22
|
-
color: string;
|
|
23
|
-
iconColor: string;
|
|
24
|
-
variant: string;
|
|
25
|
-
placeholder: string;
|
|
26
9
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
27
10
|
"update:label": (value: string) => void;
|
|
28
11
|
remove: () => void;
|
|
29
|
-
stopEditing: () => void;
|
|
30
12
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
31
13
|
label: string;
|
|
32
14
|
isInvalid?: boolean;
|
|
33
15
|
testId?: string;
|
|
34
|
-
size?: ChipSize;
|
|
35
|
-
rounded?: boolean;
|
|
36
|
-
disabled?: boolean;
|
|
37
|
-
removable?: boolean;
|
|
38
|
-
color?: ChipColor;
|
|
39
|
-
iconColor?: string;
|
|
40
|
-
variant?: ChipVariant;
|
|
41
|
-
placeholder?: string;
|
|
42
16
|
}>, {
|
|
43
17
|
isInvalid: boolean;
|
|
44
18
|
label: string;
|
|
45
19
|
testId: string;
|
|
46
|
-
size: string;
|
|
47
|
-
rounded: boolean;
|
|
48
|
-
disabled: boolean;
|
|
49
|
-
removable: boolean;
|
|
50
|
-
color: string;
|
|
51
|
-
iconColor: string;
|
|
52
|
-
variant: string;
|
|
53
|
-
placeholder: string;
|
|
54
20
|
}>>> & {
|
|
55
21
|
onRemove?: () => any;
|
|
56
22
|
"onUpdate:label"?: (value: string) => any;
|
|
57
|
-
onStopEditing?: () => any;
|
|
58
23
|
}, {
|
|
59
24
|
label: string;
|
|
60
25
|
testId: string;
|
|
61
|
-
variant: ChipVariant;
|
|
62
|
-
disabled: boolean;
|
|
63
|
-
color: ChipColor;
|
|
64
|
-
size: ChipSize;
|
|
65
|
-
rounded: boolean;
|
|
66
|
-
placeholder: string;
|
|
67
26
|
isInvalid: boolean;
|
|
68
|
-
removable: boolean;
|
|
69
|
-
iconColor: string;
|
|
70
27
|
}>;
|
|
71
28
|
export default _default;
|
|
72
29
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
/* empty css */import
|
|
3
|
-
// import "../../TagsFieldChip.
|
|
4
|
-
const
|
|
1
|
+
import e from "./TagsFieldChip.vue2.js";
|
|
2
|
+
/* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
+
// import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; //*');
|
|
4
|
+
const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-d186b7ef"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
t as default
|
|
7
7
|
};
|
|
@@ -1,127 +1,81 @@
|
|
|
1
|
-
import "../../TagsFieldChip.
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; import { defineComponent as k, ref as p, computed as x, openBlock as C, createBlock as I, unref as t, normalizeClass as c, withModifiers as s, withCtx as f, createElementVNode as v, createVNode as m, createTextVNode as w, toDisplayString as T, withDirectives as B, isRef as E, withKeys as h, vShow as V, vModelText as K, nextTick as N } from "vue";
|
|
2
|
+
import R from "../typography/v4/Typography.vue.js";
|
|
3
|
+
import z from "../icon/v4/IconV4.vue.js";
|
|
4
4
|
import "../icon/v4/IconFlag.vue.js";
|
|
5
|
-
import
|
|
6
|
-
const
|
|
5
|
+
import D from "../chip/v4/ChipV4.vue.js";
|
|
6
|
+
const M = { class: "chip-content" }, S = ["onKeyup"], j = /* @__PURE__ */ k({
|
|
7
7
|
__name: "TagsFieldChip",
|
|
8
8
|
props: {
|
|
9
9
|
label: { default: "" },
|
|
10
10
|
isInvalid: { type: Boolean, default: !1 },
|
|
11
|
-
testId: { default: "" }
|
|
12
|
-
size: { default: "small" },
|
|
13
|
-
rounded: { type: Boolean, default: !0 },
|
|
14
|
-
disabled: { type: Boolean, default: !1 },
|
|
15
|
-
removable: { type: Boolean, default: !0 },
|
|
16
|
-
color: { default: "default" },
|
|
17
|
-
iconColor: { default: "var(--action-active)" },
|
|
18
|
-
variant: { default: "filled" },
|
|
19
|
-
placeholder: { default: "" }
|
|
11
|
+
testId: { default: "" }
|
|
20
12
|
},
|
|
21
|
-
emits: ["update:label", "remove"
|
|
22
|
-
setup(
|
|
23
|
-
const
|
|
24
|
-
get: () =>
|
|
25
|
-
set: (
|
|
26
|
-
|
|
13
|
+
emits: ["update:label", "remove"],
|
|
14
|
+
setup(l, { emit: n }) {
|
|
15
|
+
const b = l, i = p(!1), e = x({
|
|
16
|
+
get: () => b.label,
|
|
17
|
+
set: (d) => {
|
|
18
|
+
n("update:label", d);
|
|
27
19
|
}
|
|
28
|
-
}),
|
|
29
|
-
i.
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const m = {
|
|
43
|
-
default: "var(--default-outlined-border)",
|
|
44
|
-
primary: "var(--primary-main)",
|
|
45
|
-
info: "var(--info-dark)",
|
|
46
|
-
error: "var(--error-main)",
|
|
47
|
-
warning: "var(--warning-main)",
|
|
48
|
-
success: "var(--success-main)",
|
|
49
|
-
dark: "var(--common-divider)"
|
|
50
|
-
}, T = b(() => a.value && i.variant !== "outlined" ? {
|
|
51
|
-
"--outline-color": i.isInvalid ? m.error : m[i.color] || "var(--default-outlined-border)"
|
|
52
|
-
} : {});
|
|
53
|
-
return (h, o) => (u(), g(t(j), {
|
|
54
|
-
class: s({
|
|
55
|
-
"rounded-chip": e.rounded,
|
|
56
|
-
"tags-field-chip--editing": a.value && e.variant !== "outlined"
|
|
57
|
-
// outlined chips have an outline
|
|
58
|
-
}),
|
|
59
|
-
label: t(l),
|
|
60
|
-
"test-id": e.testId,
|
|
61
|
-
color: e.isInvalid ? "error" : e.color,
|
|
62
|
-
size: e.size,
|
|
63
|
-
variant: e.variant,
|
|
64
|
-
disabled: e.disabled,
|
|
65
|
-
style: w(t(T)),
|
|
66
|
-
onClick: n(M, ["stop"])
|
|
20
|
+
}), r = p(null), g = () => r.value?.focus(), y = async () => {
|
|
21
|
+
i.value = !0, await N(), g();
|
|
22
|
+
}, o = () => {
|
|
23
|
+
i.value = !1, e.value || n("remove");
|
|
24
|
+
};
|
|
25
|
+
return (d, a) => (C(), I(t(D), {
|
|
26
|
+
class: c(["tags-field-chip", {
|
|
27
|
+
"tags-field-chip--editing": i.value,
|
|
28
|
+
"tags-field-chip--invalid": l.isInvalid
|
|
29
|
+
}]),
|
|
30
|
+
label: t(e),
|
|
31
|
+
"test-id": l.testId,
|
|
32
|
+
color: l.isInvalid ? "error" : "default",
|
|
33
|
+
onClick: s(y, ["stop"])
|
|
67
34
|
}, {
|
|
68
|
-
default:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
35
|
+
default: f(() => [
|
|
36
|
+
v("div", M, [
|
|
37
|
+
m(t(R), {
|
|
38
|
+
variant: "chipLabel",
|
|
39
|
+
class: c(["chip-label", { "chip-label--hidden": i.value }])
|
|
40
|
+
}, {
|
|
41
|
+
default: f(() => [
|
|
42
|
+
w(T(t(e)), 1)
|
|
43
|
+
]),
|
|
44
|
+
_: 1
|
|
45
|
+
}, 8, ["class"]),
|
|
46
|
+
B(v("input", {
|
|
72
47
|
ref_key: "inputRef",
|
|
73
|
-
ref:
|
|
74
|
-
"onUpdate:modelValue":
|
|
75
|
-
|
|
76
|
-
class: s(["chip-input", { "chip-input-outline": e.variant === "outlined" }]),
|
|
48
|
+
ref: r,
|
|
49
|
+
"onUpdate:modelValue": a[0] || (a[0] = (u) => E(e) ? e.value = u : null),
|
|
50
|
+
class: "chip-input",
|
|
77
51
|
spellcheck: "false",
|
|
78
|
-
|
|
79
|
-
onBlur: R,
|
|
52
|
+
onBlur: o,
|
|
80
53
|
onKeyup: [
|
|
81
|
-
|
|
82
|
-
|
|
54
|
+
h(s(o, ["prevent"]), ["enter"]),
|
|
55
|
+
h(s(o, ["prevent"]), ["esc"])
|
|
83
56
|
]
|
|
84
|
-
}, null,
|
|
57
|
+
}, null, 40, S), [
|
|
58
|
+
[V, i.value],
|
|
85
59
|
[
|
|
86
|
-
|
|
87
|
-
t(
|
|
60
|
+
K,
|
|
61
|
+
t(e),
|
|
88
62
|
void 0,
|
|
89
63
|
{ trim: !0 }
|
|
90
64
|
]
|
|
91
|
-
])
|
|
92
|
-
key: 0,
|
|
93
|
-
variant: "chipLabel",
|
|
94
|
-
class: s(["chip-label", { "chip-label--placeholder": !t(l) && e.placeholder }])
|
|
95
|
-
}, {
|
|
96
|
-
default: C(() => [
|
|
97
|
-
K(z(t(l) || e.placeholder), 1)
|
|
98
|
-
]),
|
|
99
|
-
_: 1
|
|
100
|
-
}, 8, ["class"])),
|
|
101
|
-
a.value ? (u(), I("span", {
|
|
102
|
-
key: 2,
|
|
103
|
-
ref_key: "sizerRef",
|
|
104
|
-
ref: v,
|
|
105
|
-
class: "chip-input-sizer"
|
|
106
|
-
}, z(t(l) || e.placeholder || ""), 513)) : O("", !0)
|
|
65
|
+
])
|
|
107
66
|
]),
|
|
108
|
-
|
|
109
|
-
class:
|
|
67
|
+
m(t(z), {
|
|
68
|
+
class: c(["clear-button", { "clear-button--invalid": l.isInvalid }]),
|
|
110
69
|
name: "x-circle",
|
|
111
70
|
size: "16px",
|
|
112
71
|
type: "fill",
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}, ["prevent"])),
|
|
116
|
-
onClick: o[2] || (o[2] = n((y) => r("remove"), ["stop"]))
|
|
117
|
-
}, null, 8, ["class", "color"]), [
|
|
118
|
-
[L, e.removable]
|
|
119
|
-
])
|
|
72
|
+
onClick: a[1] || (a[1] = s((u) => n("remove"), ["stop"]))
|
|
73
|
+
}, null, 8, ["class"])
|
|
120
74
|
]),
|
|
121
75
|
_: 1
|
|
122
|
-
}, 8, ["class", "label", "test-id", "color", "
|
|
76
|
+
}, 8, ["class", "label", "test-id", "color", "onClick"]));
|
|
123
77
|
}
|
|
124
78
|
});
|
|
125
79
|
export {
|
|
126
|
-
|
|
80
|
+
j as default
|
|
127
81
|
};
|
|
@@ -10,46 +10,13 @@ declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
|
|
|
10
10
|
type: import("vue").PropType<string>;
|
|
11
11
|
default: string;
|
|
12
12
|
};
|
|
13
|
-
variant: {
|
|
14
|
-
type: import("vue").PropType<"filled" | "outlined">;
|
|
15
|
-
default: string;
|
|
16
|
-
};
|
|
17
|
-
disabled: {
|
|
18
|
-
type: import("vue").PropType<boolean>;
|
|
19
|
-
default: boolean;
|
|
20
|
-
};
|
|
21
|
-
color: {
|
|
22
|
-
type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
|
|
23
|
-
default: string;
|
|
24
|
-
};
|
|
25
|
-
size: {
|
|
26
|
-
type: import("vue").PropType<"small" | "medium">;
|
|
27
|
-
default: string;
|
|
28
|
-
};
|
|
29
|
-
rounded: {
|
|
30
|
-
type: import("vue").PropType<boolean>;
|
|
31
|
-
default: boolean;
|
|
32
|
-
};
|
|
33
|
-
placeholder: {
|
|
34
|
-
type: import("vue").PropType<string>;
|
|
35
|
-
default: string;
|
|
36
|
-
};
|
|
37
13
|
isInvalid: {
|
|
38
14
|
type: import("vue").PropType<boolean>;
|
|
39
15
|
default: boolean;
|
|
40
16
|
};
|
|
41
|
-
removable: {
|
|
42
|
-
type: import("vue").PropType<boolean>;
|
|
43
|
-
default: boolean;
|
|
44
|
-
};
|
|
45
|
-
iconColor: {
|
|
46
|
-
type: import("vue").PropType<string>;
|
|
47
|
-
default: string;
|
|
48
|
-
};
|
|
49
17
|
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
50
18
|
"update:label": (value: string) => void;
|
|
51
19
|
remove: () => void;
|
|
52
|
-
stopEditing: () => void;
|
|
53
20
|
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
54
21
|
label: {
|
|
55
22
|
type: import("vue").PropType<string>;
|
|
@@ -60,58 +27,17 @@ declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
|
|
|
60
27
|
type: import("vue").PropType<string>;
|
|
61
28
|
default: string;
|
|
62
29
|
};
|
|
63
|
-
variant: {
|
|
64
|
-
type: import("vue").PropType<"filled" | "outlined">;
|
|
65
|
-
default: string;
|
|
66
|
-
};
|
|
67
|
-
disabled: {
|
|
68
|
-
type: import("vue").PropType<boolean>;
|
|
69
|
-
default: boolean;
|
|
70
|
-
};
|
|
71
|
-
color: {
|
|
72
|
-
type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
|
|
73
|
-
default: string;
|
|
74
|
-
};
|
|
75
|
-
size: {
|
|
76
|
-
type: import("vue").PropType<"small" | "medium">;
|
|
77
|
-
default: string;
|
|
78
|
-
};
|
|
79
|
-
rounded: {
|
|
80
|
-
type: import("vue").PropType<boolean>;
|
|
81
|
-
default: boolean;
|
|
82
|
-
};
|
|
83
|
-
placeholder: {
|
|
84
|
-
type: import("vue").PropType<string>;
|
|
85
|
-
default: string;
|
|
86
|
-
};
|
|
87
30
|
isInvalid: {
|
|
88
31
|
type: import("vue").PropType<boolean>;
|
|
89
32
|
default: boolean;
|
|
90
33
|
};
|
|
91
|
-
removable: {
|
|
92
|
-
type: import("vue").PropType<boolean>;
|
|
93
|
-
default: boolean;
|
|
94
|
-
};
|
|
95
|
-
iconColor: {
|
|
96
|
-
type: import("vue").PropType<string>;
|
|
97
|
-
default: string;
|
|
98
|
-
};
|
|
99
34
|
}>> & {
|
|
100
35
|
onRemove?: () => any;
|
|
101
36
|
"onUpdate:label"?: (value: string) => any;
|
|
102
|
-
onStopEditing?: () => any;
|
|
103
37
|
}, {
|
|
104
38
|
label: string;
|
|
105
39
|
testId: string;
|
|
106
|
-
variant: "filled" | "outlined";
|
|
107
|
-
disabled: boolean;
|
|
108
|
-
color: "dark" | "default" | "primary" | "info" | "success" | "warning" | "error";
|
|
109
|
-
size: "small" | "medium";
|
|
110
|
-
rounded: boolean;
|
|
111
|
-
placeholder: string;
|
|
112
40
|
isInvalid: boolean;
|
|
113
|
-
removable: boolean;
|
|
114
|
-
iconColor: string;
|
|
115
41
|
}> | import("vue").DefineComponent<{
|
|
116
42
|
testId: {
|
|
117
43
|
type: import("vue").PropType<string>;
|
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './AppIcon.vue_vue_type_style_index_0_scoped_56ba337c_lang.css';
|
|
2
2
|
import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
|
|
3
3
|
import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
|
|
4
4
|
import { MenuItemTypes as ao } from "./components/menuItem/index.js";
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-cbb21c6a],.font-chart-2[data-v-cbb21c6a],.font-chart-1[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:700}.chip-input-sizer[data-v-cbb21c6a],.chip-input[data-v-cbb21c6a],.font-chip-label[data-v-cbb21c6a],.font-table-label[data-v-cbb21c6a],.font-button[data-v-cbb21c6a],.font-heading-6[data-v-cbb21c6a],.font-heading-5[data-v-cbb21c6a],.font-heading-4[data-v-cbb21c6a],.font-heading-3[data-v-cbb21c6a],.font-heading-2[data-v-cbb21c6a],.font-heading-1[data-v-cbb21c6a],.font-title[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-cbb21c6a],.font-input-label[data-v-cbb21c6a],.font-overline[data-v-cbb21c6a],.font-subtitle-2[data-v-cbb21c6a],.font-subtitle-1[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-cbb21c6a],.font-body-2[data-v-cbb21c6a],.font-body-1[data-v-cbb21c6a]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-cbb21c6a]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-cbb21c6a]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-cbb21c6a]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-cbb21c6a]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-cbb21c6a]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-cbb21c6a]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-cbb21c6a]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-cbb21c6a]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-cbb21c6a]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-cbb21c6a]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-cbb21c6a]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-cbb21c6a]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-cbb21c6a]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-cbb21c6a]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-cbb21c6a]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-cbb21c6a]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-cbb21c6a]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-cbb21c6a]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-cbb21c6a],.font-tab-label2[data-v-cbb21c6a]{font-size:.875rem;line-height:1rem}.chip-input-sizer[data-v-cbb21c6a],.chip-input[data-v-cbb21c6a],.font-chip-label[data-v-cbb21c6a]{font-size:.75rem;line-height:1rem}h1[data-v-cbb21c6a],h2[data-v-cbb21c6a],h3[data-v-cbb21c6a],h4[data-v-cbb21c6a],h5[data-v-cbb21c6a],h6[data-v-cbb21c6a]{margin:0}.rounded-chip[data-v-cbb21c6a]{border-radius:100px}.tags-field-chip--editing[data-v-cbb21c6a]{outline:1px solid var(--outline-color)}.chip-content[data-v-cbb21c6a]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.chip-label[data-v-cbb21c6a]{min-width:.5rem}.chip-label--hidden[data-v-cbb21c6a]{visibility:hidden}.chip-input[data-v-cbb21c6a]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.chip-input[data-v-cbb21c6a]:focus{outline:none}.chip-input-outline[data-v-cbb21c6a]::placeholder{color:var(--action-disabled)}.clear-button[data-v-cbb21c6a]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-cbb21c6a]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-cbb21c6a]{color:var(--error-dark)}.clear-button--invalid[data-v-cbb21c6a]:hover{color:var(--error-darker)}.chip-input-sizer[data-v-cbb21c6a]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}
|