not-bulma 1.0.73 → 1.0.75

package/package.json

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

package/src/elements/common.js

@@ -65,18 +65,24 @@ export default class UICommon {
         return `${this.MONEY_SIGN}${major}.${minor}`;
     }
 
-    static formatLocaleDatetime(dt) {
+    static formatLocaleDatetime(dt, opts = { date: true, time: true }) {
         const date = dt.toLocaleDateString(window.navigator.language);
         const time = dt.toLocaleTimeString(window.navigator.language);
-        return `${date} ${time}`;
+        if (opts.date && opts.time) {
+            return `${date} ${time}`;
+        } else if (opts.date && !opts.time) {
+            return date;
+        } else {
+            return time;
+        }
     }
 
-    static tryFormatLocaleDateTime(value) {
-        if (typeof value == "string") {
+    static tryFormatLocaleDateTime(value, opts = { date: true, time: true }) {
+        if (typeof value == "string" || typeof value == "number") {
             const dt = new Date(value);
-            return UICommon.formatLocaleDatetime(dt);
+            return UICommon.formatLocaleDatetime(dt, opts);
         } else if (typeof value == "object") {
-            return UICommon.formatLocaleDatetime(value);
+            return UICommon.formatLocaleDatetime(value, opts);
         } else {
             return "";
         }

package/src/elements/list/ui.list.block.svelte

@@ -3,6 +3,7 @@
     import UITitle from "../various/ui.title.svelte";
     export let idFieldName = "id";
     export let items = [];
+    export let actions = [];
 
     export let itemClasses = "";
 
@@ -28,6 +29,7 @@
         {imageComponent}
         {imageComponentProps}
         {...item}
+        listActions={actions}
         classes={itemClasses}
         value={item}
         on:click

package/src/elements/list/ui.list.item.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
     const dispatch = createEventDispatcher();
 
     import UITitle from "../various/ui.title.svelte";
@@ -8,6 +8,7 @@
     export let title;
     export let description;
     export let actions = [];
+    export let listActions = [];
     export let classes = "";
     export let image = "";
     //value of item, will be passed to event handlers
@@ -23,6 +24,10 @@
     function onClick() {
         dispatch("click", value);
     }
+    let allActions = [];
+    $: allActions = [...actions, ...listActions].map((btn) => {
+        return { ...btn, action: () => btn.action(value) };
+    });
 </script>
 
 <div class="list-item {classes}" on:click|preventDefault={onClick}>
@@ -63,13 +68,21 @@
                 }}
             >
                 {#if titleComponent}
-                    <svelte:component
-                        this={titleComponent}
-                        {title}
-                        {...titleComponentProps}
-                    />
+                    {#if typeof title === "string"}
+                        <svelte:component
+                            this={titleComponent}
+                            {title}
+                            {...titleComponentProps}
+                        />
+                    {:else}
+                        <svelte:component
+                            this={titleComponent}
+                            {...title}
+                            {...titleComponentProps}
+                        />
+                    {/if}
                 {:else}
-                    {description}
+                    {title}
                 {/if}
             </div>
         {/if}
@@ -93,9 +106,9 @@
             </div>
         {/if}
     </div>
-    {#if actions && actions.length}
+    {#if allActions && allActions.length}
         <div class="list-item-controls">
-            <UIButtons values={actions} right={true} />
+            <UIButtons values={allActions} right={true} />
         </div>
     {/if}
 </div>

package/src/elements/list/ui.list.svelte

@@ -6,6 +6,7 @@
 
     export let classes = "";
     export let items = [];
+    export let actions = [];
 
     export let actionsVisible = false;
     export let itemsHoverable = false;
@@ -54,6 +55,7 @@
             {descriptionComponentProps}
             {imageComponent}
             {imageComponentProps}
+            {actions}
             on:click
             on:clickContent
             on:clickDescription

package/src/elements/various/ui.tag.value.svelte

@@ -5,13 +5,11 @@
     export let id = "taggedValueId";
     export let title; //UITag props
     export let value; //UITag props
+    export let classes = "";
 </script>
 
-<div class="tags has-addons" {id}>
+<div class="tags has-addons {classes}" {id}>
     {#if title}
-        <UITag {...title} />
-    {/if}
-    {#if value}
-        <UITag {...value} />
+        <UITag {...title} />{/if}{#if value}<UITag {...value} />
     {/if}
 </div>

package/src/frame/common.js

@@ -655,6 +655,14 @@ class notCommon {
         notCommon.getApp() &&
             notCommon.getApp().getWorking("router").navigate(url);
     }
+
+    static select(variantsSet, value, def) {
+        if (Object.hasOwn(variantsSet, value)) {
+            return variantsSet[value];
+        } else {
+            return def;
+        }
+    }
 }
 
 function absorbServices(target, src) {