not-bulma 2.0.14 → 2.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-bulma",
-  "version": "2.0.14",
+  "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>