diff --git a/.storybook/preview.ts b/.storybook/preview.ts index b01d9de..5090dd5 100644 --- a/.storybook/preview.ts +++ b/.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) }); diff --git a/src/primevue/confirmDialog/confirmDialog.stories.ts b/src/primevue/confirmDialog/confirmDialog.stories.ts new file mode 100644 index 0000000..f530a17 --- /dev/null +++ b/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 = { + component: ConfirmDialog, + tags: ["autodocs"], +}; + +export default meta; +type Story = StoryObj; + +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` + + + `, + }), +}; \ No newline at end of file diff --git a/src/primevue/confirmDialog/confirmDialog.ts b/src/primevue/confirmDialog/confirmDialog.ts new file mode 100644 index 0000000..ca853be --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/primevue/index.ts b/src/primevue/index.ts index 5aad540..fb6365e 100644 --- a/src/primevue/index.ts +++ b/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, };