@ttkj/avue 2.10.11 → 2.10.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttkj/avue",
-  "version": "2.10.11",
+  "version": "2.10.13",
   "description": "A Magic Configurable Web Framework",
   "main": "lib/avue.min.js",
   "unpkg": "lib/avue.min.js",
@@ -29,9 +29,10 @@
   "devDependencies": {
     "@babel/core": "^7.13.14",
     "@babel/preset-env": "^7.13.12",
+    "@types/lodash": "^4.14.202",
     "axios": "^0.21.1",
     "babel-loader": "^8.2.2",
-    "cross-env": "^3.1.3",
+    "cross-env": "^3.2.4",
     "css-loader": "^5.2.0",
     "element-ui": "^2.15.10",
     "eslint": "4.14.0",
@@ -59,12 +60,14 @@
   "dependencies": {
     "countup.js": "^1.9.3",
     "dayjs": "^1.10.4",
+    "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "vue-cropper": "^0.5.8",
     "vuedraggable": "^2.24.3"
   },
   "files": [
     "lib",
+    "types",
     "README.md",
     "LICENSE"
   ]

package/types/README.md

@@ -0,0 +1,48 @@
+# 介绍
+
+`avue.js`的定义文件
+
+# 引入方式
+
+```typescript
+declare module '@smallwei/avue/lib/avue' {
+  import Avue from 'xxx/types/avue';
+  export default Avue;
+}
+```
+
+其中，`xxx`表示定义文件的相对路径
+
+## 更新说明
+
+* 0.0.1
+
+  初始版本，仅包含框架定义和crud组件基础配置
+* 0.0.2
+
+  - 补充了curd基础配置一些缺失的配置项
+  - 添加了avue全局api定义
+* 0.0.3
+
+  - 将AVue全局重命名为Avue
+  - 添加了全局定义
+  - crud组件 添加了部分参数
+  - crud组件 修改了部分参数的默认值和定义
+* 0.0.4
+
+  - crud组件 添加表单打开模式定时
+  - crud组件 修复column为object导致无法使用对象属性方法的bug
+
+* 1.0.0
+  更新avue版本为2.9.12
+
+* 1.0.1
+  - 完善了全局API中$DialogForm的定义
+
+* 1.0.2
+  - 完善了Curd组件的定义
+
+* 1.0.3
+  - 添加了对Crud/Form组件配置中方法row(行数据)定义的支持
+  - 完善了Form组件的定义
+  - 修正了Crud组件option配置中未支持Form组件部分公共定义的bug

package/types/avue.d.ts

@@ -0,0 +1,33 @@
+import { Vue as _Vue } from 'vue';
+import { AvueComponent, AvueComponentSize, AvueAlignment } from './global';
+
+import { AvueCrud } from './crud';
+import { AvueForm } from './form';
+
+export interface InstallationOptions {
+  locale: any;
+  i18n: any;
+  size: AvueComponentSize;
+  menuType: 'button' | 'icon' | 'text' | 'menu';
+}
+
+/** Avue的版本号 */
+export const version: string;
+
+/**
+ * 将Avue组件安装至Vue
+ * 使用`Vue.use(Avue)`进行安装
+ */
+export function install(vue: typeof _Vue, options: InstallationOptions): void;
+
+/** Avue组件公共定义 */
+export type Component = AvueComponent;
+
+/** 对齐方式 */
+export type Alignment = AvueAlignment;
+
+/** Crud表格组件 */
+export class Crud extends AvueCrud {}
+
+/** Crud表格组件 */
+export class Form extends AvueForm {}

package/types/crud/column.d.ts

@@ -0,0 +1,383 @@
+import { CreateElement, VNode } from 'vue';
+import { RenderHeaderData, TableColumn, TableColumnFilter } from 'element-ui/types/table-column';
+import { PopoverPlacement } from 'element-ui/types/popover';
+import { AvueAlignment, Obj } from '../global';
+import { FormColumnEventParams, AvueFormBaseColumn, AvueFormColumn, FormColumnEvent } from '../form/column';
+
+/**
+ * 表单项事件参数，适用于click|blur|focus
+ */
+export interface CrudColumnEventParams<T = Obj> extends FormColumnEventParams {
+  /** 所在行 */
+  index: number;
+  /** 行数据 */
+  row: T;
+  /** 列配置 */
+  column: AvueCrudColumn<T>;
+  /**
+   * 值的label
+   * @description 如果表单项type为选项的，则为选项的label，否则等同于value
+   */
+  label: any;
+}
+
+/** 表格项通用参数 */
+export interface CrudBaseColumn {
+  /** 列类型, 默认: 'input' */
+  type?: string;
+  /** 对应列内容的字段名 */
+  prop?: string;
+  /** 显示的标题 */
+  label: string;
+  /** 自定义组件名 */
+  component?: string;
+  /**
+   * 是否隐藏列, 默认: false
+   * @default false
+   */
+  hide?: boolean;
+  /**
+   * 是否加入动态现隐列, 默认: true
+   * @default true
+   */
+  showColumn?: boolean;
+  /** 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件, 默认: false */
+  sortable?: boolean | 'custom';
+  /** 子列配置 */
+  children?: AvueCrudColumn[];
+  /** 列标题 Label 区域渲染使用的 Function */
+  renderHeader?: (h: CreateElement, data: RenderHeaderData) => VNode | string;
+  /**
+   * 是否允许行内编辑, 默认: false
+   * @default false
+   */
+  cell?: boolean;
+  /**
+   * 开启html转义, 默认: false
+   * @default false
+   * @since 2.8.23
+   */
+  html?: boolean;
+  /**
+   * 内容格式化，配合html参数可返回html
+   * @param row 行数据
+   * @param value 当前行列对应项的值
+   * @param res formatter前的解析结果
+   * @param column 列配置
+   * @since 2.6.16
+   */
+  formatter?: (row: T, value: any, res: any, column: AvueCrudColumn) => string;
+  /**
+   * 表格打开表单的时候是否重新拉取字典, 默认: false
+   * @default false
+   */
+  dicFlag?: boolean;
+  /**
+   * 是否开启列自定义, 默认: false
+   * @default false
+   * @deprecated 2.8.0
+   */
+  slot?: boolean;
+  /**
+   * 是否开启表头自定义, 默认: false
+   * @default false
+   * @since 2.7.8
+   * @deprecated 2.8.0
+   */
+  headerslot?: boolean;
+}
+
+/** 表格项样式配置 */
+export interface CrudColumnStyleOption {
+  /** 当内容过长被隐藏时显示tooltip, 默认: false */
+  overHidden: boolean;
+  /** 对应列的宽度 */
+  width: string | number;
+  /** 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 */
+  minWidth: string | number;
+  /** 表头对齐方式, 默认: 'center' */
+  headerAlign: AvueAlignment;
+  /** 表格列齐方式, 默认: 'center' */
+  align: AvueAlignment;
+  /** 列是否固定在左侧或者右侧，true 表示固定在左侧 */
+  fixed: boolean | 'left' | 'right';
+}
+
+/** 表格项通用搜索相关配置 */
+export interface CrudColumnSearchOption {
+  /** 是否搜索项, 默认: false */
+  search: boolean;
+  /** 自定义搜索组件 */
+  searchComponent: string;
+  /**
+   * 搜索项默认值
+   * @since 2.8.21
+   */
+  searchValue: any;
+  /**
+   * 搜索项placeholder
+   * @since 2.8.20
+   */
+  searchPlaceholder: string;
+  /**
+   * 搜索项弹窗编辑文字提示
+   * @since 2.8.20
+   */
+  searchTip: string;
+  /**
+   * 搜索项搜索框辅助文字提示展示方向
+   * @since 2.8.20
+   */
+  searchTipPlacement: PopoverPlacement;
+  /** 搜索项的长度, 默认: 6 */
+  searchSpan: number;
+  /**
+   * 组件尺寸
+   * @since 2.6.0
+   */
+  searchSize: AvueComponentSize;
+  /**
+   * 搜索项排序
+   * @since 2.8.20
+   */
+  searchOrder: number;
+  /** 搜索项之间的间距, 默认: 20 */
+  searchGutter: number;
+  /**
+   * 搜索项类型
+   *
+   * Tip: 若未填写该项，则搜索项的类型如下：
+   *
+   * 'radio', 'checkbox', 'switch' -> 'select'
+   *
+   * 'textarea' -> 'input'
+   *
+   * 时间类型的，如果searchRange为true，则为对应时间类型的范围搜索，否则为时间类型(本身有范围的，取消范围)
+   *
+   * 其余的，同type
+   */
+  searchType: string;
+  /** 是否范围搜索, 默认: false */
+  searchRange: boolean;
+  /** 搜索项label, 默认: 同label */
+  searchLabel: string;
+  /** 搜索项label的宽度, 默认: 80 */
+  searchLabelWidth: number;
+  /** 搜索项label的定位, 默认: 'right' */
+  searchLabelPosition: AvueAlignment;
+  /**
+   * 搜索框的清除按钮
+   * @since 2.8.20
+   */
+  searchClearable: boolean;
+  /**
+   * 搜索表单是否多选（仅对支持multiple参数的组件生效）
+   * @since 2.8.20
+   */
+  searchMultiple: boolean;
+  /**
+   * 多选时是否将选中值按文字的形式展示（仅对支持tag参数的组件生效）
+   * @since 2.8.20
+   */
+  searchTags: boolean;
+  /**
+   * 搜索项校验规则
+   * @since 2.8.21
+   */
+  searchRules: Obj[];
+  /**
+   * 搜索项是否单独成行, 默认: false
+   * @since 2.85.22
+   */
+  searchRow: boolean;
+  /**
+   * 搜索项深结构数据绑定取值
+   * @since 2.9.12
+   */
+  searchBind: string;
+  /**
+   * 搜索项深结构数据绑定取值(官方版avue持续使用，自用版本自2.9.12中删除该项，改为searchBind)
+   * @since 2.9.3
+   * @deprecated 2.9.12
+   */
+  searchBin: string;
+  /**
+   * 搜索项是否禁用, 默认: false
+   * @since 2.9.3
+   */
+  searchDisabled: boolean;
+  /**
+   * 搜索项是否只读, 默认: false
+   * @since 2.9.3
+   */
+  searchReadonly: boolean;
+  /**
+   * 是否可以输入搜索（仅对支持filterable参数的组件生效）
+   * @since 2.8.20
+   */
+  searchFilterable: boolean;
+  /**
+   * 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
+   * @param value 搜索值
+   * @param row 搜索表单值
+   * @param column el-table列配置
+   */
+  searchFilterMethod: (value: any, row: T, column: TableColumn) => boolean;
+  /**
+   * 表格搜索选项的自定义
+   * @since 2.2.3
+   * @deprecated 2.8.0
+   */
+  searchslot: boolean;
+}
+
+/** 表格项通用过滤相关配置 */
+export interface CrudColumnFilterOption {
+  /**
+   * 是否在动态搜索条件里面显示, 默认: true
+   * @default true
+   */
+  filter: boolean;
+  /** 数据过滤的选项 */
+  filters: TableColumnFilter[];
+  /** 数据过滤的选项是否多选, 默认: true */
+  filterMultiple: boolean;
+  /** 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 */
+  filterMethod: (value: any, row: T, column: TableColumn) => boolean;
+}
+
+/** 表格项表单相关配置 */
+export interface CrudFormColumnOption {
+  /**
+   * 表单是否为查看模式, 优先级高于addDetail/editDetail, 默认: false
+   * @description 2.8.19-21 版本不支持该参数
+   * @default false
+   * @since 2.5.3
+   */
+  detail: boolean;
+  /**
+   * 表单新增时是否为查看模式, 默认: false
+   * @description 2.8.19-21 版本不支持该参数
+   * @default false
+   * @since 2.5.3
+   */
+  addDetail: boolean;
+  /**
+   * 表单编辑时是否为查看模式, 默认: false
+   * @description 2.8.19-21 版本不支持该参数
+   * @default false
+   * @since 2.5.3
+   */
+  editDetail: boolean;
+  /**
+   * 表单是否为禁用, 优先级高于addDisabled/editDisabled, 默认: false
+   * @default false
+   */
+  disabled: boolean;
+  /**
+   * 表单新增时是否为禁用, 默认: false
+   * @default false
+   */
+  addDisabled: boolean;
+  /**
+   * 表单编辑时是否为禁用, 默认: false
+   * @default false
+   */
+  editDisabled: boolean;
+  /**
+   * 表单是否为可见, 优先级高于addDisplay/editDisplay/viewDisplay, 默认: false
+   * @default false
+   */
+  display: boolean;
+  /**
+   * 表单新增时是否为可见, 默认: false
+   * @default false
+   */
+  addDisplay: boolean;
+  /**
+   * 表单编辑时是否为可见, 默认: false
+   * @default false
+   */
+  editDisplay: boolean;
+  /**
+   * 表单查看时是否为可见, 默认: false
+   * @default false
+   */
+  viewDisplay: boolean;
+  /**
+   * 表单项是否单独成行, 默认: false
+   * @default false
+   */
+  row: boolean;
+  /**
+   * 是否可以清空选项, 默认: false
+   * @default false
+   */
+  clearable: boolean;
+}
+
+/** 表单项通用事件 */
+export interface CrudFormColumnEvent<T = Obj> {
+  /**
+   * 字段控制器, 不使用箭头函数
+   * @param value 表单项的值
+   * @param form 表单值
+   * @example https://avuejs.com/form/form-control.html
+   * @since 2.8.6
+   */
+  control: (value: any, form: T) => Record<string, Partial<AvueFormColumn>>;
+  /**
+   * 点击事件
+   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
+   * @since 2.9.6
+   */
+  click: (params: CrudColumnEventParams<T> | FormColumnEventParams) => void;
+  /**
+   * 值改变事件
+   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
+   * @since 2.9.6
+   */
+  change: (params: Omit<CrudColumnEventParams<T> | FormColumnEventParams, 'event'>) => void;
+  /**
+   * 聚焦事件
+   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
+   * @since 2.9.6
+   */
+  focus: (params: CrudColumnEventParams<T> | FormColumnEventParams) => void;
+  /**
+   * 失焦事件
+   * @description 当且仅当列为行编辑模式时为CrudColumnEventParams<T>
+   * @since 2.9.6
+   */
+  blur: (params: CrudColumnEventParams<T> | FormColumnEventParams) => void;
+  /**
+   * 回车事件
+   */
+  enter: (params: Pick<FormColumnEventParams, 'value' | 'column'>) => void;
+  /** 事件 */
+  event: Partial<Omit<CrudFormColumnEvent<T>, 'control' | 'event' | 'enter'>>;
+}
+
+/** 表格项通用参数 */
+export interface AvueCrudBaseColumn<T = Obj>
+  extends CrudBaseColumn,
+    Partial<CrudColumnStyleOption>,
+    Partial<CrudColumnSearchOption>,
+    Partial<CrudColumnFilterOption>,
+    Partial<CrudFormColumnOption>,
+    Partial<CrudFormColumnEvent<T>> {}
+
+/**
+ * 表格项配置
+ * TODO 表格项个性化配置待完成
+ */
+// export type AvueCrudColumn<T = Obj> = AvueCrudBaseColumn<T> &
+//   Omit<AvueFormColumn<T>, keyof FormColumnEvent<T>> & {
+//     /** 其他配置 */
+//     [x: string]: any;
+//   };
+export type AvueCrudColumn<T = Obj> = AvueCrudBaseColumn<T> &
+  Omit<AvueFormBaseColumn<T>, keyof FormColumnEvent<T>> & {
+    /** 其他配置 */
+    [x: string]: any;
+  };