@opentiny/vue-tooltip
Advanced tools
Comparing version 2.13.0 to 2.14.0
@@ -89,3 +89,3 @@ function _extends() { | ||
default: function _default8() { | ||
return "dark"; | ||
return ""; | ||
} | ||
@@ -176,3 +176,3 @@ }, | ||
}); | ||
var version = "2.13.0"; | ||
var version = "2.14.0"; | ||
Tooltip.model = { | ||
@@ -179,0 +179,0 @@ prop: "modelValue", |
@@ -16,3 +16,3 @@ function _extends() { | ||
import { renderless, api } from "@opentiny/vue-renderless/tooltip/vue"; | ||
import { defineComponent, $prefix, $props, setup as _setup, createComponent, mergeClass, parseVnode, isEmptyVnode } from "@opentiny/vue-common"; | ||
import { defineComponent, $prefix, $props, setup as _setup, createComponent, mergeClass, hooks, parseVnode, isEmptyVnode } from "@opentiny/vue-common"; | ||
function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) { | ||
@@ -73,8 +73,13 @@ var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports; | ||
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", | ||
@@ -87,3 +92,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" | ||
}; | ||
@@ -287,3 +314,3 @@ var __vue2_script = defineComponent({ | ||
}], | ||
"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]), | ||
"on": { | ||
@@ -301,3 +328,3 @@ "mouseenter": function mouseenter() { | ||
}, | ||
"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] : ""]) | ||
}) : ""])]); | ||
@@ -373,2 +400,5 @@ } | ||
var firstElement = getFirstElement(); | ||
if (firstElement && hooks.Fragment && firstElement.type === hooks.Fragment) { | ||
firstElement = firstElement.children[0]; | ||
} | ||
if (!firstElement) | ||
@@ -375,0 +405,0 @@ return null; |
151
lib/pc.js
@@ -0,3 +1,17 @@ | ||
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 { renderless, api } from "@opentiny/vue-renderless/tooltip/vue"; | ||
import { defineComponent, $prefix, setup as _setup, createComponent, parseVnode } from "@opentiny/vue-common"; | ||
import { defineComponent, $prefix, $props, setup as _setup, createComponent, hooks, parseVnode, isEmptyVnode } from "@opentiny/vue-common"; | ||
import "@opentiny/vue-theme/tooltip/index.css"; | ||
@@ -61,3 +75,3 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) { | ||
componentName: "Tooltip", | ||
props: { | ||
props: _extends({}, $props, { | ||
visible: { | ||
@@ -198,3 +212,3 @@ type: String, | ||
} | ||
}, | ||
}), | ||
setup: function setup(props, context) { | ||
@@ -213,3 +227,3 @@ return _setup({ | ||
var slotContent = vm.slots.content && vm.slots.content(); | ||
if (slotContent) { | ||
if (slotContent && (!hooks.Comment || slotContent[0].type !== hooks.Comment)) { | ||
return slotContent; | ||
@@ -227,65 +241,68 @@ } | ||
}; | ||
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 mouseenter() { | ||
return _this.setExpectedState(true); | ||
}; | ||
var _mouseleave = function mouseleave() { | ||
_this.setExpectedState(false); | ||
_this.debounceClose(); | ||
}; | ||
_this.$nextTick(function() { | ||
if (!_this.disabled && _this.state.showPopper && content) { | ||
_this.updatePopper(); | ||
} | ||
}); | ||
return h("transition", propsData, [h("div", { | ||
"ref": "popper", | ||
"attrs": { | ||
"id": _this.state.tooltipId, | ||
"role": "tooltip", | ||
"aria-hidden": _this.disabled || !_this.state.showPopper ? "true" : "false" | ||
}, | ||
"directives": [{ | ||
name: "show", | ||
value: !_this.disabled && _this.state.showPopper && content | ||
}], | ||
"class": ["tiny-tooltip", "tiny-tooltip__popper", typeClass, _this.popperClass, { | ||
"tiny-tooltip__show-tips": _this.state.showContent | ||
}], | ||
"style": "max-width:" + _this.state.tipsMaxWidth + "px", | ||
"on": { | ||
"mouseenter": function mouseenter() { | ||
return _mouseenter(); | ||
}, | ||
"mouseleave": function mouseleave() { | ||
return _mouseleave(); | ||
} | ||
} | ||
}, [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 mouseenter() { | ||
return _this.setExpectedState(true); | ||
}; | ||
var _mouseleave = function mouseleave() { | ||
_this.setExpectedState(false); | ||
_this.debounceClose(); | ||
}; | ||
_this.$nextTick(function() { | ||
if (!_this.disabled && _this.state.showPopper && content) { | ||
_this.updatePopper(); | ||
} | ||
}); | ||
return h("transition", propsData, [h("div", { | ||
"ref": "popper", | ||
"attrs": { | ||
"id": _this.state.tooltipId, | ||
"role": "tooltip", | ||
"aria-hidden": _this.disabled || !_this.state.showPopper ? "true" : "false" | ||
}, | ||
"directives": [{ | ||
name: "show", | ||
value: !_this.disabled && _this.state.showPopper && content | ||
}], | ||
"class": ["tiny-tooltip", "tiny-tooltip__popper", typeClass, _this.popperClass, { | ||
"tiny-tooltip__show-tips": _this.state.showContent | ||
}], | ||
"style": "max-width:" + _this.state.tipsMaxWidth + "px", | ||
"on": { | ||
"mouseenter": function mouseenter() { | ||
return _mouseenter(); | ||
}, | ||
"mouseleave": function mouseleave() { | ||
return _mouseleave(); | ||
} | ||
} | ||
}) | ||
); | ||
}, [content])]); | ||
} | ||
} | ||
} | ||
}); | ||
}); | ||
this.d({ | ||
popperVM: { | ||
get: function get() { | ||
return popperVM; | ||
}, | ||
set: function set(v) { | ||
return popperVM = v; | ||
} | ||
} | ||
}); | ||
} | ||
var stringifyClassObj = function stringifyClassObj2(classObj) { | ||
@@ -323,4 +340,5 @@ return Object.keys(classObj).filter(function(key) { | ||
var vnode = parseVnode(slots[index]); | ||
if (vnode && vnode.type) { | ||
if (!isEmptyVnode(vnode)) { | ||
element = vnode; | ||
break; | ||
} | ||
@@ -331,2 +349,5 @@ } | ||
var firstElement = getFirstElement(); | ||
if (firstElement && hooks.Fragment && firstElement.type === hooks.Fragment) { | ||
firstElement = firstElement.children[0]; | ||
} | ||
if (!firstElement) | ||
@@ -333,0 +354,0 @@ return null; |
{ | ||
"name": "@opentiny/vue-tooltip", | ||
"version": "2.13.0", | ||
"version": "2.14.0", | ||
"description": "", | ||
@@ -10,4 +10,5 @@ "main": "./lib/index.js", | ||
"dependencies": { | ||
"@opentiny/vue-renderless": "~3.13.0", | ||
"@opentiny/vue-common": "~2.13.0" | ||
"@opentiny/vue-renderless": "~3.14.0", | ||
"@opentiny/vue-common": "~2.14.0", | ||
"@opentiny/vue-theme": "~3.14.0" | ||
}, | ||
@@ -14,0 +15,0 @@ "license": "MIT", |
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; | ||
}; |
35654
1136
3
+ Added@opentiny/vue-theme@~3.14.0
+ Added@opentiny/vue-common@2.14.0(transitive)
+ Added@opentiny/vue-locale@2.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)
+ Added@vue/composition-api@1.7.2(transitive)
+ Addedvue@2.6.14(transitive)
- Removed@babel/parser@7.24.7(transitive)
- Removed@opentiny/vue-common@2.13.1(transitive)
- Removed@opentiny/vue-locale@2.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)
- 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.0.1(transitive)
- Removedpostcss@8.4.39(transitive)
- Removedprettier@2.8.8(transitive)
- Removedsource-map@0.6.1(transitive)
- Removedsource-map-js@1.2.0(transitive)
- Removedtslib@2.6.3(transitive)
- Removedvue@2.7.16(transitive)
Updated@opentiny/vue-common@~2.14.0