neko-ui 1.5.1 → 1.5.2

package/es/tooltip/index.js

@@ -1 +1 @@
-function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target=_object_without_properties_loose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{getMaxZindex,isString,colorParse}from"@moneko/common";import{cls}from"./style";import{cx}from"../emotion";import Portal from"../portal";const Tooltip=_param=>{var{className,popupClassName,popupStyle,getPopupContainer,title,children,color,trigger="click",open=null,destroyInactive=true,onOpenChange}=_param,props=_object_without_properties(_param,["className","popupClassName","popupStyle","getPopupContainer","title","children","color","trigger","open","destroyInactive","onOpenChange"]);const ref=useRef(null);const childRef=useRef(null);const[show,setShow]=useState(null);const[posi,setPosi]=useState({left:-9999,top:-9999});useEffect(()=>{onOpenChange===null||onOpenChange===void 0?void 0:onOpenChange(show)},[onOpenChange,show]);useEffect(()=>{setShow(open)},[open]);useEffect(()=>{if(show&&ref.current){ref.current.style.zIndex=getMaxZindex().toString()}},[show]);const exit=useCallback(()=>{if(show===false){setShow(null)}},[show]);const close=useCallback(e=>{var _ref_current;e.preventDefault();e.stopPropagation();if(show&&!((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))){setShow(false)}},[show]);useEffect(()=>{if(!show||!ref.current||!childRef.current)return;const elRect=childRef.current.getBoundingClientRect();const portalRectHeight=ref.current.getBoundingClientRect();if(elRect&&portalRectHeight){const offsetY=ref.current.offsetHeight+elRect.height/2;const offsetX=ref.current.offsetWidth/2-elRect.width/2;setPosi({left:elRect.left-offsetX,top:elRect.top-offsetY})}},[show]);const container=useMemo(()=>{return(getPopupContainer===null||getPopupContainer===void 0?void 0:getPopupContainer(childRef.current))||document.body},[getPopupContainer]);const childrenProps=useMemo(()=>{const _props=_object_spread({},props);const openEvent={click:"onClick",hover:"onMouseOver",contextMenu:"onContextMenu"};const closeEvent={hover:"onMouseOut",click:null,contextMenu:null};const triggers=isString(trigger)?[trigger]:trigger;for(let i=0,len=triggers.length;i<len;i++){const openFn=openEvent[triggers[i]];const closeFn=closeEvent[triggers[i]];Object.assign(_props,openFn&&{[openFn]:e=>{e.preventDefault();e.stopPropagation();setShow(true)}},closeFn&&{[closeFn]:close})}return _props},[close,props,trigger]);useEffect(()=>{document.body.addEventListener("click",close,false);return()=>{document.body.removeEventListener("click",close,false)}},[close]);const style=useMemo(()=>{let shadowColor;if(color){shadowColor=colorParse(color).setAlpha(.1).toRgbaString()}return Object.assign(_object_spread_props(_object_spread({},popupStyle),{left:Math.abs(posi.left),top:posi.top,"--x":-(Math.abs(posi.left)-posi.left)+"px"}),color&&{"--tooltip-bg":color,"--tooltip-shadow-color":shadowColor})},[color,popupStyle,posi.left,posi.top]);return React.createElement(React.Fragment,null,(show!==null||!destroyInactive)&&React.createElement(Portal,{container:container},React.createElement("div",{ref:ref,onAnimationEnd:exit,className:cx(cls.portal,show?cls.inUp:cls.outUp,popupClassName),style:style},title)),React.createElement("span",_object_spread_props(_object_spread({},childrenProps),{className:cx(cls.tooltip,className),ref:childRef}),children))};export default Tooltip;
+function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target=_object_without_properties_loose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}import React,{useEffect,useMemo,useRef}from"react";import{getMaxZindex,isString,colorParse,isFunction,passiveSupported}from"@moneko/common";import sso from"shared-store-object";import{cls}from"./style";import{cx}from"../emotion";import Portal from"../portal";const Tooltip=_param=>{var{className,popupClassName,popupStyle,getPopupContainer,title,children,color,trigger="click",open=null,destroyInactive=true,onOpenChange}=_param,props=_object_without_properties(_param,["className","popupClassName","popupStyle","getPopupContainer","title","children","color","trigger","open","destroyInactive","onOpenChange"]);const ref=useRef(null);const childRef=useRef(null);const state=useRef(sso({show:null,up:false,posi:{left:-9999,top:-9999,x:"0px"},exit(){if(state.current.show===false){state.current.show=null}},close(e){var _ref_current;e.preventDefault();e.stopPropagation();if(state.current.show&&!((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))){state.current.show=false}},open(e){e.preventDefault();e.stopPropagation();state.current.show=true}}));const{show,posi,up}=state.current;useEffect(()=>{state.current.show=open},[open]);useEffect(()=>{if(isFunction(onOpenChange)){onOpenChange(show)}if(show&&ref.current){ref.current.style.zIndex=getMaxZindex().toString()}},[onOpenChange,show]);const container=useMemo(()=>{if(isFunction(getPopupContainer)){return getPopupContainer(childRef.current)}return document.body},[getPopupContainer]);useEffect(()=>{if(!show||!ref.current||!childRef.current)return;const elRect=childRef.current.getBoundingClientRect();const portalRect=ref.current.getBoundingClientRect();if(elRect&&portalRect){const portalRectHeight=ref.current.offsetHeight;const offsetY=portalRectHeight+elRect.height/2;const offsetX=portalRect.width/2-elRect.width/2;const margin=window.innerHeight-elRect.bottom;const _isBottom=margin>portalRectHeight*.8&&margin>elRect.top;const _posi={left:Math.abs(offsetX>elRect.left?elRect.left:elRect.left-offsetX),top:_isBottom?elRect.bottom+8:elRect.top-offsetY,x:"0px"};_posi.x=-(_posi.left-elRect.left+offsetX)+"px";state.current.posi=_posi;state.current.up=!_isBottom}},[show]);const childrenProps=useMemo(()=>{const _props=_object_spread({},props);const openEvent={click:"onClick",hover:"onMouseOver",contextMenu:"onContextMenu"};const closeEvent={hover:"onMouseOut",click:null,contextMenu:null};const triggers=isString(trigger)?[trigger]:trigger;for(let i=0,len=triggers.length;i<len;i++){const openFn=openEvent[triggers[i]];const closeFn=closeEvent[triggers[i]];Object.assign(_props,openFn&&{[openFn]:state.current.open},closeFn&&{[closeFn]:state.current.close})}return _props},[props,trigger]);const style=useMemo(()=>{let shadowColor;if(color){shadowColor=colorParse(color).setAlpha(.1).toRgbaString()}return Object.assign(_object_spread_props(_object_spread({},popupStyle),{left:posi.left,top:posi.top,"--x":posi.x}),color&&{"--tooltip-bg":color,"--tooltip-shadow-color":shadowColor})},[color,popupStyle,posi.left,posi.top,posi.x]);useEffect(()=>{const _state=state.current;window.addEventListener("click",_state.close,false);window.addEventListener("scroll",_state.close,passiveSupported);return()=>{window.removeEventListener("click",_state.close,false);window.removeEventListener("scroll",_state.close,passiveSupported);_state()}},[]);return React.createElement(React.Fragment,null,(show!==null||!destroyInactive)&&React.createElement(Portal,{container:container},React.createElement("div",{ref:ref,onAnimationEnd:state.current.exit,className:cx(cls.portal,show?up?cls.inUp:cls.inDown:up?cls.outUp:cls.outDown,popupClassName),style:style},title)),React.createElement("span",_object_spread_props(_object_spread({},childrenProps),{className:cx(cls.tooltip,className),ref:childRef}),children))};export default Tooltip;

