@opentiny/vue-drawer 3.13.0 → 3.14.0

package/lib/index.js

@@ -12,7 +12,7 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-import { $prefix, $props, $setup } from "@opentiny/vue-common";
+import { $prefix, $setup, $props } from "@opentiny/vue-common";
 import PcTemplate from "./pc.js";
 import MobileFirstTemplate from "./mobile-first.js";
 var template = function template2(mode) {
@@ -29,68 +29,72 @@ var template = function template2(mode) {
 var $constants = {
   SCROLL_LOCK_CLASS: function SCROLL_LOCK_CLASS(mode) {
     var scrollLockClasses = {
-      "mobile-first": "overflow-hidden"
+      "mobile-first": "overflow-hidden",
+      "pc": "tiny-popup-parent--hidden tiny-dialog-box__scroll-lock"
     };
     return scrollLockClasses[mode] || "";
-  }
+  },
+  DEFAULT_WIDTH: "500px"
 };
+var drawerProps = _extends({}, $props, {
+  _constants: {
+    type: Object,
+    default: function _default() {
+      return $constants;
+    }
+  },
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  customClass: [String, Object, Array],
+  placement: {
+    type: String,
+    default: "right"
+  },
+  width: {
+    type: String
+  },
+  title: String,
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  showFooter: {
+    type: Boolean,
+    default: false
+  },
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  dragable: Boolean,
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  flex: {
+    type: Boolean,
+    default: false
+  },
+  zIndex: {
+    type: Number,
+    default: 2e3
+  },
+  beforeClose: Function,
+  tipsProps: Object
+});
 var Drawer = {
   name: $prefix + "Drawer",
-  props: _extends({}, $props, {
-    _constants: {
-      type: Object,
-      default: function _default() {
-        return $constants;
-      }
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    customClass: [String, Object, Array],
-    placement: {
-      type: String,
-      default: "right"
-    },
-    width: {
-      type: String,
-      default: "500px"
-    },
-    title: String,
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-    showHeader: {
-      type: Boolean,
-      default: true
-    },
-    showFooter: {
-      type: Boolean,
-      default: false
-    },
-    mask: {
-      type: Boolean,
-      default: true
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
-    },
-    dragable: Boolean,
-    lockScroll: {
-      type: Boolean,
-      default: true
-    },
-    flex: {
-      type: Boolean,
-      default: false
-    },
-    zIndex: {
-      type: Number,
-      default: 2e3
-    }
-  }),
+  props: drawerProps,
   setup: function setup(props, context) {
     return $setup({
       props,
@@ -99,7 +103,7 @@ var Drawer = {
     });
   }
 };
-var version = "3.13.0";
+var version = "3.14.0";
 Drawer.model = {
   prop: "modelValue",
   event: "update:modelValue"

package/lib/mobile-first.js

@@ -53,7 +53,7 @@ var _sfc_main = {
     TinyButton: Button,
     IconClose: IconClose()
   },
-  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex"]),
+  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "beforeClose"]),
   setup: function setup(props2, context) {
     return _setup({
       props: props2,
@@ -107,7 +107,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "bg-color-bg-7": _ctx.state.toggle
         })),
         onClick: _cache[0] || (_cache[0] = function($event) {
-          return $props.maskClosable && _ctx.close();
+          return _ctx.handleClose("mask");
         })
       },
       null,
@@ -125,15 +125,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           "max-h-full": ["top", "bottom"].includes($props.placement)
         }, {
-          "left-0 bottom-0 translate-y-full border-t-0.5": $props.placement === "bottom"
+          "left-0 bottom-0 translate-y-full border-t-0.5 rounded-t-lg": $props.placement === "bottom"
         }, {
-          "left-0 top-0 -translate-y-full border-b-0.5": $props.placement === "top"
+          "left-0 top-0 -translate-y-full border-b-0.5 rounded-b-lg": $props.placement === "top"
         }, {
           "translate-y-0": ["top", "bottom"].includes($props.placement) && _ctx.state.toggle
         }, {
-          "left-0 top-0 -translate-x-full border-r-0.5": $props.placement === "left"
+          "left-0 top-0 -translate-x-full border-r-0.5 rounded-r-lg": $props.placement === "left"
         }, {
-          "right-0 top-0 translate-x-full border-l-0.5": $props.placement === "right"
+          "right-0 top-0 translate-x-full border-l-0.5 rounded-l-lg": $props.placement === "right"
         }, {
           "translate-x-0": ["left", "right"].includes($props.placement) && _ctx.state.toggle
         }, $props.customClass)),
