feat drawer support sizeDraggable

examples/drawer/demos/placement.vue

@@ -5,9 +5,10 @@
       header="抽屉标题"
       :visible="visible"
       @cancel="visible = false"
-      :onOverlayClick="() => visible = false"
-      :onConfirm="() => visible = false"
+      :onOverlayClick="() => (visible = false)"
+      :onConfirm="() => (visible = false)"
       :placement="placement"
+      :sizeDraggable="true"
     >
       <p>抽屉的内容</p>
     </t-drawer>

src/drawer/drawer.tsx

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue';
+
 import { prefix } from '../config';
 import { Button as TButton } from '../button';
 import props from './props';
@@ -26,12 +27,17 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
     TButton,
   },
 
-  props: { ...props },
+  props,
 
   directives: {
     TransferDom,
   },
-
+  data() {
+    return {
+      isSizeDragging: false,
+      draggedSizeValue: null,
+    };
+  },
   computed: {
     drawerClasses(): ClassName {
       return [
@@ -45,6 +51,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
       ];
     },
     sizeValue(): string {
+      if (this.draggedSizeValue) return this.draggedSizeValue;
       const defaultSize = isNaN(Number(this.size)) ? this.size : `${this.size}px`;
       return (
         {
@@ -58,8 +65,8 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
       return {
         // 用于抵消动画效果：transform: translateX(100%); 等
         transform: this.visible ? 'translateX(0)' : undefined,
-        width: ['left', 'right'].includes(this.placement) ? this.sizeValue : '',
-        height: ['top', 'bottom'].includes(this.placement) ? this.sizeValue : '',
+        width: this.isHorizontal ? this.sizeValue : '',
+        height: this.isVertical ? this.sizeValue : '',
       };
     },
     wrapperClasses(): ClassName {
@@ -77,6 +84,29 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
         justifyContent: this.placement === 'right' ? 'flex-start' : 'flex-end',
       };
     },
+    isHorizontal(): boolean {
+      return ['right', 'left'].includes(this.placement);
+    },
+    isVertical(): boolean {
+      return ['top', 'bottom'].includes(this.placement);
+    },
+    draggableLineStyles(): Styles {
+      const oppositeMap = {
+        left: 'right',
+        right: 'left',
+        top: 'bottom',
+        bottom: 'top',
+      };
+      return {
+        zIndex: 1,
+        position: 'absolute',
+        background: 'transparent',
+        [oppositeMap[this.placement]]: 0,
+        width: this.isHorizontal ? '16px' : '100%',
+        height: this.isHorizontal ? '100%' : '16px',
+        cursor: this.isHorizontal ? 'col-resize' : 'row-resize',
+      };
+    },
   },
 
   watch: {
@@ -91,6 +121,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
         if (val) {
           (this.$refs.drawerContainer as HTMLDivElement).focus?.();
         }
+
         this.handleScrollThrough(val);
       },
     },
