@humandialog/forms.svelte 0.5.8 → 0.5.10

package/components/table/table.d.ts

@@ -1,11 +1,11 @@
-export declare class rTable_column {
-    header: string;
-    field: string;
-    size: number;
-    cl: string;
-}
-export declare class rTable_definition {
-    columns: rTable_column[];
-    items: Array<any>;
-    items_ticket: number;
-}
+export declare class rTable_column {
+    header: string;
+    field: string;
+    size: number;
+    cl: string;
+}
+export declare class rTable_definition {
+    columns: rTable_column[];
+    items: Array<any>;
+    items_ticket: number;
+}

package/components/table/table.js

@@ -1,11 +1,11 @@
-export class rTable_column {
-    header;
-    field;
-    size = 0;
-    cl = '';
-}
-export class rTable_definition {
-    columns = [];
-    items = null;
-    items_ticket = 0;
-}
+export class rTable_column {
+    header;
+    field;
+    size = 0;
+    cl = '';
+}
+export class rTable_definition {
+    columns = [];
+    items = null;
+    items_ticket = 0;
+}

package/components/table/table.svelte.d.ts

@@ -1,75 +1,75 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        context?: string | undefined;
-        collection?: string | undefined;
-        self?: null | undefined;
-        objects?: null | undefined;
-        headers?: any[] | undefined;
-        fields?: any[] | undefined;
-        select?: string | undefined;
-        cinfo?: string | undefined;
-        focus?: boolean | undefined;
-        nav?: boolean | undefined;
-        c?: string | undefined;
-        typename?: string | undefined;
-        toolbarOperations?: any[] | undefined;
-        menuOperations?: any[] | undefined;
-        refresh?: (() => void) | undefined;
-        updateObjects?: ((_objects: any) => void) | undefined;
-        updateSelf?: ((_self: any) => void) | undefined;
-        selectItem?: ((itm: any, cinfo: any) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        c0: {
-            item: unknown;
-        };
-        c1: {
-            item: unknown;
-        };
-        c2: {
-            item: unknown;
-        };
-        c3: {
-            item: unknown;
-        };
-        c4: {
-            item: unknown;
-        };
-        c5: {
-            item: unknown;
-        };
-        c6: {
-            item: unknown;
-        };
-        c7: {
-            item: unknown;
-        };
-        c8: {
-            item: unknown;
-        };
-        c9: {
-            item: unknown;
-        };
-        c10: {
-            item: unknown;
-        };
-        c11: {
-            item: unknown;
-        };
-    };
-};
-export type TableProps = typeof __propDef.props;
-export type TableEvents = typeof __propDef.events;
-export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
-    get refresh(): () => void;
-    get updateObjects(): (_objects: any) => void;
-    get updateSelf(): (_self: any) => void;
-    get selectItem(): (itm: any, cinfo: any) => void;
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: string | undefined;
+        collection?: string | undefined;
+        self?: null | undefined;
+        objects?: null | undefined;
+        headers?: any[] | undefined;
+        fields?: any[] | undefined;
+        select?: string | undefined;
+        cinfo?: string | undefined;
+        focus?: boolean | undefined;
+        nav?: boolean | undefined;
+        c?: string | undefined;
+        typename?: string | undefined;
+        toolbarOperations?: any[] | undefined;
+        menuOperations?: any[] | undefined;
+        refresh?: (() => void) | undefined;
+        updateObjects?: ((_objects: any) => void) | undefined;
+        updateSelf?: ((_self: any) => void) | undefined;
+        selectItem?: ((itm: any, cinfo: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        c0: {
+            item: unknown;
+        };
+        c1: {
+            item: unknown;
+        };
+        c2: {
+            item: unknown;
+        };
+        c3: {
+            item: unknown;
+        };
+        c4: {
+            item: unknown;
+        };
+        c5: {
+            item: unknown;
+        };
+        c6: {
+            item: unknown;
+        };
+        c7: {
+            item: unknown;
+        };
+        c8: {
+            item: unknown;
+        };
+        c9: {
+            item: unknown;
+        };
+        c10: {
+            item: unknown;
+        };
+        c11: {
+            item: unknown;
+        };
+    };
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+    get refresh(): () => void;
+    get updateObjects(): (_objects: any) => void;
+    get updateSelf(): (_self: any) => void;
+    get selectItem(): (itm: any, cinfo: any) => void;
+}
+export {};

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-12 sm:w-10 h-12 sm: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;
 }
-</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>
+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 {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>

package/components/tag.svelte.d.ts

@@ -1,19 +1,20 @@
-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 {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        color: string;
+        onRemove?: any | undefined;
+        onColor?: 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

@@ -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

@@ -1,31 +1,32 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        tags?: string | undefined;
-        getGlobalTags: Function;
-        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 {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        tags?: string | undefined;
+        getGlobalTags: Function;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        onSelect?: any | undefined;
+        onUpdateAllTags?: any | undefined;
+        canChangeColor?: boolean | 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/components/textarea.ltop.svelte.d.ts

@@ -1,35 +1,35 @@
-/** @typedef {typeof __propDef.props}  TextareaProps */
-/** @typedef {typeof __propDef.events}  TextareaEvents */
-/** @typedef {typeof __propDef.slots}  TextareaSlots */
-export default class Textarea extends SvelteComponentTyped<{
-    label?: string | undefined;
-    c?: string | undefined;
-    s?: string | undefined;
-    placeholder?: string | undefined;
-    val?: string | undefined;
-    sy?: string | undefined;
-    r?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextareaProps = typeof __propDef.props;
-export type TextareaEvents = typeof __propDef.events;
-export type TextareaSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        c?: string | undefined;
-        s?: string | undefined;
-        placeholder?: string | undefined;
-        val?: string | undefined;
-        sy?: string | undefined;
-        r?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+/** @typedef {typeof __propDef.props}  TextareaProps */
+/** @typedef {typeof __propDef.events}  TextareaEvents */
+/** @typedef {typeof __propDef.slots}  TextareaSlots */
+export default class Textarea extends SvelteComponentTyped<{
+    label?: string | undefined;
+    c?: string | undefined;
+    s?: string | undefined;
+    placeholder?: string | undefined;
+    val?: string | undefined;
+    sy?: string | undefined;
+    r?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TextareaProps = typeof __propDef.props;
+export type TextareaEvents = typeof __propDef.events;
+export type TextareaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        c?: string | undefined;
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        val?: string | undefined;
+        sy?: string | undefined;
+        r?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};