@opentiny/vue-popover - npm Package Compare versions

Comparing version 2.11.0-alpha.2 to 2.11.0

lib/index.js

@@ -17,2 +17,3 @@ function _extends() {
 import PcTemplate from "./pc.js";
+import MobileTemplate from "./mobile.js";
 import MobileFirstTemplate from "./mobile-first.js";
@@ -24,4 +25,4 @@ import "@opentiny/vue-theme/popover/index.css";
   }
-  if ("pc" === (process.env.TINY_MODE || mode)) {
-    return PcTemplate;
+  if ("mobile" === (process.env.TINY_MODE || mode)) {
+    return MobileTemplate;
   }
@@ -123,3 +124,3 @@ if ("mobile-first" === (process.env.TINY_MODE || mode)) {
 });
-var version = "2.11.0-alpha.2";
+var version = "2.11.0";
 Popover.install = function(Vue) {
@@ -126,0 +127,0 @@ Vue.component(Popover.name, Popover);

lib/mobile-first.js

@@ -17,3 +17,3 @@ function _extends() {
 import { renderless, api } from "@opentiny/vue-renderless/popover/vue";
-import Modal from "@opentiny/vue-modal";
+import { iconClose } from "@opentiny/vue-icon";
 function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
@@ -75,3 +75,3 @@ var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
   "title": "text-color-icon-primary font-bold text-xs",
-  "popper": "leading-5 hidden sm:block static sm:absolute px-4 py-3 z-[2000] text-justify text-sm sm:text-xs break-all sm:max-w-[21.875rem] shadow-md bg-color-bg-1 rounded [&[x-placement^=top]]:mb-2.5 [&[x-placement^=bottom]]:mt-2.5 [&[x-placement^=right]]:ml-2.5 [&[x-placement^=left]]:mr-2.5",
+  "popper": "sm:leading-5 sm:absolute sm:px-4 sm:py-3 sm:z-[2000] sm:text-justify sm:text-xs break-all sm:max-w-[theme(spacing.96)] sm:shadow-md sm:bg-color-bg-1 sm:rounded sm:[&[x-placement^=top]]:mb-2.5 sm:[&[x-placement^=bottom]]:mt-2.5 sm:[&[x-placement^=right]]:ml-2.5 sm:[&[x-placement^=left]]:mr-2.5",
   "arrow": 'absolute block w-0 h-0 border-[0.375rem] border-transparent border-solid after:absolute after:block after:w-0 after:h-0 after:border-[0.3125rem] after:border-transparent after:border-solid after:content-[""]',
@@ -87,3 +87,3 @@ "placement-top": "-bottom-3 border-t-color-bg-1 drop-shadow-[0_2px_2px_rgba(0,0,0,0.08)] border-b-w-0 after:-bottom-[0.3125rem] after:-ml-[0.3125rem] after:border-t-color-bg-1 after:border-b-w-0",
   components: {
-    TinyModal: Modal
+    IconClose: iconClose()
   },
@@ -138,2 +138,6 @@ emits: ["update:modelValue", "hide", "show", "after-enter", "after-leave", "created"],
     title: String,
+    transformOrigin: {
+      type: [Boolean, String],
+      default: true
+    },
     transition: {
@@ -177,3 +181,6 @@ type: String,
     ref: "root",
-    class: _vm.$attrs.class
+    class: _vm.$attrs.class,
+    attrs: {
+      "data-tag": "tiny-popover"
+    }
   }, [_c("transition", {
@@ -195,5 +202,3 @@ attrs: {
     ref: "popper",
-    class: [_vm.gcls("popper"), _vm.popperClass, {
-      "hidden": _vm.disabled || !_vm.state.showPopper
-    }],
+    class: [_vm.gcls("popper"), _vm.popperClass],
     style: {
@@ -203,2 +208,3 @@ width: _vm.width + "px"
     attrs: {
+      "data-tag": "tiny-popover-content",
       "role": "tooltip",
@@ -208,3 +214,8 @@ "id": _vm.state.tooltipId,
     }
-  }, [_vm.title ? _c("div", {
+  }, [_c("div", {
+    staticClass: "hidden sm:block",
+    attrs: {
+      "data-tag": "tiny-popover-body"
+    }
+  }, [_vm.slots.header ? _vm._t("header") : _vm.title ? _c("div", {
     class: [_vm.gcls("title")],
@@ -216,32 +227,48 @@ domProps: {
     return [_vm._v(_vm._s(_vm.content))];
-  }), _vm.visibleArrow ? _c("div", {
+  }), _vm._t("footer"), _vm.visibleArrow ? _c("div", {
     class: [_vm.gcls("arrow"), _vm.gcls("placement-" + _vm.state.xPlacement.split("-")[0])],
     attrs: {
+      "data-tag": "tiny-popover-visible",
       "x-arrow": ""
     }
-  }) : _vm._e()], 2)]), _c("span", {
-    ref: "wrapper"
-  }, [_vm._t("reference")], 2), _c("div", {
-    staticClass: "sm:hidden inline-block"
-  }, [_c("tiny-modal", {
-    ref: "modal",
-    staticClass: "sm:hidden",
+  }) : _vm._e()], 2), _c("div", {
+    class: ["sm:hidden block fixed inset-0 text-sm text-color-text-primary transition-top ease-out duration-300", "before:content-[''] before:fixed before:inset-0 before:w-full before:h-full before:opacity-30 before:bg-black"],
     attrs: {
-      "tiny_mode": "mobile-first",
-      "title": _vm.title
-    },
-    scopedSlots: _vm._u([_vm.slots.default ? {
-      key: "default",
-      fn: function fn(params) {
-        return [_vm._t("default", null, null, params)];
+      "data-tag": "tiny-popover-body"
+    }
+  }, [_c("div", {
+    class: ["absolute bottom-0 top-auto left-1/2 -translate-x-1/2 w-full max-h-full p-3 pointer-events-auto"]
+  }, [_c("div", {
+    staticClass: "flex flex-col w-full h-full rounded-lg overflow-hidden shadow-xl bg-color-bg-1"
+  }, [_c("div", {
+    staticClass: "flex items-center leading-6 text-sm px-6 pt-5",
+    attrs: {
+      "data-tag": "tiny-popover-header"
+    }
+  }, [_c("span", {
+    staticClass: "flex-auto text-base truncate font-semibold"
+  }, [_vm._v(_vm._s(_vm.title || _vm.t("ui.alert.title")))]), _c("icon-close", {
+    on: {
+      "click": function click($event) {
+        _vm.state.showPopper = false;
       }
-    } : null], null, true),
-    model: {
-      value: _vm.state.showPopper,
-      callback: function callback($$v) {
-        _vm.$set(_vm.state, "showPopper", $$v);
-      },
-      expression: "state.showPopper"
     }
-  }, [!_vm.slots.default ? [_vm._v(" " + _vm._s(_vm.content) + " ")] : _vm._e()], 2)], 1)], 1);
+  })], 1), _c("div", {
+    staticClass: "flex flex-auto leading-5 overflow-auto mx-6 mt-4 mb-5",
+    attrs: {
+      "data-tag": "tiny-popover-content"
+    }
+  }, [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.content))];
+  })], 2), _vm.slots.footer ? _c("div", {
+    staticClass: "w-full py-2.5 px-6 border-t-0.5 border-color-border-separator text-center",
+    attrs: {
+      "data-tag": "tiny-popover-footer"
+    }
+  }, [_vm._t("footer")], 2) : _vm._e()])])])])]), _c("span", {
+    ref: "wrapper",
+    attrs: {
+      "data-tag": "tiny-popover-reference"
+    }
+  }, [_vm._t("reference")], 2)], 1);
 };
@@ -248,0 +275,0 @@ var staticRenderFns = [];

package.json

 {
   "name": "@opentiny/vue-popover",
-  "version": "2.11.0-alpha.2",
+  "version": "2.11.0",
   "description": "",
@@ -10,4 +10,4 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-common": "~2.11.0-alpha.0",
-    "@opentiny/vue-renderless": "~3.11.0-alpha.0"
+    "@opentiny/vue-common": "~2.11.0",
+    "@opentiny/vue-renderless": "~3.11.0"
   },
@@ -14,0 +14,0 @@ "license": "MIT",

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25997

increased by4.76%

Lines of code

815

increased by3.56%

Number of low quality alerts

1

decreased by-50%

Dependency changes

• Updated@opentiny/vue-common@~2.11.0

• Updated@opentiny/vue-renderless@~3.11.0