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

package/src/shadcn-ui/components/breadcrumb/types.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'vue';
+
+import type { BreadcrumbStyleType } from '@melt-js/libs-vben/typings';
+
+export interface IBreadcrumb {
+  icon?: Component | string;
+  isHome?: boolean;
+  items?: IBreadcrumb[];
+  path?: string;
+  title?: string;
+}
+
+export interface BreadcrumbProps {
+  breadcrumbs: IBreadcrumb[];
+  showIcon?: boolean;
+  styleType?: BreadcrumbStyleType;
+}

package/src/shadcn-ui/components/button/button-group.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+defineOptions({ name: 'VbenButtonGroup' });
+
+withDefaults(
+  defineProps<{
+    border?: boolean;
+    gap?: number;
+    size?: 'large' | 'middle' | 'small';
+  }>(),
+  { border: false, gap: 0, size: 'middle' },
+);
+</script>
+<template>
+  <div
+    :class="
+      cn(
+        'vben-button-group rounded-md',
+        `size-${size}`,
+        gap ? 'with-gap' : 'no-gap',
+        $attrs.class as string,
+      )
+    "
+    :style="{ gap: gap ? `${gap}px` : '0px' }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vben-button-group {
+  display: inline-flex;
+
+  &.size-large :deep(button) {
+    height: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    .icon-wrapper {
+      margin-right: 0.4rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  &.size-middle :deep(button) {
+    height: 2rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+
+    .icon-wrapper {
+      margin-right: 0.2rem;
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+  }
+
+  &.size-small :deep(button) {
+    height: 1.75rem;
+    padding: 0.2rem 0.4rem;
+    font-size: 0.65rem;
+    line-height: 0.75rem;
+
+    .icon-wrapper {
+      margin-right: 0.1rem;
+
+      svg {
+        width: 0.65rem;
+        height: 0.65rem;
+      }
+    }
+  }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
+  }
+
+  &.no-gap > :deep(button):last-of-type {
+    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      border-left-width: 0;
+      border-radius: 0;
+    }
+  }
+}
+</style>

package/src/shadcn-ui/components/button/button.ts

