@vingy/vueltip 2.0.0 → 2.1.0

package/README.md

@@ -139,6 +139,65 @@ Now you can use the `v-tooltip` directive on any element:
 
 See the demo app in [demo/](../../demo/).
 
+## Basic Tooltip Component
+
+Vueltip provides a pre-built `BasicTooltip` component with default styling that you can use out of the box:
+
+```ts
+import {
+  vueltipPlugin,
+  vueltipDirective,
+  BasicTooltip,
+} from '@vingy/vueltip'
+import '@vingy/vueltip/basicTooltip.css'
+
+const app = createApp(App)
+
+app
+  .use(vueltipPlugin, {
+    component: BasicTooltip,
+  })
+  .directive('tooltip', vueltipDirective)
+```
+
+### Theming the Basic Tooltip
+
+The `BasicTooltip` component uses CSS custom properties for theming. You can customize it in two ways:
+
+**1. Use the default theme:**
+
+Import the provided CSS file for automatic light/dark mode support:
+
+```ts
+import '@vingy/vueltip/basicTooltip.css'
+```
+
+**2. Override with custom CSS variables:**
+
+Define your own theme by setting CSS variables:
+
+```css
+.vueltip-theme {
+  --vueltip-bg: hotpink;
+  --vueltip-text: white;
+  --vueltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --vueltip-border-radius: 8px;
+  --vueltip-padding: 8px 12px;
+  --vueltip-font-size: 16px;
+  --vueltip-font-weight: 500;
+}
+```
+
+**Available CSS variables:**
+
+- `--vueltip-bg`: Background color
+- `--vueltip-text`: Text color
+- `--vueltip-shadow`: Box shadow
+- `--vueltip-border-radius`: Border radius
+- `--vueltip-padding`: Content padding
+- `--vueltip-font-size`: Font size
+- `--vueltip-font-weight`: Font weight
+
 ## Options
 
 ### Plugin Options

package/dist/basicTooltip.css

