cnhis-design-vue 2.1.78 → 2.1.80

package/packages/fabric-chart/src/components/DropPopup.vue

@@ -1,90 +1,90 @@
-<template>
-  <div class="c-drop-popup" :style="dialogStyle">
-    <div class="c-drop-popup-list">
-      <span>{{val.title}}</span>
-      <span v-for="item in val.list" :key="item.id">
-        {{`${item.name}: ${item.value}`}}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import FabricCommon from '../mixins/fabricCommon';
-
-export default {
-  name: 'CDropPopup',
-  mixins: [FabricCommon],
-  props: {
-    dropPos: {
-      type: Object,
-      required: true
-    },
-    val: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    dialogStyle() {
-      const { canvasWidth, canvasHeight } = this.propItems;
-      const { left, top } = this.dropPos;
-      const marginLeft = this.dropPos.margin?.left || 5;
-      const marginTop = this.dropPos.margin?.top || 0;
-      const style = {
-        top: '',
-        bottom: '',
-        left: '',
-        right: '',
-        'transform-origin': ''
-      };
-      const height = 200;
-      if (canvasWidth - (left + marginLeft) < height) {
-        style.right = canvasWidth - left + marginLeft + 'px';
-        style['transform-origin'] = 'right';
-      } else {
-        style.left = (left + marginLeft) + 'px';
-        style['transform-origin'] = 'left';
-      }
-      if (canvasHeight - (top + marginTop) < height) {
-        style.bottom = canvasHeight - top + marginTop + 'px';
-        style['transform-origin'] += ' bottom';
-      } else {
-        style.top = (top + marginTop) + 'px';
-        style['transform-origin'] += ' top';
-      }
-      return style;
-    }
-  },
-
-  mounted() {
-  },
-};
-</script>
-
-<style lang="less" scoped>
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.c-drop-popup {
-  position: absolute;
-  z-index: 1001;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
-  border: 1px solid #e2e6ed;
-  border-radius: 2px;
-  font-size: 12px;
-}
-.c-drop-popup-list {
-  // height: 36px;
-  padding: 8px 12px;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-}
-
-</style>
+<template>
+  <div class="c-drop-popup" :style="dialogStyle">
+    <div class="c-drop-popup-list">
+      <span>{{val.title}}</span>
+      <span v-for="item in val.list" :key="item.id">
+        {{`${item.name}: ${item.value}`}}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import FabricCommon from '../mixins/fabricCommon';
+
+export default {
+  name: 'CDropPopup',
+  mixins: [FabricCommon],
+  props: {
+    dropPos: {
+      type: Object,
+      required: true
+    },
+    val: {
+      type: Object,
+      required: true
+    }
+  },
+
+  computed: {
+    dialogStyle() {
+      const { canvasWidth, canvasHeight } = this.propItems;
+      const { left, top } = this.dropPos;
+      const marginLeft = this.dropPos.margin?.left || 5;
+      const marginTop = this.dropPos.margin?.top || 0;
+      const style = {
+        top: '',
+        bottom: '',
+        left: '',
+        right: '',
+        'transform-origin': ''
+      };
+      const height = 200;
+      if (canvasWidth - (left + marginLeft) < height) {
+        style.right = canvasWidth - left + marginLeft + 'px';
+        style['transform-origin'] = 'right';
+      } else {
+        style.left = (left + marginLeft) + 'px';
+        style['transform-origin'] = 'left';
+      }
+      if (canvasHeight - (top + marginTop) < height) {
+        style.bottom = canvasHeight - top + marginTop + 'px';
+        style['transform-origin'] += ' bottom';
+      } else {
+        style.top = (top + marginTop) + 'px';
+        style['transform-origin'] += ' top';
+      }
+      return style;
+    }
+  },
+
+  mounted() {
+  },
+};
+</script>
+
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.c-drop-popup {
+  position: absolute;
+  z-index: 1001;
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
+  border: 1px solid #e2e6ed;
+  border-radius: 2px;
+  font-size: 12px;
+}
+.c-drop-popup-list {
+  // height: 36px;
+  padding: 8px 12px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+}
+
+</style>

package/packages/fabric-chart/src/components/MouseRightClick.vue

