@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 CHANGED
@@ -4,10 +4,11 @@
4
4
 
5
5
  ## Installation
6
6
 
7
- RUI UI contains two things:
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
- - a preset and plugin 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.
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 usage
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
- You may add the `postcss-import` module to your `nuxt.config.ts` file:
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 | Contents |
171
- | -------------- | ----------------------------------------- |
172
- | (root) | General docs and configuration |
173
- | `.github/` | GitHub Actions configuration |
174
- | `.storybook/` | Storybook setup |
175
- | `src/primevue` | The RIS UI preset for PrimeVue |
176
- | `src/tailwind` | The RIS UI preset and plugin for Tailwind |
177
- | `src/lib` | Internal tools and helpers |
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
+ };