@v2coding/ui 0.1.4 → 0.1.8

package/src/components/form/form.drawer.vue

@@ -1,246 +0,0 @@
-<template>
-  <ui-drawer
-      class-name="ui-form-drawer"
-      v-bind="$attrs"
-      v-on="drawerListeners"
-      :value="visible"
-      :width="width"
-      :transfer="transfer"
-      :mask="mask"
-      :inner="inner"
-      @on-visible-change="updateVisible"
-  >
-    <div class="ui-form-drawer-wrapper" v-loading="loading">
-      <ui-form ref="form" :fields="fields" :disabled="disabled" :actionButton="false" @submit="onSubmit" @ready="onReady">
-        <slot></slot>
-      </ui-form>
-    </div>
-    <div class="action-button" v-if="disabled !== true">
-      <el-button type="primary" icon="el-icon-success" :loading="submitting" @click="submit">{{confirmText}}</el-button>
-      <el-button icon="el-icon-error" @click="onCancel">{{cancelText}}</el-button>
-    </div>
-  </ui-drawer>
-</template>
-
-<script>
-  import UiDrawer from '../drawer/drawer';
-
-  export default {
-    name: 'ui-form-drawer',
-    inheritAttrs: false,
-    components: {UiDrawer},
-    props: {
-      value: {
-        type: Object,
-        default: () => ({}),
-      },
-      visible: Boolean,
-      // 抽屉宽度。当其值不大于 100 时以百分比显示，大于 100 时为像素
-      width: {
-        type: [String, Number],
-        default: 500,
-      },
-      method: {
-        type: String,
-        validator: (val) => ['get', 'post'].includes(val),
-        default: 'post',
-      },
-      url: String,
-      cancelText: {
-        type: String,
-        default: '取消',
-      },
-      confirmText: {
-        type: String,
-        default: '确定',
-      },
-      cancel: {
-        type: Function,
-        default: () => void 0,
-      },
-      beforeSubmit: {
-        type: Function,
-        default: () => void 0,
-      },
-      afterSubmit: {
-        type: Function,
-        default: () => void 0,
-      },
-      fields: Array,
-      loading: Boolean,
-      // 是否将抽屉放置于 body 内
-      transfer: {
-        type: Boolean,
-        default: false,
-      },
-      mask: {
-        type: Boolean,
-        default: false,
-      },
-      // 是否设置抽屉在某个元素内打开，开启此属性时，应当关闭 transfer 属性
-      inner: {
-        type: Boolean,
-        default: true,
-      },
-      disabled: {
-        type: Boolean,
-        default: undefined,
-      },
-    },
-    data() {
-      return {
-        ready: false,
-        submitting: false,
-      };
-    },
-    computed: {
-      drawerListeners() {
-        // submit/ready/input 属于当前组件自定义事件, 非 drawer 的事件
-        // eslint-disable-next-line
-        const {submit, ready, input, ...listeners} = this.$listeners;
-        return listeners;
-      },
-    },
-    watch: {
-      visible: 'onVisibleChange',
-    },
-    methods: {
-      onReady() {
-        this.ready = true;
-        this.$emit('ready');
-      },
-      onCancel() {
-        const allow = this.cancel();
-        if (allow === false) {
-          return;
-        }
-        this.hide();
-      },
-      show() {
-        this.$emit('update:visible', true);
-      },
-      hide() {
-        this.$emit('update:visible', false);
-      },
-      submit() {
-        this.$refs.form.onSubmit();
-      },
-      updateVisible(visible) {
-        this.$emit('update:visible', visible);
-      },
-      async onVisibleChange(visible) {
-        if (!visible) {
-          await this.$nextTick();
-          this.clearValidate();
-        }
-      },
-      resetValues(values) {
-        if (!this.$refs.form) {
-          return;
-        }
-        this.$refs.form.resetValues(values);
-      },
-      getValues() {
-        if (!this.$refs.form) {
-          return;
-        }
-        return this.$refs.form.getValues();
-      },
-      setValues(values) {
-        if (!this.$refs.form) {
-          return;
-        }
-        this.$refs.form.setValues(values);
-      },
-      clearValidate (...args) {
-        if (!this.$refs.form) {
-          return;
-        }
-        this.$refs.form.clearValidate(...args)
-      },
-      onSubmit(formData) {
-        // if (!this.ready) {
-        //   return;
-        // }
-        this.$emit('submit', {...formData});
-        const allow = this.beforeSubmit(formData);
-        if (allow === false) {
-          return;
-        }
-        if (!this.url) {
-          return;
-        }
-        let def;
-        this.submitting = true;
-        if (this.method === 'get') {
-          def = this.getWithMessage(this.url, {params: formData});
-        } else {
-          def = this.postWithMessage(this.url, formData);
-        }
-        def.then((...args) => {
-          this.submitting = false;
-          this.$emit('after-submit', ...args);
-        }).catch((...args) => {
-          this.submitting = false;
-          return Promise.reject(...args);
-        });
-      },
-    },
-  };
-</script>
-
-<style lang="less">
-  .ui-form-drawer {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    outline: none;
-
-    .ui-drawer-body {
-      flex: 1;
-      padding: 0;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-
-      & > .el-form {
-        flex: 1;
-        overflow: auto;
-      }
-
-      & > .action-button {
-        flex: none;
-      }
-    }
-
-    .ui-form-drawer-wrapper {
-      flex: 1;
-      overflow: hidden;
-
-      .el-form {
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        padding: 16px;
-        box-sizing: border-box;
-      }
-    }
-
-    .action-button {
-      flex: none;
-      padding: 16px;
-      border-top: 1px solid #e8eaec;
-      display: flex;
-      flex-direction: row-reverse;
-
-      button + button {
-        margin-right: 16px;
-      }
-    }
-
-    .action-button::after {
-      content: '';
-      clear: both;
-    }
-  }
-</style>

