@v1nt1248/3nclient-lib 0.0.30 → 0.0.32

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.
Files changed (14) hide show
  1. package/README.md +2 -0
  2. package/dist/components/ui3n-button.vue.d.ts +1 -1
  3. package/dist/components/ui3n-chip.vue.d.ts +1 -1
  4. package/dist/components/ui3n-list.vue.d.ts +3 -3
  5. package/dist/stories/Ui3nBadge.stories.d.ts +160 -0
  6. package/dist/stories/Ui3nButton.stories.d.ts +6 -6
  7. package/dist/stories/Ui3nChip.stories.d.ts +465 -13
  8. package/dist/stories/Ui3nList.stories.d.ts +3 -3
  9. package/dist/style.css +1 -1
  10. package/dist/ui-3n-lib.js +7 -7
  11. package/package.json +1 -1
  12. package/src/components/ui3n-badge-simple.vue +97 -0
  13. package/src/components/ui3n-badge.vue +89 -0
  14. package/src/components/ui3n-chip.vue +1 -0
package/README.md CHANGED
@@ -7,8 +7,10 @@ For demo and development - `yarn storybook` or `npm run storybook`.
7
7
  You can run the project as `yarn dev` or `npm run dev` if you don't want to use Storybook.
8
8
 
9
9
  ## Components
10
+ - Ui3nBadge,
10
11
  - Ui3nButton
11
12
  - Ui3nCheckbox
13
+ - Ui3nChip
12
14
  - Ui3nIcon
13
15
  - Ui3nInput
14
16
  - Ui3nText
package/dist/components/ui3n-button.vue.d.ts CHANGED
@@ -18,9 +18,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
18
18
  focus: (value: Event) => void;
19
19
  blur: (value: Event) => void;
20
20
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Ui3nButtonProps>>> & {
21
- onClick?: ((value: Event) => any) | undefined;
22
21
  onFocus?: ((value: Event) => any) | undefined;
23
22
  onBlur?: ((value: Event) => any) | undefined;
23
+ onClick?: ((value: Event) => any) | undefined;
24
24
  }, {}, {}>, {
25
25
  default?(_: {}): any;
26
26
  }>;
