diff --git a/.changeset/breezy-bushes-admire.md b/.changeset/breezy-bushes-admire.md new file mode 100644 index 00000000..b4005cf4 --- /dev/null +++ b/.changeset/breezy-bushes-admire.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix: Move `culori` and `@fortawesome/fontawesome-common-types` to `devDependenies` diff --git a/.changeset/bright-crabs-play.md b/.changeset/bright-crabs-play.md new file mode 100644 index 00000000..faf5f545 --- /dev/null +++ b/.changeset/bright-crabs-play.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +feat(TableOfContents): Simplify base styling and provide greater control via `classes`, `props`, `itemIndent` and `linkIndent` props and `link` slot. diff --git a/.changeset/clear-regions-listen.md b/.changeset/clear-regions-listen.md new file mode 100644 index 00000000..26a2d785 --- /dev/null +++ b/.changeset/clear-regions-listen.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(MultiSelect): Fix reactivity scope for filteredSelectedOptions and filteredUnselectedOptions. Issue #594 diff --git a/.changeset/common-bushes-move.md b/.changeset/common-bushes-move.md new file mode 100644 index 00000000..423762be --- /dev/null +++ b/.changeset/common-bushes-move.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': minor +--- + +feat: Setup default icons on settings() for easy overriding. Change default to lucide (from mdi) diff --git a/.changeset/cool-teams-judge.md b/.changeset/cool-teams-judge.md new file mode 100644 index 00000000..4fd32521 --- /dev/null +++ b/.changeset/cool-teams-judge.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(TableOfContents): Fix `classes` and `props` types diff --git a/.changeset/cuddly-coins-tease.md b/.changeset/cuddly-coins-tease.md new file mode 100644 index 00000000..3dc46ed6 --- /dev/null +++ b/.changeset/cuddly-coins-tease.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(Duration): Update Duration component to new `@layerstack/utils` `Duration` class diff --git a/.changeset/cuddly-snakes-tie.md b/.changeset/cuddly-snakes-tie.md new file mode 100644 index 00000000..69dcdec2 --- /dev/null +++ b/.changeset/cuddly-snakes-tie.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(NavItem): Apply active classes after base classes diff --git a/.changeset/dirty-pets-switch.md b/.changeset/dirty-pets-switch.md new file mode 100644 index 00000000..01989369 --- /dev/null +++ b/.changeset/dirty-pets-switch.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(Drawer): Fix display of action buttons diff --git a/.changeset/fair-bugs-carry.md b/.changeset/fair-bugs-carry.md new file mode 100644 index 00000000..8b99115c --- /dev/null +++ b/.changeset/fair-bugs-carry.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix: Use `next` releases for all `@layerstack/*` packages diff --git a/.changeset/forty-roses-dance.md b/.changeset/forty-roses-dance.md new file mode 100644 index 00000000..f7d96bc6 --- /dev/null +++ b/.changeset/forty-roses-dance.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +feat(SelectField|MultiSelect|MultiSelectField|MultiSelectMenu): Added (beforeOptions/afterOptions) slots. diff --git a/.changeset/four-bears-join.md b/.changeset/four-bears-join.md new file mode 100644 index 00000000..4b2d1dd9 --- /dev/null +++ b/.changeset/four-bears-join.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix: Update deps include @layerstack/utils with improved format diff --git a/.changeset/funny-days-crash.md b/.changeset/funny-days-crash.md new file mode 100644 index 00000000..89d95588 --- /dev/null +++ b/.changeset/funny-days-crash.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +refactor: Replace `date-fns` usage with new `@layerstack/utils` date utils (based on d3-time) to reduce bundle size diff --git a/.changeset/green-maps-bathe.md b/.changeset/green-maps-bathe.md new file mode 100644 index 00000000..e649976e --- /dev/null +++ b/.changeset/green-maps-bathe.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +docs: Update @layerstack/tailwind to `2.0.0-next.1`, fixing styling of tailwind typography when deployed diff --git a/.changeset/loose-baths-make.md b/.changeset/loose-baths-make.md new file mode 100644 index 00000000..430ca373 --- /dev/null +++ b/.changeset/loose-baths-make.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Update dependencies diff --git a/.changeset/loud-bees-juggle.md b/.changeset/loud-bees-juggle.md new file mode 100644 index 00000000..83a14ee5 --- /dev/null +++ b/.changeset/loud-bees-juggle.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +chore: Update @layerstack/tailwind with better theme generation and runtime separation diff --git a/.changeset/lovely-queens-love.md b/.changeset/lovely-queens-love.md new file mode 100644 index 00000000..48217624 --- /dev/null +++ b/.changeset/lovely-queens-love.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(Icon): Restore adding `inline-block` by default diff --git a/.changeset/major-turkeys-ask.md b/.changeset/major-turkeys-ask.md new file mode 100644 index 00000000..09eedb0f --- /dev/null +++ b/.changeset/major-turkeys-ask.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(Menu): Support `bind:open` (underlying Popover) diff --git a/.changeset/nice-lamps-sing.md b/.changeset/nice-lamps-sing.md new file mode 100644 index 00000000..f19969c4 --- /dev/null +++ b/.changeset/nice-lamps-sing.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +chore: Update deps diff --git a/.changeset/nice-onions-sell.md b/.changeset/nice-onions-sell.md new file mode 100644 index 00000000..1d74c9ed --- /dev/null +++ b/.changeset/nice-onions-sell.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +feat(DateRangeField): Add `quickPresets` support diff --git a/.changeset/nine-carpets-own.md b/.changeset/nine-carpets-own.md new file mode 100644 index 00000000..39879bbe --- /dev/null +++ b/.changeset/nine-carpets-own.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Update deps diff --git a/.changeset/open-hats-arrive.md b/.changeset/open-hats-arrive.md new file mode 100644 index 00000000..56268557 --- /dev/null +++ b/.changeset/open-hats-arrive.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(DateRangeField): Include year when displaying month selection diff --git a/.changeset/plain-games-prove.md b/.changeset/plain-games-prove.md new file mode 100644 index 00000000..430ca373 --- /dev/null +++ b/.changeset/plain-games-prove.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Update dependencies diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000..1f0c221d --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,39 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "svelte-ux": "1.0.0" + }, + "changesets": [ + "breezy-bushes-admire", + "bright-crabs-play", + "clear-regions-listen", + "common-bushes-move", + "cool-teams-judge", + "cuddly-coins-tease", + "cuddly-snakes-tie", + "dirty-pets-switch", + "fair-bugs-carry", + "forty-roses-dance", + "four-bears-join", + "funny-days-crash", + "green-maps-bathe", + "loose-baths-make", + "loud-bees-juggle", + "lovely-queens-love", + "major-turkeys-ask", + "nice-lamps-sing", + "nice-onions-sell", + "nine-carpets-own", + "open-hats-arrive", + "plain-games-prove", + "ready-planets-deny", + "silent-items-tickle", + "stale-words-allow", + "true-fans-crash", + "violet-books-sneeze", + "weak-mice-know", + "wide-months-rescue", + "witty-spies-divide" + ] +} diff --git a/.changeset/ready-planets-deny.md b/.changeset/ready-planets-deny.md new file mode 100644 index 00000000..bbf85058 --- /dev/null +++ b/.changeset/ready-planets-deny.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': major +--- + +Tailwind 4 support diff --git a/.changeset/silent-items-tickle.md b/.changeset/silent-items-tickle.md new file mode 100644 index 00000000..168e1986 --- /dev/null +++ b/.changeset/silent-items-tickle.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(Drawer/Dialog): open/close events firing on mount and unrelated updates. Now events are emitted only on actual state transitions by tracking the previous open value, preventing unintended closes and focus jumps. (#632) diff --git a/.changeset/stale-words-allow.md b/.changeset/stale-words-allow.md new file mode 100644 index 00000000..cf002147 --- /dev/null +++ b/.changeset/stale-words-allow.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix: Replace use of unplugin-icons `~icon/` imports with `@lucide/svelte` package for default icons to remove Vite configuration. Fixes #618 diff --git a/.changeset/true-fans-crash.md b/.changeset/true-fans-crash.md new file mode 100644 index 00000000..e7a89f86 --- /dev/null +++ b/.changeset/true-fans-crash.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': minor +--- + +feat: Support component icons (Unplugin icons, etc) diff --git a/.changeset/violet-books-sneeze.md b/.changeset/violet-books-sneeze.md new file mode 100644 index 00000000..7d393841 --- /dev/null +++ b/.changeset/violet-books-sneeze.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +feat(TreeList): Support passing `props` to underlying ul/li elements. Add `data-level` attribute to li for CSS targeting diff --git a/.changeset/weak-mice-know.md b/.changeset/weak-mice-know.md new file mode 100644 index 00000000..cfeabd0a --- /dev/null +++ b/.changeset/weak-mice-know.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Fix(TableOfContent): No known conditions for "./elements" specifier in "svelte" package diff --git a/.changeset/wide-months-rescue.md b/.changeset/wide-months-rescue.md new file mode 100644 index 00000000..c33a5156 --- /dev/null +++ b/.changeset/wide-months-rescue.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +fix(DateRange): Fix selection gradient diff --git a/.changeset/witty-spies-divide.md b/.changeset/witty-spies-divide.md new file mode 100644 index 00000000..2497600c --- /dev/null +++ b/.changeset/witty-spies-divide.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Switch from `@tailwindcss/postcss` to `@tailwindcss/vite`. Update all non-major packages diff --git a/README.md b/README.md index 47bf0d83..af61f879 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ The projects aims to simplify building highly interactive and visual application The components are built using Tailwind with extensibility and customization in mind through the use of theming, variants, granular class overrides, and slots. A rich design token system is also currently in the works. -See also the companion library [LayerChart](https://layerchart.com) for a large collection of composable chart components to build a wide range of visualizations. +See also the companion library [LayerChart](https://layerchart.com) for a large collection of composable chart components to build a wide range of visualizations and [LayerStack](https://layerstack.dev) for a collection of svelte stores, actions, and general utilities. ## Contributing diff --git a/package.json b/package.json index 65379cb0..2c3e6e0b 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,11 @@ "up-deps": "pnpm update -r -i --latest" }, "devDependencies": { - "@changesets/cli": "^2.27.8", + "@changesets/cli": "^2.29.5", "@svitejs/changesets-changelog-github-compact": "^1.2.0", - "prettier-plugin-svelte": "^3.3.3", + "prettier-plugin-svelte": "^3.4.0", "rimraf": "6.0.1", - "wrangler": "^4.14.4" + "wrangler": "^4.27.0" }, "packageManager": "pnpm@10.5.1" } diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md index 190a0a1e..e5275fd4 100644 --- a/packages/svelte-ux/CHANGELOG.md +++ b/packages/svelte-ux/CHANGELOG.md @@ -1,5 +1,151 @@ # svelte-ux +## 2.0.0-next.19 + +### Patch Changes + +- feat(SelectField|MultiSelect|MultiSelectField|MultiSelectMenu): Added (beforeOptions/afterOptions) slots. ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- fix(Drawer/Dialog): open/close events firing on mount and unrelated updates. Now events are emitted only on actual state transitions by tracking the previous open value, preventing unintended closes and focus jumps. (#632) ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.18 + +### Patch Changes + +- Update deps ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- Fix(TableOfContent): No known conditions for "./elements" specifier in "svelte" package ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.17 + +### Patch Changes + +- fix(Icon): Restore adding `inline-block` by default ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.16 + +### Patch Changes + +- fix: Replace use of unplugin-icons `~icon/` imports with `@lucide/svelte` package for default icons to remove Vite configuration. Fixes #618 ([#625](https://github.com/techniq/svelte-ux/pull/625)) + +## 2.0.0-next.15 + +### Patch Changes + +- Update dependencies ([#622](https://github.com/techniq/svelte-ux/pull/622)) + +## 2.0.0-next.14 + +### Minor Changes + +- feat: Setup default icons on settings() for easy overriding. Change default to lucide (from mdi) ([#616](https://github.com/techniq/svelte-ux/pull/616)) + +- feat: Support component icons (Unplugin icons, etc) ([#616](https://github.com/techniq/svelte-ux/pull/616)) + +## 2.0.0-next.13 + +### Patch Changes + +- fix(TableOfContents): Fix `classes` and `props` types ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.12 + +### Patch Changes + +- feat(TableOfContents): Simplify base styling and provide greater control via `classes`, `props`, `itemIndent` and `linkIndent` props and `link` slot. ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- feat(TreeList): Support passing `props` to underlying ul/li elements. Add `data-level` attribute to li for CSS targeting ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.11 + +### Patch Changes + +- chore: Update @layerstack/tailwind with better theme generation and runtime separation ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.10 + +### Patch Changes + +- chore: Update deps ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.9 + +### Patch Changes + +- fix: Move `culori` and `@fortawesome/fontawesome-common-types` to `devDependenies` ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.8 + +### Patch Changes + +- fix(NavItem): Apply active classes after base classes ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- refactor: Replace `date-fns` usage with new `@layerstack/utils` date utils (based on d3-time) to reduce bundle size ([#602](https://github.com/techniq/svelte-ux/pull/602)) + +## 2.0.0-next.7 + +### Patch Changes + +- fix(Drawer): Fix display of action buttons ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.6 + +### Patch Changes + +- fix(MultiSelect): Fix reactivity scope for filteredSelectedOptions and filteredUnselectedOptions. Issue #594 ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- fix: Update deps including @layerstack/utils with improved format ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- fix(DateRangeField): Include year when displaying month selection ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.5 + +### Patch Changes + +- fix(Duration): Update Duration component to new `@layerstack/utils` `Duration` class ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- Update dependencies ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.4 + +### Patch Changes + +- fix(Menu): Support `bind:open` (underlying Popover) ([#584](https://github.com/techniq/svelte-ux/pull/584)) + +- feat(DateRangeField): Add `quickPresets` support ([#584](https://github.com/techniq/svelte-ux/pull/584)) + +- fix(DateRange): Fix selection gradient ([#584](https://github.com/techniq/svelte-ux/pull/584)) + +## 2.0.0-next.3 + +### Patch Changes + +- fix(SelectField|MultiSelect): Unify and enhance search functionality, enabling new custom search capability in MultiSelect. + +## 2.0.0-next.2 + +### Patch Changes + +- Switch from `@tailwindcss/postcss` to `@tailwindcss/vite`. Update all non-major packages + +## 2.0.0-next.1 + +### Patch Changes + +- fix: Use `next` releases for all `@layerstack/*` packages ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +- docs: Update @layerstack/tailwind to `2.0.0-next.1`, fixing styling of tailwind typography when deployed ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +## 2.0.0-next.0 + +### Major Changes + +- Tailwind 4 support ([#571](https://github.com/techniq/svelte-ux/pull/571)) + +### Patch Changes + +- fix(Progress): Fix `TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite.` ([`6c2efa2`](https://github.com/techniq/svelte-ux/commit/6c2efa2d6d5b1a7ccf2b99c1826bc1232c51d2cc)) + ## 1.0.8 ### Patch Changes @@ -1384,7 +1530,6 @@ Version 1.0 (Svelte 3-5 and Tailwind 3 compatible) - [Button] Rename "text" variant to "default" ([`4d61047`](https://github.com/techniq/svelte-ux/commit/4d6104746922808b84ff1d81b525205e53f7a930)) - [ToggleGroup] Major overhaul of styling ([`ef5c2ee`](https://github.com/techniq/svelte-ux/commit/ef5c2ee9cf50a3025fcb335ff091fdf5c63f2241)) - - Support many variants based on accent color - Support style modifications including size, rounded (small/full), gap (small/px), and inset. - Rename `optionsContainer` to `label` and use label component. diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json index a0b03c03..9b04b6b3 100644 --- a/packages/svelte-ux/package.json +++ b/packages/svelte-ux/package.json @@ -4,9 +4,9 @@ "author": "Sean Lynch ", "license": "MIT", "repository": "techniq/svelte-ux", - "version": "1.0.8", + "version": "2.0.0-next.19", "scripts": { - "dev": "vite dev", + "dev": "vite dev --port 3001", "build": "vite build", "preview": "vite preview", "package": "svelte-package", @@ -19,59 +19,59 @@ "prepare": "svelte-kit sync" }, "devDependencies": { - "@changesets/cli": "^2.27.8", - "@fortawesome/free-solid-svg-icons": "^6.7.2", - "@sveltejs/adapter-cloudflare": "^7.0.3", - "@sveltejs/kit": "^2.21.0", - "@sveltejs/package": "^2.3.11", - "@sveltejs/vite-plugin-svelte": "5.0.3", + "@changesets/cli": "^2.29.5", + "@fortawesome/fontawesome-common-types": "^7.0.0", + "@fortawesome/free-solid-svg-icons": "^7.0.0", + "@iconify-json/lucide": "^1.2.60", + "@sveltejs/adapter-cloudflare": "^7.1.2", + "@sveltejs/kit": "^2.27.0", + "@sveltejs/package": "^2.4.0", + "@sveltejs/vite-plugin-svelte": "6.1.0", "@tailwindcss/typography": "^0.5.16", - "@types/culori": "^2.1.1", + "@tailwindcss/vite": "^4.1.11", + "@types/culori": "^4.0.0", "@types/d3-array": "^3.2.1", "@types/d3-scale": "^4.0.9", "@types/lodash-es": "^4.17.12", "@types/prismjs": "^1.26.5", - "@vitest/coverage-v8": "^3.0.7", - "autoprefixer": "^10.4.20", - "daisyui": "^4.12.24", + "@vitest/coverage-v8": "^3.2.4", + "culori": "^4.0.2", "marked": "^15.0.7", "mdsvex": "^0.12.3", - "posthog-js": "^1.223.4", - "prettier": "^3.5.2", - "prettier-plugin-svelte": "^3.3.3", + "posthog-js": "^1.258.5", + "prettier": "^3.6.2", + "prettier-plugin-svelte": "^3.4.0", "rehype-slug": "^6.0.0", - "svelte": "5.20.4", - "svelte-check": "^4.1.4", - "svelte2tsx": "^0.7.34", - "tailwindcss": "^3.4.17", + "svelte": "5.37.2", + "svelte-check": "^4.3.0", + "svelte2tsx": "^0.7.41", + "tailwindcss": "^4.1.11", "tslib": "^2.8.1", - "typescript": "^5.7.3", + "typescript": "^5.9.2", "unist-util-visit": "^5.0.0", - "vite": "^6.2.0", - "vitest": "^3.0.7" + "unplugin-icons": "^22.2.0", + "vite": "^7.0.6", + "vitest": "^3.2.4" }, "type": "module", "dependencies": { - "@floating-ui/dom": "^1.6.13", - "@fortawesome/fontawesome-common-types": "^6.7.2", - "@layerstack/svelte-actions": "^1.0.0", - "@layerstack/svelte-stores": "^1.0.1", - "@layerstack/svelte-table": "^1.0.0", - "@layerstack/tailwind": "^1.0.0", - "@layerstack/utils": "^1.0.0", - "@mdi/js": "^7.4.47", - "culori": "^4.0.1", + "@floating-ui/dom": "^1.7.3", + "@layerstack/svelte-actions": "1.0.1-next.14", + "@layerstack/svelte-stores": "1.0.2-next.14", + "@layerstack/svelte-table": "1.0.1-next.14", + "@layerstack/tailwind": "2.0.0-next.17", + "@layerstack/utils": "2.0.0-next.14", + "@lucide/svelte": "^0.536.0", "d3-array": "^3.2.4", "d3-scale": "^4.0.2", - "date-fns": "^4.1.0", "esm-env": "^1.2.2", "immer": "^10.1.1", "lodash-es": "^4.17.21", "prism-svelte": "^0.5.0", "prism-themes": "^1.9.0", - "prismjs": "^1.29.0", + "prismjs": "^1.30.0", "sveld": "^0.22.1", - "zod": "^3.24.2" + "zod": "^3.25.64" }, "peerDependencies": { "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0" diff --git a/packages/svelte-ux/postcss.config.cjs b/packages/svelte-ux/postcss.config.cjs deleted file mode 100644 index cdbe50f3..00000000 --- a/packages/svelte-ux/postcss.config.cjs +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - plugins: { - 'tailwindcss/nesting': {}, - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/packages/svelte-ux/src/app.d.ts b/packages/svelte-ux/src/app.d.ts index fbfb7a9c..c2b1ea97 100644 --- a/packages/svelte-ux/src/app.d.ts +++ b/packages/svelte-ux/src/app.d.ts @@ -1,51 +1,55 @@ +import 'unplugin-icons/types/svelte'; + // See https://kit.svelte.dev/docs/types#app // for information about these interfaces // and what to do when importing types -declare namespace App { - // interface Error {} - // interface Locals {} - - interface PageData { - meta: { - title?: string; - description?: string; - source?: string; - pageSource?: string; - api?: SveldJson; - features?: string[]; - related?: string[]; - hideUsage?: boolean; - hideTableOfContents?: boolean; - status?: string; - }; +declare global { + namespace App { + // interface Error {} + // interface Locals {} + + interface PageData { + meta: { + title?: string; + description?: string; + source?: string; + pageSource?: string; + api?: SveldJson; + features?: string[]; + related?: string[]; + hideUsage?: boolean; + hideTableOfContents?: boolean; + status?: string; + }; + } + + // interface PageState {} + // interface Platform {} } - // interface PageState {} - // interface Platform {} -} - -// TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things? -// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md -declare namespace svelteHTML { - interface HTMLAttributes { - // use:intersection - 'on:intersecting'?: (event: CustomEvent) => void; + // TODO: Can this be referenced from `@layerstack/svelte-actions` types.d.ts without breaking other things? + // https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md + namespace svelteHTML { + interface HTMLAttributes { + // use:intersection + 'on:intersecting'?: (event: CustomEvent) => void; - // use:mutate - 'on:mutate'?: (event: CustomEvent) => void; + // use:mutate + 'on:mutate'?: (event: CustomEvent) => void; - // use:movable - 'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void; - 'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void; - 'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void; + // use:movable + 'on:movestart'?: (event: CustomEvent<{ x: number; y: number }>) => void; + 'on:move'?: (event: CustomEvent<{ x: number; y: number; dx: number; dy: number }>) => void; + 'on:moveend'?: (event: CustomEvent<{ x: number; y: number }>) => void; - // use:popover - 'on:clickOutside'?: (event: CustomEvent) => void; + // use:popover + 'on:clickOutside'?: (event: CustomEvent) => void; - // use:overflow - 'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void; + // use:overflow + 'on:overflow'?: (event: CustomEvent<{ overflowX: number; overflowY: number }>) => void; - // use:longpress - 'on:longpress'?: (event: CustomEvent) => void; + // use:longpress + 'on:longpress'?: (event: CustomEvent) => void; + } } } diff --git a/packages/svelte-ux/src/docs/Blockquote.svelte b/packages/svelte-ux/src/docs/Blockquote.svelte index 79a285d2..c84b1f54 100644 --- a/packages/svelte-ux/src/docs/Blockquote.svelte +++ b/packages/svelte-ux/src/docs/Blockquote.svelte @@ -1,15 +1,15 @@
a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2' )} > - +
diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte index ae158e9f..63fd38c5 100644 --- a/packages/svelte-ux/src/docs/ViewSourceButton.svelte +++ b/packages/svelte-ux/src/docs/ViewSourceButton.svelte @@ -1,6 +1,6 @@ -
+
{#each data as item} {@const valuePercent = item.value / (total ?? sum(data, (d) => d.value))} diff --git a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte index 8b3cd829..d8fa3db3 100644 --- a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte +++ b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte @@ -1,9 +1,8 @@ @@ -449,7 +459,6 @@ {type} {...$$restProps} class={_class} - style={$$props.style ?? ''} {disabled} aria-disabled={disabled ? 'true' : 'false'} use:multi={actions} @@ -465,13 +474,17 @@ {:else if icon} - {#if typeof icon === 'string' || 'icon' in icon} + {#if typeof icon === 'function'} + + + {:else if typeof icon === 'string' || 'icon' in icon} {:else} + {/if} diff --git a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte index ff84283a..7695dc91 100644 --- a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte +++ b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte @@ -30,7 +30,7 @@ export let variant: ComponentProps
diff --git a/packages/svelte-ux/src/lib/components/Pagination.svelte b/packages/svelte-ux/src/lib/components/Pagination.svelte index 981e2ddd..5a03b924 100644 --- a/packages/svelte-ux/src/lib/components/Pagination.svelte +++ b/packages/svelte-ux/src/lib/components/Pagination.svelte @@ -1,6 +1,4 @@ @@ -52,7 +53,7 @@ 'flex items-center gap-1', settingsClasses.root, classes.root, - $$props.class + className )} > {#each show as component} @@ -63,7 +64,7 @@ {#if component === 'firstPage'}
import Prism from 'prismjs'; import 'prism-svelte'; - import { mdiCodeTags } from '@mdi/js'; import { slide } from 'svelte/transition'; import Button from './Button.svelte'; import Code from './Code.svelte'; import { cls } from '@layerstack/tailwind'; + import { getSettings } from './settings.js'; export let code: string | null = null; export let language = 'svelte'; export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : ''; export let showCode = false; + + let className: string | undefined = undefined; + export { className as class }; + + const { icons } = getSettings(); -
+
@@ -29,7 +34,7 @@ {#if code}
{/if} diff --git a/packages/svelte-ux/src/lib/components/ThemeSelect.svelte b/packages/svelte-ux/src/lib/components/ThemeSelect.svelte index 0239996c..9369fb71 100644 --- a/packages/svelte-ux/src/lib/components/ThemeSelect.svelte +++ b/packages/svelte-ux/src/lib/components/ThemeSelect.svelte @@ -1,20 +1,18 @@
diff --git a/packages/svelte-ux/src/lib/components/ToggleOption.svelte b/packages/svelte-ux/src/lib/components/ToggleOption.svelte index 0a5c3ecb..ad2ee28c 100644 --- a/packages/svelte-ux/src/lib/components/ToggleOption.svelte +++ b/packages/svelte-ux/src/lib/components/ToggleOption.svelte @@ -8,6 +8,9 @@ export let value: any; + let className: string | undefined = undefined; + export { className as class }; + export let classes: { root?: string; option?: string; @@ -55,7 +58,7 @@ $classesContext.label, settingsClasses.root, classes.root, - $$props.class + className )} > diff --git a/packages/svelte-ux/src/lib/components/Tooltip.svelte b/packages/svelte-ux/src/lib/components/Tooltip.svelte index b4ed87b8..db2f5c11 100644 --- a/packages/svelte-ux/src/lib/components/Tooltip.svelte +++ b/packages/svelte-ux/src/lib/components/Tooltip.svelte @@ -23,6 +23,9 @@ export let autoPlacement = false; export let matchWidth: boolean = false; + let className: string | undefined = undefined; + export { className as class }; + export let classes: { root?: string; popover?: string; @@ -88,7 +91,7 @@
- {#if $$props.class || underline || cursor} + {#if className || underline || cursor} diff --git a/packages/svelte-ux/src/lib/components/TreeList.svelte b/packages/svelte-ux/src/lib/components/TreeList.svelte index 05b37083..e4caaeb1 100644 --- a/packages/svelte-ux/src/lib/components/TreeList.svelte +++ b/packages/svelte-ux/src/lib/components/TreeList.svelte @@ -1,10 +1,22 @@
    {#each nodes ?? [] as node}
  • {#if node.children} - + {/if} diff --git a/packages/svelte-ux/src/lib/components/YearList.svelte b/packages/svelte-ux/src/lib/components/YearList.svelte index 38ffa392..c7474ee7 100644 --- a/packages/svelte-ux/src/lib/components/YearList.svelte +++ b/packages/svelte-ux/src/lib/components/YearList.svelte @@ -1,14 +1,15 @@ -
    +

    Getting started

    Installation

    + + Svelte CLI + Manual Install + +
    -
      -
    • - Svelte UX 1.0.0 requires Tailwind 3. For new projects, Svelte CLI sv installs - Tailwind 4 which can not be used. Instead you will need to follow the - official guide - to setup your project. -
      • -
    • - The upcoming Svelte UX 2.0.0 release has been updated to Tailwind 4 and can be previewed - here. -
      • -
    • Svelte UX 1.0.0 supports Svelte 3-5, while 2.0.0 will require Svelte 5.
      • -
    -
    Add Svelte UX package
    - - -
    Update tailwind.config.cjs
    - + {#if selectedTab === 'svelte-cli'} +
    + Start a new project SvelteKit project with sv cli +
    + + +
    Select Tailwind during setup OR run
    + + +
    Add Svelte UX package
    + + {:else if selectedTab === 'manual'} +
    + Follow the Tailwind + guide + to setup a new SvelteKit project with Tailwind. +
    + +
    Add Svelte UX package
    + + {/if} + + {#if selectedTab === 'svelte-cli' || selectedTab === 'manual'} +
    Update app.css
    + +*/ +:root { + --color-primary: var(--color-purple-700); + --color-secondary: var(--color-orange-500); + + &.dark { + --color-primary: var(--color-purple-400); + --color-surface-100: var(--color-zinc-900); + --color-surface-200: var(--color-zinc-950); + --color-surface-300: var(--color-black); + } +} +`} + language="css" + /> + {/if}
    -

    A few notes regarding the tailwind.config.cjs

    -
      -
    • - {`./node_modules/svelte-ux/**/*.{(svelte, js)}`} adds the library classes via - JIT -
      • + Theme setup: +
      • - ux.themes is used to configure the theme colors. See - customization for more details. + The line @import '@layerstack/tailwind/themes/basic.css'; in the CSS example + above provides basic light and dark theme support. If you require multiple light/dark themes, + or want to use pre-built themes like Skeleton or Daisy UI (which is what the Svelte UX + docs + use), you should replace this line with + @import '@layerstack/tailwind/themes/all.css';.
      • - Tailwind plugin injects the theme color variables, sets border, outline, ring, and typograpy - defauls based on the theme, and adds additional utility classes including: -
          -
        • - elevation-# for - realistic shadows - using multiple shadow layers, unlike the current Tailwind - shadows - which have at most 2 layers. -
          • -
        • - grid-stack to easily stack grid children -
          • -
        • - scrollbar-none to hide the scrollbar -
          • -
        + @layerstack/tailwind (the theme system used by Svelte UX) was migrated to be css-only. You can + see the source on the next branch here
      diff --git a/packages/svelte-ux/src/routes/_NavMenu.svelte b/packages/svelte-ux/src/routes/_NavMenu.svelte index e645eedb..ea0de577 100644 --- a/packages/svelte-ux/src/routes/_NavMenu.svelte +++ b/packages/svelte-ux/src/routes/_NavMenu.svelte @@ -3,7 +3,11 @@ import { entries } from '@layerstack/utils'; import { page } from '$app/stores'; - import { mdiCog, mdiFormatListBulleted, mdiHome, mdiPalette, mdiOpenInNew } from '@mdi/js'; + + import LucideArrowUpRight from '~icons/lucide/arrow-up-right'; + import LucideHouse from '~icons/lucide/house'; + import LucideList from '~icons/lucide/list'; + import LucideSettings2 from '~icons/lucide/settings-2'; const components = { App: ['AppBar', 'AppLayout', 'NavItem', 'Settings', 'ThemeInit', 'ThemeSelect', 'ThemeSwitch'], @@ -74,10 +78,10 @@ }; - - - - + + + +

      Components

      {#each entries(components) as [header, items]} @@ -94,7 +98,7 @@

      Charts

      Actions Stores Utils -
      -
      +
      +
      {@html marked.parse(sanitize(changelog))}
      diff --git a/packages/svelte-ux/src/routes/customization/+layout.svelte b/packages/svelte-ux/src/routes/customization/+layout.svelte index 3a1b1b18..d503f619 100644 --- a/packages/svelte-ux/src/routes/customization/+layout.svelte +++ b/packages/svelte-ux/src/routes/customization/+layout.svelte @@ -2,8 +2,8 @@ import { TableOfContents } from 'svelte-ux'; -
      -
      +
      +
      diff --git a/packages/svelte-ux/src/routes/customization/+page.md b/packages/svelte-ux/src/routes/customization/+page.md index d68858cb..0f1d08a7 100644 --- a/packages/svelte-ux/src/routes/customization/+page.md +++ b/packages/svelte-ux/src/routes/customization/+page.md @@ -121,10 +121,10 @@ Semantic and state colors have a default color (ex. `bg-primary`), shades `50`-`
      -
      primary example
      -
      secondary example
      -
      Success example
      -
      danger example
      +
      primary example
      +
      secondary example
      +
      Success example
      +
      danger example
       @@ -132,9 +132,9 @@ Surface colors are defined as `100` (lightest), `200` (medium), and `300` (darke
      -
      surface-100 example
      -
      surface-200 example
      -
      surface-300 example
      +
      surface-100 example
      +
      surface-200 example
      +
      surface-300 example
       @@ -147,8 +147,8 @@ Colors can be referenced using Tailwind classes such as `bg-primary`, `text-prim You can also reference the colors using `theme()`, which is helpful to set CSS variables. ```html -
      -
      +
      +
      + --> diff --git a/packages/svelte-ux/src/routes/theme/ColorField.svelte b/packages/svelte-ux/src/routes/theme/ColorField.svelte index 12aed6d8..5bcd9a39 100644 --- a/packages/svelte-ux/src/routes/theme/ColorField.svelte +++ b/packages/svelte-ux/src/routes/theme/ColorField.svelte @@ -1,4 +1,4 @@ -