not-bulma 2.0.8 → 2.0.10

package/package.json

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

package/src/elements/button/ui.button.svelte

@@ -1,59 +1,56 @@
 <script>
-    import { createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
     import { LOCALE } from "../../locale";
 
+    /**
+     * @typedef {Object} Props
+     * @property {string} [title]
+     * @property {boolean} [light]
+     * @property {boolean} [loading]
+     * @property {boolean} [raised]
+     * @property {boolean} [outlined]
+     * @property {boolean} [inverted]
+     * @property {boolean} [rounded]
+     * @property {boolean} [disabled]
+     * @property {string} [state]
+     * @property {string} [type]
+     * @property {string} [color]
+     * @property {string} [size]
+     * @property {string} [classes]
+     * @property {boolean} [icon]
+     * @property {string} [iconSide]
+     * @property {any} [action]
+     * @property {any} value
+     * @property {import('svelte').Snippet} [children]
+     */
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {string} [title]
-   * @property {boolean} [light]
-   * @property {boolean} [loading]
-   * @property {boolean} [raised]
-   * @property {boolean} [outlined]
-   * @property {boolean} [inverted]
-   * @property {boolean} [rounded]
-   * @property {boolean} [disabled]
-   * @property {string} [state]
-   * @property {string} [type]
-   * @property {string} [color]
-   * @property {string} [size]
-   * @property {string} [classes]
-   * @property {boolean} [icon]
-   * @property {string} [iconSide]
-   * @property {any} [action]
-   * @property {any} value
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
-  let {
-    title = "",
-    light = false,
-    loading = false,
-    raised = false,
-    outlined = false,
-    inverted = false,
-    rounded = false,
-    disabled = false,
-    state = "",
-    type = "",
-    color = "",
-    size = "",
-    classes = "",
-    icon = false,
-    iconSide = "right",
-    action = () => {
-        return true;
-    },
-    value,
-    children
-  } = $props();
+    /** @type {Props} */
+    let {
+        title = "",
+        light = false,
+        loading = false,
+        raised = false,
+        outlined = false,
+        inverted = false,
+        rounded = false,
+        disabled = false,
+        state = "",
+        type = "",
+        color = "",
+        size = "",
+        classes = "",
+        icon = false,
+        iconSide = "right",
+        action = () => {
+            return true;
+        },
+        value,
+        children,
+        onclick = () => {},
+    } = $props();
 
     function onClick(event) {
         event.stopPropagation();
-        dispatch("click", { event, value });
+        onclick({ event, value });
         return action(event, value);
     }
 </script>
@@ -76,27 +73,21 @@
   {size ? `is-${size}` : ''}
   "
 >
-    {#if children}{@render children()}{:else}
-        {#if icon}
-            {#if iconSide === "left"}
-                <span class="icon"
-                    ><i
-                        class="fas fa-{icon} {size ? `is-${size}` : ''}"
-></i></span
-                >
-            {/if}
-            {#if title}
-                <span>{$LOCALE[title]}</span>
-            {/if}
-            {#if iconSide === "right"}
-                <span class="icon"
-                    ><i
-                        class="fas fa-{icon} {size ? `is-${size}` : ''}"
-></i></span
-                >
-            {/if}
-        {:else}
-            {$LOCALE[title]}
+    {#if children}{@render children()}{:else if icon}
+        {#if iconSide === "left"}
+            <span class="icon"
+                ><i class="fas fa-{icon} {size ? `is-${size}` : ''}"></i></span
+            >
+        {/if}
+        {#if title}
+            <span>{$LOCALE[title]}</span>
+        {/if}
+        {#if iconSide === "right"}
+            <span class="icon"
+                ><i class="fas fa-{icon} {size ? `is-${size}` : ''}"></i></span
+            >
         {/if}
+    {:else}
+        {$LOCALE[title]}
     {/if}
 </button>

package/src/elements/form/ui.named.numbers.list.svelte

@@ -28,10 +28,10 @@
     /** @type {Props} */
     let {
         fieldname = "numbers_list",
-        value = $bindable({}),
+        value = {},
         label = "named numbers list",
         inputStarted = false,
-        placeholder = $bindable("new item"),
+        placeholder = "new item",
         readonly = false,
         valid = true,
         validated = false,
@@ -40,15 +40,19 @@
         onchange = () => {},
     } = $props();
 
-    let list = $derived(
-        Object.keys(value).map((name) => {
+    let list = $state([]);
+
+    function updateList() {
+        list = Object.keys(value).map((name) => {
             return {
                 id: name,
                 title: name,
                 number: value[name],
             };
-        })
-    );
+        });
+    }
+
+    updateList();
 
     let allErrors;
     run(() => {
@@ -73,8 +77,9 @@
         if (notCommon.objHas(value, id)) {
             delete value[id];
             value = value;
-            onchange({ value, field: fieldname });
+            onchange({ value: $state.snapshot(value), field: fieldname });
         }
+        updateList();
     }
 
     function add() {
@@ -83,7 +88,9 @@
         if (id && id !== "" && !isNaN(number) && !notCommon.objHas(value, id)) {
             value[id] = number;
         }
-        onchange({ value, field: fieldname });
+        value = value;
+        onchange({ value: $state.snapshot(value), field: fieldname });
+        updateList();
     }
 
     const createNewVal = () => {
@@ -97,7 +104,7 @@
 </script>
 
 <UITitle title={label} size={5} />
-{#each list as item (item.id)}
+{#each list as item, index (item.id)}
     <UIColumns>
         <UIColumn classes="is-6">
             {item.title}
@@ -115,7 +122,7 @@
 {#if !readonly}
     <UIColumns>
         <UIColumn classes="is-6">
-            <UITextfield bind:value={newVal.id} bind:placeholder />
+            <UITextfield bind:value={newVal.id} {placeholder} />
         </UIColumn>
         <UIColumn classes="is-4">
             <UINumber bind:value={newVal.number} />

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

@@ -29,8 +29,8 @@
 
     /** @type {Props} */
     let {
-        inputStarted = $bindable(false),
-        value = $bindable(""),
+        inputStarted = false,
+        value = "",
         variants = [],
         placeholder = "",
         emptyValueTitle = "",
@@ -46,6 +46,7 @@
         formErrors = false,
         formLevelError = false,
         onchange = () => {},
+        class: classes = "",
     } = $props();
 
     let selectedVariants = $state([]);

package/src/elements/image/ui.image.svelte

@@ -1,11 +1,8 @@
 <script>
-    import { createBubbler } from 'svelte/legacy';
-
-    const bubble = createBubbler();
     /**
      * @typedef {Object} Props
-     * @property {any} urlFull
-     * @property {any} url
+     * @property {any} srcFull
+     * @property {any} src
      * @property {any} title
      * @property {string} [cors]
      * @property {number} [size]
@@ -16,37 +13,41 @@
 
     /** @type {Props} */
     let {
-        urlFull,
-        url,
+        srcFull,
+        src,
         title,
-        cors = "anonymous",
+        cors,
         size = 64,
         contained = true,
         covered = true,
-        classes = ""
+        classes = "",
+        onclick = () => {},
+        onkeyup = () => {},
     } = $props();
 
     let sizeStyle = $derived(isNaN(size) ? `is-${size}` : `is-${size}x${size}`);
     let containedStyle = $derived(contained ? "is-contained" : "");
     let coveredStyle = $derived(covered ? "is-covered" : "");
+
+    let crossOrigin = $derived(cors);
 </script>
 
-{#if urlFull}
-    <a href={urlFull} alt={title} onclick={bubble('click')}>
+{#if srcFull}
+    <a href={srcFull} alt={title} {onclick}>
         <figure
             class="image {sizeStyle} {containedStyle} {coveredStyle} {classes}"
         >
-            <img class="" alt={title} src={url} crossOrigin={cors} />
+            <img class="" alt={title} {src} {crossOrigin} />
         </figure>
     </a>
 {:else}
     <figure
         class="image {sizeStyle} {containedStyle} {coveredStyle} {classes}"
-        onclick={bubble('click')}
-        onkeyup={bubble('keyup')}
+        {onclick}
+        {onkeyup}
         role="button"
         tabindex="0"
     >
-        <img class="" alt={title} src={url} crossOrigin={cors} />
+        <img class="" alt={title} {src} {crossOrigin} />
     </figure>
 {/if}

package/src/elements/image/ui.images.svelte

@@ -1,8 +1,8 @@
 <script>
     import UIImage from "./ui.image.svelte";
-    let { values = [] } = $props();
+    let { values = [], onclick = () => {} } = $props();
 </script>
 
-{#each values as item (item.href)}
-    <UIImage {...item} on:click />
+{#each values as item (item.src)}
+    <UIImage {...item} {onclick} />
 {/each}

package/src/elements/navigation/item/primitives/ui.navbar.item.wrapper.svelte

@@ -27,9 +27,6 @@
         onkeyup,
         ...other
     } = $props();
-
-    const onKeyUp =
-        onkeyup ?? (onclick ? UICommon.onlyOnEnter(onclick) : undefined);
 </script>
 
 <div
@@ -38,7 +35,7 @@
         " "
     )}
     {onclick}
-    onkeyup={onKeyUp}
+    onkeyup={onkeyup ?? (onclick ? UICommon.onlyOnEnter(onclick) : undefined)}
     {role}
     {tabIndex}
 >

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

@@ -1,10 +1,9 @@
 <script>
     import "bulma-pageloader";
     import { LOCALE } from "../../locale";
-    
+
     //hidden - no loader
     //container - parent container of form
-    
 
     /**
      * @typedef {Object} Props
@@ -14,7 +13,11 @@
      */
 
     /** @type {Props} */
-    let { loading = false, size = "container", title = "Waiting..." } = $props();
+    let {
+        loading = false,
+        size = "container",
+        title = "Waiting...",
+    } = $props();
 </script>
 
 {#if size !== "hidden"}

package/src/frame/components/action/action.ui.js

@@ -4,6 +4,8 @@ import notBase from "../../base";
 import UICommon from "../../../elements/common.js";
 
 import UIActionContainer from "./ui.action.container.svelte";
+import UIAdapterSvelte from "../../ui.adapter.svelte";
+
 const DEFAULT_CONTAINER_SELECTOR = ".container";
 import { DEFAULT_STATUS_SUCCESS, DEFAULT_STATUS_ERROR } from "../../const";
 
@@ -40,10 +42,10 @@ class notActionUI extends notBase {
             const target = this.getTargetEl();
             while (target.children.length)
                 target.removeChild(target.firstChild);
-            this.#ui = new this.#uiComponent({
+            this.#ui = new UIAdapterSvelte(this.#uiComponent,
                 target,
-                props: this.getOptions(),
-            });
+                this.getOptions(),
+            );
         } catch (e) {
             this.error(e);
         }
@@ -51,12 +53,20 @@ class notActionUI extends notBase {
 
     setLoading() {
         this.emit("onloading");
-        this.#ui.setLoading();
+        this.#ui.set('loaderActive', true);
+        this.#ui.set('success', false);
+        this.#ui.set('error', false);         
     }
 
     resetLoading() {
         this.emit("onloaded");
-        this.#ui.resetLoading();
+        this.#ui.set('loaderActive', false)
+    }
+
+    hideAll(){        
+        this.#ui.set('loaderActive', false);
+        this.#ui.set('success', false);
+        this.#ui.set('error', false);   
     }
 
     destroy() {
@@ -81,11 +91,33 @@ class notActionUI extends notBase {
         }
     }
 
+    showSuccess(title, message) {        
+        this.#ui.set('success', true);
+        this.#ui.set('error', false);           
+        if (message != undefined) {
+            this.#ui.set('successMessage', message);
+        }
+        if (title != undefined) {
+            this.#ui.set('successTitle', title);            
+        }
+    }
+
+    showError(title, message) {
+        this.#ui.set('success', false);
+        this.#ui.set('error', true);           
+        if (message != undefined) {
+            this.#ui.set('errorMessage', message);
+        }
+        if (title != undefined) {
+            this.#ui.set('errorTitle', title);            
+        }       
+    }
+
     /**
      *   Form validation result
      **/
     setFormSuccess() {
-        this.#ui.showSuccess();
+        this.showSuccess();
         this.emit("onsuccess");
     }
 
@@ -100,7 +132,7 @@ class notActionUI extends notBase {
         if (result.errors && Object.keys(result.errors).length > 0) {
             status.fields = { ...result.errors };
         }
-        this.#ui.showError(status);
+        this.showError(result.message, JSON.stringify(status, null, 4));
         this.emit("onerror", status);
     }
 

package/src/frame/components/action/ui.action.container.svelte

@@ -1,99 +1,57 @@
 <script>
-
-  import {
-    LOCALE
-  } from '../../../locale';
-
-  import UILoader from '../../../elements/various/ui.loader.svelte';
-  import UIContainer from '../../../elements/layout/ui.container.svelte';
-  import UINotificationError from '../../../elements/notification/ui.error.svelte';
-  import UINotificationSuccess from '../../../elements/notification/ui.success.svelte';
-
-
-  
-	//hidden - no loader
-	//container - parent container of form
-	
-
-	let success = $state(false);
-
-  let error = $state(false);
-  /**
-   * @typedef {Object} Props
-   * @property {any} [container]
-   * @property {string} [loaderTitle]
-   * @property {boolean} [loaderActive] - state if form loading
-   * @property {string} [loaderSize] - page - whole page
-   * @property {string} [successTitle]
-   * @property {string} [successMessage]
-   * @property {string} [errorTitle]
-   * @property {string} [errorMessage]
-   */
-
-  /** @type {Props} */
-  let {
-    container = {},
-    loaderTitle = $bindable('Отправка данных на сервер'),
-    loaderActive = $bindable(false),
-    loaderSize = $bindable('container'),
-    successTitle = $bindable('OK'),
-    successMessage = $bindable(''),
-    errorTitle = $bindable('Error'),
-    errorMessage = $bindable('')
-  } = $props();
-
-  export function showSuccess(title, message) {
-    error = false;
-    success = true;
-    if(message != undefined){
-      successMessage = message;
-    }
-    if(title != undefined){
-      successTitle = title;
-    }
-  }
-
-  export function showError(title, message) {
-    success = false;
-    error = true;
-    if(message != undefined){
-      messageTitle = message;
-    }
-    if(title != undefined){
-      successTitle = title;
-    }
-  }
-
-  export function setLoading() {
-    loaderActive = true;
-    success = false;
-    error = false;
-
-  }
-
-  export function resetLoading() {
-    loaderActive = false;
-  }
-
-  export function hideAll(){
-    loaderActive = false;
-    success = false;
-    error = false;
-  }
-
+    import { LOCALE } from "../../../locale";
+
+    import UILoader from "../../../elements/various/ui.loader.svelte";
+    import UIContainer from "../../../elements/layout/ui.container.svelte";
+    import UINotificationError from "../../../elements/notification/ui.error.svelte";
+    import UINotificationSuccess from "../../../elements/notification/ui.success.svelte";
+
+    //hidden - no loader
+    //container - parent container of form
+
+    /**
+     * @typedef {Object} Props
+     * @property {any} [container]
+     * @property {string} [loaderTitle]
+     * @property {boolean} [loaderActive] - state if form loading
+     * @property {string} [loaderSize] - page - whole page
+     * @property {string} [successTitle]
+     * @property {string} [successMessage]
+     * @property {string} [errorTitle]
+     * @property {string} [errorMessage]
+     */
+
+    /** @type {Props} */
+    let {
+        success = false,
+        error = false,
+        container = {},
+        loaderTitle = $bindable("Отправка данных на сервер"),
+        loaderActive = $bindable(false),
+        loaderSize = $bindable("container"),
+        successTitle = $bindable("OK"),
+        successMessage = $bindable(""),
+        errorTitle = $bindable("Error"),
+        errorMessage = $bindable(""),
+    } = $props();
 </script>
 
-
 <UILoader
-  bind:loading={loaderActive}
-  bind:title={loaderTitle}
-  bind:size={loaderSize}
-  />
-<UIContainer {...container} >
-  {#if error }
-  <UINotificationError bind:title={errorTitle} bind:message={errorMessage} />
-  {/if}
-  {#if success}
-  <UINotificationSuccess bind:title={successTitle} bind:message={successMessage} />
-  {/if}
+    bind:loading={loaderActive}
+    bind:title={loaderTitle}
+    bind:size={loaderSize}
+/>
+<UIContainer {...container}>
+    {#if error}
+        <UINotificationError
+            bind:title={errorTitle}
+            bind:message={errorMessage}
+        />
+    {/if}
+    {#if success}
+        <UINotificationSuccess
+            bind:title={successTitle}
+            bind:message={successMessage}
+        />
+    {/if}
 </UIContainer>

package/src/frame/components/form/form.svelte

@@ -70,6 +70,8 @@ agreed
         onchange = () => {},
         onsubmit = () => {},
         onreject = () => {},
+        onFieldInvalid = () => {},
+        onFieldValid = () => {},
     } = $props();
 
     let formInvalid = $derived(formHasErrors || fieldsHasErrors);
@@ -96,14 +98,14 @@ agreed
 
     export function setFormFieldInvalid(fieldName, errors) {
         form = FormHelpers.setFormFieldInvalid(form, fieldName, errors);
-        dispatch(`field.invalid`, {
+        onFieldInvalid({
             fieldName,
         });
     }
 
     export function setFormFieldValid(fieldName) {
         form = FormHelpers.setFormFieldValid(form, fieldName);
-        dispatch(`field.valid`, {
+        onFieldValid({
             fieldName,
         });
     }
@@ -159,10 +161,8 @@ agreed
     export function setFieldValue(fieldName, value) {
         if (FormHelpers.setFieldValue(form, fieldName, value)) {
             onFieldChange({
-                detail: {
-                    field: fieldName,
-                    value,
-                },
+                field: fieldName,
+                value,
             });
         }
     }

package/src/frame/components/form/form.svelte.js

@@ -126,7 +126,7 @@ class notForm extends notBase {
                 data: this.getFormData(),
                 injectedProps: this.getFormInjectedProps(),
             });            
-
+            this.#form.replaceProps(props);
             this.validateForm();
         } catch (e) {
             this.error(e);
@@ -451,14 +451,13 @@ class notForm extends notBase {
     updateField(fieldName, props) {
         if (this.#form.props && this.#form.props.form){
             if( this.#form.props.form[fieldName]){
-                this.#form.props.form[fieldName] = {
-                    ...this.#form.props.form[fieldName],
-                    ...props,
-                };
+                this.#form.changeProp(`form.${fieldName}`, (val)=>{
+                    return {...val, ...props}
+                });                
             }else{
-                this.#form.props.form[fieldName] = {                  
+                this.#form.set(`form.${fieldName}`, {
                     ...props,
-                };   
+                });
             }
         }
     }

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

@@ -6,6 +6,7 @@
     import { UILinks } from "../../../elements/link";
     import { UIButtons } from "../../../elements/button";
     import UIIcon from "../../../elements/icon/ui.icon.font.svelte";
+    import { UILoader } from "../../../elements/various";
 
     /**
      * @typedef {Object} Props
@@ -71,17 +72,17 @@
         }
     }
 
-    function _onSearchChange({ detail }) {
+    function _onSearchChange(event) {
         try {
-            onSearchChange(detail);
+            onSearchChange(event);
         } catch (e) {
             return;
         }
     }
 
-    function _onFilterChange({ detail }) {
+    function _onFilterChange(event) {
         try {
-            onFilterChange(detail);
+            onFilterChange(event);
         } catch (e) {
             return;
         }
@@ -121,6 +122,13 @@
         selected[event.id] = event.selected;
         onRowSelectChange(event);
     }
+
+    function preventDefault(call) {
+        return (e) => {
+            e.preventDefault();
+            return call(e);
+        };
+    }
 </script>
 
 {#if links.length}
@@ -155,88 +163,100 @@
         </div>
     {/if}
 {/if}
-<table class="table">
-    <thead>
-        {#if showSelect}
-            <th
-                ><input
-                    type="checkbox"
-                    id="table-row-select-page"
-                    bind:checked={selectAll}
-                    placeholder=""
-                    name="row_selected_all"
-                    onchange={_onSelectAllToggle}
-                /></th
-            >
-        {/if}
-        {#each fields as field}
-            {@const propPath = field.path.substring(1)}
-            <th
-                class={(field.hideOnMobile ? " is-hidden-touch" : "") +
-                    (field.sortable ? " is-clickable" : "")}
-                onclick={() => _onFieldHeadClick(field)}
-            >
-                {#if field.sortable && Object.hasOwn(sorter, propPath)}
-                    <UIIcon
-                        font={sorter[propPath] > 0 ? "sort-up" : "sort-down"}
-                        title={field.title}
-                        pointable={true}
-                    />
-                {:else}
-                    {$LOCALE[field.title]}
-                {/if}
-            </th>
-        {/each}
-    </thead>
-    <tbody>
-        {#each items as item (item._id)}
-            <UITableRow
-                {id}
-                {item}
-                {fields}
-                {helpers}
-                {showSelect}
-                isSelected={selected[getItemId(item)]}
-                {getItemId}
-                onRowSelectChange={_onRowSelectChange}
-                onchange={onRowCellChange}
-            />
-        {/each}
-    </tbody>
-</table>
-{#if state?.pagination?.pages?.list.length >= 1}
-    <nav class="pagination is-centered" aria-label="pagination">
-        {#if state?.pagination?.pages?.current > 0}
-            <a href class="pagination-previous" onclick={onGoToPrevPage}
-                >Назад</a
-            >
-        {/if}
-        {#if state?.pagination?.pages?.current < state?.pagination?.pages.to}
-            <a href class="pagination-next" onclick={onGoToNextPage}>Вперед</a>
-        {/if}
-        <ul class="pagination-list">
-            {#if state && state?.pagination && state?.pagination.pages && state?.pagination.pages.list}
-                {#each state?.pagination.pages.list as page}
-                    <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 state.updating}
+    <UILoader loading={true} title="Загрузка..." size="container"></UILoader>
+{:else}
+    <table class="table">
+        <thead>
+            {#if showSelect}
+                <th
+                    ><input
+                        type="checkbox"
+                        id="table-row-select-page"
+                        bind:checked={selectAll}
+                        placeholder=""
+                        name="row_selected_all"
+                        onchange={_onSelectAllToggle}
+                    /></th
+                >
+            {/if}
+            {#each fields as field}
+                {@const propPath = field.path.substring(1)}
+                <th
+                    class={(field.hideOnMobile ? " is-hidden-touch" : "") +
+                        (field.sortable ? " is-clickable" : "")}
+                    onclick={() => _onFieldHeadClick(field)}
+                >
+                    {#if field.sortable && Object.hasOwn(sorter, propPath)}
+                        <UIIcon
+                            font={sorter[propPath] > 0
+                                ? "sort-up"
+                                : "sort-down"}
+                            title={field.title}
+                            pointable={true}
+                        />
+                    {:else}
+                        {$LOCALE[field.title]}
+                    {/if}
+                </th>
+            {/each}
+        </thead>
+        <tbody>
+            {#each items as item (item._id)}
+                <UITableRow
+                    {id}
+                    {item}
+                    {fields}
+                    {helpers}
+                    {showSelect}
+                    isSelected={selected[getItemId(item)]}
+                    {getItemId}
+                    onRowSelectChange={_onRowSelectChange}
+                    onchange={onRowCellChange}
+                />
+            {/each}
+        </tbody>
+    </table>
+    {#if state?.pagination?.pages?.list.length >= 1}
+        <nav class="pagination is-centered" aria-label="pagination">
+            {#if state?.pagination?.pages?.current > 0}
+                <a
+                    href
+                    class="pagination-previous"
+                    onclick={preventDefault(onGoToPrevPage)}>Назад</a
+                >
+            {/if}
+            {#if state?.pagination?.pages?.current < state?.pagination?.pages.to}
+                <a
+                    href
+                    class="pagination-next"
+                    onclick={preventDefault(onGoToNextPage)}>Вперед</a
+                >
             {/if}
-        </ul>
-    </nav>
+            <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}
 {/if}

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

@@ -680,7 +680,7 @@ class notTable extends EventEmitter {
                             notCommon.objHas(data, "result");
                         this.updateStore('filtered', (val) => {
                             if (!this.getOptions("endless", false)) {
-                                this.clearFilteredData();
+                                val.splice(0);
                             }
                             if (full && data?.result.list) {
                                 val.push(...(data.result.list || []));

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

@@ -1,4 +1,5 @@
 import { notTable } from "../../components";
+import UICommon from "../../../elements/common";
 
 const ACTION = "list";
 
@@ -65,12 +66,14 @@ export default class CRUDActionList {
         };
         const actionsButtons = [...prepend];
         if (Array.isArray(actions)) {
-            actions.forEach((actionName) =>
-                actionsButtons.push(ACTIONS[actionName])
+            actions.forEach((actionName, index) =>
+                actionsButtons.push({                    
+                    ...ACTIONS[actionName]
+                })
             );
         }
         actionsButtons.push(...append);
-        return actionsButtons;
+        return UICommon.addIds(actionsButtons);
     }
 
     static async run(controller, params) {

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

@@ -76,6 +76,25 @@ export default class UIAdapterSvelte {
         return this;
     }
 
+    replaceProps(props){
+        const replaced = [];
+        Object.keys(this.#props).forEach(
+            (key)=>{
+                if (Object.hasOwn(props)) { 
+                    this.#props[key] = props[key];
+                }else{
+                    delete this.#props[key];
+                }
+            });
+        Object.keys(props).forEach(
+            (key)=>{
+               if (!replaced.includes(key)) { 
+                    this.#props[key] = props[key];
+                }
+            });
+        return this;
+    }
+
     $get(propKey){
         return this.get(propKey);
     }
@@ -85,7 +104,7 @@ export default class UIAdapterSvelte {
     }
 
     get props(){
-        return this.#props;
+        return $state.snapshot(this.#props);
     }
 
     $destroy(){

package/src/scss/_navbar.scss

@@ -1,5 +1,6 @@
 aside.menu.main-menu {
     height: 100%;
+    padding-bottom: 20%;
 }
 @media screen and (max-width: 1024px) {
     nav.navbar .navbar-menu .navbar-link::after {