New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@svelte-plugins/tooltips

Package Overview
Dependencies
Maintainers
0
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@svelte-plugins/tooltips - npm Package Compare versions

Comparing version

4.0.0-beta.0
to
4.0.0-beta.1

23

dist/action-tooltip.snap.js
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Components: Tooltip > should render the component 1`] = `
<body>
<div>
<div
class="tooltip animation-null top svelte-16lxf1i"
style="left: 0px; min-width: 200px; max-width: 200px; text-align: left; top: 0px;"
>
Hello World!
</div>
<div>
<!---->
<div
class="tooltip animation- top svelte-16lxf1i"
style="bottom: auto; right: auto; left: 0px; min-width: 200px; max-width: 200px; text-align: left; top: 0px;"
>
<!---->
Hello World!
<!--&lt;Action-tooltip&gt;-->
<!---->
</div>
</body>
</div>
`;

86

dist/action-tooltip.svelte.d.ts

@@ -1,53 +0,35 @@

/** @typedef {typeof __propDef.props} ActionTooltipProps */
/** @typedef {typeof __propDef.events} ActionTooltipEvents */
/** @typedef {typeof __propDef.slots} ActionTooltipSlots */
export default class ActionTooltip extends SvelteComponentTyped<{
targetElement?: HTMLElement | null | undefined;
action?: string | undefined;
content?: string | {
component: any;
props?: Record<string, any> | undefined;
} | undefined;
align?: string | undefined;
position?: string | undefined;
maxWidth?: number | undefined;
style?: Record<string, string> | null | undefined;
theme?: string | undefined;
animation?: string | undefined;
delay?: number | undefined;
arrow?: boolean | undefined;
autoPosition?: boolean | undefined;
show?: boolean | undefined;
}, {
[evt: string]: CustomEvent<any>;
}, {}> {
}
export type ActionTooltipProps = typeof __propDef.props;
export type ActionTooltipEvents = typeof __propDef.events;
export type ActionTooltipSlots = typeof __propDef.slots;
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
targetElement?: HTMLElement | null | undefined;
action?: string | undefined;
content?: string | {
component: any;
props?: Record<string, any> | undefined;
} | undefined;
align?: string | undefined;
position?: string | undefined;
maxWidth?: number | undefined;
style?: Record<string, string> | null | undefined;
theme?: string | undefined;
animation?: string | undefined;
delay?: number | undefined;
arrow?: boolean | undefined;
autoPosition?: boolean | undefined;
show?: boolean | undefined;
};
events: {
[evt: string]: CustomEvent<any>;
};
slots: {};
export default ActionTooltip;
type ActionTooltip = {
$on?(type: string, callback: (e: any) => void): () => void;
$set?(props: Partial<$$ComponentProps>): void;
};
export {};
declare const ActionTooltip: import("svelte").Component<{
targetElement?: any;
action?: string;
content?: string;
align?: string;
position?: string;
maxWidth?: number;
style?: any;
theme?: string;
animation?: string;
delay?: number;
arrow?: boolean;
autoPosition?: boolean;
show?: boolean;
}, {}, "">;
type $$ComponentProps = {
targetElement?: any;
action?: string;
content?: string;
align?: string;
position?: string;
maxWidth?: number;
style?: any;
theme?: string;
animation?: string;
delay?: number;
arrow?: boolean;
autoPosition?: boolean;
show?: boolean;
};

28

dist/action.js

@@ -0,1 +1,2 @@

import { mount, unmount } from 'svelte';
import Tooltip from './action-tooltip.svelte';

@@ -7,3 +8,6 @@

let action = props?.action || element.getAttribute('action') || 'hover';
const hideOnClickOutside = props?.hideOnClickOutside || element.getAttribute('hideOnClickOutside') || false;
const hideOnClickOutside =
props?.hideOnClickOutside ||
element.getAttribute('hideOnClickOutside') ||
false;

@@ -16,5 +20,5 @@ const detect = ({ target }) => {

const config = {
let config = {
...props,
targetElement: element
targetElement: element,
};

@@ -33,5 +37,3 @@

if (component) {
if (
!(action === 'click' && hideOnClickOutside)
) {
if (!(action === 'click' && hideOnClickOutside)) {
onHide();

@@ -46,6 +48,3 @@ }

if (!component) {
component = new Tooltip({
target: element,
props: config
});
component = mount(Tooltip, { target: element , props: config});
}

@@ -56,3 +55,3 @@ };

if (component) {
component.$destroy();
unmount(component);
component = null;

@@ -109,4 +108,11 @@ }

}
},
update(updatedProps) {
Object.assign(config, updatedProps);
if (component) {
component.$set(config);
}
}
};
};

14

dist/helpers.js

@@ -89,11 +89,11 @@ export const formatVariableKey = (str) => {

if (elementPosition === 'fixed') {
fixedOffsetTop +=
currentRect.top + window.scrollY;
fixedOffsetLeft +=
currentRect.left + window.scrollX;
fixedOffsetTop += currentRect.top + window.scrollY;
fixedOffsetLeft += currentRect.left + window.scrollX;
} else if (elementPosition === 'sticky') {
stickyOffsetTop += currentRect.top;
fixedOffsetLeft +=
currentRect.left + window.scrollX;
} else if (elementPosition === 'absolute' || elementPosition === 'relative') {
fixedOffsetLeft += currentRect.left + window.scrollX;
} else if (
elementPosition === 'absolute' ||
elementPosition === 'relative'
) {
if (elementPosition === 'absolute') {

@@ -100,0 +100,0 @@ cumulativeOffsetTop -= parseFloat(computedStyle.top) || 0;

33

dist/tooltip.snap.js
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Components: Tooltip > should render the component 1`] = `
<body>
<div>
<span
class="tooltip-container"
/>
<div
class="tooltip animation-null top svelte-1xktviv"
style="left: 0px; min-width: 200px; max-width: 200px; text-align: left; top: 0px;"
>
Hello World!
</div>
<div>
<!---->
<span
class="tooltip-container"
>
<!---->
</span>
<div
class="tooltip animation- top svelte-1xktviv"
style="bottom: auto; right: auto; left: 0px; min-width: 200px; max-width: 200px; text-align: left; top: 0px;"
>
<!---->
Hello World!
<!--&lt;Tooltip&gt;-->
<!---->
</div>
</body>
</div>
`;