package/src/components/form/form.fieldset.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="ui-form-fieldset" :class="{toggle: hasToggle, collapse: !isExpand}">
-    <h3 v-if="legend" class="ui-form-fieldset-legend" v-once @click="toggle">{{ legend }}</h3>
-    <div v-show="isExpand">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ui-form-fieldset',
-  props: {
-    label: {
-      type: String,
-      default: '分组',
-    },
-    // 类似于 html fieldset 下的 legend 标签作用
-    legend: {
-      type: String,
-      default() {
-        return this.label;
-      },
-    },
-    /**
-     * 初始时是否展开
-     */
-    collapse: {
-      type: Boolean,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      expand: !this.collapse,
-    };
-  },
-  computed: {
-    hasToggle() {
-      return !Object.is(null, this.collapse);
-    },
-    isExpand() {
-      if (!this.hasToggle) {
-        return true;
-      }
-      return this.expand;
-    },
-  },
-  methods: {
-    toggle() {
-      if (!this.hasToggle) {
-        return;
-      }
-      this.expand = !this.expand;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-form-fieldset {
-  padding: 30px 20px 10px;
-  margin: 30px 0 20px;
-  border: 1px dashed #aaa;
-  border-radius: 2px;
-  position: relative;
-  &.toggle {
-    &.collapse {
-      padding: 0;
-      border-bottom: none;
-
-      .ui-form-fieldset-legend::after {
-        content: '\f107';
-      }
-    }
-
-    .ui-form-fieldset-legend {
-      cursor: pointer;
-      font-family: FontAwesome, serif;
-      text-rendering: auto;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    .ui-form-fieldset-legend::after {
-      margin-left: 4px;
-      content: '\f106';
-    }
-  }
-
-  > .ui-form-fieldset-legend {
-    position: absolute;
-    top: -8px;
-    padding: 0 30px;
-    margin: 0;
-    height: 16px;
-    line-height: 16px;
-    font-size: 14px;
-    color: #666;
-    left: 50%;
-    transform: translateX(-50%);
-    background: white;
-    user-select: none;
-  }
-
-  & + .ui-form-fieldset {
-    margin-top: 40px;
-  }
-}
-</style>

package/src/components/form/form.item.vue

@@ -1,210 +0,0 @@
-<template>
-  <el-form-item v-bind="$attrs" :prop="name" :rules="realRules" class="ui-form-item" ref="formItem" :class="{'hidden-item': type === 'hidden'}">
-    <div v-if="$scopedSlots.prefix" class="ui-form-item-prefix">
-      <slot name="prefix"></slot>
-    </div>
-    <template slot="label" v-if="showLabel && label">
-      {{ label }}
-      <el-tooltip effect="dark" :content="info">
-        <i v-if="info" class="el-icon-info info"></i>
-      </el-tooltip>
-      {{realColon ? ':' : ''}}
-    </template>
-    <form-field v-bind="$attrs" :name="name" v-model="fieldValue" :locked-value.sync="lockedValue" :type="type" :disabled="realDisabled" :placeholder="realPlaceHolder" :ignore="ignore" v-on="listeners">
-      <slot></slot>
-    </form-field>
-    <div v-if="$scopedSlots.suffix" class="ui-form-item-suffix">
-      <slot name="suffix"></slot>
-    </div>
-  </el-form-item>
-</template>
-
-<script>
-import VType, { getInputTypeText } from './vtype';
-import FormField from './form.field';
-
-export default {
-  name: 'ui-form-item',
-  inheritAttrs: false,
-  inject: ['uiForm'],
-  components: { FormField },
-  props: {
-    value: null,
-    defaultValue: {
-      default: undefined,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    prop: String, // ignore prop. 强制要求使用 name 配置
-    label: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    showLabel: {
-      type: Boolean,
-      default: true,
-    },
-    placeholder: String,
-    vtype: [String, Array, Function],
-    info: String,
-    rules: null,
-    /**
-     * 是否显示 label 后面的冒号
-     * 默认显示
-     */
-    colon: {
-      type: Boolean,
-      default: undefined,
-    },
-    disabled: {
-      type: Boolean,
-      default: undefined,
-    },
-    ignore: {
-      type: Boolean,
-      default: false,
-    },
-    message: String,
-  },
-  data () {
-    return {
-      fieldValue: this.defaultValue,
-      lockedValue: this.defaultValue,
-    };
-  },
-  computed: {
-    realRules () {
-      if (this.ignore) {
-        return null;
-      }
-      if (this.rules) {
-        return this.rules;
-      }
-      if (typeof this.vtype === 'function') {
-        // this.vtype(rule, value, callback)
-        return { validator: this.vtype };
-      }
-      let vtypes = [];
-      if (typeof this.vtype === 'string') {
-        vtypes = this.vtype.replace(/\s/g, '').split(',').filter(Boolean);
-      } else if (Array.isArray(this.vtype) && this.vtype.length) {
-        vtypes = this.vtype.filter(Boolean);
-      }
-      return vtypes.reduce((rules, vtype) => {
-        let rule = vtype;
-        if (typeof vtype === 'string') {
-          const [type, ...args] = vtype.split(':');
-          rule = VType[type](this.$props, ...args);
-        }
-        rule && rules.push(rule);
-        return rules;
-      }, []);
-    },
-    realPlaceHolder () {
-      if (this.placeholder) {
-        return this.placeholder;
-      }
-      let input = getInputTypeText(this.type);
-      return `请${input}${this.label}`;
-    },
-    realColon () {
-      if (!this.label) {
-        return false;
-      }
-      if (!Object.is(undefined, this.colon)) {
-        return this.colon;
-      }
-      if (!Object.is(undefined, this.uiForm.colon)) {
-        return this.uiForm.colon;
-      }
-      return true;
-    },
-    realDisabled () {
-      if (this.uiForm) {
-        return this.uiForm.disabled || this.disabled;
-      }
-      return this.disabled;
-    },
-    listeners () {
-      // eslint-disable-next-line
-      const { change, input, ...listeners } = this.$listeners;
-      return listeners;
-    },
-  },
-  watch: {
-    value (v) {
-      this.fieldValue = v;
-    },
-    fieldValue (v) {
-      this.uiForm.trigger('change', this.name, v, this);
-      this.$emit('input', v);
-      this.$emit('change', v);
-    },
-  },
-  created () {
-    this.registeredField();
-  },
-  methods: {
-    registeredField () {
-      this.uiForm.addField(this.name, this.fieldValue, this);
-    },
-    resetField (...args) {
-      if (args.length > 0) {
-        this.fieldValue = args[0];
-      } else if (this.fieldValue !== this.defaultValue) {
-        this.fieldValue = this.defaultValue;
-      }
-      this.lockedValue = this.fieldValue;
-      this.$refs.formItem && this.$refs.formItem.$once('el.form.change', () => {
-        this.$refs.formItem && this.$refs.formItem.clearValidate();
-      });
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.ui-form-item {
-  ::v-deep .el-form-item__content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    > div {
-      flex: 1;
-      display: flex;
-      align-items: center;
-    }
-
-    .ui-form-item-prefix,
-    .ui-form-item-suffix {
-      flex: none;
-    }
-  }
-
-  .info {
-    color: #909399;
-    cursor: pointer;
-    margin-left: 4px;
-  }
-
-  &.hidden-item {
-    display: none;
-  }
-}
-
-.el-form--inline .ui-form-item ::v-deep .el-form-item__label {
-  flex: none;
-  white-space: nowrap;
-}
-
-.el-form--inline .ui-form-item ::v-deep .el-form-item__content {
-  display: inline-flex;
-}
-</style>