@opentiny/vue-drawer 2.8.2 → 3.8.2

package/lib/mobile-first.js

@@ -2,61 +2,53 @@ 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";
-function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
-  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-  if (render) {
-    options.render = render;
-    options.staticRenderFns = staticRenderFns;
-    options._compiled = true;
-  }
-  if (functionalTemplate) {
-    options.functional = true;
-  }
-  if (scopeId) {
-    options._scopeId = "data-v-" + scopeId;
-  }
-  var hook;
-  if (moduleIdentifier) {
-    hook = function hook2(context) {
-      context = context || // cached call
-      this.$vnode && this.$vnode.ssrContext || // stateful
-      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
-        context = __VUE_SSR_CONTEXT__;
-      }
-      if (injectStyles) {
-        injectStyles.call(this, context);
-      }
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier);
-      }
+import { resolveComponent, withDirectives, openBlock, createElementBlock, createCommentVNode, normalizeClass, 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;
+    return function() {
+      if (i >= o.length)
+        return { done: true };
+      return { done: false, value: o[i++] };
     };
-    options._ssrRegister = hook;
-  } else if (injectStyles) {
-    hook = shadowMode ? function() {
-      injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
-    } : injectStyles;
   }
-  if (hook) {
-    if (options.functional) {
-      options._injectStyles = hook;
-      var originalRender = options.render;
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
-  }
-  return {
-    exports: scriptExports,
-    options
-  };
+  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 __vue2_script = {
+var _sfc_main = {
   components: {
     TinyButton: Button,
     IconClose: IconClose()
@@ -71,130 +63,168 @@ var __vue2_script = {
     });
   }
 };
-var render = function render2() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.visible,
-      expression: "visible"
-    }],
-    staticClass: "text-sm",
-    attrs: {
-      "data-tag": "tiny-drawer"
-    }
-  }, [_vm.mask ? _c("div", {
-    ref: "mask",
-    class: _vm.m("fixed z-50 inset-0 w-full h-full bg-black opacity-0 transition-opacity ease-linear duration-200", {
-      "opacity-30": _vm.state.toggle
-    }),
-    on: {
-      "click": function click($event) {
-        _vm.maskClosable && _vm.close();
-      }
-    }
-  }) : _vm._e(), _c("div", {
-    ref: "drawerBox",
-    class: _vm.m("fixed w-full max-w-full flex flex-col bg-white z-50 shadow-sm border-color-border-separator", {
-      "transition-all ease-linear duration-200": !_vm.state.dragEvent.isDrag
-    }, {
-      "h-full": ["left", "right"].includes(_vm.placement)
-    }, {
-      "left-0 bottom-0 translate-y-full border-t-0.5": _vm.placement === "bottom"
-    }, {
-      "left-0 top-0 -translate-y-full border-b-0.5": _vm.placement === "top"
-    }, {
-      "translate-y-0": ["top", "bottom"].includes(_vm.placement) && _vm.state.toggle
-    }, {
-      "left-0 top-0 -translate-x-full border-r-0.5": _vm.placement === "left"
-    }, {
-      "right-0 top-0 translate-x-full border-l-0.5": _vm.placement === "right"
-    }, {
-      "translate-x-0": ["left", "right"].includes(_vm.placement) && _vm.state.toggle
-    }, _vm.customClass),
-    style: {
-      width: ["left", "right"].includes(_vm.placement) ? _vm.state.computedWidth : 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"],
-    attrs: {
-      "data-tag": "drawer-drag-bar"
-    }
-  }) : _vm._e(), _c("div", {
-    class: ["flex-auto flex-col flex max-h-full"]
-  }, [_vm.showHeader ? _c("div", {
-    ref: "header",
-    staticClass: "flex leading-6 p-4 text-base items-center",
-    attrs: {
-      "data-tag": "drawer-header"
-    }
-  }, [_vm._t("header", function() {
-    return [_vm.title ? _c("div", {
-      staticClass: "max-w-[80%] pr-4 text-left truncate"
-    }, [_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", {
-        attrs: {
-          "custom-class": "h-5 w-5 cursor-pointer"
-        },
-        on: {
-          "click": _vm.close
-        }
-      })];
-    })], 2)];
-  })], 2) : _vm._e(), _c("div", {
-    ref: "body",
-    staticClass: "flex-auto flex flex-col overflow-auto",
-    attrs: {
-      "data-tag": "drawer-body"
-    }
-  }, [_vm._t("default")], 2), _vm.showFooter ? _c("div", {
-    ref: "footer",
-    staticClass: "px-4 py-3",
-    attrs: {
-      "data-tag": "drawer-footer"
-    }
-  }, [_c("div", {
-    staticClass: "flex-1 text-right"
-  }, [_vm._t("footer", function() {
-    return [_c("tiny-button", {
-      attrs: {
-        "tiny_mode": "mobile-first"
+var _hoisted_1 = {
+  "data-tag": "tiny-drawer",
+  class: "text-sm"
+};
+var _hoisted_2 = {
+  class: /* @__PURE__ */ normalizeClass(["flex-auto flex-col flex max-h-full"])
+};
+var _hoisted_3 = {
+  key: 0,
+  "data-tag": "drawer-header",
+  ref: "header",
+  class: "flex leading-6 p-4 text-base items-center"
+};
+var _hoisted_4 = {
+  key: 0,
+  class: "max-w-[80%] pr-4 text-left truncate"
+};
+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 = {
+  class: "flex-1 text-right"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_IconClose = resolveComponent("IconClose");
+  var _component_tiny_button = resolveComponent("tiny-button");
+  return withDirectives((openBlock(), createElementBlock(
+    "div",
+    _hoisted_1,
+    [createCommentVNode(" mask "), $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
+        })),
+        onClick: _cache[0] || (_cache[0] = function($event) {
+          return $props.maskClosable && _ctx.close();
+        })
       },
-      on: {
-        "click": _vm.close
-      }
-    }, [_vm._v(_vm._s(_vm.t("ui.button.cancel")))]), _c("tiny-button", {
-      staticClass: "ml-2",
-      attrs: {
-        "tiny_mode": "mobile-first",
-        "type": "primary"
+      null,
+      2
+      /* CLASS */
+    )) : createCommentVNode("v-if", true), createCommentVNode(" main "), 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", {
+          "transition-all ease-linear duration-200": !_ctx.state.dragEvent.isDrag
+        }, {
+          "h-full": ["left", "right"].includes($props.placement)
+        }, {
+          "left-0 bottom-0 translate-y-full border-t-0.5": $props.placement === "bottom"
+        }, {
+          "left-0 top-0 -translate-y-full border-b-0.5": $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"
+        }, {
+          "right-0 top-0 translate-x-full border-l-0.5": $props.placement === "right"
+        }, {
+          "translate-x-0": ["left", "right"].includes($props.placement) && _ctx.state.toggle
+        }, $props.customClass)),
+        style: normalizeStyle({
+          width: ["left", "right"].includes($props.placement) ? _ctx.state.computedWidth : null
+        })
       },
-      on: {
-        "click": _vm.confirm
-      }
-    }, [_vm._v(_vm._s(_vm.t("ui.button.confirm")))])];
-  })], 2)]) : _vm._e()])])]);
-};
-var staticRenderFns = [];
-var __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
-function __vue2_injectStyles(context) {
-  for (var o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+      [$props.dragable ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 0,
+          "data-tag": "drawer-drag-bar",
+          ref: "dragBar",
+          class: normalizeClass(["h-full absolute top-0 w-2 cursor-e-resize", $props.placement === "left" ? "-right-1" : "-left-1"])
+        },
+        null,
+        2
+        /* CLASS */
+      )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [createCommentVNode(" header "), $props.showHeader ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_3,
+        [renderSlot(_ctx.$slots, "header", {}, function() {
+          return [$props.title ? (openBlock(), createElementBlock(
+            "div",
+            _hoisted_4,
+            toDisplayString($props.title),
+            1
+            /* TEXT */
+          )) : 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",
+              onClick: _ctx.close
+            }, null, 8, ["onClick"])];
+          })])];
+        })],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true), createCommentVNode(" body "), createElementVNode(
+        "div",
+        _hoisted_6,
+        [renderSlot(_ctx.$slots, "default")],
+        512
+        /* NEED_PATCH */
+      ), createCommentVNode(" footer "), $props.showFooter ? (openBlock(), createElementBlock(
+        "div",
+        _hoisted_7,
+        [createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "footer", {}, function() {
+          return [createVNode(_component_tiny_button, {
+            tiny_mode: "mobile-first",
+            onClick: _ctx.close
+          }, {
+            default: withCtx(function() {
+              return [createTextVNode(
+                toDisplayString(_ctx.t("ui.button.cancel")),
+                1
+                /* TEXT */
+              )];
+            }),
+            _: 1
+            /* STABLE */
+          }, 8, ["onClick"]), createVNode(_component_tiny_button, {
+            tiny_mode: "mobile-first",
+            class: "ml-2",
+            type: "primary",
+            onClick: _ctx.confirm
+          }, {
+            default: withCtx(function() {
+              return [createTextVNode(
+                toDisplayString(_ctx.t("ui.button.confirm")),
+                1
+                /* TEXT */
+              )];
+            }),
+            _: 1
+            /* STABLE */
+          }, 8, ["onClick"])];
+        })])],
+        512
+        /* NEED_PATCH */
+      )) : createCommentVNode("v-if", true)])],
+      6
+      /* CLASS, STYLE */
+    )],
+    512
+    /* NEED_PATCH */
+  )), [[vShow, $props.visible]]);
 }
-var mobileFirst = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
+var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
   mobileFirst as default
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@opentiny/vue-drawer",
-  "version": "2.8.2",
+  "version": "3.8.2",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/vue-button": "~2.8.2",
-    "@opentiny/vue-common": "~2.8.2",
+    "@opentiny/vue-button": "~3.8.2",
+    "@opentiny/vue-common": "~3.8.2",
     "@opentiny/vue-renderless": "~3.8.2"
   },
   "license": "MIT",