not-bulma 2.0.13 → 2.0.15

package/package.json

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

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

@@ -1,14 +1,7 @@
 <script>
-    import { run } from 'svelte/legacy';
+    import { run } from "svelte/legacy";
 
     import UIButton from "./ui.button.svelte";
-    import { createEventDispatcher } from "svelte";
-
-    const dispatch = createEventDispatcher();
-
-
-
-
 
     /**
      * @typedef {Object} Props
@@ -44,7 +37,7 @@
         inverted = false,
         rounded = false,
         disabled = false,
-        state = "",
+        state: notState = "",
         type = "",
         color = "",
         size = "",
@@ -52,30 +45,32 @@
         icon = false,
         iconSide = "right",
         uiOff = () => {
-        return {
-            color: "",
-        };
-    },
+            return {
+                color: "",
+            };
+        },
+        onchange = () => {},
+        onclick = () => {},
         uiOn = () => {
-        return {
-            color: "success",
-        };
-    },
+            return {
+                color: "success",
+            };
+        },
         action = () => {
-        return !selected;
-    },
+            return !selected;
+        },
         value,
-        selected = $bindable(false)
+        selected = $bindable(false),
     } = $props();
 
     function onClick(event) {
         selected = action(event, value, selected);
-        dispatch("click", { value, selected });
+        onclick({ value, selected });
         onChange();
     }
 
     function onChange() {
-        dispatch("change", {
+        onchange({
             value,
             selected,
         });
@@ -100,7 +95,7 @@
     {inverted}
     {rounded}
     {disabled}
-    {state}
+    state={notState}
     {type}
     {color}
     {size}
@@ -108,5 +103,5 @@
     {icon}
     {iconSide}
     {value}
-    on:click={onClick}
+    onclick={onClick}
 ></UIButton>

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

@@ -14,18 +14,19 @@
         classes = "",
         left = [],
         center = [],
-        right = []
+        right = [],
+        disabled = false,
     } = $props();
 </script>
 
 <div class="columns {classes}">
     <div class="column">
-        <UIButtons values={left}></UIButtons>
+        <UIButtons values={left} {disabled}></UIButtons>
     </div>
     <div class="column">
-        <UIButtons values={center} centered={true}></UIButtons>
+        <UIButtons values={center} centered={true} {disabled}></UIButtons>
     </div>
     <div class="column">
-        <UIButtons values={right} right={true}></UIButtons>
+        <UIButtons values={right} right={true} {disabled}></UIButtons>
     </div>
 </div>

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

@@ -17,6 +17,7 @@
     let {
         values = [],
         centered = false,
+        disabled = false,
         right = false,
         classes = "",
         buttonComponent = UIButton,
@@ -41,6 +42,9 @@
             {@const SvelteComponent = buttonComponent}
             <SvelteComponent
                 {...item}
+                disabled={Object.hasOwn(item, "disabled")
+                    ? item.disabled
+                    : disabled}
                 bind:value={item.value}
                 action={item.action ? item.action : action}
                 {onclick}

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

@@ -3,7 +3,6 @@
     const dispatch = createEventDispatcher();
     import UIButtonSwitch from "./ui.button.switch.svelte";
 
-
     const selectHistory = [];
 
     export function selectAll() {
@@ -84,7 +83,6 @@
         }
     }
 
-
     /**
      * @typedef {Object} Props
      * @property {any} [values]
@@ -105,29 +103,31 @@
         classes = "",
         buttonComponent = UIButtonSwitch,
         action = (ev, value, selected) => {
-        let newSelected = !selected;
-        const indexOfCurrent = values.indexOf((itm) => itm.value === value);
-        const cnt = countSelected() + (newSelected ? 1 : -1);
+            let newSelected = !selected;
+            const indexOfCurrent = values.indexOf((itm) => itm.value === value);
+            const cnt = countSelected() + (newSelected ? 1 : -1);
 
-        if (min) {
-            if (cnt < min) {
-                selectUpToMin(cnt, indexOfCurrent);
-                values = values;
+            if (min) {
+                if (cnt < min) {
+                    selectUpToMin(cnt, indexOfCurrent);
+                    values = values;
+                }
             }
-        }
-        if (max) {
-            if (max < cnt) {
-                deselectDownToMin(cnt, indexOfCurrent);
-                values = values;
+            if (max) {
+                if (max < cnt) {
+                    deselectDownToMin(cnt, indexOfCurrent);
+                    values = values;
+                }
             }
-        }
-        if (newSelected) {
-            addToHistory(indexOfCurrent);
-        }
-        return newSelected;
-    },
+            if (newSelected) {
+                addToHistory(indexOfCurrent);
+            }
+            return newSelected;
+        },
         min = 0,
-        max = 100
+        max = 100,
+        onclick = () => {},
+        onchange = () => {},
     } = $props();
 </script>
 
@@ -143,8 +143,8 @@
             bind:value={item.value}
             bind:selected={item.selected}
             action={item.action ? item.action : action}
-            on:click
-            on:change
+            {onclick}
+            {onchange}
         />
     {/each}
 </div>

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

@@ -1,16 +1,15 @@
-import Lib from "not-bulma/src/frame/lib.js";
-import notCommon from "not-bulma/src/frame/common.js";
-import notBase from "not-bulma/src/frame/base.js";
+import Lib from "../../lib.js";
+import notCommon from "../../common.js";
+import notBase from "../../base.js";
 
 import UIAdapterSvelte from "../../ui.adapter.svelte";
 
-import UIFormSetComponent from "not-bulma/src/frame/components/form/form.set.svelte";
+import UIFormSetComponent from "./form.set.svelte";
 import UIFormComponent from "./form.svelte";
 
 const DEFAULT_CONTAINER_SELECTOR = ".form-set";
 const DEFAULT_FORM_SET_NAME = "form-set";
 
-
 class notFormSet extends notBase {
     #formSetComponent = null;
     #formComponent = null;
@@ -18,7 +17,6 @@ class notFormSet extends notBase {
     #form = null;
     #frame = null;
 
-
     /*
   new notFormSet({
     options:{
@@ -64,11 +62,11 @@ class notFormSet extends notBase {
      **/
     initUI() {
         const target = this.getFrameTargetEl();
-        while (target.children.length) target.removeChild(target.firstChild);        
+        while (target.children.length) target.removeChild(target.firstChild);
         this.#frame = new UIAdapterSvelte(
-            this.#formSetComponent, 
+            this.#formSetComponent,
             target,
-            this.#getFrameProps(),
+            this.#getFrameProps()
         );
         this.updateForm();
     }
