@oneclick.dev/cms-kit 0.0.1 → 0.0.3

package/components/ui/command/CommandGroup.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import type { ListboxGroupProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
-import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
-import { provideCommandGroupContext, useCommand } from '.'
-
-const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes['class']
-  heading?: string
-}>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const { allGroups, filterState } = useCommand()
-const id = useId()
-
-const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
-
-provideCommandGroupContext({ id })
-onMounted(() => {
-  if (!allGroups.value.has(id))
-    allGroups.value.set(id, new Set())
-})
-onUnmounted(() => {
-  allGroups.value.delete(id)
-})
-</script>
-
-<template>
-  <ListboxGroup
-    v-bind="delegatedProps"
-    :id="id"
-    data-slot="command-group"
-    :class="cn('text-foreground overflow-hidden p-1', props.class)"
-    :hidden="isRender ? undefined : true"
-  >
-    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-      {{ heading }}
-    </ListboxGroupLabel>
-    <slot />
-  </ListboxGroup>
-</template>

package/components/ui/command/CommandInput.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Search } from 'lucide-vue-next'
-import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { useCommand } from '.'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes['class']
-}>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-
-const { filterState } = useCommand()
-</script>
-
-<template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex h-12 items-center gap-2 border-b px-3"
-  >
-    <Search class="size-4 shrink-0 opacity-50" />
-    <ListboxFilter
-      v-bind="{ ...forwardedProps, ...$attrs }"
-      v-model="filterState.search"
-      data-slot="command-input"
-      auto-focus
-      :class="cn('placeholder:text-muted-foreground flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
-    />
-  </div>
-</template>

package/components/ui/command/CommandItem.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { useCurrentElement } from '@vueuse/core'
-import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
-import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
-import { useCommand, useCommandGroup } from '.'
-
-const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ListboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-
-const id = useId()
-const { filterState, allItems, allGroups } = useCommand()
-const groupContext = useCommandGroup()
-
-const isRender = computed(() => {
-  if (!filterState.search) {
-    return true;
-  }
-  else {
-    const filteredCurrentItem = filterState.filtered.items.get(id)
-    // If the filtered items is undefined means not in the all times map yet
-    // Do the first render to add into the map
-    if (filteredCurrentItem === undefined) {
-      return true;
-    }
-
-    // Check with filter
-    return filteredCurrentItem > 0;
-  }
-})
-
-const itemRef = ref()
-const currentElement = useCurrentElement(itemRef)
-onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return
-
-  // textValue to perform filter
-  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
-
-  const groupId = groupContext?.id
-  if (groupId) {
-    if (!allGroups.value.has(groupId)) {
-      allGroups.value.set(groupId, new Set([id]))
-    }
-    else {
-      allGroups.value.get(groupId)?.add(id)
-    }
-  }
-})
-onUnmounted(() => {
-  allItems.value.delete(id)
-})
-</script>
-
-<template>
-  <ListboxItem
-    v-if="isRender"
-    v-bind="forwarded"
-    :id="id"
-    ref="itemRef"
-    data-slot="command-item"
-    :class="cn(`data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-3 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
-    @select="() => {
-      filterState.search = ''
-    }"
-  >
-    <slot />
-  </ListboxItem>
-</template>

