From 81197d1e023300fa34d4b85aa8c02115a6c2b766 Mon Sep 17 00:00:00 2001 From: zernonia <59365435+zernonia@users.noreply.github.com> Date: Wed, 23 Aug 2023 18:12:48 +0800 Subject: [PATCH] feat: dialog, alertdialog (#9) * feat: dialog * feat: alert-dialog * chore: add demo --- .eslintrc.cjs | 1 + apps/www/src/App.vue | 8 +- .../default/examples/AlertDialogDemo.vue | 37 ++++++++ .../registry/default/examples/DialogDemo.vue | 51 ++++++++++ .../lib/registry/default/ui/alert-dialog.ts | 92 +++++++++++++++++++ .../www/src/lib/registry/default/ui/dialog.ts | 78 ++++++++++++++++ 6 files changed, 266 insertions(+), 1 deletion(-) create mode 100644 apps/www/src/lib/registry/default/examples/AlertDialogDemo.vue create mode 100644 apps/www/src/lib/registry/default/examples/DialogDemo.vue create mode 100644 apps/www/src/lib/registry/default/ui/alert-dialog.ts create mode 100644 apps/www/src/lib/registry/default/ui/dialog.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 9466ea4a..5478e79c 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -6,6 +6,7 @@ module.exports = { extends: '@antfu', rules: { + 'vue/one-component-per-file': 'off', 'vue/no-reserved-component-names': 'off', 'symbol-description': 'off', 'no-console': 'warn', diff --git a/apps/www/src/App.vue b/apps/www/src/App.vue index 6a304036..4f97a104 100644 --- a/apps/www/src/App.vue +++ b/apps/www/src/App.vue @@ -1,12 +1,18 @@ diff --git a/apps/www/src/lib/registry/default/examples/AlertDialogDemo.vue b/apps/www/src/lib/registry/default/examples/AlertDialogDemo.vue new file mode 100644 index 00000000..dac926aa --- /dev/null +++ b/apps/www/src/lib/registry/default/examples/AlertDialogDemo.vue @@ -0,0 +1,37 @@ + + + diff --git a/apps/www/src/lib/registry/default/examples/DialogDemo.vue b/apps/www/src/lib/registry/default/examples/DialogDemo.vue new file mode 100644 index 00000000..1e1aee03 --- /dev/null +++ b/apps/www/src/lib/registry/default/examples/DialogDemo.vue @@ -0,0 +1,51 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog.ts b/apps/www/src/lib/registry/default/ui/alert-dialog.ts new file mode 100644 index 00000000..ca50c386 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/alert-dialog.ts @@ -0,0 +1,92 @@ +import { defineComponent, h } from 'vue' +import { + AlertDialogAction as AlertDialogActionPrimitive, type AlertDialogActionProps, + AlertDialogCancel as AlertDialogCancelPrimitive, type AlertDialogCancelProps, + AlertDialogContent as AlertDialogContentPrimitive, type AlertDialogContentProps, + AlertDialogDescription as AlertDialogDescriptionPrimitive, type AlertDialogDescriptionProps, + AlertDialogOverlay as AlertDialogOverlayPrimitive, type AlertDialogOverlayProps, + AlertDialogPortal as AlertDialogPortalPrimitive, + AlertDialogRoot, AlertDialogTitle as AlertDialogTitlePrimitive, + type AlertDialogTitleProps, AlertDialogTrigger as AlertDialogTriggerPrimitive, +} from 'radix-vue' +import { cn } from '@/utils' +import { buttonVariants } from '@/registry/default/ui/button' + +export const AlertDialog = AlertDialogRoot +export const AlertDialogTrigger = AlertDialogTriggerPrimitive +export const AlertDialogPortal = AlertDialogPortalPrimitive + +export const AlertDialogOverlay = defineComponent( + (props, { attrs, slots }) => { + return () => h(AlertDialogOverlayPrimitive, + { class: cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', attrs.class), ...props }, + slots, + ) + }, { name: 'AlertDialogOverlay' }, +) + +export const AlertDialogContent = defineComponent( + (props, { attrs, slots }) => { + return () => h(AlertDialogPortal, () => [ + h(AlertDialogOverlay), + h(AlertDialogContentPrimitive, { + class: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full', attrs.class ?? ''), + ...props, + }, slots), + ]) + }, { name: 'AlertDialogContent' }, +) + +export const AlertDialogHeader = defineComponent( + (_props, { attrs, slots }) => { + return () => h('div', + { class: cn('flex flex-col space-y-2 text-center sm:text-left', attrs.class) }, + slots, + ) + }, { name: 'AlertDialogHeader' }, +) + +export const AlertDialogFooter = defineComponent( + (_props, { attrs, slots }) => { + return () => h('div', + { class: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', attrs.class) }, + slots, + ) + }, { name: 'AlertDialogFooter' }, +) + +export const AlertDialogTitle = defineComponent( + (props, { attrs, slots }) => { + return () => h(AlertDialogTitlePrimitive, + { class: cn('text-lg font-semibold', attrs.class), ...props }, + slots, + ) + }, { name: 'AlertDialogTitle' }, +) + +export const AlertDialogDescription = defineComponent( + (props, { attrs, slots }) => { + return () => h(AlertDialogDescriptionPrimitive, + { class: cn('text-sm text-muted-foreground', attrs.class), ...props }, + slots, + ) + }, { name: 'AlertDialogDescription' }, +) + +export const AlertDialogAction = defineComponent( + (props, { attrs, slots }) => { + return () => h(AlertDialogActionPrimitive, + { class: cn(buttonVariants(), attrs.class), ...props }, + slots, + ) + }, { name: 'AlertDialogAction' }, +) + +export const AlertDialogCancel = defineComponent( + (props, { attrs, slots }) => { + return () => h(AlertDialogCancelPrimitive, + { class: cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', attrs.class), ...props }, + slots, + ) + }, { name: 'AlertDialogCancel' }, +) diff --git a/apps/www/src/lib/registry/default/ui/dialog.ts b/apps/www/src/lib/registry/default/ui/dialog.ts new file mode 100644 index 00000000..5388f061 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/dialog.ts @@ -0,0 +1,78 @@ +import { defineComponent, h } from 'vue' +import { + DialogClose, DialogContent as DialogContentPrimitive, type DialogContentProps, + DialogDescription as DialogDescriptionPrimitive, type DialogDescriptionProps, + DialogOverlay as DialogOverlayPrimitive, type DialogOverlayProps, + DialogPortal as DialogPortalPrimitive, DialogRoot, + DialogTitle as DialogTitlePrimitive, type DialogTitleProps, + DialogTrigger as DialogTriggerPrimitive, +} from 'radix-vue' +import { X } from 'lucide-vue-next' +import { cn } from '@/utils' + +export const Dialog = DialogRoot +export const DialogTrigger = DialogTriggerPrimitive +export const DialogPortal = DialogPortalPrimitive + +export const DialogOverlay = defineComponent( + (props, { attrs, slots }) => { + return () => h(DialogOverlayPrimitive, + { class: cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', attrs.class), ...props }, + slots, + ) + }, { name: 'DialogOverlay' }, +) + +export const DialogContent = defineComponent( + (props, { attrs, slots }) => { + return () => h(DialogPortal, () => [ + h(DialogOverlay), + h(DialogContentPrimitive, { + class: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full', attrs.class ?? ''), + ...props, + }, () => [ + slots.default(), + h(DialogClose, + { class: 'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground' }, + () => [h(X, { class: 'h-4 w-4' }), h('span', { class: 'sr-only' }, 'Close')], + ), + ]), + ]) + }, { name: 'DialogContent' }, +) + +export const DialogHeader = defineComponent( + (_props, { attrs, slots }) => { + return () => h('div', + { class: cn('flex flex-col space-y-1.5 text-center sm:text-left', attrs.class) }, + slots, + ) + }, { name: 'DialogHeader' }, +) + +export const DialogFooter = defineComponent( + (_props, { attrs, slots }) => { + return () => h('div', + { class: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', attrs.class) }, + slots, + ) + }, { name: 'DialogFooter' }, +) + +export const DialogTitle = defineComponent( + (props, { attrs, slots }) => { + return () => h(DialogTitlePrimitive, + { class: cn('text-lg font-semibold leading-none tracking-tight', attrs.class), ...props }, + slots, + ) + }, { name: 'DialogTitle' }, +) + +export const DialogDescription = defineComponent( + (props, { attrs, slots }) => { + return () => h(DialogDescriptionPrimitive, + { class: cn('text-lg font-semibold leading-none tracking-tight', attrs.class), ...props }, + slots, + ) + }, { name: 'DialogDescription' }, +)