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

package/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) 2024-present, Vben
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

package/README.md

@@ -1,3 +1,55 @@
-# Temporary Holding Version
+# @melt-js/comps-vben
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+由 [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin) 5.8 的组件层合并而来的包：`packages/@core/ui-kit/*` 六个 UI 套件，加上 `common-ui`、`layouts`、`plugins` 三个组件/布局/插件包。
+
+基础能力（`shared` / `composables` / `preferences` / `icons` / `stores` / `request` 等）来自 [`libs-vben`](../libs-vben)。本包依赖 `libs-vben`，不反向依赖，避免循环。
+
+## 合并范围
+
+| 子路径 | 上游包 | 内容 |
+| --- | --- | --- |
+| `shadcn-ui` | `@vben-core/shadcn-ui` | shadcn 风格基础组件（Button / Dialog / Table / Tree …） |
+| `form-ui` | `@vben-core/form-ui` | VbenForm 表单引擎 |
+| `layout-ui` | `@vben-core/layout-ui` | 布局骨架 |
+| `menu-ui` | `@vben-core/menu-ui` | 菜单 |
+| `popup-ui` | `@vben-core/popup-ui` | Modal / Drawer / Alert |
+| `tabs-ui` | `@vben-core/tabs-ui` | 标签页 |
+| `common-ui` | `@vben/common-ui` | 通用业务组件（登录、验证码、JSON 查看器、IconPicker …） |
+| `common-ui/es/tippy` | `@vben/common-ui/es/tippy` | tippy 初始化 |
+| `layouts` | `@vben/layouts` | BasicLayout / 用户下拉 / 通知 / 锁屏 |
+| `plugins` | `@vben/plugins` | ECharts / Tiptap / VXE Table / Motion 封装 |
+| `plugins/echarts` | `@vben/plugins/echarts` | ECharts 组件与 hook |
+| `plugins/tiptap` | `@vben/plugins/tiptap` | Tiptap 富文本 |
+| `plugins/vxe-table` | `@vben/plugins/vxe-table` | VXE Table 封装 |
+| `plugins/motion` | `@vben/plugins/motion` | @vueuse/motion 插件 |
+
+## 使用
+
+```ts
+import { registerLoadingDirective } from '@melt-js/comps-vben/common-ui';
+import { BasicLayout } from '@melt-js/comps-vben/layouts';
+import { useVbenForm } from '@melt-js/comps-vben/form-ui';
+```
+
+模板 [`tpl-vue3-admin-ele-vben`](../tpl-vue3-admin-ele-vben) 通过 `Element Plus` 适配器把 Element Plus 组件注册进 `form-ui` 的组件表。
+
+## 边界
+
+- 只放 UI 组件、布局、可视化/编辑器插件；协议层、请求、store、权限、i18n 在 `libs-vben`。
+- `common-ui`、`layouts`、`plugins` 虽然在上游属于 `packages/effects/*`，但都是组件或组件封装，因此归入本包；这样 `comps-vben -> libs-vben` 保持单向依赖。
+- 源码按子目录保存，`exports` 与上游包名 / 子路径一一对应。
+
+## 目录
+
+```text
+src/
+  common-ui/   # @vben/common-ui
+  form-ui/     # @vben-core/form-ui
+  layout-ui/   # @vben-core/layout-ui
+  layouts/     # @vben/layouts
+  menu-ui/     # @vben-core/menu-ui
+  plugins/     # @vben/plugins
+  popup-ui/    # @vben-core/popup-ui
+  shadcn-ui/   # @vben-core/shadcn-ui
+  tabs-ui/     # @vben-core/tabs-ui
+```

package/package.json

