@opentiny/vue-drawer 3.15.0 → 3.17.0

package/lib/index.js

@@ -1,18 +1,14 @@
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t)
+        ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
-import { defineComponent, $prefix, $setup, $props } from "@opentiny/vue-common";
+import { defineComponent, $prefix, $setup, $props, createComponent, appProperties, hooks, setupComponent } from "@opentiny/vue-common";
 import PcTemplate from "./pc.js";
 import MobileFirstTemplate from "./mobile-first.js";
 var template = function template2(mode) {
@@ -30,7 +26,7 @@ var $constants = {
   SCROLL_LOCK_CLASS: function SCROLL_LOCK_CLASS(mode) {
     var scrollLockClasses = {
       "mobile-first": "overflow-hidden",
-      "pc": "tiny-popup-parent--hidden tiny-dialog-box__scroll-lock"
+      "pc": "popup-parent--hidden dialog-box__scroll-lock"
     };
     return scrollLockClasses[mode] || "";
   },
@@ -90,7 +86,9 @@ var drawerProps = _extends({}, $props, {
     default: 2e3
   },
   beforeClose: Function,
-  tipsProps: Object
+  tipsProps: Object,
+  // tiny 新增：用于方法调用组件
+  customSlots: Object
 });
 var Drawer = defineComponent({
   name: $prefix + "Drawer",
@@ -103,15 +101,80 @@ var Drawer = defineComponent({
     });
   }
 });
-var version = "3.15.0";
+var defaultConfigs = {
+  customClass: null,
+  placement: "right",
+  width: null,
+  title: "",
+  showClose: true,
+  showHeader: true,
+  showFooter: false,
+  mask: true,
+  maskClosable: true,
+  dragable: false,
+  lockScroll: true,
+  flex: false,
+  zIndex: 2e3,
+  beforeClose: null,
+  tipsProps: null
+};
+var service = function service2(configs) {
+  var _appProperties$tiny_m;
+  if (configs === void 0) {
+    configs = {};
+  }
+  var events = {
+    onOpen: function onOpen(params) {
+      var _configs$events;
+      if (typeof ((_configs$events = configs.events) == null ? void 0 : _configs$events.open) === "function") {
+        configs.events.open(params);
+      }
+    },
+    onClose: function onClose(params) {
+      var _configs$events2;
+      if (typeof ((_configs$events2 = configs.events) == null ? void 0 : _configs$events2.close) === "function") {
+        configs.events.close(params);
+      }
+    },
+    onConfirm: function onConfirm(params) {
+      var _configs$events3;
+      if (typeof ((_configs$events3 = configs.events) == null ? void 0 : _configs$events3.confirm) === "function") {
+        configs.events.confirm(params);
+      }
+    }
+  };
+  var options = _extends({}, defaultConfigs, configs, events);
+  var instance = createComponent({
+    component: Drawer,
+    propsData: _extends({}, options, {
+      _constants: $constants,
+      tiny_mode: configs.tiny_mode || ((_appProperties$tiny_m = appProperties().tiny_mode) == null ? void 0 : _appProperties$tiny_m.value)
+    }),
+    el: document.createElement("div")
+  });
+  var parent = document.body;
+  parent.appendChild(instance.$el);
+  hooks.nextTick(function() {
+    instance.open();
+  });
+  return instance;
+};
+var version = "3.17.0";
 Drawer.model = {
-  prop: "modelValue",
-  event: "update:modelValue"
+  prop: "visible",
+  event: "update:visible"
 };
+Drawer.service = service;
 Drawer.install = function(Vue) {
   Vue.component(Drawer.name, Drawer);
 };
 Drawer.version = version;
+setupComponent.TINYDrawer = {
+  init: function init(root) {
+    var prefix = root.$apiPrefix || "$";
+    root[prefix + "drawer"] = service;
+  }
+};
 export {
   Drawer as default
 };

package/lib/mobile-first.js

