not-bulma 2.0.5 → 2.0.6

package/package.json

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

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

@@ -1,8 +1,8 @@
 <script>
-    import { createEventDispatcher } from "svelte";
-    const dispatch = createEventDispatcher();
-    import UIButton from "./ui.button.svelte";
+    import { onMount } from "svelte";
+    import UICommon from "../common";
 
+    import UIButton from "./ui.button.svelte";
 
     /**
      * @typedef {Object} Props
@@ -21,10 +21,15 @@
         right = false,
         classes = "",
         buttonComponent = UIButton,
+        onclick = () => {},
         action = (e) => {
-        dispatch("click", e);
-    }
+            onclick(e);
+        },
     } = $props();
+
+    if (!values.every((itm) => Object.hasOwn(itm, "id"))) {
+        values = UICommon.addIds(values);
+    }
 </script>
 
 <div
@@ -32,13 +37,15 @@
         ? 'is-right'
         : ''} {classes}"
 >
-    {#each values as item (item.id)}
-        {@const SvelteComponent = buttonComponent}
-        <SvelteComponent
-            {...item}
-            bind:value={item.value}
-            action={item.action ? item.action : action}
-            on:click
-        />
-    {/each}
+    {#if Array.isArray(values)}
+        {#each values as item (item.id)}
+            {@const SvelteComponent = buttonComponent}
+            <SvelteComponent
+                {...item}
+                bind:value={item.value}
+                action={item.action ? item.action : action}
+                {onclick}
+            />
+        {/each}
+    {/if}
 </div>

package/src/elements/common.js

@@ -169,4 +169,11 @@ export default class UICommon {
             return `${hours} ${unit} назад`;
         }
     }
+
+    static addIds(arr, fieldName = 'id'){
+        return arr.map((itm, index)=>{
+            itm[fieldName] = index;
+            return itm;
+        });
+    }
 }

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

@@ -33,8 +33,9 @@
             .filter((form) => {
                 return mode !== form.mode;
             })
-            .map((form) => {
+            .map((form, index) => {
                 return {
+                    id: index,
                     title: form.title,
                     outlined: true,
                     type: "link",
@@ -53,6 +54,6 @@
 <div class="block-container" id="{name}-form-set">
     <div class="form-paper" id="{name}-form-set-container"></div>
     {#if showModes}
-        <UIButtons centered={true} bind:values={FORMS_BUTTONS} classes="mt-4" />
+        <UIButtons centered={true} values={FORMS_BUTTONS} classes="mt-4" />
     {/if}
 </div>

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

@@ -87,8 +87,10 @@ export default class UIAdapterSvelte {
     }
 
     destroy(){
-        unmount(this.#instance);    
-        this.#instance = undefined;
+        if (this.#instance){
+            unmount(this.#instance);    
+            this.#instance = undefined;
+        }        
         this.#props = undefined;
         this.#uiConstructor = undefined;
         return this;