svelte-zoo - npm Package Compare versions

Comparing version 0.4.10 to 0.4.11

dist/actions.d.ts

@@ -1,9 +0,15 @@
-export declare function sortable(node: HTMLElement, { header_selector }?: {
+export declare function get_html_sort_value(element: Element): string;
+export declare function sortable(node: HTMLElement, { header_selector, asc_class, desc_class, sorted_style, }?: {
     header_selector?: string | undefined;
+    asc_class?: string | undefined;
+    desc_class?: string | undefined;
+    sorted_style?: {
+        backgroundColor: string;
+    } | undefined;
 }): void;
 type HighlightOptions = {
-    query: string;
-    disabled: boolean;
-    acceptNode: (node: Node) => number;
-    css_class: string;
+    query?: string;
+    disabled?: boolean;
+    node_filter?: (node: Node) => number;
+    css_class?: string;
 };
@@ -10,0 +16,0 @@ export declare function highlight_matches(node: HTMLElement, ops: HighlightOptions): {

dist/actions.js

@@ -1,2 +0,14 @@
-export function sortable(node, { header_selector = `thead th` } = {}) {
+export function get_html_sort_value(element) {
+    if (element.dataset.sortValue !== undefined) {
+        return element.dataset.sortValue;
+    }
+    for (const child of element.children) {
+        const child_val = get_html_sort_value(child);
+        if (child_val !== ``) {
+            return child_val;
+        }
+    }
+    return element.textContent ?? ``;
+}
+export function sortable(node, { header_selector = `thead th`, asc_class = `table-sort-asc`, desc_class = `table-sort-desc`, sorted_style = { backgroundColor: `rgba(255, 255, 255, 0.1)` }, } = {}) {
     // this action can be applied to bob-standard HTML tables to make them sortable by
@@ -8,15 +20,11 @@ // clicking on column headers (and clicking again to toggle sorting direction)
     for (const [idx, header] of headers.entries()) {
-        // add cursor pointer to headers
-        header.style.cursor = `pointer`;
-        const init_bg = header.style.backgroundColor;
+        header.style.cursor = `pointer`; // add cursor pointer to headers
+        const init_styles = { ...header.style };
         header.addEventListener(`click`, () => {
+            // reset all headers to initial state
             for (const header of headers) {
-                // removing any existing arrows
-                header.textContent = header.textContent?.replace(/ ↑| ↓/, ``);
-                header.classList.remove(`asc`, `desc`);
-                header.style.backgroundColor = init_bg;
+                header.textContent = header.textContent?.replace(/ ↑| ↓/, ``) ?? ``;
+                header.classList.remove(asc_class, desc_class);
+                Object.assign(header.style, init_styles);
             }
-            header.classList.toggle(sort_dir > 0 ? `asc` : `desc`);
-            header.style.backgroundColor = `rgba(255, 255, 255, 0.1)`;
-            // append arrow to header text
             if (idx === sort_col_idx) {
@@ -29,3 +37,5 @@ sort_dir *= -1; // reverse sort direction
             }
-            header.innerHTML = `${header.textContent} ${sort_dir > 0 ? `↑` : `↓`}`;
+            header.classList.add(sort_dir > 0 ? asc_class : desc_class);
+            Object.assign(header.style, sorted_style);
+            header.textContent = `${header.textContent?.replace(/ ↑| ↓/, ``)} ${sort_dir > 0 ? `↑` : `↓`}`;
             const table_body = node.querySelector(`tbody`);
@@ -37,5 +47,18 @@ if (!table_body)
             rows.sort((row_1, row_2) => {
-                const val_1 = row_1.cells[sort_col_idx].textContent ?? ``;
-                const val_2 = row_2.cells[sort_col_idx].textContent ?? ``;
-                return (sort_dir * val_1.localeCompare(val_2, undefined, { numeric: true }));
+                const cell_1 = row_1.cells[sort_col_idx];
+                const cell_2 = row_2.cells[sort_col_idx];
+                const val_1 = get_html_sort_value(cell_1);
+                const val_2 = get_html_sort_value(cell_2);
+                if (val_1 === val_2)
+                    return 0;
+                if (val_1 === ``)
+                    return 1; // treat empty string as lower than any value
+                if (val_2 === ``)
+                    return -1; // any value is considered higher than empty string
+                const num_1 = Number(val_1);
+                const num_2 = Number(val_2);
+                if (isNaN(num_1) && isNaN(num_2)) {
+                    return (sort_dir * val_1.localeCompare(val_2, undefined, { numeric: true }));
+                }
+                return sort_dir * (num_1 - num_2);
             });
@@ -54,3 +77,3 @@ for (const row of rows)
 function update_highlights(node, ops) {
-    const { query = ``, disabled = false, acceptNode = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
+    const { query = ``, disabled = false, node_filter = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
     // clear previous ranges from HighlightRegistry
@@ -61,3 +84,3 @@ CSS.highlights.clear();
     const tree_walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
-        acceptNode,
+        acceptNode: node_filter,
     });
@@ -64,0 +87,0 @@ const text_nodes = [];

dist/CircleSpinner.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        color?: string | null | undefined;
-        duration?: string | undefined;
-        size?: string | undefined;
+        color?: string | null;
+        duration?: string;
+        size?: string;
+        class?: null;
+        div: HTMLDivElement;
     };
@@ -12,2 +14,4 @@ events: {
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -14,0 +18,0 @@ export type CircleSpinnerProps = typeof __propDef.props;

dist/CodeExample.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        src?: string | undefined;
+        src?: string;
         meta?: {
-            collapsible?: boolean | undefined;
-            code_above?: boolean | undefined;
-            id?: string | undefined;
-            repl?: string | undefined;
-            github?: string | boolean | undefined;
-            stackblitz?: string | boolean | undefined;
-            repo?: string | undefined;
-            pkg?: string | undefined;
-            Wrapper?: string | undefined;
-            example?: boolean | undefined;
-            file?: string | undefined;
-        } | undefined;
-        open?: boolean | undefined;
+            collapsible?: boolean;
+            code_above?: boolean;
+            id?: string;
+            repl?: string;
+            github?: string | boolean;
+            stackblitz?: string | boolean;
+            repo?: string;
+            pkg?: string;
+            Wrapper?: string;
+            example?: boolean;
+            file?: string;
+        };
+        open?: boolean;
     };
@@ -29,2 +29,4 @@ events: {
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -31,0 +33,0 @@ export type CodeExampleProps = typeof __propDef.props;

dist/CodeLinks.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        repo?: string | undefined;
-        repl?: string | null | undefined;
-        github?: string | boolean | undefined;
-        stackblitz?: string | boolean | null | undefined;
-        file?: string | undefined;
+        repo?: string;
+        repl?: string | null;
+        github?: string | boolean;
+        stackblitz?: string | boolean | null;
+        file?: string;
         btn_text?: {
-            repl?: string | undefined;
-            github?: string | undefined;
-            stackblitz?: string | undefined;
-        } | null | undefined;
-        target?: "_blank" | "_self" | undefined;
-        margin?: string | null | undefined;
-        padding?: string | null | undefined;
+            repl?: string;
+            github?: string;
+            stackblitz?: string;
+        } | null;
+        target?: "_blank" | "_self";
+        margin?: string | null;
+        padding?: string | null;
     };
@@ -22,2 +22,4 @@ events: {
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -24,0 +26,0 @@ export type CodeLinksProps = typeof __propDef.props;

dist/Confetti.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        speed?: number | undefined;
-        n_items?: number | undefined;
-        freeze?: boolean | undefined;
+        speed?: number;
+        n_items?: number;
+        freeze?: boolean;
     };
@@ -12,2 +12,4 @@ events: {
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -14,0 +16,0 @@ export type ConfettiProps = typeof __propDef.props;

dist/CopyButton.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        content?: string | undefined;
-        style?: string | null | undefined;
-        state?: "error" | "default" | "success" | undefined;
-        global_selector?: string | null | undefined;
-        global?: boolean | undefined;
-        skip_selector?: string | null | undefined;
-        as?: string | undefined;
+        content?: string;
+        style?: string | null;
+        state?: "default" | "success" | "error";
+        global_selector?: string | null;
+        global?: boolean;
+        skip_selector?: string | null;
+        as?: string;
     };
@@ -18,2 +18,4 @@ events: {
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -20,0 +22,0 @@ export type CopyButtonProps = typeof __propDef.props;

dist/FileDetails.svelte.d.ts

@@ -8,9 +8,9 @@ import { SvelteComponent } from "svelte";
             content: string;
-            language?: string | undefined;
-            node?: HTMLDetailsElement | null | undefined;
-        }[] | undefined;
-        toggle_all_btn_title?: string | undefined;
-        default_lang?: string | undefined;
-        as?: string | undefined;
-        style?: string | null | undefined;
+            language?: string;
+            node?: HTMLDetailsElement | null;
+        }[];
+        toggle_all_btn_title?: string;
+        default_lang?: string;
+        as?: string;
+        style?: string | null;
     };
@@ -24,7 +24,9 @@ events: {
             content: string;
-            language?: string | undefined;
-            node?: HTMLDetailsElement | null | undefined;
+            language?: string;
+            node?: HTMLDetailsElement | null;
             idx: any;
         };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -31,0 +33,0 @@ export type FileDetailsProps = typeof __propDef.props;

dist/GitHubCorner.svelte.d.ts

@@ -5,9 +5,9 @@ import { SvelteComponent } from "svelte";
         href: string;
-        title?: string | undefined;
-        aria_label?: string | undefined;
-        target?: "_blank" | "_self" | undefined;
-        color?: string | null | undefined;
-        fill?: string | null | undefined;
-        corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
-        style?: string | undefined;
+        title?: string;
+        aria_label?: string;
+        target?: "_self" | "_blank";
+        color?: string | null;
+        fill?: string | null;
+        corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        style?: string;
     };
@@ -18,2 +18,4 @@ events: {
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -20,0 +22,0 @@ export type GitHubCornerProps = typeof __propDef.props;

dist/Icon.svelte.d.ts

@@ -5,5 +5,5 @@ import { SvelteComponent } from "svelte";
         icon: string;
-        style?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
+        style?: string;
+        width?: string;
+        height?: string;
     };
@@ -14,2 +14,4 @@ events: {
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -16,0 +18,0 @@ export type IconProps = typeof __propDef.props;

dist/icons/Alert.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  AlertProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/Check.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  CheckProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/Collapse.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  CollapseProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/Copy.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  CopyProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/Cross.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  CrossProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/Disabled.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  DisabledProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/Expand.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  ExpandProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/GitHub.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  GitHubProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/StackBlitz.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  StackBlitzProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/icons/Svelte.svelte.d.ts

@@ -22,3 +22,5 @@ /** @typedef {typeof __propDef.props}  SvelteProps */
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

dist/PrevNext.svelte.d.ts

@@ -6,5 +6,5 @@ import { SvelteComponent } from "svelte";
         items?: T[] | undefined;
-        node?: string | undefined;
-        current?: string | undefined;
-        style?: string | null | undefined;
+        node?: string;
+        current?: string;
+        style?: string | null;
         on_keyup?: ((obj: {
@@ -22,2 +22,3 @@ prev: Item;
         } | undefined;
+        class?: null;
     };
@@ -24,0 +25,0 @@ events(): {} & {

dist/RadioButtons.svelte.d.ts

@@ -9,10 +9,10 @@ import { SvelteComponent } from "svelte";
         options: Option[];
-        selected?: string | number | null | undefined;
-        class?: string | undefined;
-        style?: string | null | undefined;
-        id?: string | null | undefined;
-        name?: string | null | undefined;
-        disabled?: boolean | undefined;
-        required?: boolean | undefined;
-        aria_label?: string | null | undefined;
+        selected?: string | number | null;
+        class?: string;
+        style?: string | null;
+        id?: string | null;
+        name?: string | null;
+        disabled?: boolean;
+        required?: boolean;
+        aria_label?: string | null;
     };
@@ -19,0 +19,0 @@ events(): {

dist/Slider.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: number | undefined;
-        label?: string | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        step?: number | undefined;
-        style?: string | undefined;
-        slider_style?: string | undefined;
-        disabled?: boolean | undefined;
-        id?: string | null | undefined;
-        number?: false | "after" | "before" | undefined;
+        value?: number;
+        label?: string;
+        min?: number;
+        max?: number;
+        step?: number;
+        style?: string;
+        slider_style?: string;
+        disabled?: boolean;
+        id?: string | null;
+        number?: "before" | "after" | false;
+        class?: null;
     };
@@ -27,2 +28,4 @@ events: {
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -29,0 +32,0 @@ export type SliderProps = typeof __propDef.props;

dist/stores.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="svelte" />
 export type StorageType = 'localStorage' | 'sessionStorage';
@@ -3,0 +2,0 @@ export declare function persisted_store<T>(name: string, initial: T, type?: StorageType): {

dist/Toggle.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        checked?: boolean | undefined;
-        required?: boolean | undefined;
-        style?: string | undefined;
-        id?: string | undefined;
+        checked?: boolean;
+        required?: boolean;
+        style?: string;
+        id?: string;
+        class?: null;
     };
     events: {
+        change: Event;
+        blur: FocusEvent;
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
@@ -15,2 +20,4 @@ };
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -17,0 +24,0 @@ export type ToggleProps = typeof __propDef.props;

dist/Tooltip.svelte.d.ts

 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        text?: string | null | undefined;
-        max_width?: string | undefined;
-        min_width?: string | undefined;
-        bg?: string | null | undefined;
-        cursor?: string | null | undefined;
-        style?: string | null | undefined;
-        tip_style?: string | null | undefined;
+        text?: string | null;
+        max_width?: string;
+        min_width?: string;
+        bg?: string | null;
+        cursor?: string | null;
+        style?: string | null;
+        tip_style?: string | null;
+        class?: null;
     };
@@ -20,2 +21,4 @@ events: {
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
@@ -22,0 +25,0 @@ export type TooltipProps = typeof __propDef.props;

package.json

@@ -8,3 +8,3 @@ {
   "license": "MIT",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "type": "module",
@@ -23,30 +23,29 @@ "svelte": "./dist/index.js",
   "dependencies": {
-    "@sveltejs/kit": "^2.5.0",
-    "highlight.js": "^11.9.0",
-    "svelte": "4.2.9"
+    "@sveltejs/kit": "^2.5.22",
+    "highlight.js": "^11.10.0",
+    "svelte": "4.2.18"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/package": "^2.2.6",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
-    "@vitest/coverage-v8": "^1.2.2",
-    "eslint": "^8.56.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "@sveltejs/adapter-static": "^3.0.4",
+    "@sveltejs/package": "^2.3.4",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@vitest/coverage-v8": "^2.0.5",
+    "eslint": "^9.9.0",
+    "eslint-plugin-svelte": "^2.43.0",
     "hastscript": "^9.0.0",
-    "jsdom": "^24.0.0",
-    "mdsvex": "^0.11.0",
+    "jsdom": "^24.1.1",
+    "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
-    "prettier": "^3.2.4",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte-check": "^3.6.3",
-    "svelte-multiselect": "^10.2.0",
-    "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.0",
-    "typescript": "5.3.3",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.2"
+    "svelte-check": "^3.8.5",
+    "svelte-multiselect": "^10.3.0",
+    "svelte-preprocess": "^6.0.2",
+    "svelte2tsx": "^0.7.15",
+    "typescript": "5.5.4",
+    "typescript-eslint": "^8.1.0",
+    "vite": "^5.4.1",
+    "vitest": "^2.0.5"
   },
@@ -53,0 +52,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

65226

4.79%

Dev dependency count

22

-4.35%

Lines of code

935

9.36%

Dependency changes

• + Added

  svelte@4.2.18
  (transitive)

• - Removed

  svelte@4.2.9
  (transitive)

• Updated

  @sveltejs/kit@^2.5.22

• Updated

  highlight.js@^11.10.0

• Updated

  svelte@4.2.18