not-bulma 1.2.72 → 1.2.74

package/package.json

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

package/src/elements/form/index.js

@@ -7,6 +7,7 @@ import UIDate from "./ui.date.svelte";
 import UIDatetimeInTZ from "./ui.datetime.in.tz.svelte";
 import UIEmail from "./ui.email.svelte";
 import UIHidden from "./ui.hidden.svelte";
+import UIJSONArea from "./ui.json.area.svelte";
 import UILabel from "./ui.label.svelte";
 import UIListOfModels from "./ui.list.of.models.svelte";
 import UINamedNumbersList from "./ui.named.numbers.list.svelte";
@@ -15,8 +16,8 @@ import UIPassword from "./ui.password.svelte";
 import UIRadioButtons from "./ui.radio.buttons.svelte";
 import UIRange from "./ui.range.svelte";
 import UIRangeLogarithmic from "./ui.range.logarithmic.svelte";
-import UISelectFromModel from "./ui.select.from.model.svelte";
 import UISelect from "./ui.select.svelte";
+import UISelectFromModel from "./ui.select.from.model.svelte";
 import UISwitch from "./ui.switch.svelte";
 import UISwitchList from "./ui.switch.list.svelte";
 import UITagSelect from "./ui.tag.select.svelte";
@@ -34,6 +35,7 @@ export {
     UIDatetimeInTZ,
     UIEmail,
     UIHidden,
+    UIJSONArea,
     UILabel,
     UIListOfModels,
     UINamedNumbersList,
@@ -42,8 +44,8 @@ export {
     UIRadioButtons,
     UIRange,
     UIRangeLogarithmic,
-    UISelectFromModel,
     UISelect,
+    UISelectFromModel,
     UISwitch,
     UISwitchList,
     UITagSelect,

package/src/elements/form/ui.json.area.svelte

@@ -0,0 +1,67 @@
+<script>
+    import UITextarea from "./ui.textarea.svelte";
+
+    import { createEventDispatcher, onMount } from "svelte";
+    let dispatch = createEventDispatcher();
+
+    export let inputStarted = false;
+    export let value = {};
+    export let placeholder = "";
+    export let fieldname = "jsonarea";
+    export let icon = false;
+    export let rows = 10;
+    export let required = true;
+    export let readonly = false;
+    export let disabled = false;
+    export let valid = true;
+    export let validated = false;
+    export let errors = false;
+    export let formErrors = false;
+    export let formLevelError = false;
+
+    let _value = "{}";
+
+    onMount(() => {
+        _value = JSON.stringify(value, null, 4);
+    });
+
+    function change() {
+        inputStarted = true;
+        dispatch("change", {
+            field: fieldname,
+            value,
+        });
+    }
+
+    function validateValueAndChange(val) {
+        try {
+            value = JSON.parse(val);
+            valid = true;
+            errors = false;
+            change();
+        } catch (error) {
+            valid = false;
+            errors = [error.message];
+        }
+    }
+
+    function onChange(ev) {
+        validateValueAndChange(ev.detail.value);
+        return true;
+    }
+</script>
+
+<UITextarea
+    bind:inputStarted
+    bind:value={_value}
+    on:change={onChange}
+    {placeholder}
+    {icon}
+    {rows}
+    {required}
+    {readonly}
+    {disabled}
+    {validated}
+    {formErrors}
+    {formLevelError}
+/>

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

@@ -5,7 +5,7 @@
     import UICommon from "../common.js";
     import ErrorsList from "../various/ui.errors.list.svelte";
     import { createEventDispatcher } from "svelte";
-    let dispatch = createEventDispatcher();
+    const dispatch = createEventDispatcher();
 
     export let inputStarted = false;
     export let value = 10;

package/src/elements/form/ui.textarea.svelte

@@ -45,15 +45,15 @@
         return true;
     }
 
-    /*function onInput(ev){
-    let data = {
-      field: fieldname,
-      value: ev.currentTarget.value
-    };
-    inputStarted = true;
-    dispatch('change', data);
-    return true;
-  }*/
+    function onInput(ev) {
+        let data = {
+            field: fieldname,
+            value: ev.currentTarget.value,
+        };
+        inputStarted = true;
+        dispatch("change", data);
+        return true;
+    }
 </script>
 
 <div class="control {iconClasses}">

package/src/elements/various/ui.booleans.svelte

@@ -1,12 +1,23 @@
 <script>
+    import { onMount } from "svelte";
     import UIBoolean from "./ui.boolean.svelte";
 
     export let values = [];
     export let inverted = false;
     export let componentConstructor = UIBoolean;
+
+    let _values = [];
+
+    onMount(() => {
+        if (typeof values === "boolean") {
+            _values = [values];
+        } else if (Array.isArray(values)) {
+            _values = [...values];
+        }
+    });
 </script>
 
-{#each values as item}
+{#each _values as item}
     <svelte:component
         this={componentConstructor}
         {...item}