@lovince/ui-vue 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/primitives/primitives.d.ts +186 -9
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1773 -1677
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ effects run through [`@lovince/ui-dom`](../ui-dom). This package subscribes to
|
|
|
6
6
|
the machine, feeds props in, and renders what `connect()` returns. It holds no
|
|
7
7
|
behaviour of its own.
|
|
8
8
|
|
|
9
|
-
> **Status: `0.
|
|
9
|
+
> **Status: `0.5.0`, experimental.** The API may change before `1.0`.
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
12
|
bun add @lovince/ui-vue
|
|
@@ -1,13 +1,60 @@
|
|
|
1
1
|
import { Component, PropType } from 'vue';
|
|
2
|
-
export
|
|
2
|
+
export declare const TEXT_ROLES: readonly ["display-lg", "display-md", "display-sm", "headline-lg", "headline-md", "headline-sm", "title-lg", "title-md", "title-sm", "body-lg", "body-md", "body-sm", "label-lg", "label-md", "overline", "code"];
|
|
3
|
+
export declare const TEXT_COLORS: readonly ["default", "muted", "subtle", "inverse", "accent", "success", "warning", "danger", "disabled"];
|
|
4
|
+
export declare const TEXT_WEIGHTS: readonly ["medium", "semibold", "bold"];
|
|
5
|
+
export declare const TEXT_ALIGNS: readonly ["start", "center", "end", "justify"];
|
|
6
|
+
export declare const TEXT_WRAPS: readonly ["wrap", "nowrap", "balance", "pretty", "break"];
|
|
7
|
+
export type TextRole = (typeof TEXT_ROLES)[number];
|
|
8
|
+
export type TextColor = (typeof TEXT_COLORS)[number];
|
|
9
|
+
export type TextWeight = (typeof TEXT_WEIGHTS)[number];
|
|
10
|
+
export type TextAlign = (typeof TEXT_ALIGNS)[number];
|
|
11
|
+
export type TextWrap = (typeof TEXT_WRAPS)[number];
|
|
3
12
|
export declare const LvText: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
13
|
+
color: {
|
|
14
|
+
readonly type: PropType<TextColor>;
|
|
15
|
+
readonly default: undefined;
|
|
16
|
+
readonly validator: (value: string) => boolean;
|
|
17
|
+
};
|
|
18
|
+
weight: {
|
|
19
|
+
readonly type: PropType<TextWeight>;
|
|
20
|
+
readonly default: undefined;
|
|
21
|
+
readonly validator: (value: string) => boolean;
|
|
22
|
+
};
|
|
23
|
+
align: {
|
|
24
|
+
readonly type: PropType<TextAlign>;
|
|
25
|
+
readonly default: undefined;
|
|
26
|
+
readonly validator: (value: string) => boolean;
|
|
27
|
+
};
|
|
28
|
+
wrap: {
|
|
29
|
+
readonly type: PropType<TextWrap>;
|
|
30
|
+
readonly default: undefined;
|
|
31
|
+
readonly validator: (value: string) => boolean;
|
|
32
|
+
};
|
|
33
|
+
truncate: {
|
|
34
|
+
readonly type: PropType<boolean | number>;
|
|
35
|
+
readonly default: false;
|
|
36
|
+
readonly validator: (value: boolean | number) => boolean;
|
|
37
|
+
};
|
|
38
|
+
italic: {
|
|
39
|
+
readonly type: BooleanConstructor;
|
|
40
|
+
readonly default: false;
|
|
41
|
+
};
|
|
42
|
+
underline: {
|
|
43
|
+
readonly type: BooleanConstructor;
|
|
44
|
+
readonly default: false;
|
|
45
|
+
};
|
|
46
|
+
uppercase: {
|
|
47
|
+
readonly type: BooleanConstructor;
|
|
48
|
+
readonly default: false;
|
|
49
|
+
};
|
|
4
50
|
as: {
|
|
5
51
|
default: string;
|
|
6
52
|
type: PropType<string | Component>;
|
|
7
53
|
};
|
|
8
54
|
variant: {
|
|
9
55
|
readonly type: PropType<TextRole>;
|
|
10
|
-
readonly default: "body-md";
|
|
56
|
+
readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
|
|
57
|
+
readonly validator: (value: string) => boolean;
|
|
11
58
|
};
|
|
12
59
|
asChild: {
|
|
13
60
|
readonly type: BooleanConstructor;
|
|
@@ -16,13 +63,51 @@ export declare const LvText: import('vue').DefineComponent<import('vue').Extract
|
|
|
16
63
|
}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
17
64
|
[key: string]: any;
|
|
18
65
|
}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
66
|
+
color: {
|
|
67
|
+
readonly type: PropType<TextColor>;
|
|
68
|
+
readonly default: undefined;
|
|
69
|
+
readonly validator: (value: string) => boolean;
|
|
70
|
+
};
|
|
71
|
+
weight: {
|
|
72
|
+
readonly type: PropType<TextWeight>;
|
|
73
|
+
readonly default: undefined;
|
|
74
|
+
readonly validator: (value: string) => boolean;
|
|
75
|
+
};
|
|
76
|
+
align: {
|
|
77
|
+
readonly type: PropType<TextAlign>;
|
|
78
|
+
readonly default: undefined;
|
|
79
|
+
readonly validator: (value: string) => boolean;
|
|
80
|
+
};
|
|
81
|
+
wrap: {
|
|
82
|
+
readonly type: PropType<TextWrap>;
|
|
83
|
+
readonly default: undefined;
|
|
84
|
+
readonly validator: (value: string) => boolean;
|
|
85
|
+
};
|
|
86
|
+
truncate: {
|
|
87
|
+
readonly type: PropType<boolean | number>;
|
|
88
|
+
readonly default: false;
|
|
89
|
+
readonly validator: (value: boolean | number) => boolean;
|
|
90
|
+
};
|
|
91
|
+
italic: {
|
|
92
|
+
readonly type: BooleanConstructor;
|
|
93
|
+
readonly default: false;
|
|
94
|
+
};
|
|
95
|
+
underline: {
|
|
96
|
+
readonly type: BooleanConstructor;
|
|
97
|
+
readonly default: false;
|
|
98
|
+
};
|
|
99
|
+
uppercase: {
|
|
100
|
+
readonly type: BooleanConstructor;
|
|
101
|
+
readonly default: false;
|
|
102
|
+
};
|
|
19
103
|
as: {
|
|
20
104
|
default: string;
|
|
21
105
|
type: PropType<string | Component>;
|
|
22
106
|
};
|
|
23
107
|
variant: {
|
|
24
108
|
readonly type: PropType<TextRole>;
|
|
25
|
-
readonly default: "body-md";
|
|
109
|
+
readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
|
|
110
|
+
readonly validator: (value: string) => boolean;
|
|
26
111
|
};
|
|
27
112
|
asChild: {
|
|
28
113
|
readonly type: BooleanConstructor;
|
|
@@ -31,9 +116,54 @@ export declare const LvText: import('vue').DefineComponent<import('vue').Extract
|
|
|
31
116
|
}>> & Readonly<{}>, {
|
|
32
117
|
as: string | Component;
|
|
33
118
|
asChild: boolean;
|
|
34
|
-
variant:
|
|
119
|
+
variant: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
|
|
120
|
+
color: "default" | "disabled" | "success" | "warning" | "accent" | "subtle" | "danger" | "muted" | "inverse";
|
|
121
|
+
align: "center" | "start" | "end" | "justify";
|
|
122
|
+
wrap: "nowrap" | "balance" | "wrap" | "pretty" | "break";
|
|
123
|
+
italic: boolean;
|
|
124
|
+
weight: "bold" | "medium" | "semibold";
|
|
125
|
+
underline: boolean;
|
|
126
|
+
uppercase: boolean;
|
|
127
|
+
truncate: number | boolean;
|
|
35
128
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
36
129
|
export declare const LvHeading: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
130
|
+
color: {
|
|
131
|
+
readonly type: PropType<TextColor>;
|
|
132
|
+
readonly default: undefined;
|
|
133
|
+
readonly validator: (value: string) => boolean;
|
|
134
|
+
};
|
|
135
|
+
weight: {
|
|
136
|
+
readonly type: PropType<TextWeight>;
|
|
137
|
+
readonly default: undefined;
|
|
138
|
+
readonly validator: (value: string) => boolean;
|
|
139
|
+
};
|
|
140
|
+
align: {
|
|
141
|
+
readonly type: PropType<TextAlign>;
|
|
142
|
+
readonly default: undefined;
|
|
143
|
+
readonly validator: (value: string) => boolean;
|
|
144
|
+
};
|
|
145
|
+
wrap: {
|
|
146
|
+
readonly type: PropType<TextWrap>;
|
|
147
|
+
readonly default: undefined;
|
|
148
|
+
readonly validator: (value: string) => boolean;
|
|
149
|
+
};
|
|
150
|
+
truncate: {
|
|
151
|
+
readonly type: PropType<boolean | number>;
|
|
152
|
+
readonly default: false;
|
|
153
|
+
readonly validator: (value: boolean | number) => boolean;
|
|
154
|
+
};
|
|
155
|
+
italic: {
|
|
156
|
+
readonly type: BooleanConstructor;
|
|
157
|
+
readonly default: false;
|
|
158
|
+
};
|
|
159
|
+
underline: {
|
|
160
|
+
readonly type: BooleanConstructor;
|
|
161
|
+
readonly default: false;
|
|
162
|
+
};
|
|
163
|
+
uppercase: {
|
|
164
|
+
readonly type: BooleanConstructor;
|
|
165
|
+
readonly default: false;
|
|
166
|
+
};
|
|
37
167
|
as: {
|
|
38
168
|
type: PropType<string | Component>;
|
|
39
169
|
default: undefined;
|
|
@@ -48,12 +178,50 @@ export declare const LvHeading: import('vue').DefineComponent<import('vue').Extr
|
|
|
48
178
|
validator: (value: number) => boolean;
|
|
49
179
|
};
|
|
50
180
|
size: {
|
|
51
|
-
|
|
52
|
-
|
|
181
|
+
readonly type: PropType<TextRole>;
|
|
182
|
+
readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
|
|
183
|
+
readonly validator: (value: string) => boolean;
|
|
53
184
|
};
|
|
54
185
|
}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
55
186
|
[key: string]: any;
|
|
56
187
|
}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
188
|
+
color: {
|
|
189
|
+
readonly type: PropType<TextColor>;
|
|
190
|
+
readonly default: undefined;
|
|
191
|
+
readonly validator: (value: string) => boolean;
|
|
192
|
+
};
|
|
193
|
+
weight: {
|
|
194
|
+
readonly type: PropType<TextWeight>;
|
|
195
|
+
readonly default: undefined;
|
|
196
|
+
readonly validator: (value: string) => boolean;
|
|
197
|
+
};
|
|
198
|
+
align: {
|
|
199
|
+
readonly type: PropType<TextAlign>;
|
|
200
|
+
readonly default: undefined;
|
|
201
|
+
readonly validator: (value: string) => boolean;
|
|
202
|
+
};
|
|
203
|
+
wrap: {
|
|
204
|
+
readonly type: PropType<TextWrap>;
|
|
205
|
+
readonly default: undefined;
|
|
206
|
+
readonly validator: (value: string) => boolean;
|
|
207
|
+
};
|
|
208
|
+
truncate: {
|
|
209
|
+
readonly type: PropType<boolean | number>;
|
|
210
|
+
readonly default: false;
|
|
211
|
+
readonly validator: (value: boolean | number) => boolean;
|
|
212
|
+
};
|
|
213
|
+
italic: {
|
|
214
|
+
readonly type: BooleanConstructor;
|
|
215
|
+
readonly default: false;
|
|
216
|
+
};
|
|
217
|
+
underline: {
|
|
218
|
+
readonly type: BooleanConstructor;
|
|
219
|
+
readonly default: false;
|
|
220
|
+
};
|
|
221
|
+
uppercase: {
|
|
222
|
+
readonly type: BooleanConstructor;
|
|
223
|
+
readonly default: false;
|
|
224
|
+
};
|
|
57
225
|
as: {
|
|
58
226
|
type: PropType<string | Component>;
|
|
59
227
|
default: undefined;
|
|
@@ -68,13 +236,22 @@ export declare const LvHeading: import('vue').DefineComponent<import('vue').Extr
|
|
|
68
236
|
validator: (value: number) => boolean;
|
|
69
237
|
};
|
|
70
238
|
size: {
|
|
71
|
-
|
|
72
|
-
|
|
239
|
+
readonly type: PropType<TextRole>;
|
|
240
|
+
readonly default: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
|
|
241
|
+
readonly validator: (value: string) => boolean;
|
|
73
242
|
};
|
|
74
243
|
}>> & Readonly<{}>, {
|
|
75
|
-
size:
|
|
244
|
+
size: "code" | "overline" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md";
|
|
76
245
|
as: string | Component;
|
|
77
246
|
asChild: boolean;
|
|
247
|
+
color: "default" | "disabled" | "success" | "warning" | "accent" | "subtle" | "danger" | "muted" | "inverse";
|
|
248
|
+
align: "center" | "start" | "end" | "justify";
|
|
249
|
+
wrap: "nowrap" | "balance" | "wrap" | "pretty" | "break";
|
|
250
|
+
italic: boolean;
|
|
251
|
+
weight: "bold" | "medium" | "semibold";
|
|
252
|
+
underline: boolean;
|
|
253
|
+
uppercase: boolean;
|
|
254
|
+
truncate: number | boolean;
|
|
78
255
|
level: number;
|
|
79
256
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
80
257
|
export declare const LvLabel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
package/dist/index.d.ts
CHANGED
|
@@ -41,7 +41,7 @@ export * from './components/forms/phone-input';
|
|
|
41
41
|
export * from './components/layout/scroll-area';
|
|
42
42
|
export { LvFieldRoot, LvFieldLabel, LvForm, LvInput, LvTextarea } from './components/forms/forms';
|
|
43
43
|
export { LvButton, BUTTON_SHAPES, BUTTON_SIZES, BUTTON_VARIANTS, type ButtonShape, type ButtonSize, type ButtonVariant } from './components/primitives/button';
|
|
44
|
-
export { LvAspectRatio, LvBox, LvCode, LvHeading, LvKbd, LvLabel, LvLink, LvSeparator, LvText, LvVisuallyHidden, type TextRole } from './components/primitives/primitives';
|
|
44
|
+
export { LvAspectRatio, LvBox, LvCode, LvHeading, LvKbd, LvLabel, LvLink, LvSeparator, LvText, LvVisuallyHidden, TEXT_ALIGNS, TEXT_COLORS, TEXT_ROLES, TEXT_WEIGHTS, TEXT_WRAPS, type TextAlign, type TextColor, type TextRole, type TextWeight, type TextWrap, } from './components/primitives/primitives';
|
|
45
45
|
export type { ActivationMode, CheckedState, DialogRole, Direction, Orientation } from '@lovince/ui-headless';
|
|
46
46
|
export * from './components/display/feedback';
|
|
47
47
|
export * from './components/display/meter';
|