not-bulma 1.0.21 → 1.0.24

package/package.json

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

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

@@ -58,6 +58,9 @@
   <UITextfield value={value?value.title:''} {fieldname} {placeholder} {icon} />
 {:else}
 <div class="control">
+  {#if readonly }
+    <p>{value}</p>
+    {:else}
   <AutoComplete
     {showClear}
     {disabled}
@@ -73,6 +76,7 @@
     {maxItemsToShowInList}
     bind:selectedItem={value}
     />
+  {/if}
 </div>
 <ErrorsList
   bind:errors={allErrors}

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

@@ -51,9 +51,13 @@ $: showErrors = (!(validated && valid) && (inputStarted));
 
 <div class="control {iconClasses}">
   <label class="checkbox" disabled={disabled} for="form-field-checkbox-{fieldname}">
+    {#if readonly }
+      <UIBooleans LC_TRUE={label} LC_FALSE={label} values={[{value}]} />
+    {:else}
     <input type="checkbox" id="form-field-checkbox-{fieldname}" bind:checked={value} placeholder="{placeholder}" name="{fieldname}" required={required} {readonly} invalid="{invalid}" on:change={onBlur} on:input={onInput} aria-controls="input-field-helper-{fieldname}"
       aria-describedby="input-field-helper-{fieldname}" disabled={disabled}>
-    {$LOCALE[label]}
+      {$LOCALE[label]}
+    {/if}
   </label>
 </div>
 <ErrorsList

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

@@ -49,6 +49,9 @@
 </script>
 
   <div class="control {iconClasses}">
+    {#if readonly }
+    <p>{value}</p>
+    {:else}
     <input class="input {validationClasses}"
     id="form-field-date-{fieldname}"
     type="date" name="{fieldname}"
@@ -69,6 +72,7 @@
       {/if}
     </span>
     {/if}
+    {/if}
   </div>
   <ErrorsList
     bind:errors={allErrors}

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

@@ -50,6 +50,9 @@
 
 
   <div class="control {iconClasses}">
+    {#if readonly }
+    <p>{value}</p>
+    {:else}
     <input class="input {validationClasses}"
       id="form-field-email-{fieldname}"
       type="email" name="{fieldname}"
@@ -62,17 +65,18 @@
       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 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}
-    </span>
     {/if}
   </div>
   <ErrorsList

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

@@ -1,7 +1,8 @@
 <script>
   import {LOCALE} from '../../locale';
-    import ErrorsList from '../various/ui.errors.list.svelte';
+  import ErrorsList from '../various/ui.errors.list.svelte';
   import UICommon from '../common.js';
+
   const CLEAR_MACRO = '__CLEAR__';
 
   import {createEventDispatcher} from 'svelte';
@@ -29,6 +30,17 @@
   $: invalid = ((valid===false) || (formLevelError));
   $: validationClasses = (valid===true || !inputStarted)?UICommon.CLASS_OK:UICommon.CLASS_ERR;
   $: multipleClass = multiple?' is-multiple ':'';
+  $: selectedVariants = Array.isArray(variants)?variants.filter(filterSelectedVariants):[];
+
+  function filterSelectedVariants(variant){
+    if(Array.isArray(value) && multiple){
+      return value.indexOf(variant.id) > -1;
+    }else if(value){
+      return value == variant.id;
+    }else{
+      return false;
+    }
+  }
 
   function onBlur(ev){
     let data = {
@@ -75,6 +87,11 @@
 </script>
 
   <div class="control {iconClasses}">
+    {#if readonly }
+      {#each selectedVariants as selectedVariant }
+      <span class="mr-2">{selectedVariant.title}</span>
+      {/each}
+    {:else}
     <div class="select {validationClasses} {multipleClass}">
       <select
         id="form-field-select-{fieldname}"
@@ -111,6 +128,7 @@
       {/if}
     </span>
     {/if}
+    {/if}
   </div>
   <ErrorsList
     bind:errors={allErrors}

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

@@ -3,6 +3,7 @@
   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();
 
@@ -51,6 +52,14 @@ function onInput(ev){
 </script>
 
   <div class="control">
+    {#if readonly }
+      {#if value }
+      <UIBooleans values={[{value: false}]} />
+      {:else}
+      <UIBooleans values={[{value: true}]} />
+      {/if}
+    {:else}
+      <UIBooleans values={[{value: false}]} />
       <input type="checkbox"
         class="switch {styling}"
         id="form-field-switch-{fieldname}"
@@ -63,7 +72,8 @@ function onInput(ev){
         aria-controls="input-field-helper-{fieldname}"
         aria-describedby="input-field-helper-{fieldname}"
          />
-        <label class="label" for="form-field-switch-{fieldname}">{$LOCALE[label]}</label>
+        <label class="label" for="form-field-switch-{fieldname}"><UIBooleans values={[{value: true }]} /></label>
+    {/if}
   </div>
   <ErrorsList
     bind:errors={allErrors}

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

@@ -53,6 +53,9 @@ function onInput(ev){
 </script>
 
   <div class="control {iconClasses}">
+    {#if readonly }
+    <p>{value}</p>
+    {:else}
     <input id="form-field-telephone-{fieldname}"
     class="input {validationClasses}"
     type="tel"
@@ -80,6 +83,7 @@ function onInput(ev){
       {/if}
     </span>
     {/if}
+    {/if}
   </div>
   <ErrorsList
     bind:errors={allErrors}

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

@@ -49,6 +49,9 @@ let dispatch = createEventDispatcher();
 </script>
 
   <div class="control {iconClasses}">
+    {#if readonly }
+    <p>{value}</p>
+    {:else}
     <textarea
     id="form-field-textarea-{fieldname}"
     {invalid}
@@ -73,6 +76,7 @@ let dispatch = createEventDispatcher();
       {/if}
     </span>
     {/if}
+    {/if}
   </div>
   <ErrorsList
     bind:errors={allErrors}

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

@@ -47,6 +47,9 @@
 
 </script>
   <div class="control {iconClasses}">
+    {#if readonly }
+    <p>{value}</p>
+    {:else}
     <input id="form-field-textfield-{fieldname}"
       class="input {validationClasses}"
       type="text" name="{fieldname}"
@@ -70,6 +73,7 @@
       {/if}
     </span>
     {/if}
+    {/if}
   </div>
   <ErrorsList
     bind:errors={allErrors}

package/src/elements/various/index.js

@@ -6,4 +6,4 @@ import UITitle from './ui.title.svelte';
 import UIErrorsList from './ui.errors.list.svelte';
 import UIUserCard from './ui.user.card.svelte';
 
-export { UIBooleans, UIIndicator, UIProgress, UITag, UIUserCard, UITitle };
+export { UIErrorsList, UIBooleans, UIIndicator, UIProgress, UITag, UIUserCard, UITitle };

package/src/frame/crud/actions/update.js

@@ -52,7 +52,7 @@ export default class CRUDActionUpdate{
       });
 
       controller.ui[ACTION].on('submit', async (ev) => {
-        const success = await controller.onActionSubmit(ACTION, ev.detail);
+        const success = await controller.onActionSubmit(ACTION, ev);
         if(success){
           setTimeout(() => controller.goDetails(id), 1000);
         }

package/src/frame/crud/controller.crud.js

@@ -192,7 +192,7 @@ class notCRUD extends notController {
   }
 
   async onActionSubmit(action, item){
-    let result = true;
+    let state = true;
     const actionUI = this.ui[action];
     if(actionUI){
       try{