@opentiny/vue-drawer 2.15.0 → 2.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 = "2.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 = "2.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

@@ -63,6 +63,7 @@ var __vue2_script = 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,
@@ -89,8 +90,8 @@ var render = function render2() {
     }
   }, [_vm.mask ? _c("div", {
     ref: "mask",
-    class: _vm.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": _vm.state.toggle
+    class: _vm.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": _vm.state.visible
     }),
     on: {
       "click": function click($event) {
@@ -110,23 +111,24 @@ var render = function render2() {
     }, {
       "left-0 top-0 -translate-y-full border-b-0.5 rounded-b-lg": _vm.placement === "top"
     }, {
-      "translate-y-0": ["top", "bottom"].includes(_vm.placement) && _vm.state.toggle
+      "translate-y-0": ["top", "bottom"].includes(_vm.placement) && _vm.state.visible
     }, {
       "left-0 top-0 -translate-x-full border-r-0.5 rounded-r-lg": _vm.placement === "left"
     }, {
       "right-0 top-0 translate-x-full border-l-0.5 rounded-l-lg": _vm.placement === "right"
     }, {
-      "translate-x-0": ["left", "right"].includes(_vm.placement) && _vm.state.toggle
+      "translate-x-0": ["left", "right"].includes(_vm.placement) && _vm.state.visible
     }, _vm.customClass),
     style: {
-      width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null
+      width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null,
+      height: ["top", "bottom"].includes(_vm.placement) && _vm.dragable && _vm.state.height ? _vm.state.height + "px" : null
     },
     attrs: {
       "data-tag": "tiny-drawer-main"
     }
   }, [_vm.dragable ? _c("div", {
     ref: "dragBar",
-    class: ["h-full absolute top-0 w-2 cursor-e-resize", _vm.placement === "left" ? "-right-1" : "-left-1"],
+    class: ["absolute", ["left", "right"].includes(_vm.placement) && "cursor-e-resize h-full top-0 w-2", ["top", "bottom"].includes(_vm.placement) && "cursor-n-resize w-full h-2 left-0", _vm.placement === "left" && "-right-1", _vm.placement === "right" && "-left-1", _vm.placement === "top" && "-bottom-1", _vm.placement === "bottom" && "-top-1"],
     attrs: {
       "data-tag": "drawer-drag-bar"
     }
@@ -140,11 +142,12 @@ var render = function render2() {
     }
   }, [_vm._t("header", function() {
     return [_vm.title ? _c("div", {
-      staticClass: "max-w-[80%] pr-4 text-left truncate"
+      staticClass: "max-w-[80%] pr-4 text-left truncate text-color-text-primary"
     }, [_vm._v(_vm._s(_vm.title))]) : _vm._e(), _c("div", {
       staticClass: "flex-1 flex items-center justify-end"
     }, [_vm._t("header-right", function() {
       return [_c("IconClose", {
+        staticClass: "fill-color-icon-primary",
         attrs: {
           "custom-class": "h-5 w-5 cursor-pointer"
         },

package/lib/pc.js

@@ -1,5 +1,5 @@
 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';
@@ -64,9 +64,22 @@ var __vue2_script = 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,
@@ -76,7 +89,7 @@ var __vue2_script = defineComponent({
     });
   }
 });
-var render = function render2() {
+var render2 = function render3() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -89,11 +102,9 @@ var render = function render2() {
     attrs: {
       "name": "drawer-fade"
     }
-  }, [_vm.mask && _vm.visible ? _c("div", {
+  }, [_vm.mask && _vm.state.visible ? _c("div", {
     ref: "mask",
-    class: ["tiny-drawer__mask", {
-      "show-bg-color": _vm.state.toggle
-    }],
+    staticClass: "tiny-drawer__mask show-bg-color",
     style: {
       zIndex: _vm.zIndex
     },
@@ -110,8 +121,8 @@ var render = function render2() {
     directives: [{
       name: "show",
       rawName: "v-show",
-      value: _vm.visible,
-      expression: "visible"
+      value: _vm.state.visible,
+      expression: "state.visible"
     }],
     ref: "drawerBox",
     class: ["tiny-drawer__main", {
@@ -120,10 +131,11 @@ var render = function render2() {
       "is-top": _vm.placement === "top",
       "is-bottom": _vm.placement === "bottom",
       "drag-effects": !_vm.state.dragEvent.isDrag,
-      "toggle": _vm.state.toggle
+      "toggle": _vm.state.visible
     }, "tiny-drawer-main", _vm.customClass],
     style: {
       width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : null,
+      height: ["top", "bottom"].includes(_vm.placement) && _vm.dragable && _vm.state.height ? _vm.state.height + "px" : null,
       zIndex: _vm.zIndex
     },
     attrs: {
@@ -131,7 +143,7 @@ var render = function render2() {
     }
   }, [_vm.dragable ? _c("div", {
     ref: "dragBar",
-    class: ["tiny-drawer__drag-bar"],
+    class: ["tiny-drawer__drag-bar", ["left", "right"].includes(_vm.placement) && "p-left-Right", ["top", "bottom"].includes(_vm.placement) && "p-top-Bottom", _vm.placement === "left" && "p-left", _vm.placement === "right" && "p-right", _vm.placement === "top" && "p-top", _vm.placement === "bottom" && "p-bottom"],
     attrs: {
       "data-tag": "drawer-drag-bar"
     }
@@ -144,7 +156,12 @@ var render = function render2() {
       "data-tag": "drawer-header"
     }
   }, [_vm._t("header", function() {
-    return [_c("div", {
+    var _vm$customSlots;
+    return [(_vm$customSlots = _vm.customSlots) !== null && _vm$customSlots !== void 0 && _vm$customSlots.header ? _c("slot-wrapper", {
+      attrs: {
+        "node": _vm.customSlots.header
+      }
+    }) : _c("div", {
       staticClass: "tiny-drawer__header"
     }, [_c("div", {
       staticClass: "tiny-drawer__header-left"
@@ -154,7 +171,14 @@ var render = function render2() {
       staticClass: "tiny-drawer__help-icon"
     })], 1) : _vm._e()], 1), _c("div", {
       staticClass: "tiny-drawer__header-right"
-    }, [_vm._t("header-right")], 2)])];
+    }, [_vm._t("header-right", function() {
+      var _vm$customSlots2;
+      return [(_vm$customSlots2 = _vm.customSlots) !== null && _vm$customSlots2 !== void 0 && _vm$customSlots2.headerRight ? _c("slot-wrapper", {
+        attrs: {
+          "node": _vm.customSlots.headerRight
+        }
+      }) : _vm._e()];
+    })], 2)])];
   }), _vm.showClose ? _c("button", {
     staticClass: "tiny-drawer__headerbtn",
     attrs: {
@@ -176,14 +200,25 @@ var render = function render2() {
     attrs: {
       "data-tag": "drawer-body"
     }
-  }, [_vm._t("default")], 2), _vm.showFooter ? _c("div", {
+  }, [_vm._t("default", function() {
+    return [_c("slot-wrapper", {
+      attrs: {
+        "node": _vm.customSlots.default
+      }
+    })];
+  })], 2), _vm.showFooter ? _c("div", {
     ref: "footer",
     staticClass: "tiny-drawer__footer",
     attrs: {
       "data-tag": "drawer-footer"
     }
   }, [_vm._t("footer", function() {
-    return [_c("tiny-button", {
+    var _vm$customSlots3;
+    return [(_vm$customSlots3 = _vm.customSlots) !== null && _vm$customSlots3 !== void 0 && _vm$customSlots3.footer ? _c("slot-wrapper", {
+      attrs: {
+        "node": _vm.customSlots.footer
+      }
+    }) : [_c("tiny-button", {
       class: ["tiny-drawer__confirm-btn", {
         reverse: _vm.state.btnOrderReversed
       }],
@@ -207,12 +242,12 @@ var render = function render2() {
           return _vm.handleClose("cancel");
         }
       }
-    }, [_vm._v(_vm._s(_vm.t("ui.button.cancel")))])];
+    }, [_vm._v(_vm._s(_vm.t("ui.button.cancel")))])]];
   })], 2) : _vm._e()])])])], 1);
 };
 var staticRenderFns = [];
 var __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render2, staticRenderFns, false, __vue2_injectStyles, null, null, null);
 function __vue2_injectStyles(context) {
   for (var o in __cssModules) {
     this[o] = __cssModules[o];

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "2.15.0",
+  "version": "2.17.0",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "sideEffects": false,
   "type": "module",
   "dependencies": {
-    "@opentiny/vue-button": "~2.15.0",
-    "@opentiny/vue-tooltip": "~2.15.0",
-    "@opentiny/vue-common": "~2.15.0",
-    "@opentiny/vue-renderless": "~3.15.0",
-    "@opentiny/vue-icon": "~2.15.0",
-    "@opentiny/vue-theme": "~3.15.0"
+    "@opentiny/vue-button": "~2.17.0",
+    "@opentiny/vue-tooltip": "~2.17.0",
+    "@opentiny/vue-common": "~2.17.0",
+    "@opentiny/vue-renderless": "~3.17.0",
+    "@opentiny/vue-icon": "~2.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)[];

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?: {}) => import("vue/types/vue").CombinedVueInstance<Record<never, any> & import("vue").default, object, object, object, Record<never, any>>;
+export default _default;