@@ -1,168 +1,168 @@
-<template>
-  <div class="c-mouse-right-menu-popup c-animation-in" :style="dialogStyle">
-    <div class="c-mouse-right-menu">
-      <div v-for="(item, index) in nodeList" :key="index" class="c-mouse-menu-item" @click="handleNodeClick(item)">
-        <span>{{ item.name }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CMouseRightClick',
-  props: {
-    nodeList: {
-      type: Array,
-      require: true
-    },
-    rightPos: {
-      type: Object,
-      required: true
-    },
-    getContainer: Function
-  },
-
-  computed: {
-    dialogStyle() {
-      const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
-      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
-      const style = {
-        top: '',
-        bottom: '',
-        left: '',
-        right: '',
-        'transform-origin': ''
-      };
-      const height = 200;
-      if (screenWidth - this.rightPos.clientX < height) {
-        style.right = screenWidth - this.rightPos.clientX + 'px';
-        style['transform-origin'] = 'right';
-      } else {
-        style.left = this.rightPos.clientX + 'px';
-        style['transform-origin'] = 'left';
-      }
-      if (screenHeight - this.rightPos.clientY < height) {
-        style.bottom = screenHeight - this.rightPos.clientY + 'px';
-        style['transform-origin'] += ' bottom';
-      } else {
-        style.top = this.rightPos.clientY + 'px';
-        style['transform-origin'] += ' top';
-      }
-      return style;
-    }
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      const body = this.getContainer() ? this.getContainer(): document.querySelector('body');
-      if (body.append) {
-        body.append(this.$el);
-      } else {
-        body.appendChild(this.$el);
-      }
-    });
-  },
-  methods: {
-    handleNodeClick(item) {
-      this.$emit('nodeClick', item);
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.c-mouse-right-menu-popup {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  z-index: 1001;
-  background: #fff;
-  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
-  border: 1px solid #e2e6ed;
-  border-radius: 2px;
-  font-size: 12px;
-}
-.c-mouse-right-menu {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  svg {
-    position: absolute;
-    left: 5px;
-    top: 8px;
-    fill: #3d4757;
-    stroke: #3d4757;
-  }
-}
-.c-mouse-menu-item {
-  flex-shrink: 0;
-  flex-grow: 1;
-  position: relative;
-  padding: 0 32px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  text-align: left;
-  position: relative;
-  cursor: pointer;
-  svg {
-    position: absolute;
-    left: 5px;
-    top: 8px;
-    fill: #3d4757;
-    stroke: #3d4757;
-  }
-}
-.c-mouse-menu-item:hover {
-  background: #ecf5ff;
-  color: #2d7aff;
-  svg {
-    fill: #2d7aff;
-    stroke: #2d7aff;
-  }
-}
-.c-mouse-right-menu-line {
-  width: 100%;
-  height: 1px;
-  padding: 0;
-  background-color: #e2e6ed;
-}
-
-.c-animation-in {
-  animation: fadeScaleYIn 0.2s ease-in-out;
-}
-.c-animation-out {
-  animation: fadeScaleYOut 0.2s ease-in-out;
-}
-@keyframes fadeScaleYIn {
-  0% {
-    opacity: 0;
-    transform: scaleY(0.8);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes fadeScaleYOut {
-  0% {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-}
-</style>
+<template>
+  <div class="c-mouse-right-menu-popup c-animation-in" :style="dialogStyle">
+    <div class="c-mouse-right-menu">
+      <div v-for="(item, index) in nodeList" :key="index" class="c-mouse-menu-item" @click="handleNodeClick(item)">
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CMouseRightClick',
+  props: {
+    nodeList: {
+      type: Array,
+      require: true
+    },
+    rightPos: {
+      type: Object,
+      required: true
+    },
+    getContainer: Function
+  },
+
+  computed: {
+    dialogStyle() {
+      const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
+      const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      const style = {
+        top: '',
+        bottom: '',
+        left: '',
+        right: '',
+        'transform-origin': ''
+      };
+      const height = 200;
+      if (screenWidth - this.rightPos.clientX < height) {
+        style.right = screenWidth - this.rightPos.clientX + 'px';
+        style['transform-origin'] = 'right';
+      } else {
+        style.left = this.rightPos.clientX + 'px';
+        style['transform-origin'] = 'left';
+      }
+      if (screenHeight - this.rightPos.clientY < height) {
+        style.bottom = screenHeight - this.rightPos.clientY + 'px';
+        style['transform-origin'] += ' bottom';
+      } else {
+        style.top = this.rightPos.clientY + 'px';
+        style['transform-origin'] += ' top';
+      }
+      return style;
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      const body = this.getContainer() ? this.getContainer(): document.querySelector('body');
+      if (body.append) {
+        body.append(this.$el);
+      } else {
+        body.appendChild(this.$el);
+      }
+    });
+  },
+  methods: {
+    handleNodeClick(item) {
+      this.$emit('nodeClick', item);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.c-mouse-right-menu-popup {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  z-index: 1001;
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
+  border: 1px solid #e2e6ed;
+  border-radius: 2px;
+  font-size: 12px;
+}
+.c-mouse-right-menu {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  svg {
+    position: absolute;
+    left: 5px;
+    top: 8px;
+    fill: #3d4757;
+    stroke: #3d4757;
+  }
+}
+.c-mouse-menu-item {
+  flex-shrink: 0;
+  flex-grow: 1;
+  position: relative;
+  padding: 0 32px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  text-align: left;
+  position: relative;
+  cursor: pointer;
+  svg {
+    position: absolute;
+    left: 5px;
+    top: 8px;
+    fill: #3d4757;
+    stroke: #3d4757;
+  }
+}
+.c-mouse-menu-item:hover {
+  background: #ecf5ff;
+  color: #2d7aff;
+  svg {
+    fill: #2d7aff;
+    stroke: #2d7aff;
+  }
+}
+.c-mouse-right-menu-line {
+  width: 100%;
+  height: 1px;
+  padding: 0;
+  background-color: #e2e6ed;
+}
+
+.c-animation-in {
+  animation: fadeScaleYIn 0.2s ease-in-out;
+}
+.c-animation-out {
+  animation: fadeScaleYOut 0.2s ease-in-out;
+}
+@keyframes fadeScaleYIn {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes fadeScaleYOut {
+  0% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+</style>