@@ -130,12 +161,44 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DrawerConfig>('d
           {this.footer !== false ? (
             <div class={`${name}__footer`}>{renderTNodeJSX(this, 'footer', defaultFooter)}</div>
           ) : null}
+          {this.sizeDraggable && (
+            <div
+              style={this.draggableLineStyles}
+              onMousedown={this.enableDrag}
+              onMousemove={this.handleMousemove}
+              onMouseup={this.disableDrag}
+              onMouseleave={this.disableDrag}
+            ></div>
+          )}
         </div>
       </div>
     );
   },
 
   methods: {
+    enableDrag() {
+      this.isSizeDragging = true;
+    },
+    handleMousemove(e: MouseEvent) {
+      const { x, y } = e;
+      if (this.isSizeDragging && this.sizeDraggable) {
+        if (this.placement === 'right') {
+          this.draggedSizeValue = `${document.documentElement.clientWidth - x + 8}px`;
+        }
+        if (this.placement === 'left') {
+          this.draggedSizeValue = `${x + 8}px`;
+        }
+        if (this.placement === 'top') {
+          this.draggedSizeValue = `${y + 8}px`;
+        }
+        if (this.placement === 'bottom') {
+          this.draggedSizeValue = `${document.documentElement.clientHeight - y + 8}px`;
+        }
+      }
+    },
+    disableDrag() {
+      this.isSizeDragging = false;
+    },
     handleScrollThrough(visible: boolean) {
       if (!document || !document.body || !this.preventScrollThrough) return;
       if (visible && !this.showInAttachedElement) {

test/ssr/__snapshots__/ssr.test.js.snap

@@ -3570,6 +3570,7 @@ exports[`ssr snapshot test renders ./examples/drawer/demos/placement.vue correct
       <div class="t-drawer__footer">
         <div style="display:flex;justify-content:flex-start;"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary t-drawer__confirm"><span class="t-button__text">确认</span></button><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default t-drawer__cancel"><span class="t-button__text">取消</span></button></div>
       </div>
+      <div style="z-index:1;position:absolute;background:transparent;left:0;width:16px;height:100%;cursor:col-resize;"></div>
     </div>
   </div>
   <div class="tdesign-radio-button">
@@ -5158,6 +5159,12 @@ exports[`ssr snapshot test renders ./examples/input/demos/focus.vue correctly 1`
 </div>
 `;
 
+exports[`ssr snapshot test renders ./examples/input/demos/format.vue correctly 1`] = `
+<div class="tdesign-demo-block-column" style="max-width:500px;">
+  <div class="t-input t-size-m"><input placeholder="请输入数字" type="text" unselectable="off" value="" class="t-input__inner"></div>
+</div>
+`;
+
 exports[`ssr snapshot test renders ./examples/input/demos/group.vue correctly 1`] = `
 <div class="tdesign-demo-block-column" style="max-width:500px;">
   <div>
@@ -5189,6 +5196,14 @@ exports[`ssr snapshot test renders ./examples/input/demos/group.vue correctly 1`
 </div>
 `;
 
+exports[`ssr snapshot test renders ./examples/input/demos/max-length-count.vue correctly 1`] = `
+<div class="tdesign-demo-block-column" style="max-width:500px;">
+  <div class="t-input t-size-m t-input--suffix"><input placeholder="请输入" maxlength="5" type="text" unselectable="off" value="" class="t-input__inner">
+    <div class="t-input__suffix">0/5</div>
+  </div>
+</div>
+`;
+
 exports[`ssr snapshot test renders ./examples/input/demos/password.vue correctly 1`] = `
 <div class="tdesign-demo-block-column" style="max-width:500px;">
   <div class="t-input t-size-m t-input--prefix t-input--suffix"><span class="t-input__prefix t-input__prefix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M6 10v1h4v-1H6z" fill-opacity="0.9"></path><path fill="currentColor" d="M4.5 5v1H3a.5.5 0 00-.5.5v7c0 .28.22.5.5.5h10a.5.5 0 00.5-.5v-7A.5.5 0 0013 6h-1.5V5a3.5 3.5 0 00-7 0zm6 1h-5V5a2.5 2.5 0 015 0v1zm-7 1h9v6h-9V7z" fill-opacity="0.9"></path></svg></span><input placeholder="请输入" type="password" unselectable="off" value="520 TDesign" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear"><path fill="currentColor" d="M10.77 11.98l1.38 1.37.7-.7-9.7-9.7-.7.7 1.2 1.21a7.9 7.9 0 00-2.53 2.91L1 8l.12.23a7.72 7.72 0 009.65 3.75zM10 11.2A6.67 6.67 0 012.11 8c.56-1 1.34-1.83 2.26-2.43l1.08 1.09a2.88 2.88 0 003.9 3.9l.64.64zM6.21 7.42l2.37 2.37a1.88 1.88 0 01-2.37-2.37zM14.88 8.23L15 8l-.12-.23a7.73 7.73 0 00-9.35-3.86l.8.8A6.7 6.7 0 0113.9 8a6.87 6.87 0 01-2.02 2.26l.7.7a7.9 7.9 0 002.3-2.73z" fill-opacity="0.9"></path><path fill="currentColor" d="M10.88 8c0 .37-.07.73-.2 1.06l-.82-.82.02-.24a1.88 1.88 0 00-2.12-1.86l-.82-.82A2.87 2.87 0 0110.88 8z" fill-opacity="0.9"></path></svg></span></div>

test/unit/drawer/__snapshots__/demo.test.js.snap

@@ -554,6 +554,9 @@ exports[`Drawer Demo PlacementUsageExample wroks fine 1`] = `
           </button>
         </div>
       </div>
+      <div
+        style="z-index: 1; position: absolute; background: transparent; left: 0px; width: 16px; height: 100%; cursor: col-resize;"
+      />
     </div>
   </div>