diff --git a/.changeset/breezy-bushes-admire.md b/.changeset/breezy-bushes-admire.md new file mode 100644 index 000000000..b4005cf45 --- /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 000000000..faf5f545b --- /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 000000000..26a2d7854 --- /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 000000000..423762bea --- /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 000000000..4fd325210 --- /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 000000000..3dc46ed67 --- /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 000000000..69dcdec29 --- /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 000000000..01989369b --- /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 000000000..8b99115c6 --- /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/four-bears-join.md b/.changeset/four-bears-join.md new file mode 100644 index 000000000..4b2d1dd93 --- /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 000000000..89d955886 --- /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 000000000..e649976ed --- /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 000000000..430ca3736 --- /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 000000000..83a14ee57 --- /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/major-turkeys-ask.md b/.changeset/major-turkeys-ask.md new file mode 100644 index 000000000..09eedb0fd --- /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 000000000..f19969c47 --- /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 000000000..1d74c9ed8 --- /dev/null +++ b/.changeset/nice-onions-sell.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +feat(DateRangeField): Add `quickPresets` support diff --git a/.changeset/open-hats-arrive.md b/.changeset/open-hats-arrive.md new file mode 100644 index 000000000..562685577 --- /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/pre.json b/.changeset/pre.json new file mode 100644 index 000000000..e55d8277d --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,32 @@ +{ + "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", + "four-bears-join", + "funny-days-crash", + "green-maps-bathe", + "loose-baths-make", + "loud-bees-juggle", + "major-turkeys-ask", + "nice-lamps-sing", + "nice-onions-sell", + "open-hats-arrive", + "ready-planets-deny", + "true-fans-crash", + "violet-books-sneeze", + "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 000000000..bbf850586 --- /dev/null +++ b/.changeset/ready-planets-deny.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': major +--- + +Tailwind 4 support diff --git a/.changeset/true-fans-crash.md b/.changeset/true-fans-crash.md new file mode 100644 index 000000000..e7a89f86d --- /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 000000000..7d3938410 --- /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/wide-months-rescue.md b/.changeset/wide-months-rescue.md new file mode 100644 index 000000000..c33a51561 --- /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 000000000..2497600cf --- /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 47bf0d837..af61f879a 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 65379cb0c..68e97a9e1 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.4", "@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.20.0" }, "packageManager": "pnpm@10.5.1" } diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md index b7e786c79..a9f8f17a5 100644 --- a/packages/svelte-ux/CHANGELOG.md +++ b/packages/svelte-ux/CHANGELOG.md @@ -1,5 +1,117 @@ # svelte-ux +## 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.6 ### Patch Changes diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json index c103dd0e0..9a66fc65c 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.6", + "version": "2.0.0-next.14", "scripts": { - "dev": "vite dev", + "dev": "vite dev --port 3001", "build": "vite build", "preview": "vite preview", "package": "svelte-package", @@ -19,59 +19,58 @@ "prepare": "svelte-kit sync" }, "devDependencies": { - "@changesets/cli": "^2.27.8", + "@changesets/cli": "^2.29.4", + "@fortawesome/fontawesome-common-types": "^6.7.2", "@fortawesome/free-solid-svg-icons": "^6.7.2", - "@sveltejs/adapter-cloudflare": "^7.0.3", - "@sveltejs/kit": "^2.21.0", + "@iconify-json/lucide": "^1.2.51", + "@sveltejs/adapter-cloudflare": "^7.0.4", + "@sveltejs/kit": "^2.21.5", "@sveltejs/package": "^2.3.11", - "@sveltejs/vite-plugin-svelte": "5.0.3", + "@sveltejs/vite-plugin-svelte": "5.1.0", "@tailwindcss/typography": "^0.5.16", - "@types/culori": "^2.1.1", + "@tailwindcss/vite": "^4.1.10", + "@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.3", + "culori": "^4.0.1", "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.252.0", + "prettier": "^3.5.3", + "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.34.1", + "svelte-check": "^4.2.1", + "svelte2tsx": "^0.7.39", + "tailwindcss": "^4.1.10", "tslib": "^2.8.1", - "typescript": "^5.7.3", + "typescript": "^5.8.2", "unist-util-visit": "^5.0.0", - "vite": "^6.2.0", - "vitest": "^3.0.7" + "unplugin-icons": "^22.1.0", + "vite": "^6.2.1", + "vitest": "^3.2.3" }, "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.1", + "@layerstack/svelte-actions": "1.0.1-next.12", + "@layerstack/svelte-stores": "1.0.2-next.12", + "@layerstack/svelte-table": "1.0.1-next.12", + "@layerstack/tailwind": "2.0.0-next.15", + "@layerstack/utils": "2.0.0-next.12", "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 cdbe50f3a..000000000 --- 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 fbfb7a9c4..c2b1ea970 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 79a285d23..c84b1f541 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 ae158e9f9..63fd38c51 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 8b3cd8294..30a16ecd6 100644 --- a/packages/svelte-ux/src/lib/components/Breadcrumb.svelte +++ b/packages/svelte-ux/src/lib/components/Breadcrumb.svelte @@ -1,9 +1,7 @@ @@ -449,7 +459,6 @@ {type} {...$$restProps} class={_class} - style={$$props.style ?? ''} {disabled} aria-disabled={disabled ? 'true' : 'false'} use:multi={actions} @@ -465,7 +474,11 @@ {:else if icon} - {#if typeof icon === 'string' || 'icon' in icon} + {#if typeof icon === 'function'} + + {@const Icon = icon} + + {:else if typeof icon === 'string' || 'icon' in icon} ['variant'] = defaults.variant; export let size: ComponentProps
diff --git a/packages/svelte-ux/src/lib/components/Pagination.svelte b/packages/svelte-ux/src/lib/components/Pagination.svelte index 981e2ddd8..5b0440e9a 100644 --- a/packages/svelte-ux/src/lib/components/Pagination.svelte +++ b/packages/svelte-ux/src/lib/components/Pagination.svelte @@ -1,12 +1,9 @@ @@ -52,7 +52,7 @@ 'flex items-center gap-1', settingsClasses.root, classes.root, - $$props.class + className )} > {#each show as component} @@ -63,7 +63,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 0239996c2..8543dc7d7 100644 --- a/packages/svelte-ux/src/lib/components/ThemeSelect.svelte +++ b/packages/svelte-ux/src/lib/components/ThemeSelect.svelte @@ -1,20 +1,17 @@
diff --git a/packages/svelte-ux/src/lib/components/ToggleOption.svelte b/packages/svelte-ux/src/lib/components/ToggleOption.svelte index 0a5c3ecbc..ad2ee28cd 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 b4ed87b88..db2f5c11c 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 05b37083e..e4caaeb1b 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 38ffa392c..c7474ee7b 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 e645eedbf..ea0de5771 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 3a1b1b189..d503f619a 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 d68858cba..0f1d08a7a 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 12aed6d8b..5bcd9a39e 100644 --- a/packages/svelte-ux/src/routes/theme/ColorField.svelte +++ b/packages/svelte-ux/src/routes/theme/ColorField.svelte @@ -1,4 +1,4 @@ -