not-bulma 1.0.27 → 1.0.28

package/package.json

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

package/src/elements/button/ui.button.svelte

@@ -1,6 +1,8 @@
 <script>
+  import {createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher(); 
   import {LOCALE} from '../../locale';
-  
+
   export let title = '';
   export let light = false;
   export let loading = false;
@@ -17,10 +19,17 @@
   export let icon = false;
   export let iconSide = 'right';
   export let action = ()=>{ return true; };
+
+
+  function onClick(e){
+    dispatch('click', e);
+    return action(e);
+  }
+  
 </script>
 
 <button
-  on:click="{action}"
+  on:click={onClick}
   {disabled}
   type={type?type:""}
   class="
@@ -37,17 +46,19 @@
     {size?`is-${size}`:''}
     "
   >
-  {#if icon }
-  {#if iconSide === 'left' }
-  <span class="icon"><i class="fas fa-{icon} {size?`is-${size}`:''}"></i></span>
-    {/if}
-  {#if title }
-  <span>{$LOCALE[title]}</span>
-  {/if}
-  {#if iconSide === 'right' }
+  <slot>
+    {#if icon }
+    {#if iconSide === 'left' }
     <span class="icon"><i class="fas fa-{icon} {size?`is-${size}`:''}"></i></span>
-  {/if}
-  {:else}
-  {$LOCALE[title]}
-  {/if}
+      {/if}
+    {#if title }
+    <span>{$LOCALE[title]}</span>
+    {/if}
+    {#if iconSide === 'right' }
+      <span class="icon"><i class="fas fa-{icon} {size?`is-${size}`:''}"></i></span>
+    {/if}
+    {:else}
+    {$LOCALE[title]}
+    {/if}
+  </slot>
 </button>

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

@@ -0,0 +1,24 @@
+<script>
+  import {createEventDispatcher } from 'svelte';
+  let dispatch = createEventDispatcher();
+
+  import {LOCALE} from '../../locale';
+
+  export let id = -1;
+  export let type = -1;
+  export let title = -1;
+  export let readonly = false;
+
+  function remove(e){
+    e && e.preventDefault();
+    dispatch('delete', id);
+    return false;
+  }
+
+</script>
+
+<span class="mx-1 tag is-{type}">{$LOCALE[title]}
+  {#if !readonly }
+  <button data-id="{id}" class="delete is-small" on:click="{remove}"></button>
+  {/if}
+</span>

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

@@ -0,0 +1,128 @@
+<script>
+  import {createEventDispatcher } from 'svelte';
+  let dispatch = createEventDispatcher();
+
+  import {LOCALE} from '../../locale';
+  const LC_ADD = 'not-node:add_label';
+  const LC_SELECT_FROM_LIST = 'not-node:select_from_list_label';
+
+  import ErrorsList from '../various/ui.errors.list.svelte';
+  import UICommon from '../common.js';
+  import UISelectComplexItem from './ui.select.complex.item.svelte';
+  import UIButton from '../button/ui.button.svelte';
+
+  //list of item ids
+  export let value = []; //raw ids of variants
+  export let inputStarted = false;
+  export let variants = [];
+  export let fieldname = 'tag';
+  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 ItemComponent = UISelectComplexItem;
+
+  export let beforeAdd = (/*variant, variants*/)=>{
+    return true;
+  };
+
+  export let getItemId = (variant)=>{
+    return variant.id;
+  };
+
+  export let getItemTitle = (variant)=>{
+    return variant.title;
+  };
+
+  export let getItemType = (variant)=>{
+    return 'info';
+  };
+
+  export let buildItem = (variant)=>{
+    return {
+      id: getItemId(variant),
+      title: getItemTitle(variant),
+      type: getItemType(variant)
+    };
+  };
+
+  function variantIdToVariant(id){
+    return variants.find(variant => getItemId(variant) === id);
+  }
+
+  function changeEvent(){
+    let data = {
+      field: fieldname,
+      value
+    };
+    dispatch('change', data);
+  }
+
+  function remove(e){
+    e && e.preventDefault();
+    let id = e.currentTarget.dataset.id;
+    if(value.includes(id)){
+      value.splice(value.indexOf(id), 1);
+      value = value;
+      changeEvent();
+    }
+    return false;
+  }
+
+  function add(e){
+    e && e.preventDefault();
+    let id = e.currentTarget.parentNode.querySelector('select').value;
+    const variant = variantIdToVariant(id);
+    if(!variant){
+      return false;
+    }
+    if(!beforeAdd(variant, variants)){
+      return false;
+    }
+    if(id && (value.indexOf(id) === -1)){
+      value.push(id);
+      value = value;
+      changeEvent();
+    }
+    return false;
+  }
+
+
+  //item = {
+  //  id,        //unique
+  //  title,     //some text
+  //  type       //for coloring items, usual html template names danger, success, etc
+  //}
+
+  $: items = value.map(variantIdToVariant).map(buildItem);
+  $: allErrors = [].concat(errors?errors:[], formErrors?formErrors:[]);
+  $: showErrors = (!(validated && valid) && (inputStarted));
+  $: invalid = ((valid===false) || (formLevelError));
+  $: validationClasses = (valid===true || !inputStarted)?UICommon.CLASS_OK:UICommon.CLASS_ERR;
+
+</script>
+
+<div class="control columns">
+  <div class="column {validationClasses}">
+    {#each items as item (item.id)}
+    <UISelectComplexItem {...item} {readonly} />
+    {/each}
+  </div>
+  {#if !readonly }
+  <div class="column">
+    <div class="control">
+      <UIButton primary={true} size="small" on:click={add} title={LC_ADD} />
+    </div>
+  </div>
+  {/if}
+</div>
+<ErrorsList
+  bind:errors={allErrors}
+  bind:show={showErrors}
+  bind:classes={validationClasses}
+  id="input-field-helper-{fieldname}"
+  />

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

@@ -6,17 +6,21 @@
   export let size = 1;
   export let subsize;
   export let spaced = false;
+  export let align = 'left';
 
   let size2;
   $: size2 = subsize?subsize:(size<6?size+1:size);
   $: spacedStyle = (spaced?'is-spaced':'');
 
-  $: resultTitle = `<h${size} class="title ${spacedStyle} is-${size}">${$LOCALE[title]}</h${size}>`;
-  $: resultSubtitle = `<h${size2} class="subtitle is-${size2}">${$LOCALE[subtitle]}</h${size2}>`;
+  $: resultTitle = `<h${size} style="text-align: ${align};" class="title ${spacedStyle} is-${size}">${$LOCALE[title]}</h${size}>`;
+  $: resultSubtitle = `<h${size2} style="text-align: ${align};" class="subtitle is-${size2}">${$LOCALE[subtitle]}</h${size2}>`;
 
 </script>
 
+
+{#if title }
 {@html resultTitle }
+{/if}
 
 {#if subtitle }
 {@html resultSubtitle }