package/es/tooltip/style.d.ts

@@ -3,4 +3,6 @@ export declare const cls: {
     portal: "n-tooltip-portal";
     inUp: "n-tooltip-in-up";
     outUp: "n-tooltip-out-up";
+    inDown: "n-tooltip-in-down";
+    outDown: "n-tooltip-out-down";
 };

package/es/tooltip/style.js

@@ -1,7 +1,7 @@
-import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export const cls={tooltip:prefixCls("tooltip"),portal:prefixCls("tooltip-portal"),inUp:prefixCls("tooltip-in-up"),outUp:prefixCls("tooltip-out-up")};injectGlobal`
+import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export const cls={tooltip:prefixCls("tooltip"),portal:prefixCls("tooltip-portal"),inUp:prefixCls("tooltip-in-up"),outUp:prefixCls("tooltip-out-up"),inDown:prefixCls("tooltip-in-down"),outDown:prefixCls("tooltip-out-down")};injectGlobal`
   :root {
     --tooltip-bg: var(--component-bg);
-    --tooltip-shadow-color: rgb(0 0 0 / 10%);
+    --tooltip-shadow-color: rgb(0 0 0 / 5%);
   }
 
   [data-theme='dark'] {
@@ -28,7 +28,9 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
       drop-shadow(1px 2px 8px var(--tooltip-shadow-color))
       drop-shadow(2px 4px 16px var(--tooltip-shadow-color));
     backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    box-sizing: border-box;
+
     &::before {
       position: absolute;
       inset-inline-end: 0;
@@ -43,16 +45,66 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
       transform: translate3d(var(--x, 0), 100%, 0);
     }
   }