package/components/ui/command/CommandList.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { ListboxContentProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { ListboxContent, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ListboxContent
-    data-slot="command-list"
-    v-bind="forwarded"
-    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
-  >
-    <div role="presentation">
-      <slot />
-    </div>
-  </ListboxContent>
-</template>

package/components/ui/command/CommandSeparator.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { SeparatorProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { Separator } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <Separator
-    data-slot="command-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 h-px', props.class)"
-  >
-    <slot />
-  </Separator>
-</template>

package/components/ui/command/CommandShortcut.vue

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

package/components/ui/command/index.ts

@@ -1,25 +0,0 @@
-import type { Ref } from 'vue'
-import { createContext } from 'reka-ui'
-
-export { default as Command } from './Command.vue'
-export { default as CommandDialog } from './CommandDialog.vue'
-export { default as CommandEmpty } from './CommandEmpty.vue'
-export { default as CommandGroup } from './CommandGroup.vue'
-export { default as CommandInput } from './CommandInput.vue'
-export { default as CommandItem } from './CommandItem.vue'
-export { default as CommandList } from './CommandList.vue'
-export { default as CommandSeparator } from './CommandSeparator.vue'
-export { default as CommandShortcut } from './CommandShortcut.vue'
-
-export const [useCommand, provideCommandContext] = createContext<{
-  allItems: Ref<Map<string, string>>
-  allGroups: Ref<Map<string, Set<string>>>
-  filterState: {
-    search: string
-    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
-  }
-}>('Command')
-
-export const [useCommandGroup, provideCommandGroupContext] = createContext<{
-  id?: string
-}>('CommandGroup')

package/components/ui/context-menu/ContextMenu.vue

@@ -1,18 +0,0 @@
-<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
-    data-slot="context-menu"
-    v-bind="forwarded"
-  >
-    <slot />
-  </ContextMenuRoot>
-</template>

package/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Check } from 'lucide-vue-next'
-import {
-  ContextMenuCheckboxItem,
-  type ContextMenuCheckboxItemEmits,
-  type ContextMenuCheckboxItemProps,
-  ContextMenuItemIndicator,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ContextMenuCheckboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuCheckboxItem
-    data-slot="context-menu-checkbox-item"
-    v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <ContextMenuItemIndicator>
-        <Check class="size-4" />
-      </ContextMenuItemIndicator>
-    </span>
-    <slot />
-  </ContextMenuCheckboxItem>
-</template>

package/components/ui/context-menu/ContextMenuContent.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  ContextMenuContent,
-  type ContextMenuContentEmits,
-  type ContextMenuContentProps,
-  ContextMenuPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ContextMenuContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuPortal>
-    <ContextMenuContent
-      data-slot="context-menu-content"
-      v-bind="forwarded"
-      :class="cn(
-        'bg-popover text-popover-foreground 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 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border border-popover-border p-1 shadow-md',
-        props.class,
-      )"
-    >
-      <slot />
-    </ContextMenuContent>
-  </ContextMenuPortal>
-</template>

package/components/ui/context-menu/ContextMenuGroup.vue

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

package/components/ui/context-menu/ContextMenuItem.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  ContextMenuItem,
-  type ContextMenuItemEmits,
-  type ContextMenuItemProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<ContextMenuItemProps & {
-  class?: HTMLAttributes['class']
-  inset?: boolean
-  variant?: 'default' | 'destructive'
-}>(), {
-  variant: 'default',
-})
-const emits = defineEmits<ContextMenuItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuItem
-    data-slot="context-menu-item"
-    :data-inset="inset ? '' : undefined"
-    :data-variant="variant"
-    v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <slot />
-  </ContextMenuItem>
-</template>

package/components/ui/context-menu/ContextMenuLabel.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ContextMenuLabel
-    data-slot="context-menu-label"
-    :data-inset="inset ? '' : undefined"
-    v-bind="delegatedProps"
-    :class="cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
-  >
-    <slot />
-  </ContextMenuLabel>
-</template>

package/components/ui/context-menu/ContextMenuPortal.vue

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

package/components/ui/context-menu/ContextMenuRadioGroup.vue

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

package/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Circle } from 'lucide-vue-next'
-import {
-  ContextMenuItemIndicator,
-  ContextMenuRadioItem,
-  type ContextMenuRadioItemEmits,
-  type ContextMenuRadioItemProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ContextMenuRadioItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuRadioItem
-    data-slot="context-menu-radio-item"
-    v-bind="forwarded"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <ContextMenuItemIndicator>
-        <Circle class="size-2 fill-current" />
-      </ContextMenuItemIndicator>
-    </span>
-    <slot />
-  </ContextMenuRadioItem>
-</template>

package/components/ui/context-menu/ContextMenuSeparator.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  ContextMenuSeparator,
-  type ContextMenuSeparatorProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ContextMenuSeparator
-    data-slot="context-menu-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
-  />
-</template>

package/components/ui/context-menu/ContextMenuShortcut.vue

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

package/components/ui/context-menu/ContextMenuSub.vue

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

package/components/ui/context-menu/ContextMenuSubContent.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  ContextMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuSubContent
-    data-slot="context-menu-sub-content"
-    v-bind="forwarded"
-    :class="
-      cn(
-        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </ContextMenuSubContent>
-</template>

package/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { ChevronRight } from 'lucide-vue-next'
-import {
-  ContextMenuSubTrigger,
-  type ContextMenuSubTriggerProps,
-  useForwardProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <ContextMenuSubTrigger
-    data-slot="context-menu-sub-trigger"
-    :data-inset="inset ? '' : undefined"
-    v-bind="forwardedProps"
-    :class="cn(
-      `focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
-      props.class,
-    )"
-  >
-    <slot />
-    <ChevronRight class="ml-auto" />
-  </ContextMenuSubTrigger>
-</template>