@opentiny/vue-drawer - npm Package Compare versions

Comparing version 3.8.3 to 3.9.0

lib/index.js

@@ -16,9 +16,30 @@ function _extends() {
 import { $prefix, $props, $setup } from "@opentiny/vue-common";
+import PcTemplate from "./pc.js";
 import MobileFirstTemplate from "./mobile-first.js";
-var template = function template2() {
-  return MobileFirstTemplate;
+var template = function template2(mode) {
+  if ("pc" === (process.env.TINY_MODE || mode)) {
+    return PcTemplate;
+  }
+  if ("mobile-first" === (process.env.TINY_MODE || mode)) {
+    return MobileFirstTemplate;
+  }
+  return PcTemplate;
 };
+var $constants = {
+  SCROLL_LOCK_CLASS: function SCROLL_LOCK_CLASS(mode) {
+    var scrollLockClasses = {
+      "mobile-first": "overflow-hidden"
+    };
+    return scrollLockClasses[mode] || "";
+  }
+};
 var Drawer = {
   name: $prefix + "Drawer",
   props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
     visible: {
@@ -35,5 +56,9 @@ type: Boolean,
       type: String,
-      default: "300px"
+      default: "500px"
     },
     title: String,
+    showClose: {
+      type: Boolean,
+      default: true
+    },
     showHeader: {
@@ -55,3 +80,15 @@ type: Boolean,
     },
-    dragable: Boolean
+    dragable: Boolean,
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    flex: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: {
+      type: Number,
+      default: 2e3
+    }
   }),
@@ -66,3 +103,3 @@ setup: function setup(props, context) {
 };
-var version = "3.7.0";
+var version = "3.9.0";
 Drawer.model = {
@@ -69,0 +106,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -5,3 +5,3 @@ import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
 import Button from "@opentiny/vue-button";
-import { resolveComponent, withDirectives, openBlock, createElementBlock, createCommentVNode, normalizeClass, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createVNode, withCtx, createTextVNode, vShow } from "vue";
+import { resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createVNode, withCtx, createTextVNode, vShow } from "vue";
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
@@ -57,3 +57,3 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   },
-  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable"]),
+  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex"]),
   setup: function setup(props2, context) {
@@ -73,3 +73,3 @@ return _setup({
 var _hoisted_2 = {
-  class: /* @__PURE__ */ normalizeClass(["flex-auto flex-col flex max-h-full"])
+  class: /* @__PURE__ */ normalizeClass(["flex-auto flex-col flex max-h-full overflow-hidden"])
 };
@@ -80,3 +80,3 @@ var _hoisted_3 = {
   ref: "header",
-  class: "flex leading-6 p-4 text-base items-center"
+  class: "flex-none flex leading-6 p-4 text-base items-center"
 };
@@ -91,7 +91,2 @@ var _hoisted_4 = {
 var _hoisted_6 = {
-  "data-tag": "drawer-body",
-  ref: "body",
-  class: "flex-auto flex flex-col overflow-auto"
-};
-var _hoisted_7 = {
   key: 1,
@@ -102,3 +97,3 @@ "data-tag": "drawer-footer",
 };
-var _hoisted_8 = {
+var _hoisted_7 = {
   class: "flex-1 text-right"
@@ -112,3 +107,3 @@ };
     _hoisted_1,
-    [createCommentVNode(" mask "), $props.mask ? (openBlock(), createElementBlock(
+    [$props.mask ? (openBlock(), createElementBlock(
       "div",
@@ -118,4 +113,4 @@ {
         ref: "mask",
-        class: normalizeClass(_ctx.m("fixed z-50 inset-0 w-full h-full bg-black opacity-0 transition-opacity ease-linear duration-200", {
-          "opacity-30": _ctx.state.toggle
+        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
         })),
@@ -129,3 +124,3 @@ onClick: _cache[0] || (_cache[0] = function($event) {
       /* CLASS */
-    )) : createCommentVNode("v-if", true), createCommentVNode(" main "), createElementVNode(
+    )) : createCommentVNode("v-if", true), createElementVNode(
       "div",
@@ -135,3 +130,3 @@ {
         ref: "drawerBox",
-        class: normalizeClass(_ctx.m("fixed w-full max-w-full flex flex-col bg-white z-50 shadow-sm border-color-border-separator", {
+        class: normalizeClass(_ctx.m("fixed w-full max-w-full flex flex-col bg-color-bg-1 z-50 shadow-sm border-color-border-separator", {
           "transition-all ease-linear duration-200": !_ctx.state.dragEvent.isDrag
@@ -141,2 +136,4 @@ }, {
         }, {
+          "max-h-full": ["top", "bottom"].includes($props.placement)
+        }, {
           "left-0 bottom-0 translate-y-full border-t-0.5": $props.placement === "bottom"
@@ -169,3 +166,3 @@ }, {
         /* CLASS */
-      )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [createCommentVNode(" header "), $props.showHeader ? (openBlock(), createElementBlock(
+      )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [$props.showHeader ? (openBlock(), createElementBlock(
         "div",
@@ -189,12 +186,18 @@ _hoisted_3,
         /* NEED_PATCH */
-      )) : createCommentVNode("v-if", true), createCommentVNode(" body "), createElementVNode(
+      )) : createCommentVNode("v-if", true), createElementVNode(
         "div",
-        _hoisted_6,
+        {
+          "data-tag": "drawer-body",
+          ref: "body",
+          class: normalizeClass(["flex-auto overflow-auto", {
+            "flex flex-col": $props.flex
+          }])
+        },
         [renderSlot(_ctx.$slots, "default")],
-        512
-        /* NEED_PATCH */
-      ), createCommentVNode(" footer "), $props.showFooter ? (openBlock(), createElementBlock(
+        2
+        /* CLASS */
+      ), $props.showFooter ? (openBlock(), createElementBlock(
         "div",
-        _hoisted_7,
-        [createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer", {}, function() {
+        _hoisted_6,
+        [createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "footer", {}, function() {
           return [createVNode(_component_tiny_button, {
@@ -201,0 +204,0 @@ tiny_mode: "mobile-first",

package.json

 {
   "name": "@opentiny/vue-drawer",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "description": "",
@@ -9,5 +9,5 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-button": "~3.8.3",
-    "@opentiny/vue-common": "~3.8.3",
-    "@opentiny/vue-renderless": "~3.8.3"
+    "@opentiny/vue-button": "~3.9.0",
+    "@opentiny/vue-common": "~3.9.0",
+    "@opentiny/vue-renderless": "~3.9.0"
   },
@@ -14,0 +14,0 @@ "license": "MIT",

src/index.d.ts

 declare const _default: {
     name: string;
     props: {
+        _constants: {
+            type: ObjectConstructor;
+            default: () => {
+                SCROLL_LOCK_CLASS(mode: any): any;
+            };
+        };
         visible: {
@@ -18,2 +24,6 @@ type: BooleanConstructor;
         title: StringConstructor;
+        showClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         showHeader: {
@@ -36,2 +46,14 @@ type: BooleanConstructor;
         dragable: BooleanConstructor;
+        lockScroll: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        flex: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        zIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
         tiny_mode: StringConstructor;
@@ -38,0 +60,0 @@ tiny_mode_root: BooleanConstructor;

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22515

increased by71.99%

Number of package files

9

increased by28.57%

Lines of code

672

increased by83.61%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@opentiny/vue-button@~3.9.0

• Updated@opentiny/vue-common@~3.9.0

• Updated@opentiny/vue-renderless@~3.9.0