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

package/src/shadcn-ui/components/collapsible/collapsible-params.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/typings';
+
+import type { CollapsibleParamSchema } from './type';
+
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
+
+import { useNamespace } from '@melt-js/libs-vben/composables';
+
+import { ChevronsDown } from '@lucide/vue';
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from 'reka-ui';
+
+import CollapsibleParamsItem from './collapsible-params-item.vue';
+
+interface Props {
+  defaultOpen?: boolean;
+  maxHeight?: number | string;
+  params: CollapsibleParamSchema[];
+  visibleCount?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visibleCount: 3,
+  defaultOpen: false,
+  maxHeight: undefined,
+});
+
+const emits = defineEmits<{ 'update:value': [any, string] }>();
+
+const modelValue = defineModel<
+  Recordable<CollapsibleParamSchema['defaultValue']>
+>('value', {
+  default: () => ({}),
+});
+
+const visibleRefs = useTemplateRef('visibleRefs');
+const collapsibleRefs = useTemplateRef('collapsibleRefs');
+
+const { b } = useNamespace('collapsible-params');
+
+const open = ref(props.defaultOpen);
+
+// 最小可见为1
+const finalVisibleCount = computed(() =>
+  Math.max(1, Math.floor(props.visibleCount)),
+);
+
+const visibleRows = computed(() => {
+  return props.params.slice(0, finalVisibleCount.value);
+});
+
+const collapsibleRows = computed(() => {
+  return props.params.slice(finalVisibleCount.value);
+});
+
+const bodyStyle = computed(() => {
+  if (
+    !open.value ||
+    props.maxHeight === null ||
+    props.maxHeight === undefined
+  ) {
+    return undefined;
+  }
+
+  return {
+    maxHeight:
+      typeof props.maxHeight === 'number'
+        ? `${props.maxHeight}px`
+        : props.maxHeight,
+  };
+});
+
+function init(force = false) {
+  const nextValue: Recordable<CollapsibleParamSchema['defaultValue']> = {
+    ...modelValue.value,
+  };
+
+  for (const param of props.params) {
+    if (force || nextValue[param.key] === undefined) {
+      nextValue[param.key] = param.defaultValue ?? undefined;
+    }
+  }
+
+  modelValue.value = nextValue;
+}
+
+function toggleCollapsed() {
+  open.value = !open.value;
+}
+
+async function onParamValueChange(_: any, key: string) {
+  await nextTick();
+  emits('update:value', modelValue.value, key);
+}
+
+function resetValues() {
+  if (visibleRefs.value)
+    for (const rowRef of visibleRefs.value) {
+      rowRef?.reset();
+    }
+
+  if (collapsibleRefs.value)
+    for (const rowRef of collapsibleRefs.value) {
+      rowRef?.reset();
+    }
+
+  init(true);
+}
+
+function updateValues(
+  values: Recordable<CollapsibleParamSchema['defaultValue']>,
+) {
+  const allowedKeys = new Set(props.params.map((param) => param.key));
+  const patch = {} as Recordable<CollapsibleParamSchema['defaultValue']>;
+
+  for (const key in values) {
+    if (!Object.hasOwn(values, key)) continue;
+    if (!allowedKeys.has(key)) continue;
+
+    patch[key] = values[key];
+  }
+
+  modelValue.value = { ...modelValue.value, ...patch };
+}
+
+watch(
+  () => props.params,
+  () => init(),
+  { immediate: true, deep: true },
+);
+
+defineExpose({
+  toggleCollapsed,
+  resetValues,
+  updateValues,
+});
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-model:open="open"
+    class="border rounded-[0.5rem] flex flex-col w-full overflow-hidden"
+    :class="[b()]"
+    :unmount-on-hide="false"
+  >
+    <div class="wrapper w-full relative flex flex-col overflow-x-auto">
+      <div class="w-full min-w-fit">
+        <div
+          class="header bg-accent w-full flex-none flex items-center rounded-t-[0.5rem] border-b"
+        >
+          <div
+            class="header-cell pt-2 pb-2 px-5 leading-[1.5rem] flex items-center flex-nowrap"
+          >
+            Name
+          </div>
+          <div
+            class="header-cell pt-2 pb-2 px-5 leading-[1.5rem] flex items-center flex-nowrap"
+          >
+            Value
+          </div>
+          <div
+            class="header-cell pt-2 pb-2 px-5 leading-[1.5rem] flex items-center flex-nowrap"
+          >
+            Description
+          </div>
+        </div>
+
+        <div
+          class="body w-full flex-none flex flex-col overflow-x-hidden"
+          :class="[
+            open && !!props.maxHeight ? 'overflow-y-auto' : 'overflow-y-hidden',
+          ]"
+          :style="bodyStyle"
+        >
+          <CollapsibleParamsItem
+            :data="row"
+            v-for="row in visibleRows"
+            :key="row.key"
+            ref="visibleRefs"
+            v-model:value="modelValue[row.key]"
+            @update:value="(v) => onParamValueChange(v, row.key)"
+          />
+          <CollapsibleContent
+            class="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up"
+          >
+            <CollapsibleParamsItem
+              :data="row"
+              v-for="row in collapsibleRows"
+              :key="row.key"
+              ref="collapsibleRefs"
+              v-model:value="modelValue[row.key]"
+              @update:value="(v) => onParamValueChange(v, row.key)"
+            />
+          </CollapsibleContent>
+        </div>
+      </div>
+    </div>
+    <div
+      class="gutter h-[1.5rem]"
+      v-if="!open && collapsibleRows.length > 0"
+    ></div>
+    <div
+      class="trigger-bar flex min-h-[2rem] border-t px-5 pt-1 pb-1 rounded-b-[0.5rem] z-1"
+      :class="{
+        'collapsed absolute bottom-px left-px right-px border-t-0 pt-6': !open,
+      }"
+      v-if="collapsibleRows.length > 0"
+    >
+      <CollapsibleTrigger
+        class="cursor-pointer h-[2rem] flex items-center gap-2"
+      >
+        <ChevronsDown
+          class="transition-transform"
+          :size="16"
+          :class="{
+            'rotate-180': open,
+          }"
+        />
+        {{ open ? 'Fold' : 'Unfold' }}
+      </CollapsibleTrigger>
+    </div>
+  </CollapsibleRoot>
+</template>
+<style>
+.vben-collapsible-params {
+  .wrapper {
+    --column1: 11.25rem;
+    --column2: 18.25rem;
+    --column3: 27.5rem;
+
+    .header-cell,
+    .body-cell {
+      &:nth-of-type(1) {
+        flex: 0 0 var(--column1);
+
+        /* min-width: var(--column1); */
+      }
+
+      &:nth-of-type(2) {
+        flex: 0 0 var(--column2);
+
+        /* min-width: var(--column2); */
+      }
+
+      &:nth-of-type(3) {
+        flex: 1 1 var(--column3);
+        min-width: var(--column3);
+      }
+    }
+  }
+
+  .trigger-bar {
+    &.collapsed {
+      background-image: linear-gradient(
+        hsl(var(--foreground) / 0%) 0%,
+        hsl(var(--foreground) / 12%) 31.76%,
+        var(--color-border) 31.76%,
+        var(--color-border) 33.43%,
+        var(--color-background) 31.76%
+      );
+    }
+  }
+}
+</style>