@@ -83,8 +81,8 @@ class notFormSet extends notBase {
     }
 
     updateFormModeInUI() {
-        if (this.#frame && this.getWorking("mode") !== null ) {
-            this.#frame.set('mode', this.getWorking("mode"));
+        if (this.#frame && this.getWorking("mode") !== null) {
+            this.#frame.set("mode", this.getWorking("mode"));
         }
     }
 
@@ -194,11 +192,11 @@ class notFormSet extends notBase {
             showModes: this.getOptions("showModes", true),
             mode: this.getFormMode(),
             forms: this.getOptions("forms", []),
-            name: this.getOptions("name", DEFAULT_FORM_SET_NAME),            
-            onmode: (newMode)=>{
+            name: this.getOptions("name", DEFAULT_FORM_SET_NAME),
+            onmode: (newMode) => {
                 this.setFormMode(newMode);
                 this.updateForm();
-            }
+            },
         };
     }
 }

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

@@ -1,17 +1,17 @@
 import { Runner } from "not-validation";
 import UIAdapterSvelte from "../../ui.adapter.svelte";
 
-import { VARIANTS } from "not-bulma/src/frame/LIB.js";
-import Lib from "not-bulma/src/frame/lib.js";
-import notCommon from "not-bulma/src/frame/common.js";
-import notBase from "not-bulma/src/frame/base.js";
+import { VARIANTS } from "../../LIB.js";
+import Lib from "../../lib.js";
+import notCommon from "../../common.js";
+import notBase from "../../base.js";
 
