@gxp-dev/mod-ui 2.0.3 → 2.0.6
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 +29 -9
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -116,26 +116,46 @@ managers (pnpm 9+, npm 7+, yarn 3+) auto-install them, so the single
|
|
|
116
116
|
command above is usually enough. If your manager warns about
|
|
117
117
|
unresolved peers, add them explicitly: `pnpm add vue pinia reka-ui`.
|
|
118
118
|
|
|
119
|
-
##
|
|
119
|
+
## Styles
|
|
120
120
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
121
|
+
Import the library's stylesheet once in your app entry (e.g. `main.ts` or `app.js`):
|
|
122
|
+
|
|
123
|
+
```ts
|
|
124
|
+
import "@gxp-dev/mod-ui/styles"
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
This loads the Tailwind theme — CSS custom properties for color, radius, shadow, etc. Without it every component will be unstyled.
|
|
128
|
+
|
|
129
|
+
### Themes
|
|
130
|
+
|
|
131
|
+
The library ships three built-in themes:
|
|
132
|
+
|
|
133
|
+
| File | Class | Description |
|
|
134
|
+
| --- | --- | --- |
|
|
135
|
+
| (default, included in `styles`) | — | Light theme |
|
|
136
|
+
| `@gxp-dev/mod-ui/styles/themes/dark.css` | `.dark` | Dark theme |
|
|
137
|
+
| `@gxp-dev/mod-ui/styles/themes/kiosk.css` | `.kiosk` | High-contrast kiosk theme |
|
|
138
|
+
|
|
139
|
+
To use dark or kiosk mode, import the extra stylesheet and add the class to a parent element:
|
|
140
|
+
|
|
141
|
+
```ts
|
|
142
|
+
import "@gxp-dev/mod-ui/styles"
|
|
143
|
+
import "@gxp-dev/mod-ui/styles/themes/dark.css"
|
|
144
|
+
```
|
|
124
145
|
|
|
125
|
-
|
|
126
|
-
<body class="
|
|
146
|
+
```html
|
|
147
|
+
<body class="dark">...</body>
|
|
127
148
|
```
|
|
128
149
|
|
|
150
|
+
To override individual design tokens:
|
|
151
|
+
|
|
129
152
|
```css
|
|
130
|
-
/* Override individual tokens. */
|
|
131
153
|
:root {
|
|
132
154
|
--primary: oklch(0.5 0.2 270);
|
|
133
155
|
--radius: 1rem;
|
|
134
156
|
}
|
|
135
157
|
```
|
|
136
158
|
|
|
137
|
-
Default, dark, and kiosk themes ship in `dist/styles/themes/`.
|
|
138
|
-
|
|
139
159
|
## Develop
|
|
140
160
|
|
|
141
161
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gxp-dev/mod-ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"description": "JSON-driven Vue 3 module UI component library for the GxP platform. Provides shadcn-vue primitives, a templating engine (IndexPage / ShowPage), card/element renderers, and a FormBuilder.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"import": "./dist/picker.js",
|
|
66
66
|
"types": "./dist/picker.d.ts"
|
|
67
67
|
},
|
|
68
|
-
"./styles": "./dist/styles/
|
|
68
|
+
"./styles": "./dist/styles/mod-ui.css",
|
|
69
69
|
"./styles/themes/*": "./dist/styles/themes/*"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
@@ -82,16 +82,16 @@
|
|
|
82
82
|
"@ericblade/quagga2": "^1.12.1",
|
|
83
83
|
"@fix-webm-duration/fix": "^1.0.1",
|
|
84
84
|
"@internationalized/date": "^3.12.1",
|
|
85
|
-
"@tiptap/extension-color": "
|
|
86
|
-
"@tiptap/extension-font-family": "
|
|
87
|
-
"@tiptap/extension-image": "
|
|
88
|
-
"@tiptap/extension-link": "
|
|
89
|
-
"@tiptap/extension-table": "
|
|
90
|
-
"@tiptap/extension-text-align": "
|
|
91
|
-
"@tiptap/extension-text-style": "
|
|
92
|
-
"@tiptap/extension-underline": "
|
|
93
|
-
"@tiptap/starter-kit": "
|
|
94
|
-
"@tiptap/vue-3": "
|
|
85
|
+
"@tiptap/extension-color": ">=2.0.0",
|
|
86
|
+
"@tiptap/extension-font-family": ">=2.0.0",
|
|
87
|
+
"@tiptap/extension-image": ">=2.0.0",
|
|
88
|
+
"@tiptap/extension-link": ">=2.0.0",
|
|
89
|
+
"@tiptap/extension-table": ">=2.0.0",
|
|
90
|
+
"@tiptap/extension-text-align": ">=2.0.0",
|
|
91
|
+
"@tiptap/extension-text-style": ">=2.0.0",
|
|
92
|
+
"@tiptap/extension-underline": ">=2.0.0",
|
|
93
|
+
"@tiptap/starter-kit": ">=2.0.0",
|
|
94
|
+
"@tiptap/vue-3": ">=2.0.0",
|
|
95
95
|
"@vee-validate/zod": "^4.15.1",
|
|
96
96
|
"@vueuse/core": "^14.2.0",
|
|
97
97
|
"axios": "^1.9.0",
|