Merge branch 'main' of https://github.com/techniq/svelte-ux

techniq · Jul 14, 2024 · 1997b5f · 1997b5f
2 parents 4ae2aab + c345d08
commit 1997b5f
Show file tree

Hide file tree

Showing 25 changed files with 188 additions and 211 deletions.
diff --git a/.changeset/mean-maps-provide.md b/.changeset/mean-maps-provide.md
diff --git a/packages/create-svelte-ux/CHANGELOG.md b/packages/create-svelte-ux/CHANGELOG.md
@@ -1,5 +1,11 @@
 # create-svelte-ux
 
+## 0.6.3
+
+### Patch Changes
+
+- Update dependencies ([`9be6afada9e247c0ad5f758a7907798bceeb29a1`](https://github.com/techniq/svelte-ux/commit/9be6afada9e247c0ad5f758a7907798bceeb29a1))
+
 ## 0.6.2
 
 ### Patch Changes

diff --git a/packages/create-svelte-ux/package.json b/packages/create-svelte-ux/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-svelte-ux",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "A CLI for creating new Svelte UX projects",
   "repository": {
     "type": "git",

diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte-ux
 
+## 0.73.0
+
+### Minor Changes
+
+- Improve Svelte 5 compatibility, especially with docs (enabling `svelte-check` to pass) ([#399](https://github.com/techniq/svelte-ux/pull/399))
+
+### Patch Changes
+
+- Update dependencies ([`9be6afada9e247c0ad5f758a7907798bceeb29a1`](https://github.com/techniq/svelte-ux/commit/9be6afada9e247c0ad5f758a7907798bceeb29a1))
+
 ## 0.72.4
 
 ### Patch Changes

diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
@@ -4,7 +4,7 @@
   "author": "Sean Lynch <[email protected]>",
   "license": "MIT",
   "repository": "techniq/svelte-ux",
-  "version": "0.72.4",
+  "version": "0.73.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

diff --git a/packages/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte
@@ -15,11 +15,11 @@
 </script>
 
 {#if source}
-  <Toggle let:on={open} let:toggle>
+  <Toggle let:on={open} let:toggle let:toggleOff>
     <Button {icon} on:click={toggle} variant="fill-light" color="primary" size="sm">{label}</Button>
     <Dialog
       {open}
-      on:close={toggle}
+      on:close={toggleOff}
       class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
     >
       <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">

diff --git a/packages/svelte-ux/src/lib/components/Badge.svelte b/packages/svelte-ux/src/lib/components/Badge.svelte
@@ -2,7 +2,7 @@
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './theme.js';
 
-  export let value: number = $$slots.value ? 1 : 0;
+  export let value = $$slots.value ? 1 : 0;
   export let small = false;
   export let circle = false;
   export let dot = false;

diff --git a/packages/svelte-ux/src/lib/components/BarStack.svelte b/packages/svelte-ux/src/lib/components/BarStack.svelte
@@ -5,10 +5,6 @@
   import { cls } from '../utils/styles.js';
   import { getComponentClasses } from './index.js';
 
-  const dispatch = createEventDispatcher<{
-    itemClick: (typeof data)[number];
-  }>();
-
   export let data: {
     label: string;
     value: number;
@@ -26,6 +22,10 @@
     item?: string;
   } = {};
   const settingsClasses = getComponentClasses('BarStack');
+
+  const dispatch = createEventDispatcher<{
+    itemClick: (typeof data)[number];
+  }>();
 </script>
 
 <div class={cls('BarStack', 'flex gap-px', settingsClasses.root, classes.root, $$props.class)}>

diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -561,17 +561,19 @@
             </slot>
           </svelte:fragment>
 
-          <slot name="empty" slot="empty" let:loading>
-            <div
-              class={cls(
-                'p-3 text-surface-content/5/50 italic text-sm',
-                settingsClasses.empty,
-                classes.empty
-              )}
-            >
-              {loading ? 'Loading...' : 'No options found'}
-            </div>
-          </slot>
+          <svelte:fragment slot="empty" let:loading>
+            <slot name="empty" {loading}>
+              <div
+                class={cls(
+                  'p-3 text-surface-content/5/50 italic text-sm',
+                  settingsClasses.empty,
+                  classes.empty
+                )}
+              >
+                {loading ? 'Loading...' : 'No options found'}
+              </div>
+            </slot>
+          </svelte:fragment>
         </SelectListOptions>
 
         <slot name="actions" {hide} />
@@ -618,17 +620,19 @@
           </slot>
         </svelte:fragment>
 
-        <slot name="empty" slot="empty" let:loading>
-          <div
-            class={cls(
-              'p-3 text-surface-content/5/50 italic text-sm',
-              settingsClasses.empty,
-              classes.empty
-            )}
-          >
-            {loading ? 'Loading...' : 'No options found'}
-          </div>
-        </slot>
+        <svelte:fragment slot="empty" let:loading>
+          <slot name="empty" {loading}>
+            <div
+              class={cls(
+                'p-3 text-surface-content/5/50 italic text-sm',
+                settingsClasses.empty,
+                classes.empty
+              )}
+            >
+              {loading ? 'Loading...' : 'No options found'}
+            </div>
+          </slot>
+        </svelte:fragment>
       </SelectListOptions>
     {/if}
   {/if}

diff --git a/packages/svelte-ux/src/lib/stores/debounceStore.ts b/packages/svelte-ux/src/lib/stores/debounceStore.ts
@@ -1,6 +1,6 @@
-import { derived, get, type Stores } from 'svelte/store';
+import { derived, get, type Readable } from 'svelte/store';
 
-function debounceStore<T extends Stores>(original: T, timeout = 300) {
+function debounceStore<T extends Readable<any>>(original: T, timeout = 300) {
   return derived(
     original,
     ($original, set) => {
@@ -10,7 +10,6 @@ function debounceStore<T extends Stores>(original: T, timeout = 300) {
         clearTimeout(timer);
       };
     },
-    // @ts-expect-error
     get(original)
   );
 }

diff --git a/packages/svelte-ux/src/routes/+layout.svelte b/packages/svelte-ux/src/routes/+layout.svelte
@@ -217,7 +217,7 @@
   <svelte:fragment slot="nav">
     <NavMenu />
     <!-- Spacer -->
-    <div class="h-4" />
+    <div class="h-4"></div>
   </svelte:fragment>
 
   <AppBar {title}>
@@ -302,7 +302,7 @@
             window.open(e.detail.value, '_blank');
           }}
         >
-          <span slot="selection" class="hidden" />
+          <span slot="selection" class="hidden"></span>
         </MenuButton>
       {/if}
     </div>
@@ -312,56 +312,3 @@
     <slot />
   </main>
 </AppLayout>
-
-<style lang="postcss">
-  :global(html) {
-    @apply bg-surface-200 accent-primary;
-    /* background-image:
-      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
-      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
-  }
-
-  :global(nav h1) {
-    @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b;
-  }
-
-  :global(nav h2) {
-    @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
-  }
-
-  :global(main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *)) {
-    scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
-  }
-
-  :global(main h1:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
-  }
-
-  :global(main h2:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-lg font-semibold mt-4 mb-1;
-  }
-
-  :global(main h3:not(.prose *, .related *, .ApiDocs *)) {
-    @apply text-xs text-surface-content/50 mb-1;
-  }
-  :global(main :not(.prose) h2 + h3) {
-    @apply -mt-1;
-  }
-
-  :global(main small) {
-    @apply text-xs text-surface-content/50 inline-block;
-  }
-
-  :global(.TableOfContents small) {
-    @apply hidden;
-  }
-
-  /* Code/Preview backgrounds */
-  :global(pre[class*='language-']) {
-    @apply bg-surface-content;
-  }
-
-  :global(.dark pre[class*='language-']) {
-    @apply bg-surface-300;
-  }
-</style>
diff --git a/packages/svelte-ux/src/routes/app.css b/packages/svelte-ux/src/routes/app.css
@@ -1,3 +1,54 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  @apply bg-surface-200 accent-primary scroll-smooth;
+  /* background-image:
+      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
+      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
+}
+
+nav h1 {
+  @apply py-2 pl-4 mt-4 text-sm text-surface-content font-bold bg-surface-200 border-t border-b;
+}
+
+nav h2 {
+  @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
+}
+
+main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) {
+  scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
+}
+
+main h1:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-xl font-semibold mt-4 mb-2 border-b pb-1;
+}
+
+main h2:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-lg font-semibold mt-4 mb-1;
+}
+
+main h3:not(.prose *, .related *, .ApiDocs *) {
+  @apply text-xs text-surface-content/50 mb-1;
+}
+main :not(.prose) h2 + h3 {
+  @apply -mt-1;
+}
+
+main small {
+  @apply text-xs text-surface-content/50 inline-block;
+}
+
+.TableOfContents small {
+  @apply hidden;
+}
+
+/* Code/Preview backgrounds */
+pre[class*='language-'] {
+  @apply bg-surface-content;
+}
+
+.dark pre[class*='language-'] {
+  @apply bg-surface-300;
+}