@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/shadcn-ui/ui/pagination/PaginationContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PaginationListProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationList } from 'reka-ui';
+
+const props = defineProps<
+  PaginationListProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps"></slot>
+  </PaginationList>
+</template>

package/src/shadcn-ui/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { MoreHorizontal } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationEllipsis } from 'reka-ui';
+
+const props = defineProps<
+  PaginationEllipsisProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <PaginationEllipsis
+    data-slot="pagination-ellipsis"
+    v-bind="delegatedProps"
+    :class="cn('flex size-8 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+  </PaginationEllipsis>
+</template>

package/src/shadcn-ui/ui/pagination/PaginationFirst.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ButtonVariants } from '../button';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronsLeft } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationFirst, useForwardProps } from 'reka-ui';
+
+import { Button, buttonVariants } from '../button';
+
+const props = withDefaults(
+  defineProps<
+    PaginationFirstProps & {
+      class?: HTMLAttributes['class'];
+      size?: ButtonVariants['size'];
+    }
+  >(),
+  {
+    size: 'default',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <PaginationFirst
+    data-slot="pagination-first"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost', size }),
+        'gap-1 px-2.5 sm:pr-2.5',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsLeft class="size-4" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>

package/src/shadcn-ui/ui/pagination/PaginationItem.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PaginationListItemProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ButtonVariants } from '../button';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationListItem } from 'reka-ui';
+
+import { buttonVariants } from '../button';
+
+const props = withDefaults(
+  defineProps<
+    PaginationListItemProps & {
+      class?: HTMLAttributes['class'];
+      isActive?: boolean;
+      size?: ButtonVariants['size'];
+    }
+  >(),
+  {
+    size: 'icon',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive');
+</script>
+
+<template>
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </PaginationListItem>
+</template>

package/src/shadcn-ui/ui/pagination/PaginationLast.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ButtonVariants } from '../button';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronsRight } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationLast, useForwardProps } from 'reka-ui';
+
+import { Button, buttonVariants } from '../button';
+
+const props = withDefaults(
+  defineProps<
+    PaginationLastProps & {
+      class?: HTMLAttributes['class'];
+      size?: ButtonVariants['size'];
+    }
+  >(),
+  {
+    size: 'default',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <PaginationLast
+    data-slot="pagination-last"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost', size }),
+        'gap-1 px-2.5 sm:pr-2.5',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsRight class="size-4" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>

package/src/shadcn-ui/ui/pagination/PaginationNext.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ButtonVariants } from '../button';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronRightIcon } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationNext, useForwardProps } from 'reka-ui';
+
+import { Button, buttonVariants } from '../button';
+
+const props = withDefaults(
+  defineProps<
+    PaginationNextProps & {
+      class?: HTMLAttributes['class'];
+      size?: ButtonVariants['size'];
+    }
+  >(),
+  {
+    size: 'default',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <PaginationNext
+    data-slot="pagination-next"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost', size }),
+        'gap-1 px-2.5 sm:pr-2.5',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronRightIcon class="size-4" />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>

package/src/shadcn-ui/ui/pagination/PaginationPrevious.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ButtonVariants } from '../button';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronLeft } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationPrev, useForwardProps } from 'reka-ui';
+
+import { Button, buttonVariants } from '../button';
+
+const props = withDefaults(
+  defineProps<
+    PaginationPrevProps & {
+      class?: HTMLAttributes['class'];
+      size?: ButtonVariants['size'];
+    }
+  >(),
+  {
+    size: 'default',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <PaginationPrev
+    data-slot="pagination-previous"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost', size }),
+        'gap-1 px-2.5 sm:pr-2.5',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronLeft class="size-4" />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>

package/src/shadcn-ui/ui/pagination/index.ts

@@ -0,0 +1,8 @@
+export { default as Pagination } from './Pagination.vue';
+export { default as PaginationContent } from './PaginationContent.vue';
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
+export { default as PaginationFirst } from './PaginationFirst.vue';
+export { default as PaginationItem } from './PaginationItem.vue';
+export { default as PaginationLast } from './PaginationLast.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+export { default as PaginationPrevious } from './PaginationPrevious.vue';

package/src/shadcn-ui/ui/pin-input/PinInput.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts" generic="Type extends 'text' | 'number' = 'text'">
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<PinInputRootProps<Type> & { class?: HTMLAttributes['class'] }>(),
+  {
+    otp: true,
+  },
+);
+const emits = defineEmits<PinInputRootEmits<Type>>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PinInputRoot
+    :otp="props.otp"
+    data-slot="pin-input"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </PinInputRoot>
+</template>

package/src/shadcn-ui/ui/pin-input/PinInputGroup.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { Primitive, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  PrimitiveProps & { class?: HTMLAttributes['class'] }
+>();
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <Primitive
+    data-slot="pin-input-group"
+    v-bind="forwardedProps"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot></slot>
+  </Primitive>
+</template>

package/src/shadcn-ui/ui/pin-input/PinInputSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+
+import { Minus } from '@lucide/vue';
+import { Primitive, useForwardProps } from 'reka-ui';
+
+const props = defineProps<PrimitiveProps>();
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <Primitive data-slot="pin-input-separator" v-bind="forwardedProps">
+    <slot>
+      <Minus />
+    </slot>
+  </Primitive>
+</template>

package/src/shadcn-ui/ui/pin-input/PinInputSlot.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { PinInputInput, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  PinInputInputProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <PinInputInput
+    data-slot="pin-input-slot"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input focus:border-ring focus:ring-ring/50 focus:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:focus:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus:aria-invalid:border-destructive relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none text-center first:rounded-l-md first:border-l last:rounded-r-md focus:z-10 focus:ring-3',
+        props.class,
+      )
+    "
+  />
+</template>

package/src/shadcn-ui/ui/pin-input/index.ts

@@ -0,0 +1,4 @@
+export { default as PinInput } from './PinInput.vue';
+export { default as PinInputGroup } from './PinInputGroup.vue';
+export { default as PinInputSeparator } from './PinInputSeparator.vue';
+export { default as PinInputSlot } from './PinInputSlot.vue';

package/src/shadcn-ui/ui/popover/Popover.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+    <slot v-bind="slotProps"></slot>
+  </PopoverRoot>
+</template>

package/src/shadcn-ui/ui/popover/PopoverAnchor.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from 'reka-ui';
+
+import { PopoverAnchor } from 'reka-ui';
+
+const props = defineProps<PopoverAnchorProps>();
+</script>
+
+<template>
+  <PopoverAnchor data-slot="popover-anchor" v-bind="props">
+    <slot></slot>
+  </PopoverAnchor>
+</template>

package/src/shadcn-ui/ui/popover/PopoverContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...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 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/src/shadcn-ui/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+
+import { PopoverTrigger } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger data-slot="popover-trigger" v-bind="props">
+    <slot></slot>
+  </PopoverTrigger>
+</template>

package/src/shadcn-ui/ui/popover/index.ts

@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverAnchor } from './PopoverAnchor.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';

package/src/shadcn-ui/ui/progress/Progress.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { ProgressRootEmits, ProgressRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { computed } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { ProgressIndicator, ProgressRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  ProgressRootProps & { class?: HTMLAttributes['class'] }
+>();
+
+const emits = defineEmits<ProgressRootEmits>();
+
+/** ProgressRoot 对非法 max 的回退值（max 必须为正数）。 */
+const DEFAULT_MAX = 100;
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+/**
+ * ProgressRoot 会把非法 max（0、负数、NaN、Infinity）回退为 100；这里用
+ * 同一规则归一化后同时用于 root 与指示条 transform，避免 max=0 产生无穷
+ * 百分比，也避免 max=Infinity 让指示条除以无穷而退化为空填充。
+ */
+const normalizedMax = computed(() => {
+  const { max } = props;
+  return typeof max === 'number' && Number.isFinite(max) && max > 0
+    ? max
+    : DEFAULT_MAX;
+});
+</script>
+
+<template>
+  <ProgressRoot
+    v-slot="slotProps"
+    data-slot="progress"
+    v-bind="forwarded"
+    :max="normalizedMax"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      :class="cn('bg-primary h-full w-full flex-1 transition-all')"
+      :style="`transform: translateX(-${100 - ((slotProps.modelValue || 0) / normalizedMax) * 100}%)`"
+    />
+  </ProgressRoot>
+</template>

package/src/shadcn-ui/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue';

package/src/shadcn-ui/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  RadioGroupRootProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<RadioGroupRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-slot="slotProps"
+    data-slot="radio-group"
+    :class="cn('grid gap-3', props.class)"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps"></slot>
+  </RadioGroupRoot>
+</template>

package/src/shadcn-ui/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { CircleIcon } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  RadioGroupItemProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <slot>
+        <CircleIcon
+          class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+        />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>