haiwei-ui 1.0.2 → 1.0.4

package/packages/components/drag-sort/index.vue

@@ -6,45 +6,45 @@
   </section>
 </template>
 <script>
-import draggable from 'vuedraggable'
-export default {
-  name: 'DragSort',
-  components: { draggable },
-  data() {
-    return {
-      list: this.value,
-      dragOptions: {
-        animation: 200,
-        ghostClass: 'nm-drag-sort-ghost'
+  import draggable from 'vuedraggable'
+  export default {
+    name: 'DragSort',
+    components: { draggable },
+    data() {
+      return {
+        list: this.value,
+        dragOptions: {
+          animation: 200,
+          ghostClass: 'nm-drag-sort-ghost'
+        },
+        dragOn: {
+          start: this.onDragStart,
+          end: this.onDragEnd
+        }
+      }
+    },
+    props: {
+      value: {
+        type: Array,
+        required: true
+      }
+    },
+    methods: {
+      onDragStart() {
+        this.$emit('start')
       },
-      dragOn: {
-        start: this.onDragStart,
-        end: this.onDragEnd
+      onDragEnd() {
+        this.list.map((item, index) => {
+          item.sort = index
+        })
+        this.$emit('input', this.list)
+        this.$emit('end', this.list)
       }
-    }
-  },
-  props: {
-    value: {
-      type: Array,
-      required: true
-    }
-  },
-  methods: {
-    onDragStart() {
-      this.$emit('start')
     },
-    onDragEnd() {
-      this.list.map((item, index) => {
-        item.sort = index
-      })
-      this.$emit('input', this.list)
-      this.$emit('end', this.list)
-    }
-  },
-  watch: {
-    value(val) {
-      if (val !== this.list) this.list = val
+    watch: {
+      value(val) {
+        if (val !== this.list) this.list = val
+      }
     }
   }
-}
 </script>

package/packages/components/drag-sort-dialog/index.vue

@@ -7,67 +7,67 @@
   </nm-dialog>
 </template>
 <script>
-import visibleMixins from '../../mixins/components/visible'
-export default {
-  name: 'DragSortDialog',
-  mixins: [visibleMixins],
-  data() {
-    return {
-      model: {
-        options: []
-      },
-      loading: false
-    }
-  },
-  props: {
-    title: {
-      type: String,
-      default: '排序'
-    },
-    icon: {
-      type: String,
-      default: 'sort'
-    },
-    width: {
-      type: String,
-      default: '400px'
+  import visibleMixins from '../../mixins/components/visible'
+  export default {
+    name: 'DragSortDialog',
+    mixins: [visibleMixins],
+    data() {
+      return {
+        model: {
+          options: []
+        },
+        loading: false
+      }
     },
-    height: {
-      type: String,
-      default: '60%'
-    },
-    queryAction: {
-      type: Function,
-      required: true
-    },
-    updateAction: {
-      type: Function,
-      required: true
-    },
-    /** 保存成功后关闭 */
-    closeOnSuccess: Boolean
-  },
-  methods: {
-    onOpen() {
-      this.queryAction().then(data => {
-        this.model = data
-      })
+    props: {
+      title: {
+        type: String,
+        default: '排序'
+      },
+      icon: {
+        type: String,
+        default: 'sort'
+      },
+      width: {
+        type: String,
+        default: '400px'
+      },
+      height: {
+        type: String,
+        default: '60%'
+      },
+      queryAction: {
+        type: Function,
+        required: true
+      },
+      updateAction: {
+        type: Function,
+        required: true
+      },
+      /** 保存成功后关闭 */
+      closeOnSuccess: Boolean
     },
-    onUpdate() {
-      this.loading = true
-      this.updateAction(this.model)
-        .then(() => {
-          this.loading = false
-          this.$emit('success', this.model.options)
-          if (this.closeOnSuccess) {
-            this.visible_ = false
-          }
-        })
-        .catch(() => {
-          this.loading = false
-          this.$emit('error')
+    methods: {
+      onOpen() {
+        this.queryAction().then(data => {
+          this.model = data
         })
+      },
+      onUpdate() {
+        this.loading = true
+        this.updateAction(this.model)
+          .then(() => {
+            this.loading = false
+            this.$emit('success', this.model.options)
+            if (this.closeOnSuccess) {
+              this.visible_ = false
+            }
+          })
+          .catch(() => {
+            this.loading = false
+            this.$emit('error')
+          })
+      }
     }
   }
-}
 </script>

package/packages/components/drawer/index.vue

@@ -4,16 +4,7 @@
       <section class="nm-drawer-modal" @click="onModalClick" v-if="modal" v-show="visible"></section>
     </transition>
     <transition :name="`move-${placement}`">
-      <section
-        ref="dialog"
-        class="nm-drawer-dialog"
-        :style="{ width: wrapperWidth }"
-        v-show="visible"
-        v-loading="loading"
-        :element-loading-text="loadingText"
-        :element-loading-background="loadingBackground"
-        :element-loading-spinner="loadingSpinner"
-      >
+      <section ref="dialog" class="nm-drawer-dialog" :style="{ width: wrapperWidth }" v-show="visible" v-loading="loading" :element-loading-text="loadingText" :element-loading-background="loadingBackground" :element-loading-spinner="loadingSpinner">
         <!--头部-->
         <header v-if="header" class="nm-drawer-header">
           <slot name="header">
@@ -65,175 +56,175 @@
   </section>
 </template>
 <script>
-import { mapState } from 'vuex'
-import { oneOf } from '../../utils/assist'
-import { on, off } from '../../utils/dom'
-export default {
-  name: 'Drawer',
-  data() {
-    return {
-      canMove: false,
-      fullscreen_: false,
-      wrapperWidth: this.width,
-      minWidth: 226
-    }
-  },
-  props: {
-    /** 是否显示 */
-    visible: Boolean,
-    /** 是否显示头部 */
-    header: Boolean,
-    /** 是否显示底部 */
-    footer: Boolean,
-    /** 标题 */
-    title: String,
-    /** 图标 */
-    icon: String,
-    /** 位置 */
-    placement: {
-      type: String,
-      default: 'right',
-      validator(value) {
-        return oneOf(value, ['left', 'right'])
+  import { mapState } from 'vuex'
+  import { oneOf } from '../../utils/assist'
+  import { on, off } from '../../utils/dom'
+  export default {
+    name: 'Drawer',
+    data() {
+      return {
+        canMove: false,
+        fullscreen_: false,
+        wrapperWidth: this.width,
+        minWidth: 226
       }
     },
-    /** 宽度 */
-    width: {
-      type: String,
-      default: '30%'
-    },
-    /** 是否显示水平滚动条 */
-    horizontal: Boolean,
-    /** loading */
-    loading: Boolean,
-    /** 是否附加到Body */
-    appendToBody: Boolean,
-    /** 是否显示模态框 */
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    /** 是否点击模态框关闭抽屉 */
-    modalClickClose: {
-      type: Boolean,
-      default: true
-    },
-    /** 自定义class */
-    customClass: String,
-    /** 是否显示全屏按钮 */
-    fullscreen: {
-      type: Boolean,
-      default: true
-    },
-    /** 没有内边距 */
-    noPadding: Boolean,
-    /** 可拖拽 */
-    draggable: {
-      type: Boolean,
-      default: false
+    props: {
+      /** 是否显示 */
+      visible: Boolean,
+      /** 是否显示头部 */
+      header: Boolean,
+      /** 是否显示底部 */
+      footer: Boolean,
+      /** 标题 */
+      title: String,
+      /** 图标 */
+      icon: String,
+      /** 位置 */
+      placement: {
+        type: String,
+        default: 'right',
+        validator(value) {
+          return oneOf(value, ['left', 'right'])
+        }
+      },
+      /** 宽度 */
+      width: {
+        type: String,
+        default: '30%'
+      },
+      /** 是否显示水平滚动条 */
+      horizontal: Boolean,
+      /** loading */
+      loading: Boolean,
+      /** 是否附加到Body */
+      appendToBody: Boolean,
+      /** 是否显示模态框 */
+      modal: {
+        type: Boolean,
+        default: true
+      },
+      /** 是否点击模态框关闭抽屉 */
+      modalClickClose: {
+        type: Boolean,
+        default: true
+      },
+      /** 自定义class */
+      customClass: String,
+      /** 是否显示全屏按钮 */
+      fullscreen: {
+        type: Boolean,
+        default: true
+      },
+      /** 没有内边距 */
+      noPadding: Boolean,
+      /** 可拖拽 */
+      draggable: {
+        type: Boolean,
+        default: false
+      },
+      /** 不显示滚动条 */
+      noScrollbar: Boolean
     },
-    /** 不显示滚动条 */
-    noScrollbar: Boolean
-  },
-  computed: {
-    ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
-    class_() {
-      return ['nm-drawer', this.placement, this.fullscreen_ ? 'fullscreen' : '', this.draggable ? 'draggable' : '', this.customClass, this.noPadding ? 'no-padding' : '', this.fontSize]
-    }
-  },
-  methods: {
-    append() {
-      if (this.appendToBody) {
-        // 附加到body下面
-        document.body.appendChild(this.$el)
+    computed: {
+      ...mapState('app/loading', { loadingText: 'text', loadingBackground: 'background', loadingSpinner: 'spinner' }),
+      class_() {
+        return ['nm-drawer', this.placement, this.fullscreen_ ? 'fullscreen' : '', this.draggable ? 'draggable' : '', this.customClass, this.noPadding ? 'no-padding' : '', this.fontSize]
       }
-
-      window.addEventListener('resize', this.resize)
-    },
-    close() {
-      this.fullscreen_ = false
-      this.$emit('update:visible', false)
-    },
-    resize() {
-      this.$refs.scrollbar.update()
-    },
-    /** 开启全屏 */
-    openFullscreen() {
-      this.fullscreen_ = true
-      // 全屏事件
-      this.$emit('fullscreen-change', this.fullscreen_)
     },
-    /** 关闭全屏 */
-    closeFullscreen() {
-      this.fullscreen_ = false
-      // 全屏事件
-      this.$emit('fullscreen-change', this.fullscreen_)
-    },
-    /** 全屏事件 */
-    triggerFullscreen() {
-      this.fullscreen_ ? this.closeFullscreen() : this.openFullscreen()
-    },
-    onModalClick() {
-      if (this.modal && this.modalClickClose) {
-        this.close()
+    methods: {
+      append() {
+        if (this.appendToBody) {
+          // 附加到body下面
+          document.body.appendChild(this.$el)
+        }
+
+        window.addEventListener('resize', this.resize)
+      },
+      close() {
+        this.fullscreen_ = false
+        this.$emit('update:visible', false)
+      },
+      resize() {
+        this.$refs.scrollbar.update()
+      },
+      /** 开启全屏 */
+      openFullscreen() {
+        this.fullscreen_ = true
+        // 全屏事件
+        this.$emit('fullscreen-change', this.fullscreen_)
+      },
+      /** 关闭全屏 */
+      closeFullscreen() {
+        this.fullscreen_ = false
+        // 全屏事件
+        this.$emit('fullscreen-change', this.fullscreen_)
+      },
+      /** 全屏事件 */
+      triggerFullscreen() {
+        this.fullscreen_ ? this.closeFullscreen() : this.openFullscreen()
+      },
+      onModalClick() {
+        if (this.modal && this.modalClickClose) {
+          this.close()
+        }
+      },
+      /** 拖拽按钮鼠标按下事件 */
+      onTriggerMousedown() {
+        if (!this.draggable) return
+        this.canMove = true
+        // 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
+        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
+        on(document, 'mousemove', this.onMousemove)
+        on(document, 'mouseup', this.onMouseup)
+      },
+      onMousemove(event) {
+        if (!this.canMove || !this.draggable) return
+        const { width, x } = this.$el.getBoundingClientRect()
+        let wrapperWidth
+        if (this.placement === 'right' && event.pageX - x > 20) {
+          wrapperWidth = width + x - event.pageX
+        } else if (this.placement === 'left' && event.pageX - x < width - 20) {
+          wrapperWidth = event.pageX - x
+        }
+        if (wrapperWidth > this.minWidth) {
+          this.wrapperWidth = wrapperWidth + 'px'
+        }
+      },
+      onMouseup() {
+        if (!this.draggable) return
+        this.canMove = false
+        off(document, 'mousemove', this.onMousemove)
+        off(document, 'mouseup', this.onMouseup)
       }
     },
-    /** 拖拽按钮鼠标按下事件 */
-    onTriggerMousedown() {
-      if (!this.draggable) return
-      this.canMove = true
-      // 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
-      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
-      on(document, 'mousemove', this.onMousemove)
-      on(document, 'mouseup', this.onMouseup)
-    },
-    onMousemove(event) {
-      if (!this.canMove || !this.draggable) return
-      const { width, x } = this.$el.getBoundingClientRect()
-      let wrapperWidth
-      if (this.placement === 'right' && event.pageX - x > 20) {
-        wrapperWidth = width + x - event.pageX
-      } else if (this.placement === 'left' && event.pageX - x < width - 20) {
-        wrapperWidth = event.pageX - x
-      }
-      if (wrapperWidth > this.minWidth) {
-        this.wrapperWidth = wrapperWidth + 'px'
-      }
+    mounted() {
+      this.append()
     },
-    onMouseup() {
-      if (!this.draggable) return
-      this.canMove = false
+    destroyed() {
       off(document, 'mousemove', this.onMousemove)
       off(document, 'mouseup', this.onMouseup)
-    }
-  },
-  mounted() {
-    this.append()
-  },
-  destroyed() {
-    off(document, 'mousemove', this.onMousemove)
-    off(document, 'mouseup', this.onMouseup)
-    if (this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el)
-      window.removeEventListener('resize', this.resize)
-    }
-  },
-  watch: {
-    visible(val) {
-      if (val) {
-        this.$emit('open')
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+        window.removeEventListener('resize', this.resize)
+      }
+    },
+    watch: {
+      visible(val) {
+        if (val) {
+          this.$emit('open')
 
-        this.$nextTick(() => {
-          this.$emit('opened')
-        })
-      } else {
-        this.$emit('close')
+          this.$nextTick(() => {
+            this.$emit('opened')
+          })
+        } else {
+          this.$emit('close')
 
-        this.$nextTick(() => {
-          this.$emit('closed')
-        })
+          this.$nextTick(() => {
+            this.$emit('closed')
+          })
+        }
       }
     }
   }
-}
 </script>

package/packages/components/enums/sex/index.vue

@@ -1,3 +1,3 @@
 <template>
-  <el-select v-model="form.model.sex"> </el-select>
+  <el-select v-model="form.model.sex"></el-select>
 </template>

package/packages/components/flex/index.vue

@@ -19,40 +19,40 @@
   </section>
 </template>
 <script>
-export default {
-  name: 'Flex',
-  props: {
-    // 布局方向，对应flex-direction属性
-    direction: {
-      type: String,
-      validator(value) {
-        return value === 'column' || value === 'row'
+  export default {
+    name: 'Flex',
+    props: {
+      // 布局方向，对应flex-direction属性
+      direction: {
+        type: String,
+        validator(value) {
+          return value === 'column' || value === 'row'
+        },
+        default: 'column'
       },
-      default: 'column'
-    },
-    // 固定宽度或高度
-    fix: {
-      type: String,
-      required: true
-    },
-    // 固定模式，top、bottom、left、right
-    fixMode: {
-      type: String,
-      validator(value) {
-        return ['top', 'bottom', 'left', 'right'].includes(value)
+      // 固定宽度或高度
+      fix: {
+        type: String,
+        required: true
       },
-      default: 'top'
-    },
-    height: {
-      type: String,
-      default: '100%'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    /** 间隔 */
-    gutter: Number
+      // 固定模式，top、bottom、left、right
+      fixMode: {
+        type: String,
+        validator(value) {
+          return ['top', 'bottom', 'left', 'right'].includes(value)
+        },
+        default: 'top'
+      },
+      height: {
+        type: String,
+        default: '100%'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      /** 间隔 */
+      gutter: Number
+    }
   }
-}
 </script>