@digitalservicebund/ris-ui 1.7.1 → 3.0.0

package/README.md

@@ -4,16 +4,16 @@
 
 ## Installation
 
-RUI UI contains three things:
+RIS UI contains three things:
 
 - a [theme](./src/primevue/) for [Vue 3](https://vuejs.org) components from [PrimeVue 4](https://primevue.org);
 - [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.
+- a [configuration](./src/tailwind/global.css) file for [Tailwind](https://tailwindcss.com) that includes design tokens, typography, and global component styles, ensuring consistency across custom UI and PrimeVue 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
@@ -28,12 +28,15 @@ npm install @digitalservicebund/ris-ui
 
 Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`):
 
+> [!TIP]
+>
+> As of Tailwind V4. The style is now integrated through the global CSS file, simplifying the setup.
+
 ```diff
   // main.ts
   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";
 
   const app = createApp().use(PrimeVue, {
@@ -92,24 +95,37 @@ 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 CSS Configuration
 
-## With Tailwind
-
-If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.):
+With Tailwind CSS v4, the setup has transitioned to a CSS-based configuration, eliminating the need for a separate tailwind.config.js file. All configuration is now handled directly in your main stylesheet (e.g., style.css).
 
 ```diff
-  // tailwind.config.js
-+ import { RisUiPreset, RisUiPlugin } from "@digitalservicebund/ris-ui/tailwind";
+/* style.css */
 
-  export default {
-+   presets: [RisUiPreset],
-+   plugins: [RisUiPlugin],
+/* 1. Import Tailwind and RIS UI styles */
+@import "tailwindcss";
+@import "@digitalservicebund/ris-ui/primevue/style.css";
 
-    // your other configuration
-  };
+/* 2. Source the RIS UI components for Tailwind class generation */
+@source "../node_modules/@digitalservicebund/ris-ui/dist/**/*.{js,vue,ts}";
+
+/* 3. Optional: Add your custom CSS*/
+body {
+  background-color: #f3f4f6; /* Example: Set default background color */
+}
+
+/* 4. Optional: Define custom theme variables */
+@theme {
+  --highlight-default-default: #d6f7fe;
+  --highlight-default-hover: #94e8fe;
+  --highlight-default-selected: #94e8fe;
+
+  /* Add additional variables as needed */
+}
 ```
 
+### 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 +143,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

@@ -9,14 +9,14 @@ export type Props = Pick<AutoCompleteProps, "dropdown" | "ariaLabel" | "ariaLabe
     initialLabel?: string;
 };
 type __VLS_Props = Props;
-type __VLS_PublicProps = {
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: string;
-} & __VLS_Props;
+};
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
-    autoCompleteRef: import("vue").Ref<import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((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)> | null, import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((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)> | null>;
+    autoCompleteRef: import("vue").Ref<import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((e: "update:modelValue", value: any) => void) & ((e: "value-change", 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)> | null, import("@primevue/core").DefineComponent<AutoCompleteProps, import("primevue/autocomplete").AutoCompleteSlots, ((e: "update:modelValue", value: any) => void) & ((e: "value-change", 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)> | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (value: string) => any;
+    "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -17,5 +17,5 @@ type __VLS_Props = {
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     value: string;
     name: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLButtonElement>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -5,30 +5,86 @@ type __VLS_Props = {
      */
     length?: number;
 };
-type __VLS_PublicProps = {
+declare const expanded: import("vue").ModelRef<boolean, string, boolean, boolean>;
+declare const canExpand: import("vue").Ref<boolean, boolean>;
+declare const textId: string;
+type __VLS_PublicProps = __VLS_Props & {
     "expanded"?: boolean;
-} & __VLS_Props;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+};
+declare const __VLS_ctx: {
+    $style: Record<string, string> & __VLS_PrettifyGlobal<{} & {
+        "truncate": string;
+    }>;
+    $: import("vue").ComponentInternalInstance;
+    $data: {};
+    $props: {
+        readonly length?: number | undefined;
+        readonly expanded?: boolean | undefined;
+        readonly "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    $attrs: {
+        [x: string]: unknown;
+    };
+    $refs: {
+        [x: string]: unknown;
+    };
+    $slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+    $root: import("vue").ComponentPublicInstance | null;
+    $parent: import("vue").ComponentPublicInstance | null;
+    $host: Element | null;
+    $emit: (event: "update:expanded", value: boolean) => void;
+    $el: any;
+    $options: import("vue").ComponentOptionsBase<Readonly<__VLS_PublicProps> & Readonly<{
+        "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+    }>, {
+        expanded: typeof expanded;
+        canExpand: typeof canExpand;
+        textId: typeof textId;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:expanded": (value: boolean) => any;
+    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+        beforeCreate?: (() => void) | (() => void)[];
+        created?: (() => void) | (() => void)[];
+        beforeMount?: (() => void) | (() => void)[];
+        mounted?: (() => void) | (() => void)[];
+        beforeUpdate?: (() => void) | (() => void)[];
+        updated?: (() => void) | (() => void)[];
+        activated?: (() => void) | (() => void)[];
+        deactivated?: (() => void) | (() => void)[];
+        beforeDestroy?: (() => void) | (() => void)[];
+        beforeUnmount?: (() => void) | (() => void)[];
+        destroyed?: (() => void) | (() => void)[];
+        unmounted?: (() => void) | (() => void)[];
+        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
     };
-    refs: {
-        textContent: HTMLDivElement;
+    $forceUpdate: () => void;
+    $nextTick: typeof import("vue").nextTick;
+    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    length?: number;
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+    expanded: boolean;
+    canExpand: boolean;
+    textId: typeof textId;
+    $primevue: {
+        config: import("@primevue/core").PrimeVueConfiguration;
     };
-    rootEl: HTMLDivElement;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:expanded': (value: boolean) => any;
+    "update:expanded": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
-    textContent: HTMLDivElement;
-}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,16 +1,13 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLButtonElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-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>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,27 +1,51 @@
+import MaterialSymbolsExpandCircleDownRounded from "~icons/material-symbols/expand-circle-down-rounded";
+import MaterialSymbolsExpandCircleDownOutlineRounded from "~icons/material-symbols/expand-circle-down-outline-rounded";
+import MaterialSymbolsExpandCircleUpRounded from "~icons/material-symbols/expand-circle-up-rounded";
+import MaterialSymbolsExpandCircleUpOutlineRounded from "~icons/material-symbols/expand-circle-up-outline-rounded";
+import Accordion from "primevue/accordion";
+import AccordionPanel from "primevue/accordionpanel";
+import AccordionHeader from "primevue/accordionheader";
+import AccordionContent from "primevue/accordioncontent";
+declare const isHovered: import("vue").Ref<boolean, boolean>;
 type __VLS_Props = {
     headerCollapsed: string;
     headerExpanded: string;
 };
-type __VLS_PublicProps = {
+declare const activePanel: import("vue").WritableComputedRef<"0" | "", "0" | "">;
+declare const accordionHeaderClasses = "flex flex-row space-x-8 py-24 items-center";
+type __VLS_PublicProps = __VLS_Props & {
     modelValue?: boolean;
-} & __VLS_Props;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_34: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_34) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+    MaterialSymbolsExpandCircleDownRounded: typeof MaterialSymbolsExpandCircleDownRounded;
+    MaterialSymbolsExpandCircleDownOutlineRounded: typeof MaterialSymbolsExpandCircleDownOutlineRounded;
+    MaterialSymbolsExpandCircleUpRounded: typeof MaterialSymbolsExpandCircleUpRounded;
+    MaterialSymbolsExpandCircleUpOutlineRounded: typeof MaterialSymbolsExpandCircleUpOutlineRounded;
+    Accordion: typeof Accordion;
+    AccordionPanel: typeof AccordionPanel;
+    AccordionHeader: typeof AccordionHeader;
+    AccordionContent: typeof AccordionContent;
+    isHovered: typeof isHovered;
+    activePanel: typeof activePanel;
+    accordionHeaderClasses: typeof accordionHeaderClasses;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (value: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };