@opentiny/vue-drawer 3.8.3 → 3.10.0

package/lib/index.js

@@ -13,13 +13,34 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 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: {
       type: Boolean,
       default: false
@@ -31,9 +52,13 @@ var Drawer = {
     },
     width: {
       type: String,
-      default: "300px"
+      default: "500px"
     },
     title: String,
+    showClose: {
+      type: Boolean,
+      default: true
+    },
     showHeader: {
       type: Boolean,
       default: true
@@ -50,7 +75,19 @@ var Drawer = {
       type: Boolean,
       default: true
     },
-    dragable: Boolean
+    dragable: Boolean,
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    flex: {
+      type: Boolean,
+      default: false
+    },
+    zIndex: {
+      type: Number,
+      default: 2e3
+    }
   }),
   setup: function setup(props, context) {
     return $setup({
@@ -60,7 +97,7 @@ var Drawer = {
     });
   }
 };
-var version = "3.7.0";
+var version = "3.10.0";
 Drawer.model = {
   prop: "modelValue",
   event: "update:modelValue"

package/lib/mobile-first.js

@@ -2,7 +2,7 @@ import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
 import { props, setup as _setup } from "@opentiny/vue-common";
 import { IconClose } from "@opentiny/vue-icon";
 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) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (it)
@@ -53,7 +53,7 @@ var _sfc_main = {
     TinyButton: Button,
     IconClose: IconClose()
   },
