diff --git a/.changeset/pre.json b/.changeset/pre.json index 99ddd64d8..69510b770 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -17,7 +17,6 @@ "@svelte-put/resize": "3.0.0", "@svelte-put/shortcut": "3.1.0", "@svelte-put/toc": "5.0.1", - "@svelte-put/tooltip": "1.0.1", "@svelte-put/preprocess-external-link": "0.0.0", "@svelte-put/preprocess-markdown": "0.0.0", "@svelte-put/async-stack": "0.0.0-next.0", @@ -79,3 +78,4 @@ "wise-points-own" ] } + diff --git a/README.md b/README.md index 7f9d67721..a797b7153 100644 --- a/README.md +++ b/README.md @@ -30,13 +30,14 @@ Useful svelte stuff to put in your projects | [@svelte-put/inline-svg][github.inline-svg] | dynamically inline SVGs | [![npm.inline-svg.badge]][npm.inline-svg] | [Changelog][github.inline-svg.changelog] | [![docs.badge]][docs.inline-svg] | | [@svelte-put/lockscroll][github.lockscroll] | lock scroll, hide scrollbar | [![npm.lockscroll.badge]][npm.lockscroll] | [Changelog][github.lockscroll.changelog] | [![docs.badge]][docs.lockscroll] | | [@svelte-put/movable][github.movable] | move node on mousedown | [![npm.movable.badge]][npm.movable] | [Changelog][github.movable.changelog] | [![docs.badge]][docs.movable] | +| [@svelte-put/preaction][github.preaction] | move node on mousedown | [![npm.preaction.badge]][npm.preaction] | [Changelog][github.preaction.changelog] | [![docs.badge]][docs.preaction] | +| [@svelte-put/popover][github.popover] | move node on mousedown | [![npm.popover.badge]][npm.popover] | [Changelog][github.popover.changelog] | [![docs.badge]][docs.popover] | | [@svelte-put/preprocess-auto-slug][github.preprocess-auto-slug] | auto add `id` and anchor to selected nodes | [![npm.preprocess-auto-slug.badge]][npm.preprocess-auto-slug] | [Changelog][github.preprocess-auto-slug.changelog] | [![docs.badge]][docs.preprocess-auto-slug] | | [@svelte-put/preprocess-external-link][github.preprocess-external-link] | auto add `id` and anchor to selected nodes | [![npm.preprocess-external-link.badge]][npm.preprocess-external-link] | [Changelog][github.preprocess-external-link.changelog] | [![docs.badge]][docs.preprocess-external-link] | | [@svelte-put/qr][github.qr] | render QR as `img` or `svg` | [![npm.qr.badge]][npm.qr] | [Changelog][github.qr.changelog] | [![docs.badge]][docs.qr] | | [@svelte-put/resize][github.resize] | wrapper for ResizeObserver | [![npm.resize.badge]][npm.resize] | [Changelog][github.resize.changelog] | [![docs.badge]][docs.resize] | | [@svelte-put/shortcut][github.shortcut] | add keyboard shortcuts to node | [![npm.shortcut.badge]][npm.shortcut] | [Changelog][github.shortcut.changelog] | [![docs.badge]][docs.shortcut] | | [@svelte-put/toc][github.toc] | action & utilities for building table of contents | [![npm.toc.badge]][npm.toc] | [Changelog][github.toc.changelog] | [![docs.badge]][docs.toc] | -| [@svelte-put/tooltip][github.tooltip] | type-safe headless tooltip builder | [![npm.tooltip.badge]][npm.tooltip] | [Changelog][github.tooltip.changelog] | [![docs.badge]][docs.tooltip] | @@ -125,6 +128,10 @@ pnpm turbo [npm.lockscroll]: https://www.npmjs.com/package/@svelte-put/lockscroll [npm.movable.badge]: https://img.shields.io/npm/v/@svelte-put/movable [npm.movable]: https://www.npmjs.com/package/@svelte-put/movable +[npm.popover.badge]: https://img.shields.io/npm/v/@svelte-put/popover +[npm.popover]: https://www.npmjs.com/package/@svelte-put/popover +[npm.preaction.badge]: https://img.shields.io/npm/v/@svelte-put/preaction +[npm.preaction]: https://www.npmjs.com/package/@svelte-put/preaction [npm.preprocess-auto-slug.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-auto-slug [npm.preprocess-auto-slug]: https://www.npmjs.com/package/@svelte-put/preprocess-auto-slug [npm.preprocess-external-link.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-external-link @@ -137,8 +144,6 @@ pnpm turbo [npm.shortcut]: https://www.npmjs.com/package/@svelte-put/shortcut [npm.toc.badge]: https://img.shields.io/npm/v/@svelte-put/toc [npm.toc]: https://www.npmjs.com/package/@svelte-put/toc -[npm.tooltip.badge]: https://img.shields.io/npm/v/@svelte-put/tooltip -[npm.tooltip]: https://www.npmjs.com/package/@svelte-put/tooltip @@ -157,12 +162,13 @@ pnpm turbo [docs.inline-svg]: https://svelte-put.vnphanquang.com/docs/inline-svg [docs.lockscroll]: https://svelte-put.vnphanquang.com/docs/lockscroll [docs.movable]: https://svelte-put.vnphanquang.com/docs/movable +[docs.preaction]: https://svelte-put.vnphanquang.com/docs/preaction +[docs.popover]: https://svelte-put.vnphanquang.com/docs/popover [docs.preprocess-auto-slug]: https://svelte-put.vnphanquang.com/docs/preprocess-auto-slug [docs.preprocess-external-link]: https://svelte-put.vnphanquang.com/docs/preprocess-external-link [docs.qr]: https://svelte-put.vnphanquang.com/docs/qr [docs.resize]: https://svelte-put.vnphanquang.com/docs/resize [docs.shortcut]: https://svelte-put.vnphanquang.com/docs/shortcut [docs.toc]: https://svelte-put.vnphanquang.com/docs/toc -[docs.tooltip]: https://svelte-put.vnphanquang.com/docs/tooltip [docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue diff --git a/packages/tooltip/CHANGELOG.md b/packages/tooltip/CHANGELOG.md deleted file mode 100644 index bdefe8ebd..000000000 --- a/packages/tooltip/CHANGELOG.md +++ /dev/null @@ -1,19 +0,0 @@ -# Changelog - -## 1.0.2 - -### Patch Changes - -- [`5ca7d70`](https://github.com/vnphanquang/svelte-put/commit/5ca7d701a61b6d2f90e7a6b21f644b8ad93fc33e) Thanks [@vnphanquang](https://github.com/vnphanquang)! - restrict to svelte 3 and 4 (not compatible with 5) - -## 1.0.1 - -### Patch Changes - -- [`bd5258c`](https://github.com/vnphanquang/svelte-put/commit/bd5258cd60acb9bb9b81015f362ac1bdad7a0f3f) Thanks [@vnphanquang](https://github.com/vnphanquang)! - update type of node to include `SVGElement` - -## 1.0.0 - -### Major Changes - -- [#212](https://github.com/vnphanquang/svelte-put/pull/212) [`6abadbf`](https://github.com/vnphanquang/svelte-put/commit/6abadbf3d013120291f5290f60f5accef32fa6b1) Thanks [@vnphanquang](https://github.com/vnphanquang)! - first generalized api, here be dragons diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md deleted file mode 100644 index b27e7b76a..000000000 --- a/packages/tooltip/README.md +++ /dev/null @@ -1,62 +0,0 @@ -
- -# `@svelte-put/tooltip` - -[![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl] - -Type-safe, headless, extensible tooltip builder via Svelte action `use:tooltip` - -
- -## `svelte-put` - -This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo]. - -## Usage & Documentation - -[See the dedicated documentation page here][docs]. - -## Quick Start - -```html - - - -``` - -## [Changelog][github.changelog] - - - -[github.monorepo]: https://github.com/vnphanquang/svelte-put -[github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/tooltip/CHANGELOG.md -[github.issues]: https://github.com/vnphanquang/svelte-put/issues?q= - - - -[npm.badge]: https://img.shields.io/npm/v/@svelte-put/tooltip -[npm]: https://www.npmjs.com/package/@svelte-put/tooltip -[bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/tooltip?label=minzipped -[bundlephobia]: https://bundlephobia.com/package/@svelte-put/tooltip -[repl]: https://svelte.dev/repl/ac411d28f87b4b6d9942e050fa29e0cd -[repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00 -[docs]: https://svelte-put.vnphanquang.com/docs/tooltip -[docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json deleted file mode 100644 index 1397bc177..000000000 --- a/packages/tooltip/package.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "name": "@svelte-put/tooltip", - "version": "1.0.2", - "description": "over-engineered, type-safe, headless, and extensible tooltip builder vs Svelte action", - "main": "src/index.js", - "module": "src/index.js", - "types": "types/index.d.ts", - "type": "module", - "exports": { - ".": { - "types": "./types/index.d.ts", - "import": "./src/index.js" - } - }, - "publishConfig": { - "access": "public" - }, - "files": [ - "src", - "types" - ], - "scripts": { - "lint": "eslint . --ignore-path=\"../../.eslintignore\"", - "format": "prettier --ignore-path ../../.prettierignore --write .", - "dts": "dts-buddy --write && publint", - "prepublishOnly": "turbo run dts --filter=@svelte-put/tooltip" - }, - "keywords": [ - "svelte", - "action", - "tooltip", - "headless", - "extensible", - "typescript", - "type-safe" - ], - "author": { - "email": "vnphanquang@gmail.com", - "name": "Quang Phan", - "url": "https://github.com/vnphanquang" - }, - "license": "MIT", - "homepage": "https://svelte-put.vnphanquang.com/docs/tooltip", - "repository": { - "type": "git", - "url": "git+https://github.com/vnphanquang/svelte-put.git", - "directory": "packages/tooltip" - }, - "bugs": { - "url": "https://github.com/vnphanquang/svelte-put/issues" - }, - "devDependencies": { - "@internals/tsconfig": "workspace:*" - }, - "peerDependencies": { - "svelte": "^5.0.0-next.172" - }, - "volta": { - "extends": "../../package.json" - } -} - diff --git a/packages/tooltip/src/index.js b/packages/tooltip/src/index.js deleted file mode 100644 index 9f04cf319..000000000 --- a/packages/tooltip/src/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// Copyright (c) Quang Phan. All rights reserved. Licensed under the MIT license. - -export * from './tooltip.js'; diff --git a/packages/tooltip/src/public.d.ts b/packages/tooltip/src/public.d.ts deleted file mode 100644 index be942bd6e..000000000 --- a/packages/tooltip/src/public.d.ts +++ /dev/null @@ -1,144 +0,0 @@ -import type { SvelteComponent, ComponentType } from 'svelte'; -import type { Action } from 'svelte/action'; - -/** */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export type TooltipComponentBaseProps = Record; - -/** */ -export type TooltipContent = - | string - | ComponentType> - | { - /** - * Svelte component to render as tooltip - */ - component: ComponentType>; - /** - * Props to pass to component, if any. Note that if required props are not passed down, - * a runtime error will be thrown. - */ - props?: Props; - }; - -/** */ -export type TooltipContainer = { - /** - * class name(s) to assign to tooltip container. Typically needed depending - * on the positioning strategy - */ - class?: - | string - | { - default?: string; - /** toggled on when tooltip is visible */ - visible?: string; - }; - /** - * HTML tag to render the tooltip container. - * Defaults to `div` - */ - tag?: string; - /** - * `Element` to render the tooltip container as child. - * Defaults to `parent` of the node action is placed on - */ - target?: 'parent' | 'self' | 'body' | Element | ((node: Element, tooltip: Element) => void); - /** - * number of milliseconds to debounce show / hide state of the tooltip. - * Defaults to `false` (show / hide immediately) - */ - debounce?: false | number; - /** - * config for handling of `pointer-events` on the container element - * Defaults to `true` - * - * - * By default `pointer-events` is set to `none` by default, and `auto` when triggered. - * Set to `false` to disable default behavior, or provide string(s) to - * corresponding states - */ - pointerEvents?: - | boolean - | { - default?: string; - /** value when tooltip is visible */ - visible?: string; - }; - /** - * the attribute to toggle in respond to tooltip's visibility state. - * Defaults to `data-visible`. - * - * - * Set to `false` to disable, or provide a string to use as attribute name. - */ - visibleAttribute?: boolean | string; - /** - * config for accessibility - * Defaults to `true` - * - * - * By default: - * - (for container element) `role` is set to `tooltip`, - * - (for container element) `id` is taken from `aria-describedby` of - * the node action is placed on (if any), - * or auto-generated from a global counter, - * - (for node on which action is used) `aria-describedby` is set to the `id` of - * the container element (if not already exists) - * - * Set to `false` to disable default behavior, or provide string(s) to - * the corresponding attributes - */ - aria?: - | boolean - | { - role?: string; - id?: string; - }; -}; - -/** */ -export type TooltipComputeContent = - | string - | SvelteComponent; - -/** */ -export type TooltipComputeParameter< - Props extends TooltipComponentBaseProps, - ComputeContent extends TooltipComputeContent, -> = { - node: Element; - tooltip: Element; - content: ComputeContent; -}; - -/** */ -export type TooltipCompute< - Props extends TooltipComponentBaseProps, - ComputeContent extends TooltipComputeContent, -> = ( - param: TooltipComputeParameter, -) => void | (() => void) | Promise void)>; - -/** */ -export type TooltipAttributes = { - /** if provided will be set to `id` of the tooltip element, auto-generated otherwise */ - 'aria-describedby'?: string; -}; - -/** */ -export type PreparedTooltipAction = Action< - Element, - Parameter | undefined, - TooltipAttributes ->; - -/** */ -export type TooltipParameter< - Props extends TooltipComponentBaseProps, - Content extends TooltipContent, - ComputeContent extends TooltipComputeContent, -> = TooltipContainer & { - content: Content; - compute?: TooltipCompute; -}; diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js deleted file mode 100644 index dc69c3cce..000000000 --- a/packages/tooltip/src/tooltip.js +++ /dev/null @@ -1,319 +0,0 @@ -import { debounce, isContentConfigDirectComponent } from './utils.js'; - -let autoincrement = 0; - -/** - * @template {Record} Events - * @template {Record} Slots - * @template {import('./public').TooltipComponentBaseProps} Props - * @overload - * @param {import('./public').TooltipContainer & { - * content: import('svelte').ComponentType>; - * compute?: import('./public').TooltipCompute>; - * }} param - * @returns {import('./public').PreparedTooltipAction} - */ -/** - * @template {Record} Events - * @template {Record} Slots - * @template {import('./public').TooltipComponentBaseProps} Props - * @overload - * @param {import('./public').TooltipContainer & { - * content: { - * component: import('svelte').ComponentType>; - * props?: Props, - * }, - * compute?: import('./public').TooltipCompute>; - * }} param - * @returns {import('./public').PreparedTooltipAction} - */ -/** - * @overload - * @param {import('./public').TooltipContainer & { - * content: string; - * compute?: import('./public').TooltipCompute<{}, string>; - * }} param - * @returns {import('./public').PreparedTooltipAction} - */ -/** - * @template {import('./public').TooltipComponentBaseProps} Props - * @template {import('./public').TooltipContent} Content - * @template {import('./public').TooltipComputeContent} ComputeContent - * @param {import('./public').TooltipParameter} param - * @returns {import('./public').PreparedTooltipAction} - */ -export function prepare(param) { - return function (node, composedParam) { - let content = param.content; - - let composedContent; - if (typeof content === 'string' && typeof composedParam === 'string') { - composedContent = composedParam; - } else if (isContentConfigDirectComponent(content)) { - composedContent = { - component: content, - props: composedParam, - }; - } else if ('component' in /** @type {any} */ (content)) { - composedContent = { - component: content.component, - props: { - ...content.props, - ...composedParam, - }, - }; - } else { - composedContent = content; - } - - return tooltip( - node, - /** @type {any} */ ({ - ...param, - content: composedContent, - }), - ); - }; -} -/** - * @template {Record} Events - * @template {Record} Slots - * @template {import('./public').TooltipComponentBaseProps} Props - * @template {import('./public').TooltipContent} Content - * @template {import('./public').TooltipComputeContent} ComputeContent - * @overload - * @param {Element} node - * @param {import('./public').TooltipContainer & { - * content: import('svelte').ComponentType>; - * compute?: import('./public').TooltipCompute>; - * }} param - * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>} - */ -/** - * @template {Record} Events - * @template {Record} Slots - * @template {import('./public').TooltipComponentBaseProps} Props - * @template {import('./public').TooltipContent} Content - * @template {import('./public').TooltipComputeContent} ComputeContent - * @overload - * @param {Element} node - * @param {import('./public').TooltipContainer & { - * content: { - * component: import('svelte').ComponentType>; - * props?: Props, - * }, - * compute?: import('./public').TooltipCompute>; - * }} param - * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>} - */ -/** - * @overload - * @param {Element} Node - * @param {import('./public').TooltipContainer & { - * content: string; - * compute?: import('./public').TooltipCompute<{}, string>; - * }} param - * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>} - */ -/** - * @template {import('./public').TooltipComponentBaseProps} Props - * @template {import('./public').TooltipContent} Content - * @template {import('./public').TooltipComputeContent} ComputeContent - * @param {Element} node - * @param {import('./public').TooltipParameter} param - * @returns {import('svelte/action').ActionReturn, import('./public').TooltipAttributes>} - */ -export function tooltip(node, param) { - const { tag = 'div', content, target = 'parent', compute, debounce: debounceMs } = param; - - let classes = { - default: '', - visible: '', - }; - if (typeof param.class === 'string') { - classes.default = param.class; - } else if (param.class) { - classes = { - ...classes, - ...param.class, - }; - } - - let pointerEvents = { - default: 'none', - visible: 'all', - }; - if (typeof param.pointerEvents === 'boolean') { - if (!param.pointerEvents) { - pointerEvents = { - default: '', - visible: '', - }; - } - } else { - pointerEvents = { - ...pointerEvents, - ...param.pointerEvents, - }; - } - - let visibleAttribute = ''; - if (param.visibleAttribute === true || param.visibleAttribute === undefined) { - visibleAttribute = 'data-visible'; - } else if (param.visibleAttribute) { - visibleAttribute = param.visibleAttribute; - } - - let aria = { role: '', id: '' }; - if (param.aria === undefined || param.aria === true) { - aria.role = 'tooltip'; - aria.id = node.getAttribute('aria-describedby') ?? `tooltip-${++autoincrement}`; - } else if (param.aria) { - aria.role = param.aria.role ?? 'tooltip'; - aria.id = - param.aria.id ?? node.getAttribute('aria-describedby') ?? `tooltip-${++autoincrement}`; - } - - const tooltip = document.createElement(tag); - if (aria.role) tooltip.role = aria.role; - if (aria.id) { - if (!node.hasAttribute('aria-describedby')) { - node.setAttribute('aria-describedby', aria.id); - } - tooltip.id = aria.id; - } - tooltip.style.pointerEvents = pointerEvents.default; - if (visibleAttribute) tooltip.setAttribute(visibleAttribute, 'false'); - if (classes.default) tooltip.classList.toggle(classes.default, true); - - if (target === 'parent') { - if (node.parentElement) { - if (node.nextSibling) { - node.parentElement.insertBefore(tooltip, node.nextSibling); - } else { - node.parentElement.appendChild(tooltip); - } - } else { - node.appendChild(tooltip); - } - } else if (target === 'body') { - document.body.appendChild(tooltip); - } else if (target === 'self') { - node.appendChild(tooltip); - } else if (typeof target === 'function') { - target(node, tooltip); - } else { - target.appendChild(tooltip); - } - - /** @type {string | import('svelte').SvelteComponent} */ - let computedContent; - /** @type {undefined | (() => void)} */ - let computeCleanUp = undefined; - const wait = 'requestIdleCallback' in window ? requestIdleCallback : setTimeout; - wait(() => { - if (typeof content === 'string') { - computedContent = tooltip.innerHTML = content; - } else if (isContentConfigDirectComponent(content)) { - computedContent = new content({ target: tooltip }); - } else { - const { component: Component, props } = content; - computedContent = new Component({ - target: tooltip, - props: /** @type {any} */ ({ - ...props, - visible: false, - }), - }); - } - const computed = compute?.({ - node, - tooltip, - content: /** @type {any} */ (computedContent), - }); - if (typeof computed === 'function') { - computeCleanUp = computed; - } else if (computed !== undefined) { - computed.then((resolved) => { - if (resolved) { - computeCleanUp = resolved; - } - }); - } - }); - - let isMouseWithinNode = false; - let isMouseWithinTooltip = false; - let isNodeInFocus = false; - function onMouseEnterNode() { - isMouseWithinNode = true; - debounceToggle(); - } - function onMouseLeaveNode() { - isMouseWithinNode = false; - debounceToggle(); - } - function onFocusNode() { - isNodeInFocus = true; - debounceToggle(); - } - function onBlurNode() { - isNodeInFocus = false; - debounceToggle(); - } - function onMouseEnterTooltip() { - isMouseWithinTooltip = true; - debounceToggle(); - } - function onMouseLeaveTooltip() { - isMouseWithinTooltip = false; - debounceToggle(); - } - - /** - * @param {boolean | undefined} force - */ - function toggle(force = undefined) { - const visible = force ?? (isMouseWithinNode || isMouseWithinTooltip || isNodeInFocus); - if (visibleAttribute) tooltip.setAttribute(visibleAttribute, visible.toString()); - tooltip.style.pointerEvents = visible ? pointerEvents.visible : pointerEvents.default; - if (classes.visible) tooltip.classList.toggle(classes.visible, visible); - if (typeof computedContent !== 'string') computedContent.$set(/** @type {any} */ ({ visible })); - if (visible) { - window.addEventListener('keydown', listenForEscape); - } else { - window.removeEventListener('keydown', listenForEscape); - } - } - const debounceToggle = debounce(toggle, debounceMs || 0); - - /** - * @param {KeyboardEvent} e - */ - function listenForEscape(e) { - if (e.key === 'Escape') { - debounceToggle(false); - } - } - - node.addEventListener('mouseenter', onMouseEnterNode); - node.addEventListener('mouseleave', onMouseLeaveNode); - node.addEventListener('focus', onFocusNode); - node.addEventListener('blur', onBlurNode); - tooltip.addEventListener('mouseenter', onMouseEnterTooltip); - tooltip.addEventListener('mouseleave', onMouseLeaveTooltip); - - return { - destroy() { - node.removeEventListener('mouseenter', onMouseEnterNode); - node.removeEventListener('mouseleave', onMouseLeaveNode); - node.removeEventListener('focus', onFocusNode); - node.removeEventListener('blur', onBlurNode); - tooltip.removeEventListener('mouseenter', onMouseEnterTooltip); - tooltip.removeEventListener('mouseleave', onMouseLeaveTooltip); - window.removeEventListener('keydown', listenForEscape); - - computeCleanUp?.(); - }, - }; -} diff --git a/packages/tooltip/src/utils.js b/packages/tooltip/src/utils.js deleted file mode 100644 index 281f294fd..000000000 --- a/packages/tooltip/src/utils.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @template {any[]} Args - * @template {(...args: Args) => void} Func - * @param {Func} callback - * @param {number} ms - * @returns {(...args: Args) => void} - */ -export function debounce(callback, ms) { - /** @type {ReturnType} */ - let timeoutId; - /** - * @param {Args} args - */ - return function (...args) { - clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - callback.apply(null, args); - }, ms); - }; -} - -/** - * @template {import('./public').TooltipComponentBaseProps} Props - * @param {import('./public').TooltipContent} content - * @returns {content is (import('svelte').ComponentType>)} - */ -export function isContentConfigDirectComponent(content) { - return typeof content !== 'string' && !('component' in content); -} diff --git a/packages/tooltip/tsconfig.json b/packages/tooltip/tsconfig.json deleted file mode 100644 index ff5b5bbf5..000000000 --- a/packages/tooltip/tsconfig.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "include": ["src/**/*"], - "extends": "@internals/tsconfig/base.package.js.json" -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d92fe69b6..0a60f3a0d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -402,16 +402,6 @@ importers: specifier: workspace:* version: link:../../internals/tsconfig - packages/tooltip: - dependencies: - svelte: - specifier: ^5.0.0-next.172 - version: 5.0.0-next.172 - devDependencies: - '@internals/tsconfig': - specifier: workspace:* - version: link:../../internals/tsconfig - sites/docs: dependencies: '@floating-ui/dom': diff --git a/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte b/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte index ab95c98f2..1326dff58 100644 --- a/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte +++ b/sites/docs/src/routes/docs/(package)/tooltip/+page.md.svelte @@ -1,5 +1,7 @@ ## Deprecation Notice +This package has been dropped in favor of [@svelte-put/popover](/docs/popover). `@svelte-put/popover` is a more generic implementation that relies on [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Element/popover), which has landed in baseline in 2024 and provides better fallback for progressive enhancement in case Javascript is not available. + --- Happy migrating 😅