Merge pull request #156 from WJSoftware:JP/SvelteV5

feat!: Upgrade to Svelte v5.0.0
WJSoftware · Oct 19, 2024 · e98131a · e98131a
2 parents c2a7934 + a87dcfd
commit e98131a
Show file tree

Hide file tree

Showing 13 changed files with 708 additions and 396 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wjfe/dataview",
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -25,13 +25,13 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.223"
+		"svelte": "^5.0.2"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.7.1",
 		"@sveltejs/package": "^2.3.5",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@testing-library/svelte": "^5.2.3",
 		"@types/node": "^20.14.12",
 		"gh-pages": "^6.1.1",

diff --git a/src/demolib/AllColumnsDropdown.svelte b/src/demolib/AllColumnsDropdown.svelte
@@ -23,6 +23,7 @@
         data-bs-toggle="dropdown"
         title="Columns"
         aria-expanded="false"
+        aria-label="Select visible columns"
         data-bs-auto-close="false"
         bind:this={btn}
     >

diff --git a/src/demolib/ColumnList.svelte b/src/demolib/ColumnList.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     export type Column = { key: string; text: string; hidden?: boolean };
 </script>
 

diff --git a/src/demolib/EditInGitHub.svelte b/src/demolib/EditInGitHub.svelte
@@ -12,6 +12,7 @@
     title="See an error?  Want to improve the demo?  Curious about the source code?  View/edit this page in GitHub."
     href={editUrl}
     target="_blank"
+    aria-label="Edit this page in GitHub"
 >
     <i class="bi bi-pencil"></i>
 </a>

diff --git a/src/demolib/HeaderCell.svelte b/src/demolib/HeaderCell.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
     export type HeaderColumn<TRow extends Record<string, any> = Record<string, any>, TCol extends Record<string, any> = Record<string, any>> = 
         WjDvColumn<TRow, TCol> & {
             alignment: ColAlignment;
@@ -147,6 +147,7 @@
                 type="button"
                 class="btn btn-neutral btn-sm ms-auto"
                 title="Click: Next alignment; Ctrl + Click: Previous alignment"
+                aria-label="Column alignment"
                 onclick={changeAlignment}
             >
                 <i class="bi bi-{alignmentIcon}"></i>
@@ -159,14 +160,24 @@
             </label>
         {/if}
         {#if col.pinnedFunctions.hide}
-            <button type="button" class="btn btn-sm btn-neutral" onclick={() => col.hidden = true}>
-                <span title="Click to {col.pinned ? 'un' : ''}pin">
+            <button
+                type="button"
+                class="btn btn-sm btn-neutral"
+                onclick={() => col.hidden = true}
+                aria-label="{col.hidden ? 'Show' : 'Hide'} column"
+            >
+                <span title="Click to {col.hidden ? 'show' : 'hide'}">
                     <i class="bi bi-eye-slash"></i>
                 </span>
             </button>
         {/if}
         {#if col.pinnedFunctions.pin}
-            <button type="button" class="btn btn-sm btn-neutral" onclick={() => col.pinned = !col.pinned}>
+            <button
+                type="button"
+                class="btn btn-sm btn-neutral"
+                onclick={() => col.pinned = !col.pinned}
+                aria-label="{col.pinned ? 'Unp' : 'P'}in column"
+            >
                 <span title="Click to {col.pinned ? 'un' : ''}pin">
                     <i class="bi {pinIcon}"></i>
                 </span>

diff --git a/src/lib/WjDataView/WjDataView.svelte b/src/lib/WjDataView/WjDataView.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     /**
      * Possible column alignments.
      */

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -41,6 +41,7 @@
                 <a
                     href="https://github.com/WJSoftware/wjfe-dataview"
                     title="Repository"
+                    aria-label="Repository"
                     class="nav-link"
                     target="_blank"
                     >
@@ -65,6 +66,7 @@
                         href="https://getbootstrap.com"
                         target="_blank"
                         title="Bootstrap"
+                        aria-label="Bootstrap"
                     >
                         <i class="bi bi-bootstrap"></i>
                     </a>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -196,6 +196,7 @@ import &#123; WjDataView &#125; from '@wjfe/dataview';</pre>
                             type="button"
                             class="btn btn-sm btn-neutral"
                             onclick={() => ctx.row.wjdv.expanded = !ctx.row.wjdv.expanded}
+                            aria-label={ctx.row.wjdv.expanded ? 'contract' : 'expand'}
                         >
                             <i class="bi bi-chevron-bar-{ctx.row.wjdv.expanded ? 'contract' : 'expand'}"></i>
                         </button>

diff --git a/src/routes/ThemeSwitch.svelte b/src/routes/ThemeSwitch.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     /**
      * All possible theme options.
      */

diff --git a/src/routes/Toolbar.svelte b/src/routes/Toolbar.svelte
@@ -15,6 +15,7 @@
     <button
         class="btn btn-sm btn-info"
         title="Click to show additional information"
+        aria-label="Click to show additional information"
         data-bs-toggle="offcanvas"
         data-bs-target="#helpCanvas"
     >

diff --git a/src/routes/sales/DrilldownButton.svelte b/src/routes/sales/DrilldownButton.svelte
@@ -10,6 +10,11 @@
     }: Props = $props();
 </script>
 
-<button type="button" class="btn btn-neutral btn-sm" onclick={() => row.wjdv.expanded = !row.wjdv.expanded}>
+<button
+    type="button"
+    class="btn btn-neutral btn-sm"
+    onclick={() => row.wjdv.expanded = !row.wjdv.expanded}
+    aria-label={row.wjdv.expanded ? 'contract' : 'expand'}
+>
     <i class="bi bi-chevron-bar-{row.wjdv.expanded ? 'contract' : 'expand'}"></i>
 </button>
diff --git a/src/routes/sales/Toolbar.svelte b/src/routes/sales/Toolbar.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     export type WjDataViewOptions = {
         rowTracking: boolean;
         rowSelectionHighlight: boolean;
@@ -38,6 +38,7 @@
             type="button"
             class="btn btn-sm btn-info"
             title="Click to show additional information"
+            aria-label="Click to show additional information"
             data-bs-toggle="offcanvas"
             data-bs-target="#{moreInfoTarget}"
         >