@melt-ui/svelte - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/builders/collapsible/index.d.ts

@@ -23,3 +23,4 @@ type CreateCollapsibleArgs = {
     open: import("svelte/store").Writable<boolean>;
+    disabled: import("svelte/store").Writable<boolean>;
 };
 export {};

dist/builders/collapsible/index.js

@@ -9,2 +9,3 @@ import { elementDerived } from '../../internal/helpers';
     const options = { ...defaults, ...args };
+    const disabled = writable(options.disabled);
     const open = writable(options.open);
@@ -18,4 +19,4 @@ open.subscribe((open) => {
     }));
-    const trigger = elementDerived(open, ($open, attach) => {
-        if (!options.disabled) {
+    const trigger = elementDerived([open, disabled], ([$open, $disabled], attach) => {
+        if (!$disabled) {
             attach('click', () => open.set(!$open));
@@ -25,8 +26,8 @@ }
             'data-state': $open ? 'open' : 'closed',
-            'data-disabled': options.disabled ? 'true' : undefined,
+            'data-disabled': $disabled ? 'true' : undefined,
         };
     });
-    const content = derived(open, ($open) => ({
+    const content = derived([open, disabled], ([$open, $disabled]) => ({
         'data-state': $open ? 'open' : 'closed',
-        'data-disabled': options.disabled ? 'true' : undefined,
+        'data-disabled': $disabled ? 'true' : undefined,
         hidden: $open ? undefined : true,
@@ -39,3 +40,4 @@ }));
         open,
+        disabled,
     };
 }

dist/builders/index.d.ts

@@ -6,1 +6,4 @@ export * from './accordion';
 export * from './toggle';
+export * from './checkbox';
+export * from './switch';
+export * from './toggle-group';

dist/builders/index.js

@@ -6,1 +6,4 @@ export * from './accordion';
 export * from './toggle';
+export * from './checkbox';
+export * from './switch';
+export * from './toggle-group';

dist/builders/select/index.js

 import { effect, elementDerived, elementMultiDerived, getElementByMeltId, isBrowser, styleToString, } from '../../internal/helpers';
 import { sleep } from '../../internal/helpers/sleep';
 import { computePosition } from '@floating-ui/dom';
-import { onMount, tick } from 'svelte';
+import { onMount } from 'svelte';
 import { writable } from 'svelte/store';
@@ -33,7 +33,6 @@ /**
     });
-    const trigger = elementMultiDerived([open], ([$open], createAttach) => {
+    const trigger = elementMultiDerived([open], (_, createAttach) => {
         return () => {
             const attach = createAttach();
             attach('click', (e) => {
-                console.log('click', $open);
                 e.stopPropagation();
@@ -74,3 +73,3 @@ const triggerEl = e.currentTarget;
     });
-    const option = elementMultiDerived([open, selected], ([$open, $selected], createAttach) => {
+    const option = elementMultiDerived([selected], ([$selected], createAttach) => {
         return ({ value }) => {
@@ -77,0 +76,0 @@ const attach = createAttach();

dist/builders/toggle/index.d.ts

@@ -10,2 +10,3 @@ type ToggleArgs = {
         'aria-pressed': boolean;
+        type: string;
     } & {
@@ -12,0 +13,0 @@ 'data-melt-id': string;

dist/builders/toggle/index.js

@@ -16,2 +16,3 @@ import { elementDerived } from '../../internal/helpers';
             'aria-pressed': $pressed,
+            type: 'button',
         };
@@ -18,0 +19,0 @@ });

dist/internal/helpers/builder.d.ts

@@ -8,4 +8,33 @@ import { type Readable } from 'svelte/store';
 };
+/**
+ * A utility function that creates a derived store that automatically
+ * unsubscribes from its dependencies.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the derived store
+ * @param stores - The stores object to derive from
+ * @param fn - The function to derive the store from
+ * @returns A derived store that automatically unsubscribes from its dependencies
+ */
 export declare function derivedWithUnsubscribe<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>, onUnsubscribe: (cb: () => void) => void) => T): Readable<T>;
-export declare function effect<S extends Stores>(stores: S, fn: (values: StoresValues<S>) => (() => void) | void): import("svelte/store").Unsubscriber;
+/**
+ * A utility function that creates an effect from a set of stores and a function.
+ * The effect is automatically cleaned up when the component is destroyed.
+ *
+ * @template S - The type of the stores object
+ * @param stores - The stores object to derive from
+ * @param fn - The function to run when the stores change
+ * @returns A function that can be used to unsubscribe the effect
+ */
+export declare function effect<S extends Stores>(stores: S, fn: (values: StoresValues<S>) => (() => void) | void): () => void;
+/**
+ * A type that represents a function that can be used to attach events to an HTML element.
+ * The function is also augmented with a `getElement` function that returns a promise that
+ * resolves to the element.
+ *
+ * @template T - The type of the event to attach
+ * @param type - The type of the event to attach
+ * @param listener - The function to call when the event is triggered
+ * @param options - An optional object that specifies options for the event listener
+ */
 type Attach = (<T extends keyof HTMLElementEventMap>(type: T, listener: (ev: HTMLElementEventMap[T]) => void, options?: boolean | AddEventListenerOptions) => void) & {
@@ -17,2 +46,8 @@ getElement: () => Promise<HTMLElement | null>;
  * Exposes an `attach` function to attach events to the element.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the attributes object
+ * @param stores - The stores object to derive from
+ * @param fn - The function to derive the attributes from
+ * @returns A derived store that contains the attributes for an element
  */
@@ -22,7 +57,17 @@ export declare function elementDerived<S extends Stores, T extends Record<string, unknown>>(stores: S, fn: (values: StoresValues<S>, attach: Attach) => T): Readable<T & {
 }>;
+export declare function element<T extends Record<string, unknown>>(fn: (attach: Attach) => T): Readable<T & {
+    'data-melt-id': string;
+}>;
 type ReturnWithObj<T extends () => void, Obj> = ReturnType<T> extends void ? Obj : ReturnType<T> & Obj;
 /**
- * Creates a derived store that contains a function, that can be called on multiple elements.
- * Has a `createAttach` function that can be used to attach events to the elements.
- * The `createAttach` function will create a new id on every call, so only use it once per element.
+ * Creates a derived store that contains a function that can be called on multiple elements.
+ * The function returned by the derived store takes a variable number of arguments and
+ * returns an object that includes a `data-melt-id` attribute. The `data-melt-id` attribute is
+ * a unique identifier that is used to attach events to the elements.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the function that will be called on multiple elements
+ * @param stores - The stores object to derive from
+ * @param fn - The function to call on multiple elements
+ * @returns A derived store that contains the function to call on multiple elements
  */
@@ -32,2 +77,13 @@ export declare function elementMultiDerived<S extends Stores, T extends (...args: any[]) => Record<string, unknown> | void>(stores: S, fn: (values: StoresValues<S>, createAttach: () => Attach) => T): Readable<(...args: Parameters<T>) => ReturnWithObj<T, {
 }>>;
+/**
+ * A utility function that creates a multi-element component from a function that
+ * returns an object of attributes for each element.
+ *
+ * @template T - The type of the function that returns the attributes object
+ * @param fn - The function that returns the attributes object
+ * @returns A function that can be used to render the multi-element component
+ */
+export declare function elementMulti<T extends (...args: any[]) => Record<string, unknown> | void>(fn: (createAttach: () => Attach) => T): Readable<(...args: Parameters<T>) => ReturnWithObj<T, {
+    'data-melt-id': string;
+}>>;
 export {};

dist/internal/helpers/builder.js

@@ -7,2 +7,12 @@ import { onDestroy, tick } from 'svelte';
 }
+/**
+ * A utility function that creates a derived store that automatically
+ * unsubscribes from its dependencies.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the derived store
+ * @param stores - The stores object to derive from
+ * @param fn - The function to derive the store from
+ * @returns A derived store that automatically unsubscribes from its dependencies
+ */
 export function derivedWithUnsubscribe(stores, fn) {
@@ -14,3 +24,5 @@ let unsubscribers = [];
     const derivedStore = derived(stores, ($storeValues) => {
+        // Call all of the unsubscribe functions from the previous run of the function
         unsubscribers.forEach((fn) => fn());
+        // Clear the list of unsubscribe functions
         unsubscribers = [];
@@ -21,3 +33,13 @@ return fn($storeValues, onUnsubscribe);
 }
+/**
+ * A utility function that creates an effect from a set of stores and a function.
+ * The effect is automatically cleaned up when the component is destroyed.
+ *
+ * @template S - The type of the stores object
+ * @param stores - The stores object to derive from
+ * @param fn - The function to run when the stores change
+ * @returns A function that can be used to unsubscribe the effect
+ */
 export function effect(stores, fn) {
+    // Create a derived store that contains the stores object and an onUnsubscribe function
     const unsub = derivedWithUnsubscribe(stores, (stores, onUnsubscribe) => {
@@ -30,2 +52,3 @@ return {
         const returned = fn(stores);
+        // If the function returns a cleanup function, call it when the effect is unsubscribed
         if (returned) {
@@ -35,2 +58,3 @@ onUnsubscribe(returned);
     });
+    // Automatically unsubscribe the effect when the component is destroyed
     onDestroy(unsub);
@@ -42,5 +66,13 @@ return unsub;
  * Exposes an `attach` function to attach events to the element.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the attributes object
+ * @param stores - The stores object to derive from
+ * @param fn - The function to derive the attributes from
+ * @returns A derived store that contains the attributes for an element
  */
 export function elementDerived(stores, fn) {
+    // An array of functions that will be called to unsubscribe from events
     let eventRemovers = [];
+    // A function that removes all event listeners
     const removeEvents = () => {
@@ -50,7 +82,9 @@ eventRemovers.forEach((fn) => fn());
     };
-    // Id outside of scope so we can pass it as an attribute
+    // Unique id used to attach events to the element
     const id = uuid();
+    // A function that attaches an event listener to the element
     const attach = (event, listener, options) => {
         if (!isBrowser)
             return;
+        // Wait for the next tick to ensure that the element has been rendered
         tick().then(() => {
@@ -60,2 +94,3 @@ const element = getElementByMeltId(id);
         });
+        // Add a function to the `eventRemovers` array that removes the event listener
         eventRemovers.push(() => {
@@ -66,2 +101,3 @@ const element = getElementByMeltId(id);
     };
+    // Function that returns the element with the current `id`
     attach.getElement = () => tick().then(() => {
@@ -73,2 +109,3 @@ if (!isBrowser)
     return derived(stores, ($storeValues) => {
+        // Remove all event listeners
         removeEvents();
@@ -78,18 +115,33 @@ return { ...fn($storeValues, attach), 'data-melt-id': id };
 }
+export function element(fn) {
+    return elementDerived([], (_, attach) => fn(attach));
+}
 /**
- * Creates a derived store that contains a function, that can be called on multiple elements.
- * Has a `createAttach` function that can be used to attach events to the elements.
- * The `createAttach` function will create a new id on every call, so only use it once per element.
+ * Creates a derived store that contains a function that can be called on multiple elements.
+ * The function returned by the derived store takes a variable number of arguments and
+ * returns an object that includes a `data-melt-id` attribute. The `data-melt-id` attribute is
+ * a unique identifier that is used to attach events to the elements.
+ *
+ * @template S - The type of the stores object
+ * @template T - The type of the function that will be called on multiple elements
+ * @param stores - The stores object to derive from
+ * @param fn - The function to call on multiple elements
+ * @returns A derived store that contains the function to call on multiple elements
  */
 export function elementMultiDerived(stores, fn) {
+    // An array of functions that will be called to unsubscribe from events
     let unsubscribers = [];
-    // Id outside of scope so we can pass it as an attribute
+    // Unique id used to attach events to the elements
     let id = uuid();
+    // Create an `Attach` function that can be used to attach events to the elements
     const createAttach = () => {
+        // Generate a new id for each call to `createAttach`
         id = uuid();
         // Make sure the id is the same on tick
         const constantId = id;
+        // Function that attaches an event listener to an element
         const attach = (event, listener, options) => {
             if (!isBrowser)
                 return;
+            // Wait for the next tick to ensure that the element has been rendered
             tick().then(() => {
@@ -99,2 +151,3 @@ const element = getElementByMeltId(constantId);
             });
+            // Add a function to the `unsubscribers` array that removes the event listener
             unsubscribers.push(() => {
@@ -105,2 +158,3 @@ const element = getElementByMeltId(constantId);
         };
+        // A function that returns the element associated with the current `id`
         attach.getElement = () => tick().then(() => {
@@ -114,2 +168,3 @@ if (!isBrowser)
     return derived(stores, ($storeValues) => {
+        // Unsubscribe from all events
         unsubscribers.forEach((fn) => fn());
@@ -124,1 +179,13 @@ unsubscribers = [];
 }
+/**
+ * A utility function that creates a multi-element component from a function that
+ * returns an object of attributes for each element.
+ *
+ * @template T - The type of the function that returns the attributes object
+ * @param fn - The function that returns the attributes object
+ * @returns A function that can be used to render the multi-element component
+ */
+export function elementMulti(fn) {
+    // Create a derived store that contains the attributes for each element
+    return elementMultiDerived([], (_, createAttach) => fn(createAttach));
+}

dist/internal/helpers/index.d.ts

 export * from './array';
-export * from './collectionContext';
 export * from './dom';
 export * from './event';
-export * from './id';
 export * from './numbers';
 export * from './object';
-export * from './reactiveContext';
 export * from './style';
-export * from './uniqueContext';
-export * from './useActions';
-export * from './preview';
 export * from './browser';
 export * from './uuid';
 export * from './builder';

dist/internal/helpers/index.js

 export * from './array';
-export * from './collectionContext';
 export * from './dom';
 export * from './event';
-export * from './id';
 export * from './numbers';
 export * from './object';
-export * from './reactiveContext';
 export * from './style';
-export * from './uniqueContext';
-export * from './useActions';
-export * from './preview';
 export * from './browser';
 export * from './uuid';
 export * from './builder';

dist/internal/helpers/style.d.ts

@@ -0,1 +1,7 @@
+/**
+ * A utility function that converts a style object to a string.
+ *
+ * @param style - The style object to convert
+ * @returns The style object as a string
+ */
 export declare function styleToString(style: Record<string, number | string | undefined>): string;

dist/internal/helpers/style.js

@@ -1,2 +0,7 @@
-// style object to string
+/**
+ * A utility function that converts a style object to a string.
+ *
+ * @param style - The style object to convert
+ * @returns The style object as a string
+ */
 export function styleToString(style) {
@@ -3,0 +8,0 @@ return Object.keys(style).reduce((str, key) => {

dist/internal/helpers/uuid.d.ts

@@ -0,1 +1,7 @@
+/**
+ * A function that generates a UUID (version 4) using the `crypto.randomUUID`
+ * function if available, or a fallback implementation if not.
+ *
+ * @returns A UUID (version 4)
+ */
 export declare function uuid(): string;

dist/internal/helpers/uuid.js

@@ -0,1 +1,7 @@
+/**
+ * A function that generates a UUID (version 4) using the `crypto.randomUUID`
+ * function if available, or a fallback implementation if not.
+ *
+ * @returns A UUID (version 4)
+ */
 export function uuid() {
@@ -2,0 +8,0 @@ try {

package.json

 {
   "name": "@melt-ui/svelte",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
@@ -58,3 +58,3 @@ "exports": {
     "@storybook/testing-library": "^0.0.14-next.2",
-    "@sveltejs/adapter-cloudflare": "^2.3.0",
+    "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.5.0",
@@ -117,4 +117,4 @@ "@sveltejs/package": "^2.0.0",
     "storybook": "storybook dev -p 6006 --no-open",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build -s static"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64029

increased by17.83%

Lines of code

1518

increased by20.19%

Worsened metrics

Number of package files

47

decreased by-11.32%

No dependency changes