@wlydfe/pro-ui 0.2.21 → 0.2.23

package/lib/types/plus.d.ts

@@ -0,0 +1,257 @@
+import { FormItemValueType, FormColumnProps, FieldValueType } from './form';
+import { TableValueType, TableColumnProps } from './table';
+import { RecordType } from './global';
+import { VNode, Ref, ComputedRef, Component } from 'vue';
+import { ElTooltipProps, ButtonType } from 'element-plus';
+
+export {};
+/**
+ * 渲染函数的返回值的类型
+ */
+export type RenderTypes = string | VNode | JSX.Element | Component;
+/**
+ * 分页参数
+ */
+export interface PageInfo {
+    /**
+     * 默认为1
+     */
+    page: number;
+    /**
+     * 默认为10
+     */
+    pageSize: number;
+}
+/**
+ *  自定义props类型  支持对象object，computed，函数和Promise
+ */
+export type PropsItemType<T extends Record<string, any> = any> = Partial<T> | ComputedRef<Partial<T>> | ((value: FieldValueType, data: {
+    row: Record<string, any>;
+    index: number;
+}) => Partial<T> | Promise<Partial<T>>) | Promise<Partial<T>>;
+/**
+ * 选择框类型
+ */
+export interface OptionsRow<T = undefined> {
+    /**
+     * @version v0.1.15 新增索引类型，用来支持optionsMap  @see /components/config.html
+     */
+    [index: keyof any]: any;
+    /**
+     * @version v0.1.15 变更为可选，用来支持optionsMap  @see /components/config.html
+     */
+    label?: number | string;
+    /**
+     * @version v0.1.7 新增 RecordType 类型
+     * @version v0.1.15 变更为可选，用来支持optionsMap  @see /components/config.html
+     */
+    value?: Exclude<number | string | boolean | RecordType, T>;
+    /**
+     * 小圆点背景色，仅在表格和描述列表中生效
+     * color 优先级 高于 type
+     */
+    color?: string;
+    /**
+     * 小圆点颜色类型，仅在表格和描述列表中生效
+     * type 优先级 低于 color，
+     * 只支持 'success' | 'warning' | 'info' | 'primary' | 'danger'
+     */
+    type?: Exclude<ButtonType, 'default' | 'text' | ''>;
+    /**
+     * 表单子项的props  如 el-checkbox-group下的el-checkbox的props
+     * @version v0.1.25 新增函数类型支持 ((item: OptionsRow) => RecordType)
+     */
+    fieldItemProps?: RecordType | ((item: OptionsRow) => RecordType);
+    /**
+     * el-checkbox-group下的，每一项el-checkbox的各自插槽(即el-checkbox的default插槽)。
+     * el-radio-group下的，每一项el-checkbox的内容各自插槽(即el-radio的default插槽)。
+     * el-select下的，每一项el-option的内容整体插槽(即el-option的default插槽)。
+     *
+     * @see https://element-plus.org/zh-CN/component/checkbox.html#checkbox-slots
+     * @see https://element-plus.org/zh-CN/component/radio.html#radio-slots
+     */
+    fieldSlot?: (option?: OptionsRow) => RenderTypes;
+    /**
+     * 子选项，仅valueType 为 `cascader` 时生效
+     */
+    children?: OptionsRow[];
+}
+/**
+ * 选择类型   支持数组，computed，函数和Promise
+ */
+export type OptionsType = OptionsRow[] | ComputedRef<OptionsRow[]> | ((props?: PlusColumn) => OptionsRow[] | Promise<OptionsRow[]>) | Promise<OptionsRow[]>;
+/**
+ * 共享类型
+ */
+export interface CommonType {
+    [index: string]: any;
+    /**
+     * 表格表头显示的标题 ；在form 中是 el-form-item的label；在descriptions 是 el-descriptions-item的label；
+     *  @version v0.0.10 修改为可选
+     *  @version v0.1.0 类型新增ComputedRef<string>
+     */
+    label?: string | ComputedRef<string>;
+    /**
+     * 表格对应列内容的字段名 ；在form 中是 el-input等所有表单项的双向绑定的值；在descriptions 是 el-descriptions-item的值对应的字段；
+     */
+    prop: string;
+    /**
+     *  表格宽
+     */
+    width?: string | number;
+    /**
+     *  表格最小宽
+     */
+    minWidth?: string | number;
+    /**
+     * @desc 当开启时  valueType 为 `FormItemValueType` 其中之一时 表格中显示的是对应的可编辑的表单
+     * @default false
+     */
+    editable?: boolean;
+    /**
+     * @desc 值的类型
+     */
+    valueType?: TableValueType | FormItemValueType;
+    /** @desc 在 PlusDescriptions组件中 隐藏 */
+    hideInDescriptions?: boolean | Ref<boolean> | ComputedRef<boolean>;
+    /** @desc 在 PlusForm 组件中隐藏 */
+    hideInForm?: boolean | Ref<boolean> | ComputedRef<boolean>;
+    /** @desc 在 PlusTable 组件中隐藏 */
+    hideInTable?: boolean | Ref<boolean> | ComputedRef<boolean>;
+    /** @desc 在 PlusSearch 中隐藏 */
+    hideInSearch?: boolean | Ref<boolean> | ComputedRef<boolean>;
+    /**
+     * 描述行，el-descriptions-item 的props
+     */
+    descriptionsItemProps?: RecordType;
+    /**
+     * el-select，el-radio-group，el-checkbox-group ,plus-radio选项 ，支持数组，函数，和Promise
+     */
+    options?: OptionsType;
+    /**
+     * @desc 对options 进行映射，仅对`valueType` 为 `select`|`radio`|`checkbox`|`plus-radio` 时生效
+     * @version v0.1.15
+     * @default{ label: 'label',value: 'value'}
+     */
+    optionsMap?: {
+        label?: string;
+        value?: string;
+    };
+    /**
+     *  自定义状态显示逻辑 需要返回一个 OptionsRow
+     * @param data
+     * @returns
+     */
+    customGetStatus?: (data: {
+        options: OptionsRow[];
+        value: string | number;
+        row: RecordType;
+    }) => OptionsRow;
+    /**
+     * @desc 展示一个 icon，hover 时展示一些提示信息
+     * @version v0.1.15 新增 `ComputedRef<string>`  | `ComputedRef<Partial<ElTooltipProps>>`
+     */
+    tooltip?: string | Partial<ElTooltipProps> | ComputedRef<string> | ComputedRef<Partial<ElTooltipProps>>;
+    /**
+     *
+     * @desc 自定义渲染表格单行显示内容 需要返回一个 VNode，`render`的优先级最高
+     * @example
+     * ```ts
+     * import { h } from 'vue'
+     * import { ElTag } from 'element-plus'
+     * import type { PlusColumn } from 'plus-pro-components'
+     *
+     * const tableColumns:PlusColumn[] = [
+     *  {
+     *     label: 'tag',
+     *     prop: 'tag',
+     *     render: value => {
+     *       const item = statusOptions.find(item => item.value === value)
+     *        return h(ElTag, { type: item.type }, () => item.label)
+     *     }
+     *  }
+     * ]
+     *
+     * ```
+     */
+    render?: (value: any, data: {
+        row: RecordType;
+        column: PlusColumn;
+        index: number;
+    }) => RenderTypes;
+    /**
+     * @desc  自定义渲染单行显示内容 需要返回一个 html字符串，`renderHTML`的优先级低于`render`，高于`valueType`。
+     * @desc **注意：renderHTML 内部使用`v-html`渲染，使用时需要保证 html字符串可信。**
+     * @example
+     * ```ts
+     *  import type { PlusColumn } from 'plus-pro-components'
+     *
+     *  const tableColumns:PlusColumn[] = [
+     *    {
+     *       label: '自定义',
+     *       prop: 'custom',
+     *       renderHTML: (value, { row }) => {
+     *         return `
+     *          <div>自定义: ${row.number || 0}</div>
+     *         `
+     *      }
+     *    }
+     *  ]
+     *
+     *```
+     */
+    renderHTML?: (value: any, data: {
+        row: RecordType;
+        column: PlusColumn;
+        index: number;
+    }) => string;
+    /**
+     * @desc 渲染table表单的Header
+     * @example
+     * ```ts
+     * import { h } from 'vue'
+     * import { ElButton } from 'element-plus'
+     * import type { PlusColumn } from 'plus-pro-components'
+     *
+     * const tableColumns:PlusColumn[] = [
+     *    {
+     *       label: '自定义',
+     *       prop: 'custom',
+     *       renderHeader:label => h(ElButton, null, () => label)
+     *    }
+     * ]
+     *
+     *```
+     */
+    renderHeader?: (label: string, props: PlusColumn) => RenderTypes;
+    /**
+     * 自定义el-descriptions-item 里的内容 优先级高于 render, renderHTML
+     */
+    renderDescriptionsItem?: (data: {
+        value: string;
+        column: PlusColumn;
+        row: RecordType;
+    }) => RenderTypes;
+    /**
+     * 自定义el-descriptions-item 里的label
+     */
+    renderDescriptionsLabel?: (data: {
+        label: string;
+        column: PlusColumn;
+        row: RecordType;
+    }) => RenderTypes;
+    /**
+     * PlusSearch 查询表单中的权重，权重大排序靠前，在PlusPage组件中非常有用
+     */
+    order?: number | ComputedRef<number>;
+    /**
+     * @version 0.1.19
+     * 多级表头
+     */
+    children?: PlusColumn[];
+}
+/**
+ * 表格，表单，详情，搜索公共的类型
+ */
+export interface PlusColumn extends CommonType, TableColumnProps, FormColumnProps {
+}