@@ -1,6 +1,86 @@
 {
   "name": "@melt-js/comps-vben",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "appGroupName": "comps-vben",
+  "version": "2026.11.8-1",
+  "type": "module",
+  "description": "Vben Admin 5.8 组件层合集：shadcn-ui / form-ui / layout-ui / menu-ui / popup-ui / tabs-ui / common-ui / layouts / plugins，依赖 libs-vben",
+  "license": "MIT",
+  "exports": {
+    "./common-ui": "./src/common-ui/index.ts",
+    "./common-ui/es/loading": "./src/common-ui/components/loading/index.ts",
+    "./common-ui/es/tippy": "./src/common-ui/components/tippy/index.ts",
+    "./form-ui": "./src/form-ui/index.ts",
+    "./layout-ui": "./src/layout-ui/index.ts",
+    "./layouts": "./src/layouts/index.ts",
+    "./menu-ui": "./src/menu-ui/index.ts",
+    "./plugins": "./src/plugins/index.ts",
+    "./plugins/echarts": "./src/plugins/echarts/index.ts",
+    "./plugins/motion": "./src/plugins/motion/index.ts",
+    "./plugins/tiptap": "./src/plugins/tiptap/index.ts",
+    "./plugins/vxe-table": "./src/plugins/vxe-table/index.ts",
+    "./popup-ui": "./src/popup-ui/index.ts",
+    "./shadcn-ui": "./src/shadcn-ui/index.ts",
+    "./tabs-ui": "./src/tabs-ui/index.ts"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org",
+    "tag": "latest"
+  },
+  "dependencies": {
+    "@tanstack/store": "0.11.2",
+    "@tanstack/vue-form": "1.33.5",
+    "@vueuse/core": "15.0.0",
+    "vue": "3.5.41",
+    "zod": "4.4.3",
+    "zod-defaults": "0.2.3",
+    "qs": "6.15.3",
+    "@lucide/vue": "1.60.0",
+    "class-variance-authority": "0.7.1",
+    "reka-ui": "2.10.4",
+    "@vueuse/integrations": "15.0.0",
+    "json-bigint": "1.0.0",
+    "qrcode": "1.5.4",
+    "tippy.js": "6.3.7",
+    "vue-json-pretty": "2.6.0",
+    "vue-router": "5.2.0",
+    "vue-tippy": "6.7.1",
+    "@types/sortablejs": "1.15.9",
+    "sortablejs": "1.15.7",
+    "@tiptap/core": "3.32.0",
+    "@tiptap/extension-highlight": "3.32.0",
+    "@tiptap/extension-image": "3.32.0",
+    "@tiptap/extension-link": "3.32.0",
+    "@tiptap/extension-placeholder": "3.32.0",
+    "@tiptap/extension-text-align": "3.32.0",
+    "@tiptap/extension-text-style": "3.32.0",
+    "@tiptap/pm": "3.32.0",
+    "@tiptap/starter-kit": "3.32.0",
+    "@tiptap/vue-3": "3.32.0",
+    "@vueuse/motion": "3.0.3",
+    "@vxe-ui/core": "4.5.2",
+    "echarts": "6.1.0",
+    "vxe-pc-ui": "4.20.33",
+    "vxe-table": "4.23.12",
+    "@melt-js/libs-vben": "2026.11.8-1"
+  },
+  "peerDependencies": {
+    "@vueuse/core": ">=10.0.0",
+    "vue": ">=3.4.0",
+    "vue-router": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit",
+    "publish:stage": "node scripts/publish-stage.mjs"
+  }
 }

package/src/common-ui/components/api-component/api-component.vue

