Skip to content

Commit 51cbeab

Browse files
habibaymanhabibayman
authored
Merge branch 'dev' into feat/styled-popover
2 parents 320aabe + 30ca2a3 commit 51cbeab

14 files changed

Lines changed: 389 additions & 0 deletions

File tree

‎app/assets/css/main.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
--destructive: #f4212e;
1717
--popover: 0 0% 100%;
1818
--popover-foreground: 222.2 84% 4.9%;
19+
--dialog-backdrop: rgba(91, 112, 131, 0.4);
1920
}
2021

2122
.dark {
@@ -49,6 +50,7 @@
4950
--color-popover-foreground: hsl(var(--popover-foreground));
5051
--animate-duration: 150ms;
5152
--animate-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
53+
--color-dialog-backdrop: var(--dialog-backdrop);
5254
}
5355

5456
@layer base {

‎app/components/ui/dialog/Dialog.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
3+
import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
4+
5+
const props = defineProps<DialogRootProps>();
6+
const emits = defineEmits<DialogRootEmits>();
7+
8+
const forwarded = useForwardPropsEmits(props, emits);
9+
</script>
10+
11+
<template>
12+
<DialogRoot data-slot="dialog" v-bind="forwarded">
13+
<slot />
14+
</DialogRoot>
15+
</template>

‎app/components/ui/dialog/DialogClose.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
import type { DialogCloseProps } from 'reka-ui';
3+
import { DialogClose } from 'reka-ui';
4+
5+
const props = defineProps<DialogCloseProps>();
6+
</script>
7+
8+
<template>
9+
<DialogClose data-slot="dialog-close" v-bind="props">
10+
<slot />
11+
</DialogClose>
12+
</template>

‎app/components/ui/dialog/DialogContent.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script setup lang="ts">
2+
import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
3+
import type { HTMLAttributes } from 'vue';
4+
import { reactiveOmit } from '@vueuse/core';
5+
import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
6+
import { cn } from '@/utils';
7+
import DialogOverlay from './DialogOverlay.vue';
8+
import Button from '@/components/ui/Button.vue';
9+
10+
const props = defineProps<
11+
DialogContentProps & { class?: HTMLAttributes['class']; headerClass?: HTMLAttributes['class'] }
12+
>();
13+
const emits = defineEmits<DialogContentEmits>();
14+
15+
const delegatedProps = reactiveOmit(props, 'class', 'headerClass');
16+
17+
const forwarded = useForwardPropsEmits(delegatedProps, emits);
18+
</script>
19+
20+
<template>
21+
<DialogPortal>
22+
<DialogOverlay />
23+
<DialogContent
24+
data-slot="dialog-content"
25+
v-bind="forwarded"
26+
:class="
27+
cn(
28+
'bg-background 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 fixed top-[50%] left-[50%] z-50 flex h-full w-full translate-x-[-50%] translate-y-[-50%] flex-col border shadow-lg duration-200 sm:h-160 sm:max-w-xl sm:rounded-2xl',
29+
props.class,
30+
)
31+
"
32+
>
33+
<div class="relative flex flex-row items-center justify-start gap-2 p-2">
34+
<DialogClose data-slot="dialog-close" as-child>
35+
<Button variant="ghost-default" size="icon-xs" class="absolute inset-2">
36+
<Icon name="lucide:x" class="size-5" />
37+
<span class="sr-only">{{ $t('ui.close') }}</span>
38+
</Button>
39+
</DialogClose>
40+
<div
41+
v-if="$slots.header"
42+
:class="cn('flex h-8 w-full items-center ps-10 text-lg font-medium', props.headerClass)"
43+
>
44+
<slot name="header" />
45+
</div>
46+
</div>
47+
48+
<div class="flex h-full w-full flex-col gap-4 px-6 pb-6">
49+
<slot />
50+
</div>
51+
</DialogContent>
52+
</DialogPortal>
53+
</template>

‎app/components/ui/dialog/DialogDescription.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
import type { DialogDescriptionProps } from 'reka-ui';
3+
import type { HTMLAttributes } from 'vue';
4+
import { reactiveOmit } from '@vueuse/core';
5+
import { DialogDescription, useForwardProps } from 'reka-ui';
6+
import { cn } from '@/utils';
7+
8+
const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
9+
10+
const delegatedProps = reactiveOmit(props, 'class');
11+
12+
const forwardedProps = useForwardProps(delegatedProps);
13+
</script>
14+
15+
<template>
16+
<DialogDescription
17+
data-slot="dialog-description"
18+
v-bind="forwardedProps"
19+
:class="cn('text-muted-foreground text-sm', props.class)"
20+
>
21+
<slot />
22+
</DialogDescription>
23+
</template>

‎app/components/ui/dialog/DialogFooter.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue';
3+
import { cn } from '@/utils';
4+
5+
const props = defineProps<{ class?: HTMLAttributes['class'] }>();
6+
</script>
7+
8+
<template>
9+
<div
10+
data-slot="dialog-footer"
11+
:class="cn('flex h-fit flex-col items-center justify-center gap-4', props.class)"
12+
>
13+
<slot />
14+
</div>
15+
</template>

‎app/components/ui/dialog/DialogHeader.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
import type { HTMLAttributes } from 'vue';
3+
import { cn } from '@/utils';
4+
5+
const props = defineProps<{
6+
class?: HTMLAttributes['class'];
7+
}>();
8+
</script>
9+
10+
<template>
11+
<div
12+
data-slot="dialog-header"
13+
:class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
14+
>
15+
<slot />
16+
</div>
17+
</template>

‎app/components/ui/dialog/DialogOverlay.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup lang="ts">
2+
import type { DialogOverlayProps } from 'reka-ui';
3+
import type { HTMLAttributes } from 'vue';
4+
import { reactiveOmit } from '@vueuse/core';
5+
import { DialogOverlay } from 'reka-ui';
6+
import { cn } from '@/utils';
7+
8+
const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();
9+
10+
const delegatedProps = reactiveOmit(props, 'class');
11+
</script>
12+
13+
<template>
14+
<DialogOverlay
15+
data-slot="dialog-overlay"
16+
v-bind="delegatedProps"
17+
:class="
18+
cn(
19+
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-dialog-backdrop fixed inset-0 z-50',
20+
props.class,
21+
)
22+
"
23+
>
24+
<slot />
25+
</DialogOverlay>
26+
</template>

‎app/components/ui/dialog/DialogTitle.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
import type { DialogTitleProps } from 'reka-ui';
3+
import type { HTMLAttributes } from 'vue';
4+
import { reactiveOmit } from '@vueuse/core';
5+
import { DialogTitle, useForwardProps } from 'reka-ui';
6+
import { cn } from '@/utils';
7+
8+
const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
9+
10+
const delegatedProps = reactiveOmit(props, 'class');
11+
12+
const forwardedProps = useForwardProps(delegatedProps);
13+
</script>
14+
15+
<template>
16+
<DialogTitle
17+
data-slot="dialog-title"
18+
v-bind="forwardedProps"
19+
:class="cn('text-lg leading-none font-semibold', props.class)"
20+
>
21+
<slot />
22+
</DialogTitle>
23+
</template>

‎app/components/ui/dialog/DialogTrigger.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
import type { DialogTriggerProps } from 'reka-ui';
3+
import { DialogTrigger } from 'reka-ui';
4+
5+
const props = defineProps<DialogTriggerProps>();
6+
</script>
7+
8+
<template>
9+
<DialogTrigger data-slot="dialog-trigger" v-bind="props">
10+
<slot />
11+
</DialogTrigger>
12+
</template>

0 commit comments

Comments
 (0)