@humandialog/forms.svelte 0.5.7 → 0.5.9

package/components/kanban/internal/kanban.card.svelte

@@ -53,8 +53,8 @@ export function _scrollViewToCard() {
   card?.scrollIntoView(
     {
       behavior: "smooth",
-      block: "start",
-      inline: "center"
+      block: "nearest",
+      inline: "nearest"
     }
   );
 }
@@ -131,7 +131,7 @@ export async function editProperty(field) {
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
-<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selectedClass} {focusedClass}"
+<li class="mx-2 pt-2 pb-4 px-1 rounded-md border border-transparent {selectedClass} {focusedClass} scroll-mt-[50px] sm:scroll-mt-[40px]"
      class:cursor-pointer={!isCardActive}
      on:click={activate}
      use:selectable={item} 

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

@@ -131,7 +131,8 @@ async function editTags(field, propIdx) {
                     getGlobalTags={prop.getAllTags}
                     s="xs"
                     onSelect={prop.onSelect}
-                    onCreate={prop.onCreate}
+                    onUpdateAllTags={prop.onUpdateAllTags}
+                    canChangeColor={prop.canChangeColor}
                     bind:this={propElements[idx]}
                 />
             {/if}

package/components/kanban/kanban.svelte

@@ -150,6 +150,13 @@ afterUpdate(() => {
     }
   }
 });