package/dist/components/ui3n-chip.vue.d.ts CHANGED
@@ -41,9 +41,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
41
41
  }>>> & {
42
42
  onClose?: (() => any) | undefined;
43
43
  }, {
44
- height: string | number;
45
44
  color: string;
46
45
  textColor: string;
46
+ height: string | number;
47
47
  round: boolean;
48
48
  maxWidth: string | number;
49
49
  plain: boolean;
package/dist/components/ui3n-list.vue.d.ts CHANGED
@@ -21,11 +21,11 @@ declare const _default: <T extends {
21
21
  id?: string | undefined;
22
22
  }>(__VLS_props: {
23
23
  title?: string | undefined;
24
- disabled?: boolean | undefined;
25
24
  onSelect?: ((value: {
26
25
  value: T;
27
26
  index: number;
28
27
  }) => any) | undefined;
28
+ disabled?: boolean | undefined;
29
29
  sticky?: boolean | undefined;
30
30
  items: T[];
31
31
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
@@ -35,11 +35,11 @@ declare const _default: <T extends {
35
35
  } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
36
36
  props: {
37
37
  title?: string | undefined;
38
- disabled?: boolean | undefined;
39
38
  onSelect?: ((value: {
40
39
  value: T;
41
40
  index: number;
42
41
  }) => any) | undefined;
42
+ disabled?: boolean | undefined;
43
43
  sticky?: boolean | undefined;
44
44
  items: T[];
45
45
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
@@ -53,11 +53,11 @@ declare const _default: <T extends {
53
53
  __ctx?: {
54
54
  props: {
55
55
  title?: string | undefined;
56
- disabled?: boolean | undefined;
57
56
  onSelect?: ((value: {
58
57
  value: T;
59
58
  index: number;
60
59
  }) => any) | undefined;
60
+ disabled?: boolean | undefined;
61
61
  sticky?: boolean | undefined;
62
62
  items: T[];
63
63
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
package/dist/stories/Ui3nBadge.stories.d.ts ADDED
@@ -0,0 +1,160 @@
1
+ import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
2
+ import Ui3nBadge from '../components/ui3n-badge.vue';
3
+ declare const meta: Meta<typeof Ui3nBadge>;
4
+ export default meta;
5
+ export declare const Badge_Simple: StoryObj<typeof meta>;
6
+ export declare const Use_Slot: StoryFn<{
7
+ new (...args: any[]): {
8
+ $: import("vue").ComponentInternalInstance;
9
+ $data: {};
10
+ $props: Partial<{
11
+ dot: boolean;
12
+ value: string | number;
13
+ color: string;
14
+ textColor: string;
15
+ position: "right-top" | "right-bottom" | "left-top" | "left-bottom";
16
+ }> & Omit<{
17
+ readonly dot: boolean;
18
+ readonly value: string | number;
19
+ readonly color: string;
20
+ readonly textColor: string;
21
+ readonly position: "right-top" | "right-bottom" | "left-top" | "left-bottom";
22
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
23
+ dot: {
24
+ type: import("vue").PropType<boolean>;
25
+ default: boolean;
26
+ };
27
+ value: {
28
+ type: import("vue").PropType<string | number>;
29
+ default: string;
30
+ };
31
+ color: {
32
+ type: import("vue").PropType<string>;
33
+ default: string;
34
+ };
35
+ textColor: {
36
+ type: import("vue").PropType<string>;
37
+ default: string;
38
+ };
39
+ position: {
40
+ type: import("vue").PropType<"right-top" | "right-bottom" | "left-top" | "left-bottom">;
41
+ default: string;
42
+ };
43
+ }>>, "dot" | "value" | "color" | "textColor" | "position">;
44
+ $attrs: {
45
+ [x: string]: unknown;
46
+ };
47
+ $refs: {
48
+ [x: string]: unknown;
49
+ };
50
+ $slots: Readonly<{
51
+ [name: string]: import("vue").Slot<any> | undefined;
52
+ }>;
53
+ $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
54
+ $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
55
+ $emit: (event: string, ...args: any[]) => void;
56
+ $el: any;
57
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
58
+ dot: {
59
+ type: import("vue").PropType<boolean>;
60
+ default: boolean;
61
+ };
62
+ value: {
63
+ type: import("vue").PropType<string | number>;
64
+ default: string;
65
+ };
66
+ color: {
67
+ type: import("vue").PropType<string>;
68
+ default: string;
69
+ };
70
+ textColor: {
71
+ type: import("vue").PropType<string>;
72
+ default: string;
73
+ };
74
+ position: {
75
+ type: import("vue").PropType<"right-top" | "right-bottom" | "left-top" | "left-bottom">;
76
+ default: string;
77
+ };
78
+ }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
79
+ dot: boolean;
80
+ value: string | number;
81
+ color: string;
82
+ textColor: string;
83
+ position: "right-top" | "right-bottom" | "left-top" | "left-bottom";
84
+ }, {}, string, {}> & {
85
+ beforeCreate?: ((() => void) | (() => void)[]) | undefined;
86
+ created?: ((() => void) | (() => void)[]) | undefined;
87
+ beforeMount?: ((() => void) | (() => void)[]) | undefined;
88
+ mounted?: ((() => void) | (() => void)[]) | undefined;
89
+ beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
90
+ updated?: ((() => void) | (() => void)[]) | undefined;
91
+ activated?: ((() => void) | (() => void)[]) | undefined;
92
+ deactivated?: ((() => void) | (() => void)[]) | undefined;
93
+ beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
94
+ beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
95
+ destroyed?: ((() => void) | (() => void)[]) | undefined;
96
+ unmounted?: ((() => void) | (() => void)[]) | undefined;
97
+ renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
98
+ renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
99
+ errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
100
+ };
101
+ $forceUpdate: () => void;
102
+ $nextTick: typeof import("vue").nextTick;
103
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
104
+ } & Readonly<import("vue").ExtractPropTypes<{
105
+ dot: {
106
+ type: import("vue").PropType<boolean>;
107
+ default: boolean;
108
+ };
109
+ value: {
110
+ type: import("vue").PropType<string | number>;
111
+ default: string;
112
+ };
113
+ color: {
114
+ type: import("vue").PropType<string>;
115
+ default: string;
116
+ };
117
+ textColor: {
118
+ type: import("vue").PropType<string>;
119
+ default: string;
120
+ };
121
+ position: {
122
+ type: import("vue").PropType<"right-top" | "right-bottom" | "left-top" | "left-bottom">;
123
+ default: string;
124
+ };
125
+ }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
126
+ __isFragment?: undefined;
127
+ __isTeleport?: undefined;
128
+ __isSuspense?: undefined;
129
+ } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
130
+ dot: {
131
+ type: import("vue").PropType<boolean>;
132
+ default: boolean;
133
+ };
134
+ value: {
135
+ type: import("vue").PropType<string | number>;
136
+ default: string;
137
+ };
138
+ color: {
139
+ type: import("vue").PropType<string>;
140
+ default: string;
141
+ };
142
+ textColor: {
143
+ type: import("vue").PropType<string>;
144
+ default: string;
145
+ };
146
+ position: {
147
+ type: import("vue").PropType<"right-top" | "right-bottom" | "left-top" | "left-bottom">;
148
+ default: string;
149
+ };
150
+ }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
151
+ dot: boolean;
152
+ value: string | number;
153
+ color: string;
154
+ textColor: string;
155
+ position: "right-top" | "right-bottom" | "left-top" | "left-bottom";
156
+ }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
157
+ $slots: {
158
+ default?(_: {}): any;
159
+ };
160
+ })>;
package/dist/stories/Ui3nButton.stories.d.ts CHANGED
@@ -7,17 +7,17 @@ export declare const WithText: StoryFn<{
7
7
  $: import("vue").ComponentInternalInstance;
8
8
  $data: {};
9
9
  $props: Partial<{}> & Omit<{
10
- readonly icon?: string | undefined;
11
10
  readonly color?: string | undefined;
12
11
  readonly textColor?: string | undefined;
12
+ readonly icon?: string | undefined;
13
13
  readonly round?: boolean | undefined;
14
14
  readonly elevation?: boolean | undefined;
15
15
  readonly iconSize?: string | number | undefined;
16
16
  readonly iconColor?: string | undefined;
17
17
  readonly disabled?: boolean | undefined;
18
- onClick?: ((value: Event) => any) | undefined;
19
18
  onFocus?: ((value: Event) => any) | undefined;
20
19
  onBlur?: ((value: Event) => any) | undefined;
20
+ onClick?: ((value: Event) => any) | undefined;
21
21
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
22
22
  textColor: {
23
23
  type: import("vue").PropType<string>;
@@ -44,9 +44,9 @@ export declare const WithText: StoryFn<{
44
44
  type: import("vue").PropType<boolean>;
45
45
  };
46
46
  }>> & {
47
- onClick?: ((value: Event) => any) | undefined;
48
47
  onFocus?: ((value: Event) => any) | undefined;
49
48
  onBlur?: ((value: Event) => any) | undefined;
49
+ onClick?: ((value: Event) => any) | undefined;
50
50
  }, never>;
51
51
  $attrs: {
52
52
  [x: string]: unknown;
@@ -87,9 +87,9 @@ export declare const WithText: StoryFn<{
87
87
  type: import("vue").PropType<boolean>;
88
88
  };
89
89
  }>> & {
90
- onClick?: ((value: Event) => any) | undefined;
91
90
  onFocus?: ((value: Event) => any) | undefined;
92
91
  onBlur?: ((value: Event) => any) | undefined;
92
+ onClick?: ((value: Event) => any) | undefined;
93
93
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
94
94
  click: (value: Event) => void;
95
95
  focus: (value: Event) => void;
@@ -140,9 +140,9 @@ export declare const WithText: StoryFn<{
140
140
  type: import("vue").PropType<boolean>;
141
141
  };
142
142
  }>> & {
143
- onClick?: ((value: Event) => any) | undefined;
144
143
  onFocus?: ((value: Event) => any) | undefined;
145
144
  onBlur?: ((value: Event) => any) | undefined;
145
+ onClick?: ((value: Event) => any) | undefined;
146
146
  } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
147
147
  __isFragment?: undefined;
148
148
  __isTeleport?: undefined;
@@ -173,9 +173,9 @@ export declare const WithText: StoryFn<{
173
173
  type: import("vue").PropType<boolean>;
174
174
  };
175
175
  }>> & {
176
- onClick?: ((value: Event) => any) | undefined;
177
176
  onFocus?: ((value: Event) => any) | undefined;
178
177
  onBlur?: ((value: Event) => any) | undefined;
178
+ onClick?: ((value: Event) => any) | undefined;
179
179
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
180
180
  click: (value: Event) => void;
181
181
  focus: (value: Event) => void;
package/dist/stories/Ui3nChip.stories.d.ts CHANGED
@@ -7,18 +7,18 @@ export declare const Default: StoryFn<{
7
7
  $: import("vue").ComponentInternalInstance;
8
8
  $data: {};
9
9
  $props: Partial<{
10
- height: string | number;
11
10
  color: string;
12
11
  textColor: string;
12
+ height: string | number;
13
13
  round: boolean;
14
14
  maxWidth: string | number;
15
15
  plain: boolean;
16
16
  closeable: boolean;
17
17
  textSize: string | number;
18
18
  }> & Omit<{
19
- readonly height: string | number;
20
19
  readonly color: string;
21
20
  readonly textColor: string;
21
+ readonly height: string | number;
22
22
  readonly round: boolean;
23
23
  readonly maxWidth: string | number;
24
24
  readonly plain: boolean;
@@ -26,10 +26,6 @@ export declare const Default: StoryFn<{
26
26
  readonly textSize: string | number;
27
27
  onClose?: (() => any) | undefined;
28
28
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
29
- height: {
30
- type: import("vue").PropType<string | number>;
31
- default: number;
32
- };
33
29
  color: {
34
30
  type: import("vue").PropType<string>;
35
31
  default: string;
@@ -38,6 +34,10 @@ export declare const Default: StoryFn<{
38
34
  type: import("vue").PropType<string>;
39
35
  default: string;
40
36
  };
37
+ height: {
38
+ type: import("vue").PropType<string | number>;
39
+ default: number;
40
+ };
41
41
  round: {
42
42
  type: import("vue").PropType<boolean>;
43
43
  default: boolean;
@@ -60,7 +60,7 @@ export declare const Default: StoryFn<{
60
60
  };
61
61
  }>> & {
62
62
  onClose?: (() => any) | undefined;
63
- }, "height" | "color" | "textColor" | "round" | "maxWidth" | "plain" | "closeable" | "textSize">;
63
+ }, "color" | "textColor" | "height" | "round" | "maxWidth" | "plain" | "closeable" | "textSize">;
64
64
  $attrs: {
65
65
  [x: string]: unknown;
66
66
  };
@@ -75,10 +75,6 @@ export declare const Default: StoryFn<{
75
75
  $emit: (event: "close") => void;
76
76
  $el: any;
77
77
  $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
78
- height: {
79
- type: import("vue").PropType<string | number>;
80
- default: number;
81
- };
82
78
  color: {
83
79
  type: import("vue").PropType<string>;
84
80
  default: string;
@@ -87,6 +83,10 @@ export declare const Default: StoryFn<{
87
83
  type: import("vue").PropType<string>;
88
84
  default: string;
89
85
  };
86
+ height: {
87
+ type: import("vue").PropType<string | number>;
88
+ default: number;
89
+ };
90
90
  round: {
91
91
  type: import("vue").PropType<boolean>;
92
92
  default: boolean;
@@ -112,9 +112,9 @@ export declare const Default: StoryFn<{
112
112
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
113
113
  close: () => void;
114
114
  }, string, {
115
- height: string | number;
116
115
  color: string;
117
116
  textColor: string;
117
+ height: string | number;
118
118
  round: boolean;
119
119
  maxWidth: string | number;
120
120
  plain: boolean;
@@ -141,10 +141,232 @@ export declare const Default: StoryFn<{
141
141
  $nextTick: typeof import("vue").nextTick;
142
142
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
143
143
  } & Readonly<import("vue").ExtractPropTypes<{
144
+ color: {
145
+ type: import("vue").PropType<string>;
146
+ default: string;
147
+ };
148
+ textColor: {
149
+ type: import("vue").PropType<string>;
150
+ default: string;
151
+ };
144
152
  height: {
145
153
  type: import("vue").PropType<string | number>;
146
154
  default: number;
147
155
  };
156
+ round: {
157
+ type: import("vue").PropType<boolean>;
158
+ default: boolean;
159
+ };
160
+ maxWidth: {
161
+ type: import("vue").PropType<string | number>;
162
+ default: number;
163
+ };
164
+ plain: {
165
+ type: import("vue").PropType<boolean>;
166
+ default: boolean;
167
+ };
168
+ closeable: {
169
+ type: import("vue").PropType<boolean>;
170
+ default: boolean;
171
+ };
172
+ textSize: {
173
+ type: import("vue").PropType<string | number>;
174
+ default: number;
175
+ };
176
+ }>> & {
177
+ onClose?: (() => any) | undefined;
178
+ } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
179
+ __isFragment?: undefined;
180
+ __isTeleport?: undefined;
181
+ __isSuspense?: undefined;
182
+ } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
183
+ color: {
184
+ type: import("vue").PropType<string>;
185
+ default: string;
186
+ };
187
+ textColor: {
188
+ type: import("vue").PropType<string>;
189
+ default: string;
190
+ };
191
+ height: {
192
+ type: import("vue").PropType<string | number>;
193
+ default: number;
194
+ };
195
+ round: {
196
+ type: import("vue").PropType<boolean>;
197
+ default: boolean;
198
+ };
199
+ maxWidth: {
200
+ type: import("vue").PropType<string | number>;
201
+ default: number;
202
+ };
203
+ plain: {
204
+ type: import("vue").PropType<boolean>;
205
+ default: boolean;
206
+ };
207
+ closeable: {
208
+ type: import("vue").PropType<boolean>;
209
+ default: boolean;
210
+ };
211
+ textSize: {
212
+ type: import("vue").PropType<string | number>;
213
+ default: number;
214
+ };
215
+ }>> & {
216
+ onClose?: (() => any) | undefined;
217
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
218
+ close: () => void;
219
+ }, string, {
220
+ color: string;
221
+ textColor: string;
222
+ height: string | number;
223
+ round: boolean;
224
+ maxWidth: string | number;
225
+ plain: boolean;
226
+ closeable: boolean;
227
+ textSize: string | number;
228
+ }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
229
+ $slots: Readonly<import("../components/ui3n-chip.vue").Ui3nChipSlots>;
230
+ })>;
231
+ export declare const Closable: StoryFn<{
232
+ new (...args: any[]): {
233
+ $: import("vue").ComponentInternalInstance;
234
+ $data: {};
235
+ $props: Partial<{
236
+ color: string;
237
+ textColor: string;
238
+ height: string | number;
239
+ round: boolean;
240
+ maxWidth: string | number;
241
+ plain: boolean;
242
+ closeable: boolean;
243
+ textSize: string | number;
244
+ }> & Omit<{
245
+ readonly color: string;
246
+ readonly textColor: string;
247
+ readonly height: string | number;
248
+ readonly round: boolean;
249
+ readonly maxWidth: string | number;
250
+ readonly plain: boolean;
251
+ readonly closeable: boolean;
252
+ readonly textSize: string | number;
253
+ onClose?: (() => any) | undefined;
254
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
255
+ color: {
256
+ type: import("vue").PropType<string>;
257
+ default: string;
258
+ };
259
+ textColor: {
260
+ type: import("vue").PropType<string>;
261
+ default: string;
262
+ };
263
+ height: {
264
+ type: import("vue").PropType<string | number>;
265
+ default: number;
266
+ };
267
+ round: {
268
+ type: import("vue").PropType<boolean>;
269
+ default: boolean;
270
+ };
271
+ maxWidth: {
272
+ type: import("vue").PropType<string | number>;
273
+ default: number;
274
+ };
275
+ plain: {
276
+ type: import("vue").PropType<boolean>;
277
+ default: boolean;
278
+ };
279
+ closeable: {
280
+ type: import("vue").PropType<boolean>;
281
+ default: boolean;
282
+ };
283
+ textSize: {
284
+ type: import("vue").PropType<string | number>;
285
+ default: number;
286
+ };
287
+ }>> & {
288
+ onClose?: (() => any) | undefined;
289
+ }, "color" | "textColor" | "height" | "round" | "maxWidth" | "plain" | "closeable" | "textSize">;
290
+ $attrs: {
291
+ [x: string]: unknown;
292
+ };
293
+ $refs: {
294
+ [x: string]: unknown;
295
+ };
296
+ $slots: Readonly<{
297
+ [name: string]: import("vue").Slot<any> | undefined;
298
+ }>;
299
+ $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
300
+ $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
301
+ $emit: (event: "close") => void;
302
+ $el: any;
303
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
304
+ color: {
305
+ type: import("vue").PropType<string>;
306
+ default: string;
307
+ };
308
+ textColor: {
309
+ type: import("vue").PropType<string>;
310
+ default: string;
311
+ };
312
+ height: {
313
+ type: import("vue").PropType<string | number>;
314
+ default: number;
315
+ };
316
+ round: {
317
+ type: import("vue").PropType<boolean>;
318
+ default: boolean;
319
+ };
320
+ maxWidth: {
321
+ type: import("vue").PropType<string | number>;
322
+ default: number;
323
+ };
324
+ plain: {
325
+ type: import("vue").PropType<boolean>;
326
+ default: boolean;
327
+ };
328
+ closeable: {
329
+ type: import("vue").PropType<boolean>;
330
+ default: boolean;
331
+ };
332
+ textSize: {
333
+ type: import("vue").PropType<string | number>;
334
+ default: number;
335
+ };
336
+ }>> & {
337
+ onClose?: (() => any) | undefined;
338
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
339
+ close: () => void;
340
+ }, string, {
341
+ color: string;
342
+ textColor: string;
343
+ height: string | number;
344
+ round: boolean;
345
+ maxWidth: string | number;
346
+ plain: boolean;
347
+ closeable: boolean;
348
+ textSize: string | number;
349
+ }, {}, string, {}> & {
350
+ beforeCreate?: ((() => void) | (() => void)[]) | undefined;
351
+ created?: ((() => void) | (() => void)[]) | undefined;
352
+ beforeMount?: ((() => void) | (() => void)[]) | undefined;
353
+ mounted?: ((() => void) | (() => void)[]) | undefined;
354
+ beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
355
+ updated?: ((() => void) | (() => void)[]) | undefined;
356
+ activated?: ((() => void) | (() => void)[]) | undefined;
357
+ deactivated?: ((() => void) | (() => void)[]) | undefined;
358
+ beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
359
+ beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
360
+ destroyed?: ((() => void) | (() => void)[]) | undefined;
361
+ unmounted?: ((() => void) | (() => void)[]) | undefined;
362
+ renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
363
+ renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
364
+ errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
365
+ };
366
+ $forceUpdate: () => void;
367
+ $nextTick: typeof import("vue").nextTick;
368
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
369
+ } & Readonly<import("vue").ExtractPropTypes<{
148
370
  color: {
149
371
  type: import("vue").PropType<string>;
150
372
  default: string;
@@ -153,6 +375,10 @@ export declare const Default: StoryFn<{
153
375
  type: import("vue").PropType<string>;
154
376
  default: string;
155
377
  };
378
+ height: {
379
+ type: import("vue").PropType<string | number>;
380
+ default: number;
381
+ };
156
382
  round: {
157
383
  type: import("vue").PropType<boolean>;
158
384
  default: boolean;
@@ -180,10 +406,232 @@ export declare const Default: StoryFn<{
180
406
  __isTeleport?: undefined;
181
407
  __isSuspense?: undefined;
182
408
  } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
409
+ color: {
410
+ type: import("vue").PropType<string>;
411
+ default: string;
412
+ };
413
+ textColor: {
414
+ type: import("vue").PropType<string>;
415
+ default: string;
416
+ };
183
417
  height: {
184
418
  type: import("vue").PropType<string | number>;
185
419
  default: number;
186
420
  };
421
+ round: {
422
+ type: import("vue").PropType<boolean>;
423
+ default: boolean;
424
+ };
425
+ maxWidth: {
426
+ type: import("vue").PropType<string | number>;
427
+ default: number;
428
+ };
429
+ plain: {
430
+ type: import("vue").PropType<boolean>;
431
+ default: boolean;
432
+ };
433
+ closeable: {
434
+ type: import("vue").PropType<boolean>;
435
+ default: boolean;
436
+ };
437
+ textSize: {
438
+ type: import("vue").PropType<string | number>;
439
+ default: number;
440
+ };
441
+ }>> & {
442
+ onClose?: (() => any) | undefined;
443
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
444
+ close: () => void;
445
+ }, string, {
446
+ color: string;
447
+ textColor: string;
448
+ height: string | number;
449
+ round: boolean;
450
+ maxWidth: string | number;
451
+ plain: boolean;
452
+ closeable: boolean;
453
+ textSize: string | number;
454
+ }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
455
+ $slots: Readonly<import("../components/ui3n-chip.vue").Ui3nChipSlots>;
456
+ })>;
457
+ export declare const With_Icon: StoryFn<{
458
+ new (...args: any[]): {
459
+ $: import("vue").ComponentInternalInstance;
460
+ $data: {};
461
+ $props: Partial<{
462
+ color: string;
463
+ textColor: string;
464
+ height: string | number;
465
+ round: boolean;
466
+ maxWidth: string | number;
467
+ plain: boolean;
468
+ closeable: boolean;
469
+ textSize: string | number;
470
+ }> & Omit<{
471
+ readonly color: string;
472
+ readonly textColor: string;
473
+ readonly height: string | number;
474
+ readonly round: boolean;
475
+ readonly maxWidth: string | number;
476
+ readonly plain: boolean;
477
+ readonly closeable: boolean;
478
+ readonly textSize: string | number;
479
+ onClose?: (() => any) | undefined;
480
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
481
+ color: {
482
+ type: import("vue").PropType<string>;
483
+ default: string;
484
+ };
485
+ textColor: {
486
+ type: import("vue").PropType<string>;
487
+ default: string;
488
+ };
489
+ height: {
490
+ type: import("vue").PropType<string | number>;
491
+ default: number;
492
+ };
493
+ round: {
494
+ type: import("vue").PropType<boolean>;
495
+ default: boolean;
496
+ };
497
+ maxWidth: {
498
+ type: import("vue").PropType<string | number>;
499
+ default: number;
500
+ };
501
+ plain: {
502
+ type: import("vue").PropType<boolean>;
503
+ default: boolean;
504
+ };
505
+ closeable: {
506
+ type: import("vue").PropType<boolean>;
507
+ default: boolean;
508
+ };
509
+ textSize: {
510
+ type: import("vue").PropType<string | number>;
511
+ default: number;
512
+ };
513
+ }>> & {
514
+ onClose?: (() => any) | undefined;
515
+ }, "color" | "textColor" | "height" | "round" | "maxWidth" | "plain" | "closeable" | "textSize">;
516
+ $attrs: {
517
+ [x: string]: unknown;
518
+ };
519
+ $refs: {
520
+ [x: string]: unknown;
521
+ };
522
+ $slots: Readonly<{
523
+ [name: string]: import("vue").Slot<any> | undefined;
524
+ }>;
525
+ $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
526
+ $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
527
+ $emit: (event: "close") => void;
528
+ $el: any;
529
+ $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
530
+ color: {
531
+ type: import("vue").PropType<string>;
532
+ default: string;
533
+ };
534
+ textColor: {
535
+ type: import("vue").PropType<string>;
536
+ default: string;
537
+ };
538
+ height: {
539
+ type: import("vue").PropType<string | number>;
540
+ default: number;
541
+ };
542
+ round: {
543
+ type: import("vue").PropType<boolean>;
544
+ default: boolean;
545
+ };
546
+ maxWidth: {
547
+ type: import("vue").PropType<string | number>;
548
+ default: number;
549
+ };
550
+ plain: {
551
+ type: import("vue").PropType<boolean>;
552
+ default: boolean;
553
+ };
554
+ closeable: {
555
+ type: import("vue").PropType<boolean>;
556
+ default: boolean;
557
+ };
558
+ textSize: {
559
+ type: import("vue").PropType<string | number>;
560
+ default: number;
561
+ };
562
+ }>> & {
563
+ onClose?: (() => any) | undefined;
564
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
565
+ close: () => void;
566
+ }, string, {
567
+ color: string;
568
+ textColor: string;
569
+ height: string | number;
570
+ round: boolean;
571
+ maxWidth: string | number;
572
+ plain: boolean;
573
+ closeable: boolean;
574
+ textSize: string | number;
575
+ }, {}, string, {}> & {
576
+ beforeCreate?: ((() => void) | (() => void)[]) | undefined;
577
+ created?: ((() => void) | (() => void)[]) | undefined;
578
+ beforeMount?: ((() => void) | (() => void)[]) | undefined;
579
+ mounted?: ((() => void) | (() => void)[]) | undefined;
580
+ beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
581
+ updated?: ((() => void) | (() => void)[]) | undefined;
582
+ activated?: ((() => void) | (() => void)[]) | undefined;
583
+ deactivated?: ((() => void) | (() => void)[]) | undefined;
584
+ beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
585
+ beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
586
+ destroyed?: ((() => void) | (() => void)[]) | undefined;
587
+ unmounted?: ((() => void) | (() => void)[]) | undefined;
588
+ renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
589
+ renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
590
+ errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
591
+ };
592
+ $forceUpdate: () => void;
593
+ $nextTick: typeof import("vue").nextTick;
594
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
595
+ } & Readonly<import("vue").ExtractPropTypes<{
596
+ color: {
597
+ type: import("vue").PropType<string>;
598
+ default: string;
599
+ };
600
+ textColor: {
601
+ type: import("vue").PropType<string>;
602
+ default: string;
603
+ };
604
+ height: {
605
+ type: import("vue").PropType<string | number>;
606
+ default: number;
607
+ };
608
+ round: {
609
+ type: import("vue").PropType<boolean>;
610
+ default: boolean;
611
+ };
612
+ maxWidth: {
613
+ type: import("vue").PropType<string | number>;
614
+ default: number;
615
+ };
616
+ plain: {
617
+ type: import("vue").PropType<boolean>;
618
+ default: boolean;
619
+ };
620
+ closeable: {
621
+ type: import("vue").PropType<boolean>;
622
+ default: boolean;
623
+ };
624
+ textSize: {
625
+ type: import("vue").PropType<string | number>;
626
+ default: number;
627
+ };
628
+ }>> & {
629
+ onClose?: (() => any) | undefined;
630
+ } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
631
+ __isFragment?: undefined;
632
+ __isTeleport?: undefined;
633
+ __isSuspense?: undefined;
634
+ } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
187
635
  color: {
188
636
  type: import("vue").PropType<string>;
189
637
  default: string;
@@ -192,6 +640,10 @@ export declare const Default: StoryFn<{
192
640
  type: import("vue").PropType<string>;
193
641
  default: string;
194
642
  };
643
+ height: {
644
+ type: import("vue").PropType<string | number>;
645
+ default: number;
646
+ };
195
647
  round: {
196
648
  type: import("vue").PropType<boolean>;
197
649
  default: boolean;
@@ -217,9 +669,9 @@ export declare const Default: StoryFn<{
217
669
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
218
670
  close: () => void;
219
671
  }, string, {
220
- height: string | number;
221
672
  color: string;
222
673
  textColor: string;
674
+ height: string | number;
223
675
  round: boolean;
224
676
  maxWidth: string | number;
225
677
  plain: boolean;
package/dist/stories/Ui3nList.stories.d.ts CHANGED
@@ -6,11 +6,11 @@ export declare const Default: StoryFn<(<T extends {
6
6
  id?: string | undefined;
7
7
  }>(__VLS_props: {
8
8
  title?: string | undefined;
9
- disabled?: boolean | undefined;
10
9
  onSelect?: ((value: {
11
10
  value: T;
12
11
  index: number;
13
12
  }) => any) | undefined;
13
+ disabled?: boolean | undefined;
14
14
  sticky?: boolean | undefined;
15
15
  items: T[];
16
16
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
@@ -20,11 +20,11 @@ export declare const Default: StoryFn<(<T extends {
20
20
  } | undefined, __VLS_expose?: ((exposed: import("vue").ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
21
21
  props: {
22
22
  title?: string | undefined;
23
- disabled?: boolean | undefined;
24
23
  onSelect?: ((value: {
25
24
  value: T;
26
25
  index: number;
27
26
  }) => any) | undefined;
27
+ disabled?: boolean | undefined;
28
28
  sticky?: boolean | undefined;
29
29
  items: T[];
30
30
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
@@ -38,11 +38,11 @@ export declare const Default: StoryFn<(<T extends {
38
38
  __ctx?: {
39
39
  props: {
40
40
  title?: string | undefined;
41
- disabled?: boolean | undefined;
42
41
  onSelect?: ((value: {
43
42
  value: T;
44
43
  index: number;
45
44
  }) => any) | undefined;
45
+ disabled?: boolean | undefined;
46
46
  sticky?: boolean | undefined;
47
47
  items: T[];
48
48
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .ui3n-button[data-v-30734a5d]{--ui3n-button-text-size: 12px;--ui3n-button-text-height: 16px;--ui3n-button-text-color: var(--system-white, #fff);--ui3n-button-background: var(--blue-main, #0090ec);--ui3n-button-padding-vert: 8px;--ui3n-button-padding-horiz: 16px;display:flex;justify-content:center;align-items:center;border:none;outline:none;padding:var(--ui3n-button-padding-vert) var(--ui3n-button-padding-horiz);border-radius:4px;background:var(--ui3n-button-background);font-size:var(--ui3n-button-text-size);line-height:var(--ui3n-button-text-height);font-weight:600;color:var(--ui3n-button-text-color);-webkit-user-select:none;user-select:none;background-position:center;transition:background .5s ease-in-out}.ui3n-button--round[data-v-30734a5d]{--ui3n-button-padding-vert: 6px;--ui3n-button-padding-horiz: 6px;border-radius:50%}.ui3n-button--elevation[data-v-30734a5d]{box-shadow:0 2px 1px -1px var(--shadow-key-umbra-opacity, rgba(0, 0, 0, .2)),0 1px 1px 0 var(--shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)),0 1px 3px 0 var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-button[data-v-30734a5d]:not([disabled]):hover{box-shadow:0 0 4px var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-button:not([disabled]):hover .ui3n-button__icon[data-v-30734a5d],.ui3n-button:not([disabled]):hover .ui3n-button__text[data-v-30734a5d]{opacity:1}.ui3n-button__icon[data-v-30734a5d]{opacity:.85;transition:opacity .2s ease-in-out}.ui3n-button__text[data-v-30734a5d]{display:block;opacity:.85;transition:opacity .2s ease-in-out}.ui3n-button__text--margin[data-v-30734a5d]{margin-left:4px}.ui3n-button[disabled][data-v-30734a5d]{opacity:.7}.ui3n-button:not(.ui3n-button--round) .ui3n-button__icon[data-v-30734a5d],.ui3n-button:not(.ui3n-button--round) .ui3n-button__text[data-v-30734a5d]{pointer-events:none}.ui3n-button[data-v-30734a5d]:not([disabled]){cursor:pointer}.ui3n-button[data-v-30734a5d]:not([disabled]):hover{background:var(--ui3n-button-background) radial-gradient(circle,transparent 1%,var(--ui3n-button-background) 1%) center/15000%}.ui3n-button[data-v-30734a5d]:not([disabled]):active{opacity:1;background-color:var(--black-30, #b3b3b3);background-size:100%;transition:background 0s}.ui3n-notification[data-v-436fa887]{display:flex;position:relative;z-index:5000;border-radius:var(--half-size, 4px);padding:var(--base-size, 8px);max-width:400px;margin-bottom:var(--base-size)}.ui3n-notification--with-icon[data-v-436fa887]{display:flex;justify-content:flex-start;align-items:center}.ui3n-notification--with-icon .ui3n-notification__content[data-v-436fa887]{padding-left:var(--base-size, 8px)}.ui3n-notification__content[data-v-436fa887]{position:relative;flex-grow:2;font-size:var(--font-13, 13px);font-weight:400;line-height:1.5;color:var(--system-white, #fff)}.ui3n-notification__close[data-v-436fa887]{position:absolute;z-index:1;top:0;right:0}.ui3n-notification--success[data-v-436fa887]{background-color:#10c48f}.ui3n-notification--warning[data-v-436fa887]{background-color:#f80}.ui3n-notification--info[data-v-436fa887]{background-color:#10afef}.ui3n-notification--error[data-v-436fa887]{background-color:#ef5350}.ui3n-notification--left[data-v-436fa887]{margin-left:0;margin-right:auto}.ui3n-notification--center[data-v-436fa887]{margin-left:auto;margin-right:auto}.ui3n-notification--right[data-v-436fa887]{margin-left:auto;margin-right:0}.ui3n-dialog__overlay{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background-color:#0006}.ui3n-dialog{--dialog-border-radius: 8px;--dialog-title-padding: 16px 24px 16px;--dialog-title-font-size: 14px;--dialog-actions-padding: 16px;--dialog-confirm-button-color: var(--system-white, #fff);--dialog-cancel-button-color: var(--blue-main, #0090ec);--dialog-confirm-background-color: var(--blue-main, #0090ec);--dialog-cancel-background-color: var(--system-white, #fff);position:relative;display:flex;flex-direction:column;height:auto;max-height:95%;background-color:var(--system-white, #fff);border-radius:var(--dialog-border-radius);box-shadow:0 2px 1px -1px var(--shadow-key-umbra-opacity, rgba(0, 0, 0, .2)),0 1px 1px 0 var(--shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)),0 1px 3px 0 var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-dialog__title{padding:var(--dialog-title-padding);font-size:var(--dialog-title-font-size);font-weight:600;line-height:1.3;color:var(--black-90, #212121);border-bottom:1px solid var(--grey-50, #f2f2f2);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui3n-dialog__close{position:absolute;right:4px;top:4px}.ui3n-dialog__content{flex-grow:2;overflow-y:auto}.ui3n-dialog__actions{padding:var(--dialog-actions-padding);display:flex;justify-content:flex-end;align-items:center}.ui3n-dialog__actions--both .ui3n-button{margin-left:8px}.ui3n-chip[data-v-57f8ff99]{position:relative;height:var(--ee94d79e);padding:0 var(--2e139a47);width:max-content;max-width:var(--7e25bf4c);background-color:var(--51ed7454);display:flex;justify-content:flex-start;align-items:center}.ui3n-chip__body[data-v-57f8ff99]{font-size:var(--2a75a358);line-height:1;font-weight:400;color:var(--235fd6ec);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui3n-chip__close[data-v-57f8ff99]{margin-left:var(--half-size, 4px)}.ui3n-chip--with-icon .ui3n-chip__icon[data-v-57f8ff99]{margin-right:5px}.ui3n-chip--round[data-v-57f8ff99]{border-radius:calc(var(--ee94d79e) / 2)}.ui3n-chip--closeble[data-v-57f8ff99]{min-width:24px;padding-right:0}.ui3n-chip--plain[data-v-57f8ff99]{border:1px solid var(--235fd6ec)}.ui3n-chip.ui3n-chip--closable:not(.ui3n-chip--with-icon) .ui3n-chip__body[data-v-57f8ff99]{max-width:calc(100% - 24px)}.ui3n-chip.ui3n-chip--with-icon:not(.ui3n-chip--closable) .ui3n-chip__body[data-v-57f8ff99]{max-width:calc(100% - var(--ee94d79e) - 5px)}.ui3n-chip.ui3n-chip--closable.ui3n-chip--with-icon .ui3n-chip__body[data-v-57f8ff99]{max-width:calc(100% - var(--ee94d79e) - 29px)}.ui3n-drop-files[data-v-0210fe5c]{--dropzone-height: 0;--dropzone-title-font: 0;position:relative;box-sizing:border-box;width:100%;height:100%}.ui3n-drop-files__dropzone[data-v-0210fe5c]{box-sizing:border-box;position:absolute;background-color:var(--system-white, #fff);display:flex;flex-direction:column;justify-content:center;align-items:center;inset:var(--half-size, 4px) var(--base-size, 8px);border-radius:var(--base-size, 8px);z-index:5}.ui3n-drop-files__dropzone-border[data-v-0210fe5c]{box-sizing:border-box;position:absolute;top:calc(var(--base-size, 8px) + 1px);bottom:calc(var(--base-size, 8px) + 1px);left:calc(var(--base-size, 8px) + 1px);right:calc(var(--base-size, 8px) + 1px);border-radius:var(--base-size, 8px);border:2px dashed var(--gray-50, #f2f2f2);pointer-events:none}.ui3n-drop-files__dropzone-title[data-v-0210fe5c]{margin:0 0 var(--dropzone-title-font);font-size:var(--dropzone-title-font);font-weight:600;color:var(--black-30, #b3b3b3);pointer-events:none}.ui3n-drop-files__dropzone-icon[data-v-0210fe5c]{position:relative;width:calc(var(--dropzone-height) * .4);height:calc(var(--dropzone-height) * .4);border-radius:50%;background-color:var(--gray-50, #f2f2f2);display:flex;justify-content:center;align-items:center;pointer-events:none}.ui3n-drop-files__dropzone-text[data-v-0210fe5c]{margin-top:calc(var(--base-size, 8px) * 3);font-size:var(--font-12, 12px);line-height:var(--font-16, 16px);font-weight:400;color:var(--black-30, #b3b3b3)}.ui3n-drop-files__dropzone-additional[data-v-0210fe5c]{margin-top:var(--half-size, 4px);font-size:var(--font-12, 12px);font-weight:500;color:var(--black-90, #212121)}.ui3n-emoji[data-v-f39ee37a]{--emoji-size: 16px;display:flex;width:var(--emoji-size);height:var(--emoji-size);font-size:var(--emoji-size);justify-content:center;align-items:center;cursor:pointer}.ui3n-emoji--readonly[data-v-f39ee37a]{cursor:default}.ui3n-input[data-v-7a07d4ee]{--ui3n-input-height: calc(var(--base-size, 8px) * 4);--ui3n-input-padding-left: var(--base-size, 8px);--ui3n-input-padding-right: var(--base-size, 8px);position:relative;width:100%}.ui3n-input__label[data-v-7a07d4ee]{display:block;width:100%;font-size:var(--font-12, 12px);line-height:var(--font-16, 16px);font-weight:600;color:var(--black-90, #212121);margin-bottom:var(--half-size, 4px)}.ui3n-input__input[data-v-7a07d4ee]{display:block;box-sizing:border-box;width:100%;position:relative;border:none;outline:none;height:var(--ui3n-input-height);padding:0 var(--ui3n-input-padding-right) 0 var(--ui3n-input-padding-left);border-radius:var(--half-size, 4px);background-color:var(--gray-50, #f2f2f2);font-size:var(--font-13, 13px);font-weight:400;line-height:1;color:var(--black-90, #212121)}.ui3n-input__input[data-v-7a07d4ee]::placeholder{color:var(--black-30, #b3b3b3);font-style:italic;font-size:var(--font-13, 13px);font-weight:400}.ui3n-input__input[data-v-7a07d4ee]:focus-within{background-color:var(--blue-main-20, #d8edfd)}.ui3n-input__icon[data-v-7a07d4ee]{position:absolute;left:var(--half-size, 4px);top:calc((var(--ui3n-input-height) - 16px) / 2)}.ui3n-input__clear-btn[data-v-7a07d4ee]{position:absolute;right:0;top:calc((var(--ui3n-input-height) - 28px) / 2)}.ui3n-input__error-text[data-v-7a07d4ee]{font-style:italic;font-size:var(--font-10, 10px);font-weight:400;line-height:1.5;color:var(--pear-100, #f75d53)}.ui3n-input--clearable[data-v-7a07d4ee]{--ui3n-input-padding-right: calc(var(--base-size, 8px) * 3)}.ui3n-input--with-icon[data-v-7a07d4ee]{--ui3n-input-padding-left: calc(var(--base-size, 8px) * 3)}.ui3n-input--error[data-v-7a07d4ee]{--ui3n-input-padding-left: calc(var(--base-size, 8px) - 1px);--ui3n-input-padding-right: calc(var(--base-size, 8px) - 1px)}.ui3n-input--error .ui3n-input__input[data-v-7a07d4ee]{border:1px solid var(--pear-100, #f75d53)}.ui3n-input--error.ui3n-input--clearable[data-v-7a07d4ee]{--ui3n-input-padding-right: calc(var(--base-size, 8px) * 2 - 1px)}.ui3n-input--error.ui3n-input--with-icon[data-v-7a07d4ee]{--ui3n-input-padding-left: calc(var(--base-size, 8px) * 2 - 1px)}.ui3n-input--disabled[data-v-7a07d4ee]{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.5}.ui3n-input--with-label .ui3n-input__icon[data-v-7a07d4ee]{top:calc((var(--ui3n-input-height) - 16px) / 2 + 20px)}.ui3n-input--with-label .ui3n-input__clear-btn[data-v-7a07d4ee]{top:calc((var(--ui3n-input-height) - 28px) / 2 + 20px)}.ui3n-text[data-v-33487f04]{position:relative;width:100%}.ui3n-text__label[data-v-33487f04]{display:block;width:100%;font-size:var(--font-12, 12px);font-weight:600;color:var(--black-90, #212121);margin-bottom:calc(var(--base-size, 8px) / 2)}.ui3n-text__body[data-v-33487f04]{position:relative;width:100%;padding:var(--base-size, 8px) 0;background-color:var(--gray-50, #f2f2f2);border-radius:4px}.ui3n-text__content[data-v-33487f04]{resize:none;display:block;box-sizing:border-box;position:relative;width:100%;border-radius:4px;background-color:var(--gray-50, #f2f2f2);padding:0 var(--base-size, 8px);font-family:OpenSans,sans-serif;font-size:var(--font-13, 13px);font-weight:400;line-height:var(--font-16, 16px);color:var(--black-90, #212121);border:none}.ui3n-text__content[data-v-33487f04]::placeholder{font-size:var(--font-13, 13px);font-weight:300;font-style:italic;color:var(--gray-90, #212121)}.ui3n-text--disabled[data-v-33487f04]{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.5}.ui3n-text--focused .ui3n-text__body[data-v-33487f04],.ui3n-text--focused .ui3n-text__content[data-v-33487f04]{background-color:var(--blue-main-20, #d8edfd);outline:none;border:none}.ui3n-checkbox[data-v-d377a283]{--ui3n-checkbox-size: 16px;--ui3n-checkbox-text-size: 12px;--ui3n-checkbox-text-color: var(--black-90, #212121);--ui3n-checkbox-text-weight: 500;position:relative;display:flex;justify-content:flex-start;align-items:center}.ui3n-checkbox__wrapper[data-v-d377a283]{position:relative;display:flex;width:calc(var(--ui3n-checkbox-size) * 1.5);height:calc(var(--ui3n-checkbox-size) * 1.5);justify-content:center;align-items:center;border-radius:50%;cursor:pointer;background-position:center;transition:background .5s ease-in-out}.ui3n-checkbox__wrapper[data-v-d377a283]:not([disabled]){cursor:pointer}.ui3n-checkbox__wrapper[data-v-d377a283]:not([disabled]):hover{background:transparent radial-gradient(circle,transparent 1%,transparent 1%) center/15000%}.ui3n-checkbox__wrapper[data-v-d377a283]:not([disabled]):active{opacity:1;background-color:var(--black-30, #b3b3b3);background-size:100%;transition:background 0s}.ui3n-checkbox__label[data-v-d377a283]{font-size:var(--ui3n-checkbox-text-size);font-weight:var(--ui3n-checkbox-text-weight);color:var(--ui3n-checkbox-text-color);-webkit-user-select:none;user-select:none;cursor:pointer}.ui3n-checkbox--disabled[data-v-d377a283]{pointer-events:none;opacity:.5}.ui3n-table[data-v-5a78ec1c]{--table-header-height: 36px;--table-row-height: 28px;position:relative;width:100%;height:100%;overflow-x:hidden;overflow-y:auto}.ui3n-table__header[data-v-5a78ec1c]{position:sticky;top:0;display:flex;width:100%;height:var(--table-header-height);justify-content:flex-start;align-items:center;padding:0 calc(var(--base-size) * 2);background-color:var(--gray-50)}.ui3n-table__header-cell[data-v-5a78ec1c]{display:flex;justify-content:flex-start;align-items:center;font-size:var(--font-13);line-height:var(--font-18);font-weight:500;color:var(--black-90)}.ui3n-table__header-cell--sortable[data-v-5a78ec1c]{cursor:pointer}.ui3n-table__header-text[data-v-5a78ec1c]{display:block;position:relative;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui3n-table__item[data-v-5a78ec1c]{display:flex;width:100%;height:var(--table-row-height);justify-content:flex-start;align-items:center;padding:0 calc(var(--base-size) * 2) 0 calc(var(--base-size) * 5);cursor:pointer;border-bottom:1px solid var(--gray-50)}.ui3n-table__item-bookmark[data-v-5a78ec1c],.ui3n-table__item-rename[data-v-5a78ec1c]{display:none;position:absolute;z-index:1;color:var(--black-30)}.ui3n-table__item-bookmark[data-v-5a78ec1c]{left:2px}.ui3n-table__item-rename[data-v-5a78ec1c]{right:calc(var(--base-size) * 13 + 24px)}.ui3n-table__item-icon[data-v-5a78ec1c]{position:absolute;left:calc(var(--base-size) * 2);color:var(--black-30);pointer-events:none}.ui3n-table__item-cell[data-v-5a78ec1c]{position:relative;font-weight:400;pointer-events:none}.ui3n-table__item[data-v-5a78ec1c]:hover{background-color:var(--blue-main-30)}.ui3n-table__item:hover .ui3n-table__item-bookmark[data-v-5a78ec1c],.ui3n-table__item:hover .ui3n-table__item-rename[data-v-5a78ec1c]{display:block}.ui3n-table__item:hover .ui3n-table__item-icon[data-v-5a78ec1c]{color:var(--blue-main)}.ui3n-table__name[data-v-5a78ec1c]{flex:1 0}.ui3n-table__name.ui3n-table__item-cell[data-v-5a78ec1c]{font-size:var(--font-12)}.ui3n-table__type[data-v-5a78ec1c]{width:calc(var(--base-size) * 7);text-align:center}.ui3n-table__type.ui3n-table__item-cell[data-v-5a78ec1c]{font-size:var(--font-10)}.ui3n-table__changedAt[data-v-5a78ec1c]{width:calc(var(--base-size) * 13)}.ui3n-table__changedAt.ui3n-table__item-cell[data-v-5a78ec1c]{font-size:var(--font-11)}.ui3n-table__empty[data-v-5a78ec1c]{font-size:var(--font-20);font-style:italic;color:var(--black-30);text-align:center;padding-top:calc(var(--base-size) * 10)}.ui3n-menu[data-v-8ba1dfb9]{--menu-animation-duration: .4s;position:relative;overflow:visible}.ui3n-menu .menu-enter-active[data-v-8ba1dfb9],.ui3n-menu .menu-leave-active[data-v-8ba1dfb9]{transition:opacity var(--menu-animation-duration)}.ui3n-menu .menu-enter-from[data-v-8ba1dfb9],.ui3n-menu .menu-leave-to[data-v-8ba1dfb9]{opacity:0}.ui3n-menu__trigger[data-v-8ba1dfb9]{position:relative}.ui3n-menu__content[data-v-8ba1dfb9]{position:absolute;border-radius:4px;background-color:var(--system-white, #fff);box-shadow:0 3px 3px -2px var(--shadow-key-umbra-opacity, rgba(0, 0, 0, .2)),0 3px 4px 0 var(--shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)),0 1px 8px 0 var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-list[data-v-9aff363c]{--ui3n-list-item-height: 28px;--ui3n-list-bg-color: var(--system-white, #fff);position:relative;width:100%;height:100%;background-color:var(--ui3n-list-bg-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.ui3n-list__title[data-v-9aff363c]{position:relative;top:0;z-index:1}.ui3n-list__title--sticky[data-v-9aff363c]{position:sticky}.ui3n-list__content[data-v-9aff363c]{position:relative;flex-grow:1}.ui3n-list__title-content[data-v-9aff363c],.ui3n-list__item[data-v-9aff363c]{position:relative;width:100%;min-height:var(--ui3n-list-item-height);padding:4px 0;display:flex;justify-content:flex-start;align-items:center}.ui3n-list__title-content[data-v-9aff363c]{z-index:1;font-size:16px;font-weight:600;background-color:var(--ui3n-list-bg-color)}.ui3n-list__item-content[data-v-9aff363c]{font-size:14px;font-weight:400;cursor:pointer}.ui3n-list__item-content--disabled[data-v-9aff363c]{pointer-events:none;cursor:default}.ui3n-virtual-scroll[data-v-6a998153]{position:relative;width:100%;height:100%;overflow-y:auto}.ui3n-virtual-scroll__viewport[data-v-6a998153]{position:relative;overflow:hidden;will-change:transform}.ui3n-virtual-scroll__content[data-v-6a998153]{will-change:transform}.ui3n-virtual-scroll__item[data-v-6a998153]{position:relative;min-height:16px}.ui3n-tabs[data-v-ea3e9bad]{--ui3n-tabs-height: 48px;position:relative;height:var(--ui3n-tabs-height);display:flex;justify-content:center;align-items:stretch}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item{cursor:pointer}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item{position:relative;-webkit-user-select:none;user-select:none;color:var(--77348130);background-position:center;transition:background .5s ease-in-out}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:hover{background-color:var(--blue-main-20, #d8edfd)}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:after{position:absolute;content:"";left:0;width:100%;bottom:var(--fb6a93f0);height:var(--61f57740);background-color:transparent;transition:background-color .25s ease-in-out}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item[disabled]{opacity:.5;cursor:default;pointer-events:none}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:not([disabled]){cursor:pointer}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:not([disabled]):hover{background:#d8edfd radial-gradient(circle,transparent 1%,#d8edfd 1%) center/15000%}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:not([disabled]):active{opacity:1;background-color:var(--black-30, #b3b3b3);background-size:100%;transition:background 0s}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item--active{color:var(--24fbb1ad)}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item--active:after{background-color:var(--10c456e4);transition:background-color .25s ease-in-out}.ui3n-tabs--vertical[data-v-ea3e9bad]{height:auto;flex-direction:column}.ui3n-tabs--vertical[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:after{left:var(--fb6a93f0);width:var(--61f57740);bottom:0;height:100%}
1
+ .ui3n-button[data-v-30734a5d]{--ui3n-button-text-size: 12px;--ui3n-button-text-height: 16px;--ui3n-button-text-color: var(--system-white, #fff);--ui3n-button-background: var(--blue-main, #0090ec);--ui3n-button-padding-vert: 8px;--ui3n-button-padding-horiz: 16px;display:flex;justify-content:center;align-items:center;border:none;outline:none;padding:var(--ui3n-button-padding-vert) var(--ui3n-button-padding-horiz);border-radius:4px;background:var(--ui3n-button-background);font-size:var(--ui3n-button-text-size);line-height:var(--ui3n-button-text-height);font-weight:600;color:var(--ui3n-button-text-color);-webkit-user-select:none;user-select:none;background-position:center;transition:background .5s ease-in-out}.ui3n-button--round[data-v-30734a5d]{--ui3n-button-padding-vert: 6px;--ui3n-button-padding-horiz: 6px;border-radius:50%}.ui3n-button--elevation[data-v-30734a5d]{box-shadow:0 2px 1px -1px var(--shadow-key-umbra-opacity, rgba(0, 0, 0, .2)),0 1px 1px 0 var(--shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)),0 1px 3px 0 var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-button[data-v-30734a5d]:not([disabled]):hover{box-shadow:0 0 4px var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-button:not([disabled]):hover .ui3n-button__icon[data-v-30734a5d],.ui3n-button:not([disabled]):hover .ui3n-button__text[data-v-30734a5d]{opacity:1}.ui3n-button__icon[data-v-30734a5d]{opacity:.85;transition:opacity .2s ease-in-out}.ui3n-button__text[data-v-30734a5d]{display:block;opacity:.85;transition:opacity .2s ease-in-out}.ui3n-button__text--margin[data-v-30734a5d]{margin-left:4px}.ui3n-button[disabled][data-v-30734a5d]{opacity:.7}.ui3n-button:not(.ui3n-button--round) .ui3n-button__icon[data-v-30734a5d],.ui3n-button:not(.ui3n-button--round) .ui3n-button__text[data-v-30734a5d]{pointer-events:none}.ui3n-button[data-v-30734a5d]:not([disabled]){cursor:pointer}.ui3n-button[data-v-30734a5d]:not([disabled]):hover{background:var(--ui3n-button-background) radial-gradient(circle,transparent 1%,var(--ui3n-button-background) 1%) center/15000%}.ui3n-button[data-v-30734a5d]:not([disabled]):active{opacity:1;background-color:var(--black-30, #b3b3b3);background-size:100%;transition:background 0s}.ui3n-notification[data-v-436fa887]{display:flex;position:relative;z-index:5000;border-radius:var(--half-size, 4px);padding:var(--base-size, 8px);max-width:400px;margin-bottom:var(--base-size)}.ui3n-notification--with-icon[data-v-436fa887]{display:flex;justify-content:flex-start;align-items:center}.ui3n-notification--with-icon .ui3n-notification__content[data-v-436fa887]{padding-left:var(--base-size, 8px)}.ui3n-notification__content[data-v-436fa887]{position:relative;flex-grow:2;font-size:var(--font-13, 13px);font-weight:400;line-height:1.5;color:var(--system-white, #fff)}.ui3n-notification__close[data-v-436fa887]{position:absolute;z-index:1;top:0;right:0}.ui3n-notification--success[data-v-436fa887]{background-color:#10c48f}.ui3n-notification--warning[data-v-436fa887]{background-color:#f80}.ui3n-notification--info[data-v-436fa887]{background-color:#10afef}.ui3n-notification--error[data-v-436fa887]{background-color:#ef5350}.ui3n-notification--left[data-v-436fa887]{margin-left:0;margin-right:auto}.ui3n-notification--center[data-v-436fa887]{margin-left:auto;margin-right:auto}.ui3n-notification--right[data-v-436fa887]{margin-left:auto;margin-right:0}.ui3n-dialog__overlay{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background-color:#0006}.ui3n-dialog{--dialog-border-radius: 8px;--dialog-title-padding: 16px 24px 16px;--dialog-title-font-size: 14px;--dialog-actions-padding: 16px;--dialog-confirm-button-color: var(--system-white, #fff);--dialog-cancel-button-color: var(--blue-main, #0090ec);--dialog-confirm-background-color: var(--blue-main, #0090ec);--dialog-cancel-background-color: var(--system-white, #fff);position:relative;display:flex;flex-direction:column;height:auto;max-height:95%;background-color:var(--system-white, #fff);border-radius:var(--dialog-border-radius);box-shadow:0 2px 1px -1px var(--shadow-key-umbra-opacity, rgba(0, 0, 0, .2)),0 1px 1px 0 var(--shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)),0 1px 3px 0 var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-dialog__title{padding:var(--dialog-title-padding);font-size:var(--dialog-title-font-size);font-weight:600;line-height:1.3;color:var(--black-90, #212121);border-bottom:1px solid var(--grey-50, #f2f2f2);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui3n-dialog__close{position:absolute;right:4px;top:4px}.ui3n-dialog__content{flex-grow:2;overflow-y:auto}.ui3n-dialog__actions{padding:var(--dialog-actions-padding);display:flex;justify-content:flex-end;align-items:center}.ui3n-dialog__actions--both .ui3n-button{margin-left:8px}.ui3n-chip[data-v-9724bd82]{position:relative;height:var(--58a8ea39);padding:0 var(--5c8b053f);width:max-content;max-width:var(--1e9bb354);background-color:var(--ff364168);display:flex;justify-content:flex-start;align-items:center}.ui3n-chip__body[data-v-9724bd82]{font-size:var(--6a28d140);line-height:1;font-weight:400;color:var(--dcaf3838);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui3n-chip__close[data-v-9724bd82]{margin-left:var(--half-size, 4px)}.ui3n-chip--with-icon .ui3n-chip__icon[data-v-9724bd82]{display:flex;margin-right:5px}.ui3n-chip--round[data-v-9724bd82]{border-radius:calc(var(--58a8ea39) / 2)}.ui3n-chip--closeble[data-v-9724bd82]{min-width:24px;padding-right:0}.ui3n-chip--plain[data-v-9724bd82]{border:1px solid var(--dcaf3838)}.ui3n-chip.ui3n-chip--closable:not(.ui3n-chip--with-icon) .ui3n-chip__body[data-v-9724bd82]{max-width:calc(100% - 24px)}.ui3n-chip.ui3n-chip--with-icon:not(.ui3n-chip--closable) .ui3n-chip__body[data-v-9724bd82]{max-width:calc(100% - var(--58a8ea39) - 5px)}.ui3n-chip.ui3n-chip--closable.ui3n-chip--with-icon .ui3n-chip__body[data-v-9724bd82]{max-width:calc(100% - var(--58a8ea39) - 29px)}.ui3n-drop-files[data-v-0210fe5c]{--dropzone-height: 0;--dropzone-title-font: 0;position:relative;box-sizing:border-box;width:100%;height:100%}.ui3n-drop-files__dropzone[data-v-0210fe5c]{box-sizing:border-box;position:absolute;background-color:var(--system-white, #fff);display:flex;flex-direction:column;justify-content:center;align-items:center;inset:var(--half-size, 4px) var(--base-size, 8px);border-radius:var(--base-size, 8px);z-index:5}.ui3n-drop-files__dropzone-border[data-v-0210fe5c]{box-sizing:border-box;position:absolute;top:calc(var(--base-size, 8px) + 1px);bottom:calc(var(--base-size, 8px) + 1px);left:calc(var(--base-size, 8px) + 1px);right:calc(var(--base-size, 8px) + 1px);border-radius:var(--base-size, 8px);border:2px dashed var(--gray-50, #f2f2f2);pointer-events:none}.ui3n-drop-files__dropzone-title[data-v-0210fe5c]{margin:0 0 var(--dropzone-title-font);font-size:var(--dropzone-title-font);font-weight:600;color:var(--black-30, #b3b3b3);pointer-events:none}.ui3n-drop-files__dropzone-icon[data-v-0210fe5c]{position:relative;width:calc(var(--dropzone-height) * .4);height:calc(var(--dropzone-height) * .4);border-radius:50%;background-color:var(--gray-50, #f2f2f2);display:flex;justify-content:center;align-items:center;pointer-events:none}.ui3n-drop-files__dropzone-text[data-v-0210fe5c]{margin-top:calc(var(--base-size, 8px) * 3);font-size:var(--font-12, 12px);line-height:var(--font-16, 16px);font-weight:400;color:var(--black-30, #b3b3b3)}.ui3n-drop-files__dropzone-additional[data-v-0210fe5c]{margin-top:var(--half-size, 4px);font-size:var(--font-12, 12px);font-weight:500;color:var(--black-90, #212121)}.ui3n-emoji[data-v-f39ee37a]{--emoji-size: 16px;display:flex;width:var(--emoji-size);height:var(--emoji-size);font-size:var(--emoji-size);justify-content:center;align-items:center;cursor:pointer}.ui3n-emoji--readonly[data-v-f39ee37a]{cursor:default}.ui3n-input[data-v-7a07d4ee]{--ui3n-input-height: calc(var(--base-size, 8px) * 4);--ui3n-input-padding-left: var(--base-size, 8px);--ui3n-input-padding-right: var(--base-size, 8px);position:relative;width:100%}.ui3n-input__label[data-v-7a07d4ee]{display:block;width:100%;font-size:var(--font-12, 12px);line-height:var(--font-16, 16px);font-weight:600;color:var(--black-90, #212121);margin-bottom:var(--half-size, 4px)}.ui3n-input__input[data-v-7a07d4ee]{display:block;box-sizing:border-box;width:100%;position:relative;border:none;outline:none;height:var(--ui3n-input-height);padding:0 var(--ui3n-input-padding-right) 0 var(--ui3n-input-padding-left);border-radius:var(--half-size, 4px);background-color:var(--gray-50, #f2f2f2);font-size:var(--font-13, 13px);font-weight:400;line-height:1;color:var(--black-90, #212121)}.ui3n-input__input[data-v-7a07d4ee]::placeholder{color:var(--black-30, #b3b3b3);font-style:italic;font-size:var(--font-13, 13px);font-weight:400}.ui3n-input__input[data-v-7a07d4ee]:focus-within{background-color:var(--blue-main-20, #d8edfd)}.ui3n-input__icon[data-v-7a07d4ee]{position:absolute;left:var(--half-size, 4px);top:calc((var(--ui3n-input-height) - 16px) / 2)}.ui3n-input__clear-btn[data-v-7a07d4ee]{position:absolute;right:0;top:calc((var(--ui3n-input-height) - 28px) / 2)}.ui3n-input__error-text[data-v-7a07d4ee]{font-style:italic;font-size:var(--font-10, 10px);font-weight:400;line-height:1.5;color:var(--pear-100, #f75d53)}.ui3n-input--clearable[data-v-7a07d4ee]{--ui3n-input-padding-right: calc(var(--base-size, 8px) * 3)}.ui3n-input--with-icon[data-v-7a07d4ee]{--ui3n-input-padding-left: calc(var(--base-size, 8px) * 3)}.ui3n-input--error[data-v-7a07d4ee]{--ui3n-input-padding-left: calc(var(--base-size, 8px) - 1px);--ui3n-input-padding-right: calc(var(--base-size, 8px) - 1px)}.ui3n-input--error .ui3n-input__input[data-v-7a07d4ee]{border:1px solid var(--pear-100, #f75d53)}.ui3n-input--error.ui3n-input--clearable[data-v-7a07d4ee]{--ui3n-input-padding-right: calc(var(--base-size, 8px) * 2 - 1px)}.ui3n-input--error.ui3n-input--with-icon[data-v-7a07d4ee]{--ui3n-input-padding-left: calc(var(--base-size, 8px) * 2 - 1px)}.ui3n-input--disabled[data-v-7a07d4ee]{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.5}.ui3n-input--with-label .ui3n-input__icon[data-v-7a07d4ee]{top:calc((var(--ui3n-input-height) - 16px) / 2 + 20px)}.ui3n-input--with-label .ui3n-input__clear-btn[data-v-7a07d4ee]{top:calc((var(--ui3n-input-height) - 28px) / 2 + 20px)}.ui3n-text[data-v-33487f04]{position:relative;width:100%}.ui3n-text__label[data-v-33487f04]{display:block;width:100%;font-size:var(--font-12, 12px);font-weight:600;color:var(--black-90, #212121);margin-bottom:calc(var(--base-size, 8px) / 2)}.ui3n-text__body[data-v-33487f04]{position:relative;width:100%;padding:var(--base-size, 8px) 0;background-color:var(--gray-50, #f2f2f2);border-radius:4px}.ui3n-text__content[data-v-33487f04]{resize:none;display:block;box-sizing:border-box;position:relative;width:100%;border-radius:4px;background-color:var(--gray-50, #f2f2f2);padding:0 var(--base-size, 8px);font-family:OpenSans,sans-serif;font-size:var(--font-13, 13px);font-weight:400;line-height:var(--font-16, 16px);color:var(--black-90, #212121);border:none}.ui3n-text__content[data-v-33487f04]::placeholder{font-size:var(--font-13, 13px);font-weight:300;font-style:italic;color:var(--gray-90, #212121)}.ui3n-text--disabled[data-v-33487f04]{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.5}.ui3n-text--focused .ui3n-text__body[data-v-33487f04],.ui3n-text--focused .ui3n-text__content[data-v-33487f04]{background-color:var(--blue-main-20, #d8edfd);outline:none;border:none}.ui3n-checkbox[data-v-d377a283]{--ui3n-checkbox-size: 16px;--ui3n-checkbox-text-size: 12px;--ui3n-checkbox-text-color: var(--black-90, #212121);--ui3n-checkbox-text-weight: 500;position:relative;display:flex;justify-content:flex-start;align-items:center}.ui3n-checkbox__wrapper[data-v-d377a283]{position:relative;display:flex;width:calc(var(--ui3n-checkbox-size) * 1.5);height:calc(var(--ui3n-checkbox-size) * 1.5);justify-content:center;align-items:center;border-radius:50%;cursor:pointer;background-position:center;transition:background .5s ease-in-out}.ui3n-checkbox__wrapper[data-v-d377a283]:not([disabled]){cursor:pointer}.ui3n-checkbox__wrapper[data-v-d377a283]:not([disabled]):hover{background:transparent radial-gradient(circle,transparent 1%,transparent 1%) center/15000%}.ui3n-checkbox__wrapper[data-v-d377a283]:not([disabled]):active{opacity:1;background-color:var(--black-30, #b3b3b3);background-size:100%;transition:background 0s}.ui3n-checkbox__label[data-v-d377a283]{font-size:var(--ui3n-checkbox-text-size);font-weight:var(--ui3n-checkbox-text-weight);color:var(--ui3n-checkbox-text-color);-webkit-user-select:none;user-select:none;cursor:pointer}.ui3n-checkbox--disabled[data-v-d377a283]{pointer-events:none;opacity:.5}.ui3n-table[data-v-5a78ec1c]{--table-header-height: 36px;--table-row-height: 28px;position:relative;width:100%;height:100%;overflow-x:hidden;overflow-y:auto}.ui3n-table__header[data-v-5a78ec1c]{position:sticky;top:0;display:flex;width:100%;height:var(--table-header-height);justify-content:flex-start;align-items:center;padding:0 calc(var(--base-size) * 2);background-color:var(--gray-50)}.ui3n-table__header-cell[data-v-5a78ec1c]{display:flex;justify-content:flex-start;align-items:center;font-size:var(--font-13);line-height:var(--font-18);font-weight:500;color:var(--black-90)}.ui3n-table__header-cell--sortable[data-v-5a78ec1c]{cursor:pointer}.ui3n-table__header-text[data-v-5a78ec1c]{display:block;position:relative;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ui3n-table__item[data-v-5a78ec1c]{display:flex;width:100%;height:var(--table-row-height);justify-content:flex-start;align-items:center;padding:0 calc(var(--base-size) * 2) 0 calc(var(--base-size) * 5);cursor:pointer;border-bottom:1px solid var(--gray-50)}.ui3n-table__item-bookmark[data-v-5a78ec1c],.ui3n-table__item-rename[data-v-5a78ec1c]{display:none;position:absolute;z-index:1;color:var(--black-30)}.ui3n-table__item-bookmark[data-v-5a78ec1c]{left:2px}.ui3n-table__item-rename[data-v-5a78ec1c]{right:calc(var(--base-size) * 13 + 24px)}.ui3n-table__item-icon[data-v-5a78ec1c]{position:absolute;left:calc(var(--base-size) * 2);color:var(--black-30);pointer-events:none}.ui3n-table__item-cell[data-v-5a78ec1c]{position:relative;font-weight:400;pointer-events:none}.ui3n-table__item[data-v-5a78ec1c]:hover{background-color:var(--blue-main-30)}.ui3n-table__item:hover .ui3n-table__item-bookmark[data-v-5a78ec1c],.ui3n-table__item:hover .ui3n-table__item-rename[data-v-5a78ec1c]{display:block}.ui3n-table__item:hover .ui3n-table__item-icon[data-v-5a78ec1c]{color:var(--blue-main)}.ui3n-table__name[data-v-5a78ec1c]{flex:1 0}.ui3n-table__name.ui3n-table__item-cell[data-v-5a78ec1c]{font-size:var(--font-12)}.ui3n-table__type[data-v-5a78ec1c]{width:calc(var(--base-size) * 7);text-align:center}.ui3n-table__type.ui3n-table__item-cell[data-v-5a78ec1c]{font-size:var(--font-10)}.ui3n-table__changedAt[data-v-5a78ec1c]{width:calc(var(--base-size) * 13)}.ui3n-table__changedAt.ui3n-table__item-cell[data-v-5a78ec1c]{font-size:var(--font-11)}.ui3n-table__empty[data-v-5a78ec1c]{font-size:var(--font-20);font-style:italic;color:var(--black-30);text-align:center;padding-top:calc(var(--base-size) * 10)}.ui3n-menu[data-v-8ba1dfb9]{--menu-animation-duration: .4s;position:relative;overflow:visible}.ui3n-menu .menu-enter-active[data-v-8ba1dfb9],.ui3n-menu .menu-leave-active[data-v-8ba1dfb9]{transition:opacity var(--menu-animation-duration)}.ui3n-menu .menu-enter-from[data-v-8ba1dfb9],.ui3n-menu .menu-leave-to[data-v-8ba1dfb9]{opacity:0}.ui3n-menu__trigger[data-v-8ba1dfb9]{position:relative}.ui3n-menu__content[data-v-8ba1dfb9]{position:absolute;border-radius:4px;background-color:var(--system-white, #fff);box-shadow:0 3px 3px -2px var(--shadow-key-umbra-opacity, rgba(0, 0, 0, .2)),0 3px 4px 0 var(--shadow-key-penumbra-opacity, rgba(0, 0, 0, .14)),0 1px 8px 0 var(--shadow-key-ambient-opacity, rgba(0, 0, 0, .12))}.ui3n-list[data-v-9aff363c]{--ui3n-list-item-height: 28px;--ui3n-list-bg-color: var(--system-white, #fff);position:relative;width:100%;height:100%;background-color:var(--ui3n-list-bg-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}.ui3n-list__title[data-v-9aff363c]{position:relative;top:0;z-index:1}.ui3n-list__title--sticky[data-v-9aff363c]{position:sticky}.ui3n-list__content[data-v-9aff363c]{position:relative;flex-grow:1}.ui3n-list__title-content[data-v-9aff363c],.ui3n-list__item[data-v-9aff363c]{position:relative;width:100%;min-height:var(--ui3n-list-item-height);padding:4px 0;display:flex;justify-content:flex-start;align-items:center}.ui3n-list__title-content[data-v-9aff363c]{z-index:1;font-size:16px;font-weight:600;background-color:var(--ui3n-list-bg-color)}.ui3n-list__item-content[data-v-9aff363c]{font-size:14px;font-weight:400;cursor:pointer}.ui3n-list__item-content--disabled[data-v-9aff363c]{pointer-events:none;cursor:default}.ui3n-virtual-scroll[data-v-6a998153]{position:relative;width:100%;height:100%;overflow-y:auto}.ui3n-virtual-scroll__viewport[data-v-6a998153]{position:relative;overflow:hidden;will-change:transform}.ui3n-virtual-scroll__content[data-v-6a998153]{will-change:transform}.ui3n-virtual-scroll__item[data-v-6a998153]{position:relative;min-height:16px}.ui3n-tabs[data-v-ea3e9bad]{--ui3n-tabs-height: 48px;position:relative;height:var(--ui3n-tabs-height);display:flex;justify-content:center;align-items:stretch}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item{cursor:pointer}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item{position:relative;-webkit-user-select:none;user-select:none;color:var(--77348130);background-position:center;transition:background .5s ease-in-out}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:hover{background-color:var(--blue-main-20, #d8edfd)}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:after{position:absolute;content:"";left:0;width:100%;bottom:var(--fb6a93f0);height:var(--61f57740);background-color:transparent;transition:background-color .25s ease-in-out}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item[disabled]{opacity:.5;cursor:default;pointer-events:none}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:not([disabled]){cursor:pointer}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:not([disabled]):hover{background:#d8edfd radial-gradient(circle,transparent 1%,#d8edfd 1%) center/15000%}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:not([disabled]):active{opacity:1;background-color:var(--black-30, #b3b3b3);background-size:100%;transition:background 0s}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item--active{color:var(--24fbb1ad)}.ui3n-tabs[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item--active:after{background-color:var(--10c456e4);transition:background-color .25s ease-in-out}.ui3n-tabs--vertical[data-v-ea3e9bad]{height:auto;flex-direction:column}.ui3n-tabs--vertical[data-v-ea3e9bad] .ui3n-tabs__item.ui3n-tabs__item:after{left:var(--fb6a93f0);width:var(--61f57740);bottom:0;height:100%}
package/dist/ui-3n-lib.js CHANGED
@@ -14114,12 +14114,12 @@ const eN = {
14114
14114
  emits: ["close"],
14115
14115
  setup(C, { emit: I }) {
14116
14116
  eD((l) => ({
14117
- ee94d79e: e.value,
14118
- "2e139a47": r.value,
14119
- "7e25bf4c": u.value,
14120
- "51ed7454": w.value,
14121
- "2a75a358": G.value,
14122
- "235fd6ec": M.value
14117
+ "58a8ea39": e.value,
14118
+ "5c8b053f": r.value,
14119
+ "1e9bb354": u.value,
14120
+ ff364168: w.value,
14121
+ "6a28d140": G.value,
14122
+ dcaf3838: M.value
14123
14123
  }));
14124
14124
  const g = C, B = I, E = bo(), e = bA(() => `${g.height}px`), D = bA(() => g.height ? Number(g.height) - 2 : Number(g.height)), r = bA(() => `${Math.round(Number(g.height) / 3)}px`), u = bA(() => `${g.maxWidth}px`), w = bA(() => g.color), G = bA(() => `${g.textSize}px`), M = bA(() => g.textColor), c = bA(() => !!E.left);
14125
14125
  return (l, J) => (RA(), qA("div", {
@@ -14155,7 +14155,7 @@ const eN = {
14155
14155
  ], 2));
14156
14156
  }
14157
14157
  });
14158
- const pf = /* @__PURE__ */ AI(sN, [["__scopeId", "data-v-57f8ff99"]]), Ta = (C) => (oD("data-v-0210fe5c"), C = C(), tD(), C), DN = /* @__PURE__ */ Ta(() => /* @__PURE__ */ VA("div", { class: "ui3n-drop-files__dropzone-border" }, null, -1)), aN = { class: "ui3n-drop-files__dropzone-title" }, nN = { class: "ui3n-drop-files__dropzone-icon" }, rN = ["width", "height"], uN = /* @__PURE__ */ Ta(() => /* @__PURE__ */ VA("path", {
14158
+ const pf = /* @__PURE__ */ AI(sN, [["__scopeId", "data-v-9724bd82"]]), Ta = (C) => (oD("data-v-0210fe5c"), C = C(), tD(), C), DN = /* @__PURE__ */ Ta(() => /* @__PURE__ */ VA("div", { class: "ui3n-drop-files__dropzone-border" }, null, -1)), aN = { class: "ui3n-drop-files__dropzone-title" }, nN = { class: "ui3n-drop-files__dropzone-icon" }, rN = ["width", "height"], uN = /* @__PURE__ */ Ta(() => /* @__PURE__ */ VA("path", {
14159
14159
  d: "M51 152C47.9333 152 45.3333 150.934 43.2 148.8C41.0667 146.667 40 144.067 40 141V119.8H46.2V141C46.2 142.2 46.7 143.3 47.7 144.3C48.7 145.3 49.8 145.8 51 145.8H141C142.2 145.8 143.3 145.3 144.3 144.3C145.3 143.3 145.8 142.2 145.8 141V119.8H152V141C152 144.067 150.933 146.667 148.8 148.8C146.667 150.934 144.067 152 141 152H51ZM93 122.4V49.2002L72.8 69.2002L68.4 65.0002L96 37.2002L123.6 65.0002L119.2 69.2002L99 49.2002V122.4H93Z",
14160
14160
  fill: "#212121"
14161
14161
  }, null, -1)), cN = [
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@v1nt1248/3nclient-lib",
3
3
  "license": "AGPL-3.0-or-later",
4
4
  "author": "v1nt1248",
5
- "version": "0.0.30",
5
+ "version": "0.0.32",
6
6
  "description": "Library for 3NWeb clients",
7
7
  "private": false,
8
8
  "type": "module",
package/src/components/ui3n-badge-simple.vue ADDED
@@ -0,0 +1,97 @@
1
+ <script lang="ts" setup>
2
+ import { nextTick, onMounted, ref, watch } from 'vue'
3
+
4
+ export interface Ui3nBadgeSimpleProps {
5
+ dot?: boolean;
6
+ value?: string | number;
7
+ color?: string;
8
+ textColor?: string;
9
+ }
10
+
11
+ const props = withDefaults(
12
+ defineProps<Ui3nBadgeSimpleProps>(),
13
+ {
14
+ dot: false,
15
+ value: '',
16
+ color: '#0090ec',
17
+ textColor: '#fff',
18
+ },
19
+ )
20
+
21
+ const emits = defineEmits<{
22
+ (ev: 'change:size', val: { width: number; height: number }): void;
23
+ }>()
24
+
25
+ const element = ref<HTMLDivElement | null>(null)
26
+
27
+ watch(
28
+ () => [props.value, props.dot],
29
+ () => getElementSize(),
30
+ )
31
+
32
+ onMounted(() => {
33
+ getElementSize()
34
+ })
35
+
36
+ function getElementSize() {
37
+ nextTick(() => {
38
+ if (element.value) {
39
+ emits('change:size', { width: element.value.offsetWidth, height: element.value.offsetHeight })
40
+ }
41
+ })
42
+ }
43
+ </script>
44
+
45
+ <template>
46
+ <div
47
+ ref="element"
48
+ :class="[
49
+ 'ui3n-badge-simple',
50
+ { 'ui3n-badge-simple__dot': dot },
51
+ ]"
52
+ >
53
+ <span
54
+ v-if="!dot"
55
+ class="ui3n-badge-simple__text"
56
+ >
57
+ {{ value }}
58
+ </span>
59
+ </div>
60
+ </template>
61
+
62
+ <style lang="scss" scoped>
63
+ .ui3n-badge-simple{
64
+ --ui3n-badge-size: 20px;
65
+
66
+ position: relative;
67
+ box-sizing: border-box;
68
+ background-color: v-bind(color);
69
+ outline: 1px var(--system-white, #fff) solid;
70
+
71
+ &__dot {
72
+ min-width: 8px;
73
+ width: 8px;
74
+ max-width: 8px;
75
+ min-height: 8px;
76
+ height: 8px;
77
+ max-height: 8px;
78
+ border-radius: 50%;
79
+ }
80
+
81
+ &__text {
82
+ display: block;
83
+ color: v-bind(textColor);
84
+ font-size: 12px;
85
+ line-height: var(--ui3n-badge-size);
86
+ text-align: center;
87
+ }
88
+
89
+ &:not(.ui3n-badge-simple__dot) {
90
+ min-height: var(--ui3n-badge-size);
91
+ height: var(--ui3n-badge-size);
92
+ width: max-content;
93
+ padding: 0 6px;
94
+ border-radius: 10px;
95
+ }
96
+ }
97
+ </style>
package/src/components/ui3n-badge.vue ADDED
@@ -0,0 +1,89 @@
1
+ <script lang="ts" setup>
2
+ import { computed, ref, useSlots } from 'vue'
3
+ import get from 'lodash/get'
4
+ import Ui3nBadgeSimple from './ui3n-badge-simple.vue'
5
+
6
+ export interface Ui3nBadgeProps {
7
+ dot?: boolean;
8
+ value?: string | number;
9
+ color?: string;
10
+ textColor?: string;
11
+ position?: 'right-top' | 'right-bottom' | 'left-top' | 'left-bottom';
12
+ }
13
+
14
+ const props = withDefaults(
15
+ defineProps<Ui3nBadgeProps>(),
16
+ {
17
+ dot: false,
18
+ value: '',
19
+ color: '#0090ec',
20
+ textColor: '#fff',
21
+ position: 'right-top',
22
+ },
23
+ )
24
+
25
+ const slots = useSlots()
26
+ const badgeElementSize = ref<{
27
+ width: number;
28
+ height: number;
29
+ } | never>()
30
+
31
+ const hasDefaultSlot = computed(() => !!slots.default)
32
+ const style = computed(() => {
33
+ const [xPosition, yPosition] = props.position.split('-')
34
+ return {
35
+ ...(xPosition === 'right' && { right: `-${get(badgeElementSize.value, 'width', 0) / 2}px` }),
36
+ ...(xPosition === 'left' && { left: `-${get(badgeElementSize.value, 'width', 0) / 2}px` }),
37
+ ...(yPosition === 'top' && { top: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
38
+ ...(yPosition === 'bottom' && { bottom: `-${get(badgeElementSize.value, 'height', 0) / 2}px` }),
39
+ }
40
+ })
41
+ </script>
42
+
43
+ <template>
44
+ <!-- eslint-disable vue/no-multiple-template-root -->
45
+ <div
46
+ v-if="hasDefaultSlot"
47
+ class="ui3n-badge"
48
+ >
49
+ <div class="ui3n-badge__wrapper">
50
+ <slot />
51
+
52
+ <ui3n-badge-simple
53
+ :dot="dot"
54
+ :value="value"
55
+ :color="color"
56
+ :text-color="textColor"
57
+ :style="style"
58
+ class="ui3n-badge__content"
59
+ @change:size="badgeElementSize = $event"
60
+ />
61
+ </div>
62
+ </div>
63
+
64
+ <ui3n-badge-simple
65
+ v-else
66
+ :dot="dot"
67
+ :value="value"
68
+ :color="color"
69
+ :text-color="textColor"
70
+ />
71
+ </template>
72
+
73
+ <style lang="scss" scoped>
74
+ .ui3n-badge {
75
+ --ui3n-badge-size: 20px;
76
+
77
+ position: relative;
78
+
79
+ &__wrapper {
80
+ position: relative;
81
+ width: max-content;
82
+ }
83
+
84
+ &__content {
85
+ position: absolute;
86
+ z-index: 5;
87
+ }
88
+ }
89
+ </style>
package/src/components/ui3n-chip.vue CHANGED
@@ -117,6 +117,7 @@
117
117
 
118
118
  &--with-icon {
119
119
  .ui3n-chip__icon {
120
+ display: flex;
120
121
  margin-right: 5px;
121
122
  }
122
123
  }