-import UICommon from "not-bulma/src/elements/common.js";
-import FormHelpers from "not-bulma/src/frame/components/form/form.helpers.js";
-import UIFormComponent from "not-bulma/src/frame/components/form/form.svelte";
-import notFormRules from "not-bulma/src/frame/components/form/form.rules.js";
+import UICommon from "../../../elements/common.js";
+import FormHelpers from "./form.helpers.js";
+import UIFormComponent from "./form.svelte";
+import notFormRules from "./form.rules.js";
 
-import { DEFAULT_STATUS_SUCCESS, DEFAULT_STATUS_ERROR } from "not-bulma/src/frame/const.js";
+import { DEFAULT_STATUS_SUCCESS, DEFAULT_STATUS_ERROR } from "../../const.js";
 
 const DEFAULT_CONTAINER_SELECTOR = ".form";
 const DEFAULT_ACTION_NAME = "default";
@@ -104,13 +104,13 @@ class notForm extends notBase {
                 formOptions: this.getFormOptions(),
                 data: this.getFormData(),
                 injectedProps: this.getFormInjectedProps(),
-            });           
+            });
             const target = this.getFormTargetEl();
-            while (target.children.length){
+            while (target.children.length) {
                 target.removeChild(target.firstChild);
             }
             this.#form = new UIAdapterSvelte(this.#uiComponent, target, props);
-            
+
             this.#bindUIEvents();
             this.validateForm();
         } catch (e) {
@@ -125,7 +125,7 @@ class notForm extends notBase {
                 formOptions: this.getFormOptions(),
                 data: this.getFormData(),
                 injectedProps: this.getFormInjectedProps(),
-            });            
+            });
             this.#form.replaceProps(props);
             this.validateForm();
         } catch (e) {
@@ -134,14 +134,14 @@ class notForm extends notBase {
     }
 
     #bindUIEvents() {
-        this.#form.on('onchange', (event) =>{             
+        this.#form.on("onchange", (event) => {
             this.validateForm();
             this.emit("onchange", event);
             this.emit(`onchange.${event.field}`, event.value);
         });
-        this.#form.on('onsubmit', (event) => this.submit(event));
-        this.#form.on('onreject',  () => this.reject());
-        this.#form.on('onerror',  (event) => this.emit("onerror", event));
+        this.#form.on("onsubmit", (event) => this.submit(event));
+        this.#form.on("onreject", () => this.reject());
+        this.#form.on("onerror", (event) => this.emit("onerror", event));
         this.#bindMasterSlaveEvents();
     }
 
@@ -173,8 +173,6 @@ class notForm extends notBase {
         });
     }
 
-   
-
     async validateForm() {
         if (this.getOptions("readonly", false)) {
             return;
@@ -184,7 +182,9 @@ class notForm extends notBase {
                 this.collectData(),
                 this.getFormAction()
             );
-            this.#form.exec('updateFormValidationStatus', [validationResult.getReport()]);
+            this.#form.exec("updateFormValidationStatus", [
+                validationResult.getReport(),
+            ]);
             if (!validationResult.clean) {
                 this.emit("onerror", validationResult.getReport());
             }
@@ -192,7 +192,8 @@ class notForm extends notBase {
             const report = {
                 form: [UICommon.ERROR_DEFAULT, e.message],
             };
-            this.#form && this.#form.exec('updateFormValidationStatus',[report]);
+            this.#form &&
+                this.#form.exec("updateFormValidationStatus", [report]);
             this.emit("onerror", report);
             notCommon.report(e);
         }