@@ -0,0 +1,273 @@
+<script lang="ts" setup>
+import type {
+  ApiComponentProps,
+  ApiComponentOptionsItem as OptionsItem,
+} from './types';
+
+import { computed, nextTick, ref, unref, useAttrs, watch } from 'vue';
+
+import { LoaderCircle } from '@melt-js/libs-vben/icons';
+
+import { cloneDeep, get, isEqual, isFunction } from '@melt-js/libs-vben/shared/utils';
+
+import { objectOmit } from '@vueuse/core';
+
+defineOptions({ name: 'ApiComponent', inheritAttrs: false });
+
+const props = withDefaults(defineProps<ApiComponentProps>(), {
+  labelField: 'label',
+  valueField: 'value',
+  labelFn: undefined,
+  disabledField: 'disabled',
+  childrenField: '',
+  optionsPropName: 'options',
+  resultField: '',
+  visibleEvent: '',
+  numberToString: false,
+  params: () => ({}),
+  immediate: true,
+  alwaysLoad: false,
+  loadingSlot: '',
+  beforeFetch: undefined,
+  shouldFetch: undefined,
+  afterFetch: undefined,
+  modelPropName: 'modelValue',
+  api: undefined,
+  autoSelect: false,
+  options: () => [],
+});
+
+const emit = defineEmits<{
+  optionsChange: [OptionsItem[]];
+}>();
+
+const modelValue = defineModel<any>({ default: undefined });
+
+const attrs = useAttrs();
+const usesDefaultModelValue = computed(() => {
+  return ['model-value', 'modelValue'].includes(props.modelPropName);
+});
+const currentModelValue = computed(() => {
+  return usesDefaultModelValue.value
+    ? modelValue.value
+    : attrs[props.modelPropName];
+});
+const innerParams = ref({});
+const refOptions = ref<OptionsItem[]>([]);
+const loading = ref(false);
+// 首次是否加载过了
+const isFirstLoaded = ref(false);
+// 标记是否有待处理的请求
+const hasPendingRequest = ref(false);
+
+const getOptions = computed(() => {
+  const {
+    labelField,
+    labelFn,
+    valueField,
+    disabledField,
+    childrenField,
+    numberToString,
+  } = props;
+
+  function transformData(data: OptionsItem[] = []): OptionsItem[] {
+    return data.map((item) => {
+      const value = get(item, valueField);
+      const children = childrenField ? get(item, childrenField) : item.children;
+      return {
+        ...objectOmit(item, [
+          labelField,
+          valueField,
+          disabledField,
+          ...(childrenField ? [childrenField] : []),
+        ]),
+        label: labelFn ? labelFn(item) : get(item, labelField),
+        value: numberToString ? `${value}` : value,
+        disabled: get(item, disabledField),
+        ...(Array.isArray(children) && children.length > 0
+          ? { children: transformData(children) }
+          : {}),
+      };
+    });
+  }
+
+  const data = transformData(unref(refOptions));
+
+  return data.length > 0 ? data : transformData(props.options);
+});
+
+const bindProps = computed(() => {
+  const updateEvent = `onUpdate:${props.modelPropName}`;
+  return {
+    [props.modelPropName]: unref(currentModelValue),
+    [props.optionsPropName]: unref(getOptions),
+    [updateEvent]: (val: string) => {
+      updateModelValue(val);
+    },
+    ...objectOmit(attrs, [props.modelPropName, updateEvent]),
+    ...(props.visibleEvent
+      ? {
+          [props.visibleEvent]: handleFetchForVisible,
+        }
+      : {}),
+  };
+});
+
+function updateModelValue(value: any) {
+  if (usesDefaultModelValue.value) {
+    modelValue.value = value;
+    return;
+  }
+  const updateHandler = attrs[`onUpdate:${props.modelPropName}`];
+  if (isFunction(updateHandler)) {
+    updateHandler(value);
+  }
+}
+
+async function fetchApi() {
+  const { api, beforeFetch, shouldFetch, afterFetch, resultField } = props;
+
+  if (!api || !isFunction(api)) {
+    return;
+  }
+
+  // 如果正在加载，标记有待处理的请求并返回
+  if (loading.value) {
+    hasPendingRequest.value = true;
+    return;
+  }
+
+  refOptions.value = [];
+  try {
+    loading.value = true;
+    let finalParams = unref(mergedParams);
+    if (beforeFetch && isFunction(beforeFetch)) {
+      finalParams = (await beforeFetch(cloneDeep(finalParams))) || finalParams;
+    }
+    // 判断是否需要控制执行中断
+    if (
+      shouldFetch &&
+      isFunction(shouldFetch) &&
+      !(await shouldFetch(finalParams))
+    ) {
+      return;
+    }
+    let res = await api(finalParams);
+    if (afterFetch && isFunction(afterFetch)) {
+      res = (await afterFetch(res)) || res;
+    }
+    isFirstLoaded.value = true;
+    if (Array.isArray(res)) {
+      refOptions.value = res;
+      emitChange();
+      return;
+    }
+    if (resultField) {
+      refOptions.value = get(res, resultField) || [];
+    }
+    emitChange();
+  } catch (error) {
+    console.warn(error);
+    // reset status
+    isFirstLoaded.value = false;
+  } finally {
+    loading.value = false;
+    // 如果有待处理的请求，立即触发新的请求
+    if (hasPendingRequest.value) {
+      hasPendingRequest.value = false;
+      // 使用 nextTick 确保状态更新完成后再触发新请求
+      await nextTick();
+      fetchApi();
+    }
+  }
+}
+
+async function handleFetchForVisible(visible: boolean) {
+  if (visible) {
+    if (props.alwaysLoad) {
+      await fetchApi();
+    } else if (!props.immediate && !unref(isFirstLoaded)) {
+      await fetchApi();
+    }
+  }
+}
+
+const mergedParams = computed(() => {
+  return {
+    ...props.params,
+    ...unref(innerParams),
+  };
+});
+
+watch(
+  [() => props.api, mergedParams],
+  ([api, value], [oldApi, oldValue]) => {
+    if (api === oldApi && isEqual(value, oldValue)) {
+      return;
+    }
+    fetchApi();
+  },
+  { deep: true, immediate: props.immediate },
+);
+
+function emitChange() {
+  if (
+    currentModelValue.value === undefined &&
+    props.autoSelect &&
+    unref(getOptions).length > 0
+  ) {
+    let firstOption;
+    if (isFunction(props.autoSelect)) {
+      firstOption = props.autoSelect(unref(getOptions));
+    } else {
+      switch (props.autoSelect) {
+        case 'first': {
+          firstOption = unref(getOptions)[0];
+          break;
+        }
+        case 'last': {
+          firstOption = unref(getOptions)[unref(getOptions).length - 1];
+          break;
+        }
+        case 'one': {
+          if (unref(getOptions).length === 1) {
+            firstOption = unref(getOptions)[0];
+          }
+          break;
+        }
+      }
+    }
+
+    if (firstOption) updateModelValue(firstOption.value);
+  }
+  emit('optionsChange', unref(getOptions));
+}
+const componentRef = ref();
+defineExpose({
+  /** 获取options数据 */
+  getOptions: () => unref(getOptions),
+  /** 获取当前值 */
+  getValue: () => unref(currentModelValue),
+  /** 获取被包装的组件实例 */
+  getComponentRef: <T = any>() => componentRef.value as T,
+  /** 更新Api参数 */
+  updateParam(newParams: Record<string, any>) {
+    innerParams.value = newParams;
+  },
+});
+</script>
+<template>
+  <component
+    :is="component"
+    v-bind="bindProps"
+    :placeholder="$attrs.placeholder"
+    ref="componentRef"
+  >
+    <template v-for="item in Object.keys($slots)" #[item]="data">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="loadingSlot && loading" #[loadingSlot]>
+      <LoaderCircle class="animate-spin" />
+    </template>
+  </component>
+</template>

