@opentiny/vue-drawer - npm Package Compare versions

Comparing version 3.13.0 to 3.14.0

lib/index.js

@@ -15,3 +15,3 @@ function _extends() {
 }
-import { $prefix, $props, $setup } from "@opentiny/vue-common";
+import { $prefix, $setup, $props } from "@opentiny/vue-common";
 import PcTemplate from "./pc.js";
@@ -33,64 +33,68 @@ import MobileFirstTemplate from "./mobile-first.js";
     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) {
@@ -104,3 +108,3 @@ return $setup({
 };
-var version = "3.13.0";
+var version = "3.14.0";
 Drawer.model = {
@@ -107,0 +111,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -56,3 +56,3 @@ import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
   },
-  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) {
@@ -111,3 +111,3 @@ return _setup({
         onClick: _cache[0] || (_cache[0] = function($event) {
-          return $props.maskClosable && _ctx.close();
+          return _ctx.handleClose("mask");
         })
@@ -130,11 +130,11 @@ },
         }, {
-          "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"
         }, {
@@ -171,4 +171,6 @@ "translate-x-0": ["left", "right"].includes($props.placement) && _ctx.state.toggle
               "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");
+              })
+            })];
           })])];
@@ -196,3 +198,5 @@ })],
             tiny_mode: "mobile-first",
-            onClick: _ctx.close
+            onClick: _cache[2] || (_cache[2] = function($event) {
+              return _ctx.handleClose("cancel");
+            })
           }, {
@@ -208,7 +212,9 @@ default: withCtx(function() {
             /* 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");
+            })
           }, {
@@ -224,3 +230,3 @@ default: withCtx(function() {
             /* STABLE */
-          }, 8, ["onClick"])];
+          })];
         })])],
@@ -227,0 +233,0 @@ 512

lib/pc.js

 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) {
@@ -55,5 +56,7 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
     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) {
@@ -91,9 +94,12 @@ return _setup({
 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,
@@ -105,2 +111,4 @@ "data-tag": "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");
@@ -124,3 +132,3 @@ var _component_tiny_button = resolveComponent("tiny-button");
           onClick: _cache[0] || (_cache[0] = function($event) {
-            return $props.maskClosable && _ctx.close();
+            return _ctx.handleClose("mask");
           })
@@ -152,3 +160,3 @@ },
             "toggle": _ctx.state.toggle
-          }, $props.customClass]),
+          }, "tiny-drawer-main", $props.customClass]),
           style: normalizeStyle({
@@ -169,9 +177,25 @@ width: ["left", "right"].includes($props.placement) ? _ctx.state.computedWidth : null,
           [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", {
@@ -182,4 +206,4 @@ key: 0,
             "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");
             })
@@ -198,3 +222,3 @@ }, [createVNode(_component_icon_close, {
               "flex flex-col": $props.flex
-            }])
+            }, "drawer-body"])
           },
@@ -206,7 +230,12 @@ [renderSlot(_ctx.$slots, "default")],
           "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");
+              })
             }, {
@@ -222,5 +251,10 @@ default: withCtx(function() {
               /* 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");
+              })
             }, {
@@ -236,3 +270,3 @@ default: withCtx(function() {
               /* STABLE */
-            }, 8, ["onClick"])];
+            }, 8, ["class"])];
           })],
@@ -239,0 +273,0 @@ 512

package.json

 {
   "name": "@opentiny/vue-drawer",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "",
@@ -10,5 +10,8 @@ "main": "./lib/index.js",
   "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"
   },
@@ -15,0 +18,0 @@ "license": "MIT",

src/index.d.ts

@@ -0,1 +1,64 @@
+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: {
@@ -7,3 +70,4 @@ name: string;
             default: () => {
-                SCROLL_LOCK_CLASS(mode: any): any;
+                SCROLL_LOCK_CLASS(mode: string): string;
+                DEFAULT_WIDTH: string;
             };
@@ -22,3 +86,2 @@ };
             type: StringConstructor;