package/lib/types/plus.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/types/table.d.ts

@@ -0,0 +1,55 @@
+import { PlusColumn } from './plus';
+import { RecordType } from './global';
+import { TableColumnCtx } from 'element-plus';
+
+export {};
+/**
+ * 所有表格的类型 默认是 ''
+ */
+export type TableValueType = 'img' | 'link' | 'money' | 'tag' | 'progress' | 'copy' | 'code' | 'divider' | 'avatar' | '';
+/**
+ *  表格的类型
+ */
+export type TableColumnProps = {
+    /**
+     *  @desc 禁止表头过滤 默认`false`
+     *  @deprecated 请使用 `disabledHeaderFilter` 代替
+     */
+    headerFilter?: boolean;
+    /**
+     *  @desc 禁止表头过滤 默认`false`
+     */
+    disabledHeaderFilter?: boolean;
+    /**
+     * 表头过滤中默认是否勾选
+     * @version v0.1.22 新增
+     * @default true
+     */
+    headerIsChecked?: boolean;
+    /**
+     * @desc 表格行的其他配置 （不包含label prop width minWidth）
+     */
+    tableColumnProps?: Partial<Omit<TableColumnCtx<any>, 'label ' | 'prop' | 'width' | 'minWidth'> & {
+        [key: string]: any;
+    }>;
+    /**
+     * @desc 图片预览  默认开启  给 false 关闭  仅当 valueType 等于 img 时有效，
+     */
+    preview?: boolean;
+    /**
+     * @desc  el-link 的文字 valueType 等于 link 时生效 ，默认取得是 prop 对应的表格数据
+     *
+     * 使用场景：例如每列都要显示 一个 `下载` 固定不变
+     */
+    linkText?: string;
+    /**
+     * @desc 格式化表格内容显示
+     * @version v0.1.12 新增
+     * @see https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7
+     */
+    formatter?: (value: any, data: {
+        row: RecordType;
+        column: PlusColumn;
+        index: number;
+    }) => string | number;
+};

