@vingy/vueltip 2.0.1 → 2.1.1

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, createVNode, defineComponent, h, ref, render, 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;
@@ -1514,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) {
@@ -1627,17 +1651,24 @@ const vueltipDirective = {
 
 //#endregion
 //#region src/plugin.ts
+const CONTAINER_ID = "__vueltip_root__";
+const getContainer = () => {
+	const existing = document.getElementById(CONTAINER_ID);
+	if (existing) return existing;
+	const container = document.createElement("div");
+	container.id = CONTAINER_ID;
+	document.body.appendChild(container);
+	return container;
+};
 const vueltipPlugin = { install: (app, options) => {
 	const { component, ...rest } = options;
 	setOptions(rest);
 	if (!component) return;
-	const container = document.createElement("div");
-	container.id = "__vueltip_root__";
-	document.body.appendChild(container);
-	const tooltipApp = createApp(component);
-	tooltipApp._context = app._context;
-	tooltipApp.mount(container);
+	const container = getContainer();
+	const vnode = createVNode(component);
+	vnode.appContext = app._context;
+	render(vnode, container);
 } };
 
 //#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.1",
+  "version": "2.1.1",
   "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"