@beeblock/svelar-datatable 0.1.7 → 0.2.0

package/src/ui/DataTableEditorField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore } from '../index.js';
+  import type { EditorFieldDef, DataTableStore } from '../index.ts';
 
   interface Props {
     field: EditorFieldDef;
@@ -7,6 +7,8 @@
   }
   let { field, store }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let state = $state(store.getState());
   $effect(() => {
     return store.subscribe(() => {

package/src/ui/DataTableEditorForm.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore } from '../index.js';
+  import type { EditorFieldDef, DataTableStore } from '../index.ts';
   import DataTableEditorField from './DataTableEditorField.svelte';
 
   interface Props {

package/src/ui/DataTableFooter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.ts';
 
   interface Props {
     columns: ColumnDef[];
@@ -10,6 +10,8 @@
   }
   let { columns, store, selectable = 'none', expandable = false, classNames = {} }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let state = $state(store.getState());
   $effect(() => {
     return store.subscribe(() => {

package/src/ui/DataTableHead.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.ts';
 
   interface Props {
     columns: ColumnDef[];
@@ -11,6 +11,8 @@
   }
   let { columns, store, selectable = 'none', sortable = true, expandable = false, classNames = {} }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let state = $state(store.getState());
   $effect(() => {
     return store.subscribe(() => {

package/src/ui/DataTableModalEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.js';
+  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.ts';
   import DataTableEditorForm from './DataTableEditorForm.svelte';
 
   interface Props {
@@ -11,6 +11,8 @@
   }
   let { fields, store, title = 'Edit Record', classNames = {}, onsubmit }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let state = $state(store.getState());
   $effect(() => {
     return store.subscribe(() => {
@@ -40,6 +42,7 @@
 
 {#if isOpen}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div class="sdt-modal-backdrop {classNames.editorBackdrop ?? ''}" onclick={handleBackdrop}>
     <div class="sdt-modal {classNames.editorModal ?? ''}" role="dialog" aria-modal="true">
       <div class="sdt-modal-header">

package/src/ui/DataTablePagination.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DataTableStore, DataTableClassNames } from '../index.js';
+  import type { DataTableStore, DataTableClassNames } from '../index.ts';
 
   interface Props {
     store: DataTableStore;
@@ -8,6 +8,8 @@
   }
   let { store, perPageOptions = [10, 15, 25, 50, 100], classNames = {} }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let state = $state(store.getState());
   $effect(() => {
     return store.subscribe(() => {

package/src/ui/DataTableRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, DataTableStore, SelectionMode, EditorMode, DataTableClassNames } from '../index.ts';
   import type { Snippet } from 'svelte';
   import DataTableCell from './DataTableCell.svelte';
   import DataTableExpandedRow from './DataTableExpandedRow.svelte';
@@ -41,6 +41,8 @@
     classNames = {},
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let state = $state(store.getState());
   $effect(() => {
     return store.subscribe(() => {
@@ -113,11 +115,28 @@
 >
   {#if selectable === 'multi'}
     <td class="sdt-cell sdt-cell-checkbox {classNames.td ?? ''}">
-      <input type="checkbox" checked={isSelected} onchange={() => store.toggleSelect(rowId)} />
+      <input
+        type="checkbox"
+        checked={isSelected}
+        onclick={(e) => e.stopPropagation()}
+        onchange={(e) => {
+          e.stopPropagation();
+          store.toggleSelect(rowId);
+        }}
+      />
     </td>
   {:else if selectable === 'single'}
     <td class="sdt-cell sdt-cell-checkbox {classNames.td ?? ''}">
-      <input type="radio" checked={isSelected} name="sdt-select" />
+      <input
+        type="radio"
+        checked={isSelected}
+        name="sdt-select"
+        onclick={(e) => e.stopPropagation()}
+        onchange={(e) => {
+          e.stopPropagation();
+          store.selectSingle(rowId);
+        }}
+      />
     </td>
   {/if}
 

package/src/ui/DataTableSearch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DataTableStore } from '../index.js';
+  import type { DataTableStore } from '../index.ts';
 
   interface Props {
     store: DataTableStore;
@@ -9,6 +9,8 @@
   }
   let { store, debounceMs = 300, placeholder = 'Search...', searchInputClass = '' }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let inputValue = $state(store.getState().globalSearch);
   let timer: ReturnType<typeof setTimeout> | null = null;
 

package/src/ui/DataTableToolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ColumnDef, ButtonDef, ExportFormat, DataTableStore, EditorMode, DataTableClassNames } from '../index.js';
+  import type { ColumnDef, ButtonDef, ExportFormat, DataTableStore, EditorMode, DataTableClassNames } from '../index.ts';
   import DataTableSearch from './DataTableSearch.svelte';
   import DataTableColumnToggle from './DataTableColumnToggle.svelte';
   import DataTableButtons from './DataTableButtons.svelte';
@@ -29,6 +29,8 @@
     onDeleteClick,
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
+
   let state = $state(store.getState());
   $effect(() => {
     return store.subscribe(() => {