eoss-ui 0.4.79-beta.0 → 0.4.80

package/lib/theme-chalk/layout.css

@@ -0,0 +1 @@
+@charset "UTF-8";.es-layout{height:100%;position:relative;-webkit-transition:height .2s ease;transition:height .2s ease}.es-layout .es-layout-item{position:absolute;padding:6px;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.es-layout .es-layout-item.es-dragging{z-index:3}.es-layout .es-layout-item .es-card{width:100%;height:100%}.es-layout .es-layout-item .es-layout-resizable{width:20px;height:20px;position:absolute;right:6px;bottom:6px;z-index:9999;cursor:se-resize}.es-layout .es-layout-item .es-layout-resizable-width{width:10px;position:absolute;top:6px;right:6px;bottom:6px;z-index:9998;cursor:e-resize}.es-layout .es-layout-item .es-layout-resizable-height{height:10px;position:absolute;left:6px;right:6px;bottom:6px;z-index:9998;cursor:s-resize}

package/lib/tips.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 60);
+/******/ 	return __webpack_require__(__webpack_require__.s = 61);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -3359,14 +3359,14 @@ module.exports = require("json-bigint");
 
 /***/ }),
 
-/***/ 60:
+/***/ 61:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/tips/src/main.vue?vue&type=template&id=f9dec32c&
+// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/tips/src/main.vue?vue&type=template&id=33945f34&
 var render = function () {
   var _vm = this
   var _h = _vm.$createElement
@@ -3398,6 +3398,7 @@ var render = function () {
             _vm.icon,
             "es-tips" + (_vm.position ? "-" + _vm.position : _vm.position),
           ],
+          on: { click: _vm.handleClick },
         }),
       ]),
     ],
@@ -3408,7 +3409,7 @@ var staticRenderFns = []
 render._withStripped = true
 
 
-// CONCATENATED MODULE: ./packages/tips/src/main.vue?vue&type=template&id=f9dec32c&
+// CONCATENATED MODULE: ./packages/tips/src/main.vue?vue&type=template&id=33945f34&
 
 // EXTERNAL MODULE: ./src/config/api.js
 var api = __webpack_require__(1);
@@ -3433,6 +3434,7 @@ var util = __webpack_require__(0);
 //
 //
 //
+//
 
 
 
@@ -3545,6 +3547,10 @@ var util = __webpack_require__(0);
           _this2.$message.error(err.message);
         }
       });
+    },
+    handleClick: function handleClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
     }
   }
 });

package/lib/toolbar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 76);
+/******/ 	return __webpack_require__(__webpack_require__.s = 77);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -192,7 +192,7 @@ function normalizeComponent(
 
 /***/ }),
 
-/***/ 76:
+/***/ 77:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/tree-group.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 62);
+/******/ 	return __webpack_require__(__webpack_require__.s = 63);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -3359,7 +3359,7 @@ module.exports = require("json-bigint");
 
 /***/ }),
 
-/***/ 62:
+/***/ 63:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/tree.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 61);
+/******/ 	return __webpack_require__(__webpack_require__.s = 62);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -3359,7 +3359,7 @@ module.exports = require("json-bigint");
 
 /***/ }),
 
-/***/ 61:
+/***/ 62:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/upload.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 32);
+/******/ 	return __webpack_require__(__webpack_require__.s = 34);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -3338,7 +3338,7 @@ module.exports = require("qs");
 
 /***/ }),
 
-/***/ 32:
+/***/ 34:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/wujie.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 64);
+/******/ 	return __webpack_require__(__webpack_require__.s = 65);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -3359,7 +3359,7 @@ module.exports = require("json-bigint");
 
 /***/ }),
 
-/***/ 64:
+/***/ 65:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/wxlogin.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 65);
+/******/ 	return __webpack_require__(__webpack_require__.s = 66);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -3359,7 +3359,7 @@ module.exports = require("json-bigint");
 
 /***/ }),
 
