@skeletonlabs/skeleton - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

dist/actions/Clipboard/clipboard.js

 // Action: Clipboard
 export function clipboard(node, args) {
+    const fireCopyCompleteEvent = () => {
+        node.dispatchEvent(new CustomEvent('copyComplete'));
+    };
     const onClick = () => {
@@ -9,3 +12,3 @@ // Handle `data-clipboard` target based on object key
                 const element = document.querySelector(`[data-clipboard="${args.element}"]`);
-                copyToClipboard(element?.innerHTML);
+                copyToClipboard(element?.innerHTML, 'text/html').then(fireCopyCompleteEvent);
                 return;
@@ -16,3 +19,3 @@ }
                 const input = document.querySelector(`[data-clipboard="${args.input}"]`);
-                copyToClipboard(input?.value);
+                copyToClipboard(input?.value).then(fireCopyCompleteEvent);
                 return;
@@ -22,3 +25,3 @@ }
         // Handle everything else.
-        copyToClipboard(args);
+        copyToClipboard(args).then(fireCopyCompleteEvent);
     };
@@ -38,4 +41,21 @@ // Event Listener
 // Shared copy method
-function copyToClipboard(data) {
-    navigator.clipboard.writeText(String(data));
+async function copyToClipboard(data, mimeType = 'text/plain') {
+    if (navigator.clipboard.write) {
+        await navigator.clipboard.write([
+            new ClipboardItem({
+                [mimeType]: new Blob([data], {
+                    type: mimeType
+                }),
+                ['text/plain']: new Blob([data], {
+                    type: 'text/plain'
+                })
+            })
+        ]);
+    }
+    else {
+        // fallback since .writeText has wider browser support
+        await new Promise((resolve) => {
+            resolve(navigator.clipboard.writeText(String(data)));
+        });
+    }
 }

dist/actions/Filters/filter.js

 // Action: Filter
 export function filter(node, filterName) {
-    // Return if Firefox browser
-    const isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
-    if (isFirefox)
-        return;
     // Return if no filterName provided
@@ -8,0 +4,0 @@ if (filterName === undefined)

dist/actions/FocusTrap/focusTrap.js

@@ -20,3 +20,3 @@ // Action: Focus Trap
     }
-    const onInit = () => {
+    const onScanElements = (fromObserver) => {
         if (enabled === false)
@@ -30,4 +30,5 @@ return;
             elemLast = focusableElems[focusableElems.length - 1];
-            // Auto-focus first focusable element
-            elemFirst.focus();
+            // Auto-focus first focusable element only when not called from observer
+            if (!fromObserver)
+                elemFirst.focus();
             // Listen for keydown on first & last element
@@ -38,4 +39,4 @@ elemFirst.addEventListener('keydown', onFirstElemKeydown);
     };
-    onInit();
-    function onDestroy() {
+    onScanElements(false);
+    function onCleanUp() {
         if (elemFirst)
@@ -46,2 +47,12 @@ elemFirst.removeEventListener('keydown', onFirstElemKeydown);
     }
+    // When children of node are changed (added or removed)
+    const onObservationChange = (mutationRecords, observer) => {
+        if (mutationRecords.length) {
+            onCleanUp();
+            onScanElements(true);
+        }
+        return observer;
+    };
+    const observer = new MutationObserver(onObservationChange);
+    observer.observe(node, { childList: true, subtree: true });
     // Lifecycle
@@ -51,8 +62,9 @@ return {
             enabled = newArgs;
-            newArgs ? onInit() : onDestroy();
+            newArgs ? onScanElements(false) : onCleanUp();
         },
         destroy() {
-            onDestroy();
+            onCleanUp();
+            observer.disconnect();
         }
     };
 }

dist/components/AppRail/AppRail.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
-import { type Readable, type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        /** Provide a writable or readable store to maintain navigation selection.*/
-        selected?: Writable<any> | Readable<any> | undefined;
-        /** Provide classes to set the background color.*/
+        /** Rail: Provide classes to set the background color.*/
         background?: string | undefined;
-        /** Provide classes to set the background color.*/
+        /** Rail: Provide classes to set the background color.*/
         border?: string | undefined;
-        /** Provide classes to set the tile active tile background.*/
-        active?: string | undefined;
-        /** Provide classes to set the tile hover background color.*/
-        hover?: string | undefined;
-        /** Provide classes to set the width.*/
+        /** Rail: Provide classes to set the width.*/
         width?: string | undefined;
-        /** Provide classes to set the height.*/
+        /** Rail: Provide classes to set the height.*/
         height?: string | undefined;
-        /** Provide a class to set the grid gap.*/
+        /** Rail: Provide a class to set the grid gap.*/
         gap?: string | undefined;
-        /** Provide arbitrary classes to the lead region.*/
+        /** Rail: Provide arbitrary classes to the lead region.*/
         regionLead?: string | undefined;
-        /** Provide arbitrary classes to the default region.*/
+        /** Rail: Provide arbitrary classes to the default region.*/
         regionDefault?: string | undefined;
-        /** Provide arbitrary classes to the trail region.*/
+        /** Rail: Provide arbitrary classes to the trail region.*/
         regionTrail?: string | undefined;
+        /** Tile: Provide classes to set the tile hover background color.*/
+        hover?: string | undefined;
+        /** Tile: Provide classes to set the tile active tile background.*/
+        active?: string | undefined;
+        /** Tile: Provide classes to set the tile vertical spacing.*/
+        spacing?: string | undefined;
     };
@@ -29,0 +28,0 @@ events: {

dist/components/AppRail/AppRailTile.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
-import type { Readable, Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        /** Provide a unique value, active tiles will be highlighted. href will be used if no value is provided.*/
-        value?: any | undefined;
-        /** Provide the element tag. Button or Anchor recommended.*/
-        tag?: string | undefined;
-        /** Provide the visible text label.*/
-        label?: string | undefined;
-        /** Provide arbitrary classes to style the icon region.*/
-        regionIcon?: string | undefined;
+        /** Set the radio group binding value.*/
+        group: any;
+        /** Set a unique name value for the input.*/
+        name: string;
+        /** Set the input's value.*/
+        value: any;
+        /** Provide arbitrary classes to style the lead region.*/
+        regionLead?: string | undefined;
         /** Provide arbitrary classes to style the label region.*/
         regionLabel?: string | undefined;
-        selected?: Writable<string> | Readable<string> | undefined;
+        hover?: string | undefined;
         active?: string | undefined;
-        hover?: string | undefined;
+        spacing?: string | undefined;
     };
@@ -24,4 +23,4 @@ events: {
         keypress: KeyboardEvent;
-        /** {{ event }} click - Fires when the component is clicked.*/
-        click: CustomEvent<MouseEvent>;
+        click: MouseEvent;
+        change: Event;
     } & {
@@ -31,2 +30,3 @@ [evt: string]: CustomEvent<any>;
     slots: {
+        lead: {};
         default: {};
@@ -38,5 +38,4 @@ };
 export type AppRailTileSlots = typeof __propDef.slots;
-/** A navigation tile for the App Rail component. */
 export default class AppRailTile extends SvelteComponentTyped<AppRailTileProps, AppRailTileEvents, AppRailTileSlots> {
 }
 export {};

dist/components/Paginator/Paginator.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
-import type { PaginationSettings } from './types';
+import type { PaginationSettings } from '../..';
 declare const __propDef: {
@@ -24,2 +24,6 @@ props: {
         buttonTextNext?: string | undefined;
+        /** Set the text label for the First button.*/
+        buttonTextFirst?: string | undefined;
+        /** Set the text label for the Last button.*/
+        buttonTextLast?: string | undefined;
     };
@@ -26,0 +30,0 @@ events: {

dist/components/Tab/Tab.svelte.d.ts

@@ -13,2 +13,4 @@ import { SvelteComponentTyped } from "svelte";
         controls?: string | undefined;
+        /** Provide arbitrary classes to style the tab region.*/
+        regionTab?: string | undefined;
         /** Provide classes to style each tab's active styles.*/
@@ -15,0 +17,0 @@ active?: string | undefined;

dist/components/Table/Table.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
-import type { TableSource } from './types';
+import type { TableSource } from '../..';
 declare const __propDef: {
@@ -4,0 +4,0 @@ props: {

dist/index.d.ts

@@ -7,2 +7,3 @@ export type { AutocompleteOption } from './components/Autocomplete/types';
 export type { TableSource } from './components/Table/types';
+export type { PaginationSettings } from './components/Paginator/types';
 export type { PopupSettings } from './utilities/Popup/types';
@@ -28,2 +29,3 @@ export type CssClasses = string;
 export { default as AppRailTile } from './components/AppRail/AppRailTile.svelte';
+export { default as AppRailAnchor } from './components/AppRail/AppRailAnchor.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
@@ -30,0 +32,0 @@ export { default as Autocomplete } from './components/Autocomplete/Autocomplete.svelte';

dist/index.js

@@ -37,2 +37,3 @@ // This file defines the short path imports for the package (ex: @skeletonlabs/skeleton/*)
 export { default as AppRailTile } from './components/AppRail/AppRailTile.svelte';
+export { default as AppRailAnchor } from './components/AppRail/AppRailAnchor.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
@@ -39,0 +40,0 @@ export { default as Autocomplete } from './components/Autocomplete/Autocomplete.svelte';

dist/utilities/DataTable/types.d.ts

@@ -1,2 +0,2 @@
-import type { PaginationSettings } from '../../components/Paginator/types';
+import type { PaginationSettings } from '../..';
 export interface DataTableModel<T extends Record<PropertyKey, unknown>> {
@@ -3,0 +3,0 @@ /** The original source data. */

dist/utilities/LightSwitch/lightswitch.js

 // Lightswitch Service
 import { get } from 'svelte/store';
+// DO NOT replace this ⬇ import, it has to be imported directly
 import { localStorageStore } from '../LocalStorageStore/LocalStorageStore';
@@ -4,0 +5,0 @@ // Stores ---

dist/utilities/Popup/popup.js

@@ -8,3 +8,3 @@ import { get, writable } from 'svelte/store';
     // Local State
-    let popupState = {
+    const popupState = {
         open: false,
@@ -14,3 +14,3 @@ autoUpdateCleanup: () => { }
     const focusableAllowedList = ':is(a[href], button, input, textarea, select, details, [tabindex]):not([tabindex="-1"])';
-    let focusablePoupupElements;
+    let focusablePopupElements;
     const documentationLink = 'https://www.skeleton.dev/utilities/popups';
@@ -40,16 +40,16 @@ // Elements
             throw new Error(`Floating UI 'arrow' not found for data-popup="${args.target}". ${documentationLink}`);
-        // Bundle optional middlware
-        const optionalMiddlware = [];
+        // Bundle optional middleware
+        const optionalMiddleware = [];
         // https://floating-ui.com/docs/size
         if (size)
-            optionalMiddlware.push(size(args.middleware?.size));
+            optionalMiddleware.push(size(args.middleware?.size));
         // https://floating-ui.com/docs/autoPlacement
         if (autoPlacement)
-            optionalMiddlware.push(autoPlacement(args.middleware?.autoPlacement));
+            optionalMiddleware.push(autoPlacement(args.middleware?.autoPlacement));
         // https://floating-ui.com/docs/hide
         if (hide)
-            optionalMiddlware.push(hide(args.middleware?.hide));
+            optionalMiddleware.push(hide(args.middleware?.hide));
         // https://floating-ui.com/docs/inline
         if (inline)
-            optionalMiddlware.push(inline(args.middleware?.inline));
+            optionalMiddleware.push(inline(args.middleware?.inline));
         // Floating UI Compute Position
@@ -70,4 +70,4 @@ // https://floating-ui.com/docs/computePosition
                 arrow(args.middleware?.arrow ?? { element: elemArrow || null }),
-                // Implement optional middlware
-                ...optionalMiddlware
+                // Implement optional middleware
+                ...optionalMiddleware
             ]
@@ -119,3 +119,3 @@ }).then(({ x, y, placement, middlewareData }) => {
         // Focus the first focusable element within the popup
-        focusablePoupupElements = Array.from(elemPopup?.querySelectorAll(focusableAllowedList));
+        focusablePopupElements = Array.from(elemPopup?.querySelectorAll(focusableAllowedList));
     }
@@ -183,6 +183,5 @@ function close(callback) {
         const triggerMenuFocused = popupState.open && document.activeElement === triggerNode;
-        if (triggerMenuFocused && (key === 'ArrowDown' || key === 'Tab')) {
+        if (triggerMenuFocused && (key === 'ArrowDown' || key === 'Tab') && focusableAllowedList.length > 0 && focusablePopupElements.length > 0) {
             event.preventDefault();
-            if (focusableAllowedList.length > 0)
-                focusablePoupupElements[0].focus();
+            focusablePopupElements[0].focus();
         }
@@ -198,7 +197,7 @@ };
             triggerNode.addEventListener('mouseover', open, true);
-            triggerNode.addEventListener('mouseleave', close, true);
+            triggerNode.addEventListener('mouseleave', () => close(), true);
             break;
         case 'focus-blur':
             triggerNode.addEventListener('focus', toggle, true);
-            triggerNode.addEventListener('blur', close, true);
+            triggerNode.addEventListener('blur', () => close(), true);
             break;
@@ -213,3 +212,3 @@ case 'focus-click':
     window.addEventListener('keydown', onWindowKeyDown, true);
-    // Render popup on initilization
+    // Render popup on initialization
     render();
@@ -229,6 +228,6 @@ // Lifecycle
             triggerNode.removeEventListener('mouseover', open, true);
-            triggerNode.removeEventListener('mouseleave', close, true);
+            triggerNode.removeEventListener('mouseleave', () => close(), true);
             triggerNode.removeEventListener('focus', toggle, true);
             triggerNode.removeEventListener('focus', open, true);
-            triggerNode.removeEventListener('blur', close, true);
+            triggerNode.removeEventListener('blur', () => close(), true);
             // Window Events
@@ -235,0 +234,0 @@ window.removeEventListener('click', onWindowClick, true);

package.json

 {
-	"name": "@skeletonlabs/skeleton",
-	"version": "v1.5.1",
-	"description": "A SvelteKit component library.",
-	"author": "endigo9740 <[e-mail]>",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"package": "node ./scripts/pre-build.js && npm run build:jss && svelte-kit sync && svelte-package && node ./scripts/post-build.js",
-		"publish": "npm publish",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --ignore-path .prettierignore --check --plugin-search-dir=. . && eslint --fix --ignore-path .gitignore .",
-		"format": "prettier --ignore-path .prettierignore --write --plugin-search-dir=. .",
-		"test": "vitest",
-		"coverage": "vitest run --coverage",
-		"build:jss": "node ./scripts/generate-jss.js --package"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/skeletonlabs/skeleton.git"
-	},
-	"bugs": {
-		"url": "https://github.com/skeletonlabs/skeleton/issues"
-	},
-	"keywords": [
-		"cli",
-		"components",
-		"ui",
-		"component",
-		"svelte",
-		"component-library",
-		"ui-components",
-		"ui-framework",
-		"tailwind",
-		"tailwindcss",
-		"components-library",
-		"sveltekit"
-	],
-	"license": "MIT",
-	"homepage": "https://skeleton.dev/",
-	"devDependencies": {
-		"@faker-js/faker": "^7.6.0",
-		"@floating-ui/dom": "^1.2.5",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.15.0",
-		"@sveltejs/package": "^2.0.2",
-		"@tailwindcss/forms": "^0.5.3",
-		"@tailwindcss/typography": "^0.5.9",
-		"@testing-library/dom": "^9.2.0",
-		"@testing-library/svelte": "^3.2.2",
-		"@typescript-eslint/eslint-plugin": "^5.57.0",
-		"@typescript-eslint/parser": "^5.57.0",
-		"@vercel/analytics": "^0.1.11",
-		"autoprefixer": "^10.4.14",
-		"c8": "^7.13.0",
-		"cspell": "^6.31.1",
-		"eslint": "^8.37.0",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"highlight.js": "^11.7.0",
-		"jsdom": "^21.1.1",
-		"postcss": "^8.4.21",
-		"postcss-import": "^15.1.0",
-		"postcss-js": "^4.0.1",
-		"postcss-load-config": "^4.0.1",
-		"prettier": "^2.8.7",
-		"prettier-plugin-svelte": "^2.10.0",
-		"sveld": "^0.18.0",
-		"svelte-check": "^3.1.4",
-		"svelte-preprocess": "^5.0.3",
-		"svelte2tsx": "^0.6.10",
-		"tailwindcss": "^3.3.1",
-		"tslib": "^2.5.0",
-		"typescript": "^4.9.5",
-		"vite": "^4.2.1",
-		"vite-plugin-sveld": "^1.1.0",
-		"vitest": "^0.29.8"
-	},
-	"type": "module",
-	"types": "index.d.ts",
-	"dependencies": {
-		"esm-env": "^1.0.0",
-		"svelte": "^3.58.0"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./styles/*": "./src/lib/styles/*",
-		"./tailwind/*": "./src/lib/tailwind/*",
-		"./themes/*": "./src/lib/themes/*"
-	},
-	"files": [
-		"./dist/**/*.svelte",
-		"./dist/**/*.js",
-		"./dist/**/*.d.ts",
-		"./src/lib/styles/*",
-		"./src/lib/tailwind/*",
-		"./src/lib/themes/*",
-		"!./dist/**/*.test.*"
-	],
-	"typesVersions": {
-		">4.0": {
-			"index": [
-				"./dist/index.d.ts"
-			]
-		}
-	}
+  "name": "@skeletonlabs/skeleton",
+  "version": "1.6.0",
+  "description": "A SvelteKit component library.",
+  "author": "endigo9740 <[e-mail]>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skeletonlabs/skeleton.git"
+  },
+  "bugs": {
+    "url": "https://github.com/skeletonlabs/skeleton/issues"
+  },
+  "keywords": [
+    "cli",
+    "components",
+    "ui",
+    "component",
+    "svelte",
+    "component-library",
+    "ui-components",
+    "ui-framework",
+    "tailwind",
+    "tailwindcss",
+    "components-library",
+    "sveltekit"
+  ],
+  "license": "MIT",
+  "homepage": "https://skeleton.dev/",
+  "devDependencies": {
+    "@floating-ui/dom": "1.2.5",
+    "@sveltejs/adapter-auto": "2.0.0",
+    "@sveltejs/kit": "1.15.0",
+    "@sveltejs/package": "2.0.2",
+    "@tailwindcss/forms": "0.5.3",
+    "@tailwindcss/typography": "0.5.9",
+    "@testing-library/dom": "9.2.0",
+    "@testing-library/svelte": "3.2.2",
+    "@typescript-eslint/eslint-plugin": "5.57.0",
+    "@typescript-eslint/parser": "5.57.0",
+    "@vitest/coverage-c8": "0.31.0",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.37.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-svelte3": "4.0.0",
+    "jsdom": "21.1.1",
+    "postcss": "8.4.21",
+    "postcss-import": "15.1.0",
+    "postcss-js": "4.0.1",
+    "postcss-load-config": "4.0.1",
+    "prettier": "2.8.7",
+    "prettier-plugin-svelte": "2.10.0",
+    "svelte-check": "3.1.4",
+    "tailwindcss": "3.3.1",
+    "tslib": "2.5.0",
+    "typescript": "4.9.5",
+    "vite": "4.2.1",
+    "vitest": "0.31.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "esm-env": "1.0.0",
+    "svelte": "3.58.0"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles/*": "./dist/styles/*",
+    "./themes/*": "./dist/themes/*",
+    "./tailwind/skeleton.cjs": "./dist/tailwind/skeleton.cjs"
+  },
+  "files": [
+    "./dist/**/*.svelte",
+    "./dist/**/*.js",
+    "./dist/**/*.d.ts",
+    "./dist/**/*.cjs",
+    "./dist/**/*.d.cts",
+    "./dist/styles/*",
+    "./dist/tailwind/*",
+    "./dist/themes/*",
+    "!./dist/**/*.test.*"
+  ],
+  "typesVersions": {
+    ">4.0": {
+      "index": [
+        "./dist/index.d.ts"
+      ],
+      "tailwind/skeleton.cjs": [
+        "./dist/tailwind/skeleton.d.cts"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "node ./scripts/pre-build.js && pnpm build:jss && svelte-kit sync && svelte-package && node ./scripts/post-build.js",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --ignore-path .prettierignore --check --plugin-search-dir=. . && eslint --fix --ignore-path .gitignore .",
+    "format": "prettier --ignore-path .prettierignore --write --plugin-search-dir=. .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "sync": "svelte-kit sync",
+    "build:jss": "node ./scripts/generate-jss.js --package"
+  }
 }

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

28

decreased by-22.22%

Number of package files

195

increased by5.41%

Lines of code

6143

increased by1.84%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

382733

decreased by-9.06%

Dependency changes

• + Addedesm-env@1.0.0(transitive)

• + Addedsvelte@3.58.0(transitive)

• - Removedesm-env@1.1.4(transitive)

• - Removedsvelte@3.59.2(transitive)

• Updatedesm-env@1.0.0

• Updatedsvelte@3.58.0