package/src/shadcn-ui/components/collapsible/collapsible.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+
+import type { ClassType } from '@melt-js/libs-vben/typings';
+
+import { computed } from 'vue';
+
+import { ChevronsDown } from '@lucide/vue';
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<
+  CollapsibleRootProps & {
+    class?: ClassType;
+    showTrigger?: boolean;
+  }
+>();
+
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _cls, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const open = defineModel<boolean>('open', { default: true });
+
+function toggle() {
+  open.value = !open.value;
+}
+
+defineExpose({
+  toggle,
+});
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-bind="forwarded"
+    v-model:open="open"
+    class="flex flex-col"
+    :unmount-on-hide="false"
+  >
+    <div
+      class="flex items-center justify-between"
+      v-if="$slots.label || showTrigger"
+    >
+      <slot name="label" v-if="$slots.label"> </slot>
+      <CollapsibleTrigger
+        v-if="showTrigger"
+        class="cursor-pointer rounded-full h-[25px] w-[25px] inline-flex items-center justify-center outline-none data-[state=closed]:bg-white data-[state=open]:bg-primary/20 hover:bg-primary/20 text-primary"
+      >
+        <slot name="trigger" :open>
+          <ChevronsDown
+            class="h-3.5 w-3.5 transition-transform"
+            :class="{
+              'rotate-180': open,
+            }"
+          />
+        </slot>
+      </CollapsibleTrigger>
+    </div>
+
+    <slot name="visibleContent" :open></slot>
+
+    <CollapsibleContent
+      class="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up -mx-px -my-px overflow-hidden px-px py-px justify-start"
+    >
+      <slot name="collapsibleContent" :open></slot>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