package/lib/types/table.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "0.2.23";

package/lib/version.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const version = "0.2.23";
+
+exports.version = version;

package/locale/en.d.ts

@@ -0,0 +1,69 @@
+declare const _default: {
+    name: string;
+    plus: {
+        dialog: {
+            confirmText: string;
+            cancelText: string;
+            title: string;
+        };
+        datepicker: {
+            startPlaceholder: string;
+            endPlaceholder: string;
+        };
+        dialogForm: {
+            title: string;
+        };
+        drawerForm: {
+            title: string;
+            confirmText: string;
+            cancelText: string;
+        };
+        form: {
+            submitText: string;
+            resetText: string;
+            errorTip: string;
+        };
+        field: {
+            pleaseEnter: string;
+            pleaseSelect: string;
+        };
+        popover: {
+            confirmText: string;
+            cancelText: string;
+        };
+        search: {
+            searchText: string;
+            resetText: string;
+            expand: string;
+            retract: string;
+        };
+        table: {
+            title: string;
+            density: string;
+            refresh: string;
+            columnSettings: string;
+            selectAll: string;
+            default: string;
+            loose: string;
+            compact: string;
+            action: string;
+            more: string;
+            confirmToPerformThisOperation: string;
+            prompt: string;
+            sort: string;
+            resetText: string;
+        };
+        stepsForm: {
+            nextText: string;
+            preText: string;
+            submitText: string;
+        };
+        inputTag: {
+            placeholder: string;
+        };
+        header: {
+            logout: string;
+        };
+    };
+};
+export default _default;