96

dist/tooltip.svelte.d.ts

@@ -1,61 +0,37 @@

/** @typedef {typeof __propDef.props} TooltipProps */
/** @typedef {typeof __propDef.events} TooltipEvents */
/** @typedef {typeof __propDef.slots} TooltipSlots */
export default class Tooltip extends SvelteComponentTyped<{
action?: string | undefined;
content?: string | {
component: any;
props?: Record<string, any> | undefined;
} | undefined;
align?: string | undefined;
position?: string | undefined;
maxWidth?: number | undefined;
style?: {
[x: string]: any;
} | null | undefined;
theme?: string | undefined;
animation?: string | undefined;
delay?: number | undefined;
arrow?: boolean | undefined;
autoPosition?: boolean | undefined;
show?: boolean | undefined;
hideOnClickOutside?: boolean | undefined;
}, {
[evt: string]: CustomEvent<any>;
}, {
default: {};
}> {
}
export type TooltipProps = typeof __propDef.props;
export type TooltipEvents = typeof __propDef.events;
export type TooltipSlots = typeof __propDef.slots;
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
action?: string | undefined;
content?: string | {
component: any;
props?: Record<string, any> | undefined;
} | undefined;
align?: string | undefined;
position?: string | undefined;
maxWidth?: number | undefined;
style?: {
[x: string]: any;
} | null | undefined;
theme?: string | undefined;
animation?: string | undefined;
delay?: number | undefined;
arrow?: boolean | undefined;
autoPosition?: boolean | undefined;
show?: boolean | undefined;
hideOnClickOutside?: boolean | undefined;
};
events: {
[evt: string]: CustomEvent<any>;
};
slots: {
default: {};
};
export default Tooltip;
type Tooltip = {
$on?(type: string, callback: (e: any) => void): () => void;
$set?(props: Partial<$$ComponentProps>): void;
};
export {};
declare const Tooltip: import("svelte").Component<{
action?: string;
children: any;
content?: string;
align?: string;
position?: string;
maxWidth?: number;
theme?: string;
animation?: string;
hideOnClickOutside?: boolean;
delay?: number;
arrow?: boolean;
autoPosition?: boolean;
style?: any;
show?: boolean;
}, {}, "">;
type $$ComponentProps = {
action?: string;
children: any;
content?: string;
align?: string;
position?: string;
maxWidth?: number;
theme?: string;
animation?: string;
hideOnClickOutside?: boolean;
delay?: number;
arrow?: boolean;
autoPosition?: boolean;
style?: any;
show?: boolean;
};

2

package.json
{
"name": "@svelte-plugins/tooltips",
"version": "4.0.0-beta.0",
"version": "4.0.0-beta.1",
"license": "MIT",

@@ -5,0 +5,0 @@ "description": "A simple tooltip action and component designed for Svelte.",

dist/action-tooltip.svelte

Sorry, the diff of this file is not supported yet

dist/tooltip.svelte

Sorry, the diff of this file is not supported yet