package/src/shadcn-ui/components/collapsible/index.ts

@@ -0,0 +1,4 @@
+export { default as VbenCollapsibleParams } from './collapsible-params.vue';
+export { default as VbenCollapsible } from './collapsible.vue';
+
+export * from './type';

package/src/shadcn-ui/components/collapsible/type.ts

@@ -0,0 +1,22 @@
+export interface CollapsibleParamsProps {
+  defaultOpen?: boolean;
+  maxHeight?: number | string;
+  params: CollapsibleParamSchema[];
+  visibleCount?: number;
+}
+
+export interface CollapsibleParamOption {
+  [key: string]: any;
+  max?: number;
+  min?: number;
+  precision?: number;
+  step?: number;
+  type?: 'exponential' | 'number' | 'select' | 'string';
+}
+
+export interface CollapsibleParamSchema {
+  defaultValue?: number | number[] | string | string[];
+  description: string;
+  key: string;
+  option: CollapsibleParamOption;
+}

package/src/shadcn-ui/components/context-menu/context-menu.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type {
+  ContextMenuContentProps,
+  ContextMenuRootEmits,
+  ContextMenuRootProps,
+} from 'reka-ui';
+
+import type { ClassType } from '@melt-js/libs-vben/typings';
+
+import type { IContextMenuItem } from './interface';
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from '../../ui/context-menu';
+
+const props = defineProps<
+  ContextMenuRootProps & {
+    class?: ClassType;
+    contentClass?: ClassType;
+    contentProps?: ContextMenuContentProps;
+    handlerData?: Record<string, any>;
+    itemClass?: ClassType;
+    menus: (data: any) => IContextMenuItem[];
+  }
+>();
+
+const emits = defineEmits<ContextMenuRootEmits>();
+
+const NATIVE_CONTEXT_SELECTORS = [
+  'input',
+  'textarea',
+  'select',
+  '[contenteditable]:not([contenteditable="false"])',
+  '.allow-native-context',
+].join(', ');
+
+const delegatedProps = computed(() => {
+  const {
+    class: _cls,
+    contentClass: _,
+    contentProps: _cProps,
+    itemClass: _iCls,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const menusView = computed(() => {
+  return props.menus?.(props.handlerData);
+});
+
+function handleClick(menu: IContextMenuItem) {
+  if (menu.disabled) {
+    return;
+  }
+  menu?.handler?.(props.handlerData);
+}
+
+const triggerRef = ref<HTMLElement | null>(null);
+
+function onContextMenuCapture(e: MouseEvent) {
+  if ((e.target as HTMLElement).closest(NATIVE_CONTEXT_SELECTORS)) {
+    e.stopPropagation();
+  }
+}
+
+onMounted(() => {
+  triggerRef.value?.addEventListener('contextmenu', onContextMenuCapture, {
+    capture: true,
+  });
+});
+
+onUnmounted(() => {
+  triggerRef.value?.removeEventListener('contextmenu', onContextMenuCapture, {
+    capture: true,
+  });
+});
+</script>
+
+<template>
+  <ContextMenu v-bind="forwarded">
+    <ContextMenuTrigger as-child>
+      <div ref="triggerRef" class="contents">
+        <slot></slot>
+      </div>
+    </ContextMenuTrigger>
+    <ContextMenuContent
+      :class="contentClass"
+      v-bind="contentProps"
+      class="side-content z-popup"
+    >
+      <template v-for="menu in menusView" :key="menu.key">
+        <ContextMenuItem
+          v-if="!menu.hidden"
+          :class="itemClass"
+          :disabled="menu.disabled"
+          :inset="menu.inset || !menu.icon"
+          class="cursor-pointer"
+          @click="handleClick(menu)"
+        >
+          <component
+            :is="menu.icon"
+            v-if="menu.icon"
+            class="mr-2 size-4 text-lg"
+          />
+
+          {{ menu.text }}
+          <ContextMenuShortcut v-if="menu.shortcut">
+            {{ menu.shortcut }}
+          </ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSeparator v-if="menu.separator" />
+      </template>
+    </ContextMenuContent>
+  </ContextMenu>
+</template>

package/src/shadcn-ui/components/context-menu/index.ts

@@ -0,0 +1,3 @@
+export { default as VbenContextMenu } from './context-menu.vue';
+
+export type * from './interface';

package/src/shadcn-ui/components/context-menu/interface.ts

@@ -0,0 +1,42 @@
+import type { Component } from 'vue';
+
+interface IContextMenuItem {
+  /**
+   * @zh_CN 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * @zh_CN 点击事件处理
+   * @param data
+   */
+  handler?: (data: any) => void;
+  /**
+   * @zh_CN 是否隐藏
+   */
+  hidden?: boolean;
+  /**
+   * @zh_CN 图标
+   */
+  icon?: Component;
+  /**
+   * @zh_CN 是否显示图标
+   */
+  inset?: boolean;
+  /**
+   * @zh_CN 唯一标识
+   */
+  key: string;
+  /**
+   * @zh_CN 是否是分割线
+   */
+  separator?: boolean;
+  /**
+   * @zh_CN 快捷键
+   */
+  shortcut?: string;
+  /**
+   * @zh_CN 标题
+   */
+  text: string;
+}
+export type { IContextMenuItem };

package/src/shadcn-ui/components/count-to-animator/count-to-animator.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, unref, watch, watchEffect } from 'vue';
+
+import { isNumber } from '@melt-js/libs-vben/shared/utils';
+
+import { TransitionPresets, useTransition } from '@vueuse/core';
+
+interface Props {
+  autoplay?: boolean;
+  color?: string;
+  decimal?: string;
+  decimals?: number;
+  duration?: number;
+  endVal?: number;
+  prefix?: string;
+  separator?: string;
+  startVal?: number;
+  suffix?: string;
+  transition?: keyof typeof TransitionPresets;
+  useEasing?: boolean;
+}
+
+defineOptions({ name: 'CountToAnimator' });
+
+const props = withDefaults(defineProps<Props>(), {
+  autoplay: true,
+  color: '',
+  decimal: '.',
+  decimals: 0,
+  duration: 1500,
+  endVal: 2021,
+  prefix: '',
+  separator: ',',
+  startVal: 0,
+  suffix: '',
+  transition: 'linear',
+  useEasing: true,
+});
+
+const emit = defineEmits<{
+  finished: [];
+  /**
+   * @deprecated 请使用{@link finished}事件
+   */
+  onFinished: [];
+  /**
+   * @deprecated 请使用{@link started}事件
+   */
+  onStarted: [];
+  started: [];
+}>();
+
+const source = ref(props.startVal);
+const disabled = ref(false);
+let outputValue = useTransition(source);
+
+const value = computed(() => formatNumber(unref(outputValue)));
+
+watchEffect(() => {
+  source.value = props.startVal;
+});
+
+watch([() => props.startVal, () => props.endVal], () => {
+  if (props.autoplay) {
+    start();
+  }
+});
+
+onMounted(() => {
+  props.autoplay && start();
+});
+
+function start() {
+  run();
+  source.value = props.endVal;
+}
+
+function reset() {
+  source.value = props.startVal;
+  run();
+}
+
+function run() {
+  outputValue = useTransition(source, {
+    disabled,
+    duration: props.duration,
+    onFinished: () => {
+      emit('finished');
+      emit('onFinished');
+    },
+    onStarted: () => {
+      emit('started');
+      emit('onStarted');
+    },
+    ...(props.useEasing
+      ? { transition: TransitionPresets[props.transition] }
+      : {}),
+  });
+}
+
+function formatNumber(num: number | string) {
+  if (!num && num !== 0) {
+    return '';
+  }
+  const { decimal, decimals, prefix, separator, suffix } = props;
+  num = Number(num).toFixed(decimals);
+  num += '';
+
+  const x = num.split('.');
+  let x1 = x[0];
+  const x2 = x.length > 1 ? decimal + x[1] : '';
+
+  const rgx = /(\d+)(\d{3})/;
+  if (separator && !isNumber(separator) && x1) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, `$1${separator}$2`);
+    }
+  }
+  return prefix + x1 + x2 + suffix;
+}
+
+defineExpose({ reset });
+</script>
+<template>
+  <span :style="{ color }">
+    {{ value }}
+  </span>
+</template>

package/src/shadcn-ui/components/count-to-animator/index.ts

@@ -0,0 +1 @@
+export { default as VbenCountToAnimator } from './count-to-animator.vue';