@@ -165,8 +165,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "header-right", {}, function() {
             return [createVNode(_component_IconClose, {
               "custom-class": "h-5 w-5 cursor-pointer",
-              onClick: _ctx.close
-            }, null, 8, ["onClick"])];
+              onClick: _cache[1] || (_cache[1] = function($event) {
+                return _ctx.handleClose("close");
+              })
+            })];
           })])];
         })],
         512
@@ -189,7 +191,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         [createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "footer", {}, function() {
           return [createVNode(_component_tiny_button, {
             tiny_mode: "mobile-first",
-            onClick: _ctx.close
+            onClick: _cache[2] || (_cache[2] = function($event) {
+              return _ctx.handleClose("cancel");
+            })
           }, {
             default: withCtx(function() {
               return [createTextVNode(
@@ -200,11 +204,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             _: 1
             /* STABLE */
-          }, 8, ["onClick"]), createVNode(_component_tiny_button, {
+          }), createVNode(_component_tiny_button, {
             tiny_mode: "mobile-first",
             class: "ml-2",
             type: "primary",
-            onClick: _ctx.confirm
+            onClick: _cache[3] || (_cache[3] = function($event) {
+              return _ctx.handleClose("confirm");
+            })
           }, {
             default: withCtx(function() {
               return [createTextVNode(
@@ -215,7 +221,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             _: 1
             /* STABLE */
-          }, 8, ["onClick"])];
+          })];
         })])],
         512
         /* NEED_PATCH */

package/lib/pc.js

@@ -1,9 +1,10 @@
 import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
 import { props, setup as _setup } from "@opentiny/vue-common";
 import "@opentiny/vue-theme/drawer/index.css";
-import { IconClose } from "@opentiny/vue-icon";
+import { iconClose, iconHelpCircle } from "@opentiny/vue-icon";
 import Button from "@opentiny/vue-button";
-import { resolveComponent, openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeClass, normalizeStyle, createCommentVNode, withDirectives, createElementVNode, renderSlot, toDisplayString, createTextVNode, vShow } from "vue";
+import Tooltip from "@opentiny/vue-tooltip";
+import { resolveComponent, openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeClass, normalizeStyle, createCommentVNode, withDirectives, createElementVNode, renderSlot, toDisplayString, createBlock, normalizeProps, mergeProps, createTextVNode, vShow } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (it)
@@ -52,9 +53,11 @@ var _export_sfc = function _export_sfc2(sfc, props) {
 var _sfc_main = {
   components: {
     TinyButton: Button,
-    IconClose: IconClose()
+    TinyTooltip: Tooltip,
+    IconClose: iconClose(),
+    IconHelpCircle: iconHelpCircle()
   },
-  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex"]),
+  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex", "beforeClose", "tipsProps"]),
   setup: function setup(props2, context) {
     return _setup({
       props: props2,
@@ -87,19 +90,24 @@ var _hoisted_5 = {
   class: "tiny-drawer__header"
 };
 var _hoisted_6 = {
+  class: "tiny-drawer__header-left"
+};
+var _hoisted_7 = {
   key: 0,
   class: "tiny-drawer__title"
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   class: "tiny-drawer__header-right"
 };
-var _hoisted_8 = {
+var _hoisted_9 = {
   key: 1,
   "data-tag": "drawer-footer",
   ref: "footer",
   class: "tiny-drawer__footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_help_circle = resolveComponent("icon-help-circle");
+  var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
   var _component_icon_close = resolveComponent("icon-close");
   var _component_tiny_button = resolveComponent("tiny-button");
   return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(Transition, {
@@ -118,7 +126,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             zIndex: $props.zIndex
           }),
           onClick: _cache[0] || (_cache[0] = function($event) {
-            return $props.maskClosable && _ctx.close();
+            return _ctx.handleClose("mask");
           })
         },
         null,
@@ -145,7 +153,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "is-bottom": $props.placement === "bottom",
             "drag-effects": !_ctx.state.dragEvent.isDrag,
             "toggle": _ctx.state.toggle
-          }, $props.customClass]),
+          }, "tiny-drawer-main", $props.customClass]),
           style: normalizeStyle({
             width: ["left", "right"].includes($props.placement) ? _ctx.state.computedWidth : null,
             zIndex: $props.zIndex
@@ -161,20 +169,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "div",
           _hoisted_4,
           [renderSlot(_ctx.$slots, "header", {}, function() {
-            return [createElementVNode("div", _hoisted_5, [$props.title ? (openBlock(), createElementBlock(
+            return [createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [$props.title ? (openBlock(), createElementBlock(
               "div",
-              _hoisted_6,
+              _hoisted_7,
               toDisplayString($props.title),
               1
               /* TEXT */
-            )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "header-right")])])];
+            )) : createCommentVNode("v-if", true), $props.tipsProps ? (openBlock(), createBlock(
+              _component_tiny_tooltip,
+              normalizeProps(mergeProps({
+                key: 1
+              }, $props.tipsProps)),
+              {
+                default: withCtx(function() {
+                  return [createVNode(_component_icon_help_circle, {
+                    class: "tiny-drawer__help-icon"
+                  })];
+                }),
+                _: 1
+                /* STABLE */
+              },
+              16
+              /* FULL_PROPS */
+            )) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "header-right")])])];
           }), $props.showClose ? (openBlock(), createElementBlock("button", {
             key: 0,
             type: "button",
             class: "tiny-drawer__headerbtn",
             "aria-label": "Close",
-            onClick: _cache[1] || (_cache[1] = function() {
-              return _ctx.close && _ctx.close.apply(_ctx, arguments);
+            onClick: _cache[1] || (_cache[1] = function($event) {
+              return _ctx.handleClose("close");
             })
           }, [createVNode(_component_icon_close, {
             class: "tiny-svg-size tiny-drawer__close"
@@ -188,18 +212,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ref: "body",
             class: normalizeClass(["tiny-drawer__body", {
               "flex flex-col": $props.flex
-            }])
+            }, "drawer-body"])
           },
           [renderSlot(_ctx.$slots, "default")],
           2
           /* CLASS */
         ), $props.showFooter ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_8,
+          _hoisted_9,
           [renderSlot(_ctx.$slots, "footer", {}, function() {
             return [createVNode(_component_tiny_button, {
               type: "primary",
-              onClick: _ctx.confirm
+              class: normalizeClass(["tiny-drawer__confirm-btn", {
+                reverse: _ctx.state.btnOrderReversed
+              }]),
+              onClick: _cache[2] || (_cache[2] = function($event) {
+                return _ctx.handleClose("confirm");
+              })
             }, {
               default: withCtx(function() {
                 return [createTextVNode(
@@ -210,9 +239,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               _: 1
               /* STABLE */
-            }, 8, ["onClick"]), createVNode(_component_tiny_button, {
+            }, 8, ["class"]), createVNode(_component_tiny_button, {
               plain: "",
-              onClick: _ctx.close
+              class: normalizeClass(["tiny-drawer__cancel-btn", {
+                reverse: _ctx.state.btnOrderReversed
+              }]),
+              onClick: _cache[3] || (_cache[3] = function($event) {
+                return _ctx.handleClose("cancel");
+              })
             }, {
               default: withCtx(function() {
                 return [createTextVNode(
@@ -223,7 +257,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               _: 1
               /* STABLE */
-            }, 8, ["onClick"])];
+            }, 8, ["class"])];
           })],
           512
           /* NEED_PATCH */

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "sideEffects": false,
   "type": "module",
   "dependencies": {
-    "@opentiny/vue-button": "~3.13.0",
-    "@opentiny/vue-common": "~3.13.0",
-    "@opentiny/vue-renderless": "~3.13.0"
+    "@opentiny/vue-button": "~3.14.0",
+    "@opentiny/vue-tooltip": "~3.14.0",
+    "@opentiny/vue-common": "~3.14.0",
+    "@opentiny/vue-renderless": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-theme": "~3.14.0"
   },
   "license": "MIT",
   "types": "index.d.ts"

package/src/index.d.ts

@@ -1,10 +1,74 @@
+export declare const drawerProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            SCROLL_LOCK_CLASS(mode: string): string;
+            DEFAULT_WIDTH: string;
+        };
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    customClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
+    placement: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+    };
+    title: StringConstructor;
+    showClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dragable: BooleanConstructor;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flex: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    beforeClose: FunctionConstructor;
+    tipsProps: ObjectConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
 declare const _default: {
     name: string;
     props: {
         _constants: {
             type: ObjectConstructor;
             default: () => {
-                SCROLL_LOCK_CLASS(mode: any): any;
+                SCROLL_LOCK_CLASS(mode: string): string;
+                DEFAULT_WIDTH: string;
             };
         };
         visible: {
@@ -18,7 +82,6 @@ declare const _default: {
         };
         width: {
             type: StringConstructor;
-            default: string;
         };
         title: StringConstructor;
         showClose: {
@@ -54,6 +117,8 @@ declare const _default: {
             type: NumberConstructor;
             default: number;
         };
+        beforeClose: FunctionConstructor;
+        tipsProps: ObjectConstructor;
         tiny_mode: StringConstructor;
         tiny_mode_root: BooleanConstructor;
         tiny_template: (ObjectConstructor | FunctionConstructor)[];

package/src/mobile-first.vue.d.ts

@@ -15,8 +15,9 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     showHeader?: any;
     showFooter?: any;
     maskClosable?: any;
-    flex?: any;
     lockScroll?: any;
+    flex?: any;
+    beforeClose?: any;
     dragable?: any;
 }>, {
     t: (this: any, path: any, options?: any) => any;
@@ -43,8 +44,9 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     showHeader?: any;
     showFooter?: any;
     maskClosable?: any;
-    flex?: any;
     lockScroll?: any;
+    flex?: any;
+    beforeClose?: any;
     dragable?: any;
 }>>>, {
     readonly title?: any;
@@ -63,8 +65,9 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     readonly showHeader?: any;
     readonly showFooter?: any;
     readonly maskClosable?: any;
-    readonly flex?: any;
     readonly lockScroll?: any;
+    readonly flex?: any;
+    readonly beforeClose?: any;
     readonly dragable?: any;
 }, {}>;
 export default _default;

package/src/pc.vue.d.ts

@@ -15,11 +15,13 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     customClass?: any;
     showHeader?: any;
     showFooter?: any;
-    maskClosable?: any;
-    flex?: any;
     showClose?: any;
+    maskClosable?: any;
     lockScroll?: any;
+    flex?: any;
+    beforeClose?: any;
     dragable?: any;
+    tipsProps?: any;
 }>, {
     t: (this: any, path: any, options?: any) => any;
     vm: any;
@@ -45,11 +47,13 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     customClass?: any;
     showHeader?: any;
     showFooter?: any;
-    maskClosable?: any;
-    flex?: any;
     showClose?: any;
+    maskClosable?: any;
     lockScroll?: any;
+    flex?: any;
+    beforeClose?: any;
     dragable?: any;
+    tipsProps?: any;
 }>>>, {
     readonly title?: any;
     readonly tiny_mode?: any;
@@ -67,10 +71,12 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     readonly customClass?: any;
     readonly showHeader?: any;
     readonly showFooter?: any;
-    readonly maskClosable?: any;
-    readonly flex?: any;
     readonly showClose?: any;
+    readonly maskClosable?: any;
     readonly lockScroll?: any;
+    readonly flex?: any;
+    readonly beforeClose?: any;
     readonly dragable?: any;
+    readonly tipsProps?: any;
 }, {}>;
 export default _default;