not-bulma 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "not-bulma",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "not-* family UI components on Bulma CSS Framework",
   "main": "src/index.js",
   "svelte": "src/index.js",
@@ -56,6 +56,7 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "bulma": "^0.9.4",
+    "bulma-slider": "*",
     "bulma-pageloader": "*",
     "bulma-switch": "^2.0.4",
     "core-js": "^3.27.2",

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

@@ -1,97 +1,106 @@
 <script>
+    import "bulma-slider/src/sass/index.sass";
 
-  import UICommon from '../common.js';
-  import ErrorsList from '../various/ui.errors.list.svelte';
-  import {createEventDispatcher} from 'svelte';
-  let dispatch = createEventDispatcher();
+    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 = 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;
+    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;
+    $: 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;
-  }
+    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>
+
+<div class="control {iconClasses}">
+    {#if readonly}
+        <p>{value}</p>
     {:else}
-    <input id="form-field-range-{fieldname}"
-      class="input {validationClasses}"
-      type="range" name="{fieldname}"
-      {min} {max} {step}
-      list="form-field-range-{fieldname}-tickmarks"
-      {invalid}
-      {disabled}
-      {required} {readonly}
-      placeholder="{placeholder}"
-      bind:value={value} autocomplete="{fieldname}"
-      aria-controls="input-field-helper-{fieldname}"
-      on:change={onBlur} on:input={onInput}
-      aria-describedby="input-field-helper-{fieldname}" />
-      {#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}"></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
+            id="form-field-range-{fieldname}"
+            class="input big-number slider has-output is-fullwidth is-success {validationClasses}"
+            type="range"
+            name={fieldname}
+            {min}
+            {max}
+            {step}
+            list="form-field-range-{fieldname}-tickmarks"
+            {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}"
+        />
+        <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
+</div>
+<ErrorsList
     bind:errors={allErrors}
     bind:show={showErrors}
     bind:classes={validationClasses}
     id="input-field-helper-{fieldname}"
-    />
+/>

package/src/frame/common.js

@@ -467,7 +467,7 @@ class notCommon {
     }
 
     static strLengthCap(str, MAX_TITLE_LENGTH = 50, POST_FIX = "...") {
-        if (str.length > MAX_TITLE_LENGTH) {
+        if (typeof str === "string" && str.length > MAX_TITLE_LENGTH) {
             return str.substr(0, MAX_TITLE_LENGTH) + POST_FIX;
         } else {
             return str;

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

@@ -12,7 +12,7 @@ class notSideMenu extends Menu {
         section: "any",
         sectionTitle: "Меню",
         priority: 0,
-        open: false,
+        open: true,
     };
 
     static options = {
@@ -22,9 +22,11 @@ class notSideMenu extends Menu {
         targetSelector: `#${TYPE}-menu`,
         toggleSelector: `.${TYPE}-menu-toggle`,
         root: "/",
-        open: false,
+        open: true,
         navigate: (urls) => {
-            this.hide();
+            if (this.isTouch()) {
+                this.hide();
+            }
             if (!this.isDirectNavigation() && this.app) {
                 let func = this.app.getWorking("router");
                 if (func) {
@@ -109,10 +111,12 @@ class notSideMenu extends Menu {
         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();
+        if (this.isTouch()) {
+            if (this.getOptions().open) {
+                this.show();
+            } else {
+                this.hide();
+            }
         }
     }
 
@@ -192,7 +196,11 @@ class notSideMenu extends Menu {
 
     static isOpen() {
         if (this.aside) {
-            return this.aside.classList.contains("is-active");
+            if (this.isTouch()) {
+                return this.aside.classList.contains("is-active");
+            } else {
+                return !this.aside.classList.contains("is-closed");
+            }
         } else {
             return true;
         }