diff --git a/.changeset/angry-zebras-remember.md b/.changeset/angry-zebras-remember.md new file mode 100644 index 000000000..958213932 --- /dev/null +++ b/.changeset/angry-zebras-remember.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +Add styles (with daisy) as top-level export diff --git a/.changeset/chilled-dingos-sell.md b/.changeset/chilled-dingos-sell.md new file mode 100644 index 000000000..aa081efd0 --- /dev/null +++ b/.changeset/chilled-dingos-sell.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": minor +--- + +Update Settings component to expose each settings key as a component prop diff --git a/.changeset/cool-hotels-own.md b/.changeset/cool-hotels-own.md new file mode 100644 index 000000000..bc91528f8 --- /dev/null +++ b/.changeset/cool-hotels-own.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +[SelectField] Add `stepper` prop to iterate through options (like `MenuField`) diff --git a/.changeset/eight-bottles-eat.md b/.changeset/eight-bottles-eat.md new file mode 100644 index 000000000..4703329e7 --- /dev/null +++ b/.changeset/eight-bottles-eat.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +[TableOfContents] Support changing icon diff --git a/.changeset/fair-trees-sparkle.md b/.changeset/fair-trees-sparkle.md new file mode 100644 index 000000000..3b3d7d390 --- /dev/null +++ b/.changeset/fair-trees-sparkle.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +[MenuField] Expose `selected` option via prop (similar to `SelectField`) diff --git a/.changeset/for-you-sean.md b/.changeset/for-you-sean.md new file mode 100644 index 000000000..308f7b580 --- /dev/null +++ b/.changeset/for-you-sean.md @@ -0,0 +1,7 @@ +--- +'svelte-ux': minor +--- + +- Rename settings `theme` argument to `classes` +- Rename getTheme to getClasses and getComponentTheme to getComponentClasses + diff --git a/.changeset/friendly-pets-reflect.md b/.changeset/friendly-pets-reflect.md new file mode 100644 index 000000000..e86611b37 --- /dev/null +++ b/.changeset/friendly-pets-reflect.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +Add ThemeInit component to prevent flash of unstyled content when SSR is enabled diff --git a/.changeset/healthy-files-search.md b/.changeset/healthy-files-search.md new file mode 100644 index 000000000..dbd7294f6 --- /dev/null +++ b/.changeset/healthy-files-search.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +[MenuButton] Support hiding `menuIcon` and dispatch `change` event diff --git a/.changeset/light-pianos-refuse.md b/.changeset/light-pianos-refuse.md new file mode 100644 index 000000000..015e51aca --- /dev/null +++ b/.changeset/light-pianos-refuse.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +Rename `ThemeButton` to `ThemeSelect` diff --git a/.changeset/light-ways-dress.md b/.changeset/light-ways-dress.md new file mode 100644 index 000000000..1e024620a --- /dev/null +++ b/.changeset/light-ways-dress.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': minor +--- + +BREAKING: removed `dateDisplay()` in favor of `format()` diff --git a/.changeset/modern-pumpkins-march.md b/.changeset/modern-pumpkins-march.md new file mode 100644 index 000000000..3a65d7ac4 --- /dev/null +++ b/.changeset/modern-pumpkins-march.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +Add a store to manage the current theme diff --git a/.changeset/ninety-carpets-cross.md b/.changeset/ninety-carpets-cross.md new file mode 100644 index 000000000..04b6556c5 --- /dev/null +++ b/.changeset/ninety-carpets-cross.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': patch +--- + +add locale management of date leveraging intl diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 000000000..92652bace --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,31 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "create-svelte-ux": "0.2.1", + "svelte-ux": "0.57.1" + }, + "changesets": [ + "angry-zebras-remember", + "chilled-dingos-sell", + "cool-hotels-own", + "fair-trees-sparkle", + "for-you-sean", + "friendly-pets-reflect", + "light-pianos-refuse", + "light-ways-dress", + "modern-pumpkins-march", + "ninety-carpets-cross", + "quick-avocados-hope", + "quick-carrots-grab", + "rare-flowers-flash", + "selfish-hounds-dance", + "shiny-hornets-study", + "shy-peaches-ring", + "sixty-walls-rest", + "strong-flies-provide", + "wicked-melons-fold", + "yellow-nails-vanish", + "yellow-oranges-fly" + ] +} diff --git a/.changeset/quick-carrots-grab.md b/.changeset/quick-carrots-grab.md new file mode 100644 index 000000000..e59206ed5 --- /dev/null +++ b/.changeset/quick-carrots-grab.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": minor +--- + +Add theme selection/creation page and simplify loading themes diff --git a/.changeset/rare-flowers-flash.md b/.changeset/rare-flowers-flash.md new file mode 100644 index 000000000..ab7149d95 --- /dev/null +++ b/.changeset/rare-flowers-flash.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +Map Skeleton themes to Svelte UX themes diff --git a/.changeset/selfish-hounds-dance.md b/.changeset/selfish-hounds-dance.md new file mode 100644 index 000000000..467dc5b31 --- /dev/null +++ b/.changeset/selfish-hounds-dance.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +[SelectField] Fix toggling display of options menu using toggleIcon. Support hiding toggleIcon (` diff --git a/.changeset/sixty-walls-rest.md b/.changeset/sixty-walls-rest.md new file mode 100644 index 000000000..61b681ddb --- /dev/null +++ b/.changeset/sixty-walls-rest.md @@ -0,0 +1,6 @@ +--- +"svelte-ux": minor +--- + +- Add locale settings to settings object, and allow dynamically changing the current locale. +- Move format function to be a store on the settings object, which updates when the locale changes. diff --git a/.changeset/strong-flies-provide.md b/.changeset/strong-flies-provide.md new file mode 100644 index 000000000..92c7c9f5e --- /dev/null +++ b/.changeset/strong-flies-provide.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': minor +--- + +Support `ux.themes` tailwind config, including Daisy UI diff --git a/.changeset/tidy-gifts-yawn.md b/.changeset/tidy-gifts-yawn.md new file mode 100644 index 000000000..3443e24ff --- /dev/null +++ b/.changeset/tidy-gifts-yawn.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +[Popover|Menu|popover] Support `resize` width or height only diff --git a/.changeset/wicked-melons-fold.md b/.changeset/wicked-melons-fold.md new file mode 100644 index 000000000..6c38d2cc1 --- /dev/null +++ b/.changeset/wicked-melons-fold.md @@ -0,0 +1,5 @@ +--- +"svelte-ux": patch +--- + +Add `ThemeSwitch` component to toggle between light/dark theme diff --git a/.changeset/yellow-nails-vanish.md b/.changeset/yellow-nails-vanish.md new file mode 100644 index 000000000..863f8fdcb --- /dev/null +++ b/.changeset/yellow-nails-vanish.md @@ -0,0 +1,5 @@ +--- +'svelte-ux': minor +--- + +Rename `cssVars` action to `styleVars` and do not prefix properties with `--` by default (more flexible) diff --git a/.changeset/yellow-oranges-fly.md b/.changeset/yellow-oranges-fly.md new file mode 100644 index 000000000..e1e3126c2 --- /dev/null +++ b/.changeset/yellow-oranges-fly.md @@ -0,0 +1,6 @@ +--- +'create-svelte-ux': minor +'svelte-ux': minor +--- + +Theme support diff --git a/.gitignore b/.gitignore index d3f118eb4..5535d8867 100644 --- a/.gitignore +++ b/.gitignore @@ -6,5 +6,6 @@ coverage/ .idea/ .svelte-kit/ .env +.DS_Store test-* \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index ae7544dd0..5541e3775 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,14 @@ { "singleQuote": true, "printWidth": 100, - "trailingComma": "es5" + "trailingComma": "es5", + "plugins": ["prettier-plugin-svelte"], + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ] } diff --git a/README.md b/README.md index f9bd09131..2b9b81372 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ![](https://img.shields.io/github/license/techniq/svelte-ux?style=flat) [![](https://img.shields.io/github/actions/workflow/status/techniq/svelte-ux/ci.yml?style=flat)](https://github.com/techniq/svelte-ux/actions/workflows/ci.yml) [![](https://img.shields.io/npm/v/svelte-ux?style=flat)](https://www.npmjs.com/package/svelte-ux) -![npm](https://img.shields.io/npm/dw/svelte-ux?style=flat&color=orange) +[![](https://img.shields.io/npm/dw/svelte-ux?style=flat&color=orange)](https://www.npmjs.com/package/svelte-ux) [![](https://img.shields.io/badge/Open_in-SvelteLab-black?logo=svelte&color=%23FF3E00)](https://www.sveltelab.dev/?provider=github&owner=techniq&repo=svelte-ux&branch=main&path=%2Fpackages%2Fcreate-svelte-ux%2Ftemplates%2Fstarter) [![](https://img.shields.io/badge/Open_in-StackBlitz-black?logo=stackblitz&color=%231269D3)](https://stackblitz.com/github/techniq/svelte-ux/tree/main/packages/create-svelte-ux/templates/starter) [![](https://img.shields.io/badge/Open_in-CodeSandbox-black?logo=codesandbox&color=%23151515)](https://codesandbox.io/p/sandbox/github/techniq/svelte-ux/tree/main/packages/create-svelte-ux/templates/starter) diff --git a/packages/create-svelte-ux/CHANGELOG.md b/packages/create-svelte-ux/CHANGELOG.md index 1fac8d9b7..9405fda5f 100644 --- a/packages/create-svelte-ux/CHANGELOG.md +++ b/packages/create-svelte-ux/CHANGELOG.md @@ -1,5 +1,11 @@ # create-svelte-ux +## 0.3.0-next.0 + +### Minor Changes + +- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146)) + ## 0.2.1 ### Patch Changes diff --git a/packages/create-svelte-ux/package.json b/packages/create-svelte-ux/package.json index 03a0e2f54..8bcc0c693 100644 --- a/packages/create-svelte-ux/package.json +++ b/packages/create-svelte-ux/package.json @@ -1,6 +1,6 @@ { "name": "create-svelte-ux", - "version": "0.2.1", + "version": "0.3.0-next.0", "description": "A CLI for creating new Svelte UX projects", "repository": { "type": "git", @@ -18,12 +18,12 @@ }, "dependencies": { "@clack/prompts": "^0.7.0", - "@kitql/helpers": "^0.8.3", + "@kitql/helpers": "^0.8.8", "commander": "^11.1.0" }, "devDependencies": { - "@types/node": "^20.9.2", - "prettier": "^3.1.0" + "@types/node": "^20.10.6", + "prettier": "^3.1.1" }, "files": [ "fragments", diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte index 53c3f6f7e..f4a92066d 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/+layout.svelte @@ -5,8 +5,8 @@ import '../app.postcss'; settings({ - theme:{ - AppBar: 'bg-accent-500 text-white shadow-md', + classes: { + AppBar: 'bg-primary text-white shadow-md', AppLayout: { nav: 'bg-neutral-800' }, diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte index 0d2ccdd74..ca3f9c2b2 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/+page.svelte @@ -9,7 +9,7 @@ href="https://svelte-ux.techniq.dev" target="_blank" variant="fill-light" - color="accent" + color="primary" > Documentation @@ -17,7 +17,7 @@ href="https://svelte-ux.techniq.dev/customization" target="_blank" variant="fill-light" - color="accent" + color="primary" > Customization diff --git a/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte b/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte index 277eabe17..85d199a07 100644 --- a/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte +++ b/packages/create-svelte-ux/templates/layerchart/src/routes/chart/+page.svelte @@ -22,7 +22,7 @@ format(d, PeriodType.Day, 'short')} rule /> - + diff --git a/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs b/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs index 9ddbe378d..962e73513 100644 --- a/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/layerchart/tailwind.config.cjs @@ -9,11 +9,7 @@ const config = { './node_modules/layerchart/**/*.{svelte,js}' ], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs b/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs index 200063ec9..9702b2b4f 100644 --- a/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/minimal/tailwind.config.cjs @@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs'); const config = { content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte index d68d9c3d0..cdf1cd426 100644 --- a/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte +++ b/packages/create-svelte-ux/templates/starter/src/routes/+layout.svelte @@ -5,8 +5,8 @@ import '../app.postcss'; settings({ - theme:{ - AppBar: 'bg-accent-500 text-white shadow-md', + classes: { + AppBar: 'bg-primary text-white shadow-md', AppLayout: { nav: 'bg-neutral-800' }, diff --git a/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte b/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte index 0d2ccdd74..ca3f9c2b2 100644 --- a/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte +++ b/packages/create-svelte-ux/templates/starter/src/routes/+page.svelte @@ -9,7 +9,7 @@ href="https://svelte-ux.techniq.dev" target="_blank" variant="fill-light" - color="accent" + color="primary" > Documentation @@ -17,7 +17,7 @@ href="https://svelte-ux.techniq.dev/customization" target="_blank" variant="fill-light" - color="accent" + color="primary" > Customization diff --git a/packages/create-svelte-ux/templates/starter/tailwind.config.cjs b/packages/create-svelte-ux/templates/starter/tailwind.config.cjs index 200063ec9..9702b2b4f 100644 --- a/packages/create-svelte-ux/templates/starter/tailwind.config.cjs +++ b/packages/create-svelte-ux/templates/starter/tailwind.config.cjs @@ -5,11 +5,7 @@ const svelte_ux = require('svelte-ux/plugins/tailwind.cjs'); const config = { content: ['./src/**/*.{html,svelte}', './node_modules/svelte-ux/**/*.{svelte,js}'], theme: { - extend: { - colors: { - accent: colors.blue - } - } + extend: {} }, variants: { extend: {} diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md index b773152fc..4fb075753 100644 --- a/packages/svelte-ux/CHANGELOG.md +++ b/packages/svelte-ux/CHANGELOG.md @@ -1,5 +1,73 @@ # svelte-ux +## 0.58.0-next.9 + +### Minor Changes + +- Update Settings component to expose each settings key as a component prop ([#167](https://github.com/techniq/svelte-ux/pull/167)) + +- Add theme selection/creation page and simplify loading themes ([#192](https://github.com/techniq/svelte-ux/pull/192)) + +- - Add locale settings to settings object, and allow dynamically changing the current locale. ([#202](https://github.com/techniq/svelte-ux/pull/202)) + - Move format function to be a store on the settings object, which updates when the locale changes. + +- Rename `cssVars` action to `styleVars` and do not prefix properties with `--` by default (more flexible) ([#192](https://github.com/techniq/svelte-ux/pull/192)) + +### Patch Changes + +- [SelectField] Add `stepper` prop to iterate through options (like `MenuField`) ([#192](https://github.com/techniq/svelte-ux/pull/192)) + +- [MenuField] Expose `selected` option via prop (similar to `SelectField`) ([#192](https://github.com/techniq/svelte-ux/pull/192)) + +- Rename `ThemeButton` to `ThemeSelect` ([#167](https://github.com/techniq/svelte-ux/pull/167)) + +- Map Skeleton themes to Svelte UX themes ([#167](https://github.com/techniq/svelte-ux/pull/167)) + +- [SelectField] Fix toggling display of options menu using toggleIcon. Support hiding toggleIcon (` ([#192](https://github.com/techniq/svelte-ux/pull/192)) + +- Prevent cursor jumping around when backspacing near a decimal point in a number TextField ([#178](https://github.com/techniq/svelte-ux/pull/178)) + +- Update AppLayout nav to only show scrollbar when overflown (Windows, Mac with "Show scrollbars: always) ([#171](https://github.com/techniq/svelte-ux/pull/171)) + +- Add `ThemeSwitch` component to toggle between light/dark theme ([#167](https://github.com/techniq/svelte-ux/pull/167)) + +## 0.58.0-next.8 + +### Minor Changes + +- - Rename settings `theme` argument to `classes` ([#172](https://github.com/techniq/svelte-ux/pull/172)) + - Rename getTheme to getClasses and getComponentTheme to getComponentClasses + +- BREAKING: removed `dateDisplay()` in favor of `format()` ([#137](https://github.com/techniq/svelte-ux/pull/137)) + +### Patch Changes + +- Add ThemeInit component to prevent flash of unstyled content when SSR is enabled ([#176](https://github.com/techniq/svelte-ux/pull/176)) + +- Add a store to manage the current theme ([#174](https://github.com/techniq/svelte-ux/pull/174)) + +- add locale management of date leveraging intl ([#137](https://github.com/techniq/svelte-ux/pull/137)) + +## 0.58.0-next.2 + +### Patch Changes + +- Add styles (with daisy) as top-level export ([#146](https://github.com/techniq/svelte-ux/pull/146)) + +## 0.58.0-next.1 + +### Minor Changes + +- Support `ux.themes` tailwind config, including Daisy UI ([#146](https://github.com/techniq/svelte-ux/pull/146)) + +## 0.58.0-next.0 + +### Minor Changes + +- Removes SelectList. Updates SelectField features to support SelectList's use case via property/attribute overrides. Updates QuickSearch to use SelectField. Defines MenuOption type & updates MenuField & SelectField to use it; this results in renaming of SelectField options' `name` field to become `label`, standardizing the API across the two. Also adds `activeOptionIcon` to SelectField so users can opt-in to dynamically updating the field icon based on the selected option. Also fixed a bug with the `scrollIntoView` action related to its `onlyIfNeeded` flag. ([#127](https://github.com/techniq/svelte-ux/pull/127)) + +- Theme support ([#146](https://github.com/techniq/svelte-ux/pull/146)) + ## 0.57.1 ### Patch Changes diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json index 8f5121e8c..7d7c05730 100644 --- a/packages/svelte-ux/package.json +++ b/packages/svelte-ux/package.json @@ -4,7 +4,7 @@ "author": "Sean Lynch ", "license": "MIT", "repository": "techniq/svelte-ux", - "version": "0.57.2", + "version": "0.58.0-next.9", "scripts": { "dev": "vite dev", "build": "vite build", @@ -13,66 +13,68 @@ "prepublishOnly": "svelte-package", "check": "svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", - "test:unit": "vitest", + "test:unit": "TZ=UTC+4 vitest --coverage", "lint": "prettier --ignore-path ../../.gitignore --check .", "format": "prettier --ignore-path ../../.gitignore --write .", "typedoc": "typedoc", "prepare": "svelte-kit sync" }, "devDependencies": { + "@changesets/cli": "^2.27.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@skeletonlabs/tw-plugin": "^0.3.1", "@sveltejs/adapter-auto": "^2.1.1", - "@sveltejs/kit": "^1.27.6", - "@sveltejs/package": "^2.2.2", + "@sveltejs/kit": "^1.30.3", + "@sveltejs/package": "^2.2.5", "@tailwindcss/typography": "^0.5.10", + "@types/culori": "^2.0.4", "@types/d3-array": "^3.2.1", "@types/d3-scale": "^4.0.8", - "@types/lodash-es": "^4.17.11", + "@types/lodash-es": "^4.17.12", "@types/marked": "^6.0.0", "@types/prismjs": "^1.26.3", + "@vitest/coverage-v8": "^0.34.6", "autoprefixer": "^10.4.16", + "daisyui": "^4.5.0", "execa": "^8.0.1", "marked": "^10.0.0", "mdsvex": "^0.11.0", - "prettier": "^3.1.0", - "prettier-plugin-svelte": "^3.1.0", - "sveld": "^0.19.1", - "svelte": "^4.2.7", - "svelte-check": "^3.6.0", - "svelte-preprocess": "^5.1.0", - "svelte2tsx": "^0.6.25", - "tailwindcss": "^3.3.5", + "prettier": "^3.1.1", + "prettier-plugin-svelte": "^3.1.2", + "rehype-slug": "^6.0.0", + "svelte": "^4.2.8", + "svelte-check": "^3.6.2", + "svelte-preprocess": "^5.1.3", + "svelte2tsx": "^0.6.27", + "tailwindcss": "^3.4.0", "tslib": "^2.6.2", "typedoc-json-parser": "^9.0.1", - "typescript": "^5.2.2", + "typescript": "^5.3.3", "unist-util-visit": "^5.0.0", - "vite": "^4.5.0", + "vite": "^4.5.1", "vitest": "^0.33.0" }, "type": "module", "dependencies": { - "@changesets/cli": "^2.26.2", "@floating-ui/dom": "^1.5.3", - "@fortawesome/fontawesome-common-types": "^6.4.2", - "clsx": "^2.0.0", + "@fortawesome/fontawesome-common-types": "^6.5.1", + "@mdi/js": "^7.0.96", + "clsx": "^2.1.0", + "culori": "^3.3.0", "d3-array": "^3.2.4", "d3-scale": "^4.0.2", - "d3-time": "^3.1.0", - "date-fns": "^2.30.0", + "date-fns": "^3.0.6", "immer": "^10.0.3", "lodash-es": "^4.17.21", - "posthog-js": "^1.95.1", - "rehype-slug": "^6.0.0", - "tailwind-merge": "^2.0.0", - "zod": "^3.22.4" - }, - "peerDependencies": { - "@fortawesome/free-regular-svg-icons": "^6.2.1", - "@fortawesome/free-solid-svg-icons": "^6.2.1", - "@mdi/js": "^7.0.96", + "posthog-js": "^1.96.1", "prism-svelte": "^0.5.0", "prism-themes": "^1.9.0", "prismjs": "^1.29.0", - "sveld": "^0.19.0", + "sveld": "^0.19.1", + "tailwind-merge": "^2.2.0", + "zod": "^3.22.4" + }, + "peerDependencies": { "svelte": "^3.56.0 || ^4.0.0" }, "main": "./dist/index.js", @@ -85,7 +87,8 @@ "types": "./dist/utils/*.d.ts", "svelte": "./dist/utils/*.js" }, - "./plugins/*": "./dist/plugins/*" + "./plugins/*": "./dist/plugins/*", + "./styles/*": "./dist/styles/*" }, "files": [ "dist" diff --git a/packages/svelte-ux/src/docs/Blockquote.svelte b/packages/svelte-ux/src/docs/Blockquote.svelte index 5caf8d41f..1131a3bcb 100644 --- a/packages/svelte-ux/src/docs/Blockquote.svelte +++ b/packages/svelte-ux/src/docs/Blockquote.svelte @@ -1,11 +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/Link.svelte b/packages/svelte-ux/src/docs/Link.svelte index 276343a05..eec570e72 100644 --- a/packages/svelte-ux/src/docs/Link.svelte +++ b/packages/svelte-ux/src/docs/Link.svelte @@ -1,3 +1,3 @@ - + diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte index 28b6b47bd..7a2f2948d 100644 --- a/packages/svelte-ux/src/docs/ViewSourceButton.svelte +++ b/packages/svelte-ux/src/docs/ViewSourceButton.svelte @@ -14,7 +14,7 @@ {#if source} - +
{label}
-
{href}
+
{href}
{#if href} - {/if} @@ -38,13 +38,13 @@
- +
{:else if href} - diff --git a/packages/svelte-ux/src/lib/actions/dataBackground.ts b/packages/svelte-ux/src/lib/actions/dataBackground.ts index fad06ca3a..23b5e8012 100644 --- a/packages/svelte-ux/src/lib/actions/dataBackground.ts +++ b/packages/svelte-ux/src/lib/actions/dataBackground.ts @@ -95,8 +95,8 @@ export const dataBackground: Action = (node, linear-gradient( to right, transparent var(--baseline), - #999 var(--baseline), - #999 calc(var(--baseline) + 1px), + currentColor var(--baseline), + currentColor calc(var(--baseline) + 1px), transparent 0%, transparent 100% ), diff --git a/packages/svelte-ux/src/lib/actions/index.ts b/packages/svelte-ux/src/lib/actions/index.ts index f698df4b2..ff4bb0486 100644 --- a/packages/svelte-ux/src/lib/actions/index.ts +++ b/packages/svelte-ux/src/lib/actions/index.ts @@ -1,4 +1,3 @@ -export * from './cssVars'; export * from './dataBackground'; export * from './input'; export * from './layout'; @@ -9,4 +8,5 @@ export * from './portal'; export * from './scroll'; export * from './spotlight'; export * from './sticky'; +export * from './styleProps'; export * from './table'; diff --git a/packages/svelte-ux/src/lib/actions/popover.ts b/packages/svelte-ux/src/lib/actions/popover.ts index a731111e9..4cd84d324 100644 --- a/packages/svelte-ux/src/lib/actions/popover.ts +++ b/packages/svelte-ux/src/lib/actions/popover.ts @@ -14,14 +14,14 @@ import { import { portal } from './portal'; -type PopoverOptions = { +export type PopoverOptions = { anchorEl?: HTMLElement; placement?: Placement; offset?: number; padding?: number; autoPlacement?: boolean; matchWidth?: boolean; - resize?: boolean; + resize?: boolean | 'width' | 'height'; }; export const popover: Action = (node, options) => { @@ -53,8 +53,12 @@ export const popover: Action = (node, options) => { padding: options?.padding, apply({ availableWidth, availableHeight, elements }) { Object.assign(elements.floating.style, { - maxWidth: `${availableWidth}px`, - maxHeight: `${availableHeight}px`, + ...((options?.resize === true || options?.resize === 'width') && { + maxWidth: `${availableWidth}px`, + }), + ...((options?.resize === true || options?.resize === 'height') && { + maxHeight: `${availableHeight}px`, + }), }); }, }), diff --git a/packages/svelte-ux/src/lib/actions/cssVars.ts b/packages/svelte-ux/src/lib/actions/styleProps.ts similarity index 70% rename from packages/svelte-ux/src/lib/actions/cssVars.ts rename to packages/svelte-ux/src/lib/actions/styleProps.ts index f2f698b87..539ea95cc 100644 --- a/packages/svelte-ux/src/lib/actions/cssVars.ts +++ b/packages/svelte-ux/src/lib/actions/styleProps.ts @@ -2,12 +2,12 @@ import type { Action } from 'svelte/action'; type CSSProps = { [key: string]: string | number | boolean | null | undefined }; -export const cssVars: Action = (node, props) => { +export const styleProps: Action = (node, props) => { Object.entries(props ?? {}).forEach(([key, value]) => { // Ignore if null or undefined if (value != null) { value = typeof value === 'boolean' ? (value ? 1 : 0) : value; - node.style.setProperty(`--${key}`, `${value}`); + node.style.setProperty(key, `${value}`); } }); @@ -17,13 +17,13 @@ export const cssVars: Action = (node, props) => { update(newProps: CSSProps) { const newKeys = Object.keys(newProps); Object.keys(lastProps) - .filter((name) => !newKeys.includes(name)) - .forEach((name) => node.style.removeProperty(`--${name}`)); + .filter((key) => !newKeys.includes(key)) + .forEach((key) => node.style.removeProperty(key)); Object.entries(newProps).forEach(([key, value]) => { // Ignore if null or undefined if (value != null) { - node.style.setProperty(`--${key}`, `${value}`); + node.style.setProperty(key, `${value}`); } if (props) { delete props[key]; diff --git a/packages/svelte-ux/src/lib/components/ApiDocs.svelte b/packages/svelte-ux/src/lib/components/ApiDocs.svelte index 938f55f9c..ab69bcfe6 100644 --- a/packages/svelte-ux/src/lib/components/ApiDocs.svelte +++ b/packages/svelte-ux/src/lib/components/ApiDocs.svelte @@ -25,17 +25,19 @@
-

Props

-
+

+ Props +

+
{#each api.props as prop}
{prop.name}
-
+
{#if prop.description} {prop.description} @@ -46,7 +48,7 @@
{#if prop.isRequired}
Required
@@ -54,7 +56,7 @@
{prop.value}
@@ -62,7 +64,7 @@
{prop.type ?? 'unknown'}
@@ -75,7 +77,7 @@
{#if api.rest_props} -
+
Remaining props are passed to underlying @@ -84,7 +86,7 @@ href="/docs/components/{api.rest_props.name}#props" target="_blank" variant="none" - class="text-xs font-semibold bg-white border border-black/30 px-2 rounded-full" + class="text-xs font-semibold bg-surface-100 border px-2 rounded-full" > <{api.rest_props.name}> @@ -95,7 +97,7 @@ .name}#attributes" target="_blank" variant="none" - class="text-xs font-semibold bg-white border border-black/30 px-2 rounded-full" + class="text-xs font-semibold bg-surface-100 border px-2 rounded-full" > <{api.rest_props.name}> @@ -107,8 +109,10 @@
-

Slots

-
+

+ Slots +

+
{#each api.slots as slot} -
+
{slot.description ?? ''}
@@ -132,7 +136,7 @@ {#each parseSlotProps(slot.slot_props) as { key, value }}
{key}: {value}
@@ -148,8 +152,10 @@
-

Events

-
+

+ Events +

+
{#each api.events as event} {#if event.element != null}
{event.element}
{/if}
{event.type}
@@ -180,19 +186,22 @@
-

+

Module Exports

-
+
{#each api.moduleExports as prop}
{prop.name}
-
+
{#if prop.description} {prop.description} @@ -203,7 +212,7 @@
{#if prop.isRequired}
Required
@@ -211,7 +220,7 @@
{prop.value}
@@ -219,7 +228,7 @@
{prop.type ?? 'unknown'}
diff --git a/packages/svelte-ux/src/lib/components/AppBar.svelte b/packages/svelte-ux/src/lib/components/AppBar.svelte index 9995b9afc..c3b6f7f6d 100644 --- a/packages/svelte-ux/src/lib/components/AppBar.svelte +++ b/packages/svelte-ux/src/lib/components/AppBar.svelte @@ -6,7 +6,7 @@ import Button from './Button.svelte'; import { browser } from '../utils/env'; import { cls } from '../utils/styles'; - import { getComponentTheme } from './theme'; + import { getComponentClasses } from './theme'; export let title: string | number | Array = ''; @@ -15,7 +15,7 @@ */ export let head = true; - const theme = getComponentTheme('AppBar'); + const settingsClasses = getComponentClasses('AppBar'); $: titleString = Array.isArray(title) ? title.filter((x) => x).join(' › ') : title.toString(); @@ -26,13 +26,18 @@
diff --git a/packages/svelte-ux/src/lib/components/MonthList.svelte b/packages/svelte-ux/src/lib/components/MonthList.svelte index cf71749b9..1ba6fbd9c 100644 --- a/packages/svelte-ux/src/lib/components/MonthList.svelte +++ b/packages/svelte-ux/src/lib/components/MonthList.svelte @@ -14,15 +14,15 @@ return disabledMonths instanceof Function ? disabledMonths(date) : disabledMonths instanceof Date - ? isSameMonth(date, disabledMonths) - : disabledMonths instanceof Array - ? disabledMonths.some((d) => isSameMonth(date, d)) - : disabledMonths instanceof Object - ? isWithinInterval(date, { - start: startOfMonth(disabledMonths.from), - end: endOfMonth(disabledMonths.to || disabledMonths.from), - }) - : false; + ? isSameMonth(date, disabledMonths) + : disabledMonths instanceof Array + ? disabledMonths.some((d) => isSameMonth(date, d)) + : disabledMonths instanceof Object + ? isWithinInterval(date, { + start: startOfMonth(disabledMonths.from), + end: endOfMonth(disabledMonths.to || disabledMonths.from), + }) + : false; }; diff --git a/packages/svelte-ux/src/lib/components/MultiSelect.svelte b/packages/svelte-ux/src/lib/components/MultiSelect.svelte index c550bc92e..72bd55d22 100644 --- a/packages/svelte-ux/src/lib/components/MultiSelect.svelte +++ b/packages/svelte-ux/src/lib/components/MultiSelect.svelte @@ -1,5 +1,5 @@ {#if inlineSearch} -
+
{/if} -
+
{#each visibleItems as option (get(option, valueProp))} @@ -148,7 +148,7 @@ {#if filteredSelectedOptions.length && filteredUnselectedOptions.length} -
+
{/if} @@ -180,13 +180,13 @@
{:else} {#if !filteredSelectedOptions.length} -
There are no matching items.
+
There are no matching items.
{/if} {/each}
-
+
@@ -208,7 +208,7 @@
diff --git a/packages/svelte-ux/src/lib/components/NumberStepper.svelte b/packages/svelte-ux/src/lib/components/NumberStepper.svelte index 99368e2b9..09d896556 100644 --- a/packages/svelte-ux/src/lib/components/NumberStepper.svelte +++ b/packages/svelte-ux/src/lib/components/NumberStepper.svelte @@ -4,14 +4,14 @@ import { Button, TextField } from '.'; import { selectOnFocus } from '$lib/actions/input'; - import { getComponentTheme } from './theme'; + import { getComponentClasses } from './theme'; import { cls } from '$lib/utils/styles'; export let value: number = 0; export let min: number | undefined = undefined; export let max: number | undefined = undefined; - const theme = getComponentTheme('NumberStepper'); + const settingsClasses = getComponentClasses('NumberStepper'); const dispatch = createEventDispatcher(); @@ -22,7 +22,7 @@ type="integer" bind:value align="center" - class={cls('NumberStepper w-24', theme.root, $$props.class)} + class={cls('NumberStepper w-24', settingsClasses.root, $$props.class)} actions={(node) => [selectOnFocus(node)]} {...$$restProps} > diff --git a/packages/svelte-ux/src/lib/components/Overflow.svelte b/packages/svelte-ux/src/lib/components/Overflow.svelte index 5c97c15c9..1ad6d16c4 100644 --- a/packages/svelte-ux/src/lib/components/Overflow.svelte +++ b/packages/svelte-ux/src/lib/components/Overflow.svelte @@ -1,9 +1,9 @@ @@ -19,9 +19,9 @@
; @@ -39,12 +39,19 @@ pagination?: string; perPage?: string; } = {}; - const theme = getComponentTheme('Pagination'); + const { format: formatValue } = getSettings(); + const settingsClasses = getComponentClasses('Pagination'); {#if $pagination.totalPages > 1 || !hideSinglePage}
{#each show as component} {#if component === 'actions'} @@ -58,7 +65,7 @@ on:click={pagination.firstPage} disabled={$pagination.isFirst} aria-label="First Page" - class={cls('p-2', theme.buttons, classes.buttons)} + class={cls('p-2', settingsClasses.buttons, classes.buttons)} /> {/if} @@ -70,7 +77,7 @@ on:click={pagination.prevPage} disabled={$pagination.isFirst} aria-label="Previous Page" - class={cls('p-2', theme.buttons, classes.buttons)} + class={cls('p-2', settingsClasses.buttons, classes.buttons)} /> {/if} @@ -82,7 +89,7 @@ on:click={pagination.nextPage} disabled={$pagination.isLast} aria-label="Next Page" - class={cls('p-2', theme.buttons, classes.buttons)} + class={cls('p-2', settingsClasses.buttons, classes.buttons)} /> {/if} @@ -94,13 +101,13 @@ on:click={pagination.lastPage} disabled={$pagination.isLast} aria-label="Last Page" - class={cls('p-2', theme.buttons, classes.buttons)} + class={cls('p-2', settingsClasses.buttons, classes.buttons)} /> {/if} {#if component === 'perPage'} -
+
Per page: @@ -122,7 +129,7 @@ selected={$pagination.perPage === option} on:click={() => pagination.setPerPage(option)} > - {formatValue(option, 'integer')} + {$formatValue(option, 'integer')} {/each} @@ -133,7 +140,7 @@ {#if component === 'pagination'} -
+
{format($pagination)}
diff --git a/packages/svelte-ux/src/lib/components/Popover.svelte b/packages/svelte-ux/src/lib/components/Popover.svelte index 1fee07388..8016ecaf1 100644 --- a/packages/svelte-ux/src/lib/components/Popover.svelte +++ b/packages/svelte-ux/src/lib/components/Popover.svelte @@ -2,9 +2,9 @@ import { createEventDispatcher } from 'svelte'; import type { Placement } from '@floating-ui/dom'; - import { popover } from '../actions/popover'; + import { popover, type PopoverOptions } from '../actions/popover'; import { cls } from '../utils/styles'; - import { getComponentTheme } from './theme'; + import { getComponentClasses } from './theme'; export let open = false; export let placement: Placement | undefined = undefined; @@ -37,10 +37,10 @@ /** * Set max-height of popover element to the remaining height from anchor element to bottom of viewport */ - export let resize = false; + export let resize: PopoverOptions['resize'] = false; const dispatch = createEventDispatcher(); - const theme = getComponentTheme('Popover'); + const settingsClasses = getComponentClasses('Popover'); function close(reason: string = 'unknown') { if (open) { @@ -61,7 +61,7 @@ {#if open}
{ diff --git a/packages/svelte-ux/src/lib/components/Preview.svelte b/packages/svelte-ux/src/lib/components/Preview.svelte index 1fe4f4581..3202a466a 100644 --- a/packages/svelte-ux/src/lib/components/Preview.svelte +++ b/packages/svelte-ux/src/lib/components/Preview.svelte @@ -6,8 +6,8 @@ import { slide } from 'svelte/transition'; import Button from './Button.svelte'; + import Code from './Code.svelte'; import { cls } from '$lib/utils/styles'; - import CopyButton from './CopyButton.svelte'; export let code: string | null = null; export let language = 'svelte'; @@ -15,33 +15,24 @@ export let showCode = false; -
+
{#if code && showCode} -
- 
-          {@html highlightedCode}
-
- -
- -
+
+
{/if}
{#if code} - {/if} diff --git a/packages/svelte-ux/src/lib/components/Progress.svelte b/packages/svelte-ux/src/lib/components/Progress.svelte index 471a24200..ee8c00630 100644 --- a/packages/svelte-ux/src/lib/components/Progress.svelte +++ b/packages/svelte-ux/src/lib/components/Progress.svelte @@ -1,11 +1,11 @@ diff --git a/packages/svelte-ux/src/lib/components/ProgressCircle.svelte b/packages/svelte-ux/src/lib/components/ProgressCircle.svelte index f8d5c510d..f23bb69de 100644 --- a/packages/svelte-ux/src/lib/components/ProgressCircle.svelte +++ b/packages/svelte-ux/src/lib/components/ProgressCircle.svelte @@ -1,6 +1,6 @@ -
+
@@ -53,9 +65,9 @@ path={mdiCheckboxBlankCircle} class={cls( 'pointer-events-none transition-transform', - disabled ? 'text-gray-500' : 'text-accent-500', + disabled ? 'text-surface-content/30 border-surface-content/30' : 'text-primary', checked ? 'scale-100' : 'scale-0', - theme.icon, + settingsClasses.icon, classes.icon )} size={{ @@ -78,7 +90,7 @@ md: 'text-md', // 16px lg: 'text-lg', // 18px }[size], - theme.label, + settingsClasses.label, classes.label )} > diff --git a/packages/svelte-ux/src/lib/components/RangeField.svelte b/packages/svelte-ux/src/lib/components/RangeField.svelte index 822b63d6a..a0e05f092 100644 --- a/packages/svelte-ux/src/lib/components/RangeField.svelte +++ b/packages/svelte-ux/src/lib/components/RangeField.svelte @@ -22,7 +22,7 @@ - + {value} diff --git a/packages/svelte-ux/src/lib/components/RangeSlider.svelte b/packages/svelte-ux/src/lib/components/RangeSlider.svelte index 90bfb758e..b0f608d86 100644 --- a/packages/svelte-ux/src/lib/components/RangeSlider.svelte +++ b/packages/svelte-ux/src/lib/components/RangeSlider.svelte @@ -34,7 +34,7 @@ import { decimalCount, round } from '$lib/utils/number'; import Icon from './Icon.svelte'; import { cls } from '../utils/styles'; - import { getComponentTheme } from './theme'; + import { getComponentClasses } from './theme'; export let min = 0; export let max = 100; @@ -42,7 +42,7 @@ export let value = [min, max]; export let disabled = false; - const theme = getComponentTheme('RangeSlider'); + const settingsClasses = getComponentClasses('RangeSlider'); $: stepPercent = step / (max - min); $: stepDecimals = decimalCount(step); @@ -224,9 +224,9 @@
- +
@@ -298,18 +298,18 @@ class={cls( 'thumb', 'absolute top-1/2 w-4 h-4 -translate-x-1/2 -translate-y-1/2', - 'border border-black/30 bg-white rounded-full outline-4', - 'outline-accent-500/20', - 'hover:outline hover:outline-accent-500/20', + 'border bg-white rounded-full outline-4', + 'outline-primary/20', + 'hover:outline hover:outline-primary/20', (lastMoved === 'end' || lastMoved === 'range') && - 'group-focus:outline group-focus:outline-accent-500/40' + 'group-focus:outline group-focus:outline-primary/40' )} /> {#if showStartValue} {value[0]} @@ -319,7 +319,7 @@ {#if showEndValue} {value[1]} diff --git a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte index f02191f3a..be2db2577 100644 --- a/packages/svelte-ux/src/lib/components/ScrollingValue.svelte +++ b/packages/svelte-ux/src/lib/components/ScrollingValue.svelte @@ -3,7 +3,7 @@ import { elasticOut, backInOut, bounceOut } from 'svelte/easing'; import { cls } from '$lib/utils/styles'; import { modulo } from '$lib/utils/number'; - import { getComponentTheme } from './theme'; + import { getComponentClasses } from './theme'; export let value = 0; export let single = false; @@ -14,7 +14,7 @@ root?: string; value?: string; } = {}; - const theme = getComponentTheme('ScrollingValue'); + const settingsClasses = getComponentClasses('ScrollingValue'); const displayValue = spring(); // const displayValue = tweened(value, { duration: 1000, easing: bounceOut }); @@ -29,13 +29,13 @@ class={cls( 'ScrollingValue', 'inline-grid overflow-hidden', - theme.root, + settingsClasses.root, classes.root, $$props.class )} >
import { cls } from '../utils/styles'; - import { getComponentTheme } from './theme'; + import { getComponentClasses } from './theme'; - const theme = getComponentTheme('SectionDivider'); + const settingsClasses = getComponentClasses('SectionDivider');
-
-
+
+
-
+
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte index a7aa8c232..4c0e21fc9 100644 --- a/packages/svelte-ux/src/lib/components/SelectField.svelte +++ b/packages/svelte-ux/src/lib/components/SelectField.svelte @@ -2,7 +2,7 @@ import { createEventDispatcher, type ComponentProps, type ComponentEvents } from 'svelte'; import type { Placement } from '@floating-ui/dom'; - import { mdiChevronDown, mdiClose } from '@mdi/js'; + import { mdiChevronDown, mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js'; import Logger from '../utils/logger'; import { autoFocus, selectOnFocus } from '$lib/actions'; @@ -14,7 +14,7 @@ import MenuItem from './MenuItem.svelte'; import SelectListOptions from './_SelectListOptions.svelte'; import TextField from './TextField.svelte'; - import { getComponentTheme } from './theme'; + import { getComponentClasses } from './theme'; import type { IconInput } from '$lib/utils/icons'; import type { MenuOption } from '$lib/types/options'; import type { ScrollIntoViewOptions } from '$lib/actions'; @@ -36,7 +36,8 @@ export let disabled: boolean = false; export let readonly: boolean = false; export let icon: IconInput = undefined; - export let toggleIcon: IconInput = mdiChevronDown; + export let inlineOptions = false; + export let toggleIcon: IconInput = !inlineOptions ? mdiChevronDown : null; export let closeIcon: IconInput = mdiClose; export let activeOptionIcon: boolean = false; export let clearable = true; @@ -47,9 +48,15 @@ export let tabindex = 0; export let autofocus: ComponentProps['autofocus'] = undefined; export let fieldActions: ComponentProps['actions'] = autofocus - ? (node) => [autoFocus(node, typeof autofocus === 'object' ? autofocus : undefined), selectOnFocus(node)] + ? (node) => [ + autoFocus(node, typeof autofocus === 'object' ? autofocus : undefined), + selectOnFocus(node), + ] : undefined; + /** If true, show left/right buttons to step through options */ + export let stepper = false; + let originalIcon = icon; export let scrollIntoView: Partial = {}; @@ -63,10 +70,10 @@ group?: string; empty?: string; } = {}; - const theme = getComponentTheme('SelectField'); + const settingsClasses = getComponentClasses('SelectField'); let fieldClasses: ComponentProps['classes']; - $: fieldClasses = typeof(classes.field) === "string" ? { root: classes.field } : classes.field; + $: fieldClasses = typeof classes.field === 'string' ? { root: classes.field } : classes.field; // Menu props export let placement: Placement = 'bottom-start'; @@ -75,7 +82,6 @@ export let resize = true; export let disableTransition = false; export let menuProps: ComponentProps | undefined = undefined; - export let inlineOptions = false; $: filteredOptions = options ?? []; let searchText = ''; @@ -154,6 +160,7 @@ // Elements let inputEl: HTMLInputElement | null = null; let menuOptionsEl: HTMLDivElement; + let selectFieldEl: HTMLButtonElement; // UI state export let open = false; @@ -207,7 +214,7 @@ show(); } - function onBlur(e: FocusEvent|CustomEvent) { + function onBlur(e: FocusEvent | CustomEvent) { const fe = e as FocusEvent; logger.debug('onBlur', { target: e.target, relatedTarget: fe?.relatedTarget, menuOptionsEl }); @@ -216,7 +223,9 @@ fe.relatedTarget instanceof HTMLElement && !menuOptionsEl?.contains(fe.relatedTarget) && // TODO: Oddly Safari does not set `relatedTarget` to the clicked on menu option (like Chrome and Firefox) but instead appears to take `tabindex` into consideration. Currently resolves to `.options` after setting `tabindex="-1" fe.relatedTarget !== menuOptionsEl?.offsetParent && // click on scroll bar - !fe.relatedTarget.closest('menu > [slot=actions]') // click on action item + !fe.relatedTarget.closest('menu > [slot=actions]') && // click on action item + !selectFieldEl?.contains(fe.relatedTarget) && // click within (ex. toggleIcon) + fe.relatedTarget !== selectFieldEl // click on SelectField itself ) { hide('blur'); } else { @@ -355,6 +364,28 @@ return option; } + $: previous = () => { + const index = options.findIndex((o) => o.value === value); + if (index === 0 || index === -1) { + // If first item, or no selected value yet, return last item + return options[options.length - 1].value; + } else { + // Previous item + return options[index - 1].value; + } + }; + + $: next = () => { + const index = options.findIndex((x) => x.value === value); + if (index === options.length - 1) { + // First value + return options[0].value; + } else { + // Next value + return options[index + 1].value; + } + }; + function clear() { logger.info('clear'); selectOption(null); @@ -364,10 +395,16 @@ {:else} - - - - - - - &]:bg-black/5', - option === selected && (classes.selected || 'font-semibold'), - option.group ? 'px-4' : 'px-2', - theme.option, - classes.option - )} - scrollIntoView={{ condition: index === highlightIndex, onlyIfNeeded: inlineOptions, ...scrollIntoView }} - role="option" - aria-selected={option === selected ? "true" : "false"} - aria-disabled={option?.disabled ? "true" : "false"} - > - {optionText(option)} - - - - - -
- {loading ? 'Loading...' : 'No options found'} -
+ + + + + + &]:bg-surface-content/5', + option === selected && (classes.selected || 'font-semibold'), + option.group ? 'px-4' : 'px-2', + settingsClasses.option, + classes.option + )} + scrollIntoView={{ + condition: index === highlightIndex, + onlyIfNeeded: inlineOptions, + ...scrollIntoView, + }} + role="option" + aria-selected={option === selected ? 'true' : 'false'} + aria-disabled={option?.disabled ? 'true' : 'false'} + > + {optionText(option)} + - + + + +
+ {loading ? 'Loading...' : 'No options found'} +
+ + {/if} {/if} diff --git a/packages/svelte-ux/src/lib/components/Settings.svelte b/packages/svelte-ux/src/lib/components/Settings.svelte index bae5e3e24..c83be65bf 100644 --- a/packages/svelte-ux/src/lib/components/Settings.svelte +++ b/packages/svelte-ux/src/lib/components/Settings.svelte @@ -1,9 +1,16 @@ +{#if themeInit} + +{/if} diff --git a/packages/svelte-ux/src/lib/components/Shine.svelte b/packages/svelte-ux/src/lib/components/Shine.svelte index 08c532b61..1102adf44 100644 --- a/packages/svelte-ux/src/lib/components/Shine.svelte +++ b/packages/svelte-ux/src/lib/components/Shine.svelte @@ -1,7 +1,7 @@ -
    +
      {#each items as item, index}
    1. @@ -25,7 +20,7 @@ {#if index < items.length - 1}
      {/if} diff --git a/packages/svelte-ux/src/lib/components/Switch.svelte b/packages/svelte-ux/src/lib/components/Switch.svelte index 3db503246..c631facd3 100644 --- a/packages/svelte-ux/src/lib/components/Switch.svelte +++ b/packages/svelte-ux/src/lib/components/Switch.svelte @@ -1,8 +1,8 @@ -
      +
      @@ -45,31 +45,28 @@ }, checked && { - accent: 'bg-accent-500 border-accent-500', - red: 'bg-red-500 border-red-500', - orange: 'bg-orange-500 border-orange-500', - amber: 'bg-amber-500 border-amber-500', - yellow: 'bg-yellow-500 border-yellow-500', - lime: 'bg-lime-500 border-lime-500', - green: 'bg-green-500 border-green-500', - emerald: 'bg-emerald-500 border-emerald-500', - teal: 'bg-teal-500 border-teal-500', - cyan: 'bg-cyan-500 border-cyan-500', - sky: 'bg-sky-500 border-sky-500', - blue: 'bg-blue-500 border-blue-500', - indigo: 'bg-indigo-500 border-indigo-500', - violet: 'bg-violet-500 border-violet-500', - purple: 'bg-purple-500 border-purple-500', - fuchsia: 'bg-fuchsia-500 border-fuchsia-500', - pink: 'bg-pink-500 border-pink-500', - rose: 'bg-rose-500 border-rose-500', + primary: 'bg-primary border-primary', + secondary: 'bg-secondary border-secondary', + accent: 'bg-accent border-accent', + neutral: 'bg-neutral border-neutral', + info: 'bg-info border-info', + success: 'bg-success border-success', + warning: 'bg-warning border-warning', + danger: 'bg-danger border-danger', }[color], - checked === false && 'bg-gray-300 border-gray-300', - checked === null && 'border-gray-300', - disabled - ? 'opacity-50' - : 'cursor-pointer peer-focus-visible:ring-2 ring-accent-400 ring-offset-1', - theme.switch, + { + primary: 'ring-primary/60', + secondary: 'ring-secondary/60', + accent: 'ring-accent/60', + neutral: 'ring-neutral/60', + info: 'ring-info/60', + success: 'ring-success/60', + warning: 'ring-warning/60', + danger: 'ring-danger/60', + }[color], + checked === false && 'bg-surface-content/20', + disabled ? 'opacity-50' : 'cursor-pointer peer-focus-visible:ring-2 ring-offset-1', + settingsClasses.switch, classes.switch, $$props.class )} @@ -77,10 +74,10 @@
      diff --git a/packages/svelte-ux/src/lib/components/Tab.svelte b/packages/svelte-ux/src/lib/components/Tab.svelte index 5bb8ecf48..7ff3accf4 100644 --- a/packages/svelte-ux/src/lib/components/Tab.svelte +++ b/packages/svelte-ux/src/lib/components/Tab.svelte @@ -1,7 +1,7 @@