Merge pull request #156 from WJSoftware:JP/SvelteV5

feat!: Upgrade to Svelte v5.0.0

Author: webJose

package-lock.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",

package.json

@@ -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}
     >

src/demolib/AllColumnsDropdown.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     export type Column = { key: string; text: string; hidden?: boolean };
 </script>
 

src/demolib/ColumnList.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>

src/demolib/EditInGitHub.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>

src/demolib/HeaderCell.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     /**
      * Possible column alignments.
      */

src/lib/WjDataView/WjDataView.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>

src/routes/+layout.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>

src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     /**
      * All possible theme options.
      */