@v2coding/ui 0.1.0

package/src/components/form/form.dialog.vue

@@ -0,0 +1,174 @@
+<template>
+  <ui-dialog v-bind="$attrs" v-on="dialogListeners" :buttons="false" :visible="visible" :append-to-body="appendToBody" @open="onOpen" @opened="onOpened" @closed="onClosed" @update:visible="updateVisible">
+    <ui-form ref="form" :fields="fields" :label-width="labelWidth" :label-position="labelPosition" :disabled="disabled" v-loading="loading" @submit="onSubmit" @ready="onReady">
+      <slot></slot>
+      <div class="action-button" v-if="disabled !== true">
+        <el-button size="medium" icon="el-icon-error" @click="onCancel">{{cancelText}}</el-button>
+        <el-button size="medium" type="primary" icon="el-icon-success" native-type="submit" :disabled="!ready" :loading="submitting">{{confirmText}}</el-button>
+      </div>
+    </ui-form>
+  </ui-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ui-form-dialog',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+    visible: Boolean,
+    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,
+    appendToBody: {
+      type: Boolean,
+      default: true,
+    },
+    labelWidth: String,
+    labelPosition: String,
+    disabled: {
+      type: Boolean,
+      default: undefined,
+    },
+  },
+  data () {
+    return {
+      ready: false,
+      submitting: false,
+    };
+  },
+  computed: {
+    dialogListeners () {
+      // submit/ready 属于当前组件自定义事件, 非 dialog 的事件
+      // eslint-disable-next-line
+      const { submit, ready, ...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.updateVisible(false);
+    },
+    updateVisible (visible) {
+      this.$emit('update:visible', visible);
+    },
+    async onVisibleChange(visible) {
+      if (!visible) {
+        await this.$nextTick();
+        this.clearValidate();
+      }
+    },
+    submit () {
+      this.$refs.form.onSubmit();
+    },
+    resetValues (values) {
+      if (!this.$refs.form) {
+        return;
+      }
+      this.$refs.form.resetValues(values);
+    },
+    clearValidate () {
+      if (!this.$refs.form) {
+        return;
+      }
+      this.$refs.form.clearValidate()
+    },
+    getValues () {
+      if (!this.$refs.form) {
+        return;
+      }
+      return this.$refs.form.getValues();
+    },
+    setValues (values) {
+      if (!this.$refs.form) {
+        return;
+      }
+      this.$refs.form.setValues(values);
+    },
+    onSubmit (formData) {
+      if (!this.ready) {
+        return;
+      }
+      this.$emit('submit', { ...formData });
+      const allow = this.beforeSubmit(formData);
+      if (typeof allow === 'boolean' && allow === false) {
+        return;
+      }
+      if (typeof allow === 'object') {
+        formData = allow;
+      }
+      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);
+      });
+    },
+    onOpen () {
+    },
+    onOpened () {
+    },
+    onClosed () {
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.action-button {
+  text-align: right;
+  margin: 0 -20px -20px;
+  padding: 10px 20px;
+  border-top: 1px solid #e8e8e8;
+}
+</style>

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

@@ -0,0 +1,246 @@
+<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

@@ -0,0 +1,110 @@
+<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>