not-bulma 2.0.9 → 2.0.12

package/package.json

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

@@ -1,5 +1,6 @@
 <script>
     import { run } from "svelte/legacy";
+    import { onMount } from "svelte";
 
     import { LOCALE } from "../../locale";
     import UISelectOption from "./ui.select.option.svelte";
@@ -29,8 +30,8 @@
 
     /** @type {Props} */
     let {
-        inputStarted = $bindable(false),
-        value = $bindable(""),
+        inputStarted = false,
+        value = "",
         variants = [],
         placeholder = "",
         emptyValueTitle = "",
@@ -46,26 +47,58 @@
         formErrors = false,
         formLevelError = false,
         onchange = () => {},
+        onInputStarted = () => {},
+        class: classes = "",
+        idField = "id",
+        titleField = "title",
     } = $props();
 
     let selectedVariants = $state([]);
 
     function filterSelectedVariants(variant) {
         if (Array.isArray(value) && multiple) {
-            return value.indexOf(variant.id) > -1;
+            return value.indexOf(variant[idField]) > -1;
         } else if (value) {
-            return value == variant.id;
+            return value == variant[idField];
         } else {
             return false;
         }
     }
 
-    let lastChange;
+    let lastChange, selectElement;
+
+    onMount(() => {
+        onInput({ currentTarget: selectElement });
+    });
+
+    function getSelectedValues() {
+        if (multiple) {
+            const _values = Array.from(selectElement.selectedOptions).map(
+                (el) => el.value
+            );
+            if (_values.indexOf(UICommon.CLEAR_MACRO) > -1) {
+                return [];
+            } else {
+                return _values;
+            }
+        } else {
+            if (selectElement.value === UICommon.CLEAR_MACRO) {
+                return "";
+            } else {
+                return selectElement.value;
+            }
+        }
+    }
+
+    function triggerInputStarted() {
+        onInputStarted();
+        inputStarted = true;
+    }
 
     function onBlur(ev) {
         let data = {
             field: fieldname,
-            value: ev.currentTarget.value,
+            value: getSelectedValues(),
         };
         if (lastChange === data.value) {
             return true;
@@ -77,20 +110,7 @@
                 return true;
             }
         }
-        if (multiple) {
-            value = Array.from(ev.target.selectedOptions).map((el) => el.value);
-            if (value.indexOf(UICommon.CLEAR_MACRO) > -1) {
-                value = [];
-            }
-            data.value = value;
-        } else {
-            if (data.value === UICommon.CLEAR_MACRO) {
-                value = "";
-            } else {
-                value = data.value;
-            }
-        }
-        inputStarted = true;
+        triggerInputStarted();
         onchange(data);
         return true;
     }
@@ -98,48 +118,40 @@
     function onInput(ev) {
         let data = {
             field: fieldname,
-            value: ev.currentTarget.value,
+            value: getSelectedValues(),
         };
-        if (multiple) {
-            value = Array.from(ev.target.selectedOptions).map((el) => el.value);
-            if (value.indexOf(UICommon.CLEAR_MACRO) > -1) {
-                value = [];
-            }
-            data.value = value;
-        } else {
-            if (data.value === UICommon.CLEAR_MACRO) {
-                value = "";
-            } else {
-                value = data.value;
-            }
-        }
-        inputStarted = true;
+        triggerInputStarted();
         lastChange = data.value;
         onchange(data);
         return true;
     }
+
     let iconClasses = $derived(
         (icon ? " has-icons-left " : "") + " has-icons-right "
     );
-    let allErrors;
+
+    let allErrors = $state([]);
     run(() => {
         allErrors = [].concat(
             errors ? errors : [],
             formErrors ? formErrors : []
         );
     });
-    let showErrors;
+
+    let showErrors = $state(false);
     run(() => {
         showErrors = !(validated && valid) && inputStarted;
     });
     let invalid = $derived(valid === false || formLevelError);
-    let validationClasses;
+
+    let validationClasses = $state("");
     run(() => {
         validationClasses =
             valid === true || !inputStarted
                 ? UICommon.CLASS_OK
                 : UICommon.CLASS_ERR;
     });
