@vingy/vueltip 0.3.0 → 1.0.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { n as __reExport, t as __exportAll } from "./chunk-CtajNgzt.mjs";
 import * as Vue from "vue";
-import { App, Component, ShallowRef, StyleValue } from "vue";
+import { App, Component, Directive, ShallowRef, StyleValue } from "vue";
 
 //#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}`;
@@ -248,6 +248,11 @@ declare type UseFloatingOptions<T extends ReferenceElement = ReferenceElement> =
 interface Content {
   text: string;
 }
+type Binding = string | {
+  content: string | Content;
+  placement: Placement;
+};
+type TooltipDirective = Directive<HTMLElement, Binding>;
 type Options = {
   /** @default 'tooltip-placement' */placementAttribute: string; /** @default 'tooltip-key' */
   keyAttribute: string; /** @default 0 */
@@ -263,9 +268,18 @@ type UseTooltipOptions = {
   arrowSize?: number;
   floatingOptions?: UseFloatingOptions<HTMLElement>;
 };
+declare module 'vue' {
+  interface GlobalDirectives {
+    vTooltip: TooltipDirective;
+  }
+}
+//#endregion
+//#region ../shared/dist/types.d.mts
+//#region src/types.d.ts
+type Maybe<T> = T | null | undefined; //#endregion
 //#endregion
 //#region src/composables.d.ts
-declare const useTooltip: ({
+declare const useVueltip: ({
   tooltipElement,
   arrowElement,
   offset: _offset,
@@ -291,11 +305,21 @@ declare const useTooltip: ({
   content: Vue.Ref<Maybe<Content>, Maybe<Content>>;
 };
 //#endregion
+//#region src/directive.d.ts
+declare const vueltipDirective: {
+  updated: (el: HTMLElement, binding: Vue.DirectiveBinding<Binding, string, any>) => void;
+  created: (el: HTMLElement, binding: Vue.DirectiveBinding<Binding, string, any>) => void;
+  beforeUnmount: (el: HTMLElement) => void;
+};
+//#endregion
+//#region src/options.d.ts
+declare const setOptions: (opts?: Partial<Options>) => void;
+//#endregion
 //#region src/plugin.d.ts
-declare const tooltipPlugin: {
-  install: (app: App, options: Partial<Options> & {
+declare const vueltipPlugin: {
+  install: (app: App, options: Partial<Options & {
     component: Component;
-  }) => void;
+  }>) => void;
 };
 //#endregion
-export { type Content, tooltipPlugin, useTooltip };
+export { type Content, setOptions, useVueltip, vueltipDirective, vueltipPlugin };

package/dist/index.mjs

@@ -1390,8 +1390,8 @@ function useFloating(reference, floating, options) {
 //#endregion
 //#region src/options.ts
 let options = {
-	placementAttribute: "tooltip-placement",
-	keyAttribute: "tooltip-key",
+	placementAttribute: "vueltip-placement",
+	keyAttribute: "vueltip-key",
 	showDelay: 0,
 	hideDelay: 200,
 	handleDialogModals: false
@@ -1441,7 +1441,7 @@ const sideMap = {
 	bottom: "top",
 	left: "right"
 };
-const useTooltip = ({ tooltipElement, arrowElement, offset: _offset, padding, arrowSize, floatingOptions }) => {
+const useVueltip = ({ tooltipElement, arrowElement, offset: _offset, padding, arrowSize, floatingOptions }) => {
 	let initialParent;
 	onMounted(() => {
 		initialParent = tooltipElement.value?.parentElement;
@@ -1547,7 +1547,7 @@ const onMouseout = ensureEventTarget((target) => {
 //#region src/directive.ts
 const toContent = (value) => typeof value === "string" ? { text: value } : typeof value.content === "string" ? { text: value.content } : value.content;
 const extractPlacement = (value) => typeof value === "string" ? "top" : value.placement;
-const tooltipDirective = {
+const vueltipDirective = {
 	updated: (el, binding) => {
 		ensureKey(el, (key) => setContent(key, toContent(binding.value)));
 	},
@@ -1572,16 +1572,17 @@ const tooltipDirective = {
 
 //#endregion
 //#region src/plugin.ts
-const tooltipPlugin = { install: (app, options) => {
-	setOptions(options);
-	app.directive("tooltip", tooltipDirective);
+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(options.component);
+	const tooltipApp = createApp(component);
 	tooltipApp._context = app._context;
 	tooltipApp.mount(container);
 } };
 
 //#endregion
-export { tooltipPlugin, useTooltip };
+export { setOptions, useVueltip, vueltipDirective, vueltipPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vingy/vueltip",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Headless tooltip which only shows when necessary.",
   "keywords": [
     "composition-api",