not-bulma 2.0.15 → 2.0.17

package/package.json

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