@opentiny/vue-drawer - npm Package Compare versions

Comparing version 2.8.0 to 3.8.0

lib/mobile-first.js

@@ -5,57 +5,49 @@ import { renderless, api } from "@opentiny/vue-renderless/drawer/vue";
 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];
-    }
+  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 {
-    exports: scriptExports,
-    options
-  };
-}
+  return target;
+};
 
-var __vue2_script = {
+var _sfc_main = {
   components: {
@@ -75,128 +67,166 @@ TinyButton: Button,
 };
-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.json

 {
   "name": "@opentiny/vue-drawer",
-  "version": "2.8.0",
+  "version": "3.8.0",
   "description": "",
@@ -9,4 +9,4 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-button": "~2.8.0",
-    "@opentiny/vue-common": "~2.8.0",
+    "@opentiny/vue-button": "~3.8.0",
+    "@opentiny/vue-common": "~3.8.0",
     "@opentiny/vue-renderless": "~3.8.0"
@@ -13,0 +13,0 @@ },

src/index.d.ts

@@ -42,4 +42,6 @@ declare const _default: {
     };
-    setup(props: any, context: any): () => import("vue").VNode;
+    setup(props: any, context: any): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
 };
 export default _default;

src/mobile-first.vue.d.ts

 declare const _sfc_main: {
     components: {
-        TinyButton: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<() => import("vue").VNode> & import("@vue/composition-api").Data, {}, {}, {
+        TinyButton: import("@vue/runtime-core").DefineComponent<{
             type: {
@@ -49,3 +49,51 @@ type: StringConstructor;
             tiny_chart_theme: ObjectConstructor;
-        }, {
+        }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+            type: {
+                type: StringConstructor;
+                default: string;
+            };
+            tabindex: {
+                type: StringConstructor;
+                default: string;
+            };
+            icon: {
+                type: (StringConstructor | ObjectConstructor)[];
+                default: string;
+            };
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            resetTime: {
+                type: NumberConstructor;
+                default: number;
+            };
+            nativeType: {
+                type: StringConstructor;
+                default: string;
+            };
+            size: {
+                type: StringConstructor;
+                default: string;
+                validator(val: string): boolean;
+            };
+            round: BooleanConstructor;
+            plain: BooleanConstructor;
+            circle: BooleanConstructor;
+            loading: BooleanConstructor;
+            disabled: BooleanConstructor;
+            autofocus: BooleanConstructor;
+            buttonClass: {
+                type: StringConstructor;
+                default: string;
+            };
+            tiny_mode: StringConstructor;
+            tiny_mode_root: BooleanConstructor;
+            tiny_template: (FunctionConstructor | ObjectConstructor)[];
+            tiny_renderless: FunctionConstructor;
+            tiny_theme: StringConstructor;
+            tiny_chart_theme: ObjectConstructor;
+        }>>, {
             type: string;
@@ -57,26 +105,6 @@ size: string;
             tiny_mode_root: boolean;
-            icon: string;
+            icon: string | Record<string, any>;
             text: string;
-            plain: boolean;
-            circle: boolean;
-            loading: boolean;
-            autofocus: boolean;
             resetTime: number;
             nativeType: string;
-            buttonClass: string;
-        } & {
-            tiny_mode?: string | undefined;
-            tiny_template?: unknown;
-            tiny_renderless?: Function | undefined;
-            tiny_theme?: string | undefined;
-            tiny_chart_theme?: Record<string, any> | undefined;
-        }> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-            type: string;
-            size: string;
-            disabled: boolean;
-            tabindex: string;
-            round: boolean;
-            tiny_mode_root: boolean;
-            icon: string;
-            text: string;
             plain: boolean;
@@ -86,43 +114,4 @@ circle: boolean;
             autofocus: boolean;
-            resetTime: number;
-            nativeType: string;
             buttonClass: string;
-        } & {
-            tiny_mode?: string | undefined;
-            tiny_template?: unknown;
-            tiny_renderless?: Function | undefined;
-            tiny_theme?: string | undefined;
-            tiny_chart_theme?: Record<string, any> | undefined;
-        }, import("@vue/composition-api").ShallowUnwrapRef<() => import("vue").VNode>, import("@vue/composition-api").Data, {}, {}, {
-            type: string;
-            size: string;
-            disabled: boolean;
-            tabindex: string;
-            round: boolean;
-            tiny_mode_root: boolean;
-            icon: string;
-            text: string;
-            plain: boolean;
-            circle: boolean;
-            loading: boolean;
-            autofocus: boolean;
-            resetTime: number;
-            nativeType: string;
-            buttonClass: string;
-        } & {
-            tiny_mode?: string | undefined;
-            tiny_template?: unknown;
-            tiny_renderless?: Function | undefined;
-            tiny_theme?: string | undefined;
-            tiny_chart_theme?: Record<string, any> | undefined;
-        }, {
-            type: string;
-            size: string;
-            tabindex: string;
-            icon: string;
-            text: string;
-            resetTime: number;
-            nativeType: string;
-            buttonClass: string;
-        }, true>);
+        }>;
         IconClose: any;
@@ -129,0 +118,0 @@ };

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

17105

increased by9.89%

Lines of code

479

increased by4.59%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

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

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

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

• - Removed@babel/helper-string-parser@7.24.8(transitive)

• - Removed@babel/helper-validator-identifier@7.24.7(transitive)

• - Removed@babel/parser@7.25.6(transitive)

• - Removed@babel/types@7.25.6(transitive)

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

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

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

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

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removed@vue/composition-api@1.2.4(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpicocolors@1.1.0(transitive)

• - Removedpostcss@8.4.47(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedto-fast-properties@2.0.0(transitive)

• - Removedtslib@2.7.0(transitive)

• - Removedvue@2.7.16(transitive)

• Updated@opentiny/vue-button@~3.8.0

• Updated@opentiny/vue-common@~3.8.0