vue-gantt-3/es/components/common/ExpandableBox.vue.mjs.map

A gantt component for Vue 3

{"version":3,"file":"ExpandableBox.vue.mjs","sources":["../../../../src/components/common/ExpandableBox.vue"],"sourcesContent":["<template>\n  <div class=\"c-expandable-box\">\n    <div :style=\"boxStyle\"\n         style=\"overflow:hidden;height:100%\"\n         :class=\"contentClass\"\n         class=\"c-expandable-box-body\">\n      <slot/>\n    </div>\n    <div v-if=\"draglineShow\"\n         class=\"_drag-line\"\n         :class=\"{indragging}\"\n         @mousedown=\"handleMouseDown\" />\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nexport default defineComponent({\n  name: 'common-expandable-box',\n  components: {},\n  props: {\n    draglineShow: {\n      type: Boolean,\n      default: true\n    },\n    initWidth: {\n      type: Number,\n      default: 244,\n    },\n    minWidth: {\n      type: Number,\n      default: 154,\n    },\n    maxWidth: {\n      type: Number,\n      required: true\n    },\n    contentClass: String,\n  },\n  emits: [\"width-change\"],\n  data() {\n    return {\n      mouseStartX: 0,\n      width: this.initWidth,\n      originWidth: 0,\n      hasDragged: false,\n      indragging: false\n    };\n  },\n  computed: {\n    boxStyle() {\n      return {\n        width: this.width + 'px',\n      };\n    },\n  },\n  watch: {\n    initWidth(val) {\n      if (this.hasDragged) return;\n      if (val > this.maxWidth) {\n        this.width = this.maxWidth;\n      } else if (val < this.minWidth) {\n        this.width = this.minWidth;\n      } else {\n        this.width = val;\n      }\n    },\n  },\n  mounted() {\n    this.$emit('width-change', this.width);\n\n  },\n  methods: {\n    handleMouseDown(event:MouseEvent) {\n      this.mouseStartX = event.clientX;\n      this.originWidth = this.width;\n      this.indragging = true;\n      window.addEventListener('mousemove', this.handleMouseMove, true);\n      window.addEventListener('mouseup', this.handleMouseUp, true);\n    },\n    handleMouseUp() {\n      this.hasDragged = true;\n      this.indragging = false;\n      window.removeEventListener('mousemove', this.handleMouseMove, true);\n      window.removeEventListener('mouseup', this.handleMouseUp, true);\n    },\n    handleMouseMove(event:MouseEvent) {\n      const mouseEndX = event.clientX;\n      let changeWidth = mouseEndX - this.mouseStartX;\n      let width = this.originWidth + changeWidth;\n      this.width = Math.max(this.minWidth, Math.min(this.maxWidth, width));\n\n      this.$emit('width-change', this.width);\n    },\n  },\n});\n</script>\n<style lang=\"scss\">\n.c-expandable-box {\n  height: 100%;\n  position: relative;\n\n  ._drag-line {\n    position: absolute;\n    background:transparent;\n    right: 1px;\n    width: 4px;\n    cursor: col-resize !important;\n    // opacity: 0;\n    // background-color: red;\n    height: 100%;\n    top: 0;\n    z-index:1;\n    &.indragging {\n      background-color: #A2B3CD;\n    }\n  }\n}\n</style>"],"names":["_openBlock","_createElementVNode","contentClass","_normalizeClass","draglineShow","_createElementBlock","_createCommentVNode"],"mappings":";;;;;SAEI,YAKM,MAAA,QAAA,QAAA,QAAA,OAAA,UAAA;AALA,SAAAA,gCAAe,OAChB,YAAA;AAAA,IAAAC,mBAHT,OAIiBC;AAAAA,MAAAA,OAAAA,eAAAA,CAAAA,KAAAA,UAAAA,EAAAA,YAAAA,UAAAA,UAAAA,OAAAA,CAAAA,CAAAA;AAAAA,MAEX,OAAOC,eAAA,CAAA,KAAA,cAAA,uBAAA,CAAA;AAAA,IAAA,GAAA;AAAA,MAEEC,WAAY,KAAA,QAAA,SAAA;AAAA,IAAA,GAAA,CAAA;AAAA,IAR3B,KAAA,gBAAAJ,aAAAK,mBASe,OAAY;AAAA,MAEjB,KAAA;AAAA,MAAA,OAAAF,eAAA,CAAA,cAAA,EAAA,YAAA,KAAA,WAAA,CAAA,CAAA;AAAA,MAXV,aAAA,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,IAAA,SAAA,KAAA,mBAAA,KAAA,gBAAA,GAAA,IAAA;AAAA,IAAA,GAAA,MAAA,EAAA,KAAAG,mBAAA,IAAA,IAAA;AAAA;;;"}