+
   .${cls.inUp} {
-    animation: tooltip-slide-down-in-effect 0.3s forwards;
+    animation: tooltip-up-in-effect 0.3s forwards;
     transform: scaleY(1);
   }
   .${cls.outUp} {
-    animation: tooltip-slide-down-out-effect 0.3s forwards;
+    animation: tooltip-up-out-effect 0.3s forwards;
+    transform: scaleY(1);
+  }
+
+  .${cls.inDown} {
+    animation: tooltip-down-in-effect 0.3s forwards;
+    transform: scaleY(1);
+
+    &::before {
+      inset-block-end: unset;
+      inset-block-start: 0;
+      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);
+    }
+  }
+  .${cls.outDown} {
+    animation: tooltip-down-out-effect 0.3s forwards;
     transform: scaleY(1);
+
+    &::before {
+      inset-block-end: unset;
+      inset-block-start: 0;
+      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);
+    }
+  }
+
+  @keyframes tooltip-down-in-effect {
+    0% {
+      transform: scaleY(0.8);
+      transform-origin: 0% 0%;
+      opacity: 0;
+    }
+
+    100% {
+      transform: scaleY(1);
+      transform-origin: 0% 0%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes tooltip-down-out-effect {
+    0% {
+      transform: scaleY(1);
+      transform-origin: 0% 0%;
+      opacity: 1;
+    }
+
+    100% {
+      transform: scaleY(0.8);
+      transform-origin: 0% 0%;
+      opacity: 0;
+    }
   }
 
-  @keyframes tooltip-slide-down-in-effect {
+  @keyframes tooltip-up-in-effect {
     0% {
       transform: scaleY(0.8);
       transform-origin: 100% 100%;
@@ -66,7 +118,7 @@ import{injectGlobal}from"../emotion";import prefixCls from"../prefix-cls";export
     }
   }
 
-  @keyframes tooltip-slide-down-out-effect {
+  @keyframes tooltip-up-out-effect {
     0% {
       transform: scaleY(1);
       transform-origin: 100% 100%;

package/lib/tooltip/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return _default}});var _react=_interop_require_wildcard(require("react"));var _common=require("@moneko/common");var _style=require("./style");var _emotion=require("../emotion");var _portal=_interop_require_default(require("../portal"));function _array_like_to_array(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}function _array_with_holes(arr){if(Array.isArray(arr))return arr}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interop_require_wildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}function _iterable_to_array_limit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e}}return _arr}function _non_iterable_rest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target=_object_without_properties_loose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}function _sliced_to_array(arr,i){return _array_with_holes(arr)||_iterable_to_array_limit(arr,i)||_unsupported_iterable_to_array(arr,i)||_non_iterable_rest()}function _unsupported_iterable_to_array(o,minLen){if(!o)return;if(typeof o==="string")return _array_like_to_array(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(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _array_like_to_array(o,minLen)}var Tooltip=function(_param){var className=_param.className,popupClassName=_param.popupClassName,popupStyle=_param.popupStyle,getPopupContainer=_param.getPopupContainer,title=_param.title,children=_param.children,color=_param.color,_param_trigger=_param.trigger,trigger=_param_trigger===void 0?"click":_param_trigger,_param_open=_param.open,open=_param_open===void 0?null:_param_open,_param_destroyInactive=_param.destroyInactive,destroyInactive=_param_destroyInactive===void 0?true:_param_destroyInactive,onOpenChange=_param.onOpenChange,props=_object_without_properties(_param,["className","popupClassName","popupStyle","getPopupContainer","title","children","color","trigger","open","destroyInactive","onOpenChange"]);var ref=(0,_react.useRef)(null);var childRef=(0,_react.useRef)(null);var _useState=_sliced_to_array((0,_react.useState)(null),2),show=_useState[0],setShow=_useState[1];var _useState1=_sliced_to_array((0,_react.useState)({left:-9999,top:-9999}),2),posi=_useState1[0],setPosi=_useState1[1];(0,_react.useEffect)(function(){onOpenChange===null||onOpenChange===void 0?void 0:onOpenChange(show)},[onOpenChange,show]);(0,_react.useEffect)(function(){setShow(open)},[open]);(0,_react.useEffect)(function(){if(show&&ref.current){ref.current.style.zIndex=(0,_common.getMaxZindex)().toString()}},[show]);var exit=(0,_react.useCallback)(function(){if(show===false){setShow(null)}},[show]);var close=(0,_react.useCallback)(function(e){var _ref_current;e.preventDefault();e.stopPropagation();if(show&&!((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))){setShow(false)}},[show]);(0,_react.useEffect)(function(){if(!show||!ref.current||!childRef.current)return;var elRect=childRef.current.getBoundingClientRect();var portalRectHeight=ref.current.getBoundingClientRect();if(elRect&&portalRectHeight){var offsetY=ref.current.offsetHeight+elRect.height/2;var offsetX=ref.current.offsetWidth/2-elRect.width/2;setPosi({left:elRect.left-offsetX,top:elRect.top-offsetY})}},[show]);var container=(0,_react.useMemo)(function(){return(getPopupContainer===null||getPopupContainer===void 0?void 0:getPopupContainer(childRef.current))||document.body},[getPopupContainer]);var childrenProps=(0,_react.useMemo)(function(){var _props=_object_spread({},props);var openEvent={click:"onClick",hover:"onMouseOver",contextMenu:"onContextMenu"};var closeEvent={hover:"onMouseOut",click:null,contextMenu:null};var triggers=(0,_common.isString)(trigger)?[trigger]:trigger;for(var i=0,len=triggers.length;i<len;i++){var openFn=openEvent[triggers[i]];var closeFn=closeEvent[triggers[i]];Object.assign(_props,openFn&&_define_property({},openFn,function(e){e.preventDefault();e.stopPropagation();setShow(true)}),closeFn&&_define_property({},closeFn,close))}return _props},[close,props,trigger]);(0,_react.useEffect)(function(){document.body.addEventListener("click",close,false);return function(){document.body.removeEventListener("click",close,false)}},[close]);var style=(0,_react.useMemo)(function(){var shadowColor;if(color){shadowColor=(0,_common.colorParse)(color).setAlpha(.1).toRgbaString()}return Object.assign(_object_spread_props(_object_spread({},popupStyle),{left:Math.abs(posi.left),top:posi.top,"--x":-(Math.abs(posi.left)-posi.left)+"px"}),color&&{"--tooltip-bg":color,"--tooltip-shadow-color":shadowColor})},[color,popupStyle,posi.left,posi.top]);return _react.default.createElement(_react.default.Fragment,null,(show!==null||!destroyInactive)&&_react.default.createElement(_portal.default,{container:container},_react.default.createElement("div",{ref:ref,onAnimationEnd:exit,className:(0,_emotion.cx)(_style.cls.portal,show?_style.cls.inUp:_style.cls.outUp,popupClassName),style:style},title)),_react.default.createElement("span",_object_spread_props(_object_spread({},childrenProps),{className:(0,_emotion.cx)(_style.cls.tooltip,className),ref:childRef}),children))};var _default=Tooltip;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"default",{enumerable:true,get:function(){return _default}});var _react=_interop_require_wildcard(require("react"));var _common=require("@moneko/common");var _sharedstoreobject=_interop_require_default(require("shared-store-object"));var _style=require("./style");var _emotion=require("../emotion");var _portal=_interop_require_default(require("../portal"));function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap;var cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interop_require_wildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj}}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj)}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc)}else{newObj[key]=obj[key]}}}newObj.default=obj;if(cache){cache.set(obj,newObj)}return newObj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}function _object_without_properties(source,excluded){if(source==null)return{};var target=_object_without_properties_loose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _object_without_properties_loose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}var Tooltip=function(_param){var className=_param.className,popupClassName=_param.popupClassName,popupStyle=_param.popupStyle,getPopupContainer=_param.getPopupContainer,title=_param.title,children=_param.children,color=_param.color,_param_trigger=_param.trigger,trigger=_param_trigger===void 0?"click":_param_trigger,_param_open=_param.open,open=_param_open===void 0?null:_param_open,_param_destroyInactive=_param.destroyInactive,destroyInactive=_param_destroyInactive===void 0?true:_param_destroyInactive,onOpenChange=_param.onOpenChange,props=_object_without_properties(_param,["className","popupClassName","popupStyle","getPopupContainer","title","children","color","trigger","open","destroyInactive","onOpenChange"]);var ref=(0,_react.useRef)(null);var childRef=(0,_react.useRef)(null);var state=(0,_react.useRef)((0,_sharedstoreobject.default)({show:null,up:false,posi:{left:-9999,top:-9999,x:"0px"},exit:function exit(){if(state.current.show===false){state.current.show=null}},close:function close(e){var _ref_current;e.preventDefault();e.stopPropagation();if(state.current.show&&!((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))){state.current.show=false}},open:function open(e){e.preventDefault();e.stopPropagation();state.current.show=true}}));var _state_current=state.current,show=_state_current.show,posi=_state_current.posi,up=_state_current.up;(0,_react.useEffect)(function(){state.current.show=open},[open]);(0,_react.useEffect)(function(){if((0,_common.isFunction)(onOpenChange)){onOpenChange(show)}if(show&&ref.current){ref.current.style.zIndex=(0,_common.getMaxZindex)().toString()}},[onOpenChange,show]);var container=(0,_react.useMemo)(function(){if((0,_common.isFunction)(getPopupContainer)){return getPopupContainer(childRef.current)}return document.body},[getPopupContainer]);(0,_react.useEffect)(function(){if(!show||!ref.current||!childRef.current)return;var elRect=childRef.current.getBoundingClientRect();var portalRect=ref.current.getBoundingClientRect();if(elRect&&portalRect){var portalRectHeight=ref.current.offsetHeight;var offsetY=portalRectHeight+elRect.height/2;var offsetX=portalRect.width/2-elRect.width/2;var margin=window.innerHeight-elRect.bottom;var _isBottom=margin>portalRectHeight*.8&&margin>elRect.top;var _posi={left:Math.abs(offsetX>elRect.left?elRect.left:elRect.left-offsetX),top:_isBottom?elRect.bottom+8:elRect.top-offsetY,x:"0px"};_posi.x=-(_posi.left-elRect.left+offsetX)+"px";state.current.posi=_posi;state.current.up=!_isBottom}},[show]);var childrenProps=(0,_react.useMemo)(function(){var _props=_object_spread({},props);var openEvent={click:"onClick",hover:"onMouseOver",contextMenu:"onContextMenu"};var closeEvent={hover:"onMouseOut",click:null,contextMenu:null};var triggers=(0,_common.isString)(trigger)?[trigger]:trigger;for(var i=0,len=triggers.length;i<len;i++){var openFn=openEvent[triggers[i]];var closeFn=closeEvent[triggers[i]];Object.assign(_props,openFn&&_define_property({},openFn,state.current.open),closeFn&&_define_property({},closeFn,state.current.close))}return _props},[props,trigger]);var style=(0,_react.useMemo)(function(){var shadowColor;if(color){shadowColor=(0,_common.colorParse)(color).setAlpha(.1).toRgbaString()}return Object.assign(_object_spread_props(_object_spread({},popupStyle),{left:posi.left,top:posi.top,"--x":posi.x}),color&&{"--tooltip-bg":color,"--tooltip-shadow-color":shadowColor})},[color,popupStyle,posi.left,posi.top,posi.x]);(0,_react.useEffect)(function(){var _state=state.current;window.addEventListener("click",_state.close,false);window.addEventListener("scroll",_state.close,_common.passiveSupported);return function(){window.removeEventListener("click",_state.close,false);window.removeEventListener("scroll",_state.close,_common.passiveSupported);_state()}},[]);return _react.default.createElement(_react.default.Fragment,null,(show!==null||!destroyInactive)&&_react.default.createElement(_portal.default,{container:container},_react.default.createElement("div",{ref:ref,onAnimationEnd:state.current.exit,className:(0,_emotion.cx)(_style.cls.portal,show?up?_style.cls.inUp:_style.cls.inDown:up?_style.cls.outUp:_style.cls.outDown,popupClassName),style:style},title)),_react.default.createElement("span",_object_spread_props(_object_spread({},childrenProps),{className:(0,_emotion.cx)(_style.cls.tooltip,className),ref:childRef}),children))};var _default=Tooltip;

