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

A gantt component for Vue 3

{"version":3,"file":"ExpandableBox.vue2.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":[],"mappings":";AAgBA,MAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,CAAC;AAAA,EACb,OAAO;AAAA,IACL,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,EAChB;AAAA,EACA,OAAO,CAAC,cAAc;AAAA,EACtB,OAAO;AACE,WAAA;AAAA,MACL,aAAa;AAAA,MACb,OAAO,KAAK;AAAA,MACZ,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AACF,aAAA;AAAA,QACL,OAAO,KAAK,QAAQ;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,IACL,UAAU,KAAK;AACb,UAAI,KAAK,WAAY;AACjB,UAAA,MAAM,KAAK,UAAU;AACvB,aAAK,QAAQ,KAAK;AAAA,MAAA,WACT,MAAM,KAAK,UAAU;AAC9B,aAAK,QAAQ,KAAK;AAAA,MAAA,OACb;AACL,aAAK,QAAQ;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,UAAU;AACH,SAAA,MAAM,gBAAgB,KAAK,KAAK;AAAA,EAEvC;AAAA,EACA,SAAS;AAAA,IACP,gBAAgB,OAAkB;AAChC,WAAK,cAAc,MAAM;AACzB,WAAK,cAAc,KAAK;AACxB,WAAK,aAAa;AAClB,aAAO,iBAAiB,aAAa,KAAK,iBAAiB,IAAI;AAC/D,aAAO,iBAAiB,WAAW,KAAK,eAAe,IAAI;AAAA,IAC7D;AAAA,IACA,gBAAgB;AACd,WAAK,aAAa;AAClB,WAAK,aAAa;AAClB,aAAO,oBAAoB,aAAa,KAAK,iBAAiB,IAAI;AAClE,aAAO,oBAAoB,WAAW,KAAK,eAAe,IAAI;AAAA,IAChE;AAAA,IACA,gBAAgB,OAAkB;AAChC,YAAM,YAAY,MAAM;AACpB,UAAA,cAAc,YAAY,KAAK;AAC/B,UAAA,QAAQ,KAAK,cAAc;AAC1B,WAAA,QAAQ,KAAK,IAAI,KAAK,UAAU,KAAK,IAAI,KAAK,UAAU,KAAK,CAAC;AAE9D,WAAA,MAAM,gBAAgB,KAAK,KAAK;AAAA,IAAA;AAAA,EACvC;AAEJ,CAAC;"}