not-bulma 1.0.87 → 1.0.89

package/package.json

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

package/src/elements/list/field.ui.named.numbers.list.svelte

@@ -0,0 +1,103 @@
+<script>
+    import ErrorsList from "../various/ui.errors.list.svelte";
+    import { createEventDispatcher } from "svelte";
+    let dispatch = createEventDispatcher();
+
+    import { UIColumns, UIColumn } from "../layout";
+    import { UIButton } from "../button";
+    import UINumber from "../form/ui.number.svelte";
+    import UITextfield from "../form/ui.textfield.svelte";
+    import { UITitle } from "../various";
+
+    export let fieldname = "numbers_list";
+    export let value = {};
+    export let label = "named numbers list";
+
+    export let inputStarted = false;
+    export let placeholder = "new item";
+    export let readonly = false;
+    export let valid = true;
+    export let validated = false;
+    export let errors = false;
+    export let formErrors = false;
+
+    $: list = Object.keys(value).map((name) => {
+        return {
+            id: name,
+            title: name,
+            number: value[name],
+        };
+    });
+
+    $: allErrors = [].concat(
+        errors ? errors : [],
+        formErrors ? formErrors : []
+    );
+    $: showErrors = !(validated && valid) && inputStarted;
+    $: validationClasses =
+        valid === true || !inputStarted
+            ? UICommon.CLASS_OK
+            : UICommon.CLASS_ERR;
+
+    function remove(id) {
+        if (Object.hasOwn(value, id)) {
+            delete value[id];
+            value = value;
+            dispatch('change', {value: field: fieldname});
+        }
+    }
+
+    function add() {
+        const id = newVal.id.trim();
+        const number = parseInt(newVal.number);
+        if (id && id !== "" && !isNaN(number) && !Object.hasOwn(value, id)) {
+            value[id] = number;
+        }
+        dispatch('change', {value: field: fieldname});
+    }
+
+    const createNewVal = () => {
+        return {
+            id: placeholder,
+            number: 0,
+        };
+    };
+
+    let newVal = createNewVal();
+</script>
+
+<UITitle title={label} size={5} />
+{#each list as item (item.id)}
+    <UIColumns>
+        <UIColumn classes="is-6">
+            {item.title}
+        </UIColumn>
+        <UIColumn classes="is-4">
+            {item.number}
+        </UIColumn>
+        {#if !readonly}
+            <UIColumn classes="is-2">
+                <UIButton icon={"minus"} action={() => remove(item.id)} />
+            </UIColumn>
+        {/if}
+    </UIColumns>
+{/each}
+{#if !readonly}
+    <UIColumns>
+        <UIColumn classes="is-6">
+            <UITextfield bind:value={newVal.id} />
+        </UIColumn>
+        <UIColumn classes="is-4">
+            <UINumber bind:value={newVal.number} />
+        </UIColumn>
+        <UIColumn classes="is-2">
+            <UIButton icon={"plus"} action={() => add()} />
+        </UIColumn>
+    </UIColumns>
+{/if}
+<ErrorsList
+    bind:errors={allErrors}
+    bind:show={showErrors}
+    bind:classes={validationClasses}
+    id="input-field-helper-{fieldname}"
+/>

package/src/elements/list/index.js

@@ -4,6 +4,8 @@ import {
     UIEndlessList,
 } from "./endless";
 
+import FUINamedNumbersList from "./field.ui.named.numbers.list.svelte";
+
 import UIList from "./ui.list.svelte";
 import UIListItem from "./ui.list.item.svelte";
 import UIListEmptyPlaceholder from "./ui.list.empty.placeholder.svelte";
@@ -20,4 +22,5 @@ export {
     UIListItem,
     UIListEmptyPlaceholder,
     UIListSelect,
+    FUINamedNumbersList,
 };

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

@@ -163,6 +163,7 @@ class notForm extends notBase {
         this.on(`change.${master}`, (value) => {
             this.#execSlaveRule(rule, master, slaves, value);
         });
+        this.emit(`change.${master}`, this.getFormData()[master]);
     }
 
     #execSlaveRule(rule, master, slaves, value) {

package/src/frame/index.js

@@ -36,6 +36,7 @@ import {
     UIForm,
     notForm,
     notFormSet,
+    notFormRules,
     notFormUtils,
     notFormHelpers,
     notBreadcrumbs,
@@ -69,6 +70,7 @@ export {
     notFormSet,
     notFormUtils,
     notFormHelpers,
+    notFormRules,
     notInterface,
     notPath,
     notRecord,