+export function scrollViewToCard(item) {
+  columns.forEach((c2) => {
+    const card = c2.findCardByItem(item);
+    if (card)
+      card._scrollViewToCard();
+  });
+}
 export function moveUp(item) {
   const columnIdx = getColumnIdx(item);
   let allItems = definition.getItems();

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

@@ -13,6 +13,7 @@ declare const __propDef: {
         reload?: ((data: object | object[], selectElement?: number) => Promise<void>) | undefined;
         getColumnIdx?: ((item: any) => number) | undefined;
         edit?: ((item: object, field: string) => void) | undefined;
+        scrollViewToCard?: ((item: any) => void) | undefined;
         moveUp?: ((item: object) => void) | undefined;
         moveDown?: ((item: object) => void) | undefined;
         replace?: ((item: any, toColumnIdx: any, afterElement: any) => void) | undefined;
@@ -51,6 +52,7 @@ export default class Kanban extends SvelteComponentTyped<KanbanProps, KanbanEven
     get reload(): (data: object | object[], selectElement?: number) => Promise<void>;
     get getColumnIdx(): (item: any) => number;
     get edit(): (item: object, field: string) => void;
+    get scrollViewToCard(): (item: any) => void;
     get moveUp(): (item: object) => void;
     get moveDown(): (item: object) => void;
     get replace(): (item: any, toColumnIdx: any, afterElement: any) => void;

package/components/kanban/kanban.tags.svelte

@@ -4,8 +4,9 @@ import { rList_property_tags } from "../list/List";
 export let name = "";
 export let a = "";
 export let getAllTags = void 0;
-export let onCreate = void 0;
+export let onUpdateAllTags = void 0;
 export let onSelect = void 0;
+export let canChangeColor = false;
 export let top = false;
 export let middle = true;
 export let bottom = false;
@@ -22,7 +23,8 @@ if (!a && name) {
   tagsProperty.name = name;
 }
 tagsProperty.onSelect = onSelect;
-tagsProperty.onCreate = onCreate;
+tagsProperty.onUpdateAllTags = onUpdateAllTags;
+tagsProperty.canChangeColor = canChangeColor;
 tagsProperty.getAllTags = getAllTags;
 if (top)
   tagsProperty.position = KanbanCardTop;

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

@@ -4,8 +4,9 @@ declare const __propDef: {
         name?: string | undefined;
         a?: string | undefined;
         getAllTags?: Function | undefined;
-        onCreate?: Function | undefined;
+        onUpdateAllTags?: Function | undefined;
         onSelect?: Function | undefined;
+        canChangeColor?: boolean | undefined;
         top?: boolean | undefined;
         middle?: boolean | undefined;
         bottom?: boolean | undefined;

package/components/list/List.d.ts

@@ -22,8 +22,9 @@ export declare class rList_property_combo extends rList_property {
 }
 export declare class rList_property_tags extends rList_property {
     constructor();
-    onCreate: Function | undefined;
+    canChangeColor: boolean;
     getAllTags: Function | undefined;
+    onUpdateAllTags: Function | undefined;
 }
 export declare class rList_definition {
     title: string;

package/components/list/List.js

@@ -30,8 +30,9 @@ export class rList_property_tags extends rList_property {
     constructor() {
         super(rList_property_type.Tags);
     }
-    onCreate = undefined;
+    canChangeColor = false;
     getAllTags = undefined;
+    onUpdateAllTags = undefined;
 }
 export class rList_definition {
     title = '';

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

@@ -189,16 +189,27 @@ function setSelectionAtEnd(element) {
   sel.removeAllRanges();
   sel.addRange(range);
 }
+let rootElement;
+export function scrollToView() {
+  rootElement.scrollIntoView(
+    {
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    }
+  );
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if item}
 {@const element_title = item[title]}
 
-<section    class="mt-3 flex flex-row my-0  w-full text-sm text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class}"
+<section    class="mt-3 flex flex-row my-0  w-full text-sm text-stone-700 dark:text-stone-300 cursor-default rounded-md border border-transparent {selected_class} {focused_class} scroll-mt-[50px] sm:scroll-mt-[40px]"
             on:contextmenu={on_contextmenu}
             role="menu"
-            tabindex="-1">
+            tabindex="-1"
+            bind:this={rootElement}>
 
     <slot name="left" element={item}/>
     

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         contextMenu: any;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
+        scrollToView?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,5 +26,6 @@ export type ListSlots = typeof __propDef.slots;
 export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
     get activate(): () => void;
     get editProperty(): (field: string) => void;
+    get scrollToView(): () => void;
 }
 export {};

package/components/list/list.svelte

@@ -135,7 +135,7 @@ export function reload(data, selectElement = KEEP_SELECTION) {
   if (!activate_after_dom_update)
     activateItem("props", null, []);
 }
-export function moveUp(element) {
+export async function moveUp(element) {
   if (!orderAttrib)
     return;
   let prev = getPrev(items, element);
@@ -143,11 +143,13 @@ export function moveUp(element) {
     return;
   items = swapElements(items, element, prev);
   [element[orderAttrib], prev[orderAttrib]] = [prev[orderAttrib], element[orderAttrib]];
+  await tick();
+  scrollToSelectedElement();
   informModification(element, orderAttrib);
   informModification(prev, orderAttrib);
   pushChanges();
 }
-export function moveDown(element) {
+export async function moveDown(element) {
   if (!orderAttrib)
     return;
   let next = getNext(items, element);
@@ -155,6 +157,8 @@ export function moveDown(element) {
     return;
   items = swapElements(items, element, next);
   [element[orderAttrib], next[orderAttrib]] = [next[orderAttrib], element[orderAttrib]];
+  await tick();
+  scrollToSelectedElement();
   informModification(element, orderAttrib);
   informModification(next, orderAttrib);
   pushChanges();
@@ -182,6 +186,15 @@ export async function addRowAfter(after = null) {
     }
   });
 }
+function scrollToSelectedElement() {
+  const activeItem = getActive("props");
+  if (!activeItem)
+    return;
+  const activeItemKey = getItemKey(activeItem);
+  const activeIdx = items?.findIndex((i) => getItemKey(i) == activeItemKey);
+  if (activeIdx >= 0)
+    rows[activeIdx].scrollToView();
+}
 export function remove(element) {
   let removing_idx = items?.findIndex((e) => e == element);
   if (removing_idx < 0)

package/components/list/list.svelte.d.ts

@@ -21,8 +21,8 @@ declare const __propDef: {
         MIN_ORDER?: 0 | undefined;
         rereder?: (() => void) | undefined;
         reload?: ((data: object | object[], selectElement?: number) => void) | undefined;
-        moveUp?: ((element: object) => void) | undefined;
-        moveDown?: ((element: object) => void) | undefined;
+        moveUp?: ((element: object) => Promise<void>) | undefined;
+        moveDown?: ((element: object) => Promise<void>) | undefined;
         addRowAfter?: ((after?: object | null) => Promise<void>) | undefined;
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
@@ -50,8 +50,8 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get MIN_ORDER(): 0;
     get rereder(): () => void;
     get reload(): (data: object | object[], selectElement?: number) => void;
-    get moveUp(): (element: object) => void;
-    get moveDown(): (element: object) => void;
+    get moveUp(): (element: object) => Promise<void>;
+    get moveDown(): (element: object) => Promise<void>;
     get addRowAfter(): (after?: object | null) => Promise<void>;
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;

package/components/menu.d.ts

@@ -1,4 +1,5 @@
+import Floating_container from './Floating_container.svelte';
 export declare function showMenu(around: DOMRect | DOMPoint, operations: any): void;
 export declare function hideWholeContextMenu(): void;
-export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): void;
+export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): Floating_container | null;
 export declare function showGridMenu(around: DOMRect | DOMPoint, operations: any): void;

package/components/menu.js

@@ -50,6 +50,7 @@ export function showFloatingToolbar(around, toolbar, props = {}) {
     }
     else
         console.error('what now?');
+    return toolbar_component;
 }
 export function showGridMenu(around, operations) {
     showFloatingToolbar(around, Grid, { operations: operations });

package/components/tag.colors.svelte

@@ -0,0 +1,92 @@
+<script>export let brightntess = "medium";
+export let onSelect;
+$:
+  colors = getColors(brightntess);
+function getColors(brightntess2) {
+  switch (brightntess2) {
+    case "light":
+      return [
+        "bg-red-300",
+        "bg-orange-300",
+        "bg-amber-300",
+        "bg-yellow-300",
+        "bg-lime-300",
+        "bg-green-300",
+        "bg-indigo-300",
+        "bg-blue-300",
+        "bg-sky-300",
+        "bg-cyan-300",
+        "bg-teal-300",
+        "bg-emerald-300",
+        "bg-violet-300",
+        "bg-purple-300",
+        "bg-fuchsia-300",
+        "bg-pink-300",
+        "bg-rose-300",
+        "bg-slate-300"
+      ];
+    case "medium":
+      return [
+        "bg-red-600",
+        "bg-orange-600",
+        "bg-amber-600",
+        "bg-yellow-600",
+        "bg-lime-600",
+        "bg-green-600",
+        "bg-indigo-600",
+        "bg-blue-600",
+        "bg-sky-600",
+        "bg-cyan-600",
+        "bg-teal-600",
+        "bg-emerald-600",
+        "bg-violet-600",
+        "bg-purple-600",
+        "bg-fuchsia-600",
+        "bg-pink-600",
+        "bg-rose-600",
+        "bg-slate-600"
+      ];
+    case "dark":
+      return [
+        "bg-red-800",
+        "bg-orange-800",
+        "bg-amber-800",
+        "bg-yellow-800",
+        "bg-lime-800",
+        "bg-green-800",
+        "bg-indigo-800",
+        "bg-blue-800",
+        "bg-sky-800",
+        "bg-cyan-800",
+        "bg-teal-800",
+        "bg-emerald-800",
+        "bg-violet-800",
+        "bg-purple-800",
+        "bg-fuchsia-800",
+        "bg-pink-800",
+        "bg-rose-800",
+        "bg-slate-800"
+      ];
+  }
+}
+</script>
+
+<menu class="grid grid-cols-6">
+    {#each colors as color, idx}
+        {@const isTL = idx == 0}
+        {@const isTR = idx == 5}
+        {@const isBL = idx == colors.length-6}
+        {@const isBR = idx == colors.length-1}
+        
+        {@const borderTL = isTL ? "rounded-tl-lg": ""}
+        {@const borderTR = isTR ? "rounded-tr-lg": ""}
+        {@const borderBL = isBL ? "rounded-bl-lg": ""}
+        {@const borderBR = isBR ? "rounded-br-lg": ""}
+        
+        <button class="{color} w-10 h-10 {borderTL} {borderTR} {borderBL} {borderBR}"
+                on:click={() => onSelect(color)}>
+
+        </button>
+    {/each}
+
+</menu>

package/components/tag.colors.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        brightntess?: string | undefined;
+        onSelect: Function;
+    };
+    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/tag.svelte

@@ -1,8 +1,20 @@
 <script>import FaTimes from "svelte-icons/fa/FaTimes.svelte";
+import { showFloatingToolbar } from "./menu";
+import TagColors from "./tag.colors.svelte";
+import { onMount } from "svelte";
 export let name;
 export let color;
 export let onRemove = void 0;
+export let onColor = void 0;
 export let s = "sm";
+onMount(() => {
+  if (onColor && rootElement) {
+    rootElement.addEventListener("click", showColorPicker);
+    rootElement.classList.add("cursor-pointer");
+  }
+  return () => {
+  };
+});
 let pr = onRemove ? "pr-1" : "pr-2";
 let font;
 let x_size;
@@ -20,21 +32,39 @@ switch (s) {
     x_size = "ml-3 sm:ml-1 mt-0.5 sm:mt-1 w-3 sm:w-2 h-3 sm:h-2";
     break;
 }
+let rootElement;
+let colorPicker = null;
+function showColorPicker(e) {
+  const rect = rootElement.getBoundingClientRect();
+  colorPicker = showFloatingToolbar(rect, TagColors, {
+    onSelect: onSelectColor
+  });
+}
+function onSelectColor(color2) {
+  onColor(name, color2);
+  colorPicker?.hide();
+}
 </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
+	class="mt-1 pl-2 {pr} rounded text-white flex flex-row {color}"
+	
+	bind:this={rootElement}>
+	<div class={font}>{name}</div>
+	{#if onRemove}
+		<div
+			class="no-print inline-block {x_size} hover:cursor-pointer"
+			on:click|stopPropagation={onRemove}>
+			<FaTimes />
+		</div>
+	{/if}
 </div>
 
 <style>
-    @media print
-    {
-        .no-print, .no-print *{
-            display: none !important;
-        }
-    }
-</style>
+	@media print {
+		.no-print,
+		.no-print * {
+			display: none !important;
+		}
+	}
+</style>

package/components/tag.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         name: string;
         color: string;
         onRemove?: any | undefined;
+        onColor?: any | undefined;
         s?: string | undefined;
     };
     events: {

package/components/tags.svelte

@@ -12,7 +12,8 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let onSelect = void 0;
-export let onCreate = void 0;
+export let onUpdateAllTags = void 0;
+export let canChangeColor = false;
 export let compact = true;
 export let inContext = "";
 export let pushChangesImmediately = true;
@@ -110,7 +111,26 @@ function onNewTagCreated(key, name) {
   globalTagsTable = decomposeTags(globalTags);
   tagsTable = decomposeTags(tags, globalTagsTable);
   applyChange();
-  onCreate(globalTags);
+  onUpdateAllTags(globalTags);
+}
+function onColorizeTag(name, color) {
+  let globalTags = getGlobalTags();
+  globalTagsTable = decomposeTags(globalTags);
+  const srcGlobalTag = globalTagsTable.find((i) => i.label == name);
+  srcGlobalTag.color = color;
+  tagsTable = decomposeTags(tags, globalTagsTable);
+  const srcTag = tagsTable.find((i) => i.label == name);
+  srcTag.color = color;
+  globalTags = "";
+  for (let i = 0; i < globalTagsTable.length; i++) {
+    const tag = globalTagsTable[i];
+    if (tag.color)
+      globalTags += `#${tag.label}:${tag.color} `;
+    else
+      globalTags += `#${tag.label} `;
+  }
+  applyChange();
+  onUpdateAllTags(globalTags);
 }
 function decomposeTags(tags2, referenceTable = void 0) {
   let table = [];
@@ -135,8 +155,10 @@ function decomposeTags(tags2, referenceTable = void 0) {
           color = referenceItem.color;
       }
       if (!color)
-        color = "DarkGray";
+        color = "bg-stone-400";
     }
+    if (!color.startsWith("bg-"))
+      color = "bg-stone-400";
     table.push({
       label,
       color
@@ -175,7 +197,8 @@ switch (s) {
     {#each tagsTable as tag}
         {#if isEditable}
             <Tag name={tag.label} color={tag.color} {s}
-                 onRemove={(e) => {onRemoveTag(tag.label)}}/>
+                 onRemove={(e) => {onRemoveTag(tag.label)}}
+                 onColor={canChangeColor ? onColorizeTag : null}/>
         {:else}
             <Tag name={tag.label} color={tag.color} {s}/>
         {/if}

package/components/tags.svelte.d.ts

@@ -9,7 +9,8 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         onSelect?: any | undefined;
-        onCreate?: any | undefined;
+        onUpdateAllTags?: any | undefined;
+        canChangeColor?: boolean | undefined;
         compact?: boolean | undefined;
         inContext?: string | undefined;
         pushChangesImmediately?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -114,6 +114,7 @@
     "./components/table/item.svelte": "./components/table/item.svelte",
     "./components/table/table.svelte": "./components/table/table.svelte",
     "./components/table/table": "./components/table/table.js",
+    "./components/tag.colors.svelte": "./components/tag.colors.svelte",
     "./components/tag.svelte": "./components/tag.svelte",
     "./components/tags.svelte": "./components/tags.svelte",
     "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",

package/page.svelte

@@ -18,7 +18,7 @@
 	export let focused_only = false;
 	export let inContext = '';
 	export let cl =
-		'w-full h-full flex flex-col dark:bg-stone-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0'; // border-green-500
+		'w-full flex flex-col bg-white dark:bg-stone-900 overflow-x-hidden py-1 px-1 border-0'; // border-green-500
 	export let c = '';
 
 	export let toolbarOperations = undefined;