@@ -0,0 +1,42 @@
+.vueltip-theme {
+  isolation: isolate;
+
+  --vueltip-bg: rgb(241, 245, 249);
+  --vueltip-text: rgb(15, 23, 42);
+  --vueltip-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --vueltip-border-radius: 4px;
+  --vueltip-padding: 4px 8px;
+  --vueltip-font-size: 14px;
+  --vueltip-font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+  .vueltip-theme {
+    --vueltip-bg: rgb(30, 41, 59);
+    --vueltip-text: rgb(248, 250, 252);
+    --vueltip-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.5),
+      0 4px 6px -4px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.vueltip-arrow {
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  background: var(--vueltip-bg);
+}
+
+.vueltip-content {
+  position: relative;
+  z-index: 10;
+  border-radius: var(--vueltip-border-radius);
+  background: var(--vueltip-bg);
+  padding: var(--vueltip-padding);
+  font-size: var(--vueltip-font-size);
+  font-weight: var(--vueltip-font-weight);
+  color: var(--vueltip-text);
+  box-shadow: var(--vueltip-shadow);
+}

package/dist/index.d.mts

@@ -1,6 +1,9 @@
-import * as Vue from "vue";
+import * as vue from "vue";
 import { App, Component, Directive, DirectiveBinding, ShallowRef, StyleValue } from "vue";
 
+//#region src/basicTooltip.component.d.ts
+declare const BasicTooltip: vue.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, vue.PublicProps>;
+//#endregion
 //#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.d.mts
 declare type AlignedPlacement = `${Side}-${Alignment}`;
 declare type Alignment = 'start' | 'end';
@@ -202,7 +205,7 @@ declare const install: (vue?: any) => void;
  * @deprecated To avoid bringing in all the tree-shakable modules, this API has been deprecated. Use `Vue2` or named exports instead.
  * Refer to https://github.com/vueuse/vue-demi/issues/41
  */
-declare const V: typeof Vue;
+declare const V: typeof vue;
 declare function set<T>(target: any, key: any, val: T): T;
 declare function del(target: any, key: any): void;
 //#endregion
@@ -291,7 +294,7 @@ declare const useVueltip: ({
   arrowSize,
   floatingOptions
 }: UseTooltipOptions) => {
-  tooltipStyles: Readonly<Vue.Ref<{
+  tooltipStyles: Readonly<vue.Ref<{
     position: Strategy;
     top: string;
     left: string;
@@ -304,9 +307,9 @@ declare const useVueltip: ({
     transform?: string;
     willChange?: string;
   }>>;
-  arrowStyles: Vue.ComputedRef<StyleValue>;
-  show: Vue.ComputedRef<boolean>;
-  content: Vue.Ref<Maybe<Content>, Maybe<Content>>;
+  arrowStyles: vue.ComputedRef<StyleValue>;
+  show: vue.ComputedRef<boolean>;
+  content: vue.Ref<Maybe<Content>, Maybe<Content>>;
 };
 //#endregion
 //#region src/directive.d.ts
@@ -326,4 +329,4 @@ declare const vueltipPlugin: {
   }>) => void;
 };
 //#endregion
-export { type Content, type CustomVueltipData, setOptions, useVueltip, vueltipDirective, vueltipPlugin };
+export { BasicTooltip, type Content, type CustomVueltipData, setOptions, useVueltip, vueltipDirective, vueltipPlugin };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { n as __reExport, t as __exportAll } from "./chunk-CtajNgzt.mjs";
 import * as Vue from "vue";
-import { computed, createApp, ref, watch } from "vue";
+import { computed, createApp, defineComponent, h, ref, useTemplateRef, watch } from "vue";
 
 //#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 const min = Math.min;
@@ -1409,10 +1409,17 @@ const getOption = (key) => options[key];
 
 //#endregion
 //#region src/state.ts
+let timerId;
 const tooltipPlacement = ref("top");
 const debouncedTooltipPlacement = ref("top");
 const hoveredElement = ref();
 const debouncedHoveredElement = ref();
+const forceClearHoveredElement = (el) => {
+	if (el !== debouncedHoveredElement.value && el !== hoveredElement.value) return;
+	hoveredElement.value = void 0;
+	debouncedHoveredElement.value = void 0;
+	if (timerId) clearTimeout(timerId);
+};
 const contentMap = ref(/* @__PURE__ */ new Map());
 const getContent = (key) => contentMap.value.get(key);
 const setContent = (key, value) => contentMap.value.set(key, value);
@@ -1420,7 +1427,6 @@ const deleteContent = (key) => contentMap.value.delete(key);
 const generateKey = () => crypto.randomUUID();
 const tooltipKey = ref();
 const tooltipContent = ref();
-let timerId;
 watch([
 	tooltipKey,
 	hoveredElement,
@@ -1508,6 +1514,30 @@ const useVueltip = ({ tooltipElement, arrowElement, offset: _offset, padding, ar
 	};
 };
 
+//#endregion
+//#region src/basicTooltip.component.ts
+const BasicTooltip = defineComponent(() => {
+	const { tooltipStyles, arrowStyles, show, content } = useVueltip({
+		tooltipElement: useTemplateRef("tooltipElement"),
+		arrowElement: useTemplateRef("arrowElement"),
+		offset: 8,
+		padding: 8
+	});
+	return () => {
+		if (!show.value) return null;
+		return h("div", {
+			ref: "tooltipElement",
+			class: "vueltip-theme",
+			style: tooltipStyles.value,
+			role: "tooltip"
+		}, [h("div", {
+			ref: "arrowElement",
+			class: "vueltip-arrow",
+			style: arrowStyles.value
+		}), h("div", { class: "vueltip-content" }, [content.value?.text])]);
+	};
+});
+
 //#endregion
 //#region src/utils.ts
 function isTruncated(el) {
@@ -1611,6 +1641,7 @@ const vueltipDirective = {
 	},
 	beforeUnmount: (el) => {
 		ensureKey(el, (key) => deleteContent(key));
+		forceClearHoveredElement(el);
 		el.removeEventListener("mouseenter", onMouseover);
 		el.removeEventListener("focus", onMouseover);
 		el.removeEventListener("mouseleave", onMouseout);
@@ -1633,4 +1664,4 @@ const vueltipPlugin = { install: (app, options) => {
 } };
 
 //#endregion
-export { setOptions, useVueltip, vueltipDirective, vueltipPlugin };
+export { BasicTooltip, setOptions, useVueltip, vueltipDirective, vueltipPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vingy/vueltip",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Headless tooltip which only shows when necessary.",
   "keywords": [
     "composition-api",
@@ -18,14 +18,17 @@
     "dist"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/basicTooltip.css"
+  ],
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs"
-    }
+    },
+    "./basicTooltip.css": "./dist/basicTooltip.css"
   },
   "publishConfig": {
     "access": "public"