package/src/common-ui/components/api-component/index.ts

@@ -0,0 +1,7 @@
+export { default as ApiComponent } from './api-component.vue';
+export type {
+  ApiComponentLabelFn,
+  ApiComponentOptionsItem,
+  ApiComponentProps,
+  ApiComponentSharedProps,
+} from './types';

package/src/common-ui/components/api-component/types.ts

@@ -0,0 +1,72 @@
+import type { Component } from 'vue';
+
+import type { AnyPromiseFunction } from '@melt-js/libs-vben/types';
+
+export type ApiComponentOptionsItem = {
+  [name: string]: any;
+  children?: ApiComponentOptionsItem[];
+  disabled?: boolean;
+  label?: string;
+  value?: number | string;
+};
+
+export type ApiComponentLabelFn = (item: ApiComponentOptionsItem) => string;
+
+export interface ApiComponentProps {
+  /** 组件 */
+  component: Component;
+  /** 是否将value从数字转为string */
+  numberToString?: boolean;
+  /** 获取options数据的函数 */
+  api?: (arg?: any) => Promise<ApiComponentOptionsItem[] | Record<string, any>>;
+  /** 传递给api的参数 */
+  params?: Record<string, any>;
+  /** 从api返回的结果中提取options数组的字段名 */
+  resultField?: string;
+  /** label字段名 */
+  labelField?: string;
+  /** 通过选项数据自定义label */
+  labelFn?: ApiComponentLabelFn;
+  /** children字段名，需要层级数据的组件可用 */
+  childrenField?: string;
+  /** value字段名 */
+  valueField?: string;
+  /** disabled字段名 */
+  disabledField?: string;
+  /** 组件接收options数据的属性名 */
+  optionsPropName?: string;
+  /** 是否立即调用api */
+  immediate?: boolean;
+  /** 每次`visibleEvent`事件发生时都重新请求数据 */
+  alwaysLoad?: boolean;
+  /** 在api请求之前的回调函数 */
+  beforeFetch?: AnyPromiseFunction<any, any>;
+  /** 在api请求之前的判断是否允许请求的回调函数 */
+  shouldFetch?: AnyPromiseFunction<any, boolean>;
+  /** 在api请求之后的回调函数 */
+  afterFetch?: AnyPromiseFunction<any, any>;
+  /** 直接传入选项数据，也作为api返回空数据时的后备数据 */
+  options?: ApiComponentOptionsItem[];
+  /** 组件的插槽名称，用来显示一个"加载中"的图标 */
+  loadingSlot?: string;
+  /** 触发api请求的事件名 */
+  visibleEvent?: string;
+  /** 组件的v-model属性名，默认为modelValue。部分组件可能为value */
+  modelPropName?: string;
+  /**
+   * 自动选择
+   * - `first`：自动选择第一个选项
+   * - `last`：自动选择最后一个选项
+   * - `one`: 当请求的结果只有一个选项时，自动选择该选项
+   * - 函数：自定义选择逻辑，函数的参数为请求的结果数组，返回值为选择的选项
+   * - false：不自动选择(默认)
+   */
+  autoSelect?:
+    | 'first'
+    | 'last'
+    | 'one'
+    | ((item: ApiComponentOptionsItem[]) => ApiComponentOptionsItem)
+    | false;
+}
+
+export type ApiComponentSharedProps = Omit<ApiComponentProps, 'component'>;

package/src/common-ui/components/captcha/hooks/useCaptchaPoints.ts

@@ -0,0 +1,19 @@
+import type { CaptchaPoint } from '../types';
+
+import { reactive } from 'vue';
+
+export function useCaptchaPoints() {
+  const points = reactive<CaptchaPoint[]>([]);
+  function addPoint(point: CaptchaPoint) {
+    points.push(point);
+  }
+
+  function clearPoints() {
+    points.splice(0);
+  }
+  return {
+    addPoint,
+    clearPoints,
+    points,
+  };
+}

package/src/common-ui/components/captcha/index.ts

@@ -0,0 +1,7 @@
+export { default as PointSelectionCaptcha } from './point-selection-captcha/index.vue';
+export { default as PointSelectionCaptchaCard } from './point-selection-captcha/index.vue';
+
+export { default as SliderCaptcha } from './slider-captcha/index.vue';
+export { default as SliderRotateCaptcha } from './slider-rotate-captcha/index.vue';
+export { default as SliderTranslateCaptcha } from './slider-translate-captcha/index.vue';
+export type * from './types';