@opentiny/vue-tooltip - npm Package Compare versions

Comparing version 3.13.0 to 3.14.0

lib/index.js

@@ -89,3 +89,3 @@ function _extends() {
     default: function _default8() {
-      return "dark";
+      return "";
     }
@@ -176,3 +176,3 @@ },
 });
-var version = "3.13.0";
+var version = "3.14.0";
 Tooltip.model = {
@@ -179,0 +179,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -17,10 +17,15 @@ function _extends() {
 import { renderless, api } from "@opentiny/vue-renderless/tooltip/vue";
-import { defineComponent, $prefix, $props, setup as _setup, createComponent, h, mergeClass, parseVnode, isEmptyVnode } from "@opentiny/vue-common";
+import { defineComponent, $prefix, $props, setup as _setup, createComponent, h, mergeClass, hooks, parseVnode, isEmptyVnode } from "@opentiny/vue-common";
 var classes = {
-  "tooltip": "absolute -left-[9999px] py-2 px-3 sm:py-1.5 sm:px-2 text-sm sm:text-xs bg-color-text-primary text-color-text-inverse shadow-none sm:bg-color-bg-1 sm:text-color-text-primary sm:shadow-md leading-tight min-w-[theme(spacing.12)] max-w-[theme(spacing.112)] z-[2000] break-words 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",
+  "tooltip": "absolute bg-color-text-primary text-color-text-inverse shadow-none -left-[9999px] py-2 px-3 sm:py-1.5 sm:px-2 text-sm sm:text-xs leading-tight min-w-[theme(spacing.12)] max-w-[theme(spacing.80)] sm:max-w-[theme(spacing.112)] z-[2000] break-words 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",
+  "tooltip-sm": "sm:bg-color-bg-1 sm:text-color-text-primary sm:shadow-md",
   "arrow": 'drop-shadow-none 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-[""]',
-  "placement-top": "sm:drop-shadow-[0_2px_2px_rgba(0,0,0,0.08)] -bottom-3 border-t-color-text-primary sm:border-t-color-bg-1 border-b-w-0 sm:after:border-t-color-bg-1 after:-bottom-1 after:-ml-1.5 after:border-t-color-text-primary after:border-b-w-0",
-  "placement-bottom": "sm:drop-shadow-[0_-2px_2px_rgba(0,0,0,0.08)] -top-3 border-t-w-0 border-b-color-text-primary sm:border-b-color-bg-1 sm:after:border-b-color-bg-1 after:-top-1 after:-ml-1.5 after:border-t-w-0 after:border-b-color-text-primary",
-  "placement-right": "sm:drop-shadow-[-2px_0px_2px_rgba(0,0,0,0.08)] -left-3 border-r-color-text-primary border-l-w-0 sm:border-r-color-bg-1 sm:after:border-r-color-bg-1 after:-bottom-1 after:-left-1 after:border-r-color-text-primary after:border-l-w-0",
-  "placement-left": "sm:drop-shadow-[2px_0_2px_rgba(0,0,0,0.08)] -right-1.5 border-l-color-text-primary border-r-0 sm:border-l-color-bg-1 sm:after:border-l-color-bg-1 after:-bottom-1 after:right-px after:-ml-1.5 after:border-l-color-text-primary after:border-r-0",
+  "placement-top": "-bottom-3 border-t-color-text-primary border-b-w-0 after:-bottom-1 after:-ml-1.5 after:border-t-color-text-primary after:border-b-w-0",
+  "placement-bottom": "-top-3 border-t-w-0 border-b-color-text-primary after:-top-1 after:-ml-1.5 after:border-t-w-0 after:border-b-color-text-primary",
+  "placement-right": "-left-3 border-r-color-text-primary border-l-w-0 after:-bottom-1 after:-left-1 after:border-r-color-text-primary after:border-l-w-0",
+  "placement-left": "-right-1.5 border-l-color-text-primary border-r-0 after:-bottom-1 after:right-px after:-ml-1.5 after:border-l-color-text-primary after:border-r-0",
+  "placement-top-sm": "sm:drop-shadow-[0_2px_2px_rgba(0,0,0,0.08)] sm:border-t-color-bg-1 sm:after:border-t-color-bg-1",
+  "placement-bottom-sm": "sm:drop-shadow-[0_-2px_2px_rgba(0,0,0,0.08)] sm:border-b-color-bg-1 sm:after:border-b-color-bg-1",
+  "placement-right-sm": "sm:drop-shadow-[-2px_0px_2px_rgba(0,0,0,0.08)] sm:border-r-color-bg-1 sm:after:border-r-color-bg-1",
+  "placement-left-sm": "sm:drop-shadow-[2px_0_2px_rgba(0,0,0,0.08)] sm:border-l-color-bg-1 sm:after:border-l-color-bg-1",
   "placement-top-light": "border-t-color-bg-1 drop-shadow-[0_2px_2px_rgba(0,0,0,0.08)] after:border-t-color-bg-1",
@@ -33,3 +38,25 @@ "placement-bottom-light": "border-b-color-bg-1 drop-shadow-[0_-2px_2px_rgba(0,0,0,0.08)] after:border-b-color-bg-1",
   "placement-left-dark": "border-l-color-text-primary after:border-l-color-text-primary",
-  "placement-right-dark": "border-r-color-text-primary after:border-r-color-text-primary"
+  "placement-right-dark": "border-r-color-text-primary after:border-r-color-text-primary",
+  "effect-dark": "bg-color-text-primary text-color-text-inverse shadow-none",
+  "effect-light": "bg-color-bg-1 text-color-text-primary shadow-md",
+  "is-warning": "text-color-text-inverse bg-color-warning border-color-warning",
+  "is-error": "text-color-text-inverse bg-color-error border-color-error",
+  "is-info": "text-color-text-inverse bg-color-info-secondary border-color-info-secondary",
+  "is-success": "text-color-text-inverse bg-color-success border-color-success",
+  "arrow-top-warning": "border-t-color-warning after:border-t-color-warning",
+  "arrow-bottom-warning": "border-b-color-warning after:border-b-color-warning",
+  "arrow-left-warning": "border-l-color-warning after:border-l-color-warning",
+  "arrow-right-warning": "border-r-color-warning after:border-r-color-warning",
+  "arrow-top-error": "border-t-color-error after:border-t-color-error",
+  "arrow-bottom-error": "border-b-color-error after:border-b-color-error",
+  "arrow-left-error": "border-l-color-error after:border-l-color-error",
+  "arrow-right-error": "border-r-color-error after:border-r-color-error",
+  "arrow-top-info": "border-t-color-info-secondary after:border-t-color-info-secondary",
+  "arrow-bottom-info": "border-b-color-info-secondary after:border-b-color-info-secondary",
+  "arrow-left-info": "border-l-color-info-secondary after:border-l-color-info-secondary",
+  "arrow-right-info": "border-r-color-info-secondary after:border-r-color-info-secondary",
+  "arrow-top-success": "border-t-color-success after:border-t-color-success",
+  "arrow-bottom-success": "border-b-color-success after:border-b-color-success",
+  "arrow-left-success": "border-l-color-success after:border-l-color-success",
+  "arrow-right-success": "border-r-color-success after:border-r-color-success"
 };
@@ -224,3 +251,3 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               "appendToBody": _this.appendToBody,
-              "class": mergeClass([classes.tooltip, _this.effect === "dark" ? "bg-color-text-primary text-color-text-inverse shadow-none" : "", _this.effect === "light" ? "bg-color-bg-1 text-color-text-primary shadow-md" : "", _this.disabled || !_this.state.showPopper ? "hidden" : "", _this.popperClass]),
+              "class": mergeClass([classes.tooltip, !_this.effect && !_this.type && classes["tooltip-sm"], _this.effect && classes["effect-" + _this.effect], _this.type && classes["is-" + _this.type], _this.disabled || !_this.state.showPopper ? "hidden" : "", _this.popperClass]),
               "role": "tooltip",
@@ -236,3 +263,3 @@ "aria-hidden": _this.disabled || !_this.state.showPopper ? "true" : "false",
               "x-arrow": true,
-              "class": mergeClass([classes.arrow, classes["placement-" + xPlacement.split("-")[0]], _this.effect === "light" ? classes["placement-" + xPlacement.split("-")[0] + "-light"] : "", _this.effect === "dark" ? classes["placement-" + xPlacement.split("-")[0] + "-dark"] : ""])
+              "class": mergeClass([classes.arrow, classes["placement-" + xPlacement.split("-")[0]], !_this.effect && !_this.type && classes["placement-" + xPlacement.split("-")[0] + "-sm"], _this.effect === "light" ? classes["placement-" + xPlacement.split("-")[0] + "-light"] : "", _this.effect === "dark" ? classes["placement-" + xPlacement.split("-")[0] + "-dark"] : "", _this.type ? classes["arrow-" + xPlacement.split("-")[0] + "-" + _this.type] : ""])
             }, null) : ""]), [[vShow, !_this.disabled && _this.state.showPopper && content]])]);
