@dataloop-ai/components 0.20.48 → 0.20.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.48",
+  "version": "0.20.50",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlPanelContainer/DlPanelContainer.vue

@@ -7,12 +7,18 @@
         :data-resizable="resizable"
         :data-collapsable="collapsable"
         :data-direction="direction"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
     >
         <div ref="panel" class="inner-container" style="height: 100%">
             <div v-if="collapsed" class="inner-container-overlay" />
             <div v-if="collapsable === true">
                 <div
-                    v-if="direction === 'right' && isFullWidth === true"
+                    v-if="
+                        direction === 'right' &&
+                            isFullWidth === true &&
+                            hideCollapseButton === false
+                    "
                     class="collapse-icon collapse-icon--right"
                     @click="handleCollapseButtonClick"
                 >
@@ -36,7 +42,11 @@
                     />
                 </div>
                 <div
-                    v-else-if="direction === 'left' && isFullWidth === true"
+                    v-else-if="
+                        direction === 'left' &&
+                            isFullWidth === true &&
+                            hideCollapseButton === false
+                    "
                     class="collapse-icon collapse-icon--left"
                     @click="handleCollapseButtonClick"
                 >
@@ -140,6 +150,11 @@ export default defineComponent({
             default: 36,
             validator: (val: number) => val >= 0
         },
+        maxStretchableWidth: {
+            type: Number,
+            default: 360,
+            validator: (val: number) => val >= 0
+        },
         direction: {
             type: String,
             default: 'right',
@@ -168,7 +183,7 @@ export default defineComponent({
             default: null
         }
     },
-    emits: ['update:model-value'],
+    emits: ['update:model-value', 'panel-width'],
     data() {
         return {
             uuid: `dl-panel-container-${v4()}`,
@@ -176,7 +191,8 @@ export default defineComponent({
             left: 0,
             isFullWidth: true,
             avoidUserSelect: false,
-            collapsed: false
+            collapsed: false,
+            hideCollapseButton: false
         }
     },
     computed: {
@@ -283,6 +299,12 @@ export default defineComponent({
         }
     },
     methods: {
+        handleMouseEnter() {
+            this.hideCollapseButton = false
+        },
+        handleMouseLeave() {
+            this.hideCollapseButton = true
+        },
         reset() {
             const element = this.$refs['panel'] as HTMLDivElement
             element.style.width = this.w + 'px'
@@ -328,8 +350,8 @@ export default defineComponent({
                     this.collapsed = false
                 }
             } else {
-                if (e.pageX > this.left + this.w) {
-                    element.style.width = this.w + 'px'
+                if (e.pageX > this.left + this.maxStretchableWidth) {
+                    element.style.width = this.maxStretchableWidth + 'px'
 
                     this.collapsed = false
                 } else if (e.pageX < this.left + this.minW) {
@@ -342,6 +364,7 @@ export default defineComponent({
                     this.collapsed = false
                 }
             }
+            this.$emit('panel-width', parseInt(element.style.width))
         },
         mouseup(e: MouseEvent) {
             if (this.direction === 'right') {
@@ -387,7 +410,6 @@ export default defineComponent({
                 if (this.isFullWidth === false) {
                     element.style.width = this.w + 'px'
                     element.style.right = this.w + 'px'
-
                     this.isFullWidth = true
                     this.collapsed = false
                 } else {
@@ -397,6 +419,7 @@ export default defineComponent({
                     this.isFullWidth = false
                     this.collapsed = true
                 }
+                this.$emit('panel-width', parseInt(element.style.width))
             }
         }
     },