-            default: string;
         };
@@ -59,2 +122,4 @@ title: StringConstructor;
         };
+        beforeClose: FunctionConstructor;
+        tipsProps: ObjectConstructor;
         tiny_mode: StringConstructor;
@@ -61,0 +126,0 @@ tiny_mode_root: BooleanConstructor;

src/mobile-first.vue.d.ts

@@ -18,4 +18,5 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     maskClosable?: any;
+    lockScroll?: any;
     flex?: any;
-    lockScroll?: any;
+    beforeClose?: any;
     dragable?: any;
@@ -47,4 +48,5 @@ }>, {
     maskClosable?: any;
+    lockScroll?: any;
     flex?: any;
-    lockScroll?: any;
+    beforeClose?: any;
     dragable?: any;
@@ -68,6 +70,7 @@ }>>>, {
     readonly maskClosable?: any;
+    readonly lockScroll?: any;
     readonly flex?: any;
-    readonly lockScroll?: any;
+    readonly beforeClose?: any;
     readonly dragable?: any;
 }, {}>;
 export default _default;

src/pc.vue.d.ts

@@ -18,7 +18,9 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     showFooter?: any;
+    showClose?: any;
     maskClosable?: any;
+    lockScroll?: any;
     flex?: any;
-    showClose?: any;
-    lockScroll?: any;
+    beforeClose?: any;
     dragable?: any;
+    tipsProps?: any;
 }>, {
@@ -49,7 +51,9 @@ t: (this: any, path: any, options?: any) => any;
     showFooter?: any;
+    showClose?: any;
     maskClosable?: any;
+    lockScroll?: any;
     flex?: any;
-    showClose?: any;
-    lockScroll?: any;
+    beforeClose?: any;
     dragable?: any;
+    tipsProps?: any;
 }>>>, {
@@ -72,8 +76,10 @@ readonly title?: any;
     readonly showFooter?: any;
+    readonly showClose?: any;
     readonly maskClosable?: any;
+    readonly lockScroll?: any;
     readonly flex?: any;
-    readonly showClose?: any;
-    readonly lockScroll?: any;
+    readonly beforeClose?: any;
     readonly dragable?: any;
+    readonly tipsProps?: any;
 }, {}>;
 export default _default;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30646

increased by14.36%

Lines of code

923

increased by14.8%

Worsened metrics

Dependency count

6

increased by100%

Dependency changes

• + Added@opentiny/vue-icon@~3.14.0

• + Added@opentiny/vue-theme@~3.14.0

• + Added@opentiny/vue-tooltip@~3.14.0

• + Added@opentiny/vue-button@3.14.0(transitive)

• + Added@opentiny/vue-common@3.14.0(transitive)

• + Added@opentiny/vue-icon@3.14.0(transitive)

• + Added@opentiny/vue-locale@3.14.0(transitive)

• + Added@opentiny/vue-renderless@3.14.1(transitive)

• + Added@opentiny/vue-theme@3.14.1(transitive)

• + Added@opentiny/vue-theme-mobile@3.14.2(transitive)

• + Added@opentiny/vue-tooltip@3.14.0(transitive)

• - Removed@opentiny/vue-button@3.13.0(transitive)

• - Removed@opentiny/vue-common@3.13.1(transitive)

• - Removed@opentiny/vue-icon@3.13.0(transitive)

• - Removed@opentiny/vue-locale@3.13.0(transitive)

• - Removed@opentiny/vue-renderless@3.13.2(transitive)

• - Removed@opentiny/vue-theme@3.13.3(transitive)

• - Removed@opentiny/vue-theme-mobile@3.13.0(transitive)

• Updated@opentiny/vue-button@~3.14.0

• Updated@opentiny/vue-common@~3.14.0

• Updated@opentiny/vue-renderless@~3.14.0