meixioacomponent 0.4.2 → 0.4.6

package/lib/style/theme/light.less

@@ -12,7 +12,8 @@
   //滚动条样式
   --scrollbar-color: #1f23392d;
   // 灰色类型
-  --color-gray-d: #dfe1e6;
+  // --color-gray-d: #dfe1e6;
+  --color-gray-d: #ebecf0;
   --color-gray-m: #f4f5f7;
   --color-gray-s: #fafbfc;
 
@@ -20,10 +21,10 @@
   --font-color-d: #172b4d;
   --font-color-m: #344563;
   --font-color-s: #5e6c84;
-  --font-color-ds: #8f959e;   
+  --font-color-ds: #8f959e;
   // 字体颜色 按钮等primary 里面文字的白色非必要不要改
   --text-white: white;
-  --form-label-color: #42526e;
+  --form-label-color: #42526E;
   // 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
   --shadow-down: 0px 4px 10px rgba(0, 0, 0, 0.05);
   // fixed 使用的组件包括：全局提示 / 消息通知
@@ -35,4 +36,4 @@
   --color-table-header: #ebecf0;
   // tooltip 背景颜色
   --color-tooltip: #242424;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.4.02",
+  "version": "0.4.6",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",
@@ -10,6 +10,7 @@
     "build:theme": "cp-cli packages/components/style/ lib/style"
   },
   "dependencies": {
+    "awe-dnd": "^0.3.4",
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "cp-cli": "^1.0.2",
@@ -20,7 +21,6 @@
     "vue": "^2.7.0",
     "vue-cropper": "^0.5.8",
     "vue-router": "^3.2.0",
-    "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

package/packages/components/base/baseCropper/index.vue

@@ -7,7 +7,7 @@
     :destroy="closeCropper"
     :contentHeight="`400px`"
   >
-    <div class="base-dialog-wrap" slot="dialog-content">
+    <div class="base-dialog-wrap" slot="dialog-content" style="height:400px">
       <vueCropper
         :img="imgUrl"
         ref="cropper"
@@ -117,6 +117,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
 .base-dialog-wrap {
   width: 100%;
   height: 100%;

package/packages/components/base/baseDialog/index.vue

@@ -6,7 +6,6 @@
       :modal="modal"
       :width="width"
       :show-close="false"
-      :before-close="beforeClose"
       :close-on-click-modal="false"
       :close-on-press-escape="false"
       :append-to-body="appendToBody"
@@ -43,13 +42,15 @@
             :event="true"
             v-if="hasCloseIcon"
             :name="`meixicomponenticon-close`"
-            @iconClick="iconClick"
+            @iconClick="onHandleClose"
           ></base-icon>
         </div>
       </div>
-      <div class="dialog-content-wrap" :style="dialogContentStyle">
+
+      <base-list class="dialog-content-wrap" :style="dialogContentStyle">
         <slot name="dialog-content"></slot>
-      </div>
+      </base-list>
+
       <slot
         class="dialog-footer-wrap"
         slot="footer"
@@ -205,8 +206,14 @@ export default {
         this.centerDialogVisible = false
       }
     },
-    iconClick() {
-      this.closeDialog()
+    onHandleClose() {
+      const { beforeClose } = this.$props
+      if (beforeClose) {
+        //  先执行传入的方法  this.closeDialog  再手动执行关闭的方法
+        this.beforeClose(this.closeDialog)
+      } else {
+        this.closeDialog()
+      }
     },
 
     handleCache() {
@@ -225,7 +232,6 @@ export default {
   .dialog-content-wrap {
     width: 100%;
     height: auto;
-    max-height: 70vh;
     overflow-y: auto;
   }
 }

package/packages/components/base/baseDrawer/index.vue

@@ -38,14 +38,16 @@
           @iconClick="iconClick"
         ></base-icon>
       </div>
-      <div class="drawer-content" :style="contentStyle">
+
+      <base-list class="drawer-content" :style="contentStyle">
         <slot name="drawer-content"></slot>
-      </div>
+      </base-list>
     </div>
   </el-drawer>
 </template>
 
 <script>
+import baseList from '../baseList/index.vue'
 import UseResize from '../../../config/use/UseResize'
 export default {
   name: 'baseDrawer',
@@ -61,6 +63,7 @@ export default {
   },
 
   mounted() {},
+  components: { baseList },
   props: {
     resize: {
       type: Boolean,

package/packages/components/base/baseIcon/index.vue

@@ -75,7 +75,7 @@ export default {
           color = `var(--icon-color-s)`
           break
         default:
-          color = `var(--${propsColor})`
+          color = propsColor
           break
       }
       return color
@@ -112,7 +112,6 @@ export default {
   methods: {
     iconClick() {
       if (this.$props.event) {
-        console.log('das')
         this.$emit('iconClick')
       }
     },

package/packages/components/base/baseList/index.js

@@ -0,0 +1,6 @@
+import baseList from './index.vue'
+
+baseList.install = function (Vue) {
+  Vue.component(baseList.name, baseList)
+}
+export default baseList

package/packages/components/base/baseList/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <elScrollBar
+    class="list-wrap"
+    :onScroll="onScroll"
+    :noresize="noresize"
+    :wrapStyle="wrapStyle"
+    :viewStyle="viewStyle"
+  >
+    <slot>
+      
+    </slot>
+  </elScrollBar>
+</template>
+
+<script>
+import elScrollBar from './scrollbar/src/main'
+export default {
+  name: 'baseList',
+  data() {
+    return {}
+  },
+  props: {
+    onScroll: {
+      type: Function,
+    },
+    noresize: {
+      type: Boolean,
+      default: true,
+    },
+    wrapStyle: {
+      type: Object,
+    },
+    viewStyle: {
+      type: Object,
+    },
+  },
+  components: {
+    elScrollBar,
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.list-wrap {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/packages/components/base/baseList/scrollbar/index.js

@@ -0,0 +1,8 @@
+import Scrollbar from './src/main';
+
+/* istanbul ignore next */
+Scrollbar.install = function(Vue) {
+  Vue.component(Scrollbar.name, Scrollbar);
+};
+
+export default Scrollbar;

package/packages/components/base/baseList/scrollbar/src/bar.js

@@ -0,0 +1,92 @@
+import { on, off } from 'element-ui/src/utils/dom';
+import { renderThumbStyle, BAR_MAP } from './util';
+
+/* istanbul ignore next */
+export default {
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  computed: {
+    bar() {
+      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
+    },
+
+    wrap() {
+      return this.$parent.wrap;
+    }
+  },
+
+  render(h) {
+    const { size, move, bar } = this;
+
+    return (
+      <div
+        class={ ['el-scrollbar__bar', 'is-' + bar.key] }
+        onMousedown={ this.clickTrackHandler } >
+        <div
+          ref="thumb"
+          class="el-scrollbar__thumb"
+          onMousedown={ this.clickThumbHandler }
+          style={ renderThumbStyle({ size, move, bar }) }>
+        </div>
+      </div>
+    );
+  },
+
+  methods: {
+    clickThumbHandler(e) {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      this.startDrag(e);
+      this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
+    },
+
+    clickTrackHandler(e) {
+      const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
+      const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);
+      const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
+    },
+
+    startDrag(e) {
+      e.stopImmediatePropagation();
+      this.cursorDown = true;
+
+      on(document, 'mousemove', this.mouseMoveDocumentHandler);
+      on(document, 'mouseup', this.mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    },
+
+    mouseMoveDocumentHandler(e) {
+      if (this.cursorDown === false) return;
+      const prevPage = this[this.bar.axis];
+
+      if (!prevPage) return;
+
+      const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
+      const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
+    },
+
+    mouseUpDocumentHandler(e) {
+      this.cursorDown = false;
+      this[this.bar.axis] = 0;
+      off(document, 'mousemove', this.mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    }
+  },
+
+  destroyed() {
+    off(document, 'mouseup', this.mouseUpDocumentHandler);
+  }
+};

package/packages/components/base/baseList/scrollbar/src/main.js

@@ -0,0 +1,150 @@
+// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
+
+import {
+  addResizeListener,
+  removeResizeListener,
+} from 'element-ui/src/utils/resize-event'
+import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'
+import { toObject } from 'element-ui/src/utils/util'
+import Bar from './bar'
+
+/* istanbul ignore next */
+export default {
+  name: 'ElScrollbar',
+
+  components: { Bar },
+
+  props: {
+    native: Boolean,
+    wrapStyle: {},
+    wrapClass: {},
+    viewClass: {},
+    viewStyle: {},
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div',
+    },
+
+    onScroll: {
+      type: Function,
+    },
+  },
+
+  data() {
+    return {
+      moveX: 0,
+      moveY: 0,
+      sizeWidth: '0',
+      sizeHeight: '0',
+    }
+  },
+
+  computed: {
+    wrap() {
+      return this.$refs.wrap
+    },
+  },
+
+  render(h) {
+    let gutter = scrollbarWidth()
+    let style = this.wrapStyle
+
+    if (gutter) {
+      const gutterWith = `-${gutter}px`
+      const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`
+
+      if (Array.isArray(this.wrapStyle)) {
+        style = toObject(this.wrapStyle)
+        style.marginRight = style.marginBottom = gutterWith
+      } else if (typeof this.wrapStyle === 'string') {
+        style += gutterStyle
+      } else {
+        style = gutterStyle
+      }
+    }
+    const view = h(
+      this.tag,
+      {
+        class: ['el-scrollbar__view', this.viewClass],
+        style: this.viewStyle,
+        ref: 'resize',
+      },
+      this.$slots.default,
+    )
+    const wrap = (
+      <div
+        ref="wrap"
+        style={style}
+        onScroll={this.handleScroll}
+        class={[
+          this.wrapClass,
+          'el-scrollbar__wrap',
+          gutter ? '' : 'el-scrollbar__wrap--hidden-default',
+        ]}
+      >
+        {[view]}
+      </div>
+    )
+    let nodes
+
+    if (!this.native) {
+      nodes = [
+        wrap,
+        <Bar move={this.moveX} size={this.sizeWidth}></Bar>,
+        <Bar vertical move={this.moveY} size={this.sizeHeight}></Bar>,
+      ]
+    } else {
+      nodes = [
+        <div
+          ref="wrap"
+          class={[this.wrapClass, 'el-scrollbar__wrap']}
+          style={style}
+        >
+          {[view]}
+        </div>,
+      ]
+    }
+    return h('div', { class: 'el-scrollbar' }, nodes)
+  },
+
+  methods: {
+    handleScroll(e) {
+      const wrap = this.wrap
+      const target = e.target
+      const { scrollHeight, scrollTop, offsetHeight } = target
+      this.moveY = (wrap.scrollTop * 100) / wrap.clientHeight
+      this.moveX = (wrap.scrollLeft * 100) / wrap.clientWidth
+      const { onScroll } = this.$props
+      if (onScroll) {
+        const subsHeight = scrollHeight - (scrollTop + offsetHeight)
+        onScroll(subsHeight)
+      }
+    },
+
+    update() {
+      this.$nextTick(() => {
+        let heightPercentage, widthPercentage
+        const wrap = this.wrap
+        if (!wrap) return
+
+        heightPercentage = (wrap.clientHeight * 100) / wrap.scrollHeight
+        widthPercentage = (wrap.clientWidth * 100) / wrap.scrollWidth
+
+        this.sizeHeight = heightPercentage < 100 ? heightPercentage + '%' : ''
+        this.sizeWidth = widthPercentage < 100 ? widthPercentage + '%' : ''
+      })
+    },
+  },
+
+  mounted() {
+    if (this.native) return
+    this.$nextTick(this.update)
+    !this.noresize && addResizeListener(this.$refs.resize, this.update)
+  },
+
+  beforeDestroy() {
+    if (this.native) return
+    !this.noresize && removeResizeListener(this.$refs.resize, this.update)
+  },
+}

package/packages/components/base/baseList/scrollbar/src/util.js

@@ -0,0 +1,34 @@
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top'
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left'
+  }
+};
+
+export function renderThumbStyle({ move, size, bar }) {
+  const style = {};
+  const translate = `translate${bar.axis}(${ move }%)`;
+
+  style[bar.size] = size;
+  style.transform = translate;
+  style.msTransform = translate;
+  style.webkitTransform = translate;
+
+  return style;
+};

package/packages/components/base/baseNumberInput/index.js

@@ -0,0 +1,6 @@
+import baseNumberInput from './index.vue'
+
+baseNumberInput.install = function (Vue) {
+  Vue.component(baseNumberInput.name, baseNumberInput)
+}
+export default baseNumberInput

package/packages/components/base/baseNumberInput/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="pro-number-wrap" :class="{ select: select, disabled: disabled }">
+    <el-input-number
+      :min="min"
+      :max="max"
+      :class="{
+        unit: unit,
+        controls: controls,
+      }"
+      :size="size"
+      ref="target"
+      class="value-input"
+      :controls="controls"
+      :precision="precision"
+      v-model.number="module"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      @change="onChange"
+      :placeholder="placeholder"
+      style="width: 100%; height: 100%;"
+    ></el-input-number>
+    <div class="number-unit" v-if="(unit || select) && !controls">
+      <span v-if="!select">{{ unit }}</span>
+
+      <BaseStoreSelect
+        v-else
+        :size="size"
+        :placeholder="`规格`"
+        v-model="_linkValue"
+        :disabled="disabled"
+        :useStore="selectStore"
+      ></BaseStoreSelect>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseStoreSelect from '../baseStoreSelect/index.vue'
+export default {
+  name: 'baseNumberInput',
+  data() {
+    return {}
+  },
+  props: {
+    value: {},
+    precision: {
+      default: 0,
+    },
+    unit: {},
+    select: null,
+    disabled: {
+      default: false,
+    },
+    maxlength: {},
+    size: {},
+    controls: { default: false },
+    min: {
+      default: null,
+    },
+    max: {},
+    linkValue: {},
+
+    selectStore: {},
+
+    placeholder: {
+      type: String,
+    },
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.$props.value
+      },
+    },
+    _linkValue: {
+      set(val) {
+        this.$emit('selectChange', val)
+      },
+      get() {
+        return this.$props.linkValue
+      },
+    },
+  },
+  methods: {
+    focus() {
+      this.$refs.target.focus()
+    },
+
+    onChange() {
+      this.$emit('onChange')
+    },
+  },
+  components: { BaseStoreSelect },
+}
+</script>
+
+<style lang="less" scoped>
+.pro-number-wrap {
+  width: 100%;
+  display: flex;
+  position: relative;
+  justify-items: center;
+  &:hover {
+    border-color: var(--color-primary);
+  }
+  .unit {
+    width: calc(100%);
+    border-radius: inherit;
+    /deep/ input {
+      padding-right: 34px !important;
+    }
+  }
+
+  .number-unit {
+    width: 28px;
+    height: 28px;
+    right: 2px;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    line-height: 28px;
+    position: absolute;
+    background: var(--color-gray-d);
+    span {
+      color: var(--font-color-d);
+      font-size: var(--font-size-s);
+      font-weight: var(--font-weight-g);
+    }
+  }
+  .controls {
+    /deep/ .el-input-number__decrease {
+      left: 2px;
+      border-right: 1px solid var(--color-gray-d) !important;
+    }
+  }
+  /deep/ .el-input-number__increase {
+    right: 2px;
+    border-left: 1px solid var(--color-gray-d) !important;
+  }
+  /deep/ .el-input-number__decrease,
+  /deep/ .el-input-number__increase {
+    top: 50%;
+    width: 40px;
+
+    height: calc(100% - 4px) !important;
+    transform: translateY(-50%);
+  }
+  /deep/ .el-input__inner {
+    &:hover,
+    &:focus {
+      border: 2px solid var(--color-primary) !important;
+    }
+  }
+}
+
+.select {
+  .value-input {
+    /deep/ input {
+      padding-right: 71px !important;
+    }
+  }
+  .number-unit {
+    width: 65px !important;
+    height: 28px !important;
+    background: var(--color-gray-d);
+
+    /deep/ input {
+      width: 100% !important;
+      height: 24px !important;
+      border: 0px !important;
+      background: inherit !important;
+    }
+    // /deep/.el-input.is-disabled .el-input__inner {
+    //   color: var(--font-color-d);
+    // }
+  }
+}
+.disabled {
+  .number-unit {
+    span {
+      color: #8f959e;
+    }
+  }
+}
+/deep/ input {
+  font-weight: var(--font-weight-kg);
+}
+</style>