package/locale/en.js

@@ -0,0 +1,80 @@
+/*! @wlydfe/pro-ui v0.2.23 */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.PlusProComponentsLocaleEn = factory());
+})(this, (function () { 'use strict';
+
+  var en = {
+    name: "en",
+    plus: {
+      dialog: {
+        confirmText: "Yes",
+        cancelText: "No",
+        title: "Dialog"
+      },
+      datepicker: {
+        startPlaceholder: "Please select start time",
+        endPlaceholder: "Please select end time"
+      },
+      dialogForm: {
+        title: "Dialog form"
+      },
+      drawerForm: {
+        title: "Drawer form",
+        confirmText: "Yes",
+        cancelText: "No"
+      },
+      form: {
+        submitText: "Submit",
+        resetText: "Reset",
+        errorTip: "Please complete the form and submit again!"
+      },
+      field: {
+        pleaseEnter: "Please enter ",
+        pleaseSelect: "Please select "
+      },
+      popover: {
+        confirmText: "Yes",
+        cancelText: "No"
+      },
+      search: {
+        searchText: "Search",
+        resetText: "Reset",
+        expand: "Expand",
+        retract: "Retract"
+      },
+      table: {
+        title: "Table",
+        density: "Density",
+        refresh: "Refresh",
+        columnSettings: "Column settings",
+        selectAll: "Select all",
+        default: "Default",
+        loose: "Loose",
+        compact: "Compact",
+        action: "Action",
+        more: "More",
+        confirmToPerformThisOperation: "Confirm to perform this operation?",
+        prompt: "Prompt",
+        sort: "Sort",
+        resetText: "Reset"
+      },
+      stepsForm: {
+        nextText: "Next step",
+        preText: "Previous step",
+        submitText: "Submit"
+      },
+      inputTag: {
+        placeholder: "Please enter keywords and press enter or space key"
+      },
+      header: {
+        logout: "logout"
+      }
+    }
+  };
+
+  return en;
+
+}));

package/locale/en.min.js

@@ -0,0 +1 @@
+/*! @wlydfe/pro-ui v0.2.23 */(function(e,t){typeof exports=="object"&&typeof module!="undefined"?module.exports=t():typeof define=="function"&&define.amd?define(t):(e=typeof globalThis!="undefined"?globalThis:e||self,e.PlusProComponentsLocaleEn=t())})(this,function(){"use strict";var e={name:"en",plus:{dialog:{confirmText:"Yes",cancelText:"No",title:"Dialog"},datepicker:{startPlaceholder:"Please select start time",endPlaceholder:"Please select end time"},dialogForm:{title:"Dialog form"},drawerForm:{title:"Drawer form",confirmText:"Yes",cancelText:"No"},form:{submitText:"Submit",resetText:"Reset",errorTip:"Please complete the form and submit again!"},field:{pleaseEnter:"Please enter ",pleaseSelect:"Please select "},popover:{confirmText:"Yes",cancelText:"No"},search:{searchText:"Search",resetText:"Reset",expand:"Expand",retract:"Retract"},table:{title:"Table",density:"Density",refresh:"Refresh",columnSettings:"Column settings",selectAll:"Select all",default:"Default",loose:"Loose",compact:"Compact",action:"Action",more:"More",confirmToPerformThisOperation:"Confirm to perform this operation?",prompt:"Prompt",sort:"Sort",resetText:"Reset"},stepsForm:{nextText:"Next step",preText:"Previous step",submitText:"Submit"},inputTag:{placeholder:"Please enter keywords and press enter or space key"},header:{logout:"logout"}}};return e});

package/locale/en.min.mjs

