@humandialog/forms.svelte 0.5.4 → 0.5.5

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

@@ -5,6 +5,7 @@ export let id;
 export let readonly = false;
 export let text = "";
 export let placeholder = false;
+export let active = false;
 export let editable;
 export let clickEdit;
 let user_class = $$props.class ?? "";
@@ -20,14 +21,27 @@ let user_class = $$props.class ?? "";
         {text}
     </p>
 {:else if text}
-    <p {id} class=" sm:text-xs sm:min-h-[1rem]
-                    text-base min-h-[1.5rem]
-                    text-stone-400 
-                    {user_class}"
-            use:_editable={editable}
-            on:click>
+    {#if active}
+        <p {id} class=" sm:text-xs sm:min-h-[1rem]
+                        text-base min-h-[1.5rem]
+                        text-stone-400 
+                        {user_class}"
+                use:_editable={{
+                    action: editable,
+                    active: true
+                }}
+                on:click>
+            {text}
+        </p>
+    {:else}
+        <p {id} class=" sm:text-xs sm:min-h-[1rem]
+            text-base min-h-[1.5rem]
+            text-stone-400 
+            {user_class}"
+        on:click>
         {text}
-</p>
+        </p>
+    {/if}
 {:else if placeholder}
     <p   {id} class="sm:text-xs sm:min-h-[1rem]
                      text-base min-h-[1.5rem]

package/components/list/internal/list.element.summary.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         readonly?: boolean | undefined;
         text?: string | undefined;
         placeholder?: boolean | undefined;
+        active?: boolean | undefined;
         editable: any;
         clickEdit: any;
     };

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

