@edgedev/create-edge-app 1.0.40 → 1.0.42

package/components/ui/menubar/MenubarSub.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub v-bind="forwarded">
+    <slot />
+  </MenubarSub>
+</template>

package/components/ui/menubar/MenubarSubContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  MenubarPortal,
+  MenubarSubContent,
+  type MenubarSubContentEmits,
+  type MenubarSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>

package/components/ui/menubar/MenubarSubTrigger.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSubTrigger
+    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" />
+  </MenubarSubTrigger>
+</template>

package/components/ui/menubar/MenubarTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>

package/components/ui/menubar/index.ts

@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'

package/components/ui/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuRoot,
+  type NavigationMenuRootEmits,
+  type NavigationMenuRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>

package/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuContent,
+  type NavigationMenuContentEmits,
+  type NavigationMenuContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>

package/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>

package/components/ui/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>

package/components/ui/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  NavigationMenuLink,
+  type NavigationMenuLinkEmits,
+  type NavigationMenuLinkProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>

package/components/ui/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

package/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuTrigger,
+  type NavigationMenuTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { navigationMenuTriggerStyle } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>

package/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  NavigationMenuViewport,
+  type NavigationMenuViewportProps,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>

package/components/ui/navigation-menu/index.ts

@@ -0,0 +1,12 @@
+import { cva } from 'class-variance-authority'
+
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+)

package/components/ui/number-field/NumberField.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+    <slot />
+  </NumberFieldRoot>
+</template>

package/components/ui/number-field/NumberFieldContent.vue

@@ -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>
+  <div :class="cn('relative', props.class)">
+    <slot />
+  </div>
+</template>

package/components/ui/number-field/NumberFieldDecrement.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'radix-vue'
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { Minus } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>

package/components/ui/number-field/NumberFieldIncrement.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'radix-vue'
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>

package/components/ui/number-field/NumberFieldInput.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { NumberFieldInput } from 'radix-vue'
+import { cn } from '@/lib/utils'
+</script>
+
+<template>
+  <NumberFieldInput :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')" />
+</template>

package/components/ui/number-field/index.ts

@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldContent } from './NumberFieldContent.vue'

package/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
+    <slot>
+      <MoreHorizontal />
+    </slot>
+  </PaginationEllipsis>
+</template>

package/components/ui/pagination/PaginationFirst.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
+import { ChevronsLeft } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsLeft class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>

package/components/ui/pagination/PaginationLast.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationLast, type PaginationLastProps } from 'radix-vue'
+import { ChevronsRight } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsRight class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>

package/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationNext, type PaginationNextProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronRight class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>

package/components/ui/pagination/PaginationPrev.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronLeft class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>

package/components/ui/pagination/index.ts

@@ -0,0 +1,10 @@
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+} from 'radix-vue'
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'