@humandialog/forms.svelte 0.5.8 → 0.5.9

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.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/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.8",
+  "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;