diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 7d47e4bfe..000000000 --- a/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -dist -public -.cache -.eslintrc.js -/packages/svelteui-prism/static diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 3909bf13d..000000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./configuration/eslint-preset-svelteui'); diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml index 6961433cb..b5d3afddd 100644 --- a/.github/workflows/deploy-docs.yml +++ b/.github/workflows/deploy-docs.yml @@ -12,7 +12,7 @@ jobs: - name: Install Node.js uses: actions/setup-node@v3 with: - node-version: 18 + node-version: 20 cache: npm - name: Install dependencies diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index dc5b6ff82..964dba3b1 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -9,7 +9,7 @@ jobs: name: Actions strategy: matrix: - node-version: [18] + node-version: [20] runs-on: ubuntu-latest container: image: node:${{ matrix.node-version }} diff --git a/apps/docs/package.json b/apps/docs/package.json index 5223be3f3..be28f3cfb 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -14,13 +14,14 @@ "radix-icons-svelte": "1.2.1" }, "devDependencies": { - "@sveltejs/adapter-static": "2.0.2", - "@sveltejs/kit": "1.16.3", - "mdsvex": "0.10.6", - "svelte": "3.59.1", - "svelte-check": "3.3.2", + "@sveltejs/adapter-static": "^3.0.0", + "@sveltejs/kit": "^2.5.27", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "mdsvex": "0.12.3", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", "tslib": "2.5.0", - "typescript": "5.0.4", - "vite": "4.3.5" + "typescript": "^5.5.0", + "vite": "^5.4.4" } } diff --git a/apps/docs/src/app.html b/apps/docs/src/app.html index effe0d0d2..77ec85d79 100644 --- a/apps/docs/src/app.html +++ b/apps/docs/src/app.html @@ -1,4 +1,4 @@ - + diff --git a/apps/docs/src/lib/components/Banner.svelte b/apps/docs/src/lib/components/Banner.svelte index 68849da43..b52d139aa 100644 --- a/apps/docs/src/lib/components/Banner.svelte +++ b/apps/docs/src/lib/components/Banner.svelte @@ -1,70 +1,95 @@ {#if href} + {@const IconHref = icon}
- + {@render children?.()} - +
{:else} + {@const Icon = icon}
- + {@render children?.()} - +
{/if} diff --git a/apps/docs/src/lib/components/BottomNav.svelte b/apps/docs/src/lib/components/BottomNav.svelte index a33d17a40..aa7963992 100644 --- a/apps/docs/src/lib/components/BottomNav.svelte +++ b/apps/docs/src/lib/components/BottomNav.svelte @@ -1,4 +1,6 @@ diff --git a/apps/docs/src/lib/components/CodeBlock.svelte b/apps/docs/src/lib/components/CodeBlock.svelte index d46a16370..54a3efaa7 100644 --- a/apps/docs/src/lib/components/CodeBlock.svelte +++ b/apps/docs/src/lib/components/CodeBlock.svelte @@ -2,10 +2,15 @@ import { Box, Button } from '@svelteuidev/core'; import { clipboard } from '@svelteuidev/composables'; - export let message = ''; - export let copy = false; + interface Props { + message?: string; + copy?: boolean; + children?: import('svelte').Snippet; + } + + let { message = '', copy = false, children }: Props = $props(); - let copied = false; + let copied = $state(false); function isCopied() { copied = true; @@ -16,7 +21,13 @@ - Code + + {#if children} + {@render children()} + {:else} + Code + {/if} + {#if copy} + - +

Popper component

- + Menu component Application - Settings - Messages - - + Settings + Messages + + {#snippet rightSection()} ⌘K - + {/snippet} Search Danger zone - Delete my account + Delete my account
diff --git a/apps/docs/src/lib/components/homepage/Features.svelte b/apps/docs/src/lib/components/homepage/Features.svelte index 0a7ac04e0..413814749 100644 --- a/apps/docs/src/lib/components/homepage/Features.svelte +++ b/apps/docs/src/lib/components/homepage/Features.svelte @@ -1,7 +1,6 @@
@@ -17,7 +16,8 @@
- + {@const SvelteComponent = icon} + {title}
diff --git a/apps/docs/src/lib/components/homepage/HomePageExample.svelte b/apps/docs/src/lib/components/homepage/HomePageExample.svelte index 92ad56a76..c10bee39e 100644 --- a/apps/docs/src/lib/components/homepage/HomePageExample.svelte +++ b/apps/docs/src/lib/components/homepage/HomePageExample.svelte @@ -11,9 +11,7 @@ Checkbox, Box, Card, - ActionIcon, - Text, - NativeSelect + Text } from '@svelteuidev/core'; import { Animation } from '@svelteuidev/motion'; import CardDemo from './_Card.svelte'; @@ -21,11 +19,21 @@ import { slide } from 'svelte/transition'; import { sineInOut } from 'svelte/easing'; import { Prism } from '@svelteuidev/prism'; - export let title = 'Examples', + interface Props { + title?: string; + author?: string; + code?: any; + language?: string; + center?: boolean; + } + + let { + title = 'Examples', author = 'brisklemonade', code = `
@@ -180,7 +188,7 @@ - + Hover Me @@ -190,7 +198,7 @@ {:else} -
+
{/if} diff --git a/apps/docs/src/lib/components/homepage/Waves/Waves.styles.ts b/apps/docs/src/lib/components/homepage/Waves/Waves.styles.ts index 28c3d8e89..939ef1e28 100644 --- a/apps/docs/src/lib/components/homepage/Waves/Waves.styles.ts +++ b/apps/docs/src/lib/components/homepage/Waves/Waves.styles.ts @@ -1,8 +1,13 @@ import { createStyles } from '@svelteuidev/core'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -export default createStyles((theme, { width, height, flip, alt }) => ({ +type WavesStyleParams = { + width: number; + height: number; + flip: boolean; + alt: boolean; +}; + +export default createStyles((theme, { width, height, flip, alt }: WavesStyleParams) => ({ root: { [`${theme.dark} &`]: { bc: theme.fn.themeColor('dark', alt ? 8 : 7) diff --git a/apps/docs/src/lib/components/homepage/Waves/Waves.svelte b/apps/docs/src/lib/components/homepage/Waves/Waves.svelte index 4c4abbca3..d691c09f7 100644 --- a/apps/docs/src/lib/components/homepage/Waves/Waves.svelte +++ b/apps/docs/src/lib/components/homepage/Waves/Waves.svelte @@ -1,15 +1,17 @@ -
diff --git a/apps/docs/src/lib/components/homepage/_Card.svelte b/apps/docs/src/lib/components/homepage/_Card.svelte index 9db484d02..d2d6c644e 100644 --- a/apps/docs/src/lib/components/homepage/_Card.svelte +++ b/apps/docs/src/lib/components/homepage/_Card.svelte @@ -3,7 +3,7 @@ import { useViewportSize } from '@svelteuidev/composables'; const viewport = useViewportSize(); - $: ({ width, height } = $viewport); + let { width } = $derived($viewport); const { themeColor } = fns; const secondaryColor = $colorScheme === 'dark' ? themeColor('dark', 1) : themeColor('dark', 7); @@ -25,9 +25,9 @@ >Portugal Porto Adventures {:else} - Portugal Porto Adventures + + Portugal Porto Adventures + On Sale {/if} diff --git a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/Guides.svelte b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/Guides.svelte index 26819d5ba..165e4f1e0 100644 --- a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/Guides.svelte +++ b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/Guides.svelte @@ -1,16 +1,22 @@ - - - + + {@const SvelteComponent = icon || null} +

{title}

 diff --git a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/StartGuide.svelte b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/StartGuide.svelte index bb7cf125f..f60e4a8f1 100644 --- a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/StartGuide.svelte +++ b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/StartGuide.svelte @@ -1,13 +1,15 @@ - @@ -19,7 +21,15 @@ ]} > {#each STARTGUIDE_DATA as { title, id, icon } (id)} - (selected = id)} {title} {icon} active={selected === id} /> + { + selected = id; + setId(selected); + }} + {title} + {icon} + active={selected === id} + /> {/each} diff --git a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/ElderJs.svelte b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/ElderJs.svelte index d2db25929..0f1d94496 100644 --- a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/ElderJs.svelte +++ b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/ElderJs.svelte @@ -1,6 +1,10 @@ - export let outerColor = '#FF3E00'; - export let innerColor = 'white'; - export let width = 67; - export let height = 80; + interface Props { + outerColor?: string; + innerColor?: string; + width?: number; + height?: number; + } + + let { outerColor = '#FF3E00', innerColor = 'white', width = 67, height = 80 }: Props = $props(); diff --git a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/SvelteKit.svelte b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/SvelteKit.svelte index 4c918899b..77d746d07 100644 --- a/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/SvelteKit.svelte +++ b/apps/docs/src/lib/components/mainpages/GettingStarted/Guides/icons/SvelteKit.svelte @@ -1,8 +1,12 @@ diff --git a/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Card.svelte b/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Card.svelte index 2bcfce9e7..87ed9af81 100644 --- a/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Card.svelte +++ b/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Card.svelte @@ -1,15 +1,26 @@ -
{title} diff --git a/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Installation.svelte b/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Installation.svelte index 0760afc47..58a92cb04 100644 --- a/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Installation.svelte +++ b/apps/docs/src/lib/components/mainpages/GettingStarted/Installation/Installation.svelte @@ -1,32 +1,34 @@ - diff --git a/apps/docs/src/lib/components/mainpages/MainLink.svelte b/apps/docs/src/lib/components/mainpages/MainLink.svelte index f5ba070a0..a2d54207a 100644 --- a/apps/docs/src/lib/components/mainpages/MainLink.svelte +++ b/apps/docs/src/lib/components/mainpages/MainLink.svelte @@ -1,11 +1,18 @@ {#if open} diff --git a/apps/docs/src/lib/components/svgs/ChevronDown.svelte b/apps/docs/src/lib/components/svgs/ChevronDown.svelte index d3f8e2fc4..d97285601 100644 --- a/apps/docs/src/lib/components/svgs/ChevronDown.svelte +++ b/apps/docs/src/lib/components/svgs/ChevronDown.svelte @@ -1,7 +1,11 @@ - export let size = 25; - export let color = 'currentColor'; + - export let size = 110; + - export let size = 25; - export let color = 'currentColor'; + + import type { Snippet } from 'svelte'; + + interface Props { + result?: Snippet; + code?: Snippet; + } + + let { result, code }: Props = $props(); + +
- + {@render result?.()}
- + {@render code?.()}
diff --git a/apps/docs/src/lib/theme/components/Properties.svelte b/apps/docs/src/lib/theme/components/Properties.svelte index e46ad9256..df34d9d8b 100644 --- a/apps/docs/src/lib/theme/components/Properties.svelte +++ b/apps/docs/src/lib/theme/components/Properties.svelte @@ -1,21 +1,26 @@ - {#each data as prop} - - - - - - {/each} + + {#each data as prop} + + + + + + {/each} +
-
{prop.name}
-
{prop.attr.default ? prop.attr.default : ''}
- 		-
{@html getTypes(prop.attr.types)}
- 		-
{@html prop.description ? prop.description : ''}
-
+
{prop.name}
+
{prop.attr.default ? prop.attr.default : ''}
+ 		+
{@html getTypes(prop.attr.types)}
+ 		+
{@html prop.description ? prop.description : ''}
+
diff --git a/apps/docs/src/lib/theme/styles/layout.css b/apps/docs/src/lib/theme/styles/layout.css index 9cb6dcd62..790efe6c6 100644 --- a/apps/docs/src/lib/theme/styles/layout.css +++ b/apps/docs/src/lib/theme/styles/layout.css @@ -24,7 +24,8 @@ body { .main.nosidebar { margin-left: 0; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 600px), + background: + linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 600px), fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0), fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0); } @@ -34,11 +35,8 @@ body { } .dark-theme .main.nosidebar { - background: linear-gradient( - to bottom, - rgba(255, 255, 255, 0) 0%, - var(--svelteui-colors-dark600) 600px - ), + background: + linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--svelteui-colors-dark600) 600px), fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0), fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0); } @@ -251,9 +249,23 @@ body { .article th { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; - font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, - sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol, Noto Color Emoji; + font-family: + Inter, + system-ui, + -apple-system, + Segoe UI, + Roboto, + Ubuntu, + Cantarell, + Noto Sans, + sans-serif, + BlinkMacSystemFont, + Helvetica Neue, + Arial, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; -webkit-font-smoothing: antialiased; line-height: 1.625; border: 0 solid #d2d6dc; @@ -271,9 +283,23 @@ body { .article td { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; - font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, - sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol, Noto Color Emoji; + font-family: + Inter, + system-ui, + -apple-system, + Segoe UI, + Roboto, + Ubuntu, + Cantarell, + Noto Sans, + sans-serif, + BlinkMacSystemFont, + Helvetica Neue, + Arial, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; -webkit-font-smoothing: antialiased; line-height: 1.625; --text-opacity: 1; @@ -485,7 +511,8 @@ body { } .main.nosidebar { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 600px), + background: + linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 600px), fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0), fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0); } diff --git a/apps/docs/src/lib/theme/ui/Banner/Banner.svelte b/apps/docs/src/lib/theme/ui/Banner/Banner.svelte index 5f733c300..e3f3a74f3 100644 --- a/apps/docs/src/lib/theme/ui/Banner/Banner.svelte +++ b/apps/docs/src/lib/theme/ui/Banner/Banner.svelte @@ -1,7 +1,9 @@
diff --git a/apps/docs/src/lib/theme/ui/Sibling/Sibling.styles.js b/apps/docs/src/lib/theme/ui/Sibling/Sibling.styles.ts similarity index 94% rename from apps/docs/src/lib/theme/ui/Sibling/Sibling.styles.js rename to apps/docs/src/lib/theme/ui/Sibling/Sibling.styles.ts index 6956a0a31..5d8d82f99 100644 --- a/apps/docs/src/lib/theme/ui/Sibling/Sibling.styles.js +++ b/apps/docs/src/lib/theme/ui/Sibling/Sibling.styles.ts @@ -1,6 +1,6 @@ import { createStyles } from '@svelteuidev/core'; -export default createStyles((theme, _params, getRef) => { +export default createStyles((theme, _params: { type: string }, getRef) => { return { root: { darkMode: { diff --git a/apps/docs/src/lib/theme/ui/Sibling/Sibling.svelte b/apps/docs/src/lib/theme/ui/Sibling/Sibling.svelte index f1d38e159..b33b1cd30 100644 --- a/apps/docs/src/lib/theme/ui/Sibling/Sibling.svelte +++ b/apps/docs/src/lib/theme/ui/Sibling/Sibling.svelte @@ -1,21 +1,29 @@ - + import { onMount } from 'svelte'; + import type { Snippet } from 'svelte'; import { fly } from 'svelte/transition'; - import { colorScheme, Burger, SvelteUIProvider } from '@svelteuidev/core'; + + import { colorScheme, Burger, SvelteUIProvider, type ColorScheme } from '@svelteuidev/core'; import { page } from '$app/stores'; import { Device, Logo, PageTransition, TopBar, Sidebar } from '$lib/components'; import '$lib/theme/style.css'; import type { PageData } from './$types'; - import { onMount } from 'svelte'; - let show_sidebar: boolean = false; + let show_sidebar: boolean = $state(false); - $: nosidebar = $page.url.pathname === '/'; + let nosidebar = $derived($page.url.pathname === '/'); onMount(() => { - const colorSchemeValue = localStorage.getItem('colorScheme'); + const colorSchemeValue = localStorage.getItem('colorScheme') as ColorScheme; if (colorSchemeValue) $colorScheme = colorSchemeValue; }); - export let data: PageData; + interface Props { + data: PageData; + children?: Snippet; + } + + let { data, children }: Props = $props();
- + {@render children?.()}
@@ -31,7 +38,7 @@ {#if !nosidebar}
@@ -45,7 +52,10 @@ color="blue" opened={show_sidebar} class="show_sidebar" - on:click!stopPropagation={() => (show_sidebar = !show_sidebar)} + onclick={(e) => { + e.stopPropagation(); + show_sidebar = !show_sidebar; + }} />
{/if} diff --git a/apps/docs/src/routes/+layout.ts b/apps/docs/src/routes/+layout.ts index 6628343e7..c8cdba71c 100644 --- a/apps/docs/src/routes/+layout.ts +++ b/apps/docs/src/routes/+layout.ts @@ -1,4 +1,4 @@ -import type { PageLoad } from './$types'; +import type { LayoutLoad } from './$types'; export const prerender = true; @@ -6,8 +6,8 @@ export const prerender = true; // when building for production. export const ssr = false; -export const load = (async ({ url: { pathname } }) => { +export const load: LayoutLoad = async ({ url: { pathname } }) => { return { pathname }; -}) satisfies PageLoad; +}; diff --git a/apps/docs/src/routes/+page.svelte b/apps/docs/src/routes/+page.svelte index 49827e284..2d5b1f4bf 100644 --- a/apps/docs/src/routes/+page.svelte +++ b/apps/docs/src/routes/+page.svelte @@ -55,7 +55,9 @@ index: true size="xl" color={$colorScheme === 'dark' ? 'gray' : 'dark'} > - + {#snippet leftIcon()} + + {/snippet} Source Code diff --git a/apps/docs/src/routes/changelog/v0-10-0/+page.md b/apps/docs/src/routes/changelog/v0-10-0/+page.md index e43c21087..3e7932294 100644 --- a/apps/docs/src/routes/changelog/v0-10-0/+page.md +++ b/apps/docs/src/routes/changelog/v0-10-0/+page.md @@ -24,11 +24,11 @@ date: 'February 16th, 2023' ## [Breadcrumbs]({base}/core/breadcrumbs) Component: - + ## [Radio]({base}/core/radio) Component: - + ## Bug fixes and improvements diff --git a/apps/docs/src/routes/changelog/v0-14-0/+page.md b/apps/docs/src/routes/changelog/v0-14-0/+page.md index 9674aaaa5..4d4c98bfe 100644 --- a/apps/docs/src/routes/changelog/v0-14-0/+page.md +++ b/apps/docs/src/routes/changelog/v0-14-0/+page.md @@ -27,11 +27,11 @@ date: 'July 2th, 2023' ## [AspectRatio]({base}/core/aspect-ratio) - + ## [Collapse]({base}/core/collapse) - + ## [Flex]({base}/core/flex) diff --git a/apps/docs/src/routes/changelog/v0-15-0/+page.md b/apps/docs/src/routes/changelog/v0-15-0/+page.md index 093c813d5..518b8418a 100644 --- a/apps/docs/src/routes/changelog/v0-15-0/+page.md +++ b/apps/docs/src/routes/changelog/v0-15-0/+page.md @@ -27,7 +27,7 @@ date: 'August 20th, 2023' ## [Blockquote]({base}/core/blockquote) - + ## [PasswordInput]({base}/core/password-input) @@ -35,7 +35,7 @@ date: 'August 20th, 2023' ## [Mark]({base}/core/mark) - + - Contributing and Code of conduct now available in Korean - Add slots for icons in all components that have them diff --git a/apps/docs/src/routes/changelog/v0-7-0/+page.md b/apps/docs/src/routes/changelog/v0-7-0/+page.md index 67af073a0..c4b19558d 100644 --- a/apps/docs/src/routes/changelog/v0-7-0/+page.md +++ b/apps/docs/src/routes/changelog/v0-7-0/+page.md @@ -43,7 +43,7 @@ date: 'May 13th, 2022' ### _New SvelteUI Dates Package:_ - + ### _New SvelteUI Preprocessors Package:_ @@ -61,7 +61,7 @@ date: 'May 13th, 2022' ## [MediaQuery]({base}/core/media-query) Component: - + ## [Progress]({base}/core/progress) Component: @@ -87,34 +87,34 @@ date: 'May 13th, 2022' ## [Alert]({base}/core/alert) Component: - + Something terrible happened! You made a mistake and there is no going back, your data was lost forever! ## [Notification]({base}/core/notification) Component: - + ## [Tabs]({base}/core/tabs) Component: - + ## [Modal]({base}/core/modal) Component: - + ## [Grid]({base}/core/grid) Component: - + ## [Timeline]({base}/core/timeline) Component: - + ## [Menu]({base}/core/menu) Component: - + ### _Composables:_ @@ -122,31 +122,31 @@ date: 'May 13th, 2022' Run expensive functions without blocking the UI through a web worker - + ## [use-throttle]({base}/composables/use-throttle) Function that let's you throttle the execution of a function - + ## [use-debounce]({base}/composables/use-debounce) Function that let's you debounce the execution of a function - + ## [use-element-size]({base}/composables/use-element-size) Get element width and height and subscribe to changes - + ## [use-id]({base}/composables/use-id) Generate a random id - + ## Bug fixes and improvements diff --git a/apps/docs/src/routes/contributing/+page.md b/apps/docs/src/routes/contributing/+page.md index 470f1522c..c9f698edc 100644 --- a/apps/docs/src/routes/contributing/+page.md +++ b/apps/docs/src/routes/contributing/+page.md @@ -69,7 +69,7 @@ Examples: **To start developing** - + It is very important to make sure you start from the root of the monorepo before following these steps diff --git a/apps/docs/src/routes/core/accordion/+page.md b/apps/docs/src/routes/core/accordion/+page.md index 4c9413ccf..dfc4874d5 100644 --- a/apps/docs/src/routes/core/accordion/+page.md +++ b/apps/docs/src/routes/core/accordion/+page.md @@ -39,7 +39,7 @@ Control can be fully customizable by setting any king of element inside the `con ## Controlled -The accordion component can be controlled externally with the prop `value` (which can be binded) and with the `on:change` event. +The accordion component can be controlled externally with the prop `value` (which can be binded) and with the `onchange` event. diff --git a/apps/docs/src/routes/core/chip/+page.md b/apps/docs/src/routes/core/chip/+page.md index a5e0e7962..9206803e6 100644 --- a/apps/docs/src/routes/core/chip/+page.md +++ b/apps/docs/src/routes/core/chip/+page.md @@ -32,15 +32,13 @@ docs: 'core/chip' - { - checked = !checked; - }}>I'm a chip +I'm a chip + + + checked = !checked}>I'm a chip ``` ## States diff --git a/apps/docs/src/routes/core/group/+page.md b/apps/docs/src/routes/core/group/+page.md index 5e846adee..2752c33d5 100644 --- a/apps/docs/src/routes/core/group/+page.md +++ b/apps/docs/src/routes/core/group/+page.md @@ -30,7 +30,7 @@ docs: 'core/group' ## Group children - + Group will work only with elements and components that render elements. Strings, numbers, fragments and other parts will not have correct styles. diff --git a/apps/docs/src/routes/core/input-wrapper/+page.md b/apps/docs/src/routes/core/input-wrapper/+page.md index bcee14650..6cb95d744 100644 --- a/apps/docs/src/routes/core/input-wrapper/+page.md +++ b/apps/docs/src/routes/core/input-wrapper/+page.md @@ -12,7 +12,7 @@ docs: 'core/input-wrapper' diff --git a/apps/docs/src/routes/core/media-query/+page.md b/apps/docs/src/routes/core/media-query/+page.md index 4433df20b..948c9b281 100644 --- a/apps/docs/src/routes/core/media-query/+page.md +++ b/apps/docs/src/routes/core/media-query/+page.md @@ -38,7 +38,7 @@ MediaQuery component adds styles to child element if the given media query match ## MediaQuery children - + MediaQuery only works with a single child element or component that renders an element. Strings, numbers, fragments and other parts will not have correct styles. diff --git a/apps/docs/src/routes/core/menu/+page.md b/apps/docs/src/routes/core/menu/+page.md index d541a06a0..1cab7b0dc 100644 --- a/apps/docs/src/routes/core/menu/+page.md +++ b/apps/docs/src/routes/core/menu/+page.md @@ -33,13 +33,13 @@ docs: 'core/menu' - + ``` diff --git a/apps/docs/src/routes/core/modal/+page.md b/apps/docs/src/routes/core/modal/+page.md index 7144dfd51..240612f01 100644 --- a/apps/docs/src/routes/core/modal/+page.md +++ b/apps/docs/src/routes/core/modal/+page.md @@ -27,7 +27,7 @@ docs: 'core/modal' ## Usage - + When using the Modal component it's important that you wrap your app in the SvelteUIProvider. If for some reason you don't want to do that, you must change the target prop to something else. Such as {"target={'body'}"}. diff --git a/apps/docs/src/routes/core/number-input/+page.md b/apps/docs/src/routes/core/number-input/+page.md index d19aee50e..94dc206e2 100644 --- a/apps/docs/src/routes/core/number-input/+page.md +++ b/apps/docs/src/routes/core/number-input/+page.md @@ -33,12 +33,12 @@ docs: 'core/number-input' import { NumberInput } from '@svelteuidev/core'; let value; - function onChange(e) { - value = e.detail; + function onChange(value: number) { + value = value; } - + ``` ## Clamp on blur diff --git a/apps/docs/src/routes/core/password-input/+page.md b/apps/docs/src/routes/core/password-input/+page.md index 6024cb58f..a6a5d0848 100644 --- a/apps/docs/src/routes/core/password-input/+page.md +++ b/apps/docs/src/routes/core/password-input/+page.md @@ -56,6 +56,8 @@ docs: 'core/password-input' ## Controlled visibility state +Instead of using `bind`, you can also use `onVisibilityChange(visible: boolean)` prop. + ## Visibility toggle focus diff --git a/apps/docs/src/routes/core/portal/+page.md b/apps/docs/src/routes/core/portal/+page.md index 940ee579a..1c097c4f8 100644 --- a/apps/docs/src/routes/core/portal/+page.md +++ b/apps/docs/src/routes/core/portal/+page.md @@ -31,7 +31,7 @@ Use Portal to render a component or element at a different place (defaults to th
@@ -41,7 +41,7 @@ Use Portal to render a component or element at a different place (defaults to th {/if} - +
``` diff --git a/apps/docs/src/routes/core/radio/+page.md b/apps/docs/src/routes/core/radio/+page.md index 7c580300e..dc51c2c94 100644 --- a/apps/docs/src/routes/core/radio/+page.md +++ b/apps/docs/src/routes/core/radio/+page.md @@ -58,8 +58,8 @@ The `RadioGroup` supports two props to bind the current active value: `value` an { label: 'Solid', value: 'solid' } ]; - let value = 'svelte'; - let group = 'svelte'; + let value = $state('svelte'); + let group = $state('svelte'); diff --git a/apps/docs/src/routes/core/text-input/+page.md b/apps/docs/src/routes/core/text-input/+page.md index 48ba87bc3..d00217b22 100644 --- a/apps/docs/src/routes/core/text-input/+page.md +++ b/apps/docs/src/routes/core/text-input/+page.md @@ -32,7 +32,7 @@ docs: 'core/text-input' diff --git a/apps/docs/src/routes/dates/getting-started/+page.md b/apps/docs/src/routes/dates/getting-started/+page.md index b35b20172..908244aa2 100644 --- a/apps/docs/src/routes/dates/getting-started/+page.md +++ b/apps/docs/src/routes/dates/getting-started/+page.md @@ -22,7 +22,7 @@ source: 'svelteui-dates' - + Docs styling and Date component styles are conflicting due to a bug. The normal styles will look better diff --git a/apps/docs/src/routes/preprocessors/getting-started/+page.md b/apps/docs/src/routes/preprocessors/getting-started/+page.md index 3bf3e673b..94492530b 100644 --- a/apps/docs/src/routes/preprocessors/getting-started/+page.md +++ b/apps/docs/src/routes/preprocessors/getting-started/+page.md @@ -20,7 +20,7 @@ source: 'svelteui-preprocessors' - + If you have any suggestions for preprocessors, start a discussion or hop onto Discord! diff --git a/apps/docs/src/routes/theming/create-styles/+page.md b/apps/docs/src/routes/theming/create-styles/+page.md index b920c3c02..78a5c1a82 100644 --- a/apps/docs/src/routes/theming/create-styles/+page.md +++ b/apps/docs/src/routes/theming/create-styles/+page.md @@ -65,7 +65,7 @@ You can receive any amount of parameters as second argument of `createStyles` fu To merge class names use the `cx` function, it has the same API as classnames package. - + Do not use external libraries like `classnames` or `clsx` with class names created with `createStyles` function as it will produce style collisions. diff --git a/apps/docs/svelte.config.js b/apps/docs/svelte.config.js index 05399a19e..13d4514cd 100644 --- a/apps/docs/svelte.config.js +++ b/apps/docs/svelte.config.js @@ -1,5 +1,5 @@ import adapter from '@sveltejs/adapter-static'; -import { vitePreprocess } from '@sveltejs/kit/vite'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import path from 'path'; import { fileURLToPath } from 'url'; import { mdsvex } from 'mdsvex'; diff --git a/configuration/eslint-preset-svelteui/index.js b/configuration/eslint-preset-svelteui/index.js index 68cebf7a8..edb39b49c 100644 --- a/configuration/eslint-preset-svelteui/index.js +++ b/configuration/eslint-preset-svelteui/index.js @@ -1,38 +1,65 @@ -module.exports = { - root: true, - parser: '@typescript-eslint/parser', - extends: [ - 'plugin:svelte/recommended', - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'prettier' - ], - plugins: ['@typescript-eslint'], - overrides: [ - { - files: ['*.svelte'], - parser: 'svelte-eslint-parser', - parserOptions: { - parser: '@typescript-eslint/parser' +import prettier from 'eslint-config-prettier'; +import js from '@eslint/js'; +import { includeIgnoreFile } from '@eslint/compat'; +import svelte from 'eslint-plugin-svelte'; +import globals from 'globals'; +import { fileURLToPath } from 'node:url'; +import ts from 'typescript-eslint'; +const gitignorePath = fileURLToPath(new URL('../../.gitignore', import.meta.url)); + +export default ts.config( + includeIgnoreFile(gitignorePath), + js.configs.recommended, + ...ts.configs.recommended, + ...svelte.configs['flat/recommended'], + prettier, + ...svelte.configs['flat/prettier'], + { + languageOptions: { + ecmaVersion: 2022, + sourceType: 'module', + globals: { + ...globals.browser, + ...globals.node } + }, + ignores: [ + '**/.DS_Store', + '**/node_modules', + '**/build', + '**/.svelte-kit', + '**/package', + '**/.env', + '**/.env.*', + '!**/.env.example', + 'pnpm-lock.yaml', + 'package-lock.json', + 'yarn.lock' + ], + rules: { + 'no-useless-escape': 'off', + 'no-extra-boolean-cast': 'off', + 'no-inner-declarations': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' } + ], + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-empty-interface': 'off' } - ], - parserOptions: { - sourceType: 'module', - ecmaVersion: 2020 - }, - env: { - browser: true, - es2017: true, - node: true }, - rules: { - 'no-useless-escape': 'off', - 'no-extra-boolean-cast': 'off', - 'no-inner-declarations': 'off', - '@typescript-eslint/no-inferrable-types': 'off', - '@typescript-eslint/no-explicit-any': 'off', - '@typescript-eslint/no-empty-function': 'off', - '@typescript-eslint/no-empty-interface': 'off' + { + files: ['**/*.svelte'], + + languageOptions: { + parserOptions: { + parser: ts.parser, + svelteFeatures: { + experimentalGenerics: true + } + } + } } -}; +); diff --git a/configuration/eslint-preset-svelteui/package.json b/configuration/eslint-preset-svelteui/package.json index b5f1ceb01..a6c28b5c6 100644 --- a/configuration/eslint-preset-svelteui/package.json +++ b/configuration/eslint-preset-svelteui/package.json @@ -2,12 +2,15 @@ "name": "eslint-preset-svelteui", "private": true, "version": "1.0.0", + "type": "module", "main": "index.js", "license": "MIT", "dependencies": { - "@typescript-eslint/eslint-plugin": "5.59.5", - "@typescript-eslint/parser": "5.59.5", - "eslint-config-prettier": "8.8.0", - "eslint-plugin-svelte": "2.28.0" + "@eslint/compat": "^1.2.3", + "eslint": "^9.7.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-svelte": "^2.36.0", + "globals": "^15.0.0", + "typescript-eslint": "^8.0.0" } } diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 000000000..c76fa3a11 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,3 @@ +import svelteuiConfig from './configuration/eslint-preset-svelteui/index.js'; + +export default svelteuiConfig; diff --git a/package.json b/package.json index c2250d266..52e5ced28 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "*.{js,ts,svelte}": "eslint --fix" }, "devDependencies": { + "@eslint/compat": "^1.2.3", "@rollup/plugin-replace": "5.0.2", "@storybook/addon-actions": "7.0.11", "@storybook/addon-essentials": "7.0.11", @@ -69,15 +70,15 @@ "@storybook/addon-svelte-csf": "3.0.2", "@storybook/svelte-vite": "7.0.11", "@storybook/sveltekit": "7.0.11", - "@sveltejs/vite-plugin-svelte": "2.2.0", + "@sveltejs/vite-plugin-svelte": "5.0.3", "c8": "7.13.0", "cz-customizable": "6.3.0", "gh-pages": "5.0.0", "husky": "7.0.4", "lint-staged": "13.2.2", "patch-package": "6.5.1", - "prettier": "2.8.8", - "prettier-plugin-svelte": "2.10.0", + "prettier": "3.4.2", + "prettier-plugin-svelte": "3.3.2", "radix-icons-svelte": "1.2.1", "react": "18.2.0", "react-dom": "18.2.0", @@ -86,6 +87,6 @@ "storybook-dark-mode": "3.0.0", "syncpack": "8.2.4", "turbo": "latest", - "vitest": "0.31.0" + "vitest": "2.1.8" } } diff --git a/packages/svelteui-composables/.eslintignore b/packages/svelteui-composables/.eslintignore deleted file mode 100644 index 1d4b507d2..000000000 --- a/packages/svelteui-composables/.eslintignore +++ /dev/null @@ -1,14 +0,0 @@ -.DS_Store -node_modules -/build -/.svelte-kit -/package -/dist -.env -.env.* -!.env.example - -# Ignore files for PNPM, NPM and YARN -pnpm-lock.yaml -package-lock.json -yarn.lock diff --git a/packages/svelteui-composables/.eslintrc.cjs b/packages/svelteui-composables/.eslintrc.cjs deleted file mode 100644 index 117b37543..000000000 --- a/packages/svelteui-composables/.eslintrc.cjs +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - extends: ['../../configuration/eslint-preset-svelteui'], - rules: {} -}; diff --git a/packages/svelteui-composables/eslint.config.js b/packages/svelteui-composables/eslint.config.js new file mode 100644 index 000000000..0009a81f5 --- /dev/null +++ b/packages/svelteui-composables/eslint.config.js @@ -0,0 +1,3 @@ +import svelteuiConfig from '../../configuration/eslint-preset-svelteui/index.js'; + +export default svelteuiConfig; diff --git a/packages/svelteui-composables/package.json b/packages/svelteui-composables/package.json index e0d40f57b..9934c0eb1 100644 --- a/packages/svelteui-composables/package.json +++ b/packages/svelteui-composables/package.json @@ -69,27 +69,27 @@ }, "devDependencies": { "@babel/core": "7.21.8", - "@sveltejs/adapter-auto": "2.0.1", - "@sveltejs/kit": "1.16.3", - "@sveltejs/package": "2.0.2", - "@typescript-eslint/eslint-plugin": "5.59.5", - "@typescript-eslint/parser": "5.59.5", + "@sveltejs/adapter-auto": "^3.0.0", + "@sveltejs/kit": "^2.5.27", + "@sveltejs/package": "^2.3.7", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "@testing-library/svelte": "5.2.6", "babel-loader": "9.1.2", - "eslint": "8.40.0", - "eslint-config-prettier": "8.8.0", + "eslint": "9.17.0", + "eslint-config-prettier": "^9.1.0", "eslint-plugin-storybook": "0.6.12", - "eslint-plugin-svelte": "2.28.0", - "prettier": "2.8.8", - "prettier-plugin-svelte": "2.10.0", - "svelte": "3.59.1", - "svelte-check": "3.3.2", - "svelte-loader": "3.1.7", - "svelte-preprocess": "5.0.3", + "eslint-plugin-svelte": "^2.46.1", + "prettier": "^3.1.0", + "prettier-plugin-svelte": "^3.2.6", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", + "svelte-loader": "^3.2.3", + "svelte-preprocess": "^6.0.0", "tslib": "2.5.0", - "typescript": "5.0.4", - "vite": "4.3.5" + "typescript": "^5.5.0", + "vite": "^5.4.4" }, "peerDependencies": { - "svelte": ">=3.55.0" + "svelte": ">=5.0.0" } } diff --git a/packages/svelteui-composables/src/actions/use-click-outside/use-click-outside.stories.svelte b/packages/svelteui-composables/src/actions/use-click-outside/use-click-outside.stories.svelte index 30541c0e0..dcd853ad8 100644 --- a/packages/svelteui-composables/src/actions/use-click-outside/use-click-outside.stories.svelte +++ b/packages/svelteui-composables/src/actions/use-click-outside/use-click-outside.stories.svelte @@ -3,18 +3,20 @@ import { Button, Paper } from '@svelteuidev/core'; import { clickoutside } from './index'; - let open = true; + let open = $state(true); -