-/***/ 65:
+/***/ 66:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eoss-ui",
-  "version": "0.4.79-beta.0",
+  "version": "0.4.80",
   "description": "eoss内部业务组件",
   "main": "lib/eoss-ui.common.js",
   "files": [

package/packages/form/src/main.vue

@@ -72,6 +72,8 @@
                       >
                         <es-label
                           :contents="item.label"
+                          :event="item.label.event"
+                          :events="item.label.events"
                           v-if="item.label"
                         ></es-label>
                         <span v-if="item.text || item.type === 'text'">{{
@@ -247,6 +249,8 @@
                           showLabel
                         "
                         :contents="item.label"
+                        :event="item.label.event"
+                        :events="item.label.events"
                         :plain="item.plain || item.name === undefined"
                       ></es-label>
                       <es-input-number
@@ -1182,6 +1186,8 @@
                       showLabel
                     "
                     :contents="item.label"
+                    :event="item.label.event"
+                    :events="item.label.events"
                     :plain="item.plain || item.name === undefined"
                   ></es-label>
                   <es-input-number
@@ -1978,6 +1984,8 @@
                     <div v-else :key="index" class="es-collapse-title-handler">
                       <es-label
                         :contents="item.label"
+                        :event="item.label.event"
+                        :events="item.label.events"
                         v-if="item.label"
                       ></es-label>
                       <span v-if="item.text || item.type === 'text'">{{
@@ -2143,6 +2151,8 @@
                         showLabel
                       "
                       :contents="item.label"
+                      :event="item.label.event"
+                      :events="item.label.events"
                       :plain="item.plain || item.name === undefined"
                     ></es-label>
                     <es-input-number
@@ -3030,6 +3040,8 @@
                     showLabel
                   "
                   :contents="item.label"
+                  :event="item.label.event"
+                  :events="item.label.events"
                   :plain="item.plain || item.name === undefined"
                 ></es-label>
                 <es-input-number

package/packages/form/src/table.vue

@@ -111,6 +111,8 @@
               >
                 <es-label
                   :contents="item.label"
+                  :event="item.label.event"
+                  :events="item.label.events"
                   :plain="item.plain"
                   :rules="item.rules"
                   v-if="item.type !== 'table'"
@@ -156,6 +158,8 @@
                   <es-label
                     v-if="item.type === 'label' || item.type === 'empty'"
                     :contents="item.text"
+                    :event="item.label.event"
+                    :events="item.label.events"
                   ></es-label>
                   <el-form-item
                     v-else

package/packages/label/src/main.vue

@@ -44,7 +44,9 @@ export default {
       type: String,
       default: '120px'
     },
-    plain: Boolean
+    plain: Boolean,
+    events: Object,
+    event: Function
   },
   computed: {
     isRequired() {
@@ -70,6 +72,25 @@ export default {
     };
   },
   mounted() {},
+  methods: {
+    handleClick(e, type, obj) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (type) {
+        if (
+          this.events &&
+          this.events[type] &&
+          typeof this.events[type] === 'function'
+        ) {
+          let params = obj ? [obj, e] : [e];
+          this.events[type](...params);
+        }
+      } else {
+        this.event && this.event(this, e);
+        this.$emit('click', this, e);
+      }
+    }
+  },
   render(h) {
     let i = 0;
     let doms = [];
@@ -88,16 +109,49 @@ export default {
           ) {
             doms.push(
               h('i', {
-                class: this.icon
+                class: [
+                  this.icon,
+                  this.events && this.events['icon'] ? 'es-pointer' : ''
+                ],
+                on: {
+                  click: (e) => {
+                    this.handleClick(e, 'icon');
+                  }
+                }
               })
             );
           } else if (this.icon.indexOf('&#') > -1) {
-            doms.push(h('i', { class: 'es-label-icon es-icons' }, [this.icon]));
+            doms.push(
+              h(
+                'i',
+                {
+                  class: [
+                    'es-label-icon',
+                    'es-icons',
+                    this.events && this.events['icon'] ? 'es-pointer' : ''
+                  ],
+                  on: {
+                    click: (e) => {
+                      this.handleClick(e, 'icon');
+                    }
+                  }
+                },
+                [this.icon]
+              )
+            );
           } else {
             doms.push(
               h('el-icon', {
-                class: 'es-label-icon',
-                props: { name: this.icon }
+                class: [
+                  'es-label-icon',
+                  this.events && this.events['icon'] ? 'es-pointer' : ''
+                ],
+                props: { name: this.icon },
+                on: {
+                  click: (e) => {
+                    this.handleClick(e, 'icon');
+                  }
+                }
               })
             );
           }
@@ -105,8 +159,18 @@ export default {
         if (this.image || this.img) {
           doms.push(
             h('img', {
-              class: 'es-label-img',
-              attrs: { src: this.image || this.img }
+              class: [
+                'es-label-img',
+                this.events && (this.events['image'] || this.events['img'])
+                  ? 'es-pointer'
+                  : ''
+              ],
+              attrs: { src: this.image || this.img },
+              on: {
+                click: (e) => {
+                  this.handleClick(e, this.image ? 'image' : 'img');
+                }
+              }
             })
           );
         }
@@ -156,20 +220,49 @@ export default {
               ) {
                 doms.push(
                   h('i', {
-                    class: this.contents[i]
+                    class: [
+                      this.contents[i],
+                      this.events && this.events['icon'] ? 'es-pointer' : ''
+                    ],
+                    on: {
+                      click: (e) => {
+                        this.handleClick(e, 'icon');
+                      }
+                    }
                   })
                 );
               } else if (this.contents[i].indexOf('&#') > -1) {
                 doms.push(
-                  h('i', { class: 'es-label-icon es-icons' }, [
-                    this.contents[i]
-                  ])
+                  h(
+                    'i',
+                    {
+                      class: [
+                        'es-label-icon',
+                        'es-icons',
+                        this.events && this.events['icon'] ? 'es-pointer' : ''
+                      ],
+                      on: {
+                        click: (e) => {
+                          this.handleClick(e, 'icon');
+                        }
+                      }
+                    },
+                    [this.contents[i]]
+                  )
                 );
               } else {
                 doms.push(
                   h('el-icon', {
-                    class: 'es-label-icon',
-                    props: { name: this.contents[i] }
+                    class: [
+                      'es-label-icon',
+                      this.events && this.events['icon'] ? 'es-pointer' : ''
+                    ],
+                    props: { name: this.contents[i] },
+                    on: {
+                      click: (e) => {
+                        this.handleClick(e, 'icon');
+                      }
+                    }
                   })
                 );
               }
@@ -177,16 +270,32 @@ export default {
             case 'img':
               doms.push(
                 h('img', {
-                  class: 'es-label-img',
-                  attrs: { src: this.contents[i] }
+                  class: [
+                    'es-label-img',
+                    this.events && this.events['img'] ? 'es-pointer' : ''
+                  ],
+                  attrs: { src: this.contents[i] },
+                  on: {
+                    click: (e) => {
+                      this.handleClick(e, 'img');
+                    }
+                  }
                 })
               );
               break;
             case 'image':
               doms.push(
                 h('img', {
-                  class: 'es-label-img',
-                  attrs: { src: this.contents[i] }
+                  class: [
+                    'es-label-img',
+                    this.events && this.events['image'] ? 'es-pointer' : ''
+                  ],
+                  attrs: { src: this.contents[i] },
+                  on: {
+                    click: (e) => {
+                      this.handleClick(e, 'img');
+                    }
+                  }
                 })
               );
               break;
@@ -238,7 +347,10 @@ export default {
       }
       return h(
         'span',
-        { class: { 'es-label': true, 'es-is-required': this.isRequired } },
+        {
+          class: { 'es-label': true, 'es-is-required': this.isRequired },
+          on: { click: this.handleClick }
+        },
         doms
       );
     } else {

package/packages/layout/src/item.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="es-layout-item" ref="move" :style="defaultaStyle">
+  <div
+    ref="move"
+    class="es-layout-item"
+    :class="defaultClasss"
+    :style="defaultaStyle"
+  >
     <es-card> </es-card>
     <div class="es-layout-resizable-width"></div>
     <div class="es-layout-resizable-height"></div>
@@ -31,9 +36,15 @@ export default {
       default: '100px'
     },
     left: String,
-    top: String
+    top: String,
+    index: Number
   },
   computed: {
+    defaultClasss() {
+      return {
+        'es-dragging': this.dragging
+      };
+    },
     defaultaStyle() {
       return {
         width: this.width,
@@ -53,7 +64,8 @@ export default {
   data() {
     return {
       position: { x: 0, y: 0 },
-      move: null
+      interaction: null,
+      dragging: false
     };
   },
   created() {
@@ -64,21 +76,38 @@ export default {
     console.log(this.position);
   },
   mounted() {
-    console.log(interact, this.$refs.move);
-    this.move = interact(this.$refs.move);
-    this.move.draggable({
+    console.log(this.$parent.$el.offsetWidth);
+    this.interaction = interact(this.$refs.move);
+    this.interaction.draggable({
+      modifiers: [
+        interact.modifiers.restrictRect({
+          restriction: 'parent',
+          endOnly: false
+        })
+      ],
       listeners: {
         start: (event) => {
-          console.log(event.type, event.target);
+          this.dragging = true;
+          console.log(event.type, event.target, 111);
         },
         move: (event) => {
           this.position.x += event.dx;
           this.position.y += event.dy;
           event.target.style.transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+        },
+        end: (event) => {
+          this.dragging = false;
+          console.log(event.type, event.target, 222);
         }
       }
     });
-    this.move.resizable({
+    this.interaction.resizable({
+      modifiers: [
+        interact.modifiers.restrictSize({
+          min: { width: 100, height: 100 },
+          max: { width: this.$parent.$el.offsetWidth }
+        })
+      ],
       edges: { top: true, left: true, bottom: true, right: true },
       listeners: {
         move: function (event) {

package/packages/layout/src/main.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="es-layout">
     <layout-item></layout-item>
+    <layout-item top="100px"></layout-item>
   </div>
 </template>
 <script>