adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-15 19:52:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

add context menus to calendar view + ui package

Browse Source
This commit is contained in:
Gregor Vostrak
2026-03-03 14:42:35 +01:00
parent 192c8c3b88
commit 452acca942
20 changed files with 705 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/packages/ui/src/context-menu/ContextMenu.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';
import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';
const props = defineProps<ContextMenuRootProps>();
const emits = defineEmits<ContextMenuRootEmits>();
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuRoot v-bind="forwarded">
<slot />
</ContextMenuRoot>
</template>

33
resources/js/packages/ui/src/context-menu/ContextMenuCheckboxItem.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup lang="ts">
import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { Check } from 'lucide-vue-next';
import { ContextMenuCheckboxItem, ContextMenuItemIndicator, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<ContextMenuCheckboxItemEmits>();
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<ContextMenuCheckboxItem
v-bind="forwarded"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
)
">
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator>
<Check class="h-4 w-4" />
</ContextMenuItemIndicator>
</span>
<slot />
</ContextMenuCheckboxItem>
</template>

29
resources/js/packages/ui/src/context-menu/ContextMenuContent.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup lang="ts">
import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { ContextMenuContent, ContextMenuPortal, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<ContextMenuContentEmits>();
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<ContextMenuPortal>
<ContextMenuContent
v-bind="forwarded"
:class="
cn(
'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class
)
">
<slot />
</ContextMenuContent>
</ContextMenuPortal>
</template>

12
resources/js/packages/ui/src/context-menu/ContextMenuGroup.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import type { ContextMenuGroupProps } from 'reka-ui';
import { ContextMenuGroup } from 'reka-ui';
const props = defineProps<ContextMenuGroupProps>();
</script>
<template>
<ContextMenuGroup v-bind="props">
<slot />
</ContextMenuGroup>
</template>

30
resources/js/packages/ui/src/context-menu/ContextMenuItem.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup lang="ts">
import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<
ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
>();
const emits = defineEmits<ContextMenuItemEmits>();
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<ContextMenuItem
v-bind="forwarded"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
props.class
)
">
<slot />
</ContextMenuItem>
</template>

23
resources/js/packages/ui/src/context-menu/ContextMenuLabel.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
import type { ContextMenuLabelProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { ContextMenuLabel } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<
ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
>();
const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>
<ContextMenuLabel
v-bind="delegatedProps"
:class="
cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', props.class)
">
<slot />
</ContextMenuLabel>
</template>

12
resources/js/packages/ui/src/context-menu/ContextMenuPortal.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup lang="ts">
import type { ContextMenuPortalProps } from 'reka-ui';
import { ContextMenuPortal } from 'reka-ui';
const props = defineProps<ContextMenuPortalProps>();
</script>
<template>
<ContextMenuPortal v-bind="props">
<slot />
</ContextMenuPortal>
</template>

15
resources/js/packages/ui/src/context-menu/ContextMenuRadioGroup.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'reka-ui';
import { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
const props = defineProps<ContextMenuRadioGroupProps>();
const emits = defineEmits<ContextMenuRadioGroupEmits>();
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuRadioGroup v-bind="forwarded">
<slot />
</ContextMenuRadioGroup>
</template>

33
resources/js/packages/ui/src/context-menu/ContextMenuRadioItem.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup lang="ts">
import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { Circle } from 'lucide-vue-next';
import { ContextMenuItemIndicator, ContextMenuRadioItem, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<ContextMenuRadioItemEmits>();
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<ContextMenuRadioItem
v-bind="forwarded"
:class="
cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
props.class
)
">
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<ContextMenuItemIndicator>
<Circle class="h-4 w-4 fill-current" />
</ContextMenuItemIndicator>
</span>
<slot />
</ContextMenuRadioItem>
</template>

17
resources/js/packages/ui/src/context-menu/ContextMenuSeparator.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
import type { ContextMenuSeparatorProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { ContextMenuSeparator } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>();
const delegatedProps = reactiveOmit(props, 'class');
</script>
<template>
<ContextMenuSeparator
v-bind="delegatedProps"
:class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
</template>

14
resources/js/packages/ui/src/context-menu/ContextMenuShortcut.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
import type { HTMLAttributes } from 'vue';
import { cn } from '@/lib/utils';
const props = defineProps<{
class?: HTMLAttributes['class'];
}>();
</script>
<template>
<span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
<slot />
</span>
</template>

15
resources/js/packages/ui/src/context-menu/ContextMenuSub.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui';
import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui';
const props = defineProps<ContextMenuSubProps>();
const emits = defineEmits<ContextMenuSubEmits>();
const forwarded = useForwardPropsEmits(props, emits);
</script>
<template>
<ContextMenuSub v-bind="forwarded">
<slot />
</ContextMenuSub>
</template>

27
resources/js/packages/ui/src/context-menu/ContextMenuSubContent.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup lang="ts">
import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>();
const emits = defineEmits<DropdownMenuSubContentEmits>();
const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<ContextMenuSubContent
v-bind="forwarded"
:class="
cn(
'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
props.class
)
">
<slot />
</ContextMenuSubContent>
</template>

31
resources/js/packages/ui/src/context-menu/ContextMenuSubTrigger.vue Normal file
View File

@@ -0,0 +1,31 @@
<script setup lang="ts">
import type { ContextMenuSubTriggerProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { ChevronRight } from 'lucide-vue-next';
import { ContextMenuSubTrigger, useForwardProps } from 'reka-ui';
import { cn } from '@/lib/utils';
const props = defineProps<
ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }
>();
const delegatedProps = reactiveOmit(props, 'class');
const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<ContextMenuSubTrigger
v-bind="forwardedProps"
:class="
cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
inset && 'pl-8',
props.class
)
">
<slot />
<ChevronRight class="ml-auto h-4 w-4" />
</ContextMenuSubTrigger>
</template>

14
resources/js/packages/ui/src/context-menu/ContextMenuTrigger.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
import type { ContextMenuTriggerProps } from 'reka-ui';
import { ContextMenuTrigger, useForwardProps } from 'reka-ui';
const props = defineProps<ContextMenuTriggerProps>();
const forwardedProps = useForwardProps(props);
</script>
<template>
<ContextMenuTrigger v-bind="forwardedProps">
<slot />
</ContextMenuTrigger>
</template>

14
resources/js/packages/ui/src/context-menu/index.ts Normal file
View File

@@ -0,0 +1,14 @@
export { default as ContextMenu } from './ContextMenu.vue';
export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue';
export { default as ContextMenuContent } from './ContextMenuContent.vue';
export { default as ContextMenuGroup } from './ContextMenuGroup.vue';
export { default as ContextMenuItem } from './ContextMenuItem.vue';
export { default as ContextMenuLabel } from './ContextMenuLabel.vue';
export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue';
export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue';
export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue';
export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue';
export { default as ContextMenuSub } from './ContextMenuSub.vue';
export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue';
export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue';
export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue';