@svelteuidev/actions - npm Package Compare versions

Comparing version 0.3.1 to 0.5.2

index.d.ts

 export { clickoutside } from './use-click-outside/use-click-outside.js';
 export { clipboard } from './use-clipboard/use-clipboard.js';
 export { cssvariable } from './use-css-variable/use-css-variable.js';
+export { download } from './use-download/use-download.js';
 export { focus } from './use-focus/use-focus.js';

index.js

 export { clickoutside } from './use-click-outside/use-click-outside.js';
 export { clipboard } from './use-clipboard/use-clipboard.js';
 export { cssvariable } from './use-css-variable/use-css-variable.js';
+export { download } from './use-download/use-download.js';
 export { focus } from './use-focus/use-focus.js';

package.json

 {
   "name": "@svelteuidev/actions",
-  "version": "0.3.1",
+  "version": "0.5.2",
+  "types": "types/index.d.ts",
   "devDependencies": {
     "@sveltejs/kit": "next",
+    "@svelteuidev/tsconfig": "*",
+    "@testing-library/svelte": "^3.1.0",
     "autoprefixer": "^10.4.0",
     "cssnano": "^5.0.10",
+    "eslint-preset-svelteui": "*",
+    "jsdom": "^19.0.0",
     "postcss": "^8.3.11",
@@ -25,4 +30,5 @@ "sass": "^1.43.4",
     "./use-css-variable/use-css-variable": "./use-css-variable/use-css-variable.js",
+    "./use-download/use-download": "./use-download/use-download.js",
     "./use-focus/use-focus": "./use-focus/use-focus.js"
   }
 }

README.md

 # SvelteUI Actions
 
-Actions library with (?)+ useful lifecycle functions.
+## **Actions library with useful lifecycle functions.**
 
-Package includes functions that are used to build components in @svelteui/ scoped packages.
-You can use these functions in your applications with or without other @svelteui/ packages.
+- Package includes functions that are used to build components in @svelteuidev/ scoped packages.
+- You can use these functions in your applications with or without other @svelteuidev/ packages.
 
@@ -14,3 +14,3 @@ ## Documentation
 
-```sh
+```bash
 # With yarn
@@ -25,5 +25,6 @@ yarn add @svelteuidev/actions
 
