@qin-ui/element-plus-pro 1.0.0

package/README.md

@@ -0,0 +1,77 @@
+# @qin-ui/element-plus-pro
+
+基于 Element Plus 的 Pro 组件库，提供：
+
+- `ProForm`
+- `ProTable`
+- `ProComponentProvider`
+- `useForm`
+- `useTable`
+
+## 安装
+
+```bash
+pnpm add @qin-ui/element-plus-pro element-plus
+```
+
+## 快速使用
+
+```ts
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(ElementPlus);
+app.mount('#app');
+```
+
+```vue
+<script setup lang="ts">
+import { ProTable, useTable } from '@qin-ui/element-plus-pro';
+
+const table = useTable({
+  columns: [
+    { prop: 'name', label: '姓名' },
+    { prop: 'age', label: '年龄' },
+  ],
+});
+</script>
+
+<template>
+  <ProTable :table="table" />
+</template>
+```
+
+## ProTable columns
+
+`columns` 采用 Element Plus 列协议为主，支持：
+
+- 原生列字段：`prop`、`label`、`width`、`fixed`、`align`、`sortable`、`filters`、`filterMethod`、`children`
+- 原生 `formatter`
+- Pro 扩展：`render(scope)`、`hidden`
+
+渲染优先级：`render(scope)` > `formatter`。
+
+数据源语义统一为 `data`，不再对外支持 `dataSource`。
+
+## ProForm 组件键名
+
+`component` 使用 Element 风格键名，例如：
+
+- `input`（可配合 `type: 'textarea' | 'password'`）
+- `input-number`
+- `autocomplete`
+- `select` / `cascader`
+- `date-picker`（可配合 `type: 'date' | 'dates' | 'daterange' | 'datetimerange'` 等）
+- `time-picker` / `time-select`
+- `checkbox-group` / `radio-group`
+- `switch` / `slider` / `tree-select` / `transfer`
+
+默认 `modelProp` 为 `modelValue`。
+
+## Peer Dependencies
+
+- `vue` `^3.5.0`
+- `element-plus` `^2.13.6`

package/es/component-provider/index.js

