@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 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.4.0`, experimental.** The API may change before `1.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 type TextRole = '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';
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: TextRole;
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
- default: string;
52
- type: PropType<TextRole>;
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
- default: string;
72
- type: PropType<TextRole>;
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: TextRole;
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';