not-bulma 1.2.58 → 1.2.60

package/package.json

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

package/src/elements/form/index.js

@@ -18,6 +18,7 @@ import UIRangeLogarithmic from "./ui.range.logarithmic.svelte";
 import UISelectFromModel from "./ui.select.from.model.svelte";
 import UISelect from "./ui.select.svelte";
 import UISwitch from "./ui.switch.svelte";
+import UISwitchList from "./ui.switch.list.svelte";
 import UITagSelect from "./ui.tag.select.svelte";
 import UITelephone from "./ui.telephone.svelte";
 import UITextarea from "./ui.textarea.svelte";
@@ -44,6 +45,7 @@ export {
     UISelectFromModel,
     UISelect,
     UISwitch,
+    UISwitchList,
     UITagSelect,
     UITelephone,
     UITextarea,

package/src/elements/form/ui.switch.list.svelte

@@ -0,0 +1,125 @@
+<script>
+    import { LOCALE } from "../../locale";
+    import "bulma-switch";
+    import UICommon from "../common.js";
+    import ErrorsList from "../various/ui.errors.list.svelte";
+    import UIBooleans from "../various/ui.booleans.svelte";
+    import { createEventDispatcher } from "svelte";
+    let dispatch = createEventDispatcher();
+
+    export let inputStarted = false;
+    export let value = [];
+    export let variants = [];
+    export let label = "";
+    export let hideLabel = false;
+    export let placeholder = "input some text here, please";
+    export let fieldname = "textfield";
+    export let icon = false;
+    export let required = true;
+    export let readonly = false;
+    export let multiple = true;
+    export let disabled = false;
+    export let valid = true;
+    export let styling = " is-rounded is-success ";
+    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 addId(varId) {
+        if (!value.includes(varId)) {
+            value.push(varId);
+            value = value;
+        }
+    }
+
+    function remId(varId) {
+        if (value.includes(varId)) {
+            value.splice(value.indexOf(varId), 1);
+            value = value;
+        }
+    }
+
+    function onBlur(ev) {
+        console.log("switch list element blur", ev);
+        const varId = ev.target.id.split("-variant-").at(-1);
+        console.log(varId);
+        ev.target.checked ? addId(varId) : remId(varId);
+        let data = {
+            field: fieldname,
+            value,
+        };
+        inputStarted = true;
+        dispatch("change", data);
+        return true;
+    }
+
+    function onInput(ev) {
+        console.log("switch list element input", ev);
+        const varId = ev.target.id.split("-variant-").at(-1);
+        console.log(varId);
+        ev.target.checked ? addId(varId) : remId(varId);
+        let data = {
+            field: fieldname,
+            value,
+        };
+        inputStarted = true;
+        dispatch("change", data);
+        return true;
+    }
+</script>
+
+<div class="control">
+    {#if readonly}
+        {#if value}
+            {variants
+                .filter((variant) => value.includes(variant.id))
+                .map((variant) => variant.title)
+                .join(", ")}
+        {/if}
+    {:else}
+        {#each variants as variant (variant.id)}
+            <div class="switch-list-item">
+                <input
+                    type="checkbox"
+                    class="switch {styling}"
+                    id="form-field-switch-{fieldname}-variant-{variant.id}"
+                    checked={value.includes(variant.id)}
+                    name={fieldname}
+                    {disabled}
+                    {required}
+                    {readonly}
+                    {invalid}
+                    on:blur={onBlur}
+                    on:input={onInput}
+                    aria-controls="input-field-helper-{fieldname}-variant-{variant.id}"
+                    aria-describedby="input-field-helper-{fieldname}-variant-{variant.id}"
+                />
+                <label
+                    class="label"
+                    for="form-field-switch-{fieldname}-variant-{variant.id}"
+                >
+                    {$LOCALE[variant.title]}
+                </label>
+            </div>
+        {/each}
+    {/if}
+</div>
+<ErrorsList
+    bind:errors={allErrors}
+    bind:show={showErrors}
+    bind:classes={validationClasses}
+    id="input-field-helper-{fieldname}"
+/>

package/src/elements/modal/ui.modal.svelte

@@ -19,6 +19,7 @@
     export let subtitle = "";
     export let classes = "";
     export let overlayClasses = "";
+    export let buttonsClasses = "";
 
     export let WAITING_TEXT = "Обработка";
 </script>
@@ -38,6 +39,7 @@
 
             {#if buttonsPosition === "top"}
                 <UIButtonsRow
+                    classes={buttonsClasses}
                     left={closeButton ? [closeButton] : []}
                     right={applyButton ? [applyButton] : []}
                 ></UIButtonsRow>
@@ -47,6 +49,7 @@
 
             {#if buttonsPosition === "bottom"}
                 <UIButtonsRow
+                    classes={buttonsClasses || "is-footer"}
                     left={closeButton ? [closeButton] : []}
                     right={applyButton ? [applyButton] : []}
                 ></UIButtonsRow>

package/src/scss/_forms.scss

@@ -1,7 +1,12 @@
-.form-container{
-  position:relative;
+.form-container {
+    position: relative;
 }
 
-.edit-form-error.notification.is-danger span:not(:first-child)::before{
-  content: ', '
+.edit-form-error.notification.is-danger span:not(:first-child)::before {
+    content: ", ";
+}
+
+.switch-list-item {
+    display: inline-block;
+    margin-right: 4rem;
 }

package/src/scss/_helpers.scss

@@ -19,3 +19,17 @@
 .is-no-flex-wrap {
     flex-wrap: nowrap !important;
 }
+
+.is-footer {
+    position: absolute;
+    bottom: 0px;
+    transform: translateY(-50%);
+    width: 100%;
+}
+
+.is-fullscreen {
+    height: 100%;
+    width: 100%;
+    margin: 0px;
+    border: none;
+}

package/src/scss/_overlay.scss

@@ -1,17 +1,16 @@
 .not-overlay {
-  position: fixed!important;
-  top: 0px;
-  left: 0px;
-  width: 100vw;
-  height: 100vh;
-  margin: 0px;
-  display: block;
-  opacity: 1;
-  overflow: hidden;
+    position: fixed !important;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    margin: 0px;
+    display: block;
+    opacity: 1;
+    overflow: hidden;
 }
 
-
 .stop-scrolling {
-  height: 100%;
-  overflow: hidden;
+    height: 100%;
+    overflow: hidden;
 }