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

package/src/shadcn-ui/ui/sheet/SheetContent.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+
+import type { SheetVariants } from './sheet';
+
+import { computed, ref } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { DialogContent, useForwardPropsEmits } from 'reka-ui';
+
+import { useDialogStateEvents } from '../dialog/use-dialog-state-events';
+import { sheetVariants } from './sheet';
+import SheetOverlay from './SheetOverlay.vue';
+
+interface SheetContentProps extends DialogContentProps {
+  appendTo?: HTMLElement | string;
+  class?: any;
+  /** Remove the overlay immediately when its cached page is inactive. */
+  inactive?: boolean;
+  modal?: boolean;
+  open?: boolean;
+  overlayBlur?: number;
+  side?: SheetVariants['side'];
+  zIndex?: number;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  appendTo: 'body',
+  inactive: false,
+});
+
+const emits = defineEmits<
+  DialogContentEmits & { close: []; closed: []; opened: [] }
+>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _,
+    inactive: _inactive,
+    modal: _modal,
+    open: _open,
+    side: _side,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
+
+const { handleAnimationEvent } = useDialogStateEvents({
+  contentRef,
+  isOpen: () => props.open,
+  onClosed: () => emits('closed'),
+  onOpened: () => emits('opened'),
+});
+</script>
+
+<template>
+  <Teleport defer :to="appendTo">
+    <Transition v-if="!inactive" name="fade">
+      <SheetOverlay
+        v-if="open && modal"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position,
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
+      />
+    </Transition>
+    <DialogContent
+      ref="contentRef"
+      :class="cn('z-popup', sheetVariants({ side }), props.class)"
+      :style="{
+        ...(zIndex ? { zIndex } : {}),
+        position,
+      }"
+      @animationend="handleAnimationEvent"
+      @animationcancel="handleAnimationEvent"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot></slot>
+
+      <!-- <DialogClose
+        class="data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <Cross2Icon class="h-5 w-" />
+      </DialogClose> -->
+    </DialogContent>
+  </Teleport>
+</template>

package/src/shadcn-ui/ui/sheet/SheetDescription.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription } from 'reka-ui';
+
+const props = defineProps<
+  DialogDescriptionProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot></slot>
+  </DialogDescription>
+</template>

package/src/shadcn-ui/ui/sheet/SheetFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <div
+    data-slot="sheet-footer"
+    :class="cn('flex flex-row justify-end gap-x-2', props.class)"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/sheet/SheetHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <div
+    data-slot="sheet-header"
+    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/sheet/SheetOverlay.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { useScrollLock } from '@melt-js/libs-vben/composables';
+
+useScrollLock();
+const id = inject('DISMISSABLE_DRAWER_ID');
+</script>
+<template>
+  <div :data-dismissable-drawer="id" class="z-popup bg-overlay inset-0"></div>
+</template>

package/src/shadcn-ui/ui/sheet/SheetTitle.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle } from 'reka-ui';
+
+const props = defineProps<
+  DialogTitleProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('text-foreground font-medium', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot></slot>
+  </DialogTitle>
+</template>

package/src/shadcn-ui/ui/sheet/SheetTrigger.vue

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

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

@@ -0,0 +1,10 @@
+export * from './sheet';
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+
+export { default as SheetTrigger } from './SheetTrigger.vue';

package/src/shadcn-ui/ui/sheet/sheet.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+
+export const sheetVariants = cva(
+  'bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
+  {
+    defaultVariants: {
+      side: 'right',
+    },
+    variants: {
+      side: {
+        bottom:
+          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left ',
+        right:
+          'inset-y-0 right-0 w-3/4 border-l  data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+      },
+    },
+  },
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;

package/src/shadcn-ui/ui/switch/Switch.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  SwitchRootProps & { class?: HTMLAttributes['class'] }
+>();
+
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SwitchRoot
+    v-slot="slotProps"
+    data-slot="switch"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      :class="
+        cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+        )
+      "
+    >
+      <slot name="thumb" v-bind="slotProps"></slot>
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

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

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

package/src/shadcn-ui/ui/tabs/Tabs.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  TabsRootProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<TabsRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TabsRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col gap-2', props.class)"
+  >
+    <slot v-bind="slotProps"></slot>
+  </TabsRoot>
+</template>

package/src/shadcn-ui/ui/tabs/TabsContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { TabsContent } from 'reka-ui';
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot></slot>
+  </TabsContent>
+</template>

package/src/shadcn-ui/ui/tabs/TabsList.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+
+const props = defineProps<
+  TabsListProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-md p-1',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </TabsList>
+</template>

package/src/shadcn-ui/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  TabsTriggerProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="
+      cn(
+        'data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot></slot>
+  </TabsTrigger>
+</template>

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

@@ -0,0 +1,5 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';
+export { TabsIndicator } from 'reka-ui';

package/src/shadcn-ui/ui/textarea/Textarea.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { useVModel } from '@vueuse/core';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+  defaultValue?: number | string;
+  modelValue?: number | string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    data-slot="textarea"
+    :class="
+      cn(
+        'border-input placeholder:text-muted-foreground 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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        props.class,
+      )
+    "
+  ></textarea>
+</template>

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

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

package/src/shadcn-ui/ui/toggle/Toggle.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ToggleVariants } from './toggle';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { Toggle, useForwardPropsEmits } from 'reka-ui';
+
+import { toggleVariants } from './toggle';
+
+const props = withDefaults(
+  defineProps<
+    ToggleProps & {
+      class?: HTMLAttributes['class'];
+      size?: ToggleVariants['size'];
+      variant?: ToggleVariants['variant'];
+    }
+  >(),
+  {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+  },
+);
+
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <Toggle
+    v-slot="slotProps"
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot v-bind="slotProps"></slot>
+  </Toggle>
+</template>

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

@@ -0,0 +1,2 @@
+export * from './toggle';
+export { default as Toggle } from './Toggle.vue';

package/src/shadcn-ui/ui/toggle/toggle.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/src/shadcn-ui/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority';
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { toggleVariants } from '../toggle';
+
+import { provide } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = withDefaults(
+  defineProps<
+    ToggleGroupRootProps & {
+      class?: HTMLAttributes['class'];
+      size?: ToggleGroupVariants['size'];
+      spacing?: number;
+      variant?: ToggleGroupVariants['variant'];
+    }
+  >(),
+  {
+    spacing: 0,
+  },
+);
+
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+  spacing: props.spacing,
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-slot="slotProps"
+    data-slot="toggle-group"
+    :data-size="size"
+    :data-variant="variant"
+    :data-spacing="spacing"
+    :style="{
+      '--gap': spacing,
+    }"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+        props.class,
+      )
+    "
+  >
+    <slot v-bind="slotProps"></slot>
+  </ToggleGroupRoot>
+</template>