@digitalservicebund/ris-ui 1.0.1 → 1.2.0

package/README.md

@@ -19,7 +19,7 @@ npm install vue primevue tailwindcss
 npm install @digitalservicebund/ris-ui
 ```
 
-## Usage
+### Vue setup
 
 Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`):
 
@@ -27,16 +27,70 @@ Import and apply the RIS UI theme, styling, and fonts where you set up your appl
   // main.ts
   import { createApp } from "vue";
   import PrimeVue from "primevue/config";
-+ import { RisUiTheme } from "@digitalservicebund/ris-ui/primevue";
++ 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, {
 +   unstyled: true,
 +   pt: RisUiTheme,
++   locale: RisUiLocale.deDE
   })
 ```
 
+### Nuxt setup
+
+If using Nuxt, skip the Vue setup above.
+
+Install the Nuxt PrimeVue module:
+
+```sh
+npm install @primevue/nuxt-module
+```
+
+Add the PrimeVue module and configure it in `nuxt.config.ts`:
+
+```diff
+  // nuxt.config.ts
+  export default defineNuxtConfig({
+    // your other configuration
+    modules: [
++     "@primevue/nuxt-module",
+    ],
++   primevue: {
++      usePrimeVue: false, // configured in plugins/ris-ui.ts
++   },
+  })
+```
+
+Add a new Nuxt plugin to configure PrimeVue:
+
+```typescript
+// plugins/ris-ui.ts
+import { RisUiTheme } from "@digitalservicebund/ris-ui/primevue";
+import PrimeVue from "primevue/config";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(PrimeVue, {
+    pt: RisUiTheme,
+    unstyled: true,
+  });
+});
+```
+
+Finally, add the styles (e.g. `assets/main.css`):
+
+```css
+@import "@digitalservicebund/ris-ui/primevue/style.css";
+@import "@digitalservicebund/ris-ui/fonts.css";
+
+/* Your other CSS */
+```
+
+If not using Tailwind, you may also add these styles directly to the `css` section of `nuxt.config.ts`.
+
+## Tailwind usage
+
 If you want, also install the Tailwind preset (for colors, spacings, etc.) and plugin (for typography classes, etc.):
 
 ```diff
@@ -51,6 +105,25 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p
   };
 ```
 
+To avoid issues with conflicting `@layer` directives, make sure to integrate the `postcss-import` module in your PostCSS configuration:
+
+See https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files
+
+### Using Nuxt
+
+You may add the `postcss-import` module to your `nuxt.config.ts` file:
+
+```diff
+  // nuxt.config.ts
+  postcss: {
+    plugins: {
++     "postcss-import": {},
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+```
+
 ## 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.
@@ -157,8 +230,8 @@ To release a new version, run the ["Release to npm"](https://github.com/digitals
 - Create a Git tag and GitHub release
 - Generate a changelog based on the commits since the last release
 
-Releases are created automatically by [semantic-release](https://github.com/semantic-release/semantic-release?tab=readme-ov-file). Please refer to their documentation to learn more about how version numbers are inferred and how changelogs are created. 
+Releases are created automatically by [semantic-release](https://github.com/semantic-release/semantic-release?tab=readme-ov-file). Please refer to their documentation to learn more about how version numbers are inferred and how changelogs are created.
 
 ## Contributing
 
-See [CONTRIBUTING.md](./CONTRIBUTING.md).
+See [CONTRIBUTING.md](./CONTRIBUTING.md).

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

@@ -0,0 +1,20 @@
+import { type AutoCompleteProps } from "primevue/autocomplete";
+export interface AutoCompleteSuggestion {
+    id: string;
+    label: string;
+    secondaryLabel?: string;
+}
+export type Props = Pick<AutoCompleteProps, "dropdown" | "ariaLabel" | "ariaLabelledby" | "delay" | "completeOnFocus" | "optionDisabled" | "typeahead" | "scrollHeight" | "dropdownMode" | "placeholder" | "loading" | "invalid" | "disabled" | "forceSelection" | "autoOptionFocus" | "selectOnFocus"> & {
+    suggestions?: AutoCompleteSuggestion[];
+    initialLabel?: string;
+};
+declare let __VLS_typeProps: Props;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & typeof __VLS_typeProps;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (modelValue: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+import RisAutoComplete from "./RisAutoComplete.vue";
+export default RisAutoComplete;

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

@@ -0,0 +1,23 @@
+declare let __VLS_typeProps: {
+    headerCollapsed: string;
+    headerExpanded: string;
+};
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (modelValue: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+import RisSingleAccordion from "./RisSingleAccordion.vue";
+export default RisSingleAccordion;