@@ -0,0 +1,220 @@
+import { defineComponent, provide, renderSlot } from "vue";
+import { g as getObject } from "../core/index-VQxpXgLX.js";
+const INJECT_CONFIG = {
+  "pro-table": {
+    injectionKey: Symbol(""),
+    default: {
+      pagination: {
+        layout: "total, sizes, prev, pager, next, jumper",
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        background: true
+      },
+      searchFormConfig: {
+        layout: "grid",
+        expand: { minExpandRows: 2, expandStatus: false }
+      },
+      control: true,
+      addIndexColumn: true
+    }
+  },
+  "pro-form": {
+    injectionKey: Symbol(""),
+    default: { grid: { gutter: 24 } }
+  },
+  "pro-form-item": {
+    injectionKey: Symbol(""),
+    default: { span: 8 }
+  },
+  input: {
+    injectionKey: Symbol(""),
+    default: { maxlength: 100, clearable: true, placeholder: "请输入" }
+  },
+  "input.textarea": {
+    injectionKey: Symbol(""),
+    default: {
+      maxlength: 200,
+      autosize: { minRows: 3, maxRows: 6 },
+      showWordLimit: true,
+      clearable: true,
+      placeholder: "请输入"
+    }
+  },
+  "input.password": {
+    injectionKey: Symbol(""),
+    default: {
+      showPassword: true,
+      maxlength: 100,
+      clearable: true,
+      placeholder: "请输入"
+    }
+  },
+  "input-number": {
+    injectionKey: Symbol(""),
+    default: {
+      max: 10 ** 15 - 1,
+      min: -1000000000000001,
+      controls: false,
+      placeholder: "请输入",
+      style: { width: "100%" }
+    }
+  },
+  autocomplete: {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请输入" }
+  },
+  select: {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请选择" }
+  },
+  cascader: {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请选择" }
+  },
+  "date-picker": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.date": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.dates": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.daterange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期"
+    }
+  },
+  "date-picker.week": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.month": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.monthrange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始月份",
+      endPlaceholder: "结束月份"
+    }
+  },
+  "date-picker.months": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.yearrange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始年份",
+      endPlaceholder: "结束年份"
+    }
+  },
+  "date-picker.year": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.years": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.datetime": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "date-picker.datetimerange": {
+    injectionKey: Symbol(""),
+    default: {
+      style: { width: "100%" },
+      startPlaceholder: "开始时间",
+      endPlaceholder: "结束时间"
+    }
+  },
+  "time-picker": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "time-select": {
+    injectionKey: Symbol(""),
+    default: { style: { width: "100%" }, placeholder: "请选择" }
+  },
+  "checkbox-group": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  "radio-group": {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  switch: {
+    injectionKey: Symbol(""),
+    default: { modelProp: "modelValue" }
+  },
+  slider: {
+    injectionKey: Symbol(""),
+    default: {}
+  },
+  "tree-select": {
+    injectionKey: Symbol(""),
+    default: { clearable: true, placeholder: "请选择" }
+  },
+  transfer: {
+    injectionKey: Symbol(""),
+    default: {}
+  }
+};
+const INJECT_COMPONENTS = Symbol("INJECT_COMPONENTS");
+const DYNAMIC_INJECT_CONFIG = /* @__PURE__ */ Object.create(null);
+const getInjectConfig = (key) => {
+  return INJECT_CONFIG[key] || DYNAMIC_INJECT_CONFIG[key];
+};
+const ensureInjectConfig = (key) => {
+  const existing = getInjectConfig(key);
+  if (existing) return existing;
+  const created = {
+    injectionKey: Symbol(`dynamic:${key}`),
+    default: {}
+  };
+  DYNAMIC_INJECT_CONFIG[key] = created;
+  return created;
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: {
+    componentVars: {},
+    componentMap: {}
+  },
+  setup(__props) {
+    const props = __props;
+    if (props.componentVars) {
+      Object.entries(props.componentVars).forEach(([key, val]) => {
+        const config = ensureInjectConfig(key);
+        provide(config.injectionKey, { ...config.default, ...getObject(val) });
+      });
+    }
+    if (props.componentMap) {
+      provide(INJECT_COMPONENTS, props.componentMap);
+    }
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+export {
+  INJECT_COMPONENTS,
+  INJECT_CONFIG,
+  _sfc_main as default,
+  ensureInjectConfig,
+  getInjectConfig
+};

package/es/core/index-VQxpXgLX.js

@@ -0,0 +1,362 @@
+import { inject, camelize, reactive, provide, ref, toValue } from "vue";
+import { i as isPlainObject, s as set, g as get, c as cloneDeep, t as toPath, p as pick } from "../vendor/utils/lodash-es-p6jau26B.js";
+const InjectionFormKey = Symbol("form");
+const InjectionPathKey = Symbol("path");
+function getObject(val) {
+  return isPlainObject(val) ? val : {};
+}
+function camelizeProperties(obj) {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => [camelize(key), value])
+  );
+}
+const useFields = (initFields) => {
+  const fields = ref([]);
+  fields.value = initFields || [];
+  const _map = /* @__PURE__ */ new Map();
+  const cacheMatch = (pathStr, updater) => {
+    var _a;
+    const fieldPath = _map.get(pathStr) || [];
+    if (fieldPath.length === 0) return false;
+    const fieldIndex = fieldPath[fieldPath.length - 1];
+    const parentField = fieldPath.length === 1 ? fields.value : get(fields.value, fieldPath.slice(0, -2));
+    const field = (_a = parentField == null ? void 0 : parentField.fields) == null ? void 0 : _a[fieldIndex];
+    const _path = toPath((field == null ? void 0 : field.name) ?? (field == null ? void 0 : field.path)).join(".");
+    if (_path === pathStr) {
+      updater({ field, fieldIndex, parentField });
+      return true;
+    }
+    return false;
+  };
+  const updaterMatch = (path, updater, options = {}) => {
+    if (!path) return;
+    const pathStr = typeof path === "function" ? "" : toPath(path).join(".");
+    const { all = typeof path === "function" } = options;
+    if (pathStr && _map.has(pathStr) && !all) {
+      const bool = cacheMatch(pathStr, updater);
+      if (bool) return;
+    }
+    const queue = fields.value.map((field, i) => ({
+      field,
+      fieldPath: [i],
+      parentField: { fields: fields.value }
+    }));
+    while (queue.length) {
+      const { field, fieldPath, parentField } = queue.shift();
+      let matched = false;
+      const _path = toPath(field.name ?? field.path).join(".");
+      if (_path) _map.set(_path, fieldPath);
+      if (typeof path === "function") {
+        matched = path(field);
+      } else if (_path) {
+        matched = pathStr === _path;
+      }
+      if (matched) {
+        const fieldIndex = fieldPath[fieldPath.length - 1];
+        updater({ field, fieldIndex, parentField });
+        if (!all) return;
+      }
+      if (Array.isArray(field.fields)) {
+        field.fields.forEach((f, i) => {
+          queue.push({
+            field: f,
+            fieldPath: [...fieldPath, "fields", i],
+            parentField: field
+          });
+        });
+      }
+    }
+  };
+  function getField(path, options) {
+    if (!path) return void 0;
+    const res = [];
+    updaterMatch(
+      path,
+      ({ field }) => {
+        res.push(field);
+      },
+      options
+    );
+    return (options == null ? void 0 : options.all) ? res : res[0];
+  }
+  function setField(path, field, options) {
+    if (!path) return;
+    const { updateType = "merge", ...rest } = options || {};
+    updaterMatch(
+      path,
+      ({ field: preField, fieldIndex, parentField }) => {
+        let value = field;
+        if (typeof field === "function") {
+          value = field(preField);
+        }
+        if (!value) return;
+        if (updateType === "rewrite") {
+          parentField.fields[fieldIndex] = value;
+        } else {
+          Object.assign(preField, value);
+        }
+      },
+      rest
+    );
+  }
+  function deleteField(path, options) {
+    if (!path) return;
+    updaterMatch(
+      path,
+      ({ fieldIndex, parentField }) => {
+        parentField.fields.splice(fieldIndex, 1);
+      },
+      options
+    );
+  }
+  function addFields(path, newFields, options, placement) {
+    if (newFields.length === 0) return;
+    if (path) {
+      updaterMatch(
+        path,
+        ({ fieldIndex, parentField }) => {
+          const index = placement === "after" ? fieldIndex + 1 : fieldIndex;
+          parentField.fields.splice(index, 0, ...newFields);
+        },
+        options
+      );
+    } else if (placement === "after") {
+      fields.value.push(...newFields);
+    } else {
+      fields.value.unshift(...newFields);
+    }
+  }
+  function appendField(path, field, options) {
+    const newFields = Array.isArray(field) ? field : [field];
+    addFields(path, newFields, options, "after");
+  }
+  function prependField(path, field, options) {
+    const newFields = Array.isArray(field) ? field : [field];
+    addFields(path, newFields, options, "before");
+  }
+  function getParentField(path, options) {
+    if (!path) return void 0;
+    const res = [];
+    updaterMatch(
+      path,
+      ({ parentField }) => {
+        res.push(parentField);
+      },
+      options
+    );
+    return (options == null ? void 0 : options.all) ? res : res[0];
+  }
+  return {
+    fields,
+    getField,
+    setField,
+    deleteField,
+    appendField,
+    prependField,
+    getParentField
+  };
+};
+const InjectionFormDataKey = Symbol("form-data");
+const useFormData = (initFormData) => {
+  if (!initFormData) {
+    const injectFormDataStore = inject(InjectionFormDataKey, void 0);
+    if (injectFormDataStore) return injectFormDataStore;
+  }
+  const formData = reactive(initFormData ?? {});
+  function getFormData(path) {
+    if (!path) return void 0;
+    return get(formData, path);
+  }
+  function setFormData(...args) {
+    let path;
+    let value;
+    if (args.length >= 2) {
+      [path, value] = args;
+      if (!path) return;
+    } else {
+      [value] = args;
+    }
+    if (path) {
+      if (typeof value === "function") {
+        const preValue = getFormData(path);
+        value = value(preValue);
+      }
+      set(formData, path, value);
+    } else {
+      if (typeof value === "function") {
+        const preValue = formData;
+        value = value(preValue);
+      }
+      if (!isPlainObject(value)) return;
+      Object.keys(formData).forEach((key) => {
+        delete formData[key];
+      });
+      Object.assign(formData, value);
+    }
+  }
+  const formDataStore = { formData, getFormData, setFormData };
+  provide(InjectionFormDataKey, formDataStore);
+  return formDataStore;
+};
+const useFormRef = () => {
+  const formRef = ref();
+  const setFormRef = (inst) => {
+    formRef.value = inst;
+  };
+  return { formRef, setFormRef };
+};
+function useForm(...args) {
+  let initFormData = {}, initFields = [], root = true;
+  if (args.length === 1) {
+    root = args[0];
+  } else if (args.length >= 2) {
+    initFormData = args[0] ?? {};
+    initFields = args[1];
+    root = args[2] ?? root;
+  }
+  if (!root) {
+    const injectForm = inject(InjectionFormKey);
+    if (injectForm) return injectForm;
+  }
+  return {
+    ...useFormData(initFormData),
+    ...useFields(initFields),
+    ...useFormRef()
+  };
+}
+const getDefaultPageParam = () => ({
+  current: 1,
+  pageSize: 10,
+  total: 0
+});
+const pageParamProperty = ["current", "pageSize", "total"];
+const useTable = (params) => {
+  const {
+    columns: initColumns = [],
+    dataSource: initDataSource = [],
+    pageParam: initPageParam = getDefaultPageParam(),
+    searchParam: initSearchParam = {},
+    searchFields: initSearchFields = []
+  } = params;
+  const _initSearchParam = cloneDeep(toValue(initSearchParam));
+  const columns = ref([]);
+  columns.value = initColumns;
+  const dataSource = ref(initDataSource);
+  const pageParam = reactive(initPageParam);
+  const setPageParam = (pa) => {
+    let newPageParam = pa;
+    if (typeof pa === "function") {
+      newPageParam = pa(pageParam);
+    }
+    Object.assign(pageParam, pick(newPageParam, pageParamProperty));
+  };
+  const searchForm = useForm(initSearchParam, initSearchFields, true);
+  const resetQueryParams = () => {
+    Object.assign(pageParam, getDefaultPageParam());
+    searchForm.setFormData(cloneDeep(_initSearchParam));
+  };
+  const updaterMatch = (key, updater, options = {}) => {
+    if (!key) return;
+    const { all = typeof key === "function" } = options;
+    for (let i = 0; i < columns.value.length; i++) {
+      const columnItem = columns.value[i];
+      let matched = false;
+      if (typeof key === "function") {
+        matched = key(columnItem);
+      } else if (columnItem.key) {
+        matched = columnItem.key === key;
+      } else if (columnItem.dataIndex) {
+        const dataIndexKey = Array.isArray(columnItem.dataIndex) ? columnItem.dataIndex.join(".") : columnItem.dataIndex;
+        matched = dataIndexKey === key;
+      } else {
+        matched = key === i;
+      }
+      if (matched) {
+        updater({
+          column: columnItem,
+          columnIndex: i,
+          group: columns.value
+        });
+        if (!all) return;
+      }
+    }
+  };
+  const setColumn = (key, column, options) => {
+    if (!key || !column) return;
+    const { updateType = "merge", ...rest } = options || {};
+    updaterMatch(
+      key,
+      ({ column: preColumn, columnIndex, group }) => {
+        let value = column;
+        if (typeof column === "function") {
+          value = column(preColumn);
+        }
+        if (!value) return;
+        if (updateType === "rewrite") {
+          group[columnIndex] = value;
+        } else {
+          Object.assign(preColumn, value);
+        }
+      },
+      rest
+    );
+  };
+  function deleteColumn(path, options) {
+    if (!path) return;
+    updaterMatch(
+      path,
+      ({ columnIndex, group }) => {
+        group.splice(columnIndex, 1);
+      },
+      options
+    );
+  }
+  function addColumns(path, newColumns, options, placement) {
+    if (newColumns.length === 0) return;
+    if (path) {
+      updaterMatch(
+        path,
+        ({ columnIndex, group }) => {
+          const index = placement === "after" ? columnIndex + 1 : columnIndex;
+          group.splice(index, 0, ...newColumns);
+        },
+        options
+      );
+    } else if (placement === "after") {
+      columns.value.push(...newColumns);
+    } else {
+      columns.value.unshift(...newColumns);
+    }
+  }
+  function appendColumn(path, column, options) {
+    const newColumns = Array.isArray(column) ? column : [column];
+    addColumns(path, newColumns, options, "after");
+  }
+  function prependColumn(path, column, options) {
+    const newColumns = Array.isArray(column) ? column : [column];
+    addColumns(path, newColumns, options, "before");
+  }
+  return {
+    columns,
+    dataSource,
+    pageParam,
+    searchForm,
+    setColumn,
+    deleteColumn,
+    appendColumn,
+    prependColumn,
+    setPageParam,
+    resetQueryParams
+  };
+};
+export {
+  InjectionFormKey as I,
+  InjectionPathKey as a,
+  useFields as b,
+  camelizeProperties as c,
+  useFormRef as d,
+  useFormData as e,
+  useTable as f,
+  getObject as g,
+  useForm as u
+};