+
     let multipleClass = $derived(multiple ? " is-multiple " : "");
     run(() => {
         value;
@@ -153,7 +165,7 @@
     {#if readonly}
         {#if value}
             {#each selectedVariants as selectedVariant}
-                <span class="mr-2">{$LOCALE[selectedVariant.title]}</span>
+                <span class="mr-2">{$LOCALE[selectedVariant[titleField]]}</span>
             {/each}
         {:else}
             <span class="mr-2">{$LOCALE[emptyValueTitle]}</span>
@@ -161,10 +173,12 @@
     {:else}
         <div class="select {validationClasses} {multipleClass}">
             <select
+                bind:this={selectElement}
                 id="form-field-select-{fieldname}"
                 name={fieldname}
                 onblur={onBlur}
                 oninput={onInput}
+                onchange={onInput}
                 {readonly}
                 {required}
                 {multiple}
@@ -187,15 +201,16 @@
                 {#each variants as variant}
                     {#if multiple}
                         <UISelectOption
-                            value={variant.id}
-                            selected={value && value.indexOf(variant.id) > -1}
-                            title={variant.title}
+                            value={variant[idField]}
+                            selected={value &&
+                                value.indexOf(variant[idField]) > -1}
+                            title={variant[titleField]}
                         />
                     {:else}
                         <UISelectOption
-                            value={variant.id}
-                            selected={value == variant.id}
-                            title={variant.title}
+                            value={variant[idField]}
+                            selected={value == variant[idField]}
+                            title={variant[titleField]}
                         />
                     {/if}
                 {/each}

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

@@ -16,7 +16,7 @@
         srcFull,
         src,
         title,
-        cors = "anonymous",
+        cors,
         size = 64,
         contained = true,
         covered = true,
@@ -28,6 +28,8 @@
     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 srcFull}
@@ -35,7 +37,7 @@
         <figure
             class="image {sizeStyle} {containedStyle} {coveredStyle} {classes}"
         >
-            <img class="" alt={title} {src} crossOrigin={cors} />
+            <img class="" alt={title} {src} {crossOrigin} />
         </figure>
     </a>
 {:else}
@@ -46,6 +48,6 @@
         role="button"
         tabindex="0"
     >
-        <img class="" alt={title} {src} crossOrigin={cors} />
+        <img class="" alt={title} {src} {crossOrigin} />
     </figure>
 {/if}

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/notification/ui.error.svelte

@@ -1,15 +1,14 @@
 <script>
-  import {LOCALE} from '../../locale';
-
-  let { message, title } = $props();
+    import { LOCALE } from "../../locale";
 
+    let { message, title, class: classes = "" } = $props();
 </script>
 
-<article class="message is-danger">
-  <div class="message-header">
-    <p>{$LOCALE[title]}</p>
-  </div>
-  <div class="message-body">
-    {$LOCALE[message]}
-  </div>
+<article class="message is-danger {classes}">
+    <div class="message-header">
+        <p>{$LOCALE[title]}</p>
+    </div>
+    <div class="message-body">
+        {$LOCALE[message]}
+    </div>
 </article>

package/src/elements/notification/ui.success.svelte

@@ -1,14 +1,13 @@
 <script>
-  import {LOCALE} from '../../locale';
-  let { message, title } = $props();
-
+    import { LOCALE } from "../../locale";
+    let { message, title, class: classes = "" } = $props();
 </script>
 
-<article class="message is-success">
-  <div class="message-header">
-    <p>{$LOCALE[title]}</p>
-  </div>
-  <div class="message-body">
-    {$LOCALE[message]}
-  </div>
+<article class="message is-success {classes}">
+    <div class="message-header">
+        <p>{$LOCALE[title]}</p>
+    </div>
+    <div class="message-body">
+        {$LOCALE[message]}
+    </div>
 </article>

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/elements/various/ui.title.svelte

@@ -21,7 +21,7 @@
         size = 1,
         subsize,
         spaced = false,
-        align = "left"
+        align = "left",
     } = $props();
 
     export const scrollToTop = (options = UICommon.SCROLL_OPTIONS) => {
@@ -30,16 +30,18 @@
         }, 100);
     };
 
-    let size2 = $derived(subsize
-        ? subsize
-        : parseInt(size) < 6
-        ? parseInt(size) + 1
-        : size);
-    
+    let size2 = $derived(
+        subsize ? subsize : parseInt(size) < 6 ? parseInt(size) + 1 : size
+    );
+
     let spacedStyle = $derived(spaced ? "is-spaced" : "");
 
-    let resultTitle = $derived(`<h${size} id="${id}" style="text-align: ${align};" class="title ${spacedStyle} is-${size}">${$LOCALE[title]}</h${size}>`);
-    let resultSubtitle = $derived(`<h${size2} id="${id}" style="text-align: ${align};" class="subtitle is-${size2}">${$LOCALE[subtitle]}</h${size2}>`);
+    let resultTitle = $derived(
+        `<h${size} id="${id}" style="text-align: ${align};" class="title ${spacedStyle} is-${size}">${$LOCALE[title]}</h${size}>`
+    );
+    let resultSubtitle = $derived(
+        `<h${size2} id="${id}" style="text-align: ${align};" class="subtitle is-${size2}">${$LOCALE[subtitle]}</h${size2}>`
+    );
 </script>
 
 {#if title}