@@ -4,41 +4,32 @@ import { IconClose } from '@opentiny/vue-icon';
 import Button from '@opentiny/vue-button';
 import { resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createVNode, withCtx, createTextVNode, vShow } from 'vue';
 
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it)
-    return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it)
-      o = it;
-    var i = 0;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t)
+    return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
     return function() {
-      if (i >= o.length)
-        return { done: true };
-      return { done: false, value: o[i++] };
+      return o >= r.length ? { done: true } : { done: false, value: r[o++] };
     };
   }
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o)
-    return;
-  if (typeof o === "string")
-    return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor)
-    n = o.constructor.name;
-  if (n === "Map" || n === "Set")
-    return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _arrayLikeToArray(o, minLen);
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r)
+      return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
 }
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length)
-    len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++)
-    arr2[i] = arr[i];
-  return arr2;
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++)
+    n[e] = r[e];
+  return n;
 }
 var _export_sfc = function _export_sfc2(sfc, props) {
   var target = sfc.__vccOpts || sfc;
@@ -55,6 +46,7 @@ var _sfc_main = defineComponent({
     IconClose: IconClose()
   },
   props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "beforeClose"]),
+  emits: ["update:visible", "open", "close", "confirm"],
   setup: function setup$1(props2, context) {
     return setup({
       props: props2,
@@ -79,7 +71,7 @@ var _hoisted_3 = {
 };
 var _hoisted_4 = {
   key: 0,
-  class: "max-w-[80%] pr-4 text-left truncate"
+  class: "max-w-[80%] pr-4 text-left truncate text-color-text-primary"
 };
 var _hoisted_5 = {
   class: "flex-1 flex items-center justify-end"
@@ -104,8 +96,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       {
         key: 0,
         ref: "mask",
-        class: normalizeClass(_ctx.m("fixed z-50 left-0 right-0 top-0 bottom-0 w-full h-full transition-opacity ease-linear duration-200", {
-          "bg-color-bg-7": _ctx.state.toggle
+        class: normalizeClass(_ctx.m("fixed z-50 left-0 right-0 top-0 bottom-0 w-full h-full transition ease-linear duration-200", {
+          "bg-color-bg-7": _ctx.state.visible
         })),
         onClick: _cache[0] || (_cache[0] = function($event) {
           return _ctx.handleClose("mask");
@@ -130,16 +122,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           "left-0 top-0 -translate-y-full border-b-0.5 rounded-b-lg": _ctx.placement === "top"
         }, {
-          "translate-y-0": ["top", "bottom"].includes(_ctx.placement) && _ctx.state.toggle
+          "translate-y-0": ["top", "bottom"].includes(_ctx.placement) && _ctx.state.visible
         }, {
           "left-0 top-0 -translate-x-full border-r-0.5 rounded-r-lg": _ctx.placement === "left"
         }, {
           "right-0 top-0 translate-x-full border-l-0.5 rounded-l-lg": _ctx.placement === "right"
         }, {
-          "translate-x-0": ["left", "right"].includes(_ctx.placement) && _ctx.state.toggle
+          "translate-x-0": ["left", "right"].includes(_ctx.placement) && _ctx.state.visible
         }, _ctx.customClass)),
         style: normalizeStyle({
-          width: ["left", "right"].includes(_ctx.placement) ? _ctx.state.computedWidth : null
+          width: ["left", "right"].includes(_ctx.placement) ? _ctx.state.computedWidth : null,
+          height: ["top", "bottom"].includes(_ctx.placement) && _ctx.dragable && _ctx.state.height ? _ctx.state.height + "px" : null
         })
       },
       [_ctx.dragable ? (openBlock(), createElementBlock(
@@ -148,7 +141,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           key: 0,
           "data-tag": "drawer-drag-bar",
           ref: "dragBar",
-          class: normalizeClass(["h-full absolute top-0 w-2 cursor-e-resize", _ctx.placement === "left" ? "-right-1" : "-left-1"])
+          class: normalizeClass(["absolute", ["left", "right"].includes(_ctx.placement) && "cursor-e-resize h-full top-0 w-2", ["top", "bottom"].includes(_ctx.placement) && "cursor-n-resize w-full h-2 left-0", _ctx.placement === "left" && "-right-1", _ctx.placement === "right" && "-left-1", _ctx.placement === "top" && "-bottom-1", _ctx.placement === "bottom" && "-top-1"])
         },
         null,
         2
@@ -166,6 +159,7 @@ 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",
+              class: "fill-color-icon-primary",
               onClick: _cache[1] || (_cache[1] = function($event) {
                 return _ctx.handleClose("close");
               })

package/lib/pc.js

@@ -1,46 +1,37 @@
 import { renderless, api } from '@opentiny/vue-renderless/drawer/vue';
-import { defineComponent, props, setup } from '@opentiny/vue-common';
+import { defineComponent, h, props, setup } from '@opentiny/vue-common';
 import '@opentiny/vue-theme/drawer/index.css';
 import { iconClose, iconHelpCircle } from '@opentiny/vue-icon';
 import Button from '@opentiny/vue-button';
 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';
+import { resolveComponent, openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeStyle, createCommentVNode, withDirectives, createElementVNode, normalizeClass, renderSlot, createBlock, toDisplayString, normalizeProps, mergeProps, Fragment, createTextVNode, vShow } from 'vue';
 
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it)
-    return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it)
-      o = it;
-    var i = 0;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t)
+    return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
     return function() {
-      if (i >= o.length)
-        return { done: true };
-      return { done: false, value: o[i++] };
+      return o >= r.length ? { done: true } : { done: false, value: r[o++] };
     };
   }
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o)
-    return;
-  if (typeof o === "string")
-    return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor)
-    n = o.constructor.name;
-  if (n === "Map" || n === "Set")
-    return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
-    return _arrayLikeToArray(o, minLen);
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r)
+      return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
 }
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length)
-    len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++)
-    arr2[i] = arr[i];
-  return arr2;
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++)
+    n[e] = r[e];
+  return n;
 }
 var _export_sfc = function _export_sfc2(sfc, props) {
   var target = sfc.__vccOpts || sfc;
@@ -56,9 +47,22 @@ var _sfc_main = defineComponent({
     TinyButton: Button,
     TinyTooltip: Tooltip,
     IconClose: iconClose(),
-    IconHelpCircle: iconHelpCircle()
+    IconHelpCircle: iconHelpCircle(),
+    // tiny新增: 适配Vue2下, 在模板中渲染VNode
+    SlotWrapper: {
+      props: ["node"],
+      render: function render() {
+        var node = this.node;
+        if (typeof node === "function") {
+          return node(h);
+        } else {
+          return node;
+        }
+      }
+    }
   },
-  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex", "beforeClose", "tipsProps"]),
+  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex", "beforeClose", "tipsProps", "customSlots"]),
+  emits: ["update:visible", "open", "close", "confirm"],
   setup: function setup$1(props2, context) {
     return setup({
       props: props2,
@@ -73,40 +77,36 @@ var _hoisted_1 = {
   class: "tiny-drawer"
 };
 var _hoisted_2 = {
-  key: 0,
-  "data-tag": "drawer-drag-bar",
-  ref: "dragBar",
-  class: /* @__PURE__ */ normalizeClass(["tiny-drawer__drag-bar"])
-};
-var _hoisted_3 = {
   class: "tiny-drawer__box"
 };
-var _hoisted_4 = {
+var _hoisted_3 = {
   key: 0,
   "data-tag": "drawer-header",
   ref: "header",
   class: "tiny-drawer__header-wrapper"
 };
-var _hoisted_5 = {
+var _hoisted_4 = {
+  key: 1,
   class: "tiny-drawer__header"
 };
-var _hoisted_6 = {
+var _hoisted_5 = {
   class: "tiny-drawer__header-left"
 };
-var _hoisted_7 = {
+var _hoisted_6 = {
   key: 0,
   class: "tiny-drawer__title"
 };
-var _hoisted_8 = {
+var _hoisted_7 = {
   class: "tiny-drawer__header-right"
 };
-var _hoisted_9 = {
+var _hoisted_8 = {
   key: 1,
   "data-tag": "drawer-footer",
   ref: "footer",
   class: "tiny-drawer__footer"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_slot_wrapper = resolveComponent("slot-wrapper");
   var _component_icon_help_circle = resolveComponent("icon-help-circle");
   var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
   var _component_icon_close = resolveComponent("icon-close");
@@ -115,14 +115,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     name: "drawer-fade"
   }, {
     default: withCtx(function() {
-      return [_ctx.mask && _ctx.visible ? (openBlock(), createElementBlock(
+      return [_ctx.mask && _ctx.state.visible ? (openBlock(), createElementBlock(
         "div",
         {
           key: 0,
           ref: "mask",
-          class: normalizeClass(["tiny-drawer__mask", {
-            "show-bg-color": _ctx.state.toggle
-          }]),
+          class: "tiny-drawer__mask show-bg-color",
           style: normalizeStyle({
             zIndex: _ctx.zIndex
           }),
@@ -131,8 +129,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           })
         },
         null,
-        6
-        /* CLASS, STYLE */
+        4
+        /* STYLE */
       )) : createCommentVNode("v-if", true)];
     }),
     _: 1
@@ -153,26 +151,36 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "is-top": _ctx.placement === "top",
             "is-bottom": _ctx.placement === "bottom",
             "drag-effects": !_ctx.state.dragEvent.isDrag,
-            "toggle": _ctx.state.toggle
+            "toggle": _ctx.state.visible
           }, "tiny-drawer-main", _ctx.customClass]),
           style: normalizeStyle({
             width: ["left", "right"].includes(_ctx.placement) ? _ctx.state.computedWidth : null,
+            height: ["top", "bottom"].includes(_ctx.placement) && _ctx.dragable && _ctx.state.height ? _ctx.state.height + "px" : null,
             zIndex: _ctx.zIndex
           })
         },
         [_ctx.dragable ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_2,
+          {
+            key: 0,
+            "data-tag": "drawer-drag-bar",
+            ref: "dragBar",
+            class: normalizeClass(["tiny-drawer__drag-bar", ["left", "right"].includes(_ctx.placement) && "p-left-Right", ["top", "bottom"].includes(_ctx.placement) && "p-top-Bottom", _ctx.placement === "left" && "p-left", _ctx.placement === "right" && "p-right", _ctx.placement === "top" && "p-top", _ctx.placement === "bottom" && "p-bottom"])
+          },
           null,
-          512
-          /* NEED_PATCH */
-        )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [_ctx.showHeader ? (openBlock(), createElementBlock(
+          2
+          /* CLASS */
+        )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [_ctx.showHeader ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_4,
+          _hoisted_3,
           [renderSlot(_ctx.$slots, "header", {}, function() {
-            return [createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [_ctx.title ? (openBlock(), createElementBlock(
+            var _ctx$customSlots;
+            return [(_ctx$customSlots = _ctx.customSlots) != null && _ctx$customSlots.header ? (openBlock(), createBlock(_component_slot_wrapper, {
+              key: 0,
+              node: _ctx.customSlots.header
+            }, null, 8, ["node"])) : (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [_ctx.title ? (openBlock(), createElementBlock(
               "div",
-              _hoisted_7,
+              _hoisted_6,
               toDisplayString(_ctx.title),
               1
               /* TEXT */
@@ -192,7 +200,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               },
               16
               /* FULL_PROPS */
-            )) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "header-right")])])];
+            )) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "header-right", {}, function() {
+              var _ctx$customSlots2;
+              return [(_ctx$customSlots2 = _ctx.customSlots) != null && _ctx$customSlots2.headerRight ? (openBlock(), createBlock(_component_slot_wrapper, {
+                key: 0,
+                node: _ctx.customSlots.headerRight
+              }, null, 8, ["node"])) : createCommentVNode("v-if", true)];
+            })])]))];
           }), _ctx.showClose ? (openBlock(), createElementBlock("button", {
             key: 0,
             type: "button",
@@ -215,57 +229,73 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               "flex flex-col": _ctx.flex
             }, "drawer-body"])
           },
-          [renderSlot(_ctx.$slots, "default")],
+          [renderSlot(_ctx.$slots, "default", {}, function() {
+            return [createVNode(_component_slot_wrapper, {
+              node: _ctx.customSlots.default
+            }, null, 8, ["node"])];
+          })],
           2
           /* CLASS */
         ), _ctx.showFooter ? (openBlock(), createElementBlock(
           "div",
-          _hoisted_9,
+          _hoisted_8,
           [renderSlot(_ctx.$slots, "footer", {}, function() {
-            return [createVNode(_component_tiny_button, {
-              type: "primary",
-              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(
-                  toDisplayString(_ctx.t("ui.button.confirm")),
-                  1
-                  /* TEXT */
-                )];
-              }),
-              _: 1
-              /* STABLE */
-            }, 8, ["class"]), createVNode(_component_tiny_button, {
-              plain: "",
-              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(
-                  toDisplayString(_ctx.t("ui.button.cancel")),
-                  1
-                  /* TEXT */
-                )];
-              }),
-              _: 1
-              /* STABLE */
-            }, 8, ["class"])];
+            var _ctx$customSlots3;
+            return [(_ctx$customSlots3 = _ctx.customSlots) != null && _ctx$customSlots3.footer ? (openBlock(), createBlock(_component_slot_wrapper, {
+              key: 0,
+              node: _ctx.customSlots.footer
+            }, null, 8, ["node"])) : (openBlock(), createElementBlock(
+              Fragment,
+              {
+                key: 1
+              },
+              [createVNode(_component_tiny_button, {
+                type: "primary",
+                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(
+                    toDisplayString(_ctx.t("ui.button.confirm")),
+                    1
+                    /* TEXT */
+                  )];
+                }),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"]), createVNode(_component_tiny_button, {
+                plain: "",
+                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(
+                    toDisplayString(_ctx.t("ui.button.cancel")),
+                    1
+                    /* TEXT */
+                  )];
+                }),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"])],
+              64
+              /* STABLE_FRAGMENT */
+            ))];
           })],
           512
           /* NEED_PATCH */
         )) : createCommentVNode("v-if", true)])],
         6
         /* CLASS, STYLE */
