@muxima-ui/core 2.0.0 → 2.0.1
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 +44 -15
- package/fesm2022/muxima-ui-core.mjs +1 -1
- package/fesm2022/muxima-ui-core.mjs.map +1 -1
- package/package.json +1 -1
- package/types/muxima-ui-core.d.ts +1 -1
package/README.md
CHANGED
|
@@ -1,36 +1,43 @@
|
|
|
1
1
|
# @muxima-ui/core
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
**English** · [Português](https://github.com/Aldemiro20/muxima-ui/blob/HEAD/projects/core/README.pt.md)
|
|
4
|
+
|
|
5
|
+
Accessible Angular components, themed with CSS variables, with dark mode included.
|
|
6
|
+
Requires Angular 21 or later and `@angular/cdk`.
|
|
5
7
|
|
|
6
8
|
```bash
|
|
7
9
|
npm install @muxima-ui/core @angular/cdk
|
|
8
10
|
```
|
|
9
11
|
|
|
10
|
-
|
|
12
|
+
Styles (in `angular.json`):
|
|
11
13
|
|
|
12
14
|
```json
|
|
13
15
|
"styles": ["@muxima-ui/core/styles.css"]
|
|
14
16
|
```
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
Fonts (optional; without them the system fonts are used):
|
|
17
19
|
|
|
18
20
|
```bash
|
|
19
21
|
npm install @fontsource/instrument-sans @fontsource/ibm-plex-mono
|
|
20
22
|
```
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
Each component has its own entry point, so you only import what you use:
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { MxButton } from '@muxima-ui/core/button';
|
|
28
|
+
import { MxFormField, MxLabel, MxInput } from '@muxima-ui/core/form-field';
|
|
29
|
+
```
|
|
23
30
|
|
|
24
|
-
|
|
|
31
|
+
| Entry point | Exports |
|
|
25
32
|
| --- | --- |
|
|
26
33
|
| `@muxima-ui/core/button` | `MxButton` |
|
|
27
|
-
| `@muxima-ui/core/form-field` | `MxFormField`, `MxLabel`, `MxHint`, `MxError`, `MxInput` (input
|
|
28
|
-
| `@muxima-ui/core/select` | `MxSelect` (
|
|
34
|
+
| `@muxima-ui/core/form-field` | `MxFormField`, `MxLabel`, `MxHint`, `MxError`, `MxInput` (input and textarea), `MxChoice`, `MxFieldset` |
|
|
35
|
+
| `@muxima-ui/core/select` | `MxSelect` (single and `multiple`), `MxOption` |
|
|
29
36
|
| `@muxima-ui/core/combobox` | `MxCombobox` |
|
|
30
37
|
| `@muxima-ui/core/checkbox` | `MxCheckbox` |
|
|
31
38
|
| `@muxima-ui/core/radio` | `MxRadio` |
|
|
32
39
|
| `@muxima-ui/core/switch` | `MxSwitch` |
|
|
33
|
-
| `@muxima-ui/core/slider` | `MxSlider`, `MxRangeSlider` (
|
|
40
|
+
| `@muxima-ui/core/slider` | `MxSlider`, `MxRangeSlider` (two thumbs) |
|
|
34
41
|
| `@muxima-ui/core/date-picker` | `MxDatePicker`, `MxDateRangePicker`, `MxCalendar`, `mxDefaultRangePresets`, `mxDateRangeComplete`, `mxParseDate`, `mxFormatDate` |
|
|
35
42
|
| `@muxima-ui/core/time-picker` | `MxTimePicker`, `mxParseTime` |
|
|
36
43
|
| `@muxima-ui/core/otp` | `MxOtp` |
|
|
@@ -46,7 +53,7 @@ Cada componente tem o seu ponto de entrada, para só importares o que usas:
|
|
|
46
53
|
| `@muxima-ui/core/data-grid` | `MX_DATA_GRID`, `MxGridColumn` |
|
|
47
54
|
| `@muxima-ui/core/kanban` | `MX_KANBAN`, `MxKanbanColumn` |
|
|
48
55
|
| `@muxima-ui/core/image-cropper` | `MxImageCropper` |
|
|
49
|
-
| `@muxima-ui/core/editor` | `MxEditor` (
|
|
56
|
+
| `@muxima-ui/core/editor` | `MxEditor` (needs Tiptap, see below) |
|
|
50
57
|
| `@muxima-ui/core/table` | `MX_TABLE`, `mxSortData` |
|
|
51
58
|
| `@muxima-ui/core/card` | `MX_CARD` |
|
|
52
59
|
| `@muxima-ui/core/badge` | `MxBadge` |
|
|
@@ -63,14 +70,16 @@ Cada componente tem o seu ponto de entrada, para só importares o que usas:
|
|
|
63
70
|
| `@muxima-ui/core/menu` | `MX_MENU` |
|
|
64
71
|
| `@muxima-ui/core/popover` | `MX_POPOVER` |
|
|
65
72
|
| `@muxima-ui/core/tooltip` | `MxTooltip` |
|
|
66
|
-
| `@muxima-ui/core/tour` | `MxTour`, `MxTourAnchor` (
|
|
73
|
+
| `@muxima-ui/core/tour` | `MxTour`, `MxTourAnchor` (guided tour) |
|
|
67
74
|
| `@muxima-ui/core/alert` | `MX_ALERT` |
|
|
68
75
|
| `@muxima-ui/core/progress` | `MxProgress`, `MxSpinner` |
|
|
69
76
|
| `@muxima-ui/core/skeleton` | `MxSkeleton` |
|
|
70
77
|
| `@muxima-ui/core/toast` | `MxToast` |
|
|
71
78
|
| `@muxima-ui/core/i18n` | `provideMuximaI18n`, `MxI18n`, `MX_MESSAGES_PT`, `MX_MESSAGES_EN`, `injectMxMessages` |
|
|
72
79
|
|
|
73
|
-
|
|
80
|
+
## Languages
|
|
81
|
+
|
|
82
|
+
Component texts (buttons, screen reader announcements, color names, date shortcuts) come in English (the default) and Portuguese. For Portuguese:
|
|
74
83
|
|
|
75
84
|
```ts
|
|
76
85
|
import { provideMuximaI18n } from '@muxima-ui/core/i18n';
|
|
@@ -78,12 +87,32 @@ import { provideMuximaI18n } from '@muxima-ui/core/i18n';
|
|
|
78
87
|
providers: [provideMuximaI18n({ locale: 'pt' })]
|
|
79
88
|
```
|
|
80
89
|
|
|
81
|
-
`inject(MxI18n).setLocale('en')`
|
|
90
|
+
`inject(MxI18n).setLocale('en')` switches the language without reloading. Use `messages` to change any text or add another language. Upgrading from 1.x and want to keep Portuguese? Set `locale: 'pt'`.
|
|
91
|
+
|
|
92
|
+
## Theming
|
|
82
93
|
|
|
83
|
-
|
|
94
|
+
Every color comes from `--mx-*` variables. To match your brand:
|
|
95
|
+
|
|
96
|
+
```css
|
|
97
|
+
:root {
|
|
98
|
+
--mx-accent: #7a1f3d;
|
|
99
|
+
--mx-radius: 8px;
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Dark mode follows the system by default; force it with `<html data-theme="dark">` or `data-theme="light"`.
|
|
104
|
+
|
|
105
|
+
## Rich text editor
|
|
106
|
+
|
|
107
|
+
The editor uses Tiptap, which is optional: you only need it if you import `@muxima-ui/core/editor`.
|
|
84
108
|
|
|
85
109
|
```bash
|
|
86
110
|
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extensions
|
|
87
111
|
```
|
|
88
112
|
|
|
89
|
-
|
|
113
|
+
## Links
|
|
114
|
+
|
|
115
|
+
- [Changelog](https://github.com/Aldemiro20/muxima-ui/blob/HEAD/CHANGELOG.md)
|
|
116
|
+
- [Issues](https://github.com/Aldemiro20/muxima-ui/issues)
|
|
117
|
+
|
|
118
|
+
MIT license.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"muxima-ui-core.mjs","sources":["../../../projects/core/src/public-api.ts","../../../projects/core/src/muxima-ui-core.ts"],"sourcesContent":["/*\n * Muxima UI — ponto de entrada principal.\n * Os componentes vivem em entradas secundárias, para só incluíres o que usas:\n * import { MxButton } from '@muxima-ui/core/button';\n */\nexport const MUXIMA_VERSION = '2.0.
|
|
1
|
+
{"version":3,"file":"muxima-ui-core.mjs","sources":["../../../projects/core/src/public-api.ts","../../../projects/core/src/muxima-ui-core.ts"],"sourcesContent":["/*\n * Muxima UI — ponto de entrada principal.\n * Os componentes vivem em entradas secundárias, para só incluíres o que usas:\n * import { MxButton } from '@muxima-ui/core/button';\n */\nexport const MUXIMA_VERSION = '2.0.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACI,MAAM,cAAc,GAAG;;ACL9B;;AAEG;;"}
|
package/package.json
CHANGED