@@ -201,25 +201,29 @@ async function force_editing(field) {
             tabindex="0">
         <div class="block sm:flex sm:flex-row" on:click={(e) => on_active_row_clicked(e, 'top')}>
            
-            {#if definition.title_readonly}
-                <p  class=" text-lg font-semibold min-h-[1.75rem]
-                            sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
-                            whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
-                    id="__hd_list_ctrl_{item[item_key]}_Title"> 
-                    {element_title}
-                </p>
-            {:else}
+           {#if is_row_active}
                 {#key item[title]} <!-- Wymusza pełne wyrenderowanie zwłasza po zmiane z pustego na tekst  -->
                     <p  class=" text-lg font-semibold min-h-[1.75rem]
                                 sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
                                 whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
                         id="__hd_list_ctrl_{item[item_key]}_Title"
-                        use:editable={(text) => {change_name(text)}}
-                        on:click={edit}> 
+                        use:editable={{
+                            action: (text) => {change_name(text)},
+                            active: true,
+                            readonly: definition.title_readonly,
+                        }}> 
                             {element_title}
                     </p>
                 {/key}
-            {/if}
+           {:else}
+                <p  class=" text-lg font-semibold min-h-[1.75rem]
+                            sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                            whitespace-nowrap overflow-clip w-full sm:flex-none sm:w-2/3"
+                    id="__hd_list_ctrl_{item[item_key]}_Title"> 
+                    {element_title}
+                </p>
+           {/if}
+           
            
 
             <section class="hidden sm:block w-full sm:flex-none sm:w-1/3">
@@ -237,6 +241,7 @@ async function force_editing(field) {
                     placeholder={placeholder == 'Summary'}
                     editable={(text) => {change_summary(text)}}
                     clickEdit={edit}
+                    active={is_row_active}
                 />
         {/if}
 

package/components/list/list.svelte

@@ -102,8 +102,8 @@ export function reload(data, selectElement = KEEP_SELECTION) {
       break;
     case KEEP_OR_SELECT_NEXT:
       {
-        selectElementId = currentSelectedItem.Id ?? 0;
         if (currentSelectedItem) {
+          selectElementId = currentSelectedItem.Id ?? 0;
           const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
           if (selectedItemIdx != void 0 && selectedItemIdx >= 0 && selectedItemIdx < items.length - 1)
             altSelectElementId = items[selectedItemIdx + 1].Id ?? 0;

package/components/sidebar/sidebar.group.svelte

@@ -1,9 +1,47 @@
 <script>
+    import {FaChevronDown, FaChevronUp} from 'svelte-icons/fa'
+
     export let border = false;
+    export let title = ''
+    export let collapsable = false;
+    export let onExpand = undefined
 
     let border_class = border ? " pt-4 mt-4 border-t border-stone-200 dark:border-stone-700" : ""
+    let title_border = title ? border_class : ""
+    let list_border = title ? "" : border_class
+    let collapsed = true;
+
+    function toggleCollapsed()
+    {
+        if(collapsed && !!onExpand)
+            onExpand();
+
+        collapsed = !collapsed;
+    }
 </script>
 
-<ul class="space-y-2 {border_class}">
-    <slot/>
-</ul>
+{#if title}
+    <p class="text-base sm:text-xs uppercase font-semibold {title_border}">
+        {title}
+        {#if collapsable}
+            <button class="inline-block ml-3 sm:ml-2 sm:mt-0.5 w-4 sm:w-3 h-4 sm:h-3" on:click={toggleCollapsed}>
+                {#if collapsed}
+                    <FaChevronDown/>
+                {:else}
+                    <FaChevronUp/>
+                {/if}
+            </button>
+        {/if}
+    </p>
+{/if}
+
+{#if !collapsable}
+    <ul class="space-y-2 {list_border}">
+        <slot/>
+    </ul>
+{:else if !collapsed}
+    <ul class="space-y-2 {list_border}">
+        <slot/>
+    </ul>
+{/if}
+

package/components/sidebar/sidebar.group.svelte.d.ts

@@ -2,7 +2,10 @@
 /** @typedef {typeof __propDef.events}  SidebarEvents */
 /** @typedef {typeof __propDef.slots}  SidebarSlots */
 export default class Sidebar extends SvelteComponentTyped<{
+    title?: string | undefined;
     border?: boolean | undefined;
+    collapsable?: boolean | undefined;
+    onExpand?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +18,10 @@ export type SidebarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        title?: string | undefined;
         border?: boolean | undefined;
+        collapsable?: boolean | undefined;
+        onExpand?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/tag.svelte

@@ -0,0 +1,40 @@
+<script>import FaTimes from "svelte-icons/fa/FaTimes.svelte";
+export let name;
+export let color;
+export let onRemove = void 0;
+export let s = "sm";
+let pr = onRemove ? "pr-1" : "pr-2";
+let font;
+let x_size;
+switch (s) {
+  case "md":
+    font = "mt-0.5 text-sm font-semibold";
+    x_size = "mt-1 w-3 h-3";
+    break;
+  case "sm":
+    font = "mt-0 sm:mt-0.5 text-sm sm:text-xs font-semibold";
+    x_size = "ml-3 sm:ml-1 mt-1 sm:mt-1.5 w-3 sm:w-2 h-3 sm:h-2";
+    break;
+  case "xs":
+    font = "mt-0 sm:mt-0 text-xs sm:text-[0.65rem] font-semibold sm:font-normal";
+    x_size = "ml-3 sm:ml-1 mt-0.5 sm:mt-1 w-3 sm:w-2 h-3 sm:h-2";
+    break;
+}
+</script>
+
+<div class="mt-1 pl-2 {pr} rounded text-white flex flex-row" style="background-color:{color}">
+    <div class="{font}">{name}</div>
+    {#if onRemove}
+        <div class="no-print inline-block {x_size} hover:cursor-pointer" 
+            on:click={onRemove}><FaTimes/></div>
+    {/if}
+</div>
+
+<style>
+    @media print
+    {
+        .no-print, .no-print *{
+            display: none !important;
+        }
+    }
+</style>

package/components/tag.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        color: string;
+        onRemove?: any | undefined;
+        s?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TagProps = typeof __propDef.props;
+export type TagEvents = typeof __propDef.events;
+export type TagSlots = typeof __propDef.slots;
+export default class Tag extends SvelteComponentTyped<TagProps, TagEvents, TagSlots> {
+}
+export {};

package/components/tags.svelte

@@ -0,0 +1,203 @@
+<script>import { tick, getContext } from "svelte";
+import Tag from "./tag.svelte";
+import FaPlus from "svelte-icons/fa/FaPlus.svelte";
+import Combo from "./combo/combo.svelte";
+import ComboItem from "./combo/combo.item.svelte";
+import { contextItemsStore, data_tick_store, contextTypesStore } from "../stores.js";
+import { informModification, pushChanges } from "../updates.js";
+export let tags = "";
+export let globalTags = "";
+export let self = null;
+export let a = "";
+export let context = "";
+export let typename = "";
+export let onSelect = void 0;
+export let onCreate = void 0;
+export let compact = true;
+export let inContext = "";
+export let pushChangesImmediately = true;
+export let changed = void 0;
+export let s = "sm";
+let userClass = $$props.class ?? "";
+let item = null;
+let ctx = context ? context : getContext("ctx");
+let tagsTable = [];
+let globalTagsTable = [];
+let isEditable = true;
+$:
+  setup($data_tick_store, $contextItemsStore);
+function setup(...args) {
+  globalTagsTable = decomposeTags(globalTags);
+  if (!tags) {
+    item = self ?? $contextItemsStore[ctx];
+    if (!typename)
+      typename = $contextTypesStore[ctx];
+    if (!typename) {
+      if (item.$type)
+        typename = item.$type;
+      else if (item.$ref) {
+        let s2 = item.$ref.split("/");
+        typename = s2[1];
+      }
+    }
+    if (!item[a])
+      tags = "";
+    else
+      tags = item[a];
+  }
+  tagsTable = decomposeTags(tags, globalTagsTable);
+  if (compact) {
+    isEditable = false;
+    if (!inContext)
+      isEditable = true;
+    else {
+      let contexts = inContext.split(" ");
+      contexts.forEach((ctx2) => {
+        const selectedItem = $contextItemsStore[ctx2];
+        if (selectedItem && selectedItem.Id == item.Id)
+          isEditable = true;
+      });
+    }
+  } else
+    isEditable = true;
+}
+let addComboVisible = false;
+let addCombo;
+export async function show(event, hideCallback) {
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  addComboVisible = true;
+  await tick();
+  const onAfterCloseCombo = () => {
+    addComboVisible = false;
+    if (hideCallback)
+      hideCallback();
+  };
+  addCombo?.show(void 0, onAfterCloseCombo);
+}
+function applyChange() {
+  if (onSelect)
+    onSelect(tags);
+  else if (item != null) {
+    item[a] = tags;
+    if (typename)
+      informModification(item, a, typename);
+    else
+      informModification(item, a);
+    if (pushChangesImmediately)
+      pushChanges();
+  }
+  if (!!changed)
+    changed(value);
+}
+function onSelectTag(itm, key, name) {
+  tags += `#${key} `;
+  tagsTable = decomposeTags(tags, globalTagsTable);
+  applyChange();
+}
+function onRemoveTag(tag) {
+  tags = tags.replace(`#${tag}`, "");
+  tagsTable = decomposeTags(tags, globalTagsTable);
+  applyChange();
+}
+function onNewTagCreated(key, name) {
+  tags += `#${key} `;
+  globalTags += `#${key} `;
+  globalTagsTable = decomposeTags(globalTags);
+  tagsTable = decomposeTags(tags, globalTagsTable);
+  applyChange();
+  onCreate(globalTags);
+}
+function decomposeTags(tags2, referenceTable = void 0) {
+  let table = [];
+  if (!tags2)
+    return table;
+  let names = tags2.split("#");
+  for (let i = 0; i < names.length; i++) {
+    let name = names[i].trim();
+    if (!name)
+      continue;
+    let components = name.split(":");
+    let label = components[0];
+    if (!label)
+      continue;
+    let color;
+    if (components.length > 1)
+      color = components[1];
+    if (!color) {
+      if (referenceTable && Array.isArray(referenceTable)) {
+        const referenceItem = referenceTable.find((e) => e.label == label);
+        if (referenceItem)
+          color = referenceItem.color;
+      }
+      if (!color)
+        color = "DarkGray";
+    }
+    table.push({
+      label,
+      color
+    });
+  }
+  return table;
+}
+function getNotUsedTags() {
+  let result = globalTagsTable.filter((e) => {
+    const label = e.label;
+    let idx = tagsTable.findIndex((f) => f.label == label);
+    if (idx < 0)
+      return true;
+    else
+      return false;
+  });
+  return result;
+}
+let gap = "gap-2";
+switch (s) {
+  case "md":
+    gap = "gap-3 sm:gap-2";
+    break;
+  case "sm":
+    gap = "gap-2 sm:gap-2";
+    break;
+  case "xs":
+    gap = "gap-2 sm:gap-1";
+    break;
+}
+</script>
+
+<div class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
+    {#each tagsTable as tag}
+        {#if isEditable}
+            <Tag name={tag.label} color={tag.color} {s}
+                 onRemove={(e) => {onRemoveTag(tag.label)}}/>
+        {:else}
+            <Tag name={tag.label} color={tag.color} {s}/>
+        {/if}
+    {/each}
+
+    {#if isEditable}
+        {#if !addComboVisible}
+            {#if !compact}
+                <button    class="mt-1 pl-0 pr-1 rounded text-stone-500 flex flex-row border-stone-500 border hover:cursor-pointer"
+                        on:click={(e) => { show(e, undefined)} }>
+                    <div class="ml-1 mt-1 w-3 h-3"><FaPlus/></div>
+                </button>
+            {/if}
+        {:else}
+            <Combo  compact={true} 
+                    inContext='data'
+                    onSelect={onSelectTag}
+                    onNewItemCreated={onNewTagCreated}
+                    s={s}
+                    filtered
+                    bind:this={addCombo}>
+                {@const not_used_tags = getNotUsedTags()}
+                {#each not_used_tags as tag}
+                    <ComboItem key={tag.label}/>
+                {/each}
+            </Combo>
+        {/if}
+    {/if}
+</div>

package/components/tags.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tags?: string | undefined;
+        globalTags?: string | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        onSelect?: any | undefined;
+        onCreate?: any | undefined;
+        compact?: boolean | undefined;
+        inContext?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        changed?: undefined;
+        s?: string | undefined;
+        show?: ((event: any, hideCallback: any) => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TagsProps = typeof __propDef.props;
+export type TagsEvents = typeof __propDef.events;
+export type TagsSlots = typeof __propDef.slots;
+export default class Tags extends SvelteComponentTyped<TagsProps, TagsEvents, TagsSlots> {
+    get show(): (event: any, hideCallback: any) => Promise<void>;
+}
+export {};

package/horizontal.toolbar.svelte

@@ -12,6 +12,7 @@
     import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
     import {showMenu} from './components/menu'
     import {push} from 'svelte-spa-router'
+    import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store} from './stores.js'
     //import Menu from './components/contextmenu.svelte'
 
     import {
@@ -38,6 +39,7 @@
     
 
     export let appConfig;
+    export let clearsContext = 'sel props'
     
     let config = null;
     let has_selection_details = false;
@@ -194,11 +196,28 @@
         showMenu(pt, options);    
     }
 
+    function clearSelection()
+    {
+        if (!clearsContext) return;
+
+		let contexts = clearsContext.split(' ');
+		contexts.forEach((c) => {
+			$contextItemsStore[c] = null;
+			$context_info_store[c] = '';
+		});
+
+		//e.stopPropagation();
+
+		$contextToolbarOperations = [];
+		$data_tick_store = $data_tick_store + 1;
+    }
+
 </script>
 
-<div class="print flex flex-row w-full">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="no-print flex flex-row w-full" on:click={clearSelection}>
     <div class="flex-none left-0 flex h-12 sm:h-10">
-        <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click={toggle_navigator}>
+        <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
             <Icon class="w-8 sm:w-6 h-8 sm:h-6" component={icon}/>
         </button>
     </div>
@@ -211,7 +230,7 @@
     <div class="flex-none ml-auto flex h-12 sm:h-10">        
         <button
             class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
-            on:click={show_options}>
+            on:click|stopPropagation={show_options}>
 
             <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaCog} />
         </button>
@@ -220,7 +239,7 @@
 </div>
 
 {#if tabs.length > 1 &&  $main_sidebar_visible_store != "*"}
-    <div  class="print flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
+    <div  class="no-print flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
         <div class="sticky top-0 flex h-full w-10 bg-stone-900 flex-col items-center text-stone-100 shadow">
             <VerticalToolbar {appConfig} mobile={true}/>
         </div>    

package/horizontal.toolbar.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  HorizontalSlots */
 export default class Horizontal extends SvelteComponentTyped<{
     appConfig: any;
+    clearsContext?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -14,6 +15,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         appConfig: any;
+        clearsContext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -38,15 +38,22 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
+export { default as Tag } from './components/tag.svelte';
+export { default as Tags } from './components/tags.svelte';
 export { default as Kanban } from './components/kanban/kanban.svelte';
+export { default as KanbanSource } from './components/kanban/kanban.source.svelte';
 export { default as KanbanColumn } from './components/kanban/kanban.column.svelte';
 export { default as KanbanTitle } from './components/kanban/kanban.title.svelte';
 export { default as KanbanSummary } from './components/kanban/kanban.summary.svelte';
-export { default as KanbanCallckacks } from './components/kanban/kanban.callbacks.svelte';
+export { default as KanbanStaticProperty } from './components/kanban/kanban.static.svelte';
+export { default as KanbanDateProperty } from './components/kanban/kanban.date.svelte';
+export { default as KanbanComboProperty } from './components/kanban/kanban.combo.svelte';
+export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
+export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect } from './utils';
 export { mainViewReloader, reloadMainView } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
-export { informModification, informItem, pushChanges } from './updates';
+export { informModification, informModificationEx, informItem, pushChanges } from './updates';

package/index.js

@@ -44,15 +44,22 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
+export { default as Tag } from './components/tag.svelte';
+export { default as Tags } from './components/tags.svelte';
 export { default as Kanban } from './components/kanban/kanban.svelte';
+export { default as KanbanSource } from './components/kanban/kanban.source.svelte';
 export { default as KanbanColumn } from './components/kanban/kanban.column.svelte';
 export { default as KanbanTitle } from './components/kanban/kanban.title.svelte';
 export { default as KanbanSummary } from './components/kanban/kanban.summary.svelte';
-export { default as KanbanCallckacks } from './components/kanban/kanban.callbacks.svelte';
+export { default as KanbanStaticProperty } from './components/kanban/kanban.static.svelte';
+export { default as KanbanDateProperty } from './components/kanban/kanban.date.svelte';
+export { default as KanbanComboProperty } from './components/kanban/kanban.combo.svelte';
+export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
+export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, selectable, handleSelect } from './utils';
 export { mainViewReloader, reloadMainView } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
-export { informModification, informItem, pushChanges } from './updates'; // tmp
+export { informModification, informModificationEx, informItem, pushChanges } from './updates'; // tmp