-      ), [[vShow, _ctx.visible]])];
+      ), [[vShow, _ctx.state.visible]])];
     }),
     _: 3
     /* FORWARDED */

package/package.json

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

package/src/index.d.ts

@@ -1,3 +1,7 @@
+export declare const $constants: {
+    SCROLL_LOCK_CLASS(mode: string): string;
+    DEFAULT_WIDTH: string;
+};
 export declare const drawerProps: {
     _constants: {
         type: ObjectConstructor;
@@ -54,6 +58,7 @@ export declare const drawerProps: {
     };
     beforeClose: FunctionConstructor;
     tipsProps: ObjectConstructor;
+    customSlots: ObjectConstructor;
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (ObjectConstructor | FunctionConstructor)[];
@@ -117,6 +122,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     };
     beforeClose: FunctionConstructor;
     tipsProps: ObjectConstructor;
+    customSlots: ObjectConstructor;
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (ObjectConstructor | FunctionConstructor)[];
@@ -125,7 +131,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     tiny_chart_theme: ObjectConstructor;
 }, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
     _constants: {
         type: ObjectConstructor;
         default: () => {
@@ -181,6 +187,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     };
     beforeClose: FunctionConstructor;
     tipsProps: ObjectConstructor;
+    customSlots: ObjectConstructor;
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (ObjectConstructor | FunctionConstructor)[];
@@ -192,8 +199,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<{
     _constants: Record<string, any>;
     placement: string;
     zIndex: number;
-    visible: boolean;
     mask: boolean;
+    visible: boolean;
     showClose: boolean;
     showHeader: boolean;
     showFooter: boolean;

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

@@ -9,8 +9,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     tiny_chart_theme?: any;
     width?: any;
     placement?: any;
-    visible?: any;
     mask?: any;
+    visible?: any;
     customClass?: any;
     showHeader?: any;
     showFooter?: any;
@@ -27,7 +27,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     d: (props: any) => void;
     dp: (props: any) => void;
     gcls: (key: any) => any;
-}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("close" | "confirm" | "update:visible" | "open")[], "close" | "confirm" | "update:visible" | "open", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     title?: any;
     tiny_mode?: any;
     tiny_mode_root?: any;
@@ -38,8 +38,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     tiny_chart_theme?: any;
     width?: any;
     placement?: any;
-    visible?: any;
     mask?: any;
+    visible?: any;
     customClass?: any;
     showHeader?: any;
     showFooter?: any;
@@ -48,7 +48,12 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     lockScroll?: any;
     flex?: any;
     beforeClose?: any;
-}>>>, {
+}>>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+}, {
     readonly title?: any;
     readonly tiny_mode?: any;
     readonly tiny_mode_root?: any;
@@ -59,8 +64,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     readonly tiny_chart_theme?: any;
     readonly width?: any;
     readonly placement?: any;
-    readonly visible?: any;
     readonly mask?: any;
+    readonly visible?: any;
     readonly customClass?: any;
     readonly showHeader?: any;
     readonly showFooter?: any;

package/src/pc.vue.d.ts

@@ -10,8 +10,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     width?: any;
     placement?: any;
     zIndex?: any;
-    visible?: any;
     mask?: any;
+    visible?: any;
     customClass?: any;
     showClose?: any;
     showHeader?: any;
@@ -22,6 +22,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     flex?: any;
     beforeClose?: any;
     tipsProps?: any;
+    customSlots?: any;
 }>, {
     t: (this: any, path: any, options?: any) => any;
     vm: any;
@@ -30,7 +31,7 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     d: (props: any) => void;
     dp: (props: any) => void;
     gcls: (key: any) => any;
-}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("close" | "confirm" | "update:visible" | "open")[], "close" | "confirm" | "update:visible" | "open", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     title?: any;
     tiny_mode?: any;
     tiny_mode_root?: any;