@@ -0,0 +1,55 @@
+import type { AsTag } from 'reka-ui';
+
+import type { Component } from 'vue';
+
+import type { ButtonVariants } from '../../ui';
+
+export interface VbenButtonProps {
+  /**
+   * The element or component this component should render as. Can be overwrite by `asChild`
+   * @defaultValue "div"
+   */
+  as?: AsTag | Component;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
+   */
+  asChild?: boolean;
+  class?: any;
+  disabled?: boolean;
+  loading?: boolean;
+  size?: ButtonVariants['size'];
+  variant?: ButtonVariants['variant'];
+}
+
+export type CustomRenderType = (() => Component | string) | string;
+
+export type ValueType = boolean | number | string;
+
+export interface VbenButtonGroupProps extends Pick<
+  VbenButtonProps,
+  'disabled'
+> {
+  /** 单选模式下允许清除选中 */
+  allowClear?: boolean;
+  /** 值改变前的回调 */
+  beforeChange?: (
+    value: ValueType,
+    isChecked: boolean,
+  ) => boolean | PromiseLike<boolean | undefined> | undefined;
+  /** 按钮样式 */
+  btnClass?: any;
+  /** 按钮间隔距离 */
+  gap?: number;
+  /** 多选模式下限制最多选择的数量。0表示不限制 */
+  maxCount?: number;
+  /** 是否允许多选 */
+  multiple?: boolean;
+  /** 选项 */
+  options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
+  /** 显示图标 */
+  showIcon?: boolean;
+  /** 尺寸 */
+  size?: 'large' | 'middle' | 'small';
+}

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { VbenButtonProps } from './button';
+
+import { computed } from 'vue';
+
+import { LoaderCircle } from '@melt-js/libs-vben/core-icons';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Primitive } from 'reka-ui';
+
+import { buttonVariants } from '../../ui';
+
+interface Props extends VbenButtonProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+  class: '',
+  disabled: false,
+  loading: false,
+  size: 'default',
+  variant: 'default',
+});
+
+const isDisabled = computed(() => {
+  return props.disabled || props.loading;
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :disabled="isDisabled"
+  >
+    <LoaderCircle
+      v-if="loading"
+      class="text-md mr-2 size-4 shrink-0 animate-spin"
+    />
+    <slot></slot>
+  </Primitive>
+</template>

package/src/shadcn-ui/components/button/check-button-group.vue

@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import type { Arrayable } from '@vueuse/core';
+
+import type { ValueType, VbenButtonGroupProps } from './button';
+
+import { computed, ref, watch } from 'vue';
+
+import { Circle, CircleCheckBig, LoaderCircle } from '@melt-js/libs-vben/core-icons';
+import { cn, isFunction } from '@melt-js/libs-vben/shared/utils';
+
+import { objectOmit } from '@vueuse/core';
+
+import { VbenRenderContent } from '../render-content';
+import VbenButtonGroup from './button-group.vue';
+import Button from './button.vue';
+
+const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
+  gap: 0,
+  multiple: false,
+  showIcon: true,
+  size: 'middle',
+  allowClear: false,
+  maxCount: 0,
+});
+const emit = defineEmits(['btnClick']);
+const btnDefaultProps = computed(() => {
+  return {
+    ...objectOmit(props, ['options', 'btnClass', 'size', 'disabled']),
+    class: cn(props.btnClass),
+  };
+});
+const modelValue = defineModel<Arrayable<ValueType> | undefined>();
+
+const innerValue = ref<Array<ValueType>>([]);
+const loadingValues = ref<Array<ValueType>>([]);
+watch(
+  () => props.multiple,
+  (val) => {
+    if (val) {
+      modelValue.value = innerValue.value;
+    } else {
+      modelValue.value =
+        innerValue.value.length > 0 ? innerValue.value[0] : undefined;
+    }
+  },
+);
+
+watch(
+  () => modelValue.value,
+  (val) => {
+    if (Array.isArray(val)) {
+      const arrVal = val.filter((v) => v !== undefined);
+      if (arrVal.length > 0) {
+        innerValue.value = props.multiple
+          ? [...arrVal]
+          : [arrVal[0] as ValueType];
+      } else {
+        innerValue.value = [];
+      }
+    } else {
+      innerValue.value = val === undefined ? [] : [val as ValueType];
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+async function onBtnClick(value: ValueType) {
+  if (props.beforeChange && isFunction(props.beforeChange)) {
+    try {
+      loadingValues.value.push(value);
+      const canChange = await props.beforeChange(
+        value,
+        !innerValue.value.includes(value),
+      );
+      if (canChange === false) {
+        return;
+      }
+    } finally {
+      loadingValues.value.splice(loadingValues.value.indexOf(value), 1);
+    }
+  }
+
+  if (props.multiple) {
+    if (innerValue.value.includes(value)) {
+      innerValue.value = innerValue.value.filter((item) => item !== value);
+    } else {
+      if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
+        innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
+      }
+      innerValue.value.push(value);
+    }
+    modelValue.value = innerValue.value;
+  } else {
+    if (props.allowClear && innerValue.value.includes(value)) {
+      innerValue.value = [];
+      modelValue.value = undefined;
+      emit('btnClick', undefined);
+      return;
+    } else {
+      innerValue.value = [value];
+      modelValue.value = value;
+    }
+  }
+  emit('btnClick', value);
+}
+</script>
+<template>
+  <VbenButtonGroup
+    :size="props.size"
+    :gap="props.gap"
+    class="vben-check-button-group"
+  >
+    <Button
+      v-for="(btn, index) in props.options"
+      :key="index"
+      :class="cn('border', props.btnClass)"
+      :disabled="
+        props.disabled ||
+        loadingValues.includes(btn.value) ||
+        (!props.multiple && loadingValues.length > 0)
+      "
+      v-bind="btnDefaultProps"
+      :variant="innerValue.includes(btn.value) ? 'default' : 'outline'"
+      @click="onBtnClick(btn.value)"
+      type="button"
+    >
+      <div class="icon-wrapper" v-if="props.showIcon">
+        <slot
+          name="icon"
+          :loading="loadingValues.includes(btn.value)"
+          :checked="innerValue.includes(btn.value)"
+        >
+          <LoaderCircle
+            class="animate-spin"
+            v-if="loadingValues.includes(btn.value)"
+          />
+          <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
+          <Circle v-else />
+        </slot>
+      </div>
+      <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
+        <VbenRenderContent :content="btn.label" />
+      </slot>
+    </Button>
+  </VbenButtonGroup>
+</template>
+<style lang="scss" scoped>
+.vben-check-button-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  &:deep(.size-large) button {
+    .icon-wrapper {
+      margin-right: 0.3rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  &:deep(.size-middle) button {
+    .icon-wrapper {
+      margin-right: 0.2rem;
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+  }
+
+  &:deep(.size-small) button {
+    .icon-wrapper {
+      margin-right: 0.1rem;
+
+      svg {
+        width: 0.65rem;
+        height: 0.65rem;
+      }
+    }
+  }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-right-width: 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      margin-right: -1px;
+      border-left-width: 1px;
+    }
+  }
+}
+</style>

package/src/shadcn-ui/components/button/icon-button.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '../../ui';
+import type { VbenButtonProps } from './button';
+
+import { computed, useSlots } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { VbenTooltip } from '../tooltip';
+import VbenButton from './button.vue';
+
+interface Props extends VbenButtonProps {
+  class?: any;
+  disabled?: boolean;
+  onClick?: ((e?: MouseEvent) => void)[] | ((e?: MouseEvent) => void);
+  tooltip?: string;
+  tooltipDelayDuration?: number;
+  tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
+  variant?: ButtonVariants['variant'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  onClick: () => {},
+  tooltipDelayDuration: 200,
+  tooltipSide: 'bottom',
+  variant: 'ghost',
+});
+
+const slots = useSlots();
+
+const showTooltip = computed(() => !!slots.tooltip || !!props.tooltip);
+
+function handleClick(e: MouseEvent) {
+  if (Array.isArray(props.onClick)) {
+    for (const fn of props.onClick) {
+      fn?.(e);
+    }
+  } else {
+    props.onClick?.(e);
+  }
+}
+</script>
+
+<template>
+  <VbenButton
+    v-if="!showTooltip"
+    :class="cn('rounded-full', props.class)"
+    :disabled="disabled"
+    :variant="variant"
+    size="icon"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </VbenButton>
+
+  <VbenTooltip
+    v-else
+    :delay-duration="tooltipDelayDuration"
+    :side="tooltipSide"
+  >
+    <template #trigger>
+      <VbenButton
+        :class="cn('rounded-full', props.class)"
+        :disabled="disabled"
+        :variant="variant"
+        size="icon"
+        @click="handleClick"
+      >
+        <slot></slot>
+      </VbenButton>
+    </template>
+    <slot v-if="slots.tooltip" name="tooltip"> </slot>
+    <template v-else>
+      {{ tooltip }}
+    </template>
+  </VbenTooltip>
+</template>

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

@@ -0,0 +1,5 @@
+export type * from './button';
+export { default as VbenButtonGroup } from './button-group.vue';
+export { default as VbenButton } from './button.vue';
+export { default as VbenCheckButtonGroup } from './check-button-group.vue';
+export { default as VbenIconButton } from './icon-button.vue';

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+
+import { useId } from 'vue';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import { Checkbox } from '../../ui/checkbox';
+
+const props = defineProps<CheckboxRootProps & { indeterminate?: boolean }>();
+
+const emits = defineEmits<CheckboxRootEmits>();
+
+const checked = defineModel<boolean>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+
+const id = useId();
+</script>
+
+<template>
+  <div class="flex items-center">
+    <Checkbox v-bind="forwarded" :id="id" v-model="checked" />
+    <label :for="id" class="ml-2 cursor-pointer text-sm"> <slot></slot> </label>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { CollapsibleParamSchema } from './type';
+
+import { computed } from 'vue';
+
+import { globalShareState } from '@melt-js/libs-vben/shared/global-state';
+
+interface Props {
+  data: CollapsibleParamSchema;
+}
+const props = defineProps<Props>();
+
+const modelValue = defineModel('value');
+
+const finalOption = computed(() => {
+  const { type, ...otherOption } = props.data.option;
+
+  if (type === 'number' || type === 'exponential') {
+    return {
+      step: props.data.option.step ?? 1,
+      min: props.data.option.min,
+      max: props.data.option.max,
+      precision: props.data.option.precision,
+      ...otherOption,
+    };
+  }
+
+  return otherOption;
+});
+
+const components = globalShareState.getComponents();
+
+const FieldComponent = computed(() => {
+  switch (props.data.option.type) {
+    case 'exponential':
+    case 'number': {
+      return components.InputNumber;
+    }
+    case 'select': {
+      return components.Select;
+    }
+    case 'string': {
+      return components.Input;
+    }
+
+    default: {
+      return components.InputNumber;
+    }
+  }
+});
+
+const limitDisplay = computed(() => {
+  if (
+    props.data.option.min !== null &&
+    props.data.option.min !== undefined &&
+    props.data.option.max !== null &&
+    props.data.option.max !== undefined
+  ) {
+    return `[${props.data.option.min},${props.data.option.max}]`;
+  }
+
+  if (props.data.option.min !== null && props.data.option.min !== undefined) {
+    return `min:${props.data.option.min}`;
+  }
+
+  if (props.data.option.max !== null && props.data.option.max !== undefined) {
+    return `max:${props.data.option.max}`;
+  }
+
+  return '';
+});
+
+function reset() {
+  modelValue.value = props.data.defaultValue;
+}
+
+defineExpose({
+  reset,
+});
+</script>
+
+<template>
+  <div
+    class="body-row flex items-center w-full flex-nowrap not-last-of-type:border-b"
+  >
+    <div
+      class="body-cell pt-2 pb-2 px-5 leading-[1.5rem] flex items-center flex-nowrap"
+    >
+      {{ data.key }}
+    </div>
+    <div
+      class="body-cell pt-2 pb-2 px-5 leading-[1.5rem] flex items-center flex-nowrap"
+    >
+      <div class="flex-auto w-full">
+        <component
+          :is="FieldComponent"
+          v-bind="finalOption"
+          v-model:value="modelValue"
+        />
+      </div>
+      <div class="flex items-center flex-none text-muted-foreground pl-2 gap-2">
+        <span v-if="limitDisplay">
+          {{ limitDisplay }}
+        </span>
+        <span v-if="data.option.step && data.option.step !== 1">
+          step:{{ data.option.step }}
+        </span>
+      </div>
+    </div>
+    <div
+      class="body-cell pt-2 pb-2 px-5 leading-[1.5rem] flex items-center flex-nowrap w-full"
+    >
+      <p
+        class="line-clamp-2"
+        v-tippy="{
+          content: data.description,
+        }"
+      >
+        {{ data.description }}
+      </p>
+    </div>
+  </div>
+</template>