@wlydfe/pro-ui 0.2.0

package/lib/locale/lang/zh-cn.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const zhCn = {
+  name: "zh-cn",
+  plus: {
+    dialog: {
+      confirmText: "\u786E\u5B9A",
+      cancelText: "\u53D6\u6D88",
+      title: "\u5F39\u7A97"
+    },
+    datepicker: {
+      startPlaceholder: "\u8BF7\u9009\u62E9\u5F00\u59CB\u65F6\u95F4",
+      endPlaceholder: "\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4"
+    },
+    dialogForm: {
+      title: "\u5F39\u7A97\u8868\u5355"
+    },
+    drawerForm: {
+      title: "\u62BD\u5C49\u8868\u5355"
+    },
+    form: {
+      submitText: "\u63D0\u4EA4",
+      resetText: "\u91CD\u7F6E",
+      errorTip: "\u8BF7\u5B8C\u6574\u586B\u5199\u8868\u5355\u7136\u540E\u518D\u6B21\u63D0\u4EA4\uFF01"
+    },
+    field: {
+      pleaseEnter: "\u8BF7\u8F93\u5165",
+      pleaseSelect: "\u8BF7\u9009\u62E9"
+    },
+    popover: {
+      confirmText: "\u786E\u5B9A",
+      cancelText: "\u53D6\u6D88"
+    },
+    search: {
+      searchText: "\u641C\u7D22",
+      resetText: "\u91CD\u7F6E",
+      expand: "\u5C55\u5F00",
+      retract: "\u6536\u8D77"
+    },
+    table: {
+      title: "\u8868\u683C",
+      density: "\u5BC6\u5EA6",
+      refresh: "\u5237\u65B0",
+      columnSettings: "\u5217\u8BBE\u7F6E",
+      selectAll: "\u5168\u9009",
+      default: "\u9ED8\u8BA4",
+      loose: "\u5BBD\u677E",
+      compact: "\u7D27\u51D1",
+      action: "\u64CD\u4F5C",
+      more: "\u66F4\u591A",
+      confirmToPerformThisOperation: "\u786E\u5B9A\u6267\u884C\u672C\u6B21\u64CD\u4F5C?",
+      prompt: "\u63D0\u793A",
+      sort: "\u6392\u5E8F"
+    },
+    stepsForm: {
+      nextText: "\u4E0B\u4E00\u6B65",
+      preText: "\u4E0A\u4E00\u6B65",
+      submitText: "\u63D0\u4EA4"
+    },
+    inputTag: {
+      placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u540E\u6309\u56DE\u8F66/\u7A7A\u683C\u952E"
+    },
+    header: {
+      logout: "\u9000\u51FA\u767B\u5F55"
+    }
+  }
+};
+
+exports.default = zhCn;

package/lib/make-installer.d.ts

@@ -0,0 +1,4 @@
+import type { App, Component, Directive } from 'vue';
+export declare const makeInstaller: (components?: Component[], directives?: Record<string, Directive>) => {
+    install: (app: App) => void;
+};

package/lib/make-installer.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const makeInstaller = (components = [], directives = {}) => {
+  const install = (app) => {
+    components.forEach((component) => app.component(component.name, component));
+    Object.keys(directives).forEach((key) => app.directive(key, directives[key]));
+  };
+  return {
+    install
+  };
+};
+
+exports.makeInstaller = makeInstaller;

package/lib/theme-chalk/src/breadcrumb.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/check-card-group.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/check-card.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/date-picker.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/descriptions.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/dialog-form.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/dialog.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/display-item.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/drawer-form.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/form-item.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/form.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/header.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/input-tag.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/layout.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/page.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/pagination.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/popover.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/radio.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/search.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/sidebar.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/steps-form.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/theme-chalk/src/table.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const undefined$1 = undefined;
+
+exports.default = undefined$1;

package/lib/types/form.d.ts