@@ -209,18 +210,18 @@ class notForm extends notBase {
     //binding event to actual UI
     $on() {
         if (this.#form) {
-            this.#form.on(...arguments);            
+            this.#form.on(...arguments);
         }
     }
 
     setLoading() {
         this.emit("onloading");
-        this.#form.set('loading', true);
+        this.#form.set("loading", true);
     }
 
     resetLoading() {
         this.emit("onloaded");
-        this.#form.set('loading', false);
+        this.#form.set("loading", false);
     }
 
     destroy() {
@@ -301,9 +302,9 @@ class notForm extends notBase {
     setFormAction(val) {
         if (val && val !== this.#action) {
             this.#action = val;
-            try{
-                this.#form && this.#form.$destroy && this.#form.$destroy();                
-            }catch{}
+            try {
+                this.#form && this.#form.$destroy && this.#form.$destroy();
+            } catch {}
             this.initForm();
         }
     }
@@ -322,7 +323,7 @@ class notForm extends notBase {
      *   Form validation result
      **/
     setFormSuccess() {
-        this.#form.set('success', true);
+        this.#form.set("success", true);
         this.emit("onsuccess");
     }
 
@@ -340,7 +341,7 @@ class notForm extends notBase {
         if (result.errors && Object.keys(result.errors).length > 0) {
             status.fields = { ...result.errors };
         }
-        this.#form.exec('updateFormValidationStatus', [status]);
+        this.#form.exec("updateFormValidationStatus", [status]);
         this.emit("onerror", status);
     }
 
@@ -443,18 +444,21 @@ class notForm extends notBase {
         if (this.getOptions("readonly", false)) {
             return this.getData();
         }
-        const data = FormHelpers.collectData(this.#form.props.fields, this.#form.props.form);
+        const data = FormHelpers.collectData(
+            this.#form.props.fields,
+            this.#form.props.form
+        );
         this.setData({ ...data }); //update in inner store
         return data;
     }
 
     updateField(fieldName, props) {
-        if (this.#form.props && this.#form.props.form){
-            if( this.#form.props.form[fieldName]){
-                this.#form.changeProp(`form.${fieldName}`, (val)=>{
-                    return {...val, ...props}
-                });                
-            }else{
+        if (this.#form.props && this.#form.props.form) {
+            if (this.#form.props.form[fieldName]) {
+                this.#form.changeProp(`form.${fieldName}`, (val) => {
+                    return { ...val, ...props };
+                });
+            } else {
                 this.#form.set(`form.${fieldName}`, {
                     ...props,
                 });

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

@@ -1,6 +1,6 @@
 import notFormUtils from "./utils";
 import notFormHelpers from "./form.helpers";
-import notForm from "not-bulma/src/frame/components/form/form.svelte.js";
+import notForm from "./form.svelte.js";
 import notFormRules from "./form.rules";
 import notFormSet from "./form.set.svelte.js";
 import UIForm from "./form.svelte";

package/src/frame/components/navigation/menu.svelte.js

@@ -1,7 +1,5 @@
-import { COMPONENTS } from "not-bulma/src/frame/LIB.js";
-import UICommon from "not-bulma/src/elements/common.js";
-
-
+import { COMPONENTS } from "../../LIB.js";
+import UICommon from "../../../elements/common.js";
 
 class Menu {
     static MAX_TOUCH_WIDTH = 1023;
@@ -35,7 +33,7 @@ class Menu {
     static items = [];
     static sections = [];
     static menuStructure = [];
-    
+
     static location;
     static interval;
 
@@ -55,7 +53,7 @@ class Menu {
         return `menu.${this.options.type}.${what}`;
     }
 
-    static getCurrentUrl(){
+    static getCurrentUrl() {
         return window.location.toString();
     }
 
@@ -70,8 +68,11 @@ class Menu {
 
     static getOptions() {
         if (this.app) {
-            return {                
-                class: this.app.getOptions(this.getOptionsPathTo("class"), this.options.class),
+            return {
+                class: this.app.getOptions(
+                    this.getOptionsPathTo("class"),
+                    this.options.class
+                ),
                 brand: this.app.getOptions("brand", this.options.brand),
                 items: this.app.getOptions(
                     this.getOptionsPathTo("items"),
@@ -100,7 +101,6 @@ class Menu {
                 root: this.app.getOptions("router.root", this.options.root),
                 navigate: this.options.navigate.bind(this),
                 getComponent: this.getComponent.bind(this),
-                
             };
         } else {
             return this.options;
@@ -166,7 +166,7 @@ class Menu {
     }
 
     static prepareData() {
-        const items = [...this.getOptions().items];        
+        const items = [...this.getOptions().items];
         const sections = [...this.getOptions().sections];
 
         this.initField(sections, ["priority"]);
@@ -186,12 +186,14 @@ class Menu {
         this.menuStructure = this.createStructure();
     }
 
-    static createStructure(){        
+    static createStructure() {
         const menuStructure = [];
-        this.sections.forEach((section)=>{
+        this.sections.forEach((section) => {
             const menuItem = structuredClone(section);
-            const subItems = this.items.filter(item => item.section === section.id).map(subitem => structuredClone(subitem));
-            if(subItems && subItems.length){
+            const subItems = this.items
+                .filter((item) => item.section === section.id)
+                .map((subitem) => structuredClone(subitem));
+            if (subItems && subItems.length) {
                 menuItem.items = subItems;
             }
             menuStructure.push(menuItem);
@@ -244,7 +246,7 @@ class Menu {
     }
 
     static updateSection(sectionId, proc) {
-        if (this.menu.props.items && typeof sectionId !== 'undefined') {
+        if (this.menu.props.items && typeof sectionId !== "undefined") {
             for (let id in this.menu.props.items) {
                 if (this.menu.props.items[id].id !== sectionId) continue;
                 this.menu.props.items[id] = proc(this.menu.props.items[id]);
@@ -254,33 +256,48 @@ class Menu {
 
     static updateSectionItems(sectionId, proc) {
         if (!this.menu) return;
-        if (this.menu.props.items && typeof sectionId !== 'undefined') {
-            const index = this.menu.props.items.findIndex(sec => sec.id === sectionId);
-            if(index > -1){
-                this.menu.props.items[index].items = proc(this.menu.props.items[index].items);    
-            }            
+        if (this.menu.props.items && typeof sectionId !== "undefined") {
+            const index = this.menu.props.items.findIndex(
+                (sec) => sec.id === sectionId
+            );
+            if (index > -1) {
+                this.menu.props.items[index].items = proc(
+                    this.menu.props.items[index].items
+                );
+            }
         }
     }
 
-    static getSectionIndexByItemId(itemId){
+    static getSectionIndexByItemId(itemId) {
         if (!this.menu) return;
-        for(let sectionIndex in this.menu.props.items){
-            if (this.menu.props.items[sectionIndex] && Array.isArray(this.menu.props.items[sectionIndex].items)){
-                const itemIndex = this.menu.props.items[sectionIndex].items.findIndex(item => item.id === itemId);
-                if (itemIndex > -1){
-                    return {sectionIndex, itemIndex};
+        for (let sectionIndex in this.menu.props.items) {
+            if (
+                this.menu.props.items[sectionIndex] &&
+                Array.isArray(this.menu.props.items[sectionIndex].items)
+            ) {
+                const itemIndex = this.menu.props.items[
+                    sectionIndex
+                ].items.findIndex((item) => item.id === itemId);
+                if (itemIndex > -1) {
+                    return { sectionIndex, itemIndex };
                 }
             }
-        }        
+        }
         return undefined;
     }
 
     static updateItem(itemId, proc) {
         if (!this.menu) return;
-        if (typeof itemId !== 'undefined' && this.items) {
+        if (typeof itemId !== "undefined" && this.items) {
             const place = this.getSectionIndexByItemId(itemId);
-            if (place){
-                this.menu.props.items[place.sectionIndex].items[place.itemIndex] = proc(this.menu.props.items[place.sectionIndex].items[place.itemIndex]);
+            if (place) {
+                this.menu.props.items[place.sectionIndex].items[
+                    place.itemIndex
+                ] = proc(
+                    this.menu.props.items[place.sectionIndex].items[
+                        place.itemIndex
+                    ]
+                );
             }
         }
     }