@humandialog/forms.svelte 0.5.4 → 0.5.6

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

@@ -1,57 +1,57 @@
-/** @typedef {typeof __propDef.props}  TemplateProps */
-/** @typedef {typeof __propDef.events}  TemplateEvents */
-/** @typedef {typeof __propDef.slots}  TemplateSlots */
-export default class Template extends SvelteComponentTyped<{
-    focus?: boolean | undefined;
-    select?: string | undefined;
-    context?: string | undefined;
-    self?: null | undefined;
-    nav?: boolean | undefined;
-    collection?: string | undefined;
-    objects?: null | undefined;
-    headers?: any[] | undefined;
-    fields?: any[] | undefined;
-    cinfo?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    row: {
-        item: any;
-    };
-    cell: {
-        field: any;
-        value: any;
-    };
-}> {
-}
-export type TemplateProps = typeof __propDef.props;
-export type TemplateEvents = typeof __propDef.events;
-export type TemplateSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        focus?: boolean | undefined;
-        select?: string | undefined;
-        context?: string | undefined;
-        self?: null | undefined;
-        nav?: boolean | undefined;
-        collection?: string | undefined;
-        objects?: null | undefined;
-        headers?: any[] | undefined;
-        fields?: any[] | undefined;
-        cinfo?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        row: {
-            item: any;
-        };
-        cell: {
-            field: any;
-            value: any;
-        };
-    };
-};
-export {};
+/** @typedef {typeof __propDef.props}  TemplateProps */
+/** @typedef {typeof __propDef.events}  TemplateEvents */
+/** @typedef {typeof __propDef.slots}  TemplateSlots */
+export default class Template extends SvelteComponentTyped<{
+    focus?: boolean | undefined;
+    select?: string | undefined;
+    context?: string | undefined;
+    self?: null | undefined;
+    nav?: boolean | undefined;
+    collection?: string | undefined;
+    objects?: null | undefined;
+    headers?: any[] | undefined;
+    fields?: any[] | undefined;
+    cinfo?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    row: {
+        item: any;
+    };
+    cell: {
+        field: any;
+        value: any;
+    };
+}> {
+}
+export type TemplateProps = typeof __propDef.props;
+export type TemplateEvents = typeof __propDef.events;
+export type TemplateSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        focus?: boolean | undefined;
+        select?: string | undefined;
+        context?: string | undefined;
+        self?: null | undefined;
+        nav?: boolean | undefined;
+        collection?: string | undefined;
+        objects?: null | undefined;
+        headers?: any[] | undefined;
+        fields?: any[] | undefined;
+        cinfo?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        row: {
+            item: any;
+        };
+        cell: {
+            field: any;
+            value: any;
+        };
+    };
+};
+export {};

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

@@ -1,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        header?: string | undefined;
-        field?: string | undefined;
-        size?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ColumnProps = typeof __propDef.props;
-export type ColumnEvents = typeof __propDef.events;
-export type ColumnSlots = typeof __propDef.slots;
-export default class Column extends SvelteComponentTyped<ColumnProps, ColumnEvents, ColumnSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        header?: string | undefined;
+        field?: string | undefined;
+        size?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColumnProps = typeof __propDef.props;
+export type ColumnEvents = typeof __propDef.events;
+export type ColumnSlots = typeof __propDef.slots;
+export default class Column extends SvelteComponentTyped<ColumnProps, ColumnEvents, ColumnSlots> {
+}
+export {};

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

@@ -1,17 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        e: any;
-        idx: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ItemProps = typeof __propDef.props;
-export type ItemEvents = typeof __propDef.events;
-export type ItemSlots = typeof __propDef.slots;
-export default class Item extends SvelteComponentTyped<ItemProps, ItemEvents, ItemSlots> {
-}
-export {};
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        e: any;
+        idx: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ItemProps = typeof __propDef.props;
+export type ItemEvents = typeof __propDef.events;
+export type ItemSlots = typeof __propDef.slots;
+export default class Item extends SvelteComponentTyped<ItemProps, ItemEvents, ItemSlots> {
+}
+export {};

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.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,207 @@
+<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 getGlobalTags;
+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) {
+  const globalTags = getGlobalTags();
+  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} `;
+  let globalTags = getGlobalTags();
+  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() {
+  const globalTags = getGlobalTags();
+  globalTagsTable = decomposeTags(globalTags);
+  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;
+        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 {};