not-bulma 1.0.91 → 1.0.93

package/package.json

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

package/src/elements/form/ui.named.numbers.list.svelte

@@ -1,4 +1,5 @@
 <script>
+    import UICommon from "../common";
     import ErrorsList from "../various/ui.errors.list.svelte";
     import { createEventDispatcher } from "svelte";
     let dispatch = createEventDispatcher();

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

@@ -24,6 +24,8 @@
     export let formErrors = false;
     export let formLevelError = false;
 
+    let selectedVariants = [];
+
     $: iconClasses = (icon ? " has-icons-left " : "") + " has-icons-right ";
     $: allErrors = [].concat(
         errors ? errors : [],
@@ -36,9 +38,12 @@
             ? UICommon.CLASS_OK
             : UICommon.CLASS_ERR;
     $: multipleClass = multiple ? " is-multiple " : "";
-    $: selectedVariants = Array.isArray(variants)
-        ? variants.filter(filterSelectedVariants)
-        : [];
+    $: {
+        value;
+        selectedVariants = Array.isArray(variants)
+            ? variants.filter(filterSelectedVariants)
+            : [];
+    }
 
     function filterSelectedVariants(variant) {
         if (Array.isArray(value) && multiple) {

package/src/frame/components/table/notTable.js

@@ -155,6 +155,14 @@ class notTable extends EventEmitter {
         }
     }
 
+    onFilterChange(filter) {
+        if (filter) {
+            this.setFilter(filter);
+        } else {
+            this.resetFilter();
+        }
+    }
+
     onSelectedUpdate(val) {
         this.data.selected = val;
     }
@@ -211,6 +219,7 @@ class notTable extends EventEmitter {
             this.ui.table = new this.options.ui({
                 target: this.options.targetEl,
                 props: {
+                    filterUI: this.getOptions("filterUI", undefined),
                     id: this.id,
                     helpers: Object.assign({}, this.getHelpers()),
                     fields: this.getOptions("fields"),
@@ -221,10 +230,12 @@ class notTable extends EventEmitter {
                     showSearch: this.getOptions("showSearch"),
                     idField: this.getOptions("idField"),
                     getItemId: this.getOptions("getItemId"),
+                    filter: this.getFilter(),
                 },
             });
         }
         this.ui.table.$on("searchChange", (e) => this.onSearchChange(e.detail));
+        this.ui.table.$on("filterChange", (e) => this.onFilterChange(e.detail));
         this.ui.table.$on("goToPage", (e) => this.goToPage(e.detail));
         this.ui.table.$on("goToNextPage", () => this.goToNext());
         this.ui.table.$on("goToPrevPage", () => this.goToPrev());

package/src/frame/components/table/notTable.svelte

@@ -1,140 +1,198 @@
 <script>
-	import {LOCALE} from '../../../locale';
-
-	import * as Stores from './stores.js';
-
-	import UITableRow from './notTableRow.svelte';
-
-	import {UILinks} from '../../../elements/link';
-	import {UIButtons} from '../../../elements/button';
-
-	import { onMount , createEventDispatcher} from 'svelte';
-	let dispatch = createEventDispatcher();
-
-	export let id;
-
-	export let helpers = {};
-	export let state = {};
-	export let fields = [];
-	export let selected = {};
-	export let items = [];
-	export let actions = [];
-	export let links = [];
-	export let search = '';
-	export let showSearch = true;
-	export let showSelect = true;
-	export let selectAll = false;
-
-	export let getItemId = item => item._id;
-
-	onMount(() => {
-	  if(showSelect){
-	    Stores.get(id).selected.subscribe(value => {
-	      selected = value;
-	    });
-	  }
-	  Stores.get(id).refined.subscribe(value => {
-	    items = value;
-	    if(showSelect){
-	      for(let itemId in selected){
-	        if(! items.some(item => getItemId(item) === itemId)){
-	          delete selected[itemId];
-	        }else{
-	          if(!Object.prototype.hasOwnProperty.call(selected, itemId)){
-	            selected[itemId] = false;
-	          }
-	        }
-	      }
-	      selected = selected;
-	    }
-	  });
-	  Stores.get(id).state.subscribe(value => {
-	    state = value;
-	  });
-
-	});
-
-	function onSearchInput(ev){
-	  try{
-	    let data = ev.currentTarget.value.trim();
-	    dispatch('searchChange', data);
-	  }catch(e){
-	    return;
-	  }
-	}
-
-	function goPrev(){
-	  dispatch('goToPrevPage');
-	}
-
-	function goNext(){
-	  dispatch('goToNextPage');
-	}
-
-	function goTo(e){
-	  e.preventDefault();
-	  let el = e.target;
-	  dispatch('goToPage', parseInt(el.dataset.page));
-	  return false;
-	}
-
-	function onSelectAll(){
-	  Stores.get(id).selected.update((value)=>{
-	    items.forEach(item => {
-	      value[getItemId(item)] = selectAll;
-	    });
-	    return value;
-	  });
-	}
-
+    import { LOCALE } from "../../../locale";
+
+    import * as Stores from "./stores.js";
+
+    import UITableRow from "./notTableRow.svelte";
+
+    import { UILinks } from "../../../elements/link";
+    import { UIButtons } from "../../../elements/button";
+
+    import { onMount, createEventDispatcher } from "svelte";
+    let dispatch = createEventDispatcher();
+
+    export let id;
+
+    export let filterUI;
+
+    export let helpers = {};
+    export let state = {};
+    export let filter = {};
+    export let fields = [];
+    export let selected = {};
+    export let items = [];
+    export let actions = [];
+    export let links = [];
+    export let search = "";
+    export let showSearch = true;
+    export let showSelect = true;
+    export let selectAll = false;
+
+    export let getItemId = (item) => item._id;
+
+    onMount(() => {
+        if (showSelect) {
+            Stores.get(id).selected.subscribe((value) => {
+                selected = value;
+            });
+        }
+        Stores.get(id).refined.subscribe((value) => {
+            items = value;
+            if (showSelect) {
+                for (let itemId in selected) {
+                    if (!items.some((item) => getItemId(item) === itemId)) {
+                        delete selected[itemId];
+                    } else {
+                        if (
+                            !Object.prototype.hasOwnProperty.call(
+                                selected,
+                                itemId
+                            )
+                        ) {
+                            selected[itemId] = false;
+                        }
+                    }
+                }
+                selected = selected;
+            }
+        });
+        Stores.get(id).state.subscribe((value) => {
+            state = value;
+        });
+    });
+
+    function onSearchInput(ev) {
+        try {
+            let data = ev.currentTarget.value.trim();
+            dispatch("searchChange", data);
+        } catch (e) {
+            return;
+        }
+    }
+
+    function onFilterChange({ detail }) {
+        try {
+            dispatch("filterChange", detail);
+        } catch (e) {
+            return;
+        }
+    }
+
+    function goPrev() {
+        dispatch("goToPrevPage");
+    }
+
+    function goNext() {
+        dispatch("goToNextPage");
+    }
+
+    function goTo(e) {
+        e.preventDefault();
+        let el = e.target;
+        dispatch("goToPage", parseInt(el.dataset.page));
+        return false;
+    }
+
+    function onSelectAll() {
+        Stores.get(id).selected.update((value) => {
+            items.forEach((item) => {
+                value[getItemId(item)] = selectAll;
+            });
+            return value;
+        });
+    }
 </script>
 
 {#if links.length}
-<div class="field is-grouped">
-	<UILinks values={links} />
-</div>
+    <div class="field is-grouped">
+        <UILinks values={links} />
+    </div>
 {/if}
 {#if actions.length}
-<div class="field is-grouped">
-	<UIButtons values={actions} />
-</div>
+    <div class="field is-grouped">
+        <UIButtons values={actions} />
+    </div>
 {/if}
-{#if showSearch }
-<div class="field">
-	<div class="control">
-		<input class="input" type="text" placeholder="Поиск" bind:value="{search}" on:input={onSearchInput}>
-	</div>
-</div>
+{#if showSearch}
+    {#if filterUI}
+        <svelte:component
+            this={filterUI}
+            bind:filter
+            on:change={onFilterChange}
+        />
+    {:else}
+        <div class="field">
+            <div class="control">
+                <input
+                    class="input"
+                    type="text"
+                    placeholder="Поиск"
+                    bind:value={search}
+                    on:input={onSearchInput}
+                />
+            </div>
+        </div>
+    {/if}
 {/if}
 <table class="table">
-	<thead>
-		{#if showSelect }
-		<th><input type="checkbox" id="table-row-select-page" bind:checked={selectAll} placeholder="" name="row_selected_all" on:change={onSelectAll} /></th>
-		{/if}
-		{#each fields as field}
-		<th class="{field.hideOnMobile?'is-hidden-touch':''}">{$LOCALE[field.title]}</th>
-		{/each}
-	</thead>
-	<tbody>
-		{#each items as item (item._id)}
-		<UITableRow {id} {item} {fields} {helpers} {showSelect} {getItemId} on:rowSelectChange />
-		{/each}
-	</tbody>
+    <thead>
+        {#if showSelect}
+            <th
+                ><input
+                    type="checkbox"
+                    id="table-row-select-page"
+                    bind:checked={selectAll}
+                    placeholder=""
+                    name="row_selected_all"
+                    on:change={onSelectAll}
+                /></th
+            >
+        {/if}
+        {#each fields as field}
+            <th class={field.hideOnMobile ? "is-hidden-touch" : ""}
+                >{$LOCALE[field.title]}</th
+            >
+        {/each}
+    </thead>
+    <tbody>
+        {#each items as item (item._id)}
+            <UITableRow
+                {id}
+                {item}
+                {fields}
+                {helpers}
+                {showSelect}
+                {getItemId}
+                on:rowSelectChange
+            />
+        {/each}
+    </tbody>
 </table>
 <nav class="pagination is-centered" aria-label="pagination">
-	<a href class="pagination-previous" on:click={goPrev}>Назад</a>
-	<a href class="pagination-next" on:click={goNext}>Вперед</a>
-	<ul class="pagination-list">
-		{#if state.pagination && state.pagination.pages && state.pagination.pages.list }
-		{#each state.pagination.pages.list as page}
-		<li>
-			{#if page.active}
-			<a href class="pagination-link is-current" aria-label="Страница {page.index}" aria-current="page">{page.index + 1}</a>
-			{:else}
-			<a href class="pagination-link" aria-label="Страница {page.index}" data-page="{page.index}" on:click={goTo}>{page.index + 1}</a>
-			{/if}
-		</li>
-		{/each}
-		{/if}
-	</ul>
+    <a href class="pagination-previous" on:click={goPrev}>Назад</a>
+    <a href class="pagination-next" on:click={goNext}>Вперед</a>
+    <ul class="pagination-list">
+        {#if state.pagination && state.pagination.pages && state.pagination.pages.list}
+            {#each state.pagination.pages.list as page}
+                <li>
+                    {#if page.active}
+                        <a
+                            href
+                            class="pagination-link is-current"
+                            aria-label="Страница {page.index}"
+                            aria-current="page">{page.index + 1}</a
+                        >
+                    {:else}
+                        <a
+                            href
+                            class="pagination-link"
+                            aria-label="Страница {page.index}"
+                            data-page={page.index}
+                            on:click={goTo}>{page.index + 1}</a
+                        >
+                    {/if}
+                </li>
+            {/each}
+        {/if}
+    </ul>
 </nav>

package/src/frame/components/table/notTableFilter.svelte

@@ -0,0 +1,4 @@
+<script>
+    export let filter = {};
+    //some filter UI and logic
+</script>

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

@@ -42,6 +42,7 @@ export default class CRUDActionList {
             getItemId: undefined,
             idField: undefined,
             preload: {},
+            filterUI: controller.getOptions(`${ACTION}.filterUI`),
             pager: { size: 50, page: 0 },
             sorter: {
                 id: -1,