[2.1.3] Finish release

Author: neluckoff

README.md

@@ -26,7 +26,8 @@ Add dependencies to your `main.ts`:
 
 ```js
 import { createApp } from 'vue'
-import { TooltipDirective, TooltipComponent } from 'vue3-tooltip'
+import { TooltipDirective, TooltipComponent } from 'vue3-tooltip';
+import 'vue3-tooltip/tooltip.css';
 
 const app = createApp({...})
 app.directive('tooltip', TooltipDirective)
@@ -91,7 +92,16 @@ The component has the following props *(default values are highlighted in bold)*
 `clickable` *(true | **false**)* - do not hide the tooltip when hovering over it
 
 ## Style customization
-To customize tooltip directive, you need to create a global style file using `CSS` or `Sass`. My example demonstrates this process:
+To customize styles, you need to paste your CSS file into `main.ts` after importing the basic tooltip styles `(vue3-tooltip/tooltip.css)`:
+
+```js
+import { TooltipDirective, TooltipComponent } from 'vue3-tooltip';
+import 'vue3-tooltip/tooltip.css';
+// After this line you need to do your import
+import './assets/my-tooltip.scss';
+```
+
+To customize tooltip **directive**, you need to create a global style file using `CSS` or `Sass`. My example demonstrates this process:
 
 ```scss
 .vue-tooltip {
@@ -110,7 +120,74 @@ To customize tooltip directive, you need to create a global style file using `CS
 }
 ```
 
-If you want to explore customization in more detail and change all the classes in the module, you should check them out at [this link](https://github.com/neluckoff/vue3-tooltip/blob/master/src/assets/directive.css).
+*If you want to explore customization in more detail and change all the classes in the module, you should check them out at [this link](https://github.com/neluckoff/vue3-tooltip/blob/master/src/assets/_directive.css).*
+
+To customize the **component**, you can also override the standard styles:
+
+```scss
+.vue-tooltip {
+  &.disable {
+    // ... //
+  }
+  &--component {
+    /*
+    * font-size, line-height, max-width, padding, border-radius, box-shadow, transition
+    */
+  }
+}
+```
+
+*You can go deeper into component styles at [this link](https://github.com/neluckoff/vue3-tooltip/blob/master/src/assets/_component.css).*
+
+Or, instead of redefining classes, you can use variables, on which the entire tooltip design is based. If you want to add new variables, you can write to [Issues on GitHub](https://github.com/neluckoff/vue3-tooltip/issues).
+
+```css
+:root {
+  /* Directive Variables */
+  --tooltip-d-transition-duration: 0.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, 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-font-size: 14px;
+  --tooltip-d-width: max-content;
+  --tooltip-d-height: max-content;
+  --tooltip-d-outline: none;
+  --tooltip-d-border: none;
+
+  /* Component Variables */
+  --tooltip-c-transition-duration: 0.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, 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-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;
+
+  /* Colors */
+  --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;
+}
+```
 
 ## Contributing
 I have a positive attitude towards PR and pull requests. Glad to see that people like the package.

dist/index.d.ts

@@ -6,14 +6,14 @@ import { PublicProps } from 'vue';
 import { Ref } from 'vue';
 
 declare module 'vue3-tooltip' {
-    declare const _default: {
+    const _default: {
         install: (app: any) => void;
     };
     export default _default;
 
-    export declare const install: (app: any) => void;
+    export const install: (app: any) => void;
 
-    export declare const TooltipComponent: DefineComponent<{
+    export const TooltipComponent: DefineComponent<{
         disable: {
             type: BooleanConstructor;
             required: false;
@@ -55,9 +55,9 @@ declare module 'vue3-tooltip' {
         clickable: boolean;
     }, {}>;
 
-    export declare const TooltipDirective: Directive<HTMLElement, string>;
+    export const TooltipDirective: Directive<HTMLElement, string>;
 
-    declare type TooltipPosition = 'bottom' | 'top' | 'left' | 'right';
+    type TooltipPosition = 'bottom' | 'top' | 'left' | 'right';
 
     export { }
-}
+}

dist/style.css

@@ -1,5 +1,4 @@
-(function(){"use strict";var o;try{if(typeof document<"u"){var t=document.createElement("style");t.nonce=(o=document.head.querySelector("meta[property=csp-nonce]"))==null?void 0:o.content,t.appendChild(document.createTextNode('.vue-tooltip[data-v-5991ce00]:after{content:"";display:none}.vue-tooltip__pointer-event[data-v-5991ce00]{pointer-events:none}.vue-tooltip__hover-left[data-v-5991ce00]{right:var(--tooltip-position-x);left:auto}.left-enter-active[data-v-5991ce00],.left-leave-active[data-v-5991ce00]{transition:var(--tooltip-transition-duration);right:var(--tooltip-position-x)}.left-enter-from[data-v-5991ce00],.left-leave-to[data-v-5991ce00]{opacity:0;right:50%}.vue-tooltip__left[data-v-5991ce00]{top:50%;bottom:50%;transform:translateY(-50%)}.vue-tooltip__hover-right[data-v-5991ce00]{left:var(--tooltip-position-x);right:auto}.right-enter-active[data-v-5991ce00],.right-leave-active[data-v-5991ce00]{transition:var(--tooltip-transition-duration);left:var(--tooltip-position-x)}.right-enter-from[data-v-5991ce00],.right-leave-to[data-v-5991ce00]{opacity:0;left:50%}.vue-tooltip__right[data-v-5991ce00]{top:50%;bottom:50%;transform:translateY(-50%)}.vue-tooltip__hover-bottom[data-v-5991ce00]{top:100%;bottom:auto}.bottom-enter-active[data-v-5991ce00],.bottom-leave-active[data-v-5991ce00]{transition:var(--tooltip-transition-duration);top:100%}.bottom-enter-from[data-v-5991ce00],.bottom-leave-to[data-v-5991ce00]{opacity:0;top:50%}.vue-tooltip__bottom[data-v-5991ce00]{right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__hover-top[data-v-5991ce00]{bottom:100%;top:auto}.top-enter-active[data-v-5991ce00],.top-leave-active[data-v-5991ce00]{transition:var(--tooltip-transition-duration);bottom:100%}.top-enter-from[data-v-5991ce00],.top-leave-to[data-v-5991ce00]{opacity:0;bottom:50%}.vue-tooltip__top[data-v-5991ce00]{right:50%;left:50%;transform:translate(-50%)}.vue-tooltip{position:relative;cursor:pointer;z-index:1}.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:14px;position:absolute;width:max-content;max-width:200px;height:max-content;z-index:10;padding:var(--tooltip-padding);border-radius:var(--tooltip-border-radius);box-shadow:var(--tooltip-box-shadow);pointer-events:none;opacity:0;transition:var(--tooltip-transition-duration)}.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:calc(100% + 2px)}.vue-tooltip__top:after{top:auto;bottom:50%;right:50%;left:50%;transform:translate(-50%)}.vue-tooltip__top:hover:after{bottom:calc(100% + 2px)}.vue-tooltip__right:after{top:50%;bottom:50%;left:14px;right:auto;transform:translateY(-50%)}.vue-tooltip__right:hover:after{left:var(--tooltip-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-position-x)}.vue-tooltip-body{z-index:10;background:var(--tooltip-component-background);color:var(--tooltip-component-color);border-radius:var(--tooltip-border-radius);box-shadow:var(--tooltip-box-shadow);padding:var(--tooltip-padding);width:max-content;height:max-content;position:absolute}.vue-tooltip.disable{opacity:.5;cursor:not-allowed}:root{--tooltip-transition-duration: .4s;--tooltip-border-radius: 4px;--tooltip-padding: 2px 4px;--tooltip-position-x: calc(100% + 10px) ;--tooltip-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-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}')),document.head.appendChild(t)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { ref as d, openBlock as s, createElementBlock as a, normalizeClass as i, renderSlot as n, createVNode as p, Transition as f, withCtx as v, createCommentVNode as m } from "vue";
+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";
 const _ = {
   name: "TooltipComponent",
   props: {
@@ -23,8 +22,8 @@ const _ = {
     const e = d(!1);
     return {
       isShowTooltip: e,
-      afterEnter: (r) => {
-        r.classList.add(`vue-tooltip__hover-${t.position}`);
+      afterEnter: (n) => {
+        n.classList.add(`vue-tooltip__hover-${t.position}`);
       },
       hideTooltip: () => {
         e.value = !1;
@@ -33,34 +32,34 @@ const _ = {
   }
 }, y = (t, e) => {
   const o = t.__vccOpts || t;
-  for (const [l, r] of e)
-    o[l] = r;
+  for (const [l, n] of e)
+    o[l] = n;
   return o;
 };
-function T(t, e, o, l, r, b) {
-  return s(), a("div", {
+function T(t, e, o, l, n, b) {
+  return r(), s("div", {
     onMouseenter: e[0] || (e[0] = (u) => l.isShowTooltip = !0),
     onMouseleave: e[1] || (e[1] = (u) => l.isShowTooltip = !1),
-    class: i(["vue-tooltip", { disable: o.disable }])
+    class: a(["vue-tooltip", { disable: o.disable }])
   }, [
-    n(t.$slots, "text", {}, void 0, !0),
+    i(t.$slots, "text", {}, void 0, !0),
     p(f, {
       name: o.position,
       onAfterEnter: l.afterEnter
     }, {
       default: v(() => [
-        !o.disable && l.isShowTooltip ? (s(), a("div", {
+        !o.disable && l.isShowTooltip ? (r(), s("div", {
           key: 0,
-          class: i(["vue-tooltip-body", [{ "vue-tooltip__pointer-event": !o.clickable }, `vue-tooltip__${o.position}`]])
+          class: a(["vue-tooltip--component", [{ "vue-tooltip__pointer-event": !o.clickable }, `vue-tooltip__${o.position}`]])
         }, [
-          n(t.$slots, "tooltip", {}, void 0, !0)
+          i(t.$slots, "tooltip", {}, void 0, !0)
         ], 2)) : m("", !0)
       ]),
       _: 3
     }, 8, ["name", "onAfterEnter"])
   ], 34);
 }
-const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-5991ce00"]]), k = {
+const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-69eec82b"]]), k = {
   mounted: (t, e) => {
     c(t, e);
   },