-- [use-click-outside](https://svelteui-docs.vercel.app/actions/use-click-outside) – event occurs when user clicks outside of a an element.
-- [use-clipboard](https://svelteui-docs.vercel.app/actions/use-clipboard) -
-- [use-css-variable](https://svelteui-docs.vercel.app/actions/use-css-variable) -
+- [use-click-outside](https://svelteui-docs.vercel.app/docs/actions/use-click-outside) – Triggers a callback when a user clicks outside of a given element.
+- [use-clipboard](https://svelteui-docs.vercel.app/docs/actions/use-clipboard) - Copies text to the clipboard when dom element is clicked
+- [use-css-variable](https://svelteui-docs.vercel.app/docs/actions/use-css-variable) - Update css properties on the fly whenever some of their values change.
+- [use-focus](https://svelteui-docs.vercel.app/docs/actions/use-focus) - Calls focus on a node once mounted into the dom
 
@@ -30,0 +31,0 @@ ## License

types/_types.d.ts

@@ -1,3 +0,3 @@
-export declare type Action = (node: HTMLElement, parameters?: any) => {
-    update?: (parameters: any) => void;
+export declare type Action = (node: HTMLElement, parameters?: unknown) => {
+    update?: (parameters: unknown) => void;
     destroy?: () => void;
@@ -4,0 +4,0 @@ };

types/events.d.ts

@@ -0,6 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 declare namespace svelte.JSX {
 	interface HTMLProps<T> {
 		onuseclipboard?: (event: CustomEvent<string>) => void;
-		'onuseclipboard-error'?: (event: CustomEvent<string>) => void;
+		'onuseclipboard-error'?: (event: CustomEvent<Error>) => void;
+		onusedownload?: (event: CustomEvent<{ blob: Blob; filename: string }>) => void;
+		'onusedownload-error'?: (event: CustomEvent<Error>) => void;
 	}
 }

use-click-outside/use-click-outside.d.ts

 import type { Action } from '../types/_types';
 /**
+ * With the `use-click-outside` action, a callback function will be fired whenever the user clicks outside of the dom node the action is applied to.
  *
- * Call callback when user clicks outside a given element
+ * ```tsx
+ * <script>
+ *     import { clickoutside } from '@svelteuidev/actions'
  *
- * Usage: <div use:clickoutside={{ enabled: open, callback: () => open = false }}>
+ *     let open = true;
+ * </script>
  *
+ * <div use:clickoutside={{ enabled: open, callback: () => open = false }}>
  *
+ *     <Button on:click={() => open = true}>Open Modal</Button>
+ *
+ *     {#if open}
+ *         <div>
+ *             This is a modal
+ *         </div>
+ *     {:else if !open}
+ *         <div>
+ *             There is no modal
+ *         </div>
+ *    {/if}
+ * </div>
+ * ```
+ * @param params - Object that contains two properties {enabled: boolean, callback: (any) => unknown}
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-click-outside
  */
 export declare function clickoutside(node: HTMLElement, params: {
     enabled: boolean;
-    callback: Function;
+    callback: (any: any) => unknown;
 }): ReturnType<Action>;

use-click-outside/use-click-outside.js

 /**
+ * With the `use-click-outside` action, a callback function will be fired whenever the user clicks outside of the dom node the action is applied to.
  *
- * Call callback when user clicks outside a given element
+ * ```tsx
+ * <script>
+ *     import { clickoutside } from '@svelteuidev/actions'
  *
- * Usage: <div use:clickoutside={{ enabled: open, callback: () => open = false }}>
+ *     let open = true;
+ * </script>
  *
+ * <div use:clickoutside={{ enabled: open, callback: () => open = false }}>
  *
+ *     <Button on:click={() => open = true}>Open Modal</Button>
+ *
+ *     {#if open}
+ *         <div>
+ *             This is a modal
+ *         </div>
+ *     {:else if !open}
+ *         <div>
+ *             There is no modal
+ *         </div>
+ *    {/if}
+ * </div>
+ * ```
+ * @param params - Object that contains two properties {enabled: boolean, callback: (any) => unknown}
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-click-outside
  */
@@ -9,0 +29,0 @@ export function clickoutside(node, params) {

use-clipboard/use-clipboard.d.ts

 import type { Action } from '../types/_types';
 /**
+ * With the `use-clipboard` action, text passed into the text param will be copied to the users clipboard.
  *
- * @param node HTMLElement that the action is applied to
- * @param text The text that you want to be copied when the DOM element is clicked
- * @example <button use:clipboard={'This text will be copied'}>Copy Me</button>
+ * ```tsx
+ *  <button use:clipboard={'This text will be copied'}>Copy Me</button>
+ * ```
+ * @param text - The text that you want to be copied when the DOM element is clicked
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-clipboard
  */
 export declare function clipboard(node: HTMLElement, text: string): ReturnType<Action>;

use-clipboard/use-clipboard.js

 /**
+ * With the `use-clipboard` action, text passed into the text param will be copied to the users clipboard.
  *
- * @param node HTMLElement that the action is applied to
- * @param text The text that you want to be copied when the DOM element is clicked
- * @example <button use:clipboard={'This text will be copied'}>Copy Me</button>
+ * ```tsx
+ *  <button use:clipboard={'This text will be copied'}>Copy Me</button>
+ * ```
+ * @param text - The text that you want to be copied when the DOM element is clicked
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-clipboard
  */
@@ -7,0 +10,0 @@ export function clipboard(node, text) {

use-css-variable/use-css-variable.d.ts

 import type { Action, UnknownKeyString } from '../types/_types';
 /**
+ * With the `use-css-variable` action, an object of properties will be treated as css custom variables. By defining this object inside of a $: {} reactive block, `use-css-variable` can update those css properties on the fly whenever some of its values change.
  *
- * @param node HTMLElement that the action is applied to
- * @param props A reactive object with properties that should be treated as css custom properties.
- * @example <div use:cssvariable={cssVariables}>
+ * ```tsx
+ *   <script>
+ *       import {cssvariable} from '@svelteuidev/actions'
+ *
+ *       let isRed = true;
+ *
+ *       $: styleVars = {
+ *           titleColor: isRed ? 'red' : 'blue',
+ *       };
+ *   </script>
+ *
+ *   <div use:cssvariable="{styleVars}">
+ *       <!-- anything here will have access to var(--titleColor) -->
+ *       <p>This text is normal</p>
+ *       <p class='example'>This text is using the variable</p>
+ *   </div>
+ *   <Button on:click={() => isRed = !isRed}>Click to switch colors</Button>
+ *
+ *   <style>
+ *       .example {
+ *           color: var(--titleColor);
+ *       }
+ *   </style>
+ * ```
+ * @param props - A reactive object with properties that should be treated as css custom properties.
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-css-variable
  */
 export declare function cssvariable(node: HTMLElement, props: UnknownKeyString<string>): ReturnType<Action>;

use-css-variable/use-css-variable.js

 /**
+ * With the `use-css-variable` action, an object of properties will be treated as css custom variables. By defining this object inside of a $: {} reactive block, `use-css-variable` can update those css properties on the fly whenever some of its values change.
  *
- * @param node HTMLElement that the action is applied to
- * @param props A reactive object with properties that should be treated as css custom properties.
- * @example <div use:cssvariable={cssVariables}>
+ * ```tsx
+ *   <script>
+ *       import {cssvariable} from '@svelteuidev/actions'
+ *
+ *       let isRed = true;
+ *
+ *       $: styleVars = {
+ *           titleColor: isRed ? 'red' : 'blue',
+ *       };
+ *   </script>
+ *
+ *   <div use:cssvariable="{styleVars}">
+ *       <!-- anything here will have access to var(--titleColor) -->
+ *       <p>This text is normal</p>
+ *       <p class='example'>This text is using the variable</p>
+ *   </div>
+ *   <Button on:click={() => isRed = !isRed}>Click to switch colors</Button>
+ *
+ *   <style>
+ *       .example {
+ *           color: var(--titleColor);
+ *       }
+ *   </style>
+ * ```
+ * @param props - A reactive object with properties that should be treated as css custom properties.
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-css-variable
  */
@@ -7,0 +31,0 @@ export function cssvariable(node, props) {

use-focus/use-focus.d.ts

 import type { Action, FocusableElement } from '../types/_types';
 /**
+ * With the `use-focus` action, the affected dom node gets focused when it is mounted into the dom. Only “focusable” elements should use this action. Type errors will appear if this is not the case.
  *
- * @param node HTMLElement that the action is applied to
+ * ```tsx
+ *  <button use:clipboard={'This text will be copied'}>Copy Me</button>
+ * ```
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-focus
  */
 export declare function focus(node: FocusableElement): ReturnType<Action>;

use-focus/use-focus.js

 /**
+ * With the `use-focus` action, the affected dom node gets focused when it is mounted into the dom. Only “focusable” elements should use this action. Type errors will appear if this is not the case.
  *
- * @param node HTMLElement that the action is applied to
+ * ```tsx
+ *  <button use:clipboard={'This text will be copied'}>Copy Me</button>
+ * ```
+ * @see https://svelteui-docs.vercel.app/docs/actions/use-focus
  */
@@ -5,0 +9,0 @@ export function focus(node) {

No alert changes

Improved metrics

Total package byte prevSize

13540

increased by100.06%

Number of package files

19

increased by11.76%

Lines of code

300

increased by108.33%

Number of lines in readme file

32

increased by3.23%

Worsened metrics

Dev dependency count

15

increased by36.36%

No dependency changes