meixioacomponent 0.6.44 → 0.9.11

package/Meixioacomponent-ver-0.9.01.md

@@ -0,0 +1,80 @@
+# MEIXiOAComponent 更新公告（0.9.01-ver）
+
+## 变更
+### 升级Cli工具，引入TS
+### 剔除多余代码，打包后大小缩小了200多KB
+
+## 新增
+### 公共函数大部分使用TS进行重构，方便开发时使用。目前支持TS类型的公共函数
+### useImg
+#### 全局预览图片
+### useVIewVIdeo
+#### 全局播放视频
+### useGuide
+#### 全局使用引导组件
+### DynamicMountClass
+#### 函数式挂载Vue组件
+### useWait
+#### 使用全局wait加载组件
+### LinkViewClass
+#### 配合页面表格组件使用的表格配置类
+
+## 新增
+### 补全表格与表单TS类型函数
+##### 因为所有前端项目都是基于JS来进行开发的，目前对所有插件的代码提示支持并不是特别友好，所以组件库暴露了这几种函数来做到类型与代码提示的支持（也是基于IDE的扩展功能来实现的，webstorm与VScode都支持，VScode支持的还更友好，算是某种意义上的曲线救国）。
+
+### useTableColumnParamsType
+#### 返回plain/pro表格的头部配置类型函数
+```javascript
+
+// 分别返回 pro页面表格与plain表格的头部配置
+const {useTypeByPlainTableParams,useTypeByProTableParams} = meixioacomponent.useTableColumnParamsType();
+
+```
+#### 举例
+![图片](assets/IMG_1.png)
+
+### useFormItemParamsType
+#### 返回表单的7种类型的配置类型函数
+```javascript
+//分别返回表单控制的7种类型配置函数  
+const {  
+  // input类型  
+  useTypeByInputFormItem,  
+  // 数字类型  
+  useTypeNumberFormItem,  
+  // 单选框类型  
+  useTypeRadioFormItem,  
+  // 下拉选择框类型  
+  useTypeSelectFormItem,  
+  // 单文件上传类型  
+  useTypeSingleUploadFormItem,  
+  // 时间选择类型  
+  useTypeTimeFormItem,  
+  // 文本域类型  
+  useTypeTextareaFormItem  
+} = meixioacomponent.useFormItemParamsType();
+```
+#### 举例
+![图片](assets/IMG_2.png)
+
+## 组件变更
+
+### base-text 
+#### 修改当类型为money并且数量为0时，由暂无数据变更为¥：0。
+
+## 组件修复
+
+### bsae-guide 
+#### 修复当挂载的组件的不存在时，由渲染变更为直接关闭引导组件。
+#### 修复引导组件底部判断逻辑。
+
+
+
+
+
+
+
+
+
+

package/README.md

