not-bulma 2.0.16 → 2.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-bulma",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "not-* family UI components on Bulma CSS Framework",
   "main": "src/index.js",
   "svelte": "src/index.js",

package/src/elements/block/ui.block.inner.vertical.svelte

@@ -1,6 +1,4 @@
 <script>
-    import { run } from 'svelte/legacy';
-
     import UIBlock from "./ui.block.svelte";
     /**
      * @typedef {Object} Props
@@ -10,14 +8,15 @@
      */
 
     /** @type {Props} */
-    let { id = $bindable(""), classes = "", children } = $props();
+    let { id, class: classes = "", children } = $props();
 
     let classesInner;
-    run(() => {
+
+    $effect(() => {
         classesInner = `block-inner-vertical ${classes}`;
     });
 </script>
 
-<UIBlock bind:id bind:classes={classesInner}>
+<UIBlock {id} class={classesInner}>
     {@render children?.()}
 </UIBlock>

package/src/elements/block/ui.block.svelte

@@ -1,9 +1,4 @@
 <script>
-    import { createBubbler } from 'svelte/legacy';
-
-    const bubble = createBubbler();
-    import { createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
     /**
      * @typedef {Object} Props
      * @property {string} [id]
@@ -12,15 +7,17 @@
      */
 
     /** @type {Props} */
-    let { id = "", classes = "", children } = $props();
+    let {
+        id = "",
+        class: classes = "",
+        role = "button",
+        onclick,
+        onkeyup,
+        onkeydown,
+        children,
+    } = $props();
 </script>
 
-<div
-    {id}
-    class="block {classes}"
-    onclick={bubble('click')}
-    onkeyup={() => dispatch("click")}
-    role="button"
->
+<div {id} class="block {classes}" {role} {onclick} {onkeyup} {onkeydown}>
     {@render children?.()}
 </div>

package/src/elements/block/ui.box.svelte

@@ -1,9 +1,4 @@
 <script>
-    import { createBubbler } from 'svelte/legacy';
-
-    const bubble = createBubbler();
-    import { createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
     /**
      * @typedef {Object} Props
      * @property {string} [id]
@@ -12,15 +7,17 @@
      */
 
     /** @type {Props} */
-    let { id = "", classes = "", children } = $props();
+    let {
+        id = "",
+        class: classes = "",
+        role = "button",
+        onclick,
+        onkeyup,
+        onkeydown,
+        children,
+    } = $props();
 </script>
 
-<div
-    {id}
-    class="box {classes} "
-    onclick={bubble('click')}
-    onkeyup={() => dispatch("click")}
-    role="button"
->
+<div {id} class="box {classes} " {onclick} {onkeyup} {onkeydown} {role}>
     {@render children?.()}
 </div>

package/src/elements/block/ui.content.svelte

@@ -1,9 +1,4 @@
 <script>
-    import { createBubbler } from 'svelte/legacy';
-
-    const bubble = createBubbler();
-    import { createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
     /**
      * @typedef {Object} Props
      * @property {string} [id]
@@ -12,16 +7,17 @@
      */
 
     /** @type {Props} */
-    let { id = "", classes = "", children } = $props();
+    let {
+        id = "",
+        class: classes = "",
+        role = "button",
+        onclick,
+        onkeyup,
+        onkeydown,
+        children,
+    } = $props();
 </script>
 
-<div
-    role="button"
-    tabindex="0"
-    {id}
-    class="content {classes}"
-    onclick={bubble('click')}
-    onkeyup={() => dispatch("click")}
->
+<div {id} class="content {classes} " {onclick} {onkeyup} {onkeydown} {role}>
     {@render children?.()}
 </div>

package/src/elements/list/ui.list.block.svelte

@@ -34,6 +34,11 @@
         descriptionComponentProps = {},
         imageComponent,
         imageComponentProps = {},
+        onclick = () => {},
+        onclickContent = () => {},
+        onclickDescription = () => {},
+        onclickImage = () => {},
+        onclickTitle = () => {},
     } = $props();
 </script>
 
@@ -52,15 +57,15 @@
             listActions={actions}
             listLinks={links}
             commonClasses={itemClasses}
-            bind:value={items[index]}
+            bindvalue={items[index]}
             {index}
             first={index === 0}
             last={index === items.length - 1}
-            on:click
-            on:clickContent
-            on:clickDescription
-            on:clickImage
-            on:clickTitle
+            {onclick}
+            {onclickContent}
+            {onclickDescription}
+            {onclickImage}
+            {onclickTitle}
         />
     {/each}
 {/if}

package/src/elements/list/ui.list.item.svelte

@@ -1,20 +1,12 @@
 <script>
-    import { run, preventDefault } from 'svelte/legacy';
+    import { preventDefault } from "svelte/legacy";
 
-    import { createEventDispatcher, onMount } from "svelte";
-    const dispatch = createEventDispatcher();
+    import { onMount } from "svelte";
 
     import UITitle from "../various/ui.title.svelte";
     import UIButtons from "../button/ui.buttons.svelte";
     import UILinks from "../link/ui.links.svelte";
 
-    
-    
-    
-    
-    
-    
-    
     /**
      * @typedef {Object} Props
      * @property {any} title
@@ -58,22 +50,27 @@
         descriptionComponent,
         descriptionComponentProps = {},
         imageComponent,
-        imageComponentProps = {}
+        imageComponentProps = {},
+        onclick = () => {},
+        onclickImage = () => {},
+        onclickContent = () => {},
+        onclickTitle = () => {},
+        onclickDescription = () => {},
     } = $props();
 
     function onClick() {
-        dispatch("click", value);
+        onclick(value);
     }
 
     let allActions = $state([]);
-    run(() => {
+    $effect(() => {
         allActions = [...actions, ...listActions].map((btn) => {
             return { ...btn, action: () => btn.action(value) };
         });
     });
 
     let allLinks = $state([]);
-    run(() => {
+    $effect(() => {
         allLinks = [...links, ...listLinks];
     });
 </script>
@@ -102,27 +99,21 @@
             onkeyup={preventDefault((e) => {
                 if (e && e.key == "Enter") {
                     onClick();
-                    dispatch("clickImage", value);
+                    onclickImage(value);
                 }
             })}
             onclick={preventDefault(() => {
                 onClick();
-                dispatch("clickImage", value);
+                onclickImage(value);
             })}
         >
             {#if imageComponent}
                 {#if typeof image === "string"}
                     {@const SvelteComponent = imageComponent}
-                    <SvelteComponent
-                        value={image}
-                        {...imageComponentProps}
-                    />
+                    <SvelteComponent value={image} {...imageComponentProps} />
                 {:else}
                     {@const SvelteComponent_1 = imageComponent}
-                    <SvelteComponent_1
-                        {...image}
-                        {...imageComponentProps}
-                    />
+                    <SvelteComponent_1 {...image} {...imageComponentProps} />
                 {/if}
             {:else}
                 <figure class="image is-64x64">
@@ -137,12 +128,12 @@
         class="list-item-content"
         onclick={preventDefault(() => {
             onClick();
-            dispatch("clickContent", value);
+            onclickContent(value);
         })}
         onkeyup={preventDefault((e) => {
             if (e && e.key == "Enter") {
                 onClick();
-                dispatch("clickContent", value);
+                onclickContent(value);
             }
         })}
     >
@@ -154,12 +145,12 @@
                 onkeyup={preventDefault((e) => {
                     if (e && e.key == "Enter") {
                         onClick();
-                        dispatch("clickTitle", value);
+                        onclickTitle(value);
                     }
                 })}
                 onclick={preventDefault(() => {
                     onClick();
-                    dispatch("clickTitle", value);
+                    onclickTitle(value);
                 })}
             >
                 {#if titleComponent}
@@ -168,14 +159,14 @@
                         <SvelteComponent_2
                             {title}
                             {...titleComponentProps}
-                            on:change
+                            {onchange}
                         />
                     {:else}
                         {@const SvelteComponent_3 = titleComponent}
                         <SvelteComponent_3
                             {...title}
                             {...titleComponentProps}
-                            on:change
+                            {onchange}
                         />
                     {/if}
                 {:else}
@@ -190,13 +181,13 @@
                 onkeyup={preventDefault((e) => {
                     if (e && e.key == "Enter") {
                         onClick();
-                        dispatch("clickDescription", value);
+                        onclickDescription(value);
                     }
                 })}
                 class="list-item-description"
                 onclick={preventDefault(() => {
                     onClick();
-                    dispatch("clickDescription", value);
+                    onclickDescription(value);
                 })}
             >
                 {#if descriptionComponent}
@@ -205,16 +196,16 @@
                         <SvelteComponent_4
                             value={description}
                             {...descriptionComponentProps}
-                            on:change
-                            on:click
+                            {onchange}
+                            {onclick}
                         />
                     {:else}
                         {@const SvelteComponent_5 = descriptionComponent}
                         <SvelteComponent_5
                             {...description}
                             {...descriptionComponentProps}
-                            on:change
-                            on:click
+                            {onchange}
+                            {onclick}
                         />
                     {/if}
                 {:else}

package/src/elements/list/ui.list.select.buttons.with.groups.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { onMount, createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
+    import { onMount } from "svelte";
+
     //
     import UIList from "./ui.list.svelte";
     import UITitle from "../various/ui.title.svelte";
@@ -8,16 +8,6 @@
     import UIButtons from "../button/ui.buttons.svelte";
     import UIButtonsSwitchers from "../button/ui.buttons.switchers.svelte";
 
-
-    
-    
-    
-    
-    
-    
-    
-
-    
     /**
      * @typedef {Object} Props
      * @property {string} [fieldname]
@@ -82,11 +72,12 @@ value: variantId
         listComponentProps = {},
         actionsList = ["selectAll", "deselectAll"],
         sublimeValue = (value) => {
-        return {
-            groupId: value.group,
-            valueId: value.id,
-        };
-    }
+            return {
+                groupId: value.group,
+                valueId: value.id,
+            };
+        },
+        onchange = () => {},
     } = $props();
     //
 
@@ -187,7 +178,7 @@ value: variantId
 
     function triggerChange() {
         value = getSelectedItems();
-        dispatch("change", {
+        onchange({
             fieldname,
             value,
         });
@@ -200,7 +191,7 @@ value: variantId
 
 <SvelteComponent
     {...listComponentProps}
-    bind:items={variants}
+    items={variants}
     {titleComponent}
     {titleComponentProps}
     {descriptionComponent}

package/src/elements/list/ui.list.select.svelte

@@ -1,26 +1,12 @@
 <script>
-    import { onMount, createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
+    import { onMount } from "svelte";
+
     //
     import UIList from "./ui.list.svelte";
     import UITitle from "../various/ui.title.svelte";
     import UIImage from "../image/ui.image.svelte";
     import UIButtons from "../button/ui.buttons.svelte";
 
-
-    
-    
-    
-    
-    
-    
-    
-    
-
-    
-
-
-    
     /**
      * @typedef {Object} Props
      * @property {string} [fieldname]
@@ -72,22 +58,23 @@ value:object
         listComponentProps = {},
         sublimeValue = (value) => value.id,
         getItem = ({ valueId }) => {
-        return variants.find((btnVal) => btnVal.value.id === valueId);
-    },
+            return variants.find((btnVal) => btnVal.value.id === valueId);
+        },
         getItemValue = ({ valueId }) => {
-        return getItem({ valueId }).value;
-    },
+            return getItem({ valueId }).value;
+        },
         getDefaultItemSublime = () => {
-        return variants[0].id;
-    },
+            return variants[0].id;
+        },
         uiOn = (item) => {
-        item.color = "success";
-        item.outlined = false;
-    },
+            item.color = "success";
+            item.outlined = false;
+        },
         uiOff = (item) => {
-        item.color = false;
-        item.outlined = true;
-    }
+            item.color = false;
+            item.outlined = true;
+        },
+        onchange = () => {},
     } = $props();
 
     onMount(() => {
@@ -172,7 +159,7 @@ value:object
         //
         updateValue();
         //
-        dispatch("change", {
+        onchange({
             field: fieldname,
             value,
         });
@@ -217,7 +204,7 @@ value:object
 
 <SvelteComponent
     {...listComponentProps}
-    bind:items={variants}
+    items={variants}
     {titleComponent}
     {titleComponentProps}
     {descriptionComponent}

package/src/elements/list/ui.list.select.with.groups.svelte

@@ -1,23 +1,12 @@
 <script>
-    import { onMount, createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
+    import { onMount } from "svelte";
+
     //
     import UIList from "./ui.list.svelte";
     import UITitle from "../various/ui.title.svelte";
     import UIImage from "../image/ui.image.svelte";
     import UIButtons from "../button/ui.buttons.svelte";
 
-
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
     /**
      * @typedef {Object} Props
      * @property {string} [fieldname]
@@ -91,33 +80,36 @@ value: variantId
         listComponent = UIList,
         listComponentProps = {},
         sublimeValue = (value) => {
-        return {
-            groupId: value.group,
-            valueId: value.id,
-        };
-    },
+            return {
+                groupId: value.group,
+                valueId: value.id,
+            };
+        },
         getItem = ({ groupId, valueId }) => {
-        return variants
-            .find((group) => group.id === groupId)
-            .description.values.find((btnVal) => btnVal.value.id === valueId);
-    },
+            return variants
+                .find((group) => group.id === groupId)
+                .description.values.find(
+                    (btnVal) => btnVal.value.id === valueId
+                );
+        },
         getItemValue = ({ groupId, valueId }) => {
-        return getItem({ groupId, valueId }).value;
-    },
+            return getItem({ groupId, valueId }).value;
+        },
         getDefaultItemSublime = () => {
-        return {
-            groupId: variants[0].id,
-            valueId: variants[0].description.values[0].value.id,
-        };
-    },
+            return {
+                groupId: variants[0].id,
+                valueId: variants[0].description.values[0].value.id,
+            };
+        },
         uiOn = (item) => {
-        item.color = "success";
-        item.outlined = false;
-    },
+            item.color = "success";
+            item.outlined = false;
+        },
         uiOff = (item) => {
-        item.color = false;
-        item.outlined = false;
-    }
+            item.color = false;
+            item.outlined = false;
+        },
+        onchange = () => {},
     } = $props();
 
     onMount(() => {
@@ -236,12 +228,12 @@ value: variantId
     //
     function toggle(detail) {
         let ui = updateSelected(detail);
-        console.log("image value", value, ui);
+
         updateUI(ui);
         //
         updateValue();
         //
-        dispatch("change", {
+        onchange({
             field: fieldname,
             value,
         });
@@ -313,7 +305,7 @@ value: variantId
 
 <SvelteComponent
     {...listComponentProps}
-    bind:items={variants}
+    items={variants}
     {titleComponent}
     {titleComponentProps}
     {descriptionComponent}

package/src/elements/list/ui.list.svelte

@@ -4,13 +4,8 @@
     import UIListBlock from "./ui.list.block.svelte";
     import UITitle from "../various/ui.title.svelte";
 
-
-
-
     //customization
-    
-    
-    
+
     /**
      * @typedef {Object} Props
      * @property {string} [classes]
@@ -58,7 +53,13 @@
         descriptionComponent,
         descriptionComponentProps = {},
         imageComponent,
-        imageComponentProps = {}
+        imageComponentProps = {},
+        onchange = () => {},
+        onclick = () => {},
+        onclickContent = () => {},
+        onclickDescription = () => {},
+        onclickImage = () => {},
+        onclickTitle = () => {},
     } = $props();
 </script>
 
@@ -87,17 +88,15 @@
             {imageComponentProps}
             {actions}
             {links}
-            on:change
-            on:click
-            on:clickContent
-            on:clickDescription
-            on:clickImage
-            on:clickTitle
+            {onchange}
+            {onclick}
+            {onclickContent}
+            {onclickDescription}
+            {onclickImage}
+            {onclickTitle}
         />
     </div>
 {:else}
     {@const SvelteComponent = emptyListPlaceholderComponent}
-    <SvelteComponent
-        {...emptyListPlaceholderComponentProps}
-    />
+    <SvelteComponent {...emptyListPlaceholderComponentProps} />
 {/if}

package/src/elements/various/ui.loader.svelte

@@ -14,18 +14,28 @@
 
     /** @type {Props} */
     let {
+        class: classes = "loader-size-40-100",
         loading = false,
         size = "container",
         title = "Waiting...",
+        loaderContent,
+        children,
     } = $props();
+
+    const showWhenSizeIs = ["page", "container"];
 </script>
 
-{#if size !== "hidden"}
-    <div
-        class="{size === 'page' ? 'pageloader' : 'containerloader'} {loading
-            ? 'is-active'
-            : ''}"
-    >
-        <span class="title">{$LOCALE[title]}</span>
-    </div>
-{/if}
+{#snippet loaderTitle()}
+    <span class="title">{$LOCALE[title]}</span>
+{/snippet}
+
+<div class="loader-wrapper">
+    {@render children()}
+    {#if showWhenSizeIs.includes(size) && loading}
+        <div class={`${size}loader is-active ${classes}`}>
+            {#if loaderContent}
+                {@render loaderContent(size, title)}
+            {:else}{/if}
+        </div>
+    {/if}
+</div>

package/src/frame/components/table/notTable.svelte

@@ -99,9 +99,9 @@
     }
 
     function _onSelectAllToggle() {
-        items.forEach((item) => {
+        /*items.forEach((item) => {
             selected[getItemId(item)] = selectAll;
-        });
+        });*/
         if (selectAll) {
             onSelectAll(selected);
         } else {
@@ -157,6 +157,7 @@
         <UIButtons values={actions} />
     </div>
 {/if}
+
 {#if showSearch}
     {#if filterUI}
         {@const SvelteComponent = filterUI}
@@ -179,15 +180,25 @@
         </div>
     {/if}
 {/if}
-{#if state.updating}
-    <UILoader loading={true} title="Загрузка..." size="container"></UILoader>
-{:else}
-    {#if showTotals}
-        <ul class="pagination-list">
-            <li>Страниц: {state?.pagination?.pages?.count ?? 0}</li>
-            <li>Записей: {state?.count ?? 0}</li>
-        </ul>
-    {/if}
+
+{#if showTotals}
+    <UIButtons
+        disabled={true}
+        centered={true}
+        values={[
+            {
+                id: 1,
+                title: `Страниц: ${state?.pagination?.pages?.count ?? 0}`,
+            },
+            {
+                id: 2,
+                title: `Записей: ${state?.count ?? 0}`,
+            },
+        ]}
+    />
+{/if}
+
+<UILoader loading={state.updating} title="Загрузка..." size="container">
     <table class="table">
         <thead>
             {#if showSelect}
@@ -239,61 +250,62 @@
             {/each}
         </tbody>
     </table>
-    {#if state?.pagination?.pages?.list.length >= 1}
-        <nav class="pagination is-centered" aria-label="pagination">
-            {#if enableButtonFirst}
-                <a
-                    href
-                    class="pagination-first"
-                    onclick={preventDefault(onGoToFirstPage)}>Первая</a
-                >
-            {/if}
-            {#if enableButtonPrev}
-                <a
-                    href
-                    class="pagination-previous"
-                    onclick={preventDefault(onGoToPrevPage)}>Назад</a
-                >
-            {/if}
-            {#if enableButtonNext}
-                <a
-                    href
-                    class="pagination-next"
-                    onclick={preventDefault(onGoToNextPage)}>Вперед</a
-                >
-            {/if}
-            {#if enableButtonLast}
-                <a
-                    href
-                    class="pagination-last"
-                    onclick={preventDefault(onGoToLastPage)}
-                    >Последняя {state?.pagination.pages.count + 1}</a
-                >
+</UILoader>
+
+{#if state?.pagination?.pages?.list.length >= 1}
+    <nav class="pagination is-centered" aria-label="pagination">
+        {#if enableButtonFirst}
+            <a
+                href
+                class="pagination-previous"
+                onclick={preventDefault(onGoToFirstPage)}>1</a
+            >
+        {/if}
+        {#if enableButtonPrev}
+            <a
+                href
+                class="pagination-previous"
+                onclick={preventDefault(onGoToPrevPage)}>Назад</a
+            >
+        {/if}
+        {#if enableButtonNext}
+            <a
+                href
+                class="pagination-next"
+                onclick={preventDefault(onGoToNextPage)}>Вперед</a
+            >
+        {/if}
+        {#if enableButtonLast}
+            <a
+                href
+                class="pagination-next"
+                onclick={preventDefault(onGoToLastPage)}
+                >{state?.pagination.pages.count}</a
+            >
+        {/if}
+        <ul class="pagination-list">
+            {#if state && state?.pagination && state?.pagination.pages && state?.pagination.pages.list}
+                {#each state?.pagination.pages.list as page (page.index)}
+                    <li>
+                        {#if page.active}
+                            <a
+                                href
+                                class="pagination-link is-current"
+                                aria-label="Страница {page.index}"
+                                aria-current="page">{page.index + 1}</a
+                            >
+                        {:else}
+                            <a
+                                href
+                                class="pagination-link"
+                                aria-label="Страница {page.index}"
+                                data-page={page.index}
+                                onclick={_goTo}>{page.index + 1}</a
+                            >
+                        {/if}
+                    </li>
+                {/each}
             {/if}
-            <ul class="pagination-list">
-                {#if state && state?.pagination && state?.pagination.pages && state?.pagination.pages.list}
-                    {#each state?.pagination.pages.list as page (page.index)}
-                        <li>
-                            {#if page.active}
-                                <a
-                                    href
-                                    class="pagination-link is-current"
-                                    aria-label="Страница {page.index}"
-                                    aria-current="page">{page.index + 1}</a
-                                >
-                            {:else}
-                                <a
-                                    href
-                                    class="pagination-link"
-                                    aria-label="Страница {page.index}"
-                                    data-page={page.index}
-                                    onclick={_goTo}>{page.index + 1}</a
-                                >
-                            {/if}
-                        </li>
-                    {/each}
-                {/if}
-            </ul>
-        </nav>
-    {/if}
+        </ul>
+    </nav>
 {/if}

package/src/frame/components/table/notTable.svelte.js

@@ -144,6 +144,10 @@ class notTable extends EventEmitter {
         }
     }
 
+    refresh(){
+        this.updateData();
+    }
+
     onWorkingUpdate(val) {
         this.#data.working = val;
         return val;
@@ -163,6 +167,7 @@ class notTable extends EventEmitter {
     onRefinedUpdate(val) {
         this.#data.refined = val;
         this.clearSelected();
+        this.afterSelectedUpdated();
         if (this.#ui && this.#ui.table) {
             this.#ui.table.set("items", this.#data.refined);
         }
@@ -195,9 +200,40 @@ class notTable extends EventEmitter {
             this.resetFilter();
         }
     }
+    
+    onRowSelectChange({id, selected}){
+        if(selected){
+            this.#data.selected[id] = true
+        }else if(Object.hasOwn(this.#data.selected, id)){
+            delete this.#data.selected[id];
+        }
+        this.afterSelectedUpdated();
+    }
+
+
+    allFilteredSelected(){
+        return Object.keys(this.#data.selected).length === this.#data.filtered.length;
+    }
+
+    afterSelectedUpdated() {        
+        if(this.#ui.table){
+            this.#ui.table.set("selected", this.#data.selected);
+            this.#ui.table.set(`selectAll`, this.allFilteredSelected());
+        }
+    }
+
+    selectAll() {
+        this.#data.filtered.forEach((item) => {
+            this.#data.selected[this.getItemId(item)] = true;
+        });
+        this.afterSelectedUpdated();
+        this.#ui.table.set(`selectAll`, true);
+    }
 
-    onSelectedUpdate(val) {
-        this.#data.selected = val;
+    selectNone() {        
+        this.clearSelected();
+        this.afterSelectedUpdated();
+        this.#ui.table.set(`selectAll`, false);
     }
 
     clearSelected() {
@@ -227,18 +263,7 @@ class notTable extends EventEmitter {
         return this.getOptions("getItemId", DEFAULT_OPTIONS.getItemId)(item);
     }
 
-    selectAll() {
-        this.#data.filtered.forEach((item) => {
-            this.#ui.table.set(`selected.${this.getItemId(item)}`, true);
-        });
-    }
-
-    selectNone() {
-        this.#data.filtered.forEach((item) => {
-            this.#ui.table.set(`selected.${this.getItemId(item)}`, false);
-        });
-    }
-
+    
     render() {
         if (!this.#ui.table) {
             this.#ui.table = new UIAdapterSvelte(
@@ -249,11 +274,9 @@ class notTable extends EventEmitter {
                     filterUI: this.getOptions("filterUI", undefined),
                     helpers: Object.assign({}, this.getHelpers()),
                     fields: this.getOptions("fields"),
-
                     actions: this.getActions(),
                     links: this.getLinks(),
                     search: "",
-
                     showSelect: this.getOptions("showSelect"),
                     showSearch: this.getOptions("showSearch"),
                     showSort: this.getOptions("showSort"),
@@ -270,14 +293,17 @@ class notTable extends EventEmitter {
             );
         }
 
-        this.#ui.table.$on("onSearchChange", (e) => this.onSearchChange(e));
-        this.#ui.table.$on("onSorterChange", (e) => this.onSorterChange(e));
-        this.#ui.table.$on("onFilterChange", (e) => this.onFilterChange(e));
-        this.#ui.table.$on("onGoToPage", (e) => this.goToPage(e));
-        this.#ui.table.$on("onGoToNextPage", () => this.goToNext());
-        this.#ui.table.$on("onGoToPrevPage", () => this.goToPrev());
-        this.#ui.table.$on("onGoToFirstPage", () => this.goToFirst());
-        this.#ui.table.$on("onGoToLastPage", () => this.goToLast());
+        this.#ui.table.$on("onSelectAll", this.selectAll.bind(this));
+        this.#ui.table.$on("onSelectNone", this.selectNone.bind(this));
+        this.#ui.table.$on("onSearchChange", this.onSearchChange.bind(this));
+        this.#ui.table.$on("onSorterChange", this.onSorterChange.bind(this));
+        this.#ui.table.$on("onFilterChange", this.onFilterChange.bind(this));
+        this.#ui.table.$on("onRowSelectChange", this.onRowSelectChange.bind(this));
+        this.#ui.table.$on("onGoToPage", this.goToPage.bind(this));
+        this.#ui.table.$on("onGoToNextPage", this.goToNext.bind(this));
+        this.#ui.table.$on("onGoToPrevPage", this.goToPrev.bind(this));
+        this.#ui.table.$on("onGoToFirstPage", this.goToFirst.bind(this));
+        this.#ui.table.$on("onGoToLastPage", this.goToLast.bind(this));
     }
 
     getActions() {
@@ -578,12 +604,12 @@ class notTable extends EventEmitter {
     }
 
     goToFirst() {
-        this.setState("pager.page", this.getState("pagination.pages.from"));
+        this.setState("pager.page", 0);
         this.updateData();
     }
 
     goToLast() {
-        this.setState("pager.page", this.getState("pagination.pages.to"));
+        this.setState("pager.page", parseInt(this.getState("pagination.pages.count")) - 1);
         this.updateData();
     }
 

package/src/frame/components/table/notTableRow.svelte

@@ -35,7 +35,7 @@
         e.preventDefault();
         onRowSelectChange({
             id: itemId,
-            selected: e.currentTraget.checked,
+            selected: e.currentTarget.checked,
         });
         return false;
     }

package/src/frame/crud/actions/list.js

@@ -115,45 +115,40 @@ export default class CRUDActionList {
         }
     }
 
-    static prepareOptions(controller) {
-        const DEFAULT_OPTIONS_TABLE = {
+    static defaultTableOptions(controller){
+        return {
             interface: controller.getOptions(`${ACTION}.interface`, {
                 combined: true,
                 factory: controller.getInterface(),
-            }),
-            fields: undefined,
-            showSelect: undefined,
-            getItemId: undefined,
-            idField: undefined,
-            preload: {},
+            }),            
+            preload: {},            
             filterUI: controller.getOptions(`${ACTION}.filterUI`),
             pager: { size: 50, page: 0 },
             sorter: {
                 id: -1,
-            },
-            filter: undefined,
-            ui: undefined,
+            },           
         };
+    }
+
+    static prepareOptions(controller) {        
         //forming actions buttons list
         let ACTIONS_LIST = [...controller.getOptions(`${ACTION}.actions`, [])];
         ACTIONS_LIST = this.tweakActionsList(controller, ACTIONS_LIST);
         //
+        const controllerOptions =  {...controller.getOptions(ACTION)};
+        for (const key in controllerOptions){
+            if(typeof controllerOptions[key] === 'undefined'){
+                delete controllerOptions[key];
+            }
+        }
         const TABLE_OPTIONS = {
             options: {
-                targetEl: controller.getContainerInnerElement(),
-                endless: false,
+                ...this.defaultTableOptions(controller),
+                ...controllerOptions,
+                targetEl: controller.getContainerInnerElement(),                
                 actions: ACTIONS_LIST,
             },
         };
-        Object.keys(DEFAULT_OPTIONS_TABLE).forEach((key) => {
-            let optVal = controller.getOptions(
-                `${ACTION}.${key}`,
-                DEFAULT_OPTIONS_TABLE[key]
-            );
-            if (typeof optVal !== "undefined") {
-                TABLE_OPTIONS.options[key] = optVal;
-            }
-        });
         return TABLE_OPTIONS;
     }
 }

package/src/frame/ui.adapter.svelte.js

@@ -71,6 +71,11 @@ export default class UIAdapterSvelte {
         return this;
     }
 
+    delete(propKey){
+        notPath.delete(propKey, this.#props, {});
+        return this;
+    }
+
     changeProp(propKey, changer){
         this.set(propKey, changer(this.get(propKey)));
         return this;

package/src/scss/_loader.scss

@@ -57,3 +57,12 @@
  transform:translateX(-50%);
  white-space:nowrap
 }
+
+.loader-wrapper{
+  position: relative;   
+}
+
+.loader-size-40-100{
+  min-height: 40vh;
+  min-width: 100%; 
+}