From bbbbc0c8952d2452c6b6452762377de6ad9538f1 Mon Sep 17 00:00:00 2001 From: Dmitry Luckyanenko Date: Wed, 3 Apr 2024 10:38:13 +0300 Subject: [PATCH] [2.2.3] UI update --- dist/index.d.ts | 100 ++++++++++++++-------------- dist/style.css | 2 +- dist/vue3-tooltip.es.js | 22 +++--- dist/vue3-tooltip.umd.js | 2 +- package.json | 2 +- src/assets/_variables.css | 6 +- src/components/TooltipComponent.vue | 2 +- 7 files changed, 67 insertions(+), 69 deletions(-) diff --git a/dist/index.d.ts b/dist/index.d.ts index 6edc2a2..61506db 100644 --- a/dist/index.d.ts +++ b/dist/index.d.ts @@ -5,59 +5,57 @@ import { ExtractPropTypes } from 'vue'; import { PublicProps } from 'vue'; import { Ref } from 'vue'; -declare module 'vue3-tooltip' { - const _default: { - install: (app: any) => void; - }; - export default _default; +declare const _default: { + install: (app: any) => void; +}; +export default _default; - export const install: (app: any) => void; +export declare const install: (app: any) => void; - export const TooltipComponent: DefineComponent<{ - disable: { - type: BooleanConstructor; - required: false; - default: boolean; - }; - position: { - type: () => TooltipPosition; - required: false; - default: string; - }; - clickable: { - type: BooleanConstructor; - required: false; - default: boolean; - }; - }, { - isShowTooltip: Ref; - afterEnter: (el: Element) => void; - hideTooltip: () => void; - }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly TooltipPosition; - required: false; - default: string; - }; - clickable: { - type: BooleanConstructor; - required: false; - default: boolean; - }; - }>>, { - disable: boolean; - position: TooltipPosition; - clickable: boolean; - }, {}>; +export declare const TooltipComponent: DefineComponent<{ + disable: { + type: BooleanConstructor; + required: false; + default: boolean; + }; + position: { + type: () => TooltipPosition; + required: false; + default: string; + }; + clickable: { + type: BooleanConstructor; + required: false; + default: boolean; + }; +}, { + isShowTooltip: Ref; + afterEnter: (el: Element) => void; + hideTooltip: () => void; +}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly TooltipPosition; + required: false; + default: string; + }; + clickable: { + type: BooleanConstructor; + required: false; + default: boolean; + }; +}>>, { + disable: boolean; + position: TooltipPosition; + clickable: boolean; +}, {}>; - export const TooltipDirective: Directive; +export declare const TooltipDirective: Directive; - type TooltipPosition = 'bottom' | 'top' | 'left' | 'right'; +declare type TooltipPosition = 'bottom' | 'top' | 'left' | 'right'; - export { } -} +export { } diff --git a/dist/style.css b/dist/style.css index 924bbdc..2c1689f 100644 --- a/dist/style.css +++ b/dist/style.css @@ -1 +1 @@ -.vue-tooltip[data-v-f73c658e]:after{content:"";display:none}.vue-tooltip[data-v-f73c658e]:hover{z-index:calc(var(--tooltip-c-z-index) + 1)}.vue-tooltip__pointer-event[data-v-f73c658e]{pointer-events:none}.vue-tooltip__hover-left[data-v-f73c658e]{right:var(--tooltip-c-position-x);left:auto}.left-enter-active[data-v-f73c658e],.left-leave-active[data-v-f73c658e]{transition:var(--tooltip-c-transition-duration);right:var(--tooltip-c-position-x)}.left-enter-from[data-v-f73c658e],.left-leave-to[data-v-f73c658e]{opacity:0;right:50%}.vue-tooltip__left[data-v-f73c658e]{top:50%;bottom:50%;transform:translateY(-50%)}.vue-tooltip__hover-right[data-v-f73c658e]{left:var(--tooltip-c-position-x);right:auto}.right-enter-active[data-v-f73c658e],.right-leave-active[data-v-f73c658e]{transition:var(--tooltip-c-transition-duration);left:var(--tooltip-c-position-x)}.right-enter-from[data-v-f73c658e],.right-leave-to[data-v-f73c658e]{opacity:0;left:50%}.vue-tooltip__right[data-v-f73c658e]{top:50%;bottom:50%;transform:translateY(-50%)}.vue-tooltip__hover-bottom[data-v-f73c658e]{top:var(--tooltip-c-position-y);bottom:auto}.bottom-enter-active[data-v-f73c658e],.bottom-leave-active[data-v-f73c658e]{transition:var(--tooltip-c-transition-duration);top:100%}.bottom-enter-from[data-v-f73c658e],.bottom-leave-to[data-v-f73c658e]{opacity:0;top:50%}.vue-tooltip__bottom[data-v-f73c658e]{right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__hover-top[data-v-f73c658e]{bottom:var(--tooltip-c-position-y);top:auto}.top-enter-active[data-v-f73c658e],.top-leave-active[data-v-f73c658e]{transition:var(--tooltip-c-transition-duration);bottom:100%}.top-enter-from[data-v-f73c658e],.top-leave-to[data-v-f73c658e]{opacity:0;bottom:50%}.vue-tooltip__top[data-v-f73c658e]{right:50%;left:50%;transform:translate(-50%)}.vue-tooltip{position:relative;cursor:pointer;z-index:1;height:max-content;width:max-content}.vue-tooltip__primary:after{background:var(--tooltip-primary-background);color:var(--tooltip-primary-color)}.vue-tooltip__secondary:after{background:var(--tooltip-seconary-background);color:var(--tooltip-seconary-color)}.vue-tooltip__accent:after{background:var(--tooltip-accent-background);color:var(--tooltip-accent-color)}.vue-tooltip:after{content:attr(data-tooltip);font-size:var(--tooltip-d-font-size);width:var(--tooltip-d-width);max-width:var(--tooltip-d-max-width);height:var(--tooltip-d-height);z-index:var(--tooltip-d-z-index);padding:var(--tooltip-d-padding);border-radius:var(--tooltip-d-border-radius);box-shadow:var(--tooltip-d-box-shadow);transition:var(--tooltip-d-transition-duration);border:var(--tooltip-d-border);outline:var(--tooltip-d-outline);position:absolute;pointer-events:none;opacity:0}.vue-tooltip:hover{z-index:calc(var(--tooltip-d-z-index) + 1)}.vue-tooltip:hover:after{opacity:1}.vue-tooltip__bottom:after{top:50%;bottom:auto;right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__bottom:hover:after{top:var(--tooltip-d-position-y)}.vue-tooltip__top:after{top:auto;bottom:50%;right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__top:hover:after{bottom:var(--tooltip-d-position-y)}.vue-tooltip__right:after{top:50%;bottom:50%;left:14px;right:auto;transform:translateY(-50%)}.vue-tooltip__right:hover:after{left:var(--tooltip-d-position-x)}.vue-tooltip__left:after{top:50%;bottom:50%;right:14px;left:auto;transform:translateY(-50%)}.vue-tooltip__left:hover:after{right:var(--tooltip-d-position-x)}.vue-tooltip--component{z-index:var(--tooltip-c-z-index);background:var(--tooltip-component-background);color:var(--tooltip-component-color);border-radius:var(--tooltip-c-border-radius);box-shadow:var(--tooltip-c-box-shadow);padding:var(--tooltip-c-padding);max-width:var(--tooltip-c-max-width);width:var(--tooltip-c-width);height:var(--tooltip-c-height);border:var(--tooltip-c-border);outline:var(--tooltip-c-outline);position:absolute}.vue-tooltip.disable{opacity:.5;cursor:not-allowed}:root{--tooltip-d-transition-duration: .4s;--tooltip-d-border-radius: 4px;--tooltip-d-padding: 2px 4px;--tooltip-d-position-x: calc(100% + 10px) ;--tooltip-d-position-y: calc(100% + 2px) ;--tooltip-d-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, .14), 0px .6px 1.8px 0px rgba(0, 0, 0, .1), 0px -1.5px 6px 0px rgba(0, 0, 0, .06);--tooltip-d-z-index: 10;--tooltip-d-max-width: 200px;--tooltip-d-font-size: 14px;--tooltip-d-width: max-content;--tooltip-d-height: max-content;--tooltip-d-outline: none;--tooltip-d-border: none;--tooltip-c-transition-duration: .4s;--tooltip-c-border-radius: 4px;--tooltip-c-padding: 2px 4px;--tooltip-c-position-x: calc(100% + 10px) ;--tooltip-c-position-y: 100%;--tooltip-c-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, .14), 0px .6px 1.8px 0px rgba(0, 0, 0, .1), 0px -1.5px 6px 0px rgba(0, 0, 0, .06);--tooltip-c-z-index: 10;--tooltip-c-max-width: max-content;--tooltip-c-width: max-content;--tooltip-c-height: max-content;--tooltip-c-outline: none;--tooltip-c-border: none;--tooltip-primary-color: #212121;--tooltip-primary-background: #fff;--tooltip-seconary-color: #fff;--tooltip-seconary-background: #475DEB;--tooltip-accent-color: #fff;--tooltip-accent-background: #212121;--tooltip-component-color: #212121;--tooltip-component-background: #fff} +.vue-tooltip[data-v-f8a3696a]:after{content:"";display:none}.vue-tooltip[data-v-f8a3696a]:hover{z-index:calc(var(--tooltip-c-z-index) + 1)}.vue-tooltip__pointer-event[data-v-f8a3696a]{pointer-events:none}.vue-tooltip__hover-left[data-v-f8a3696a]{right:var(--tooltip-c-position-x);left:auto}.left-enter-active[data-v-f8a3696a],.left-leave-active[data-v-f8a3696a]{transition:var(--tooltip-c-transition-duration);right:var(--tooltip-c-position-x)}.left-enter-from[data-v-f8a3696a],.left-leave-to[data-v-f8a3696a]{opacity:0;right:50%}.vue-tooltip__left[data-v-f8a3696a]{top:50%;bottom:50%;transform:translateY(-50%)}.vue-tooltip__hover-right[data-v-f8a3696a]{left:var(--tooltip-c-position-x);right:auto}.right-enter-active[data-v-f8a3696a],.right-leave-active[data-v-f8a3696a]{transition:var(--tooltip-c-transition-duration);left:var(--tooltip-c-position-x)}.right-enter-from[data-v-f8a3696a],.right-leave-to[data-v-f8a3696a]{opacity:0;left:50%}.vue-tooltip__right[data-v-f8a3696a]{top:50%;bottom:50%;transform:translateY(-50%)}.vue-tooltip__hover-bottom[data-v-f8a3696a]{top:var(--tooltip-c-position-y);bottom:auto}.bottom-enter-active[data-v-f8a3696a],.bottom-leave-active[data-v-f8a3696a]{transition:var(--tooltip-c-transition-duration);top:calc(100% + 5px)}.bottom-enter-from[data-v-f8a3696a],.bottom-leave-to[data-v-f8a3696a]{opacity:0;top:50%}.vue-tooltip__bottom[data-v-f8a3696a]{right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__hover-top[data-v-f8a3696a]{bottom:var(--tooltip-c-position-y);top:auto}.top-enter-active[data-v-f8a3696a],.top-leave-active[data-v-f8a3696a]{transition:var(--tooltip-c-transition-duration);bottom:100%}.top-enter-from[data-v-f8a3696a],.top-leave-to[data-v-f8a3696a]{opacity:0;bottom:50%}.vue-tooltip__top[data-v-f8a3696a]{right:50%;left:50%;transform:translate(-50%)}.vue-tooltip{position:relative;cursor:pointer;z-index:1;height:max-content;width:max-content}.vue-tooltip__primary:after{background:var(--tooltip-primary-background);color:var(--tooltip-primary-color)}.vue-tooltip__secondary:after{background:var(--tooltip-seconary-background);color:var(--tooltip-seconary-color)}.vue-tooltip__accent:after{background:var(--tooltip-accent-background);color:var(--tooltip-accent-color)}.vue-tooltip:after{content:attr(data-tooltip);font-size:var(--tooltip-d-font-size);width:var(--tooltip-d-width);max-width:var(--tooltip-d-max-width);height:var(--tooltip-d-height);z-index:var(--tooltip-d-z-index);padding:var(--tooltip-d-padding);border-radius:var(--tooltip-d-border-radius);box-shadow:var(--tooltip-d-box-shadow);transition:var(--tooltip-d-transition-duration);border:var(--tooltip-d-border);outline:var(--tooltip-d-outline);position:absolute;pointer-events:none;opacity:0}.vue-tooltip:hover{z-index:calc(var(--tooltip-d-z-index) + 1)}.vue-tooltip:hover:after{opacity:1}.vue-tooltip__bottom:after{top:50%;bottom:auto;right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__bottom:hover:after{top:var(--tooltip-d-position-y)}.vue-tooltip__top:after{top:auto;bottom:50%;right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__top:hover:after{bottom:var(--tooltip-d-position-y)}.vue-tooltip__right:after{top:50%;bottom:50%;left:14px;right:auto;transform:translateY(-50%)}.vue-tooltip__right:hover:after{left:var(--tooltip-d-position-x)}.vue-tooltip__left:after{top:50%;bottom:50%;right:14px;left:auto;transform:translateY(-50%)}.vue-tooltip__left:hover:after{right:var(--tooltip-d-position-x)}.vue-tooltip--component{z-index:var(--tooltip-c-z-index);background:var(--tooltip-component-background);color:var(--tooltip-component-color);border-radius:var(--tooltip-c-border-radius);box-shadow:var(--tooltip-c-box-shadow);padding:var(--tooltip-c-padding);max-width:var(--tooltip-c-max-width);width:var(--tooltip-c-width);height:var(--tooltip-c-height);border:var(--tooltip-c-border);outline:var(--tooltip-c-outline);position:absolute}.vue-tooltip.disable{opacity:.5;cursor:not-allowed}:root{--tooltip-d-transition-duration: .4s;--tooltip-d-border-radius: 4px;--tooltip-d-padding: 2px 4px;--tooltip-d-position-x: calc(100% + 10px) ;--tooltip-d-position-y: calc(100% + 10px) ;--tooltip-d-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, .14), 0px .6px 1.8px 0px rgba(0, 0, 0, .1), 0px -1.5px 6px 0px rgba(0, 0, 0, .06);--tooltip-d-z-index: 10;--tooltip-d-max-width: 300px;--tooltip-d-font-size: 14px;--tooltip-d-width: max-content;--tooltip-d-height: max-content;--tooltip-d-outline: none;--tooltip-d-border: none;--tooltip-c-transition-duration: .4s;--tooltip-c-border-radius: 4px;--tooltip-c-padding: 2px 4px;--tooltip-c-position-x: calc(100% + 10px) ;--tooltip-c-position-y: calc(100% + 5px) ;--tooltip-c-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, .14), 0px .6px 1.8px 0px rgba(0, 0, 0, .1), 0px -1.5px 6px 0px rgba(0, 0, 0, .06);--tooltip-c-z-index: 10;--tooltip-c-max-width: max-content;--tooltip-c-width: max-content;--tooltip-c-height: max-content;--tooltip-c-outline: none;--tooltip-c-border: none;--tooltip-primary-color: #212121;--tooltip-primary-background: #fff;--tooltip-seconary-color: #fff;--tooltip-seconary-background: #475DEB;--tooltip-accent-color: #fff;--tooltip-accent-background: #212121;--tooltip-component-color: #212121;--tooltip-component-background: #fff} diff --git a/dist/vue3-tooltip.es.js b/dist/vue3-tooltip.es.js index 7e783aa..2cc160d 100644 --- a/dist/vue3-tooltip.es.js +++ b/dist/vue3-tooltip.es.js @@ -1,4 +1,4 @@ -import { ref as d, openBlock as r, createElementBlock as s, normalizeClass as a, renderSlot as i, createVNode as p, Transition as f, withCtx as v, createCommentVNode as m } from "vue"; +import { ref as d, openBlock as n, createElementBlock as r, normalizeClass as s, renderSlot as i, createVNode as p, Transition as f, withCtx as v, createCommentVNode as m } from "vue"; const _ = { name: "TooltipComponent", props: { @@ -22,8 +22,8 @@ const _ = { const e = d(!1); return { isShowTooltip: e, - afterEnter: (n) => { - n.classList.add(`vue-tooltip__hover-${t.position}`); + afterEnter: (a) => { + a.classList.add(`vue-tooltip__hover-${t.position}`); }, hideTooltip: () => { e.value = !1; @@ -32,15 +32,15 @@ const _ = { } }, y = (t, e) => { const o = t.__vccOpts || t; - for (const [l, n] of e) - o[l] = n; + for (const [l, a] of e) + o[l] = a; return o; }; -function T(t, e, o, l, n, h) { - return r(), s("div", { +function T(t, e, o, l, a, h) { + return n(), r("div", { onMouseenter: e[0] || (e[0] = (u) => l.isShowTooltip = !0), onMouseleave: e[1] || (e[1] = (u) => l.isShowTooltip = !1), - class: a(["vue-tooltip", { disable: o.disable }]) + class: s(["vue-tooltip", { disable: o.disable }]) }, [ i(t.$slots, "text", {}, void 0, !0), p(f, { @@ -48,9 +48,9 @@ function T(t, e, o, l, n, h) { onAfterEnter: l.afterEnter }, { default: v(() => [ - !o.disable && l.isShowTooltip ? (r(), s("div", { + !o.disable && l.isShowTooltip ? (n(), r("div", { key: 0, - class: a(["vue-tooltip--component", [{ "vue-tooltip__pointer-event": !o.clickable }, `vue-tooltip__${o.position}`]]) + class: s(["vue-tooltip--component", [{ "vue-tooltip__pointer-event": !o.clickable }, `vue-tooltip__${o.position}`]]) }, [ i(t.$slots, "tooltip", {}, void 0, !0) ], 2)) : m("", !0) @@ -59,7 +59,7 @@ function T(t, e, o, l, n, h) { }, 8, ["name", "onAfterEnter"]) ], 34); } -const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-f73c658e"]]), k = { +const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-f8a3696a"]]), k = { mounted: (t, e) => { c(t, e); }, diff --git a/dist/vue3-tooltip.umd.js b/dist/vue3-tooltip.umd.js index 84b780d..f89d1d6 100644 --- a/dist/vue3-tooltip.umd.js +++ b/dist/vue3-tooltip.umd.js @@ -1 +1 @@ -(function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i["vue3-tooltip"]={},i.Vue))})(this,function(i,o){"use strict";const u={name:"TooltipComponent",props:{disable:{type:Boolean,required:!1,default:!1},position:{type:String,required:!1,default:"bottom"},clickable:{type:Boolean,required:!1,default:!1}},setup(e){const t=o.ref(!1);return{isShowTooltip:t,afterEnter:s=>{s.classList.add(`vue-tooltip__hover-${e.position}`)},hideTooltip:()=>{t.value=!1}}}},p=(e,t)=>{const n=e.__vccOpts||e;for(const[l,s]of t)n[l]=s;return n};function f(e,t,n,l,s,T){return o.openBlock(),o.createElementBlock("div",{onMouseenter:t[0]||(t[0]=_=>l.isShowTooltip=!0),onMouseleave:t[1]||(t[1]=_=>l.isShowTooltip=!1),class:o.normalizeClass(["vue-tooltip",{disable:n.disable}])},[o.renderSlot(e.$slots,"text",{},void 0,!0),o.createVNode(o.Transition,{name:n.position,onAfterEnter:l.afterEnter},{default:o.withCtx(()=>[!n.disable&&l.isShowTooltip?(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(["vue-tooltip--component",[{"vue-tooltip__pointer-event":!n.clickable},`vue-tooltip__${n.position}`]])},[o.renderSlot(e.$slots,"tooltip",{},void 0,!0)],2)):o.createCommentVNode("",!0)]),_:3},8,["name","onAfterEnter"])],34)}const r=p(u,[["render",f],["__scopeId","data-v-f73c658e"]]),a={mounted:(e,t)=>{c(e,t)},updated:(e,t)=>{c(e,t)}},c=(e,t)=>{const n="vue-tooltip";e.classList.add(n),!(t.value===null||t.value===void 0)&&(e.dataset.tooltip=t.value,e.classList.toggle(`${n}__${m(t.modifiers)}`,!0),e.classList.toggle(`${n}__${t.arg||"bottom"}`,!0))},m=e=>e.primary?"primary":e.secondary?"secondary":e.accent?"accent":"primary",d=e=>{e.component("tooltip",r),e.directive("tooltip",a)},v={install:d};i.TooltipComponent=r,i.TooltipDirective=a,i.default=v,i.install=d,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); +(function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i["vue3-tooltip"]={},i.Vue))})(this,function(i,o){"use strict";const u={name:"TooltipComponent",props:{disable:{type:Boolean,required:!1,default:!1},position:{type:String,required:!1,default:"bottom"},clickable:{type:Boolean,required:!1,default:!1}},setup(e){const t=o.ref(!1);return{isShowTooltip:t,afterEnter:s=>{s.classList.add(`vue-tooltip__hover-${e.position}`)},hideTooltip:()=>{t.value=!1}}}},p=(e,t)=>{const n=e.__vccOpts||e;for(const[l,s]of t)n[l]=s;return n};function f(e,t,n,l,s,T){return o.openBlock(),o.createElementBlock("div",{onMouseenter:t[0]||(t[0]=_=>l.isShowTooltip=!0),onMouseleave:t[1]||(t[1]=_=>l.isShowTooltip=!1),class:o.normalizeClass(["vue-tooltip",{disable:n.disable}])},[o.renderSlot(e.$slots,"text",{},void 0,!0),o.createVNode(o.Transition,{name:n.position,onAfterEnter:l.afterEnter},{default:o.withCtx(()=>[!n.disable&&l.isShowTooltip?(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(["vue-tooltip--component",[{"vue-tooltip__pointer-event":!n.clickable},`vue-tooltip__${n.position}`]])},[o.renderSlot(e.$slots,"tooltip",{},void 0,!0)],2)):o.createCommentVNode("",!0)]),_:3},8,["name","onAfterEnter"])],34)}const r=p(u,[["render",f],["__scopeId","data-v-f8a3696a"]]),a={mounted:(e,t)=>{d(e,t)},updated:(e,t)=>{d(e,t)}},d=(e,t)=>{const n="vue-tooltip";e.classList.add(n),!(t.value===null||t.value===void 0)&&(e.dataset.tooltip=t.value,e.classList.toggle(`${n}__${m(t.modifiers)}`,!0),e.classList.toggle(`${n}__${t.arg||"bottom"}`,!0))},m=e=>e.primary?"primary":e.secondary?"secondary":e.accent?"accent":"primary",c=e=>{e.component("tooltip",r),e.directive("tooltip",a)},v={install:c};i.TooltipComponent=r,i.TooltipDirective=a,i.default=v,i.install=c,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/package.json b/package.json index 16d4bb8..610b654 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "vue3-tooltip", "description": "Module for convenient work with tooltips in Vue3 (using a directive and a component)", "type": "module", - "version": "2.1.4", + "version": "2.2.3", "private": false, "author": { "name": "Dmitry Luckyanenko", diff --git a/src/assets/_variables.css b/src/assets/_variables.css index 65335d6..f378041 100644 --- a/src/assets/_variables.css +++ b/src/assets/_variables.css @@ -4,12 +4,12 @@ --tooltip-d-border-radius: 4px; --tooltip-d-padding: 2px 4px; --tooltip-d-position-x: calc(100% + 10px); - --tooltip-d-position-y: calc(100% + 2px); + --tooltip-d-position-y: calc(100% + 10px); --tooltip-d-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.14), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1), 0px -1.5px 6px 0px rgba(0, 0, 0, 0.06); --tooltip-d-z-index: 10; - --tooltip-d-max-width: 200px; + --tooltip-d-max-width: 300px; --tooltip-d-font-size: 14px; --tooltip-d-width: max-content; --tooltip-d-height: max-content; @@ -21,7 +21,7 @@ --tooltip-c-border-radius: 4px; --tooltip-c-padding: 2px 4px; --tooltip-c-position-x: calc(100% + 10px); - --tooltip-c-position-y: 100%; + --tooltip-c-position-y: calc(100% + 5px); --tooltip-c-box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.14), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1), 0px -1.5px 6px 0px rgba(0, 0, 0, 0.06); diff --git a/src/components/TooltipComponent.vue b/src/components/TooltipComponent.vue index 76799ca..cf5d1c5 100644 --- a/src/components/TooltipComponent.vue +++ b/src/components/TooltipComponent.vue @@ -133,7 +133,7 @@ export default { .bottom-enter-active, .bottom-leave-active { transition: var(--tooltip-c-transition-duration); - top: 100%; + top: calc(100% + 5px); } .bottom-enter-from,