@humandialog/forms.svelte 1.7.28 → 1.8.1

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

@@ -5,6 +5,7 @@ import Card from "./kanban.card.svelte";
 import { KanbanColumnTop, KanbanColumnBottom } from "../Kanban";
 import Inserter from "./kanban.inserter.svelte";
 import { FaPlus, FaCheck } from "svelte-icons/fa";
+import Icon from "../../r.icon.svelte";
 export let currentColumnIdx;
 export let onInsert;
 let column_element;
@@ -227,22 +228,38 @@ async function dblclick(e) {
 
 {#if (columnDef.state >=0) || ((column_items && column_items.length > 0))}
 
-<section class="    snap-center 
-                    sm:snap-align-none 
-                    flex-none sm:flex-1
-                    sm:min-h-[calc(100vh-8rem)] 
-                    min-h-[calc(100vh-5rem)] 
-                    rounded-md border border-transparent  
-                    {selected_class} {focused_class}"
-        
-        bind:this={columnContainerElement}            
-        style={styleWidth}
+<div class="    snap-center
+                sm:snap-start
+
+                w-full
+                sm:px-4
+                sm:w-1/2
+                md:w-1/3
+                xl:w-1/4
+                sm:min-w-[300px]
+
+                flex-none
+                sm:flex-1
+
+                {selected_class} {focused_class}"
+
+        bind:this={columnContainerElement}
+
         use:selectable={columnDef}
         on:click={activate}
         on:dblclick={dblclick}>
-    <header class:cursor-pointer={!is_row_active && columnDef.operations} bind:this={headerElement}>
-        <h2 class="mt-2 mb-2 text-base sm:text-base uppercase w-full min-h-[1rem] text-center whitespace-nowrap relative">
-            <span 
+    <figure bind:this={headerElement}>
+        <figcaption class = "text-right">
+            <div class="w-full flex flex-row justify-between">
+                <span></span>
+                <span></span>
+                <div class="flex flex-row text-orange-800 dark:text-orange-200"><span><Icon icon="barcode" s/></span><span>4.32</span></div>
+
+            </div>
+        </figcaption>
+
+        <h3 class=" text-center whitespace-nowrap relative">
+            <span
                 use:editable={{
                     action: (text) => onTitleChanged(text),
                     active: false
@@ -250,19 +267,22 @@ async function dblclick(e) {
                 bind:this={titleElement}>
                 {columnDef.title}
             </span>
-            
+
             {#if columnDef.finishing}
-                <div class="inline-block text-green-600 h-3 w-3 ml-2">
-                    <FaCheck/>
+                <div class="inline-block text-green-600">
+                    <Icon icon="check" s/>
                 </div>
             {/if}
+
+
+
             <!--button class="absolute right-2 w-4 sm:w-2.5"
                     on:click|stopPropagation={(e) => add(KanbanColumnTop)}>
                 <FaPlus/>
             </button-->
-        </h2>
-    </header>
-    <ul class="w-full border-stone-400 dark:border-stone-700 pb-20" bind:this={column_element}>
+        </h3>
+    </figure>
+    <div class="w-full pb-0" bind:this={column_element}>
         {#if showInserterAfterId === KanbanColumnTop}
             <Inserter   onInsert={async (title, summary) => {await onInsert(currentColumnIdx, title, summary, KanbanColumnTop)}}
                         bind:this={inserter} />
@@ -270,16 +290,16 @@ async function dblclick(e) {
 
         {#if column_items && column_items.length > 0}
             {#each column_items as element, item_idx (getItemKey(element))}
-                <Card   item={element} 
+                <Card   item={element}
                         bind:this={cards[item_idx]}>
                     <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="kanbanCardBottomProps" let:element>
                         <slot name="kanbanCardBottomProps" {element}/>
                     </svelte:fragment>
@@ -297,6 +317,6 @@ async function dblclick(e) {
                         bind:this={inserter} />
         {/if}
 
-    </ul>
-</section>
+            </div>
+</div>
 {/if}

package/components/kanban/internal/kanban.inserter.svelte

@@ -28,35 +28,32 @@ async function onSummaryChanged(text) {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
-<li class=" mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent
-            bg-stone-100 dark:bg-stone-700">
+<figure class=" bg-stone-200 dark:bg-stone-700 outline outline-8 outline-stone-200 dark:outline-stone-700 ring-1 ring-offset-8 ring-stone-300 dark:ring-stone-700">
 
     <!-- whitespace-nowrap overflow-clip  -->
-    <h3  class=" text-base font-semibold min-h-[1.75rem]
+    <h4  class=" font-semibold min-h-[1.75rem]
                  sm:min-h-[1.25rem]
-                w-full sm:flex-none "
+                "
                 use:editable={{
                     action: (text) => onInsert(text, ''),
                     active: false,
                     onSoftEnter: softEnter
                 }}
                 bind:this={titleElement}>
-    </h3>
+    </h4>
 
     {#if editSummary}
-        <p class="  text-sm min-h-[1.25rem]
-                text-stone-400
-                max-h-[75px] 
-                overflow-hidden"
+        <figcaption class="
+                max-h-[75px]"
                 use:editable={{
-                    action: (text) => onSummaryChanged(text), 
+                    action: (text) => onSummaryChanged(text),
                     active: false,
                     onFinish: (d) => {editSummary = false}}}
                 bind:this={summaryElement}>
             {summary}
-        </p>
+        </figcaption>
     {/if}
-    
-    
 
-</li>
+
+
+    </figure>

package/components/kanban/internal/kanban.move.menu.svelte

@@ -21,7 +21,7 @@ function replaceMenu() {
         <p class="text-xs h-4 w-[100px] truncate"></p>
         <button class=" h-8 w-full
                         text-xs font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
-                        bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                        bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-200 dark:active:bg-stone-600
                         border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                         inline-flex items-center justify-center"
                         on:click={(e) => { onMoveUp(item); replaceMenu()}}>
@@ -30,7 +30,7 @@ function replaceMenu() {
 
         <button class=" h-8 w-full
                         text-xs font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
-                        bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                        bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-200 dark:active:bg-stone-600
                         border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                         inline-flex items-center justify-center"
                         on:click={(e) => { onMoveDown(item); replaceMenu()}}>
@@ -44,7 +44,7 @@ function replaceMenu() {
             <p class="text-xs h-4 w-[100px] ml-1 truncate">{column.title}</p>
             <button class=" h-8 w-full
                             text-base font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
-                            bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                            bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-200 dark:active:bg-stone-600
                             border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                             inline-flex items-center justify-center"
                             on:click={(e) => { onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
@@ -53,7 +53,7 @@ function replaceMenu() {
 
             <button class=" h-8 w-full
                             text-base font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
-                            bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                            bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-200 dark:active:bg-stone-600
                             border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                             inline-flex items-center justify-center"
                             on:click={(e) => { onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
@@ -69,13 +69,13 @@ function replaceMenu() {
         <p class="text-base truncate "></p>
         <div class="flex flex-row ml-auto gap-3">
             <button class=" bg-transparent
-                            w-[55px] h-[55px] 
+                            w-[55px] h-[55px]
                             m-0
                             flex items-center justify-center
                             disable-dbl-tap-zoom"
                             on:click={(e) => { onMoveUp(item); replaceMenu()}}>
                 <div class="    w-10 h-10
-                                text-white bg-zinc-500 hover:bg-zinc-500 
+                                text-white bg-zinc-500 hover:bg-zinc-500
                                 font-medium rounded-full text-sm text-center shadow-md
                                 dark:bg-zinc-500 dark:hover:bg-zinc-500
                                 flex items-center justify-center">
@@ -86,13 +86,13 @@ function replaceMenu() {
             </button>
 
             <button class=" bg-transparent
-                            w-[55px] h-[55px] 
+                            w-[55px] h-[55px]
                             m-0
                             flex items-center justify-center
                             disable-dbl-tap-zoom"
                             on:click={(e) => { onMoveDown(item); replaceMenu()}}>
                 <div class="    w-10 h-10
-                                text-white bg-zinc-500 hover:bg-zinc-500 
+                                text-white bg-zinc-500 hover:bg-zinc-500
                                 font-medium rounded-full text-sm text-center shadow-md
                                 dark:bg-zinc-500 dark:hover:bg-zinc-500
                                 flex items-center justify-center">
@@ -110,13 +110,13 @@ function replaceMenu() {
             <p class="text-base mt-4 truncate w-[120px]">{column.title}</p>
             <div class="flex flex-row ml-auto gap-3">
                 <button class=" bg-transparent
-                                w-[55px] h-[55px] 
+                                w-[55px] h-[55px]
                                 m-0
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom"
                                 on:click={(e) => { onReplace(item, idx, KanbanColumnTop); replaceMenu()}}>
                     <div class="    w-10 h-10
-                                    text-white bg-zinc-500 hover:bg-zinc-500 
+                                    text-white bg-zinc-500 hover:bg-zinc-500
                                     font-medium rounded-full text-sm text-center shadow-md
                                     dark:bg-zinc-500 dark:hover:bg-zinc-500
                                     flex items-center justify-center">
@@ -127,13 +127,13 @@ function replaceMenu() {
                 </button>
 
                 <button class=" bg-transparent
-                                w-[55px] h-[55px] 
+                                w-[55px] h-[55px]
                                 m-0
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom"
                                 on:click={(e) => { onReplace(item, idx, KanbanColumnBottom); replaceMenu()}}>
                     <div class="    w-10 h-10
-                                    text-white bg-zinc-500 hover:bg-zinc-500 
+                                    text-white bg-zinc-500 hover:bg-zinc-500
                                     font-medium rounded-full text-sm text-center shadow-md
                                     dark:bg-zinc-500 dark:hover:bg-zinc-500
                                     flex items-center justify-center">

package/components/kanban/internal/kanban.props.svelte

@@ -9,6 +9,7 @@ let definition = getContext("rKanban-definition");
 let properties = definition.properties.filter((p) => p.position == position);
 let propElements = [];
 let placeholder = "";
+let properties_no = count_properties();
 export function editProperty(field) {
   let propIdx = properties.findIndex((p) => p.name == field);
   if (propIdx < 0)
@@ -26,6 +27,15 @@ export function editProperty(field) {
       break;
   }
 }
+function count_properties() {
+  let count = 0;
+  for (let i = 0; i < properties.length; i++) {
+    let property = properties[i];
+    if (item[property.a])
+      count++;
+  }
+  return count;
+}
 function on_date_changed(value, a) {
   if (!value)
     item[a] = "";
@@ -88,13 +98,18 @@ async function editTags(field, propIdx) {
 }
 </script>
 
-<section class="flex flex-row justify-between">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-structure -->
+{#if properties && properties_no > 0}
+<figcaption class = "kanban-prooperties">
+<div class="flex flex-row justify-between">
     {#each properties as prop, idx}
         {#if true}
             {@const notEmpty = item[prop.a] || placeholder==prop.name}
             {#if prop.type == rList_property_type.Date && notEmpty}
                 <DatePicker
                     self={item}
+                    typo = {true}
                     a={prop.a}
                     compact={true}
                     s="sm"
@@ -103,6 +118,7 @@ async function editTags(field, propIdx) {
             {:else if prop.type == rList_property_type.Combo && notEmpty}
                 <Combo
                         compact={true}
+                        typo
                         inContext="props"
                         self={item}
                         a={prop.a}
@@ -112,18 +128,15 @@ async function editTags(field, propIdx) {
                         icon={false}
                         definition={prop.combo_definition}
                         s="sm"
-                        changed={(k,n) => { /*fake assignment for component rer-ender*/ item[prop.a] = item[prop.a]; }} 
+                        changed={(k,n) => { /*fake assignment for component rer-ender*/ item[prop.a] = item[prop.a]; }}
                         bind:this={propElements[idx]}/>
             {:else if prop.type == rList_property_type.Static}
-                <p
-                    class="     h-6
-                                text-sm sm:min-h-[1rem]
-                                text-base-sm min-h-[1.5rem]
-                                text-stone-600 dark:text-stone-400
+                <span
+                    class="     text-stone-600 dark:text-stone-400
                                 text-right"
                                 bind:this={propElements[idx]}>
                     {item[prop.a]}
-                </p>
+                </span>
             {:else if prop.type == rList_property_type.Tags && notEmpty}
                 <Tags
                     class="mt-1"
@@ -141,4 +154,6 @@ async function editTags(field, propIdx) {
             {/if}
         {/if}
     {/each}
-</section>
+</div>
+</figcaption>
+{/if}

package/components/kanban/kanban.svelte

@@ -2,9 +2,12 @@
 import { KanbanColumnBottom, KanbanColumnTop, rKanban_definition } from "./Kanban";
 import { parseWidthDirective, clearActiveItem, getPrev, getNext, remove, insertAt, insertAfter, swapElements, getActive } from "../../utils";
 import { contextItemsStore, contextTypesStore, data_tick_store } from "../../stores";
-import Column from "./internal/kanban.column.svelte";
+import KanbanColumn from "./internal/kanban.column.svelte";
 import { informModification, pushChanges } from "../../updates";
+import { Editable } from "../..";
+export let self = null;
 export let title = "";
+export let summary = "";
 export let c = "";
 export const CLEAR_SELECTION = 0;
 export const KEEP_SELECTION = -1;
@@ -142,21 +145,6 @@ export function edit(item, field) {
   }
 }
 let columns = [];
-afterUpdate(() => {
-  for (let i = 1; i < columns.length; i++) {
-    let left_column = columns[i - 1];
-    let right_column = columns[i];
-    const left_column_height = left_column?.getHeight();
-    const right_column_height = right_column?.getHeight();
-    if (left_column_height > right_column_height) {
-      left_column?.setBorder(left_column.SET_RIGHT);
-      right_column?.setBorder(right_column.CLEAR_LEFT);
-    } else {
-      left_column?.setBorder(left_column.CLEAR_RIGHT);
-      right_column?.setBorder(right_column.SET_LEFT);
-    }
-  }
-});
 export function scrollViewToCard(item) {
   columns.forEach((c2) => {
     const card = c2.findCardByItem(item);
@@ -320,7 +308,7 @@ export async function replace(item, toColumnIdx, afterElement) {
     toColumn.reload();
   }
 }
-async function onInsert(columnIdx, title2, summary, afterId) {
+async function onInsert(columnIdx, title2, summary2, afterId) {
   const columnState = definition.columns[columnIdx].state;
   const oa = definition.orderAttrib;
   const sa = definition.stateAttrib;
@@ -329,7 +317,7 @@ async function onInsert(columnIdx, title2, summary, afterId) {
   const columnBottom = allItems.findLast((e) => e[sa] == columnState);
   let newElement = {
     [definition.titleAttrib]: title2,
-    [definition.summaryAttrib]: summary,
+    [definition.summaryAttrib]: summary2,
     [sa]: columnState
   };
   if (afterId == KanbanColumnTop) {
@@ -444,81 +432,40 @@ export function add(item, columnIdx = -1) {
 {#key renderToken}
 <slot/> <!-- Launch definition settings -->
 
-{#if title}
-    <p class="hidden sm:block mt-3 ml-3 pb-5 text-lg text-left">{title}</p>
+    <figure class="px-0 sm:px-4">
+    <h1><Editable self={self} a={title}/></h1>
+    <figcaption><Editable self={self} a={summary}/></figcaption>
+    </figure>
+
     <!--hr class="hidden sm:block w-full"-->
-{/if}
 
 <section    id="__hd_svelte_kanban_columns_container"
-            class="h-full mt-5 flex flex-row no-wrap  
-                overflow-x-auto snap-x snap-mandatory sm:snap-none
-                {user_class}"> <!--sm:justify-center -->
+            class="h-full flex flex-row no-wrap
+                overflow-x-auto snap-x snap-mandatory
+                sm: space-x-0
+                sm:divide-x
+                divide-stone-500 dark:divide-stone-700
+                pb-20
+                "> <!--sm:justify-center -->
     {#each definition.columns as column, idx (column.id)}
-        <Column currentColumnIdx={idx}
+        <KanbanColumn currentColumnIdx={idx}
                 {onInsert}
                 bind:this={columns[idx]}>
 
-            
+
             <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="kanbanCardBottomProps" let:element>
                 <slot name="kanbanCardBottomProps" {element}/>
             </svelte:fragment>
-            
-        </Column>
+
+        </KanbanColumn>
     {/each}
 </section>
 {/key}
-
-<style>
-    .grid-1
-    {
-        display: grid;
-        grid-template-columns: 100%;
-    }
-
-    .grid-2
-    {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
-
-    .grid-3
-    {
-        display: grid;
-        grid-template-columns: 33% 33% 33%;
-    }
-
-    .grid-4
-    {
-        display: grid;
-        grid-template-columns: 25% 25% 25% 25%;
-    }
-    .grid-5
-    {
-        display: grid;
-        grid-template-columns: 20% 20% 20% 20% 20%;
-    }
-    .grid-6
-    {
-        display: grid;
-        grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6;
-    }
-    .grid-7
-    {
-        display: grid;
-        grid-template-columns: 14.3% 14.3% 14.3% 14.3% 14.3% 14.3% 14.3%;
-    }
-    .grid-8
-    {
-        display: grid;
-        grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
-    }
-
-</style>

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

@@ -2,7 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        self?: null | undefined;
         title?: string | undefined;
+        summary?: string | undefined;
         c?: string | undefined;
         CLEAR_SELECTION?: 0 | undefined;
         KEEP_SELECTION?: -1 | undefined;

package/components/list/List.d.ts

@@ -34,6 +34,7 @@ export declare class rList_property_tags extends rList_property {
 }
 export declare class rList_definition {
     name: string;
+    icon: string;
     title: string;
     title_editable: boolean;
     on_title_changed: Function | undefined;

package/components/list/List.js

@@ -42,6 +42,7 @@ export class rList_property_tags extends rList_property {
 }
 export class rList_definition {
     name = '';
+    icon = '';
     title = '';
     title_editable = false;
     on_title_changed = undefined;