@humandialog/forms.svelte 1.8.9 → 1.8.11

package/components/contextmenu.svelte

@@ -507,9 +507,16 @@ function isOperationDisabled(operation) {
 
 
                 <h4 class = "font-normal my-0 py-2"> <!-- test -->
-                    <div class=" w-full flex flex-row justify-between">
+                    <div class=" w-full flex flex-row justify-between">                    
                         {#if operation.mricon}
-                        <div class="py-1 mr-1 w-4"><Ricon icon = {operation.mricon} s/></div>
+                            {@const color=operation.color ?? ''}
+                        <div class="py-1 mr-1 w-4 {color}"><Ricon icon = {operation.mricon} s/></div>
+                        {:else if operation.toggle !== undefined}
+                            {#if operation.toggle}
+                                <div class="py-1 mr-1 w-4 text-orange-800 dark:text-orange-200"><Ricon icon='toggle-right' s/></div>
+                            {:else}
+                                <div class="py-1 mr-1 w-4"><Ricon icon='toggle-left' s/></div>
+                            {/if}
                         {:else if operation.icon}
                         <div class="py-1 mr-1 w-4 text-orange-500"><Icon s="md" component={operation.icon}/></div>
                         {:else}

package/components/kanban/Kanban.d.ts

@@ -10,6 +10,7 @@ export declare class rKanban_column {
     finishing: boolean;
     operations: object[] | undefined;
     onTitleChanged: Function | undefined;
+    notVisible: boolean;
 }
 export declare class rKanban_definition {
     columns: rKanban_column[];

package/components/kanban/Kanban.js

@@ -9,6 +9,7 @@ export class rKanban_column {
     finishing = false;
     operations = undefined;
     onTitleChanged = undefined;
+    notVisible = false;
 }
 export class rKanban_definition {
     columns = [];

package/components/kanban/internal/kanban.column.svelte

@@ -8,6 +8,7 @@ import { FaPlus, FaCheck } from "svelte-icons/fa";
 import Icon from "../../r.icon.svelte";
 export let currentColumnIdx;
 export let onInsert;
+export let definition;
 let column_element;
 export function getHeight() {
   if (!column_element)
@@ -40,7 +41,6 @@ export function setBorder(what_to_do) {
       break;
   }
 }
-let definition = getContext("rKanban-definition");
 let columnDef = definition.columns[currentColumnIdx];
 let column_items = void 0;
 $:
@@ -55,7 +55,9 @@ $:
   focused_class = is_row_active ? "bg-stone-50 dark:bg-stone-800" : "";
 $:
   force_rerender($data_tick_store, $contextItemsStore);
+let is_visible = false;
 export function reload() {
+  columnDef = definition.columns[currentColumnIdx];
   let allItems = definition.getItems();
   if (definition.stateAttrib) {
     if (columnDef.state < 0) {
@@ -73,6 +75,7 @@ export function reload() {
     } else
       column_items = allItems.filter((e) => e[definition.stateAttrib] == columnDef.state);
   }
+  is_visible = isVisible();
 }
 export function isVisible() {
   if (columnDef.state < 0) {
@@ -81,7 +84,7 @@ export function isVisible() {
     else
       return false;
   } else
-    return true;
+    return !columnDef.notVisible;
 }
 function setup_data(...args) {
   reload();
@@ -226,20 +229,20 @@ async function dblclick(e) {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
-{#if (columnDef.state >=0) || ((column_items && column_items.length > 0))}
+{#if is_visible}
 
 <div class="    snap-center
-                sm:snap-start
+                xsm:snap-start
+                flex-none
 
                 w-full
-
-                flex-none
                 sm:w-1/2
-                md:w-1/3
-                xl:w-1/4
-                sm:px-4
+                lg:w-1/3
+                2xl:w-1/4
 
+                sm:px-4
 
+                xbg-stone-900
 
 
                 {selected_class} {focused_class}"

package/components/kanban/internal/kanban.column.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { rKanban_definition } from '../Kanban';
 declare const __propDef: {
     props: {
         currentColumnIdx: number;
         onInsert: Function;
+        definition: rKanban_definition;
         getHeight?: (() => number) | undefined;
         editName?: ((onFinish?: Function | undefined) => void) | undefined;
         SET_LEFT?: 0 | undefined;

package/components/kanban/kanban.column.svelte

@@ -6,6 +6,7 @@ export let state = "";
 export let finishing = false;
 export let operations = void 0;
 export let onTitleChanged = void 0;
+export let notVisible = false;
 let definition = getContext("rKanban-definition");
 let column = new rKanban_column();
 column.id = definition.columns.length + 1;
@@ -15,6 +16,7 @@ column.state = state;
 column.finishing = finishing;
 column.operations = operations;
 column.onTitleChanged = onTitleChanged;
+column.notVisible = notVisible;
 definition.columns.push(column);
 </script>
 

package/components/kanban/kanban.column.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         finishing?: boolean | undefined;
         operations?: object[] | undefined;
         onTitleChanged?: Function | undefined;
+        notVisible?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/kanban/kanban.svelte

@@ -1,5 +1,5 @@
 <script>import { setContext, getContext, afterUpdate, tick } from "svelte";
-import { KanbanColumnBottom, KanbanColumnTop, rKanban_definition } from "./Kanban";
+import { KanbanColumnBottom, KanbanColumnTop, rKanban_definition, rKanban_column } from "./Kanban";
 import { parseWidthDirective, clearActiveItem, getPrev, getNext, remove, insertAt, insertAfter, swapElements, getActive } from "../../utils";
 import { contextItemsStore, contextTypesStore, data_tick_store } from "../../stores";
 import KanbanColumn from "./internal/kanban.column.svelte";
@@ -102,7 +102,7 @@ export async function reload(data, selectElement = KEEP_SELECTION) {
   else
     definition.self = data;
   definition.items = null;
-  columns.forEach((c2) => c2.reload());
+  columns?.forEach((c2) => c2?.reload());
   await tick();
   allItems = definition.getItems();
   if (selectElementId > 0) {
@@ -192,6 +192,74 @@ export function moveDown(item) {
   pushChanges();
   column.reload();
 }
+export function moveTop(item) {
+  let allItems = definition.getItems();
+  const oa = definition.orderAttrib;
+  const sa = definition.stateAttrib;
+  const columnIdx = getColumnIdx(item);
+  const columnState = definition.columns[columnIdx].state;
+  const toListTop = allItems.find((e) => e[sa] == columnState);
+  const toListBottom = allItems.findLast((e) => e[sa] == columnState);
+  if (item == toListTop)
+    return;
+  const columnElement = columns[columnIdx];
+  const prevItem = getPrev(allItems, toListTop);
+  if (!prevItem) {
+    item[oa] = toListTop[oa] - ORDER_STEP;
+    informModification(item, oa);
+    remove(allItems, item);
+    insertAt(allItems, 0, item);
+  } else {
+    let prevOrder = prevItem[oa];
+    let nextOrder = toListTop[oa];
+    let orderSpace = nextOrder - prevOrder;
+    if (orderSpace < 2) {
+      reorderElements(allItems, prevItem, false);
+      prevOrder = prevItem[oa];
+      nextOrder = toListTop[oa];
+      orderSpace = nextOrder - prevOrder;
+    }
+    item[oa] = prevOrder + Math.floor(orderSpace / 2);
+    informModification(item, oa);
+    remove(allItems, item);
+    insertAfter(allItems, prevItem, item);
+  }
+  columnElement.reload();
+}
+export function moveBottom(item) {
+  let allItems = definition.getItems();
+  const oa = definition.orderAttrib;
+  const sa = definition.stateAttrib;
+  const columnIdx = getColumnIdx(item);
+  const columnState = definition.columns[columnIdx].state;
+  const toListTop = allItems.find((e) => e[sa] == columnState);
+  const toListBottom = allItems.findLast((e) => e[sa] == columnState);
+  if (item == toListBottom)
+    return;
+  const columnElement = columns[columnIdx];
+  const nextItem = getNext(allItems, toListBottom);
+  if (!nextItem) {
+    item[oa] = toListBottom[oa] + ORDER_STEP;
+    informModification(item, oa);
+    remove(allItems, item);
+    insertAfter(allItems, toListBottom, item);
+  } else {
+    let nextOrder = nextItem[oa];
+    let prevOrder = toListBottom[oa];
+    let orderSpace = nextOrder - prevOrder;
+    if (orderSpace < 2) {
+      reorderElements(allItems, toListBottom, false);
+      prevOrder = toListBottom[oa];
+      nextOrder = nextItem[oa];
+      orderSpace = nextOrder - prevOrder;
+    }
+    item[oa] = prevOrder + Math.floor(orderSpace / 2);
+    informModification(item, oa);
+    remove(allItems, item);
+    insertAfter(allItems, toListBottom, item);
+  }
+  columnElement.reload();
+}
 const ORDER_STEP = 64;
 const MIN_ORDER = 0;
 function reorderElements(items, from = null, pushImediatelly = true) {
@@ -426,13 +494,27 @@ export function setCardsState(items, state) {
     item[sa] = state;
     informModification(item, sa);
   });
-  pushChanges();
 }
 export function add(item, columnIdx = -1) {
   if (columnIdx < 0)
     columnIdx = getColumnIdx(item);
   columns[columnIdx].add(item);
 }
+export function setColumns(columnsDefinition) {
+  definition.columns = [];
+  columnsDefinition.forEach((c2) => {
+    let column = new rKanban_column();
+    column.id = definition.columns.length + 1;
+    column.title = c2.title;
+    column.width = c2.width ?? "";
+    column.state = c2.state;
+    column.finishing = c2.finishing ?? false;
+    column.notVisible = c2.notVisible ?? false;
+    column.operations = c2.operations ?? void 0;
+    column.onTitleChanged = c2.onTitleChanged ?? void 0;
+    definition.columns.push(column);
+  });
+}
 </script>
 
 {#key renderToken}
@@ -445,35 +527,38 @@ export function add(item, columnIdx = -1) {
 
     <!--hr class="hidden sm:block w-full"-->
 
-<section    id="__hd_svelte_kanban_columns_container"
+<div    id="__hd_svelte_kanban_columns_container"
             class="h-full flex flex-row no-wrap
-                overflow-x-scroll sm:overflow-x-visible
+                overflow-x-scroll grow sm:overflow-x-visible
                 snap-x snap-mandatory
                 xbg-lime-500
                 sm: space-x-0
                 sm:divide-x
                 divide-stone-500 dark:divide-stone-700
                 pb-20
+                xbg-lime-800
                 "> <!--sm:justify-center -->
-    {#each definition.columns as column, idx (column.id)}
-        <KanbanColumn currentColumnIdx={idx}
-                {onInsert}
-                bind:this={columns[idx]}>
+    {#each definition.columns as column, idx (column.title + column.state)}
+            <KanbanColumn currentColumnIdx={idx}
+                    {onInsert}
+                    {definition}
+                    bind:this={columns[idx]}>
 
 
-            <svelte:fragment slot="kanbanCardTopProps" let:element>
-                <slot name="kanbanCardTopProps" {element}/>
-            </svelte:fragment>
+                <svelte:fragment slot="kanbanCardTopProps" let:element>
+                    <slot name="kanbanCardTopProps" {element}/>
+                </svelte:fragment>
 
-            <svelte:fragment slot="kanbanCardMiddleProps" let:element>
-                <slot name="kanbanCardMiddleProps" {element}/>
-            </svelte:fragment>
+                <svelte:fragment slot="kanbanCardMiddleProps" let:element>
+                    <slot name="kanbanCardMiddleProps" {element}/>
+                </svelte:fragment>
 
-            <svelte:fragment slot="kanbanCardBottomProps" let:element>
-                <slot name="kanbanCardBottomProps" {element}/>
-            </svelte:fragment>
+                <svelte:fragment slot="kanbanCardBottomProps" let:element>
+                    <slot name="kanbanCardBottomProps" {element}/>
+                </svelte:fragment>
 
-        </KanbanColumn>
+            </KanbanColumn>
+        
     {/each}
-</section>
+</div>
 {/key}

package/components/kanban/kanban.svelte.d.ts

@@ -20,12 +20,15 @@ declare const __propDef: {
         scrollViewToCard?: ((item: any) => void) | undefined;
         moveUp?: ((item: object) => void) | undefined;
         moveDown?: ((item: object) => void) | undefined;
+        moveTop?: ((item: object) => void) | undefined;
+        moveBottom?: ((item: object) => void) | undefined;
         replace?: ((item: any, toColumnIdx: any, afterElement: any) => Promise<void>) | undefined;
         activateColumn?: ((columnIdx: number) => void) | undefined;
         editColumnName?: ((columnIdx: number, onFinish?: Function | undefined) => void) | undefined;
         moveCardsTo?: ((items: object[], toColumnIdx: number) => void) | undefined;
         setCardsState?: ((items: object[], state: number) => void) | undefined;
         add?: ((item: object | number, columnIdx?: number) => void) | undefined;
+        setColumns?: ((columnsDefinition: any) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -61,11 +64,14 @@ export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEven
     get scrollViewToCard(): (item: any) => void;
     get moveUp(): (item: object) => void;
     get moveDown(): (item: object) => void;
+    get moveTop(): (item: object) => void;
+    get moveBottom(): (item: object) => void;
     get replace(): (item: any, toColumnIdx: any, afterElement: any) => Promise<void>;
     get activateColumn(): (columnIdx: number) => void;
     get editColumnName(): (columnIdx: number, onFinish?: Function | undefined) => void;
     get moveCardsTo(): (items: object[], toColumnIdx: number) => void;
     get setCardsState(): (items: object[], state: number) => void;
     get add(): (item: number | object, columnIdx?: number) => void;
+    get setColumns(): (columnsDefinition: any) => void;
 }
 export {};

package/components/list/internal/list.element.properties.svelte

@@ -1,6 +1,8 @@
 
 <script>import RIcon from "../../r.icon.svelte";
 import { getNiceStringDate } from "../../date_utils";
+import DatePicker from "../../date.svelte";
+import Combo from "../../combo/combo.svelte";
 export let self;
 export let properties = void 0;
 export let icons_size = "s";
@@ -11,6 +13,8 @@ function properties_visible(group) {
     let prop = group[0];
     if (prop[0] == "#" || prop[0] == "&" || prop[0] == ":")
       prop = prop.substr(1);
+    else if (prop[0] == "^")
+      prop = prop_combo_a(prop);
     if (self[prop])
       return true;
   }
@@ -23,10 +27,12 @@ function properties_line_visible() {
     return true;
   if (properties_visible(properties.c))
     return true;
+  if (properties_visible(properties.r))
+    return true;
   return false;
 }
 function prop_is_text(prop) {
-  if (prop[0] != "#" && prop[0] != "&" && prop[0] != ":")
+  if (prop[0] != "#" && prop[0] != "&" && prop[0] != ":" && prop[0] != "^")
     return true;
   return false;
 }
@@ -45,6 +51,48 @@ function prop_is_date(prop) {
     return true;
   return false;
 }
+function prop_is_combo(prop) {
+  if (prop[0] == "^")
+    return true;
+  return false;
+}
+function prop_combo_a(prop) {
+  const segments = prop.split(";");
+  if (segments.length < 2)
+    return null;
+  const a = segments[0].substr(1);
+  return a;
+}
+function prop_combo_info(prop) {
+  const segments = prop.split(";");
+  if (segments.length < 2)
+    return null;
+  let entries = [];
+  const a = segments[0].substr(1);
+  const collection_a = segments[1];
+  let name_a = "Name";
+  if (segments.length > 2)
+    name_a = segments[2];
+  let key_a = "$ref";
+  if (segments.length > 3)
+    key_a = segments[3];
+  const isAssoc = key_a == "$ref";
+  if (collection_a[0] == "#") {
+  } else {
+    entries = self[collection_a];
+  }
+  let combo_info = {
+    a,
+    def: {
+      source: [],
+      collection: entries,
+      element_key: key_a,
+      element_name: name_a
+    },
+    association: isAssoc
+  };
+  return combo_info;
+}
 </script>
 
 {#if properties_line_visible() }
@@ -62,7 +110,15 @@ function prop_is_date(prop) {
             {:else if prop_is_tnumber(prop)}
                 <span>{ Number(self[prop.substr(1)]/1000) }</span>
             {:else if prop_is_date(prop)}
-                <span>{getNiceStringDate(self[prop.substr(1)])}</span>
+                <DatePicker {self} a={prop.substr(1)} typo compact inContext="props"/>
+            {:else if prop_is_combo(prop)}
+                {@const info=prop_combo_info(prop)}
+                {#if info}
+                <Combo compact typo inContext="props"
+                        {self} a={info.a}
+                        isAssociation={info.association}
+                        definition={info.def}/>
+                {/if}
             {:else}
                 <span>{prop}</span>
             {/if}
@@ -82,7 +138,15 @@ function prop_is_date(prop) {
             {:else if prop_is_tnumber(prop)}
                 <span>{ Number(self[prop.substr(1)]/1000) }</span>
             {:else if prop_is_date(prop)}
-                <span>{getNiceStringDate(self[prop.substr(1)])}</span>
+                <DatePicker {self} a={prop.substr(1)} typo compact inContext="props"/>
+            {:else if prop_is_combo(prop)}
+                {@const info=prop_combo_info(prop)}
+                {#if info}
+                <Combo compact typo inContext="props"
+                        {self} a={info.a}
+                        isAssociation={info.association}
+                        definition={info.def}/>
+                {/if}
             {:else}
                 <span>{prop}</span>
             {/if}
@@ -102,7 +166,15 @@ function prop_is_date(prop) {
             {:else if prop_is_tnumber(prop)}
                 <span>{ Number(self[prop.substr(1)]/1000) }</span>
             {:else if prop_is_date(prop)}
-                <span>{getNiceStringDate(self[prop.substr(1)])}</span>
+                <DatePicker {self} a={prop.substr(1)} typo compact inContext="props"/>
+            {:else if prop_is_combo(prop)}
+                {@const info=prop_combo_info(prop)}
+                {#if info}
+                <Combo compact typo inContext="props"
+                        {self} a={info.a}
+                        isAssociation={info.association}
+                        definition={info.def}/>
+                {/if}
             {:else}
                 <span>{prop}</span>
             {/if}

package/components/list/internal/list.element.svelte

@@ -245,10 +245,11 @@ async function onDownloadFile(e) {
         bind:this={rootElement}
         use:selectable={item}
         on:click={(e) => {activate_row(e, item)}}>
-    <!-- comming soon - top info -->
+    <!-- top info -->
     <figcaption>
         <ListElementProperties self = {item} properties = {element_properties?.t}/>
     </figcaption>
+    
     <!-------------------------------->
     <!--@el------------------------->
     <h4 class="-indent-8 sm:hover:cursor-default">
@@ -257,21 +258,25 @@ async function onDownloadFile(e) {
                 <Ricon icon = {element_icon}/>
         </div>{translated_element_title}
     </h4>
-    <!-- comming soon - middle info --
+
+    <!-- middle info -->
     <figcaption>
-        <div class="grid gap-4 grid-cols-3 grid-rows-1">
-            <span>Andrzej</span>
-            <span class="text-center"></span>
-            <span class="text-right">Specyfikacje</span>
-        </div>
+        <ListElementProperties self = {item} properties = {element_properties?.m}/>
     </figcaption>
-    -------------------------------->
+    <!-------------------------------->
 
     {#if summary && item[summary]}
     <figcaption>
         {item[summary]}
     </figcaption>
     {/if}
+
+    <!-- bottom info -->
+    <figcaption>
+        <ListElementProperties self = {item} properties = {element_properties?.b}/>
+    </figcaption>
+    <!-------------------------------->
+
 </figure>
 
 <!------------------------------------------------------------------------------------------------->
@@ -291,7 +296,7 @@ async function onDownloadFile(e) {
             use:selectable={item}
             on:click={onToggleMultiSelect}>
 <figure class={multiselect_class} bind:this={rootElement}>
-    <!-- comming soon - top info -->
+    <!-- top info -->
     <figcaption>
         <ListElementProperties self = {item} properties = {element_properties?.t}/>
     </figcaption>
@@ -314,21 +319,24 @@ async function onDownloadFile(e) {
         </div>{translated_element_title}
         <!--div class="inline-block  w-4 h-4 ml-1 mr-1 py-0.5 align-baseline"> <Circle size = "s"/></div-->
     </h4>
-    <!-- comming soon - middle info --
+    <!-- comming soon - middle info -->
     <figcaption>
-        <div class="grid gap-4 grid-cols-3 grid-rows-1">
-            <span>Andrzej</span>
-            <span class="text-center"></span>
-            <span class="text-right">Specyfikacje</span>
-        </div>
+        <ListElementProperties self = {item} properties = {element_properties?.m}/>
     </figcaption>
-    -------------------------------->
+    <!-------------------------------->
 
     {#if summary && (item[summary] || placeholder=='Summary')}
     <figcaption>
         {ext(item[summary])}
     </figcaption>
     {/if}
+
+    <!-- bottom info -->
+    <figcaption>
+        <ListElementProperties self = {item} properties = {element_properties?.b}/>
+    </figcaption>
+    <!-------------------------------->
+
 </figure>
 </div>
 <!------------------------------------------------------------------------------------------------->
@@ -364,7 +372,7 @@ async function onDownloadFile(e) {
         use:selectable={item}
         on:click={(e) => {activate_row(e, item)}}
         >
-    <!-- comming soon - top info -->
+    <!-- top info -->
     <figcaption>
         <ListElementProperties self = {item} properties = {element_properties?.t}/>
     </figcaption>
@@ -429,15 +437,12 @@ async function onDownloadFile(e) {
         </h4>
     {/if}
 
-    <!-- comming soon - middle info --
+    <!-- middle info -->
     <figcaption>
-        <div class="grid gap-4 grid-cols-3 grid-rows-1">
-            <span>Andrzej</span>
-            <span class="text-center"></span>
-            <span class="text-right">Specyfikacje</span>
-        </div>
+        <ListElementProperties self = {item} properties = {element_properties?.m}/>
     </figcaption>
-    -------------------------------->
+    
+    <!-------------------------------->
 
     {#if (summary && (item[summary])) || (placeholder=='Summary')}
         <figcaption><Editable   self={item}
@@ -447,6 +452,12 @@ async function onDownloadFile(e) {
         </figcaption>
     {/if}
 
+    <!-- bottom info -->
+    <figcaption>
+        <ListElementProperties self = {item} properties = {element_properties?.b}/>
+    </figcaption>
+    <!-------------------------------->
+
 </figure>
 </div>
 

package/components/r.icon.svelte

@@ -95,6 +95,10 @@
   import StarOff from './ricons/star-off.svelte'
   import Heart from './ricons/heart.svelte'
   import HeartOff from './ricons/heart-off.svelte'
+  import ExternalLink from './ricons/external-link.svelte'
+  import ToggleLeft from './ricons/toggle-left.svelte'
+  import ToggleRight from './ricons/toggle-right.svelte'
+  import Settings from './ricons/settings.svelte'
 
   let ricons_box = {
     "arrow-up": ArrowUp,
@@ -181,7 +185,11 @@
     'star': Star,
     'star-off': StarOff,
     'heart': Heart,
-    'heart-off': HeartOff
+    'heart-off': HeartOff,
+    'external-link': ExternalLink,
+    'toggle-left': ToggleLeft,
+    'toggle-right': ToggleRight,
+    'settings': Settings
   }
 
   let width = 24;

package/components/ricons/external-link.svelte

@@ -0,0 +1,21 @@
+<script>
+	export let w = 24;
+	export let h = 24;
+	export let s = 1;
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={w}
+	height={h}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width={s}
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-external-link-icon lucide-external-link"
+	><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path
+		d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+	/></svg
+>