diff --git a/.changeset/hungry-taxis-develop.md b/.changeset/hungry-taxis-develop.md new file mode 100644 index 000000000..1031559d8 --- /dev/null +++ b/.changeset/hungry-taxis-develop.md @@ -0,0 +1,9 @@ +--- +'@svelte-put/clickoutside': minor +'@svelte-put/dragscroll': minor +'@svelte-put/intersect': minor +'@svelte-put/movable': minor +'@svelte-put/shortcut': minor +--- + +deprecate global ambient typing in favor of the [new action typings helper](https://github.com/sveltejs/svelte/pull/7805/files) diff --git a/packages/actions/clickoutside/api/clickoutside.api.md b/packages/actions/clickoutside/api/clickoutside.api.md index 1ab61abd3..12068ed6d 100644 --- a/packages/actions/clickoutside/api/clickoutside.api.md +++ b/packages/actions/clickoutside/api/clickoutside.api.md @@ -3,19 +3,19 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import type { Action } from 'svelte/action'; + // @public -export function clickoutside( - node: HTMLElement, - parameters?: Partial, -): { - update(update: ClickOutsideParameters): void; - destroy(): void; -}; +export const clickoutside: Action< + HTMLElement, + Partial, + ClickOutsideAttributes +>; // @public export interface ClickOutsideAttributes { // (undocumented) - onclickoutside?: (event: CustomEvent) => void; + 'on:clickoutside'?: (event: CustomEvent) => void; } // @public diff --git a/packages/actions/clickoutside/api/docs/clickoutside.clickoutside.md b/packages/actions/clickoutside/api/docs/clickoutside.clickoutside.md index 5d71117ec..5400aeaa7 100644 --- a/packages/actions/clickoutside/api/docs/clickoutside.clickoutside.md +++ b/packages/actions/clickoutside/api/docs/clickoutside.clickoutside.md @@ -2,33 +2,16 @@ [Home](./index.md) > [@svelte-put/clickoutside](./clickoutside.md) > [clickoutside](./clickoutside.clickoutside.md) -## clickoutside() function +## clickoutside variable Dispatch a `clickoutside` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) on click outside of node Signature: ```typescript -export declare function clickoutside( - node: HTMLElement, - parameters?: Partial, -): { - update(update: ClickOutsideParameters): void; - destroy(): void; -}; +clickoutside: Action, ClickOutsideAttributes>; ``` -## Parameters - -| Parameter | Type | Description | -| ---------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| node | HTMLElement | node outside of which click event will trigger clickoutside | -| parameters | Partial<[ClickOutsideParameters](./clickoutside.clickoutsideparameters.md)> | (Optional) instructions for clickoutside behavior | - -Returns: - -{ update(update: [ClickOutsideParameters](./clickoutside.clickoutsideparameters.md)): void; destroy(): void; } - ## Remarks As with any svelte action, `clickoutside` should be use with element and not component. diff --git a/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.onclickoutside.md b/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes._on_clickoutside_.md similarity index 53% rename from packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.onclickoutside.md rename to packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes._on_clickoutside_.md index b65463034..a72aab08e 100644 --- a/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.onclickoutside.md +++ b/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes._on_clickoutside_.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@svelte-put/clickoutside](./clickoutside.md) > [ClickOutsideAttributes](./clickoutside.clickoutsideattributes.md) > [onclickoutside](./clickoutside.clickoutsideattributes.onclickoutside.md) +[Home](./index.md) > [@svelte-put/clickoutside](./clickoutside.md) > [ClickOutsideAttributes](./clickoutside.clickoutsideattributes.md) > ["on:clickoutside"](./clickoutside.clickoutsideattributes._on_clickoutside_.md) -## ClickOutsideAttributes.onclickoutside property +## ClickOutsideAttributes."on:clickoutside" property Signature: ```typescript -onclickoutside?: (event: CustomEvent) => void; +'on:clickoutside'?: (event: CustomEvent) => void; ``` diff --git a/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.md b/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.md index 5f9a4faa5..b8c03b773 100644 --- a/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.md +++ b/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.md @@ -27,6 +27,6 @@ The ambient types for these extended attributes should be available automaticall ## Properties -| Property | Modifiers | Type | Description | -| -------------------------------------------------------------------------- | --------- | -------------------------------------------- | ----------------- | -| [onclickoutside?](./clickoutside.clickoutsideattributes.onclickoutside.md) | | (event: CustomEvent<Event>) => void | (Optional) | +| Property | Modifiers | Type | Description | +| -------------------------------------------------------------------------------- | --------- | ------------------------------------------------- | ----------------- | +| ["on:clickoutside"?](./clickoutside.clickoutsideattributes._on_clickoutside_.md) | | (event: CustomEvent<MouseEvent>) => void | (Optional) | diff --git a/packages/actions/clickoutside/api/docs/clickoutside.md b/packages/actions/clickoutside/api/docs/clickoutside.md index 19c074dc1..3b33e5429 100644 --- a/packages/actions/clickoutside/api/docs/clickoutside.md +++ b/packages/actions/clickoutside/api/docs/clickoutside.md @@ -6,12 +6,6 @@ `use:clickoutside` - svelte action that emits the `clickoutside` event when the user clicks outside of a node. -## Functions - -| Function | Description | -| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| [clickoutside(node, parameters)](./clickoutside.clickoutside.md) | Dispatch a clickoutside [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) on click outside of node | - ## Interfaces | Interface | Description | @@ -19,3 +13,9 @@ | [ClickOutsideAttributes](./clickoutside.clickoutsideattributes.md) | Additional attributes extended from svelte-put/clickoutside | | [ClickOutsideLimit](./clickoutside.clickoutsidelimit.md) | Limit to which the click event will trigger clickoutside | | [ClickOutsideParameters](./clickoutside.clickoutsideparameters.md) | svelte action parameters to config behavior of clickoutside | + +## Variables + +| Variable | Description | +| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| [clickoutside](./clickoutside.clickoutside.md) | Dispatch a clickoutside [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) on click outside of node | diff --git a/packages/actions/clickoutside/src/clickoutside.ts b/packages/actions/clickoutside/src/clickoutside.ts index 57e23dcf4..a83a7a57e 100644 --- a/packages/actions/clickoutside/src/clickoutside.ts +++ b/packages/actions/clickoutside/src/clickoutside.ts @@ -1,13 +1,7 @@ -import { ClickOutsideAttributes, ClickOutsideParameters } from './clickoutside.types'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import type { Action, ActionReturn } from 'svelte/action'; -// ambient typing -declare global { - // eslint-disable-next-line @typescript-eslint/no-namespace - export namespace svelteHTML { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface HTMLAttributes extends ClickOutsideAttributes {} - } -} +import { ClickOutsideAttributes, ClickOutsideParameters } from './clickoutside.types'; /** * Dispatch a `clickoutside` {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent } on click outside of node @@ -63,12 +57,13 @@ declare global { * * @param node - node outside of which `click` event will trigger `clickoutside` * @param parameters - instructions for `clickoutside` behavior - * @returns + * @returns svelte {@link ActionReturn} */ -export function clickoutside( - node: HTMLElement, - parameters: Partial = { enabled: true }, -) { +export const clickoutside: Action< + HTMLElement, + Partial, + ClickOutsideAttributes +> = function (node, parameters = { enabled: true }) { let { enabled, eventType, nodeForEvent, options, capture } = resolveParameters(parameters); const handle = (event: Event) => { if (node && !node.contains(event.target as Node) && !event.defaultPrevented) { @@ -81,7 +76,7 @@ export function clickoutside( } return { - update(update: ClickOutsideParameters) { + update(update) { nodeForEvent.removeEventListener(eventType, handle, capture); ({ enabled, eventType, nodeForEvent, options, capture } = resolveParameters(update)); if (enabled) nodeForEvent.addEventListener(eventType, handle, options); @@ -90,7 +85,7 @@ export function clickoutside( nodeForEvent.removeEventListener(eventType, handle, capture); }, }; -} +}; /** @internal */ export function resolveParameters(parameters: Partial) { diff --git a/packages/actions/clickoutside/src/clickoutside.types.ts b/packages/actions/clickoutside/src/clickoutside.types.ts index 4bdb0c708..b29013f6d 100644 --- a/packages/actions/clickoutside/src/clickoutside.types.ts +++ b/packages/actions/clickoutside/src/clickoutside.types.ts @@ -19,7 +19,7 @@ * ``` */ export interface ClickOutsideAttributes { - 'on:clickoutside'?: (event: CustomEvent) => void; + 'on:clickoutside'?: (event: CustomEvent) => void; } /** diff --git a/packages/actions/dragscroll/api/docs/dragscroll.dragscroll.md b/packages/actions/dragscroll/api/docs/dragscroll.dragscroll.md index 85436f30f..8e0559535 100644 --- a/packages/actions/dragscroll/api/docs/dragscroll.dragscroll.md +++ b/packages/actions/dragscroll/api/docs/dragscroll.dragscroll.md @@ -2,29 +2,12 @@ [Home](./index.md) > [@svelte-put/dragscroll](./dragscroll.md) > [dragscroll](./dragscroll.dragscroll.md) -## dragscroll() function +## dragscroll variable svelte action `use:dragscroll` for adding 'drag-to-scroll' behavior Signature: ```typescript -export declare function dragscroll( - node: HTMLElement, - parameters?: Partial, -): { - update(update?: Partial): void; - destroy(): void; -}; +dragscroll: Action>; ``` - -## Parameters - -| Parameter | Type | Description | -| ---------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------- | -| node | HTMLElement | node to apply the action | -| parameters | Partial<[DragScrollParameters](./dragscroll.dragscrollparameters.md)> | (Optional) instructions for customizing action behavior | - -Returns: - -{ update(update?: Partial<[DragScrollParameters](./dragscroll.dragscrollparameters.md)>): void; destroy(): void; } diff --git a/packages/actions/dragscroll/api/docs/dragscroll.md b/packages/actions/dragscroll/api/docs/dragscroll.md index 1203a612c..58b8d225b 100644 --- a/packages/actions/dragscroll/api/docs/dragscroll.md +++ b/packages/actions/dragscroll/api/docs/dragscroll.md @@ -6,14 +6,14 @@ svelte action `use:dragscroll` for drag-to-scroll behavior -## Functions - -| Function | Description | -| ---------------------------------------------------------- | ------------------------------------------------------------------------------ | -| [dragscroll(node, parameters)](./dragscroll.dragscroll.md) | svelte action use:dragscroll for adding 'drag-to-scroll' behavior | - ## Interfaces | Interface | Description | | ------------------------------------------------------------ | ----------------------------------------------------------- | | [DragScrollParameters](./dragscroll.dragscrollparameters.md) | instruction for how use:dragscroll will behave | + +## Variables + +| Variable | Description | +| ---------------------------------------- | ------------------------------------------------------------------------------ | +| [dragscroll](./dragscroll.dragscroll.md) | svelte action use:dragscroll for adding 'drag-to-scroll' behavior | diff --git a/packages/actions/dragscroll/api/dragscroll.api.md b/packages/actions/dragscroll/api/dragscroll.api.md index 86d5dc972..c56a5c2d7 100644 --- a/packages/actions/dragscroll/api/dragscroll.api.md +++ b/packages/actions/dragscroll/api/dragscroll.api.md @@ -3,14 +3,10 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import type { Action } from 'svelte/action'; + // @public -export function dragscroll( - node: HTMLElement, - parameters?: Partial, -): { - update(update?: Partial): void; - destroy(): void; -}; +export const dragscroll: Action>; // @public export interface DragScrollParameters { diff --git a/packages/actions/dragscroll/src/dragscroll.action.ts b/packages/actions/dragscroll/src/dragscroll.action.ts index 1b08dc3fb..598b8b0d0 100644 --- a/packages/actions/dragscroll/src/dragscroll.action.ts +++ b/packages/actions/dragscroll/src/dragscroll.action.ts @@ -1,3 +1,6 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import type { Action, ActionReturn } from 'svelte/action'; + import type { DragScrollParameters } from './dragscroll.types'; /** @@ -27,9 +30,12 @@ function resolveParameters(parameters: Partial = {}) { * * @param node - node to apply the action * @param parameters - instructions for customizing action behavior - * @returns + * @returns svelte {@link ActionReturn} */ -export function dragscroll(node: HTMLElement, parameters: Partial = {}) { +export const dragscroll: Action> = function ( + node, + parameters = {}, +) { let isDown = false; let startX: number; let startY: number; @@ -97,7 +103,7 @@ export function dragscroll(node: HTMLElement, parameters: Partial = {}) { + update(update = {}) { removeEvents(); ({ enabled, axes, events, cursor } = resolveParameters(update)); changeCursor(); @@ -107,4 +113,4 @@ export function dragscroll(node: HTMLElement, parameters: PartialSignature: ```typescript -export declare function intersect( - node: HTMLElement, - parameters?: IntersectParameters, -): { - update(update: IntersectParameters): void; - destroy(): void; -}; +intersect: Action; ``` -## Parameters - -| Parameter | Type | Description | -| ---------- | --------------------------------------------------------- | ------------------------------------------ | -| node | HTMLElement | HTMLElement to observe | -| parameters | [IntersectParameters](./intersect.intersectparameters.md) | (Optional) svelte action parameters | - -Returns: - -{ update(update: [IntersectParameters](./intersect.intersectparameters.md)): void; destroy(): void; } - -svelte action interface - ## Remarks As with any svelte action, `intersect` should be use with element and not component. diff --git a/packages/actions/intersect/api/docs/intersect.intersectattributes.onintersect.md b/packages/actions/intersect/api/docs/intersect.intersectattributes._on_intersect_.md similarity index 57% rename from packages/actions/intersect/api/docs/intersect.intersectattributes.onintersect.md rename to packages/actions/intersect/api/docs/intersect.intersectattributes._on_intersect_.md index eac7ab13e..31c8f531e 100644 --- a/packages/actions/intersect/api/docs/intersect.intersectattributes.onintersect.md +++ b/packages/actions/intersect/api/docs/intersect.intersectattributes._on_intersect_.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@svelte-put/intersect](./intersect.md) > [IntersectAttributes](./intersect.intersectattributes.md) > [onintersect](./intersect.intersectattributes.onintersect.md) +[Home](./index.md) > [@svelte-put/intersect](./intersect.md) > [IntersectAttributes](./intersect.intersectattributes.md) > ["on:intersect"](./intersect.intersectattributes._on_intersect_.md) -## IntersectAttributes.onintersect property +## IntersectAttributes."on:intersect" property Signature: ```typescript -onintersect?: (event: CustomEvent) => void; +'on:intersect'?: (event: CustomEvent) => void; ``` diff --git a/packages/actions/intersect/api/docs/intersect.intersectattributes.onintersectonce.md b/packages/actions/intersect/api/docs/intersect.intersectattributes._on_intersectonce_.md similarity index 55% rename from packages/actions/intersect/api/docs/intersect.intersectattributes.onintersectonce.md rename to packages/actions/intersect/api/docs/intersect.intersectattributes._on_intersectonce_.md index cbdcf2f75..173dc39f8 100644 --- a/packages/actions/intersect/api/docs/intersect.intersectattributes.onintersectonce.md +++ b/packages/actions/intersect/api/docs/intersect.intersectattributes._on_intersectonce_.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@svelte-put/intersect](./intersect.md) > [IntersectAttributes](./intersect.intersectattributes.md) > [onintersectonce](./intersect.intersectattributes.onintersectonce.md) +[Home](./index.md) > [@svelte-put/intersect](./intersect.md) > [IntersectAttributes](./intersect.intersectattributes.md) > ["on:intersectonce"](./intersect.intersectattributes._on_intersectonce_.md) -## IntersectAttributes.onintersectonce property +## IntersectAttributes."on:intersectonce" property Signature: ```typescript -onintersectonce?: (event: CustomEvent) => void; +'on:intersectonce'?: (event: CustomEvent) => void; ``` diff --git a/packages/actions/intersect/api/docs/intersect.intersectattributes.md b/packages/actions/intersect/api/docs/intersect.intersectattributes.md index f1fb277fb..03d0b775c 100644 --- a/packages/actions/intersect/api/docs/intersect.intersectattributes.md +++ b/packages/actions/intersect/api/docs/intersect.intersectattributes.md @@ -27,7 +27,7 @@ The ambient types for these extended attributes should be available automaticall ## Properties -| Property | Modifiers | Type | Description | -| ---------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------ | ----------------- | -| [onintersect?](./intersect.intersectattributes.onintersect.md) | | (event: CustomEvent<[IntersectDetail](./intersect.intersectdetail.md)>) => void | (Optional) | -| [onintersectonce?](./intersect.intersectattributes.onintersectonce.md) | | (event: CustomEvent<[IntersectDetail](./intersect.intersectdetail.md)>) => void | (Optional) | +| Property | Modifiers | Type | Description | +| ---------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------ | ----------------- | +| ["on:intersect"?](./intersect.intersectattributes._on_intersect_.md) | | (event: CustomEvent<[IntersectDetail](./intersect.intersectdetail.md)>) => void | (Optional) | +| ["on:intersectonce"?](./intersect.intersectattributes._on_intersectonce_.md) | | (event: CustomEvent<[IntersectDetail](./intersect.intersectdetail.md)>) => void | (Optional) | diff --git a/packages/actions/intersect/api/docs/intersect.md b/packages/actions/intersect/api/docs/intersect.md index eeb4b86f3..8c7da0562 100644 --- a/packages/actions/intersect/api/docs/intersect.md +++ b/packages/actions/intersect/api/docs/intersect.md @@ -6,12 +6,6 @@ svelte action - `use:intersect` svelte action that wraps IntersectionObserver -## Functions - -| Function | Description | -| ------------------------------------------------------- | ------------------------------------------------------ | -| [intersect(node, parameters)](./intersect.intersect.md) | Create an IntersectionObserver that observers the node | - ## Interfaces | Interface | Description | @@ -19,3 +13,9 @@ svelte action - `use:intersect` svelte action that wraps IntersectionObserver | [IntersectAttributes](./intersect.intersectattributes.md) | Additional attributes extended from svelte-put/intersect | | [IntersectDetail](./intersect.intersectdetail.md) | detail payload for intersect and intersectonce CustomEvent | | [IntersectParameters](./intersect.intersectparameters.md) | svelte action parameters to config behavior of movable | + +## Variables + +| Variable | Description | +| ------------------------------------- | ------------------------------------------------------ | +| [intersect](./intersect.intersect.md) | Create an IntersectionObserver that observers the node | diff --git a/packages/actions/intersect/api/intersect.api.md b/packages/actions/intersect/api/intersect.api.md index 0a3e96261..777136c80 100644 --- a/packages/actions/intersect/api/intersect.api.md +++ b/packages/actions/intersect/api/intersect.api.md @@ -3,21 +3,17 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import type { Action } from 'svelte/action'; + // @public -export function intersect( - node: HTMLElement, - parameters?: IntersectParameters, -): { - update(update: IntersectParameters): void; - destroy(): void; -}; +export const intersect: Action; // @public export interface IntersectAttributes { // (undocumented) - onintersect?: (event: CustomEvent) => void; + 'on:intersect'?: (event: CustomEvent) => void; // (undocumented) - onintersectonce?: (event: CustomEvent) => void; + 'on:intersectonce'?: (event: CustomEvent) => void; } // @public diff --git a/packages/actions/intersect/src/intersect.ts b/packages/actions/intersect/src/intersect.ts index 0a2e8ffb2..bbabf8e75 100644 --- a/packages/actions/intersect/src/intersect.ts +++ b/packages/actions/intersect/src/intersect.ts @@ -1,13 +1,7 @@ -import { IntersectAttributes, IntersectDetail, IntersectParameters } from './intersect.types'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import type { Action, ActionReturn } from 'svelte/action'; -// ambient typing -declare global { - // eslint-disable-next-line @typescript-eslint/no-namespace - export namespace svelteHTML { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface HTMLAttributes extends IntersectAttributes {} - } -} +import { IntersectAttributes, IntersectDetail, IntersectParameters } from './intersect.types'; /** * Create an IntersectionObserver that observers the node @@ -100,9 +94,12 @@ declare global { * * @param node - HTMLElement to observe * @param parameters - svelte action parameters - * @returns svelte action interface + * @returns svelte {@link ActionReturn} */ -export function intersect(node: HTMLElement, parameters: IntersectParameters = { enabled: true }) { +export const intersect: Action = function ( + node, + parameters = { enabled: true }, +) { let hasIntersect = false; let previousY = 0; @@ -135,7 +132,7 @@ export function intersect(node: HTMLElement, parameters: IntersectParameters = { observer.observe(node); } return { - update(update: IntersectParameters) { + update(update) { update = { enabled: true, ...update }; if (!enabled && update.enabled) { @@ -167,4 +164,4 @@ export function intersect(node: HTMLElement, parameters: IntersectParameters = { observer.disconnect(); }, }; -} +}; diff --git a/packages/actions/movable/api/docs/movable.md b/packages/actions/movable/api/docs/movable.md index 6e348cfd0..af0036bc4 100644 --- a/packages/actions/movable/api/docs/movable.md +++ b/packages/actions/movable/api/docs/movable.md @@ -6,12 +6,6 @@ svelte action - `use:movable` move node on mousedown -## Functions - -| Function | Description | -| ------------------------------------------------- | ----------------------------------------------------------------------------- | -| [movable(node, parameters)](./movable.movable.md) | Trigger node displacement on mousedown (via position.left & position.top) | - ## Interfaces | Interface | Description | @@ -21,6 +15,12 @@ svelte action - `use:movable` move node on mousedown | [MovableLimit](./movable.movablelimit.md) | The limit within which node can be moved | | [MovableParameters](./movable.movableparameters.md) | svelte action parameters to config behavior of movable | +## Variables + +| Variable | Description | +| ------------------------------- | ----------------------------------------------------------------------------- | +| [movable](./movable.movable.md) | Trigger node displacement on mousedown (via position.left & position.top) | + ## Type Aliases | Type Alias | Description | diff --git a/packages/actions/movable/api/docs/movable.movable.md b/packages/actions/movable/api/docs/movable.movable.md index c983f7e47..9fa7c5f2d 100644 --- a/packages/actions/movable/api/docs/movable.movable.md +++ b/packages/actions/movable/api/docs/movable.movable.md @@ -2,35 +2,16 @@ [Home](./index.md) > [@svelte-put/movable](./movable.md) > [movable](./movable.movable.md) -## movable() function +## movable variable Trigger node displacement on mousedown (via position.left & position.top) Signature: ```typescript -export declare function movable( - node: HTMLElement, - parameters?: MovableParameters, -): { - update(update?: MovableParameters): void; - destroy(): void; -}; +movable: Action; ``` -## Parameters - -| Parameter | Type | Description | -| ---------- | --------------------------------------------------- | ------------------------------------------ | -| node | HTMLElement | HTMLElement to be moved | -| parameters | [MovableParameters](./movable.movableparameters.md) | (Optional) svelte action parameters | - -Returns: - -{ update(update?: [MovableParameters](./movable.movableparameters.md)): void; destroy(): void; } - -svelte action interface - ## Remarks As with any svelte action, `movable` should be use with element and not component. diff --git a/packages/actions/movable/api/docs/movable.movableattributes._on_movableend_.md b/packages/actions/movable/api/docs/movable.movableattributes._on_movableend_.md new file mode 100644 index 000000000..98b51c4ef --- /dev/null +++ b/packages/actions/movable/api/docs/movable.movableattributes._on_movableend_.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@svelte-put/movable](./movable.md) > [MovableAttributes](./movable.movableattributes.md) > ["on:movableend"](./movable.movableattributes._on_movableend_.md) + +## MovableAttributes."on:movableend" property + +Signature: + +```typescript +'on:movableend'?: (event: CustomEvent) => void; +``` diff --git a/packages/actions/movable/api/docs/movable.movableattributes._on_movablestart_.md b/packages/actions/movable/api/docs/movable.movableattributes._on_movablestart_.md new file mode 100644 index 000000000..e8501ae53 --- /dev/null +++ b/packages/actions/movable/api/docs/movable.movableattributes._on_movablestart_.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [@svelte-put/movable](./movable.md) > [MovableAttributes](./movable.movableattributes.md) > ["on:movablestart"](./movable.movableattributes._on_movablestart_.md) + +## MovableAttributes."on:movablestart" property + +Signature: + +```typescript +'on:movablestart'?: (event: CustomEvent) => void; +``` diff --git a/packages/actions/movable/api/docs/movable.movableattributes.md b/packages/actions/movable/api/docs/movable.movableattributes.md index 174a96c12..30696e606 100644 --- a/packages/actions/movable/api/docs/movable.movableattributes.md +++ b/packages/actions/movable/api/docs/movable.movableattributes.md @@ -27,7 +27,7 @@ The ambient types for these extended attributes should be available automaticall ## Properties -| Property | Modifiers | Type | Description | -| ---------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------ | ----------------- | -| [onmovableend?](./movable.movableattributes.onmovableend.md) | | (event: CustomEvent<[MovableEventDetails](./movable.movableeventdetails.md)>) => void | (Optional) | -| [onmovablestart?](./movable.movableattributes.onmovablestart.md) | | (event: CustomEvent<[MovableEventDetails](./movable.movableeventdetails.md)>) => void | (Optional) | +| Property | Modifiers | Type | Description | +| ---------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------ | ----------------- | +| ["on:movableend"?](./movable.movableattributes._on_movableend_.md) | | (event: CustomEvent<[MovableEventDetails](./movable.movableeventdetails.md)>) => void | (Optional) | +| ["on:movablestart"?](./movable.movableattributes._on_movablestart_.md) | | (event: CustomEvent<[MovableEventDetails](./movable.movableeventdetails.md)>) => void | (Optional) | diff --git a/packages/actions/movable/api/docs/movable.movableattributes.onmovableend.md b/packages/actions/movable/api/docs/movable.movableattributes.onmovableend.md deleted file mode 100644 index 0aa72098d..000000000 --- a/packages/actions/movable/api/docs/movable.movableattributes.onmovableend.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/movable](./movable.md) > [MovableAttributes](./movable.movableattributes.md) > [onmovableend](./movable.movableattributes.onmovableend.md) - -## MovableAttributes.onmovableend property - -Signature: - -```typescript -onmovableend?: (event: CustomEvent) => void; -``` diff --git a/packages/actions/movable/api/docs/movable.movableattributes.onmovablestart.md b/packages/actions/movable/api/docs/movable.movableattributes.onmovablestart.md deleted file mode 100644 index e7669af81..000000000 --- a/packages/actions/movable/api/docs/movable.movableattributes.onmovablestart.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/movable](./movable.md) > [MovableAttributes](./movable.movableattributes.md) > [onmovablestart](./movable.movableattributes.onmovablestart.md) - -## MovableAttributes.onmovablestart property - -Signature: - -```typescript -onmovablestart?: (event: CustomEvent) => void; -``` diff --git a/packages/actions/movable/api/movable.api.md b/packages/actions/movable/api/movable.api.md index 1e92bce6d..7f3ba85fe 100644 --- a/packages/actions/movable/api/movable.api.md +++ b/packages/actions/movable/api/movable.api.md @@ -3,21 +3,17 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import type { Action } from 'svelte/action'; + // @public -export function movable( - node: HTMLElement, - parameters?: MovableParameters, -): { - update(update?: MovableParameters): void; - destroy(): void; -}; +export const movable: Action; // @public export interface MovableAttributes { // (undocumented) - onmovableend?: (event: CustomEvent) => void; + 'on:movableend'?: (event: CustomEvent) => void; // (undocumented) - onmovablestart?: (event: CustomEvent) => void; + 'on:movablestart'?: (event: CustomEvent) => void; } // @public diff --git a/packages/actions/movable/src/movable.ts b/packages/actions/movable/src/movable.ts index d53401f75..dcec987ec 100644 --- a/packages/actions/movable/src/movable.ts +++ b/packages/actions/movable/src/movable.ts @@ -1,15 +1,9 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import type { Action, ActionReturn } from 'svelte/action'; + import type { MovableAttributes, MovableEventDetails, MovableParameters } from './movable.types'; import { input } from './utils'; -// ambient typing -declare global { - // eslint-disable-next-line @typescript-eslint/no-namespace - export namespace svelteHTML { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface HTMLAttributes extends MovableAttributes {} - } -} - /** * Trigger node displacement on mousedown (via position.left & position.top) * @public @@ -105,10 +99,13 @@ declare global { * * @param node - HTMLElement to be moved * @param parameters - svelte action parameters - * @returns svelte action interface + * @returns svelte {@link ActionReturn} * */ -export function movable(node: HTMLElement, parameters: MovableParameters = { enabled: true }) { +export const movable: Action = function ( + node, + parameters = { enabled: true }, +) { let { parent, normalizedDelta, handle, enabled, ignore, cursor } = input(node, parameters); const lastMousePosition = { x: 0, y: 0 }; @@ -297,7 +294,7 @@ export function movable(node: HTMLElement, parameters: MovableParameters = { ena handle.addEventListener('mousedown', onMouseDown, true); } return { - update(update: MovableParameters = {}) { + update(update) { removeCursor(); handle.removeEventListener('mousedown', onMouseDown, true); ({ parent, normalizedDelta, handle, enabled, ignore, cursor } = input(node, update)); @@ -312,4 +309,4 @@ export function movable(node: HTMLElement, parameters: MovableParameters = { ena removeCursor(); }, }; -} +}; diff --git a/packages/actions/shortcut/api/docs/shortcut.md b/packages/actions/shortcut/api/docs/shortcut.md index 6a786d88d..ebc7f75d4 100644 --- a/packages/actions/shortcut/api/docs/shortcut.md +++ b/packages/actions/shortcut/api/docs/shortcut.md @@ -6,12 +6,6 @@ svelte action - `use:shortcut` add keyboard shortcut to node -## Functions - -| Function | Description | -| ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | -| [shortcut(node, params)](./shortcut.shortcut.md) | Listen for keyboard event and trigger shortcut [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) | - ## Interfaces | Interface | Description | @@ -21,6 +15,12 @@ svelte action - `use:shortcut` add keyboard shortcut to node | [ShortcutParameters](./shortcut.shortcutparameters.md) | svelte action parameters to config behavior of shortcut | | [ShortcutTrigger](./shortcut.shortcuttrigger.md) | A definition of a shortcut trigger | +## Variables + +| Variable | Description | +| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| [shortcut](./shortcut.shortcut.md) | Listen for keyboard event and trigger shortcut [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) | + ## Type Aliases | Type Alias | Description | diff --git a/packages/actions/shortcut/api/docs/shortcut.shortcut.md b/packages/actions/shortcut/api/docs/shortcut.shortcut.md index 6f7e1b1e3..1dcd175e4 100644 --- a/packages/actions/shortcut/api/docs/shortcut.shortcut.md +++ b/packages/actions/shortcut/api/docs/shortcut.shortcut.md @@ -2,35 +2,16 @@ [Home](./index.md) > [@svelte-put/shortcut](./shortcut.md) > [shortcut](./shortcut.shortcut.md) -## shortcut() function +## shortcut variable Listen for keyboard event and trigger `shortcut` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) Signature: ```typescript -export declare function shortcut( - node: HTMLElement, - params: ShortcutParameters, -): { - update: (update: ShortcutParameters) => void; - destroy: () => void; -}; +shortcut: Action; ``` -## Parameters - -| Parameter | Type | Description | -| --------- | ------------------------------------------------------ | ------------------------------------ | -| node | HTMLElement | HTMLElement to add event listener to | -| params | [ShortcutParameters](./shortcut.shortcutparameters.md) | svelte action parameters | - -Returns: - -{ update: (update: [ShortcutParameters](./shortcut.shortcutparameters.md)) => void; destroy: () => void; } - -svelte action interface - ## Remarks As with any svelte action, `shortcut` should be use with element and not component. diff --git a/packages/actions/shortcut/api/docs/shortcut.shortcutattributes.onshortcut.md b/packages/actions/shortcut/api/docs/shortcut.shortcutattributes._on_shortcut_.md similarity index 58% rename from packages/actions/shortcut/api/docs/shortcut.shortcutattributes.onshortcut.md rename to packages/actions/shortcut/api/docs/shortcut.shortcutattributes._on_shortcut_.md index 9f5d2c631..67f208511 100644 --- a/packages/actions/shortcut/api/docs/shortcut.shortcutattributes.onshortcut.md +++ b/packages/actions/shortcut/api/docs/shortcut.shortcutattributes._on_shortcut_.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@svelte-put/shortcut](./shortcut.md) > [ShortcutAttributes](./shortcut.shortcutattributes.md) > [onshortcut](./shortcut.shortcutattributes.onshortcut.md) +[Home](./index.md) > [@svelte-put/shortcut](./shortcut.md) > [ShortcutAttributes](./shortcut.shortcutattributes.md) > ["on:shortcut"](./shortcut.shortcutattributes._on_shortcut_.md) -## ShortcutAttributes.onshortcut property +## ShortcutAttributes."on:shortcut" property Signature: ```typescript -onshortcut?: (event: CustomEvent) => void; +'on:shortcut'?: (event: CustomEvent) => void; ``` diff --git a/packages/actions/shortcut/api/docs/shortcut.shortcutattributes.md b/packages/actions/shortcut/api/docs/shortcut.shortcutattributes.md index 39b2c1014..9994d82fa 100644 --- a/packages/actions/shortcut/api/docs/shortcut.shortcutattributes.md +++ b/packages/actions/shortcut/api/docs/shortcut.shortcutattributes.md @@ -18,6 +18,6 @@ The ambient types for these extended attributes should be available automaticall ## Properties -| Property | Modifiers | Type | Description | -| ---------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------- | ----------------- | -| [onshortcut?](./shortcut.shortcutattributes.onshortcut.md) | | (event: CustomEvent<[ShortcutEventDetails](./shortcut.shortcuteventdetails.md)>) => void | (Optional) | +| Property | Modifiers | Type | Description | +| ---------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------- | ----------------- | +| ["on:shortcut"?](./shortcut.shortcutattributes._on_shortcut_.md) | | (event: CustomEvent<[ShortcutEventDetails](./shortcut.shortcuteventdetails.md)>) => void | (Optional) | diff --git a/packages/actions/shortcut/api/shortcut.api.md b/packages/actions/shortcut/api/shortcut.api.md index f53823dff..28dc4701d 100644 --- a/packages/actions/shortcut/api/shortcut.api.md +++ b/packages/actions/shortcut/api/shortcut.api.md @@ -3,19 +3,15 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +import type { Action } from 'svelte/action'; + // @public -export function shortcut( - node: HTMLElement, - params: ShortcutParameters, -): { - update: (update: ShortcutParameters) => void; - destroy: () => void; -}; +export const shortcut: Action; // @public export interface ShortcutAttributes { // (undocumented) - onshortcut?: (event: CustomEvent) => void; + 'on:shortcut'?: (event: CustomEvent) => void; } // @public diff --git a/packages/actions/shortcut/src/shortcut.ts b/packages/actions/shortcut/src/shortcut.ts index 82a40c082..3799b4da6 100644 --- a/packages/actions/shortcut/src/shortcut.ts +++ b/packages/actions/shortcut/src/shortcut.ts @@ -1,3 +1,6 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import type { Action, ActionReturn } from 'svelte/action'; + import type { ShortcutEventDetails, ShortcutModifier, @@ -5,15 +8,6 @@ import type { ShortcutAttributes, } from './types'; -// ambient typing -declare global { - // eslint-disable-next-line @typescript-eslint/no-namespace - export namespace svelteHTML { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface HTMLAttributes extends ShortcutAttributes {} - } -} - /** * Listen for keyboard event and trigger `shortcut` {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent } * @public @@ -107,9 +101,14 @@ declare global { * * @param node - HTMLElement to add event listener to * @param params - svelte action parameters - * @returns svelte action interface + * @returns svelte {@link ActionReturn} */ -export function shortcut(node: HTMLElement, params: ShortcutParameters) { +export const shortcut: Action = function ( + node, + params, +) { + if (!params?.trigger) + throw new Error('@svelte-put/shortcut requires a parameter object with a `trigger` property'); let { enabled = true, trigger, type = 'keydown' } = params; const handler = (event: KeyboardEvent) => { @@ -151,7 +150,7 @@ export function shortcut(node: HTMLElement, params: ShortcutParameters) { if (enabled) node.addEventListener(type, handler); return { - update: (update: ShortcutParameters) => { + update: (update) => { const { enabled: newEnabled = true, type: newType = 'keydown' } = update; if (enabled && (!newEnabled || type !== newType)) { @@ -168,4 +167,4 @@ export function shortcut(node: HTMLElement, params: ShortcutParameters) { node.removeEventListener(type, handler); }, }; -} +}; diff --git a/packages/actions/toc/api/docs/toc.tocattributes.ontoc.md b/packages/actions/toc/api/docs/toc.tocattributes._on_toc_.md similarity index 51% rename from packages/actions/toc/api/docs/toc.tocattributes.ontoc.md rename to packages/actions/toc/api/docs/toc.tocattributes._on_toc_.md index accc0de67..24486758c 100644 --- a/packages/actions/toc/api/docs/toc.tocattributes.ontoc.md +++ b/packages/actions/toc/api/docs/toc.tocattributes._on_toc_.md @@ -1,11 +1,11 @@ -[Home](./index.md) > [@svelte-put/toc](./toc.md) > [TocAttributes](./toc.tocattributes.md) > [ontoc](./toc.tocattributes.ontoc.md) +[Home](./index.md) > [@svelte-put/toc](./toc.md) > [TocAttributes](./toc.tocattributes.md) > ["on:toc"](./toc.tocattributes._on_toc_.md) -## TocAttributes.ontoc property +## TocAttributes."on:toc" property Signature: ```typescript -ontoc?: (event: CustomEvent) => void; +'on:toc'?: (event: CustomEvent) => void; ``` diff --git a/packages/actions/toc/api/docs/toc.tocattributes.md b/packages/actions/toc/api/docs/toc.tocattributes.md index 50310c2d4..9cd534d18 100644 --- a/packages/actions/toc/api/docs/toc.tocattributes.md +++ b/packages/actions/toc/api/docs/toc.tocattributes.md @@ -27,6 +27,6 @@ The ambient types for these extended attributes should be available automaticall ## Properties -| Property | Modifiers | Type | Description | -| -------------------------------------- | --------- | ------------------------------------------------------------------------------------------ | ----------------- | -| [ontoc?](./toc.tocattributes.ontoc.md) | | (event: CustomEvent<[TocEventDetails](./toc.toceventdetails.md)>) => void | (Optional) | +| Property | Modifiers | Type | Description | +| -------------------------------------------- | --------- | ------------------------------------------------------------------------------------------ | ----------------- | +| ["on:toc"?](./toc.tocattributes._on_toc_.md) | | (event: CustomEvent<[TocEventDetails](./toc.toceventdetails.md)>) => void | (Optional) | diff --git a/packages/actions/toc/api/toc.api.md b/packages/actions/toc/api/toc.api.md index 92f9cac9d..4791049bd 100644 --- a/packages/actions/toc/api/toc.api.md +++ b/packages/actions/toc/api/toc.api.md @@ -52,7 +52,7 @@ export function toc( // @public export interface TocAttributes { // (undocumented) - ontoc?: (event: CustomEvent) => void; + 'on:toc'?: (event: CustomEvent) => void; } // @public