not-bulma 1.0.40 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-bulma",
-  "version": "1.0.40",
+  "version": "1.0.43",
   "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 UINumber from "./ui.number.svelte";
 
 export {
     UIAutocomplete,
@@ -32,4 +33,5 @@ export {
     UITextarea,
     UITextfield,
     UIRange,
+    UINumber,
 };

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

@@ -1,82 +1,100 @@
 <script>
+    import UICommon from "../common.js";
+    import ErrorsList from "../various/ui.errors.list.svelte";
 
-  import UICommon from '../common.js';
-  import ErrorsList from '../various/ui.errors.list.svelte';
+    import { createEventDispatcher } from "svelte";
+    let dispatch = createEventDispatcher();
 
-  import {createEventDispatcher} from 'svelte';
-  let dispatch = createEventDispatcher();
+    export let inputStarted = false;
 
-  export let inputStarted = false;
+    export let value = new Date();
+    export let placeholder = "Date and time of event";
+    export let fieldname = "datetime";
+    export let icon = false;
+    export let required = true;
+    export let readonly = false;
+    export let valid = true;
+    export let validated = false;
+    export let errors = false;
+    export let formErrors = false;
+    export let formLevelError = false;
 
-  export let value = '';
-  export let placeholder = 'Date and time of event';
-  export let fieldname = 'datetime';
-  export let icon = false;
-  export let required = true;
-  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 : []
+    );
+    $: invalid = valid === false || formLevelError;
+    $: showErrors = !(validated && valid) && inputStarted;
+    $: validationClasses =
+        valid === true || !inputStarted
+            ? UICommon.CLASS_OK
+            : UICommon.CLASS_ERR;
 