@@ -1,4 +1,4 @@
-# meixioacomponent
+# meixigoodstablecontrol
 
 ## Project setup
 ```

package/babel.config.js

@@ -1,13 +1,6 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-  plugins: [
-    [
-      "component",
-      {
-        libraryName: "element-ui",
-        styleLibraryName: "theme-chalk",
-      },
+    presets: [
+        '@vue/cli-plugin-babel/preset'
     ],
-    ['@babel/plugin-proposal-optional-chaining']
-  ],
-};
+    plugins: [['@babel/plugin-proposal-optional-chaining']]
+}

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package/lib/components/base/baseGuide/GuideControl.d.ts

@@ -0,0 +1,30 @@
+import { DynamicMountInterface, GuideControlInterface, GuideStepsType } from "../../../typings/type";
+declare class GuideControl implements GuideControlInterface {
+    isOverlay: boolean;
+    steps: GuideStepsType[];
+    show: boolean;
+    component: any;
+    current: number;
+    guideLight?: DynamicMountInterface | null;
+    guideContent?: DynamicMountInterface | null;
+    guideLightPosition: string | null;
+    constructor(defaultCurrent: number, steps: GuideStepsType[], component: any);
+    onStartGuide(): void;
+    createGuideOverlay(): void;
+    createGuideLight(): void;
+    createGuideContent(): void;
+    setGuideLightPosition(position: any): void;
+    getGuideHandleButtonConfig(value: any): {
+        text: string;
+        type: string;
+        click: () => void;
+    }[];
+    onNextStepClick: () => void;
+    onPrevStepClick: () => void;
+    onFinish: () => void;
+    onSkip: () => void;
+    beforeDestroy(): void;
+    destroyComponent(): void;
+}
+export default GuideControl;
+//# sourceMappingURL=GuideControl.d.ts.map

package/lib/components/base/baseGuide/GuideControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GuideControl.d.ts","sourceRoot":"","sources":["../../../../packages/components/base/baseGuide/GuideControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,qBAAqB,EAAE,qBAAqB,EAAE,cAAc,EAAC,MAAM,uBAAuB,CAAC;AAEnG,cAAM,YAAa,YAAW,qBAAqB;IAC/C,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,GAAG,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAA;IACzC,YAAY,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAC3C,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;gBAErB,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,SAAS,EAAE,GAAG;IAc3E,YAAY;IAkBZ,kBAAkB;IASlB,gBAAgB;IAgBhB,kBAAkB;IAiBlB,qBAAqB,CAAC,QAAQ,KAAA;IAK9B,0BAA0B,CAAC,KAAK,KAAA;;;;;IA+BhC,eAAe,aAMd;IAED,eAAe,aAMd;IAED,QAAQ,aAOP;IACD,MAAM,aAOL;IAED,aAAa;IAOb,gBAAgB;CAcnB;AAED,eAAe,YAAY,CAAA"}

package/lib/components/base/baseGuide/GuideControl.js

@@ -0,0 +1,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const guideContent_vue_1 = __importDefault(require("./guideContent.vue"));
+const guideLight_vue_1 = __importDefault(require("./guideLight.vue"));
+const DynamicMountClass_1 = __importDefault(require("../../dynamicmount/DynamicMountClass"));
+class GuideControl {
+    constructor(defaultCurrent, steps, component) {
+        // 点击下一步的操作
+        this.onNextStepClick = () => {
+            this.current += 1;
+            try {
+                this.component.onNextStepClick(this.current);
+            }
+            catch (error) {
+            }
+        };
+        this.onPrevStepClick = () => {
+            this.current -= 1;
+            try {
+                this.component.onNextStepClick(this.current);
+            }
+            catch (error) {
+            }
+        };
+        this.onFinish = () => {
+            try {
+                this.component.onFinish(this.current);
+            }
+            catch (error) {
+            }
+            finally {
+                this.beforeDestroy();
+            }
+        };
+        this.onSkip = () => {
+            try {
+                this.component.onSkip(this.current);
+            }
+            catch (error) {
+            }
+            finally {
+                this.beforeDestroy();
+            }
+        };
+        this.isOverlay = true;
+        this.steps = steps;
+        this.show = false;
+        this.component = component;
+        this.current = defaultCurrent;
+        // guideLight 组件
+        this.guideLight = null;
+        // 引导组件的内容
+        this.guideContent = null;
+        // 引导需要展示的位置
+        this.guideLightPosition = null;
+    }
+    onStartGuide() {
+        setTimeout(() => {
+            this.component.$on('hook:destroyed', () => {
+                this.destroyComponent();
+            });
+            this.show = true;
+            if (this.isOverlay) {
+                this.createGuideOverlay();
+            }
+            if (!this.guideLight) {
+                this.createGuideLight();
+            }
+        }, 500);
+    }
+    // 创建遮罩层
+    createGuideOverlay() {
+        const { zIndex } = this.component;
+        let overlay = document.createElement('div');
+        overlay.setAttribute('class', 'base-guide-overlay');
+        overlay.style.zIndex = String(zIndex - 2);
+        document.body.appendChild(overlay);
+    }
+    // 创建高亮层
+    createGuideLight() {
+        const { zIndex } = this.component;
+        this.guideLight = new DynamicMountClass_1.default({
+            zIndex: zIndex - 1,
+            vueComponent: guideLight_vue_1.default,
+            componentProps: { _guideControl: this },
+        });
+        this.guideLight.on('mounted', (component) => {
+            console.log(component);
+        });
+        this.guideLight.on('destroyed', () => {
+        });
+        this.guideLight.init();
+    }
+    // 创建引导内容
+    createGuideContent() {
+        const { zIndex } = this.component;
+        if (!this.guideContent) {
+            this.guideContent = new DynamicMountClass_1.default({
+                zIndex: zIndex,
+                vueComponent: guideContent_vue_1.default,
+                componentProps: { _guideControl: this },
+            });
+            this.guideContent.on('mounted', (component) => {
+            });
+            this.guideContent.on('destroyed', () => {
+            });
+            this.guideContent.init();
+        }
+    }
+    // 设置引导的位置
+    setGuideLightPosition(position) {
+        this.guideLightPosition = position;
+    }
+    // 获取操作按钮配置
+    getGuideHandleButtonConfig(value) {
+        const stepLength = this.steps.length;
+        if (value === 0 && stepLength > 1) {
+            return [
+                { text: '跳过', type: 'info', click: this.onSkip },
+                { text: '下一步', type: 'primary', click: this.onNextStepClick },
+            ];
+        }
+        else if (value === stepLength - 1) {
+            if (stepLength === 1) {
+                return [
+                    { text: '跳过', type: 'info', click: this.onSkip },
+                    { text: '完成', type: 'primary', click: this.onFinish },
+                ];
+            }
+            else {
+                return [
+                    { text: '上一步', type: 'info', click: this.onPrevStepClick },
+                    { text: '完成', type: 'primary', click: this.onFinish },
+                ];
+            }
+        }
+        else {
+            return [
+                { text: '跳过', type: 'info', click: this.onSkip },
+                { text: '上一步', type: 'info', click: this.onPrevStepClick },
+                { text: '下一步', type: 'primary', click: this.onNextStepClick },
+            ];
+        }
+    }
+    beforeDestroy() {
+        let node = document.getElementsByClassName('base-guide-overlay')[0];
+        document.body.removeChild(node);
+        this.component.onDestroy();
+    }
+    destroyComponent() {
+        if (this.guideLight) {
+            let _guideLight = this.guideLight.getComponent();
+            _guideLight[`onDestroy`]();
+        }
+        if (this.guideContent) {
+            let _guideContent = this.guideContent.getComponent();
+            _guideContent[`onDestroy`]();
+        }
+        document.body.style.overflow = 'auto';
+    }
+}
+exports.default = GuideControl;

package/lib/components/dynamicmount/DynamicMountClass.d.ts

@@ -0,0 +1,16 @@
+import { DynamicMountInterface, DynamicMountParams } from "../../typings/type";
+declare class DynamicMountClass implements DynamicMountInterface {
+    destroyCb: null | Function;
+    mountdCb: null | Function;
+    domComponent: any;
+    params: DynamicMountParams;
+    refComponent: any;
+    constructor(dynamicMount: any);
+    init(): void;
+    getComponent(): object;
+    on(type: 'mounted' | 'destroyed', cb: Function): void;
+    private mounted;
+    private destroy;
+}
+export default DynamicMountClass;
+//# sourceMappingURL=DynamicMountClass.d.ts.map

package/lib/components/dynamicmount/DynamicMountClass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicMountClass.d.ts","sourceRoot":"","sources":["../../../packages/components/dynamicmount/DynamicMountClass.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,oBAAoB,CAAC;AAE7E,cAAM,iBAAkB,YAAW,qBAAqB;IACpD,SAAS,EAAE,IAAI,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,IAAI,GAAG,QAAQ,CAAA;IACzB,YAAY,EAAE,GAAG,CAAC;IAClB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,YAAY,EAAE,GAAG,CAAC;gBAEN,YAAY,KAAA;IAQjB,IAAI;IAgBJ,YAAY,IAAI,MAAM;IAItB,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,WAAW,EAAE,EAAE,EAAE,QAAQ;IAarD,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,OAAO;CAOlB;AAED,eAAe,iBAAiB,CAAA"}

package/lib/components/dynamicmount/DynamicMountClass.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = __importDefault(require("vue"));
+class DynamicMountClass {
+    constructor(dynamicMount) {
+        this.params = dynamicMount;
+        this.domComponent = null;
+        this.refComponent = null;
+        this.mountdCb = null;
+        this.destroyCb = null;
+    }
+    init() {
+        this.domComponent = vue_1.default.prototype.$dynmaicMount({
+            mountedDom: this.params.mountedDom,
+            vueComponent: this.params.vueComponent,
+            componentProps: this.params.componentProps,
+            zIndex: this.params.zIndex ? this.params.zIndex : '9999',
+        });
+        this.refComponent = this.domComponent.componentMounted;
+        this.refComponent.$on('hook:destroyed', () => {
+            this.destroy();
+        });
+        this.refComponent.$on('hook:mounted', () => {
+            this.mounted();
+        });
+    }
+    getComponent() {
+        return this.refComponent;
+    }
+    on(type, cb) {
+        switch (type) {
+            case 'mounted':
+                this.mountdCb = cb;
+                break;
+            case 'destroyed':
+                this.destroyCb = cb;
+                break;
+            default:
+                break;
+        }
+    }
+    mounted() {
+        if (this.mountdCb) {
+            this.mountdCb(this.refComponent);
+        }
+    }
+    destroy() {
+        if (this.destroyCb) {
+            this.destroyCb(this.refComponent);
+        }
+    }
+}
+exports.default = DynamicMountClass;

package/lib/components/dynamicmount/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    install(Vue: any, options?: {}): void;
+};
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/dynamicmount/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/dynamicmount/index.ts"],"names":[],"mappings":";;;AA8CA,wBAIC"}

package/lib/components/dynamicmount/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = __importDefault(require("vue"));
+const dynamicMount_vue_1 = __importDefault(require("./dynamicMount.vue"));
+const componentConfig_1 = __importDefault(require("../../config/componentConfig"));
+const ComponentInsertConstructor = vue_1.default.extend(dynamicMount_vue_1.default);
+//使用方法
+// this.$dynmaicMount({
+//     mountedDom: "",
+//     vueComponent: "",
+//     componentProps: "",
+//   });
+const Insert = (options) => {
+    componentConfig_1.default.setDynamicId();
+    let id = componentConfig_1.default.dynamicId;
+    const componentInsertConstructor = new ComponentInsertConstructor();
+    componentInsertConstructor.vm = componentInsertConstructor.$mount();
+    componentInsertConstructor.dom = componentInsertConstructor.vm.$el;
+    componentInsertConstructor.mountedDom = options.mountedDom;
+    componentInsertConstructor.vm.id = id;
+    componentInsertConstructor.vm.vueComponent = options.vueComponent;
+    componentInsertConstructor.componentProps = options.componentProps;
+    componentInsertConstructor.vm.init();
+    let ele = document.createElement('div');
+    ele.setAttribute('id', `dynamic-${id}`);
+    ele.setAttribute('class', 'dynamic');
+    if (options.mountedDom) {
+        ele.style.height = '100%';
+        componentInsertConstructor.vm.$el.style.height = '100%';
+    }
+    else {
+        ele.style.position = `fixed`;
+        ele.style.zIndex = options.zIndex || '9999';
+        ele.style.top = `0px`;
+        ele.style.left = `0px`;
+    }
+    ele.appendChild(componentInsertConstructor.dom);
+    if (options.mountedDom) {
+        options.mountedDom.appendChild(ele);
+    }
+    else {
+        document.body.appendChild(ele);
+    }
+    return componentInsertConstructor.vm;
+};
+exports.default = {
+    install(Vue, options = {}) {
+        Vue.prototype.$dynmaicMount = Insert;
+    },
+};

package/lib/components/index.d.ts

@@ -0,0 +1,95 @@
+import DynamicMountClass from './dynamicmount/DynamicMountClass';
+import useWait from "../config/use/useWait";
+import LinkViewClass from "../config/LinkViewClass";
+declare const meixioacomponent: {
+    install: (Vue: any) => void;
+    componentConfig: import("../typings/type").componentConfigType;
+    meixicomponents: any[];
+    baseAnchor: any;
+    baseAppendix: any;
+    baseArea: any;
+    baseAvatar: any;
+    baseButtonHandle: any;
+    baseDefaultSvg: any;
+    baseDialog: any;
+    baseDialogTable: any;
+    baseDrawer: any;
+    baseEdito: any;
+    baseFixedHeader: any;
+    Icon: any;
+    baseImageViewer: any;
+    baseImg: any;
+    baseInforWrap: any;
+    baseLineInfoGroup: any;
+    baseLineInfoItem: any;
+    basePageHeader: any;
+    basePagination: any;
+    basePlainTable: any;
+    baseSection: any;
+    baseSkeleton: any;
+    baseSvg: any;
+    baseTimeTypeSelect: any;
+    baseToggle: any;
+    baseUploadItem: any;
+    baseUpload: any;
+    upload: any;
+    baseDialogForm: any;
+    baseForm: any;
+    baseFormWrap: any;
+    baseProTable: any;
+    baseMoverVerifiBar: any;
+    baseTimeLine: any;
+    basePopoverButton: any;
+    baseTreeSelect: any;
+    baseUploadTemplate: any;
+    baseNumberInput: any;
+    baseStoreSelect: any;
+    baseFormItem: any;
+    baseSingleImgUpload: any;
+    baseGuide: any;
+    baseText: any;
+    baseTag: any;
+    oaProTableSearch: any;
+    baseWait: any;
+    Theme: any;
+    SelectStore: any;
+    useImg: {
+        dynamicMount: import("../typings/type").DynamicMountInterface | null;
+        toView(list: any[]): void;
+        destroy(): void;
+    };
+    UseDrag: any;
+    UseResize: any;
+    useUpload: any;
+    useFixedHeader: any;
+    useCropper: any;
+    useViewVideo: {
+        component: import("../typings/type").DynamicMountInterface | null;
+        playVideo(resource: string): void;
+        switchVideoResource(): void;
+        createVideoComponent(resource: any): void;
+        unMountedVideo(): void;
+    };
+    useGuide: {
+        guideComponent: import("../typings/type").DynamicMountInterface | null;
+        startGuide(params: import("../typings/type").UseGuideParamsType): void;
+    };
+    DynamicMountClass: typeof DynamicMountClass;
+    useWait: typeof useWait;
+    LinkViewClass: typeof LinkViewClass;
+    useTableColumnParamsType: () => {
+        useTypeByProTableParams: (paramsList: import("../typings/type").ProTableParamsType[]) => import("../typings/type").ProTableParamsType[];
+        useTypeByPlainTableParams: (paramsList: import("../typings/type").PlainTableParamsType[]) => import("../typings/type").PlainTableParamsType[];
+    };
+    useFormItemParamsType: () => {
+        useTypeByInputFormItem: (params: import("../typings/type").FormItemInputParam) => import("../typings/type").FormItemInputParam;
+        useTypeTextareaFormItem: (params: import("../typings/type").FormItemTextareaParam) => import("../typings/type").FormItemTextareaParam;
+        useTypeNumberFormItem: (params: import("../typings/type").FormItemNumberParam) => import("../typings/type").FormItemNumberParam;
+        useTypeSelectFormItem: (params: import("../typings/type").FormItemSelectParam) => import("../typings/type").FormItemSelectParam;
+        useTypeTimeFormItem: (params: import("../typings/type").FormItemTimeParam) => import("../typings/type").FormItemTimeParam;
+        useTypeRadioFormItem: (params: import("../typings/type").FormItemRadioParam) => import("../typings/type").FormItemRadioParam;
+        useTypeSingleUploadFormItem: (params: import("../typings/type").FormItemSingleUploadParam) => import("../typings/type").FormItemSingleUploadParam;
+    };
+};
+export default meixioacomponent;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/index.ts"],"names":[],"mappings":"AAqDA,OAAO,iBAAiB,MAAM,kCAAkC,CAAA;AAGhE,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAS5C,OAAO,aAAa,MAAM,yBAAyB,CAAC;AAiFpD,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoErB,CAAA;AAED,eAAe,gBAAgB,CAAA"}