@@ -0,0 +1,234 @@
+import type { VNode, Ref, ComputedRef, ExtractPropTypes, CSSProperties } from 'vue';
+import type { FormItemProps, ColProps, AutocompleteProps, cascaderProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputNumberProps, RadioGroupProps, RateProps, SelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps } from 'element-plus';
+import type { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select';
+import type { PlusFormProps } from '@wlydfe/pro-ui-components/form';
+import type { PlusRadioProps } from '@wlydfe/pro-ui-components/radio';
+import type { PlusDatePickerProps } from '@wlydfe/pro-ui-components/date-picker';
+import type { PlusInputTagProps } from '@wlydfe/pro-ui-components/input-tag';
+import type { PropsItemType, PlusColumn, OptionsRow } from './plus';
+import type { Mutable } from './global';
+export {};
+/**
+ * 级联类型
+ */
+export type CascaderProps = ExtractPropTypes<typeof cascaderProps>;
+/**
+ * 原生input所有的type类型
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+ */
+export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+/**
+ * 需要去除或者需要重新定义的类型
+ */
+export type OmitTypes = 'modelValue' | 'src' | 'autocomplete' | 'type' | 'loading' | 'step' | 'format' | 'filterMethod' | 'id' | 'effect' | 'height';
+/**
+ * 表单和现实组件所有字段类型
+ */
+export type FieldProps = Partial<{
+    [key: string]: any;
+    style: CSSProperties;
+    /**
+     * @desc 输入框行数，仅 type 为 'textarea' 时有效
+     * @desc 补充element-plus input:type='textarea' 时的ts类型缺失
+     */
+    rows: number;
+    autocomplete: string;
+    /**
+     * type 类型
+     */
+    type: DatePickerProps['type'] | TextProps['type'] | LinkProps['type'] | ProgressProps['type'] | InputType | 'textarea';
+    /**
+     *@desc `valueType` 为 `img `时是 `"lazy" | "eager"`，其余是`boolean`类型
+     */
+    loading: SwitchProps['loading'] | ImageProps['loading'];
+    /**
+     * @desc `valueType` 为 `time-select` 时是`string`类型， 其余是`number`类型
+     */
+    step: SliderProps['step'] | TimeSelectProps['step'] | InputNumberProps['step'];
+    /**
+     *@desc `valueType` 为 `progress` 时是函数类型，其余是字符串类型
+     */
+    format: DatePickerProps['format'] | TimePickerDefaultProps['format'] | TimeSelectProps['format'] | ProgressProps['format'];
+    /**
+     * @desc `valueType` 为 `cascader` 时是`(node: Node, keyword: string) => boolean`类型
+     * @desc `valueType` 为 `select` 时是`() => void`类型
+     */
+    filterMethod: CascaderProps['filterMethod'] | SelectProps['filterMethod'];
+    /**
+     * @desc `valueType` 为 `date-picker` 时**可能**是`[string, string]`类型，其余是`string`类型
+     */
+    id: string | [string, string];
+    /**
+     * @desc el-select，el-time-select 的 effect
+     */
+    effect: SelectProps['effect'];
+    /**
+     * @desc `valueType` 为 `slider` 时是`string`类型，其余是`number`类型
+     */
+    height: string | number;
+} & Mutable<Omit<AutocompleteProps, OmitTypes> & Omit<CascaderProps, OmitTypes> & Omit<CheckboxGroupProps, OmitTypes> & Omit<ColorPickerProps, OmitTypes> & Omit<DatePickerProps, OmitTypes> & Omit<InputProps, OmitTypes> & Omit<InputNumberProps, OmitTypes> & Omit<RadioGroupProps, OmitTypes> & Omit<RateProps, OmitTypes> & Omit<SelectProps, OmitTypes> & Omit<SliderProps, OmitTypes> & Omit<SwitchProps, OmitTypes> & Omit<TimePickerDefaultProps, OmitTypes> & Omit<TimeSelectProps, OmitTypes> & Omit<PlusRadioProps, OmitTypes> & Omit<PlusDatePickerProps, OmitTypes> & Omit<PlusInputTagProps, OmitTypes> & Omit<TextProps, OmitTypes> & Omit<ImageProps, OmitTypes> & Omit<LinkProps, OmitTypes> & Omit<TagProps, OmitTypes> & Omit<ProgressProps, OmitTypes>>>;
+/**
+ * 所有表单的类型 默认是  input
+ */
+export type FormItemValueType = 'autocomplete' | 'cascader' | 'checkbox' | 'color-picker' | 'date-picker' | 'input-number' | 'radio' | 'rate' | 'select' | 'slider' | 'switch' | 'time-picker' | 'time-select' | 'textarea' | 'input' | 'text' | 'plus-radio' | 'plus-date-picker' | 'plus-input-tag' | undefined;
+/**
+ * 表单项的props
+ */
+export interface FormColumnProps {
+    /**
+     * @desc 传递给 PlusForm的配置， 支持所有 el-form的props。值支持对象object。
+     */
+    formProps?: PropsItemType<PlusFormProps>;
+    /**
+     * @desc 传递给 el-form-item 的配置， 支持所有 el-form-item的props。值支持对象 object，computed，函数和 Promise。
+     */
+    formItemProps?: PropsItemType<Mutable<FormItemProps> & {
+        [key: string]: any;
+        style?: CSSProperties;
+    }>;
+    /**
+     * @desc 支持类似el-input，el-select等所有表单项的props 以及 表格显示的每行 props。值支持对象 object，computed，函数和 Promise。
+     */
+    fieldProps?: PropsItemType<FieldProps>;
+    /**
+     * @desc 自定义渲染 el-form-item 下的field-item组件。
+     * @example
+     * ```ts
+     * import { h } from 'vue'
+     * import { ElTag } from 'element-plus'
+     * import type { PlusColumn } from 'pro-ui'
+  
+     * const columns:PlusColumn[]= [
+     *  {
+     *    label: '自定义el-input',
+     *    prop: 'elData',
+     *    fieldProps: {
+     *     // 优先级低于 renderField 的props
+     *      placeholder: '请输入'
+     *    },
+     *     renderField: (value, onChange) => {
+     *        return h(ElInput as any, {
+     *         // 优先级高于 fieldProps
+     *           placeholder: '请输入自定义el-input',
+     *           type: 'textarea',
+     *           onChange
+     *      })
+     *  }
+     * ]
+     *
+     * ```
+     */
+    renderField?: (value: FieldValueType, onChange: (value: FieldValueType) => void, props: PlusColumn) => VNode | string;
+    /**
+     * @desc el-col 的 props
+     */
+    colProps?: Partial<Mutable<ColProps>>;
+    /**
+     * 表单中单个项目是否需要 label，默认undefined，优先级高于表单的整体 hasLabel
+     */
+    hasLabel?: boolean | Ref<boolean> | ComputedRef<boolean>;
+    /**
+     * @desc 渲染form表单的label
+     * @example
+     * ```ts
+     * import { ref, h } from 'vue'
+     * import { ElButton } from 'element-plus'
+     * import type { PlusColumn } from 'pro-ui'
+     *
+     * const columns: PlusColumn[] = [
+     *   {
+     *    label: '名称',
+     *    prop: 'name',
+     *    renderLabel:() => 'renderExtra'
+     *   },
+     *   {
+     *    label: '标签',
+     *    prop: 'tag',
+     *    renderLabel: () => h(ElButton,'tag')
+     *   }
+     * ]
+     *
+     * ```
+     */
+    renderLabel?: (label: string, props: PlusColumn) => VNode | string;
+    /**
+     * @desc  渲染el-form-item 下一行额外的内容
+     * @example
+     * ```ts
+     * import { ref, h } from 'vue'
+     * import { ElButton } from 'element-plus'
+     * import type { PlusColumn } from 'pro-ui'
+     *
+     * const columns: PlusColumn[] = [
+     *   {
+     *    label: '名称',
+     *    prop: 'name',
+     *    renderExtra:() => 'renderExtra'
+     *   },
+     *   {
+     *    label: '标签',
+     *    prop: 'tag',
+     *    renderExtra: () => h(ElButton,'tag')
+     *   }
+     * ]
+     *
+     * ```
+     */
+    renderExtra?: (column: PlusColumn) => VNode | string;
+    /**
+     * @desc 表单（表格）单个项目的插槽，支持类似el-input，el-select， el-image ，el-link等所有表单（表格）单项的插槽
+     * @example
+     * ```ts
+     * import { ref, h } from 'vue'
+     * import { Search } from '@element-plus/icons-vue'
+     * import { ElIcon } from 'element-plus'
+     * import type { PlusColumn } from 'pro-ui'
+     *
+     * const columns: PlusColumn[] = [
+     *  {
+     *   label: '名称',
+     *   prop: 'name',
+     *   fieldSlots: {
+     *     suffix: () => h(ElIcon, null, () => h(Search)),
+     *     prefix: () => 'prefix',
+     *     prepend: () => 'prepend',
+     *     append: () => 'append'
+     *   }
+     *  },
+     *  {
+     *   label: '链接',
+     *   prop: 'place',
+     *   valueType: 'link',
+     *   linkText: 'link',
+     *   fieldSlots: {
+     *     default: () => 'prefix'
+     *   }
+     *  },
+     * ]
+     *
+     * ```
+     */
+    fieldSlots?: {
+        [slotName: string]: (data?: any) => VNode | string;
+    };
+    /**
+     *
+     * 自定义表单每一项子项的插槽 valueType 为 `checkbox` | `radio` | `select` |`plus-radio` 之一时生效。
+     * 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
+     * @see https://element-plus.gitee.io/zh-CN/component/select.html#option-slots
+     */
+    fieldChildrenSlot?: (option?: OptionsRow) => VNode | string;
+}
+/**
+ * 通用的单个表单值的类型
+ */
+export type FieldValueType = string | number | boolean | null | undefined | Date | string[] | number[] | boolean[] | Date[] | [Date, Date] | [number, number] | [string, string] | string[][] | number[][];
+/**
+ * 通用的整体表单值的类型
+ */
+export type FieldValues = Record<keyof any, FieldValueType>;

package/lib/types/form.js

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

package/lib/types/global.d.ts

@@ -0,0 +1,29 @@
+export {};
+/**
+ * ref 绑定的元素类型
+ */
+export type ElementRefType = HTMLElement | null;
+/**
+ * setTimeout 类型
+ */
+export type Timeout = ReturnType<typeof setTimeout>;
+/**
+ * setInterval 类型
+ */
+export type Interval = ReturnType<typeof setInterval>;
+/**
+ * 普通的对象的泛型
+ */
+export type RecordType = {
+    [index: string]: any;
+};
+/**
+ * 允许null的泛型
+ */
+export type Nullable<T> = T | null;
+/**
+ * 去除只读状态
+ */
+export type Mutable<T extends Record<string, any>> = {
+    -readonly [K in keyof T]: T[K];
+};

package/lib/types/global.js

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

package/lib/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './global';
+export * from './plus';
+export * from './form';
+export * from './table';
+export * from './layout';

package/lib/types/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./global.js');
+require('./plus.js');
+require('./form.js');
+require('./table.js');
+require('./layout.js');
+

package/lib/types/layout.d.ts

@@ -0,0 +1,43 @@
+import type { RouteRecordRaw } from 'vue-router';
+import type { VNode, Component } from 'vue';
+/**
+ * 路由配置类型
+ *
+ * @description 继承自 vue-router 的 RouteRecordRaw，无侵入，仅仅只扩展 meta，meta除了扩展的属性外，同时支持添加任意自定义属性，
+ * 外链的话  path给   '/'+链接   例： `/https://element-plus.org`
+ *
+ */
+export type PlusRouteRecordRaw = Partial<Omit<RouteRecordRaw, 'children'>> & {
+    /**
+     * meta除了扩展的属性外，同时支持添加任意自定义属性
+     *
+     */
+    meta?: {
+        /**
+         * 页面标题   标题存在面包屑和菜单名称显示标题  不存在显示路由的 name  name不存在显示路由的 path
+         */
+        title?: string;
+        /**
+         * 图标
+         */
+        icon?: Component | VNode | ((route: PlusRouteRecordRaw) => VNode);
+        /**
+         * 排序，默认为0 只对第一级有效
+         */
+        sort?: number;
+        /**
+         * 在侧边栏菜单中隐藏，默认false 不隐藏
+         */
+        hideInMenu?: boolean;
+        /**
+         * 隐藏面包屑，默认false 不隐藏
+         */
+        hideInBreadcrumb?: boolean;
+        /**
+         * 菜单是否禁用
+         * @see https://element-plus.org/zh-CN/component/menu.html#menu-item-attributes
+         */
+        disabled?: boolean;
+    };
+    children?: PlusRouteRecordRaw[];
+};

package/lib/types/layout.js

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