-  $: iconClasses = (icon? ' has-icons-left ':'') + ' has-icons-right ';
-  $: allErrors = [].concat(errors?errors:[], formErrors?formErrors:[]);
-  $: invalid = ((valid===false) || (formLevelError));
-  $: showErrors = (!(validated && valid) && (inputStarted));
-  $: validationClasses = (valid===true || !inputStarted)?UICommon.CLASS_OK:UICommon.CLASS_ERR;
-
-  function onBlur(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;
-  }
+    function onBlur(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}">
-    {#if readonly }
-    <p><time datetime="{value}">{UICommon.tryFormatLocaleDateTime(value)}</time></p>
+<div class="control {iconClasses}">
+    {#if readonly}
+        <p>
+            <time datetime={value}
+                >{UICommon.tryFormatLocaleDateTime(value)}</time
+            >
+        </p>
     {:else}
-    <input class="input {validationClasses}"
-    id="form-field-date-{fieldname}"
-    type="date" name="{fieldname}"
-    invalid="{invalid}" required={required}
-    placeholder="{placeholder}" bind:value={value} {readonly}
-     autocomplete="{fieldname}" aria-controls="input-field-helper-{fieldname}"
-      on:change={onBlur} on:input={onInput}
-      aria-describedby="input-field-helper-{fieldname}" />
-    {#if icon }
-    <span class="icon is-small is-left"><i class="fas fa-{icon}"></i></span>
-    {/if}
-    {#if validated === true }
-    <span class="icon is-small is-right">
-      {#if valid === true }
-      <i class="fas fa-check"></i>
-      {:else if (valid === false) }
-      <i class="fas fa-exclamation-triangle"></i>
-      {/if}
-    </span>
-    {/if}
+        <input
+            class="input {validationClasses}"
+            id="form-field-date-{fieldname}"
+            type="date"
+            name={fieldname}
+            {invalid}
+            {required}
+            {placeholder}
+            bind:value
+            {readonly}
+            autocomplete={fieldname}
+            aria-controls="input-field-helper-{fieldname}"
+            on:change={onBlur}
+            on:input={onInput}
+            aria-describedby="input-field-helper-{fieldname}"
+        />
+        {#if icon}
+            <span class="icon is-small is-left"
+                ><i class="fas fa-{icon}" /></span
+            >
+        {/if}
+        {#if validated === true}
+            <span class="icon is-small is-right">
+                {#if valid === true}
+                    <i class="fas fa-check" />
+                {:else if valid === false}
+                    <i class="fas fa-exclamation-triangle" />
+                {/if}
+            </span>
+        {/if}
     {/if}
-  </div>
-  <ErrorsList
+</div>
+<ErrorsList
     bind:errors={allErrors}
     bind:show={showErrors}
     bind:classes={validationClasses}
     id="input-field-helper-{fieldname}"
-    />
+/>

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

@@ -0,0 +1,102 @@
+<script>
+    import UICommon from "../common.js";
+    import ErrorsList from "../various/ui.errors.list.svelte";
+    import { createEventDispatcher } from "svelte";
+    let dispatch = createEventDispatcher();
+
+    export let inputStarted = false;
+    export let value = 0;
+    export let placeholder = "0.0";
+    export let min = 0;
+    export let max = 100;
+    export let step = 1;
+    export let fieldname = "number";
+    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*/) {
+        let data = {
+            field: fieldname,
+            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}">
+    {#if readonly}
+        <p>{value}</p>
+    {:else}
+        <input
+            id="form-field-textfield-{fieldname}"
+            class="input {validationClasses}"
+            type="number"
+            {min}
+            {max}
+            {step}
+            name={fieldname}
+            {invalid}
+            {disabled}
+            {required}
+            {readonly}
+            {placeholder}
+            bind:value
+            autocomplete={fieldname}
+            aria-controls="input-field-helper-{fieldname}"
+            on:change={onBlur}
+            on:input={onInput}
+            aria-describedby="input-field-helper-{fieldname}"
+        />
+        {#if icon}
+            <span class="icon is-small is-left"
+                ><i class="fas fa-{icon}" /></span
+            >
+        {/if}
+        {#if validated === true}
+            <span class="icon is-small is-right">
+                {#if valid === true}
+                    <i class="fas fa-check" />
+                {:else if valid === false}
+                    <i class="fas fa-exclamation-triangle" />
+                {/if}
+            </span>
+        {/if}
+    {/if}
+</div>
+<ErrorsList
+    bind:errors={allErrors}
+    bind:show={showErrors}
+    bind:classes={validationClasses}
+    id="input-field-helper-{fieldname}"
+/>

package/src/frame/components/navigation/side/index.js

@@ -1,185 +1,189 @@
-import Menu from '../menu.js';
-import UISideMenu from './ui.side.menu.svelte';
+import Menu from "../menu.js";
+import UISideMenu from "./ui.side.menu.svelte";
 
-const TYPE = 'side';
+const TYPE = "side";
 
 class notSideMenu extends Menu {
-  static nav;
-  static main;
-  static aside;
-
-  static DEFAULT = {
-    section: 'any',
-    sectionTitle: 'Меню',
-    priority: 0,
-    open: false
-  };
-
-  static options = {
-    type: TYPE,
-    items: [],
-    sections: [],
-    targetSelector: `#${TYPE}-menu`,
-    toggleSelector: `.${TYPE}-menu-toggle`,
-    root: '/',
-    open: false,
-    navigate: (urls) => {
-      this.hide();
-      if (!(this.isDirectNavigation()) && this.app) {
-        let func = this.app.getWorking('router');
-        if (func) {
-          return func.navigate(urls.short);
+    static nav;
+    static main;
+    static aside;
+
+    static DEFAULT = {
+        section: "any",
+        sectionTitle: "Меню",
+        priority: 0,
+        open: false,
+    };
+
+    static options = {
+        type: TYPE,
+        items: [],
+        sections: [],
+        targetSelector: `#${TYPE}-menu`,
+        toggleSelector: `.${TYPE}-menu-toggle`,
+        root: "/",
+        open: false,
+        navigate: (urls) => {
+            this.hide();
+            if (!this.isDirectNavigation() && this.app) {
+                let func = this.app.getWorking("router");
+                if (func) {
+                    return func.navigate(urls.short);
+                }
+            }
+            document.location.assign(urls.full);
+        },
+    };
+
+    static render(app) {
+        if (app) {
+            this.setApp(app);
+        }
+        this.prepareData();
+        if (!this.menu) {
+            this.createUI();
         }
-      }
-      document.location.assign(urls.full);
     }
-  };
 
-  static render(app) {
-    if (app) {
-      this.setApp(app);
+    static update() {
+        if (this.menu) {
+            this.menu.$destroy();
+            this.createUI();
+        }
     }
-    this.prepareData();
-    if (!this.menu) {
-      this.createUI();
+
+    static createUI() {
+        let target = document.querySelector(this.getOptions().targetSelector);
+        if (!target) {
+            return;
+        }
+        this.menu = new UISideMenu({
+            target,
+            props: {
+                items: this.items,
+                sections: this.sections,
+                root: this.getOptions().root,
+                navigate: this.getOptions().navigate,
+            },
+        });
+        this.initSizeResponse();
+        this.interval = setInterval(this.updateMenuActiveItem.bind(this), 200);
+        this.bindToggle();
     }
-  }
 
-  static update(){
-    if (this.menu) {
-      this.menu.$destroy();
-      this.createUI();
+    static itemIsActive(itemURL) {
+        return (this.location + "/").indexOf(itemURL + "/") > -1;
     }
-  }
-
-  static createUI(){
-    let target = document.querySelector(this.getOptions().targetSelector);
-    if(!target){return;}
-    this.menu = new UISideMenu({
-      target,
-      props: {
-        items: this.items,
-        sections: this.sections,
-        root: this.getOptions().root,
-        navigate: this.getOptions().navigate
-      }
-    });
-    this.initSizeResponse();
-    this.interval = setInterval(this.updateMenuActiveItem.bind(this), 200);
-    this.bindToggle();
-  }
-
-  static itemIsActive(itemURL) {
-    return ((this.location + '/').indexOf(itemURL + '/') > -1);
-  }
-
-  static updateMenu() {
-    Array.from(document.querySelectorAll(this.getOptions().targetSelector + ' a')).forEach((item) => {
-      if (this.itemIsActive(item.getAttribute('href'))) {
-        item.classList.add('is-active');
-      } else {
-        item.classList.remove('is-active');
-      }
-    });
-  }
-
-  static updateMenuActiveItem() {
-    let url = window.location.toString(),
-      lastLocation = this.location;
-    if (lastLocation) {
-      if (url !== lastLocation) {
-        this.location = url;
-        this.updateMenu();
-      }
-    } else {
-      this.location = url;
-      this.updateMenu();
+
+    static updateMenu() {
+        Array.from(
+            document.querySelectorAll(this.getOptions().targetSelector + " a")
+        ).forEach((item) => {
+            if (this.itemIsActive(item.getAttribute("href"))) {
+                item.classList.add("is-active");
+            } else {
+                item.classList.remove("is-active");
+            }
+        });
     }
-  }
-
-  static initSizeResponse() {
-    this.nav = document.querySelector('nav.navbar');
-    this.aside = document.querySelector('aside');
-    this.main = document.querySelector('main');
-    this.resizeAsideAndMain(this.aside, this.main, this.nav);
-    this.resizeMain(this.main, this.aside);
-    window.addEventListener('resize', this.resizeMain.bind(this));
-    if(this.getOptions().open){
-      this.show();
-    }else{
-      this.hide();
+
+    static updateMenuActiveItem() {
+        let url = window.location.toString(),
+            lastLocation = this.location;
+        if (lastLocation) {
+            if (url !== lastLocation) {
+                this.location = url;
+                this.updateMenu();
+            }
+        } else {
+            this.location = url;
+            this.updateMenu();
+        }
     }
-  }
-
-  static resizeMain() {
-    if(this.isTouch()){
-      if(this.aside.classList.contains('is-active')){
-        this.main.style.display = 'none';
-      }else{
-        this.main.style.display = 'block';
-        this.main.style.marginLeft = '0px';
-      }
-    }else{
-      let rect = this.aside.getBoundingClientRect();
-      this.main.style.display = 'block';
-      if (this.main.style.height === '0px') {
-        this.main.style.height = 'auto';
-      }
-      this.main.style.marginLeft = (rect.width + rect.left) + 'px';
+
+    static initSizeResponse() {
+        this.nav = document.querySelector("nav.navbar");
+        this.aside = document.querySelector("aside");
+        this.main = document.querySelector("main");
+        this.resizeAsideAndMain(this.aside, this.main, this.nav);
+        this.resizeMain(this.main, this.aside);
+        window.addEventListener("resize", this.resizeMain.bind(this));
+        if (this.getOptions().open) {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+
+    static resizeMain() {
+        if (this.isTouch()) {
+            if (this.aside.classList.contains("is-active")) {
+                this.main.style.display = "none";
+            } else {
+                this.main.style.display = "block";
+                this.main.style.marginLeft = "0px";
+            }
+        } else {
+            let rect = this.aside.getBoundingClientRect();
+            this.main.style.display = "block";
+            if (this.main.style.height === "0px") {
+                this.main.style.height = "auto";
+            }
+            this.main.style.marginLeft = rect.width + rect.left + "px";
+        }
     }
-  }
 
-  static resizeAside() {
-    if (this.aside.style.display !== 'none') {
-      let rect = this.nav.getBoundingClientRect();
-      this.aside.style.height = (window.innerHeight - rect.height) + 'px';
-      this.aside.style.marginTop = (rect.height) + 'px';
+    static resizeAside() {
+        if (this.aside.style.display !== "none") {
+            let rect = this.nav.getBoundingClientRect();
+            this.aside.style.height = window.innerHeight - rect.height + "px";
+            this.aside.style.marginTop = rect.height + "px";
+        }
     }
-  }
-
-  static resizeAsideAndMain() {
-    let rect = this.nav.getBoundingClientRect();
-    this.aside.style.height = (window.innerHeight - rect.height) + 'px';
-    //this.aside.style.paddingTop = (rect.height) + 'px';
-    this.main.style.marginTop = (rect.height) + 'px';
-  }
-
-  static bindToggle() {
-    let els = document.querySelectorAll(this.getOptions().toggleSelector);
-    Array.from(els).forEach((el) => {
-      el.removeEventListener('click', this.toggle.bind(this));
-      el.addEventListener('click', this.toggle.bind(this));
-    });
-  }
-
-  static toggle(e) {
-    e && e.preventDefault();
-    this.aside.classList.toggle('is-active');
-    this.resizeMain();
-    return false;
-  }
-
-  static hide(e) {
-    e && e.preventDefault();
-    this.aside.classList.remove('is-active');
-    this.resizeMain();
-    return false;
-  }
-
-  static show(e) {
-    e && e.preventDefault();
-    this.classList.add('is-active');
-    this.resizeMain();
-    return false;
-  }
-
-  static isOpen(){
-    if(this.aside){
-      return this.aside.classList.contains('is-active');
-    }else{
-      return true;
+
+    static resizeAsideAndMain() {
+        let rect = this.nav.getBoundingClientRect();
+        this.aside.style.height = window.innerHeight - rect.height + "px";
+        //this.aside.style.paddingTop = (rect.height) + 'px';
+        //this.main.style.marginTop = (rect.height) + 'px';
+    }
+
+    static bindToggle() {
+        let els = document.querySelectorAll(this.getOptions().toggleSelector);
+        Array.from(els).forEach((el) => {
+            el.removeEventListener("click", this.toggle.bind(this));
+            el.addEventListener("click", this.toggle.bind(this));
+        });
+    }
+
+    static toggle(e) {
+        e && e.preventDefault();
+        this.aside.classList.toggle("is-active");
+        this.resizeMain();
+        return false;
+    }
+
+    static hide(e) {
+        e && e.preventDefault();
+        this.aside.classList.remove("is-active");
+        this.resizeMain();
+        return false;
+    }
+
+    static show(e) {
+        e && e.preventDefault();
+        this.classList.add("is-active");
+        this.resizeMain();
+        return false;
+    }
+
+    static isOpen() {
+        if (this.aside) {
+            return this.aside.classList.contains("is-active");
+        } else {
+            return true;
+        }
     }
-  }
 }
 
 export default notSideMenu;