@@ -308,2 +335,5 @@ }
     var firstElement = getFirstElement();
+    if (firstElement && hooks.Fragment && firstElement.type === hooks.Fragment) {
+      firstElement = firstElement.children[0];
+    }
     if (!firstElement)
@@ -310,0 +340,0 @@ return null;

lib/pc.js

@@ -0,4 +1,18 @@
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 import { withDirectives, createVNode, vShow } from "vue";
 import { renderless, api } from "@opentiny/vue-renderless/tooltip/vue";
-import { defineComponent, $prefix, setup as _setup, createComponent, h, parseVnode } from "@opentiny/vue-common";
+import { defineComponent, $prefix, $props, setup as _setup, createComponent, h, hooks, parseVnode, isEmptyVnode } from "@opentiny/vue-common";
 import "@opentiny/vue-theme/tooltip/index.css";
@@ -8,3 +22,3 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
   componentName: "Tooltip",
-  props: {
+  props: _extends({}, $props, {
     visible: {
@@ -145,3 +159,3 @@ type: String,
     }
-  },
+  }),
   setup: function setup(props, context) {
@@ -159,3 +173,3 @@ return _setup({
       var slotContent = vm.slots.content && vm.slots.content();
-      if (slotContent) {
+      if (slotContent && (!hooks.Comment || slotContent[0].type !== hooks.Comment)) {
         return slotContent;
@@ -173,57 +187,60 @@ }
     };
-    Object.prototype.hasOwnProperty.call(this, "popperVM") || this.d({
-      popperVM: {
-        get: function get() {
-          return (
-            // 使用适配器里的createComponent创建一个新的vue的vnode节点为一个新组件，挂载到el下面去
-            createComponent({
-              el: document.createElement("div"),
-              propsData: null,
-              component: {
-                render: function render2() {
-                  var content = getContent(_this);
-                  var propsData = {
-                    attrs: {
-                      name: _this.transition
-                    },
-                    on: {
-                      "after-leave": _this.doDestroy
-                    }
-                  };
-                  var typeClass = "is-" + (_this.type || _this.effect);
-                  var mouseenter = function mouseenter2() {
-                    return _this.setExpectedState(true);
-                  };
-                  var mouseleave = function mouseleave2() {
-                    _this.setExpectedState(false);
-                    _this.debounceClose();
-                  };
-                  _this.$nextTick(function() {
-                    if (!_this.disabled && _this.state.showPopper && content) {
-                      _this.updatePopper();
-                    }
-                  });
-                  return h("transition", propsData, [withDirectives(createVNode("div", {
-                    "ref": "popper",
-                    "id": _this.state.tooltipId,
-                    "class": ["tiny-tooltip", "tiny-tooltip__popper", typeClass, _this.popperClass, {
-                      "tiny-tooltip__show-tips": _this.state.showContent
-                    }],
-                    "style": "max-width:" + _this.state.tipsMaxWidth + "px",
-                    "role": "tooltip",
-                    "aria-hidden": _this.disabled || !_this.state.showPopper ? "true" : "false",
-                    "onMouseenter": function onMouseenter() {
-                      return mouseenter();
-                    },
-                    "onMouseleave": function onMouseleave() {
-                      return mouseleave();
-                    }
-                  }, [content]), [[vShow, !_this.disabled && _this.state.showPopper && content]])]);
-                }
+    if (!Object.prototype.hasOwnProperty.call(this, "popperVM")) {
+      var popperVM = createComponent({
+        el: document.createElement("div"),
+        propsData: null,
+        component: {
+          render: function render2() {
+            var content = getContent(_this);
+            var propsData = {
+              attrs: {
+                name: _this.transition
+              },
+              on: {
+                "after-leave": _this.doDestroy
               }
-            })
-          );
+            };
+            var typeClass = "is-" + (_this.type || _this.effect || "dark");
+            var mouseenter = function mouseenter2() {
+              return _this.setExpectedState(true);
+            };
+            var mouseleave = function mouseleave2() {
+              _this.setExpectedState(false);
+              _this.debounceClose();
+            };
+            _this.$nextTick(function() {
+              if (!_this.disabled && _this.state.showPopper && content) {
+                _this.updatePopper();
+              }
+            });
+            return h("transition", propsData, [withDirectives(createVNode("div", {
+              "ref": "popper",
+              "id": _this.state.tooltipId,
+              "class": ["tiny-tooltip", "tiny-tooltip__popper", typeClass, _this.popperClass, {
+                "tiny-tooltip__show-tips": _this.state.showContent
+              }],
+              "style": "max-width:" + _this.state.tipsMaxWidth + "px",
+              "role": "tooltip",
+              "aria-hidden": _this.disabled || !_this.state.showPopper ? "true" : "false",
+              "onMouseenter": function onMouseenter() {
+                return mouseenter();
+              },
+              "onMouseleave": function onMouseleave() {
+                return mouseleave();
+              }
+            }, [content]), [[vShow, !_this.disabled && _this.state.showPopper && content]])]);
+          }
         }
-      }
-    });
+      });
+      this.d({
+        popperVM: {
+          get: function get() {
+            return popperVM;
+          },
+          set: function set(v) {
+            return popperVM = v;
+          }
+        }
+      });
+    }
     var stringifyClassObj = function stringifyClassObj2(classObj) {
@@ -261,4 +278,5 @@ return Object.keys(classObj).filter(function(key) {
         var vnode = parseVnode(slots[index]);
-        if (vnode && vnode.type) {
+        if (!isEmptyVnode(vnode)) {
           element = vnode;
+          break;
         }
@@ -269,2 +287,5 @@ }
     var firstElement = getFirstElement();
+    if (firstElement && hooks.Fragment && firstElement.type === hooks.Fragment) {
+      firstElement = firstElement.children[0];
+    }
     if (!firstElement)
@@ -271,0 +292,0 @@ return null;

package.json

 {
   "name": "@opentiny/vue-tooltip",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "",
@@ -10,4 +10,5 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-renderless": "~3.13.0",
-    "@opentiny/vue-common": "~3.13.0"
+    "@opentiny/vue-renderless": "~3.14.0",
+    "@opentiny/vue-common": "~3.14.0",
+    "@opentiny/vue-theme": "~3.14.0"
   },
@@ -14,0 +15,0 @@ "license": "MIT",

src/index.d.ts

@@ -322,5 +322,5 @@ import type { ITooltipApi } from '@opentiny/vue-renderless/types/tooltip.type';
     manual: boolean;
-    popperOptions: {};
     closeDelay: number;
     openDelay: number;
+    popperOptions: {};
     genArrowByHtml: boolean;
@@ -327,0 +327,0 @@ adjustArrow: boolean;

src/pc.vue.d.ts

@@ -0,3 +1,4 @@
+import { hooks } from '@opentiny/vue-common';
 import type { ITooltipApi } from '@opentiny/vue-renderless/types/tooltip.type';
-declare const _default: import("@vue/runtime-core").DefineComponent<{
+declare const _default: hooks.DefineComponent<{
     visible: {
@@ -100,3 +101,9 @@ type: StringConstructor;
     };
-}, ITooltipApi, 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<{
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}, ITooltipApi, unknown, {}, {}, hooks.ComponentOptionsMixin, hooks.ComponentOptionsMixin, {}, string, hooks.VNodeProps & hooks.AllowedComponentProps & hooks.ComponentCustomProps, Readonly<hooks.ExtractPropTypes<{
     visible: {
@@ -199,2 +206,8 @@ type: StringConstructor;
     };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
 }>>, {
@@ -204,2 +217,3 @@ pre: boolean;
     disabled: boolean;
+    tiny_mode_root: boolean;
     effect: string;
@@ -216,2 +230,5 @@ modelValue: boolean;
     manual: boolean;
+    boundariesPadding: number;
+    closeDelay: number;
+    openDelay: number;
     popperOptions: {
@@ -221,5 +238,2 @@ gpuAcceleration: boolean;
     };
-    boundariesPadding: number;
-    closeDelay: number;
-    openDelay: number;
     adjustArrow: boolean;
@@ -226,0 +240,0 @@ enterable: boolean;

src/token.d.ts

 export declare const classes: {
     tooltip: string;
+    'tooltip-sm': string;
     arrow: string;
@@ -8,2 +9,6 @@ 'placement-top': string;
     'placement-left': string;
+    'placement-top-sm': string;
+    'placement-bottom-sm': string;
+    'placement-right-sm': string;
+    'placement-left-sm': string;
     'placement-top-light': string;
@@ -17,2 +22,24 @@ 'placement-bottom-light': string;
     'placement-right-dark': string;
+    'effect-dark': string;
+    'effect-light': string;
+    'is-warning': string;
+    'is-error': string;
+    'is-info': string;
+    'is-success': string;
+    'arrow-top-warning': string;
+    'arrow-bottom-warning': string;
+    'arrow-left-warning': string;
+    'arrow-right-warning': string;
+    'arrow-top-error': string;
+    'arrow-bottom-error': string;
+    'arrow-left-error': string;
+    'arrow-right-error': string;
+    'arrow-top-info': string;
+    'arrow-bottom-info': string;
+    'arrow-left-info': string;
+    'arrow-right-info': string;
+    'arrow-top-success': string;
+    'arrow-bottom-success': string;
+    'arrow-left-success': string;
+    'arrow-right-success': string;
 };

No alert changes

Improved metrics

Total package byte prevSize

42470

increased by10.15%

Lines of code

1453

increased by6.68%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Added@opentiny/vue-theme@~3.14.0

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

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

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

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

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

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

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

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

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

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

• Updated@opentiny/vue-common@~3.14.0

• Updated@opentiny/vue-renderless@~3.14.0