@digitalservicebund/ris-ui 1.7.0 → 2.0.0

package/README.md

@@ -10,10 +10,10 @@ RUI UI contains three things:
 - [custom components](./src/components/);
 - 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.
 
-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:
+Vue, PrimeVue and Tailwind 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). To get started, install:
 
 ```sh
-# Vue and PrimeVue if you haven't installed them already. Tailwind is optional.
+# Vue, PrimeVue, and Tailwind if you haven't installed them already.
 npm install vue primevue tailwindcss
 
 # RIS UI
@@ -33,8 +33,8 @@ Import and apply the RIS UI theme, styling, and fonts where you set up your appl
   import { createApp } from "vue";
   import PrimeVue from "primevue/config";
 + import { RisUiTheme, RisUiLocale } from "@digitalservicebund/ris-ui/primevue";
-+ import "@digitalservicebund/ris-ui/primevue/style.css";
 + import "@digitalservicebund/ris-ui/fonts.css";
++ import "@digitalservicebund/ris-ui/primevue/style.css"
 
   const app = createApp().use(PrimeVue, {
 +   unstyled: true,
@@ -92,17 +92,21 @@ Finally, add the styles (e.g. `assets/main.css`):
 /* Your other CSS */
 ```
 
-If not using Tailwind, you may also add these styles directly to the `css` section of `nuxt.config.ts`.
+## Tailwind setup
 
-## With Tailwind
-
-If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.):
+- Add the `RisUiPreset` (for colors, spacings, etc.) and the `RisUiPlugin` (for typography classes, etc.)
+- Ensure the path to the RIS-UI files is included in the content array of your Tailwind config (e.g., `"./node_modules/@digitalservicebund/ris-ui/dist/**/*.{js,vue,ts}"`). This ensures all necessary classes from RIS UI are generated.
 
 ```diff
   // tailwind.config.js
 + import { RisUiPreset, RisUiPlugin } from "@digitalservicebund/ris-ui/tailwind";
 
   export default {
+  content: [
++    "./node_modules/@digitalservicebund/ris-ui/dist/**/*.{js,vue,ts}",
+    // Other content sources
+  ],
+
 +   presets: [RisUiPreset],
 +   plugins: [RisUiPlugin],
 
@@ -110,6 +114,17 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p
   };
 ```
 
+Ensure Tailwind is included in your main stylesheet (e.g., `style.css`):
+
+```diff
+// style.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### Important Note for Nuxt Projects
+
 To avoid issues with conflicting `@layer` directives, make sure to integrate the `postcss-import` module in your PostCSS configuration:
 
 See [Adding custom styles - Tailwind CSS](https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files).
@@ -127,6 +142,36 @@ If you're using Nuxt, you may add the `postcss-import` module to your `nuxt.conf
   },
 ```
 
+## Get started with a button
+
+To get you started, here's an example how to import a ris-ui button into your ui-component. The Storybook code snippet is hiding some essential parts from you. Here is an an example `StartPage.vue`:
+
+```bash
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import Button from 'primevue/button'
+import IconAdd from '~icons/material-symbols/add'
+
+const router = useRouter()
+</script>
+
+<template>
+  <Button
+    :disabled="false"
+    label="Neue Dokumentationseinheit"
+    :loading="false"
+    :text="false"
+    @click="router.push({ path: '/documentUnit/new' })"
+  >
+    <template #icon>
+      <IconAdd />
+    </template>
+  </Button>
+</template>
+```
+
+In addition to the installation steps, the icon is being provided by [unplugin-icons](https://www.npmjs.com/package/unplugin-icons) in conjunction with [@iconify-json/material-symbols](https://www.npmjs.com/package/@iconify-json/material-symbols).
+
 ## Development
 
 To make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) along with npm installed on your machine.

package/dist/components/RisAutoComplete/RisAutoComplete.vue.d.ts

@@ -18,5 +18,14 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
     'update:modelValue': (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    autoCompleteRef: import("vue").CreateComponentPublicInstanceWithMixins<{}, {}, {}, {}, import("vue").MethodOptions, {}, {}, ((e: "update:modelValue", value: any) => void) & ((e: "change", event: import("primevue/autocomplete").AutoCompleteChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "blur", event: Event) => void) & ((e: "item-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "item-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "option-select", event: import("primevue/autocomplete").AutoCompleteOptionSelectEvent) => void) & ((e: "option-unselect", event: import("primevue/autocomplete").AutoCompleteOptionUnselectEvent) => void) & ((e: "dropdown-click", event: import("primevue/autocomplete").AutoCompleteDropdownClickEvent) => void) & ((e: "clear") => void) & ((e: "complete", event: import("primevue/autocomplete").AutoCompleteCompleteEvent) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void) & ((e: "show") => void) & ((e: "hide") => void) & import("vue").ObjectEmitsOptions, {}, {}, true, {}, import("primevue/autocomplete").AutoCompleteSlots & import("vue").SlotsType, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, {}, {}, {}, {}, import("vue").MethodOptions, {}> | null;
+}, any>;
 export default _default;