@3yourmind/vue-use-tippy - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.d.ts

@@ -0,14 +1,15 @@
+/// <reference types="react" />
 import { Ref } from '@vue/composition-api';
-import { Content, Props, Instance, Targets } from 'tippy.js';
-declare type Callback = (t: Instance<Props>[] | null) => void;
+import { Props, Instance } from 'tippy.js';
+declare type InstanceRefType = Instance<Props>[] | Instance<Props> | null;
+declare type Callback = (t: InstanceRefType) => void;
+declare type Target = Ref<Element | null> | string;
 /**
  * @see {@link https://atomiks.github.io/tippyjs/v6/all-props} for options
  */
-export declare const useTippy: (targets: Targets, options: Partial<Props> & {
-    content: Ref<Content> | Content;
-}) => {
+export declare const useTippy: (targets: Array<Target> | Target, options: Ref<Partial<Props>>) => {
     onMount: (callback: Callback) => number;
     onUnmount: (callback: Callback) => number;
-    tippy: Ref<Instance<Props>[] | null>;
+    tippy: Ref<InstanceRefType>;
 };
 export {};

dist/index.js

@@ -11,3 +11,3 @@ "use strict";
 var applyForEvery = function (instance, callback) {
-    if (instance.value)
+    if (instance.value !== null)
         for (var _i = 0, _a = lodash_castarray_1.default(instance.value); _i < _a.length; _i++) {
@@ -25,9 +25,2 @@ var tippyInstance = _a[_i];
     composition_api_1.onMounted(function () {
-        if (composition_api_1.isRef(options.content)) {
-            composition_api_1.watch(options.content, function (newValue) {
-                return applyForEvery(instance, function (tippyInstance) {
-                    return tippyInstance.setContent(newValue);
-                });
-            }, { immediate: true });
-        }
         var unwrappedTargets = (function () {
@@ -40,3 +33,3 @@ if (composition_api_1.isRef(targets))
         })();
-        instance.value = tippy_js_1.default(unwrappedTargets, options);
+        instance.value = tippy_js_1.default(unwrappedTargets, options.value);
         onMountCallbacks.forEach(function (callback) { return callback(instance.value); });
@@ -49,13 +42,7 @@ });
     });
-    if (composition_api_1.isReactive(options) || composition_api_1.isRef(options)) {
-        var watchSource = composition_api_1.isReactive(options) ? function () { return options; } : options;
-        composition_api_1.watch(watchSource, function () {
-            return applyForEvery(instance, function (tippyInstance) {
-                return tippyInstance.setProps(options);
-            });
-        }, {
-            deep: true,
-            immediate: true,
+    composition_api_1.watch(options, function () {
+        return applyForEvery(instance, function (tippyInstance) {
+            return tippyInstance.setProps(options.value);
         });
-    }
+    }, { immediate: true });
     return {
@@ -62,0 +49,0 @@ onMount: function (callback) { return onMountCallbacks.push(callback); },

package.json

@@ -40,4 +40,4 @@ {
 	},
-	"version": "1.0.0",
-	"gitHead": "828550d792ed067c7fb1e10f8aacaa23abefa8f9"
+	"version": "1.0.1",
+	"gitHead": "18d57623b440fa7b8926491a6b40e363b8ce7434"
 }

README.md

@@ -9,3 +9,3 @@ # `@3yourmind/vue-use-tippy`
 import { useTippy } from '@3yourmind/vue-use-tippy'
-import { defineComponent, ref } from '@vue/composition-api'
+import { computed, defineComponent, ref } from '@vue/composition-api'
 
@@ -16,8 +16,11 @@ export default defineComponent({
 
-		useTippy(helpTextTriggerRef, {
-			appendTo: () => document.body,
-			content: contentRef,
-			interactive: true,
-			theme: 'light-border',
-		})
+		useTippy(
+			helpTextTriggerRef,
+			computed(() => ({
+				appendTo: () => document.body,
+				content: contentRef,
+				interactive: true,
+				theme: 'light-border',
+			})),
+		)
 
@@ -24,0 +27,0 @@ return {

source/index.ts

 import {
 	isRef,
-	isReactive,
 	onMounted,
@@ -11,11 +10,13 @@ ref,
 import castArray from 'lodash.castarray'
-import tippy, { Content, Props, Instance, Targets } from 'tippy.js'
+import tippy, { Props, Instance } from 'tippy.js'
 
-type Callback = (t: Instance<Props>[] | null) => void
+type InstanceRefType = Instance<Props>[] | Instance<Props> | null
+type Callback = (t: InstanceRefType) => void
+type Target = Ref<Element | null> | string
 
 const applyForEvery = (
-	instance: Ref<Instance<Props>[] | null>,
+	instance: Ref<InstanceRefType>,
 	callback: (tippyInstance: Instance<Props>) => void,
 ) => {
-	if (instance.value)
+	if (instance.value !== null)
 		for (const tippyInstance of castArray(instance.value))
@@ -29,23 +30,9 @@ callback(tippyInstance)
 export const useTippy = (
-	targets: Targets,
-	options: Partial<Props> & {
-		content: Ref<Content> | Content
-	},
-	// eslint-disable-next-line sonarjs/cognitive-complexity
+	targets: Array<Target> | Target,
+	options: Ref<Partial<Props>>,
 ) => {
-	const instance = ref<Instance<Props>[] | null>(null)
+	const instance = ref<InstanceRefType>(null)
 
 	const onMountCallbacks: Callback[] = []
 	onMounted(() => {
-		if (isRef(options.content)) {
-			watch(
-				options.content,
-				(newValue) =>
-					applyForEvery(instance, (tippyInstance) =>
-						tippyInstance.setContent(newValue),
-					),
-				{ immediate: true },
-			)
-		}
-
 		const unwrappedTargets = (() => {
@@ -60,3 +47,4 @@ if (isRef(targets)) return targets.value
 
-		instance.value = tippy(unwrappedTargets, options)
+		instance.value = tippy(unwrappedTargets, options.value)
+
 		onMountCallbacks.forEach((callback) => callback(instance.value))
@@ -68,21 +56,15 @@ })
 		applyForEvery(instance, (tippyInstance) => tippyInstance.destroy())
+
 		onUnmountCallbacks.forEach((callback) => callback(instance.value))
 	})
 
-	if (isReactive(options) || isRef(options)) {
-		const watchSource = isReactive(options) ? () => options : options
+	watch(
+		options,
+		() =>
+			applyForEvery(instance, (tippyInstance) =>
+				tippyInstance.setProps(options.value),
+			),
+		{ immediate: true },
+	)
 
-		watch(
-			watchSource,
-			() =>
-				applyForEvery(instance, (tippyInstance) =>
-					tippyInstance.setProps(options),
-				),
-			{
-				deep: true,
-				immediate: true,
-			},
-		)
-	}
-
 	return {
@@ -89,0 +71,0 @@ onMount: (callback: Callback) => onMountCallbacks.push(callback),

No alert changes

Improved metrics

Number of lines in readme file

37

increased by8.82%

Worsened metrics

Total package byte prevSize

9488

decreased by-11.44%

Lines of code

146

decreased by-17.05%

No dependency changes