feat(confirmDialog): adds story and preset

RISDEV-4776

.storybook/preview.ts

@@ -2,10 +2,12 @@ import { setup } from "@storybook/vue3";
 import PrimeVue from "primevue/config";
 import { RisUiTheme } from "../src/primevue";
 import "../public/fonts.css";
+import ConfirmationService from 'primevue/confirmationservice';
 
 setup((app) => {
   app.use(PrimeVue, {
     pt: RisUiTheme,
     unstyled: true,
   });
+  app.use(ConfirmationService)
 });

src/primevue/confirmDialog/confirmDialog.stories.ts

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import ConfirmDialog from "primevue/confirmdialog";
+import { html } from "@/lib/tags.ts"
+import { useConfirm } from "primevue/useconfirm";
+import Btn from "primevue/button";
+
+
+const meta: Meta<typeof ConfirmDialog> = {
+    component: ConfirmDialog,
+    tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: (args) => ({
+        components: { ConfirmDialog, Btn },
+        setup() {
+            const confirm = useConfirm();
+
+            const confirm1 = () => {
+                confirm.require({
+                    message: 'Diese Verkündung befindet sich bereits im System. Möchten Sie die bestehende Verkündung überschreiben? \n' +
+                        '\n' +
+                        'Hinweis: Bereits dokumentierte Änderungen werden ebenfalls überschrieben.',
+                    header: 'Verkündung existiert bereits',
+                    acceptProps: {
+                        label: 'Abbrechen'
+                    },
+                    rejectProps: {
+                        label: 'Überschreiben',
+                        severity: 'secondary',
+                    },
+                });
+            };
+
+            return { args, confirm1 };
+        },
+        template: html`
+            <ConfirmDialog v-bind="args"/>
+            <Btn @click="confirm1()" label="Save"/>
+        `,
+    }),
+};

src/primevue/confirmDialog/confirmDialog.ts

@@ -0,0 +1,60 @@
+import {ConfirmDialogPassThroughOptions} from "primevue/confirmdialog";
+import { tw } from "@/lib/tags.ts";
+
+const confirmDialog: ConfirmDialogPassThroughOptions = {
+    root: ({}) => {
+        const base = tw`border-2 border-blue-500 bg-red-800 shadow-lg rounded-md`;
+        return {
+            class: {
+                [base]: true,
+            },
+        };
+    },
+
+    header: ({}) => {
+        const base = tw`flex items-center gap-4 justify-start`;
+        return {
+            class: {
+                [base]: true,
+            },
+        };
+    },
+
+    icon: ({}) => {
+        const base = tw`text-2xl`;
+        return {
+            class: {
+                [base]: true,
+            },
+        };
+    },
+
+    title: ({}) => {
+        const base = tw`font-bold text-lg`;
+        return {
+            class: {
+                [base]: true,
+            },
+        };
+    },
+
+    content: ({}) => {
+        const base = tw`p-4 text-center`;
+        return {
+            class: {
+                [base]: true,
+            },
+        };
+    },
+
+    footer: ({}) => {
+        const base = tw`flex justify-end gap-4`;
+        return {
+            class: {
+                [base]: true,
+            },
+        };
+    }
+};
+
+export default confirmDialog;

src/primevue/index.ts

@@ -5,11 +5,12 @@ import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
 import password from "./password/password";
-
+import confirmDialog from "./confirmDialog/confirmDialog";
 export const RisUiTheme = {
   button,
   inputText,
   inputGroup,
   inputGroupAddon,
   password,
+  confirmDialog,
 };