package/lib/tooltip/style.d.ts

@@ -3,4 +3,6 @@ export declare const cls: {
     portal: "n-tooltip-portal";
     inUp: "n-tooltip-in-up";
     outUp: "n-tooltip-out-up";
+    inDown: "n-tooltip-in-down";
+    outDown: "n-tooltip-out-down";
 };

package/lib/tooltip/style.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"cls",{enumerable:true,get:function(){return cls}});var _emotion=require("../emotion");var _prefixcls=_interop_require_default(require("../prefix-cls"));function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _tagged_template_literal(strings,raw){if(!raw){raw=strings.slice(0)}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}function _templateObject(){var data=_tagged_template_literal(["\n  :root {\n    --tooltip-bg: var(--component-bg);\n    --tooltip-shadow-color: rgb(0 0 0 / 10%);\n  }\n\n  [data-theme='dark'] {\n    --tooltip-shadow-color: rgb(255 255 255 / 5%);\n  }\n\n  ."," {\n    position: relative;\n    display: inline-block;\n\n    &::-webkit-scrollbar {\n      inline-size: 1px;\n    }\n  }\n  ."," {\n    position: fixed;\n    display: inline-block;\n    border-radius: var(--border-radius);\n    padding: 4px 8px;\n    font-size: var(--font-size);\n    color: var(--text-color);\n    background-color: var(--tooltip-bg);\n    filter: drop-shadow(0.5px 1px 4px var(--tooltip-shadow-color))\n      drop-shadow(1px 2px 8px var(--tooltip-shadow-color))\n      drop-shadow(2px 4px 16px var(--tooltip-shadow-color));\n    backdrop-filter: blur(16px);\n    -webkit-backdrop-filter: blur(16px);\n    &::before {\n      position: absolute;\n      inset-inline-end: 0;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      margin: auto;\n      inline-size: 12px;\n      block-size: 8px;\n      background: inherit;\n      content: '';\n      clip-path: polygon(0% 0%, 50% 100%, 100% 0%);\n      transform: translate3d(var(--x, 0), 100%, 0);\n    }\n  }\n  ."," {\n    animation: tooltip-slide-down-in-effect 0.3s forwards;\n    transform: scaleY(1);\n  }\n  ."," {\n    animation: tooltip-slide-down-out-effect 0.3s forwards;\n    transform: scaleY(1);\n  }\n\n  @keyframes tooltip-slide-down-in-effect {\n    0% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n    }\n\n    100% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n    }\n  }\n\n  @keyframes tooltip-slide-down-out-effect {\n    0% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n    }\n\n    100% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n    }\n  }\n"]);_templateObject=function _templateObject(){return data};return data}var cls={tooltip:(0,_prefixcls.default)("tooltip"),portal:(0,_prefixcls.default)("tooltip-portal"),inUp:(0,_prefixcls.default)("tooltip-in-up"),outUp:(0,_prefixcls.default)("tooltip-out-up")};(0,_emotion.injectGlobal)(_templateObject(),cls.tooltip,cls.portal,cls.inUp,cls.outUp);
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"cls",{enumerable:true,get:function(){return cls}});var _emotion=require("../emotion");var _prefixcls=_interop_require_default(require("../prefix-cls"));function _interop_require_default(obj){return obj&&obj.__esModule?obj:{default:obj}}function _tagged_template_literal(strings,raw){if(!raw){raw=strings.slice(0)}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}function _templateObject(){var data=_tagged_template_literal(["\n  :root {\n    --tooltip-bg: var(--component-bg);\n    --tooltip-shadow-color: rgb(0 0 0 / 5%);\n  }\n\n  [data-theme='dark'] {\n    --tooltip-shadow-color: rgb(255 255 255 / 5%);\n  }\n\n  ."," {\n    position: relative;\n    display: inline-block;\n\n    &::-webkit-scrollbar {\n      inline-size: 1px;\n    }\n  }\n  ."," {\n    position: fixed;\n    display: inline-block;\n    border-radius: var(--border-radius);\n    padding: 4px 8px;\n    font-size: var(--font-size);\n    color: var(--text-color);\n    background-color: var(--tooltip-bg);\n    filter: drop-shadow(0.5px 1px 4px var(--tooltip-shadow-color))\n      drop-shadow(1px 2px 8px var(--tooltip-shadow-color))\n      drop-shadow(2px 4px 16px var(--tooltip-shadow-color));\n    backdrop-filter: blur(16px);\n    backdrop-filter: blur(16px);\n    box-sizing: border-box;\n\n    &::before {\n      position: absolute;\n      inset-inline-end: 0;\n      inset-block-end: 0;\n      inset-inline-start: 0;\n      margin: auto;\n      inline-size: 12px;\n      block-size: 8px;\n      background: inherit;\n      content: '';\n      clip-path: polygon(0% 0%, 50% 100%, 100% 0%);\n      transform: translate3d(var(--x, 0), 100%, 0);\n    }\n  }\n\n  ."," {\n    animation: tooltip-up-in-effect 0.3s forwards;\n    transform: scaleY(1);\n  }\n  ."," {\n    animation: tooltip-up-out-effect 0.3s forwards;\n    transform: scaleY(1);\n  }\n\n  ."," {\n    animation: tooltip-down-in-effect 0.3s forwards;\n    transform: scaleY(1);\n\n    &::before {\n      inset-block-end: unset;\n      inset-block-start: 0;\n      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n    }\n  }\n  ."," {\n    animation: tooltip-down-out-effect 0.3s forwards;\n    transform: scaleY(1);\n\n    &::before {\n      inset-block-end: unset;\n      inset-block-start: 0;\n      transform: translate3d(var(--x, 0), -100%, 0) rotate(180deg);\n    }\n  }\n\n  @keyframes tooltip-down-in-effect {\n    0% {\n      transform: scaleY(0.8);\n      transform-origin: 0% 0%;\n      opacity: 0;\n    }\n\n    100% {\n      transform: scaleY(1);\n      transform-origin: 0% 0%;\n      opacity: 1;\n    }\n  }\n\n  @keyframes tooltip-down-out-effect {\n    0% {\n      transform: scaleY(1);\n      transform-origin: 0% 0%;\n      opacity: 1;\n    }\n\n    100% {\n      transform: scaleY(0.8);\n      transform-origin: 0% 0%;\n      opacity: 0;\n    }\n  }\n\n  @keyframes tooltip-up-in-effect {\n    0% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n    }\n\n    100% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n    }\n  }\n\n  @keyframes tooltip-up-out-effect {\n    0% {\n      transform: scaleY(1);\n      transform-origin: 100% 100%;\n      opacity: 1;\n    }\n\n    100% {\n      transform: scaleY(0.8);\n      transform-origin: 100% 100%;\n      opacity: 0;\n    }\n  }\n"]);_templateObject=function _templateObject(){return data};return data}var cls={tooltip:(0,_prefixcls.default)("tooltip"),portal:(0,_prefixcls.default)("tooltip-portal"),inUp:(0,_prefixcls.default)("tooltip-in-up"),outUp:(0,_prefixcls.default)("tooltip-out-up"),inDown:(0,_prefixcls.default)("tooltip-in-down"),outDown:(0,_prefixcls.default)("tooltip-out-down")};(0,_emotion.injectGlobal)(_templateObject(),cls.tooltip,cls.portal,cls.inUp,cls.outUp,cls.inDown,cls.outDown);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neko-ui",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "UI库",
   "main": "lib/index.js",
   "scripts": {