@smallwei/avue 3.8.2 → 3.8.3

package/es/packages/core/common/props.ts

@@ -0,0 +1,240 @@
+import { DIC_PROPS, DIC_SPLIT, DIC_HTTP_PROPS } from '../../../global/variable';
+import slot from '../../../core/slot';
+
+export default function () {
+  return {
+    mixins: [slot],
+    emits: ['update:modelValue', 'click', 'focus', 'blur', 'change'],
+    data() {
+      return {
+        stringMode: false,
+        name: '',
+        text: undefined,
+        propsHttpDefault: DIC_HTTP_PROPS,
+        propsDefault: DIC_PROPS,
+      };
+    },
+    props: {
+      blur: Function,
+      focus: Function,
+      change: Function,
+      click: Function,
+      typeformat: Function,
+      control: Function,
+      separator: {
+        type: String,
+        default: DIC_SPLIT,
+      },
+      params: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      listType: {
+        type: String,
+        default: '',
+      },
+      tableData: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      modelValue: {},
+      column: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      size: {
+        type: String,
+        default: '',
+      },
+      tip: {
+        type: String,
+        default: '',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      dataType: {
+        type: String,
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      type: {
+        type: String,
+        default: '',
+      },
+      dicUrl: {
+        type: String,
+        default: '',
+      },
+      dicMethod: {
+        type: String,
+        default: '',
+      },
+      dicFormatter: Function,
+      dicQuery: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      dic: {
+        type: [Array, Function],
+        default: () => {
+          return [];
+        },
+      },
+      placeholder: {
+        type: String,
+        default: '',
+      },
+      rules: {
+        type: Array,
+      },
+      min: {
+        type: Number,
+      },
+      max: {
+        type: Number,
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      button: {
+        type: Boolean,
+        default: false,
+      },
+      row: {
+        type: Boolean,
+        default: false,
+      },
+      prop: {
+        type: String,
+        default: '',
+      },
+      border: {
+        type: Boolean,
+        default: false,
+      },
+      popperClass: {
+        type: String,
+      },
+      propsHttp: {
+        type: Object,
+        default: () => DIC_HTTP_PROPS,
+      },
+      props: {
+        type: Object,
+        default: () => DIC_PROPS,
+      },
+    },
+    watch: {
+      text: {
+        handler(val: any) {
+          this.handleChange(val);
+          this.handleTextValue && this.handleTextValue(val);
+        },
+        deep: true,
+      },
+      modelValue: {
+        handler(val: any) {
+          this.initVal();
+          this.handleModelValue && this.handleModelValue(val);
+        },
+        deep: true,
+      },
+    },
+    computed: {
+      clearableVal() {
+        return this.disabled ? false : this.clearable;
+      },
+      componentName() {
+        const type = 'el';
+        return `${type}-${this.name}${this.button ? '-button' : ''}`;
+      },
+      required() {
+        return !this.validatenull(this.rules);
+      },
+      isGroup() {
+        let result = false;
+        this.dic.forEach((ele: any) => {
+          if (ele[this.groupsKey]) {
+            result = true;
+          }
+        });
+        return result;
+      },
+      isArray() {
+        return this.dataType === 'array';
+      },
+      isString() {
+        return this.dataType === 'string';
+      },
+      isNumber() {
+        return this.dataType === 'number';
+      },
+      isJson() {
+        return this.dataType === 'json';
+      },
+      nameKey() {
+        return this.propsHttp.name || this.propsHttpDefault.name;
+      },
+      urlKey() {
+        return this.propsHttp.url || this.propsHttpDefault.url;
+      },
+      resKey() {
+        return this.propsHttp.res || this.propsHttpDefault.res;
+      },
+      fileTypeKey() {
+        return this.propsHttp.fileType || this.propsHttpDefault.fileType;
+      },
+      groupsKey() {
+        return this.props.groups || this.propsDefault.groups;
+      },
+      valueKey() {
+        return this.props.value || this.propsDefault.value;
+      },
+      typeKey() {
+        return this.props.type || this.propsDefault.type;
+      },
+      descKey() {
+        return this.props.desc || this.propsDefault.desc;
+      },
+      leafKey() {
+        return this.props.leaf || this.propsDefault.leaf;
+      },
+      labelKey() {
+        return this.props.label || this.propsDefault.label;
+      },
+      childrenKey() {
+        return this.props.children || this.propsDefault.children;
+      },
+      disabledKey() {
+        return this.props.disabled || this.propsDefault.disabled;
+      },
+      idKey() {
+        return this.props.id || this.propsDefault.id;
+      },
+    },
+    created() {
+      this.initVal();
+    },
+  };
+}

package/es/packages/core/components/dialog-form/index.mjs

@@ -0,0 +1,29 @@
+import { createVNode, render } from 'vue';
+import Main from './index.vue';
+export default function (_context) {
+    const defaultContext = _context;
+    return (opt) => {
+        const options = {
+            opt,
+        };
+        let appendTo = opt.appendTo;
+        if (opt.appendTo) {
+            appendTo = document.querySelector(opt.appendTo);
+        }
+        else {
+            appendTo = document.body;
+        }
+        const parent = document.createElement('div');
+        const instance = createVNode(Main, options);
+        instance.appContext = defaultContext;
+        const onDestroy = () => {
+            render(null, parent);
+            parent.remove();
+        };
+        instance.props.onDestroy = onDestroy;
+        instance.close = onDestroy;
+        render(instance, parent);
+        appendTo === null || appendTo === void 0 ? void 0 : appendTo.appendChild(parent);
+        return instance;
+    };
+}

package/es/packages/core/components/dialog-form/index.ts

@@ -0,0 +1,29 @@
+import { createVNode, render } from 'vue';
+import Main from './index.vue';
+
+export default function (_context: any) {
+  const defaultContext = _context;
+  return (opt: Record<string, any>) => {
+    const options = {
+      opt,
+    };
+    let appendTo: Element | HTMLElement | null = opt.appendTo;
+    if (opt.appendTo) {
+      appendTo = document.querySelector(opt.appendTo);
+    } else {
+      appendTo = document.body;
+    }
+    const parent = document.createElement('div');
+    const instance: any = createVNode(Main, options);
+    instance.appContext = defaultContext;
+    const onDestroy = () => {
+      render(null, parent);
+      parent.remove();
+    };
+    instance.props.onDestroy = onDestroy;
+    instance.close = onDestroy;
+    render(instance, parent);
+    appendTo?.appendChild(parent);
+    return instance;
+  };
+}

package/es/packages/core/components/dialog-form/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <component :is="dialogType"
+             v-model="visible"
+             destroy-on-close
+             class="avue-dialog"
+             :beforeClose="beforeClose"
+             v-bind="dialog">
+    <avue-form ref="form"
+               :option="{...deepClone(option),...{menuBtn: false}}"
+               v-model="data"
+               v-model:status="disabled"
+               @submit="handleSubmit"
+               @reset-change="close"></avue-form>
+    <span class="avue-dialog__footer"
+          v-if="validData(option.menuBtn,true)"
+          :class="'avue-dialog__footer--'+menuPosition">
+      <el-button @click="submit"
+                 :size="$AVUE.size"
+                 :icon="option.submitIcon"
+                 :loading="disabled"
+                 v-if="validData(option.submitBtn,true)"
+                 type="primary">{{option.submitText}}</el-button>
+      <el-button @click="reset"
+                 v-if="validData(option.emptyBtn,true)"
+                 :disabled="disabled"
+                 :size="$AVUE.size"
+                 :icon="option.emptyIcon ">{{option.emptyText}}</el-button>
+    </span>
+  </component>
+</template>
+<script>
+import locale from "../../../../core/locale.mjs";
+export default {
+  mixins: [locale],
+  props: {
+    opt: Object,
+    onDestroy: Function
+  },
+  data () {
+    return {
+      disabled: false,
+      callback: null,
+      visible: true,
+      dialog: {
+        closeOnClickModal: false
+      },
+      isDrawer: false,
+      option: {
+        submitText: this.t('form.submitBtn'),
+        emptyText: this.t('common.closeBtn'),
+        submitIcon: 'el-icon-check',
+        emptyIcon: 'el-icon-close',
+        column: []
+      },
+      data: {}
+    };
+  },
+  created () {
+    this.show()
+  },
+  computed: {
+    dialogType () {
+      return this.isDrawer ? 'elDrawer' : 'elDialog'
+    },
+    menuPosition () {
+      return this.opt.menuPosition || 'center'
+    }
+  },
+  methods: {
+    submit () {
+      this.$refs.form.submit()
+    },
+    reset () {
+      this.$refs.form.resetForm()
+    },
+    beforeClose (done) {
+      done()
+      this.close()
+    },
+    show () {
+      let opt = this.opt;
+      this.callback = opt.callback;
+      let dialog = this.deepClone(opt);
+      ['callback', 'option', 'data'].forEach(ele => delete dialog[ele])
+      this.dialog = Object.assign(this.dialog, dialog);
+      this.dialog.size = this.dialog.width
+      this.isDrawer = this.dialog.type === 'drawer';
+      this.option = Object.assign(this.option, opt.option);
+      this.data = opt.data;
+      this.visible = true;
+    },
+    close () {
+      const callback = () => {
+        this.visible = false;
+        this.onDestroy()
+      }
+      if (typeof this.dialog.beforeClose === 'function') {
+        this.dialog.beforeClose(callback);
+      } else {
+        callback()
+      }
+    },
+    handleSubmit (data, done) {
+      this.callback && this.callback({ data: data, close: this.close, done: done });
+    }
+  }
+};
+</script>

package/es/packages/core/components/form/custom.mjs

@@ -0,0 +1,41 @@
+export default {
+    props: {
+        render: Function,
+        row: Object,
+        index: [String, Number],
+        column: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        dic: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+        params: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        event: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+    },
+    render() {
+        return this.render.call(this, {
+            column: this.column,
+            dic: this.dic,
+            params: this.params,
+            event: this.event,
+            row: this.row,
+            index: this.index,
+        });
+    },
+};

package/es/packages/core/components/form/custom.ts

@@ -0,0 +1,41 @@
+export default {
+  props: {
+    render: Function,
+    row: Object,
+    index: [String, Number],
+    column: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    dic: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    event: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  render(this: any) {
+    return this.render.call(this, {
+      column: this.column,
+      dic: this.dic,
+      params: this.params,
+      event: this.event,
+      row: this.row,
+      index: this.index,
+    });
+  },
+};

package/es/packages/core/components/form/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <custom v-if="render"
+          :render="render"
+          :index="index"
+          :row="row"
+          :dic="dic"
+          :column="column"
+          :params="params"
+          :event="event"></custom>
+  <component v-else
+             :is="getComponent(column)"
+             v-model="text"
+             v-bind="getBind(column)"
+             align="left"
+             v-on="event"
+             :column="Object.assign(column,params)"
+             :dic="dic"
+             :clearValidate="clearValidate"
+             :box-type="boxType"
+             ref="temp"
+             :disabled="column.disabled || disabled"
+             :readonly="column.readonly || readonly"
+             :placeholder="boxType == 'view' ? '' : getPlaceholder(column)"
+             :props="column.props || props"
+             :propsHttp="column.propsHttp || propsHttp"
+             :size="column.size || size"
+             :table-data="tableData"
+             :type="type || column.type"
+             :column-slot="columnSlot"
+             @keyup.enter="enterChange">
+    <template #="scope"
+              v-if="$slots.default">
+      <slot v-bind="scope"></slot>
+    </template>
+    <template #
+              v-else-if="params.html">
+      <span v-html="params.html"></span>
+    </template>
+    <template v-for="item in columnSlot"
+              #[item]="scope">
+      <slot v-bind="scope"
+            v-if="!item.endsWith('-desc')"
+            :name="item"></slot>
+    </template>
+  </component>
+  <template v-if="!render && boxType !== 'view'">
+    <slot v-if="columnSlot.includes(column.prop + '-desc')"
+          :name="column.prop + '-desc'"
+          :column="column"
+          :description="column.description"
+          :descClass="column.descClass"
+          :size="column.size || size"></slot>
+    <span v-else
+          :class="column.descClass ? column.descClass : 'field-desc'">
+      {{column.description}}
+    </span>
+  </template>
+</template>
+
+<script>
+import custom from "./custom.mjs";
+import { getComponent, getPlaceholder } from "../../../../core/dataformat.mjs";
+import slot from '../../../../core/slot.mjs'
+export default {
+  name: 'form-temp',
+  mixins: [slot],
+  emits: ['update:modelValue', 'change', 'enter'],
+  components: {
+    custom
+  },
+  props: {
+    modelValue: {},
+    clearValidate: Function,
+    uploadSized: Function,
+    uploadBefore: Function,
+    uploadDelete: Function,
+    uploadAfter: Function,
+    uploadPreview: Function,
+    uploadError: Function,
+    uploadExceed: Function,
+    boxType: String,
+    row: Object,
+    render: Function,
+    index: [String, Number],
+    columnSlot: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    tableData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    clearable: {
+      type: Boolean
+    },
+    enter: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String
+    },
+    propsHttp: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    props: {
+      type: Object
+    },
+    dic: {
+      type: Array
+    },
+    placeholder: {
+      type: String
+    },
+    size: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    },
+    readonly: {
+      type: Boolean
+    },
+    column: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    params () {
+      return this.column.params || {}
+    },
+    event () {
+      return this.column.event || {}
+    },
+    text: {
+      get () {
+        return this.modelValue
+      },
+      set (val) {
+        this.$emit('update:modelValue', val);
+        this.$emit('change', val)
+      }
+    }
+  },
+  methods: {
+    getComponent (column) {
+      return getComponent(column.type, column.component)
+    },
+    getPlaceholder,
+    getBind (column) {
+      let params = { ...column, ...this.params, ...this.$uploadFun(column) };
+      ['value', 'className'].forEach(ele => {
+        delete params[ele]
+      })
+      return params
+    },
+    enterChange () {
+      if (typeof this.column.enter === 'function') {
+        this.column.enter({ value: this.text, column: this.column })
+      } else if (this.enter) {
+        this.$emit('enter')
+      }
+    }
+  }
+}
+</script>

package/es/packages/core/components/icon/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <span v-if="text" class="avue-icon"
+        :class="{'avue-icon--small':small}">
+    <svg v-if="text.includes('#')"
+         aria-hidden="true">
+      <use :xlink:href="text"></use>
+    </svg>
+    <el-icon v-else-if="text.indexOf('el-') == 0"
+             :size="size"
+             :color="color">
+      <component :is="text" />
+    </el-icon>
+    <i v-else
+       :class="text"></i>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'icon-temp',
+  props: {
+    small: Boolean,
+    color: String,
+    size: {
+      type: [String, Number],
+      default: 32
+    },
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style>
+</style>