-  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) {
     return _setup({
       props: props2,
@@ -68,13 +68,13 @@ var _hoisted_1 = {
   class: "text-sm"
 };
 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"])
 };
 var _hoisted_3 = {
   key: 0,
   "data-tag": "drawer-header",
   ref: "header",
-  class: "flex leading-6 p-4 text-base items-center"
+  class: "flex-none flex leading-6 p-4 text-base items-center"
 };
 var _hoisted_4 = {
   key: 0,
@@ -84,17 +84,12 @@ var _hoisted_5 = {
   class: "flex-1 flex items-center justify-end"
 };
 var _hoisted_6 = {
-  "data-tag": "drawer-body",
-  ref: "body",
-  class: "flex-auto flex flex-col overflow-auto"
-};
-var _hoisted_7 = {
   key: 1,
   "data-tag": "drawer-footer",
   ref: "footer",
   class: "px-4 py-3"
 };
-var _hoisted_8 = {
+var _hoisted_7 = {
   class: "flex-1 text-right"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -103,13 +98,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock(
     "div",
     _hoisted_1,
-    [createCommentVNode(" mask "), $props.mask ? (openBlock(), createElementBlock(
+    [$props.mask ? (openBlock(), createElementBlock(
       "div",
       {
         key: 0,
         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
         })),
         onClick: _cache[0] || (_cache[0] = function($event) {
           return $props.maskClosable && _ctx.close();
@@ -118,15 +113,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       null,
       2
       /* CLASS */
-    )) : createCommentVNode("v-if", true), createCommentVNode(" main "), createElementVNode(
+    )) : createCommentVNode("v-if", true), createElementVNode(
       "div",
       {
         "data-tag": "tiny-drawer-main",
         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
         }, {
           "h-full": ["left", "right"].includes($props.placement)
+        }, {
+          "max-h-full": ["top", "bottom"].includes($props.placement)
         }, {
           "left-0 bottom-0 translate-y-full border-t-0.5": $props.placement === "bottom"
         }, {
@@ -155,7 +152,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         null,
         2
         /* 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",
         _hoisted_3,
         [renderSlot(_ctx.$slots, "header", {}, function() {
@@ -174,16 +171,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         })],
         512
         /* 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, {
             tiny_mode: "mobile-first",
             onClick: _ctx.close

package/lib/pc.js

@@ -0,0 +1,230 @@
+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 Button from "@opentiny/vue-button";
+import { resolveComponent, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, createCommentVNode, createElementVNode, 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;
+    return function() {
+      if (i >= o.length)
+        return { done: true };
+      return { done: false, value: o[i++] };
+    };
+  }
+  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 _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;
+}
+var _export_sfc = function _export_sfc2(sfc, props) {
+  var target = sfc.__vccOpts || sfc;
+  for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
+    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    target[key] = val;
+  }
+  return target;
+};
+
+var _sfc_main = {
+  components: {
+    TinyButton: Button,
+    IconClose: IconClose()
+  },
+  props: [].concat(props, ["visible", "title", "showHeader", "showFooter", "customClass", "placement", "width", "mask", "dragable", "maskClosable", "lockScroll", "flex", "showClose", "zIndex"]),
+  setup: function setup(props2, context) {
+    return _setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+};
+var _hoisted_1 = {
+  "data-tag": "tiny-drawer",
+  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 = {
+  key: 0,
+  "data-tag": "drawer-header",
+  ref: "header",
+  class: "tiny-drawer__header-wrapper"
+};
+var _hoisted_5 = {
+  class: "tiny-drawer__header"
+};
+var _hoisted_6 = {
+  key: 0,
+  class: "tiny-drawer__title"
+};
+var _hoisted_7 = {
+  class: "tiny-drawer__header-right"
+};
+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_icon_close = resolveComponent("icon-close");
+  var _component_tiny_button = resolveComponent("tiny-button");
+  return withDirectives((openBlock(), createElementBlock(
+    "div",
+    _hoisted_1,
+    [$props.mask ? (openBlock(), createElementBlock(
+      "div",
+      {
+        key: 0,
+        ref: "mask",
+        class: normalizeClass(["tiny-drawer__mask", {
+          "show-bg-color": _ctx.state.toggle
+        }]),
+        style: normalizeStyle({
+          zIndex: $props.zIndex
+        }),
+        onClick: _cache[0] || (_cache[0] = function($event) {
+          return $props.maskClosable && _ctx.close();
+        })
+      },
+      null,
+      6
+      /* CLASS, STYLE */
+    )) : createCommentVNode("v-if", true), createElementVNode(
+      "div",
+      {
+        "data-tag": "tiny-drawer-main",
+        ref: "drawerBox",
+        class: normalizeClass(["tiny-drawer__main", {
+          "is-left": $props.placement === "left",
+          "is-right": $props.placement === "right",
+          "is-top": $props.placement === "top",
+          "is-bottom": $props.placement === "bottom",
+          "drag-effects": !_ctx.state.dragEvent.isDrag
+        }, $props.customClass]),
+        style: normalizeStyle({
+          width: ["left", "right"].includes($props.placement) ? _ctx.state.computedWidth : null,
+          zIndex: $props.zIndex
+        })
+      },
+      [$props.dragable ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_2,
+        null,
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3, [$props.showHeader ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_4,
+        [renderSlot(_ctx.$slots, "header", {}, function() {
+          return [createElementVNode("div", _hoisted_5, [$props.title ? (openBlock(), createElementBlock(
+            "div",
+            _hoisted_6,
+            toDisplayString($props.title),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_7, [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);
+          })
+        }, [createVNode(_component_icon_close, {
+          class: "tiny-svg-size tiny-drawer__close"
+        })])) : createCommentVNode("v-if", true)],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true), createElementVNode(
+        "div",
+        {
+          "data-tag": "drawer-body",
+          ref: "body",
+          class: normalizeClass(["tiny-drawer__body", {
+            "flex flex-col": $props.flex
+          }])
+        },
+        [renderSlot(_ctx.$slots, "default")],
+        2
+        /* CLASS */
+      ), $props.showFooter ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_8,
+        [renderSlot(_ctx.$slots, "footer", {}, function() {
+          return [createVNode(_component_tiny_button, {
+            type: "primary",
+            onClick: _ctx.confirm
+          }, {
+            default: withCtx(function() {
+              return [createTextVNode(
+                toDisplayString(_ctx.t("ui.button.confirm")),
+                1
+                /* TEXT */
+              )];
+            }),
+            _: 1
+            /* STABLE */
+          }, 8, ["onClick"]), createVNode(_component_tiny_button, {
+            plain: "",
+            onClick: _ctx.close
+          }, {
+            default: withCtx(function() {
+              return [createTextVNode(
+                toDisplayString(_ctx.t("ui.button.cancel")),
+                1
+                /* TEXT */
+              )];
+            }),
+            _: 1
+            /* STABLE */
+          }, 8, ["onClick"])];
+        })],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true)])],
+      6
+      /* CLASS, STYLE */
+    )],
+    512
+    /* NEED_PATCH */
+  )), [[vShow, $props.visible]]);
+}
+var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  pc as default
+};

package/package.json

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

package/src/index.d.ts

@@ -1,11 +1,17 @@
 declare const _default: {
     name: string;
     props: {
+        _constants: {
+            type: ObjectConstructor;
+            default: () => {
+                SCROLL_LOCK_CLASS(mode: any): any;
+            };
+        };
         visible: {
             type: BooleanConstructor;
             default: boolean;
         };
-        customClass: (ObjectConstructor | ArrayConstructor | StringConstructor)[];
+        customClass: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
         placement: {
             type: StringConstructor;
             default: string;
@@ -15,6 +21,10 @@ declare const _default: {
             default: string;
         };
         title: StringConstructor;
+        showClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         showHeader: {
             type: BooleanConstructor;
             default: boolean;
@@ -32,6 +42,18 @@ declare const _default: {
             default: boolean;
         };
         dragable: BooleanConstructor;
+        lockScroll: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        flex: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        zIndex: {
+            type: NumberConstructor;
+            default: number;
+        };
         tiny_mode: StringConstructor;
         tiny_mode_root: BooleanConstructor;
         tiny_template: (ObjectConstructor | FunctionConstructor)[];
@@ -39,7 +61,7 @@ declare const _default: {
         tiny_theme: StringConstructor;
         tiny_chart_theme: ObjectConstructor;
     };
-    setup(props: any, context: any): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    setup(props: any, context: any): () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
         [key: string]: any;
     }>;
 };

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

@@ -1,15 +1,17 @@
-declare const _sfc_main: {
-    components: undefined;
-    props: string[];
-    setup(props: any, context: any): {
-        t: (this: any, path: any, options?: any) => any;
-        vm: any;
-        f: (props: any, attrs?: {}) => {};
-        a: (attrs: any, filters: any, include: any) => {};
-        d: (props: any) => void;
-        dp: (props: any) => void;
-        gcls: (key: any) => any;
-        m: (...cssClasses: any[]) => string;
-    };
-};
-export default _sfc_main;
+declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
+    [x: string]: any;
+}>, {
+    t: (this: any, path: any, options?: any) => any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+    gcls: (key: any) => any;
+    m: (...cssClasses: any[]) => string;
+}, 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<{
+    [x: string]: any;
+}>>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/src/pc.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
+    [x: string]: any;
+}>, {
+    t: (this: any, path: any, options?: any) => any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+    gcls: (key: any) => any;
+    m: (...cssClasses: any[]) => string;
+}, 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<{
+    [x: string]: any;
+}>>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;