not-bulma 1.0.52 → 1.0.54

package/package.json

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

package/src/elements/form/index.js

@@ -14,6 +14,7 @@ import UITelephone from "./ui.telephone.svelte";
 import UITextarea from "./ui.textarea.svelte";
 import UITextfield from "./ui.textfield.svelte";
 import UIRange from "./ui.range.svelte";
+import UIRangeLogarithmic from "./ui.range.logarithmic.svelte";
 import UINumber from "./ui.number.svelte";
 
 export {
@@ -33,5 +34,6 @@ export {
     UITextarea,
     UITextfield,
     UIRange,
+    UIRangeLogarithmic,
     UINumber,
 };

package/src/elements/form/ui.range.logarithmic.svelte

@@ -0,0 +1,138 @@
+<script>
+    const MAX = Number.MAX_SAFE_INTEGER;
+    import "bulma-slider/src/sass/index.sass";
+
+    import UICommon from "not-bulma/src/elements/common.js";
+    import ErrorsList from "not-bulma/src/elements/various/ui.errors.list.svelte";
+    import { createEventDispatcher, onMount } from "svelte";
+    let dispatch = createEventDispatcher();
+
+    export let inputStarted = false;
+    export let value = 10;
+    export let min = 0;
+    export let max = 100;
+    export let step = 1;
+    export let tickmarks = false;
+    export let placeholder = "range placeholder";
+    export let fieldname = "range";
+    export let icon = false;
+    export let required = true;
+    export let disabled = false;
+    export let readonly = false;
+    export let valid = true;
+    export let validated = false;
+    export let errors = false;
+    export let formErrors = false;
+    export let formLevelError = false;
+
+    $: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
+    $: allErrors = [].concat(
+        errors ? errors : [],
+        formErrors ? formErrors : []
+    );
+    $: showErrors = !(validated && valid) && inputStarted;
+    $: invalid = valid === false || formLevelError;
+    $: validationClasses =
+        valid === true || !inputStarted
+            ? UICommon.CLASS_OK
+            : UICommon.CLASS_ERR;
+
+    function onBlur(ev) {
+        const val = getLogarithmicValue(ev.currentTarget.value);
+        value = val;
+        let data = {
+            field: fieldname,
+            value,
+        };
+        inputStarted = true;
+        dispatch("change", data);
+        return true;
+    }
+
+    function onInput(ev) {
+        const val = getLogarithmicValue(
+            Math.round(parseInt(ev.currentTarget.value))
+        );
+        value = val;
+        let data = {
+            field: fieldname,
+            value,
+        };
+        inputStarted = true;
+        dispatch("change", data);
+        return true;
+    }
+
+    let posMin = 0,
+        posMax = 100,
+        lMin = 0,
+        lMax = 100,
+        lScale = 10,
+        lStep = 0.1,
+        posValue = 1;
+
+    onMount(() => {
+        lMin = Math.log(min || 1);
+        lMax = Math.log(max || MAX);
+        lScale = (lMax - lMin) / (posMax - posMin);
+        posValue = getLogarithmicPosition(parseInt(value));
+    });
+
+    function getLogarithmicValue(pos) {
+        pos = parseInt(pos);
+        return Math.round(Math.exp((pos - posMin) * lScale + lMin));
+    }
+
+    function getLogarithmicPosition(val) {
+        val = parseInt(val);
+        return min + (Math.log(val) - lMin) / lScale;
+    }
+</script>
+
+<div class="control {iconClasses}">
+    {#if readonly}
+        <p>{value}</p>
+    {:else}
+        <input
+            id="form-field-range-{fieldname}"
+            class="input big-number slider has-output is-fullwidth is-success {validationClasses}"
+            type="range"
+            name={fieldname}
+            min={posMin}
+            max={posMax}
+            step={lStep}
+            list="form-field-range-{fieldname}-tickmarks"
+            {invalid}
+            {disabled}
+            {required}
+            {readonly}
+            {placeholder}
+            bind:value={posValue}
+            autocomplete={fieldname}
+            aria-controls="input-field-helper-{fieldname}"
+            on:change={onBlur}
+            on:input={onInput}
+            aria-describedby="input-field-helper-{fieldname}"
+        />
+        <output for="form-field-range-{fieldname}">{value}</output>
+        {#if Array.isArray(tickmarks) && tickmarks.length}
+            <datalist id="form-field-range-{fieldname}-tickmarks">
+                {#each tickmarks as tickmark}
+                    <option value={tickmark.value} label={tickmark.label} />
+                {/each}
+            </datalist>
+        {/if}
+
+        {#if icon}
+            <span class="icon is-small is-left"
+                ><i class="fas fa-{icon}" /></span
+            >
+        {/if}
+    {/if}
+</div>
+<ErrorsList
+    bind:errors={allErrors}
+    bind:show={showErrors}
+    bind:classes={validationClasses}
+    id="input-field-helper-{fieldname}"
+/>

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

@@ -8,6 +8,7 @@ import notBase from "../../base";
 import UICommon from "../../../elements/common.js";
 import FormHelpers from "./form.helpers.js";
 import UIFormComponent from "./form.svelte";
+import notFormRules from "./form.rules.js";
 
 import { DEFAULT_STATUS_SUCCESS, DEFAULT_STATUS_ERROR } from "../../const";
 
@@ -141,6 +142,34 @@ class notForm extends notBase {
         this.#form.$on("submit", (ev) => this.submit(ev.detail));
         this.#form.$on("reject", () => this.reject());
         this.#form.$on("error", ({ detail }) => this.emit("error", detail));
+        this.#bindMasterSlaveEvents();
+    }
+
+    #bindMasterSlaveEvents() {
+        const masters = this.getOptions("masters", false);
+        if (!masters) {
+            return;
+        }
+        for (let master in masters) {
+            const rules = masters[master];
+            for (let ruleName in rules) {
+                const ruleSlaves = rules[ruleName];
+                this.#addMasterSlaveEvents(ruleName, master, ruleSlaves);
+            }
+        }
+    }
+
+    #addMasterSlaveEvents(rule, master, slaves = []) {
+        this.on(`change.${master}`, (value) => {
+            this.#execSlaveRule(rule, slaves, value);
+        });
+    }
+
+    #execSlaveRule(rule, slaves, value) {
+        const cmd = notFormRules.exec(rule, value);
+        slaves.forEach((slaveField) => {
+            this.updateField(slaveField, cmd);
+        });
     }
 
     async validateForm() {

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

@@ -0,0 +1,45 @@
+const DEFAULT_RULES = {
+    notReadonly(v) {
+        return {
+            readonly: !v,
+        };
+    },
+    readonly(v) {
+        return {
+            readonly: v,
+        };
+    },
+    enable(v) {
+        return {
+            disabled: !v,
+        };
+    },
+    disable(v) {
+        return {
+            disabled: v,
+        };
+    },
+};
+
+export default class notFormRules {
+    static #RULES = { ...DEFAULT_RULES };
+
+    static add(name, func) {
+        if (!Object.hasOwn(this.#RULES, name)) {
+            this.#RULES[name] = func;
+        }
+    }
+
+    static remove(name) {
+        if (
+            Object.hasOwn(this.#RULES, name) &&
+            !Object.keys(DEFAULT_RULES).includes(name)
+        ) {
+            delete this.#RULES[name];
+        }
+    }
+
+    static exec(name, value) {
+        return this.#RULES[name](value);
+    }
+}

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

@@ -1,7 +1,15 @@
 import notFormUtils from "./utils";
 import notFormHelpers from "./form.helpers";
 import notForm from "./form";
+import notFormRules from "./form.rules";
 import notFormSet from "./form.set";
 import UIForm from "./form.svelte";
 
-export { UIForm, notForm, notFormSet, notFormUtils, notFormHelpers };
+export {
+    UIForm,
+    notForm,
+    notFormRules,
+    notFormSet,
+    notFormUtils,
+    notFormHelpers,
+};

package/src/frame/components/index.js

@@ -4,6 +4,7 @@ import notActionUI from "./action/action.ui.js";
 
 import {
     notForm,
+    notFormRules,
     notFormSet,
     notFormUtils,
     notFormHelpers,
@@ -19,6 +20,7 @@ export {
     notTable,
     UIForm,
     notForm,
+    notFormRules,
     notFormSet,
     notFormUtils,
     notFormHelpers,