@@ -42,8 +43,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     width?: any;
     placement?: any;
     zIndex?: any;
-    visible?: any;
     mask?: any;
+    visible?: any;
     customClass?: any;
     showClose?: any;
     showHeader?: any;
@@ -54,7 +55,13 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     flex?: any;
     beforeClose?: any;
     tipsProps?: any;
-}>>>, {
+    customSlots?: any;
+}>>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+}, {
     readonly title?: any;
     readonly tiny_mode?: any;
     readonly tiny_mode_root?: any;
@@ -66,8 +73,8 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     readonly width?: any;
     readonly placement?: any;
     readonly zIndex?: any;
-    readonly visible?: any;
     readonly mask?: any;
+    readonly visible?: any;
     readonly customClass?: any;
     readonly showClose?: any;
     readonly showHeader?: any;
@@ -78,5 +85,6 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     readonly flex?: any;
     readonly beforeClose?: any;
     readonly tipsProps?: any;
+    readonly customSlots?: any;
 }, {}>;
 export default _default;

package/src/service.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+export declare const defaultConfigs: {
+    customClass: null;
+    placement: string;
+    width: null;
+    title: string;
+    showClose: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    mask: boolean;
+    maskClosable: boolean;
+    dragable: boolean;
+    lockScroll: boolean;
+    flex: boolean;
+    zIndex: number;
+    beforeClose: null;
+    tipsProps: null;
+};
+declare const _default: (configs?: {}) => any;
+export default _default;