@@ -0,0 +1 @@
+/*! @wlydfe/pro-ui v0.2.23 */var e={name:"en",plus:{dialog:{confirmText:"Yes",cancelText:"No",title:"Dialog"},datepicker:{startPlaceholder:"Please select start time",endPlaceholder:"Please select end time"},dialogForm:{title:"Dialog form"},drawerForm:{title:"Drawer form",confirmText:"Yes",cancelText:"No"},form:{submitText:"Submit",resetText:"Reset",errorTip:"Please complete the form and submit again!"},field:{pleaseEnter:"Please enter ",pleaseSelect:"Please select "},popover:{confirmText:"Yes",cancelText:"No"},search:{searchText:"Search",resetText:"Reset",expand:"Expand",retract:"Retract"},table:{title:"Table",density:"Density",refresh:"Refresh",columnSettings:"Column settings",selectAll:"Select all",default:"Default",loose:"Loose",compact:"Compact",action:"Action",more:"More",confirmToPerformThisOperation:"Confirm to perform this operation?",prompt:"Prompt",sort:"Sort",resetText:"Reset"},stepsForm:{nextText:"Next step",preText:"Previous step",submitText:"Submit"},inputTag:{placeholder:"Please enter keywords and press enter or space key"},header:{logout:"logout"}}};export{e as default};

package/locale/en.mjs

@@ -0,0 +1,72 @@
+/*! @wlydfe/pro-ui v0.2.23 */
+
+var en = {
+  name: "en",
+  plus: {
+    dialog: {
+      confirmText: "Yes",
+      cancelText: "No",
+      title: "Dialog"
+    },
+    datepicker: {
+      startPlaceholder: "Please select start time",
+      endPlaceholder: "Please select end time"
+    },
+    dialogForm: {
+      title: "Dialog form"
+    },
+    drawerForm: {
+      title: "Drawer form",
+      confirmText: "Yes",
+      cancelText: "No"
+    },
+    form: {
+      submitText: "Submit",
+      resetText: "Reset",
+      errorTip: "Please complete the form and submit again!"
+    },
+    field: {
+      pleaseEnter: "Please enter ",
+      pleaseSelect: "Please select "
+    },
+    popover: {
+      confirmText: "Yes",
+      cancelText: "No"
+    },
+    search: {
+      searchText: "Search",
+      resetText: "Reset",
+      expand: "Expand",
+      retract: "Retract"
+    },
+    table: {
+      title: "Table",
+      density: "Density",
+      refresh: "Refresh",
+      columnSettings: "Column settings",
+      selectAll: "Select all",
+      default: "Default",
+      loose: "Loose",
+      compact: "Compact",
+      action: "Action",
+      more: "More",
+      confirmToPerformThisOperation: "Confirm to perform this operation?",
+      prompt: "Prompt",
+      sort: "Sort",
+      resetText: "Reset"
+    },
+    stepsForm: {
+      nextText: "Next step",
+      preText: "Previous step",
+      submitText: "Submit"
+    },
+    inputTag: {
+      placeholder: "Please enter keywords and press enter or space key"
+    },
+    header: {
+      logout: "logout"
+    }
+  }
+};
+
+export { en as default };

package/locale/ja.d.ts

@@ -0,0 +1,69 @@
+declare const _default: {
+    name: string;
+    plus: {
+        dialog: {
+            confirmText: string;
+            cancelText: string;
+            title: string;
+        };
+        datepicker: {
+            startPlaceholder: string;
+            endPlaceholder: string;
+        };
+        dialogForm: {
+            title: string;
+        };
+        drawerForm: {
+            title: string;
+            confirmText: string;
+            cancelText: string;
+        };
+        form: {
+            submitText: string;
+            resetText: string;
+            errorTip: string;
+        };
+        field: {
+            pleaseEnter: string;
+            pleaseSelect: string;
+        };
+        popover: {
+            confirmText: string;
+            cancelText: string;
+        };
+        search: {
+            searchText: string;
+            resetText: string;
+            expand: string;
+            retract: string;
+        };
+        table: {
+            title: string;
+            density: string;
+            refresh: string;
+            columnSettings: string;
+            selectAll: string;
+            default: string;
+            loose: string;
+            compact: string;
+            action: string;
+            more: string;
+            confirmToPerformThisOperation: string;
+            prompt: string;
+            sort: string;
+            resetText: string;
+        };
+        stepsForm: {
+            nextText: string;
+            preText: string;
+            submitText: string;
+        };
+        inputTag: {
+            placeholder: string;
+        };
+        header: {
+            logout: string;
+        };
+    };
+};
+export default _default;