@digitalservicebund/ris-ui 1.5.1 → 1.7.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 +21 -16
- package/dist/components/RisGhostButton/RisGhostButton.vue.d.ts +17 -0
- package/dist/components/index.cjs +16 -16
- package/dist/components/index.js +891 -854
- package/dist/mockServiceWorker.js +10 -8
- package/dist/primevue/index.cjs +1 -1
- package/dist/primevue/index.d.ts +2 -0
- package/dist/primevue/index.js +151 -86
- package/dist/primevue/menu/menu.d.ts +3 -0
- package/dist/primevue/panelMenu/panelMenu.d.ts +3 -0
- package/dist/style.css +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
@@ -4,10 +4,11 @@
|
|
4
4
|
|
5
5
|
## Installation
|
6
6
|
|
7
|
-
RUI UI contains
|
7
|
+
RUI UI contains three things:
|
8
8
|
|
9
|
-
- a theme for [Vue 3](https://vuejs.org) components from [PrimeVue 4](https://primevue.org);
|
10
|
-
-
|
9
|
+
- a [theme](./src/primevue/) for [Vue 3](https://vuejs.org) components from [PrimeVue 4](https://primevue.org);
|
10
|
+
- [custom components](./src/components/);
|
11
|
+
- a [preset and plugin](./src/tailwind/) for [Tailwind](https://tailwindcss.com) that sets some global styling and exposes the design tokens used by the theme, so you can build custom UI that looks consistent with the components.
|
11
12
|
|
12
13
|
Vue and PrimeVue are required for RIS UI to work (you'll see a warning about missing peer dependencies if you're trying to use RIS UI without them). Tailwind is optional. To get started, install:
|
13
14
|
|
@@ -21,6 +22,10 @@ npm install @digitalservicebund/ris-ui
|
|
21
22
|
|
22
23
|
### Vue setup
|
23
24
|
|
25
|
+
> [!NOTE]
|
26
|
+
>
|
27
|
+
> If you're using Nuxt, follow the instructions for [Nuxt](#nuxt-setup) below instead.
|
28
|
+
|
24
29
|
Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`):
|
25
30
|
|
26
31
|
```diff
|
@@ -89,7 +94,7 @@ Finally, add the styles (e.g. `assets/main.css`):
|
|
89
94
|
|
90
95
|
If not using Tailwind, you may also add these styles directly to the `css` section of `nuxt.config.ts`.
|
91
96
|
|
92
|
-
## Tailwind
|
97
|
+
## With Tailwind
|
93
98
|
|
94
99
|
If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.):
|
95
100
|
|
@@ -107,11 +112,9 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p
|
|
107
112
|
|
108
113
|
To avoid issues with conflicting `@layer` directives, make sure to integrate the `postcss-import` module in your PostCSS configuration:
|
109
114
|
|
110
|
-
See https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files
|
111
|
-
|
112
|
-
### Using Nuxt
|
115
|
+
See [Adding custom styles - Tailwind CSS](https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files).
|
113
116
|
|
114
|
-
|
117
|
+
If you're using Nuxt, you may add the `postcss-import` module to your `nuxt.config.ts` file:
|
115
118
|
|
116
119
|
```diff
|
117
120
|
// nuxt.config.ts
|
@@ -162,19 +165,21 @@ RIS UI uses the following tools:
|
|
162
165
|
- [Unplugin Icons](https://github.com/unplugin/unplugin-icons) for providing SVG icons as components
|
163
166
|
- [TypeScript](https://www.typescriptlang.org/)
|
164
167
|
- [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) for code consistency
|
168
|
+
- [Vitest](https://vitest.dev) as our test runner
|
165
169
|
|
166
170
|
You can find more in [package.json](./package.json), but the above are the ones you'll work with the most.
|
167
171
|
|
168
172
|
In terms of files and folders, you'll find:
|
169
173
|
|
170
|
-
| Folder
|
171
|
-
|
|
172
|
-
| (root)
|
173
|
-
| `.github/`
|
174
|
-
| `.storybook/`
|
175
|
-
| `src/
|
176
|
-
| `src/
|
177
|
-
| `src/
|
174
|
+
| Folder | Contents |
|
175
|
+
| ---------------- | ----------------------------------------- |
|
176
|
+
| (root) | General docs and configuration |
|
177
|
+
| `.github/` | GitHub Actions configuration |
|
178
|
+
| `.storybook/` | Storybook setup |
|
179
|
+
| `src/components` | Custom Vue components |
|
180
|
+
| `src/primevue` | The RIS UI preset for PrimeVue |
|
181
|
+
| `src/tailwind` | The RIS UI preset and plugin for Tailwind |
|
182
|
+
| `src/lib` | Internal tools and helpers |
|
178
183
|
|
179
184
|
### Tailwind IntelliSense
|
180
185
|
|
@@ -0,0 +1,17 @@
|
|
1
|
+
declare function __VLS_template(): {
|
2
|
+
attrs: Partial<{}>;
|
3
|
+
slots: {
|
4
|
+
default?(_: {}): any;
|
5
|
+
};
|
6
|
+
refs: {};
|
7
|
+
rootEl: HTMLButtonElement;
|
8
|
+
};
|
9
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
10
|
+
declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLButtonElement>;
|
11
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
12
|
+
export default _default;
|
13
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
14
|
+
new (): {
|
15
|
+
$slots: S;
|
16
|
+
};
|
17
|
+
};
|