not-bulma 1.2.27 → 1.2.28

package/package.json

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

package/src/elements/icon/ui.icon.font.svelte

@@ -1,24 +1,37 @@
 <script>
-  import {LOCALE} from '../../locale';
-  export let title = '';
-  export let font = '';
-  export let size = '';
+    import { LOCALE } from "../../locale";
+    /**
+     * @property {string} [title='']
+     **/
+    export let title = "";
+    /**
+     * @property {string} font
+     **/
+    export let font = "";
+    /**
+     * @property {string} [size=''] medium|large
+     **/
+    export let size = "";
 </script>
 
 {#if title}
-<span class="icon-text">
-  <span class="icon {size?`is-${size}`:''}">
-    <i class="fas
+    <span class="icon-text">
+        <span class="icon {size ? `is-${size}` : ''}">
+            <i
+                class="fas
       fa-{font}
-      {size=='medium'?'fa-lg':''}
-      {size=='large'?'fa-2x':''}
-      "></i>
-  </span>
-  <span>{$LOCALE[title]}</span>
-</span>
+      {size == 'medium' ? 'fa-lg' : ''}
+      {size == 'large' ? 'fa-2x' : ''}
+      "
+            ></i>
+        </span>
+        <span>{$LOCALE[title]}</span>
+    </span>
 {:else}
-<span class="icon {size?`is-${size}`:''} {size=='medium'?'fa-lg':''}
-{size=='large'?'fa-2x':''}">
-  <i class="fas fa-{font}"></i>
-</span>
+    <span
+        class="icon {size ? `is-${size}` : ''} {size == 'medium' ? 'fa-lg' : ''}
+{size == 'large' ? 'fa-2x' : ''}"
+    >
+        <i class="fas fa-{font}"></i>
+    </span>
 {/if}

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

@@ -156,6 +156,14 @@ class notTable extends EventEmitter {
         }
     }
 
+    onSorterChange(sorter) {
+        if (sorter) {
+            this.setSorter(sorter);
+        } else {
+            this.resetSorter();
+        }
+    }
+
     onFilterChange(filter) {
         if (filter) {
             this.setFilter(filter);
@@ -229,6 +237,7 @@ class notTable extends EventEmitter {
                     search: "",
                     showSelect: this.getOptions("showSelect"),
                     showSearch: this.getOptions("showSearch"),
+                    showSort: this.getOptions("showSort"),
                     idField: this.getOptions("idField"),
                     getItemId: this.getOptions("getItemId"),
                     filter: this.getFilter(),
@@ -236,6 +245,7 @@ class notTable extends EventEmitter {
             });
         }
         this.ui.table.$on("searchChange", (e) => this.onSearchChange(e.detail));
+        this.ui.table.$on("sorterChange", (e) => this.onSorterChange(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());

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

@@ -7,6 +7,7 @@
 
     import { UILinks } from "../../../elements/link";
     import { UIButtons } from "../../../elements/button";
+    import UIIcon from "../../../elements/icon/ui.icon.font.svelte";
 
     import { onMount, createEventDispatcher } from "svelte";
     let dispatch = createEventDispatcher();
@@ -18,6 +19,7 @@
     export let helpers = {};
     export let state = {};
     export let filter = {};
+    export let sorter = {};
     export let fields = [];
     export let selected = {};
     export let items = [];
@@ -104,6 +106,18 @@
             return value;
         });
     }
+
+    function onFieldHeadClick(field) {
+        const propPath = field.path.substring(1);
+        if (Object.hasOwn(sorter, propPath)) {
+            sorter[propPath] = parseInt(sorter[propPath]) * -1;
+        } else {
+            sorter = {
+                [propPath]: 1,
+            };
+        }
+        dispatch("sorterChange", sorter);
+    }
 </script>
 
 {#if links.length}
@@ -153,9 +167,20 @@
             >
         {/if}
         {#each fields as field}
-            <th class={field.hideOnMobile ? "is-hidden-touch" : ""}
-                >{$LOCALE[field.title]}</th
+            {@const propPath = field.path.substring(1)}
+            <th
+                class={field.hideOnMobile ? "is-hidden-touch" : ""}
+                on:click={onFieldHeadClick(field)}
             >
+                {#if field.sortable && Object.hasOwn(sorter, propPath)}
+                    <UIIcon
+                        font={sorter[propPath] > 0 ? "sort-up" : "sort-down"}
+                        title={field.title}
+                    />
+                {:else}
+                    {$LOCALE[field.title]}
+                {/if}
+            </th>
         {/each}
     </thead>
     <tbody>