@melt-ui/svelte - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

dist/builders/index.d.ts

@@ -12,4 +12,5 @@ export * from './accordion';
 export * from './radio-group';
+export * from './slider';
 export * from './dialog';
 export * from './tooltip';
 export * from './pagination';

dist/builders/index.js

@@ -12,4 +12,5 @@ export * from './accordion';
 export * from './radio-group';
+export * from './slider';
 export * from './dialog';
 export * from './tooltip';
 export * from './pagination';

dist/builders/pagination/index.js

 import { elementDerived, elementMultiDerived, kbd, omit } from '../../internal/helpers';
 import { derived, writable } from 'svelte/store';
 const defaults = {
-    perPage: 10,
+    perPage: 1,
     siblingCount: 1,
@@ -6,0 +6,0 @@ page: 1,

dist/builders/select/index.d.ts

@@ -18,2 +18,3 @@ import type { FloatingConfig } from '../../internal/actions';
     selected?: string | number;
+    name?: string;
 };
@@ -47,2 +48,4 @@ export declare function createSelect(args?: CreateSelectArgs): {
         'data-selected': string | undefined;
+        'data-value': string | number;
+        'data-type': "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
         tabindex: number;
@@ -53,3 +56,3 @@ } & {
     selected: import("svelte/store").Writable<string | number | null>;
-    selectedText: import("svelte/store").Writable<string | null>;
+    selectedText: import("svelte/store").Writable<string | number | null>;
     arrow: import("svelte/store").Readable<{
@@ -60,9 +63,14 @@ 'data-arrow': boolean;
     isSelected: import("svelte/store").Readable<(value: string | number) => boolean>;
-    options: import("svelte/store").Writable<{
-        positioning?: FloatingConfig | undefined;
-        arrowSize?: number | undefined;
-        required?: boolean | undefined;
-        disabled?: boolean | undefined;
-        selected?: string | number | undefined;
+    options: import("svelte/store").Writable<Omit<CreateSelectArgs, "selected">>;
+    input: import("svelte/store").Readable<{
+        type: string;
+        name: string | undefined;
+        value: string | number | null;
+        'aria-hidden': boolean;
+        hidden: boolean;
+        tabIndex: number;
+        required: boolean | undefined;
+        disabled: boolean | undefined;
+        style: string;
     }>;
 };

dist/builders/select/index.js

 import { usePopper } from '../../internal/actions/popper';
-import { debounce, effect, elementDerived, elementMultiDerived, getElementByMeltId, isBrowser, kbd, styleToString, uuid, } from '../../internal/helpers';
+import { debounce, effect, elementDerived, elementMultiDerived, getElementByMeltId, isBrowser, kbd, omit, styleToString, uuid, } from '../../internal/helpers';
 import { sleep } from '../../internal/helpers/sleep';
@@ -17,3 +17,3 @@ import { tick } from 'svelte';
     const withDefaults = { ...defaults, ...args };
-    const options = writable({ ...withDefaults });
+    const options = writable(omit(withDefaults, 'selected'));
     const open = writable(false);
@@ -105,2 +105,4 @@ const selected = writable(withDefaults.selected ?? null);
                 'data-selected': $selected === value ? '' : undefined,
+                'data-value': value,
+                'data-type': typeof value,
                 tabindex: 0,
@@ -192,3 +194,11 @@ };
             if (selectedOption) {
-                selectedText.set(selectedOption.innerText);
+                const data = selectedOption.getAttribute('data-value');
+                if (data) {
+                    if (selectedOption.getAttribute('data-type') === 'number') {
+                        selectedText.set(+data);
+                    }
+                    else {
+                        selectedText.set(data);
+                    }
+                }
             }
@@ -202,3 +212,22 @@ });
     });
-    return { trigger, menu, open, option, selected, selectedText, arrow, isSelected, options };
+    const input = derived([selected, options], ([$selected, $options]) => {
+        return {
+            type: 'hidden',
+            name: $options.name,
+            value: $selected,
+            'aria-hidden': true,
+            hidden: true,
+            tabIndex: -1,
+            required: $options.required,
+            disabled: $options.disabled,
+            style: styleToString({
+                position: 'absolute',
+                opacity: 0,
+                'pointer-events': 'none',
+                margin: 0,
+                transform: 'translateX(-100%)',
+            }),
+        };
+    });
+    return { trigger, menu, open, option, selected, selectedText, arrow, isSelected, options, input };
 }

dist/internal/helpers/builder.d.ts

@@ -51,2 +51,5 @@ import { type Readable } from 'svelte/store';
 };
+type MultiHelpers = Helpers & {
+    index: number;
+};
 type ReturnWithObj<T extends () => void, Obj> = ReturnType<T> extends void ? Obj : ReturnType<T> & Obj;
@@ -89,3 +92,3 @@ /**
  */
-export declare function elementMultiDerived<S extends Stores, T extends (...args: any[]) => Record<string, unknown> | void>(stores: S, fn: (values: StoresValues<S>, helpers: Helpers) => T): Readable<(...args: Parameters<T>) => ReturnWithObj<T, {
+export declare function elementMultiDerived<S extends Stores, T extends (...args: any[]) => Record<string, unknown> | void>(stores: S, fn: (values: StoresValues<S>, helpers: MultiHelpers) => T): Readable<(...args: Parameters<T>) => ReturnWithObj<T, {
     'data-melt-id': string;
@@ -92,0 +95,0 @@ }>>;

dist/internal/helpers/builder.js

@@ -168,2 +168,3 @@ import { onDestroy, tick } from 'svelte';
     const { addUnsubscriber, createElInterface, unsubscribe } = initElementHelpers((newId) => (id = newId));
+    let index = 0;
     return derived(stores, ($storeValues) => {
@@ -175,3 +176,10 @@ // Unsubscribe from all events
             const { attach, getElement, addAction } = createElInterface();
-            const returned = fn($storeValues, { attach, getElement, addUnsubscriber, addAction });
+            const returned = fn($storeValues, {
+                attach,
+                getElement,
+                addUnsubscriber,
+                addAction,
+                index: index++,
+            });
+            addUnsubscriber(() => index--);
             return { ...returned(...args), 'data-melt-id': id };
@@ -178,0 +186,0 @@ };

package.json

 {
   "name": "@melt-ui/svelte",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "exports": {

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

140075

increased by10.34%

Number of package files

101

increased by2.02%

Lines of code

3667

increased by10.42%

No dependency changes