@humandialog/forms.svelte 0.3.2 → 0.3.4

package/components/simple.table.svelte

@@ -0,0 +1,106 @@
+<script>
+    import {data_tick_store, context_items_store, context_info_store } from '../stores.js'
+    import {getContext} from 'svelte';
+
+    export let context = ""
+    export let collection = ""
+    export let self = null
+    export let objects = null;
+    export let headers = [];
+    export let fields = [];
+    export let select = "sel"
+    export let cinfo = 'default'
+    export let focus = true
+    export let nav = true
+    let items = null;
+    
+    let ctx = context ? context : getContext('ctx');
+        
+    let item = null 
+    if(self == null)
+        item = $context_items_store[ctx];
+    else
+        item = self    
+
+    if(objects != null)
+        items = objects
+    else if (item != null)
+        items = item[collection]
+    
+    let  last_tick = $data_tick_store
+    
+    let t = 0
+    $:{ t = $data_tick_store        
+        if(t > last_tick)
+        {
+            last_tick = t            
+            if(self == null)
+                item = $context_items_store[ctx];
+            else
+                item = self    
+
+            if(objects != null)
+                items = objects
+            else if (item != null)
+                items = item[collection]
+                    
+            //console.log("t["+ctx+", "+collection + "]: " + t + ", "  + last_tick)
+        }        
+    }
+    
+
+    
+    const select_item = (itm, cinfo) => () => {
+       
+        $context_items_store[select] = itm;
+        $context_info_store[select] = cinfo;
+        
+        if(focus)
+            $context_items_store.focused = select
+        if(nav)
+            $data_tick_store = $data_tick_store + 1;
+    };
+    
+    let selected_item = $context_items_store[select]
+    $: selected_item = $context_items_store[select]
+</script>
+
+
+    <table class="min-w-full h-auto divide-gray-200">
+        <thead class="bg-gray-50 sticky">
+            <tr>
+                {#if headers != null}
+                    {#each headers as header}
+                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            {header}
+                        </th>
+                    {/each}    
+                {:else}
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        No headers... 
+                    </th>
+                {/if}
+            </tr>
+        </thead>
+        {#if (items != null && items.length > 0 && fields != null)}
+            <tbody class="bg-white ">
+                {#each items as item}
+                {#if (item != null )}
+                    {#if item == selected_item}
+                    <tr >
+                        {#each fields as field}
+                            <td class="px-4 py-1 bg-slate-100 whitespace-nowrap text-sm font-normal text-gray-900">{item[field]}</td>
+                        {/each}
+                    </tr>
+                    {:else}
+                    <tr on:click={select_item(item, cinfo)}>
+                        {#each fields as field}
+                            <td class="px-4 py-1 whitespace-nowrap text-sm font-normal text-gray-900">{item[field]}</td>
+                        {/each}
+                    </tr>
+                    {/if}
+                 {/if}
+                {/each}
+            </tbody>
+        {/if}
+    </table>

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

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  SimpleProps */
+/** @typedef {typeof __propDef.events}  SimpleEvents */
+/** @typedef {typeof __propDef.slots}  SimpleSlots */
+export default class Simple extends SvelteComponentTyped<{
+    context?: string | undefined;
+    self?: null | undefined;
+    focus?: boolean | undefined;
+    select?: string | undefined;
+    nav?: boolean | undefined;
+    collection?: string | undefined;
+    objects?: null | undefined;
+    headers?: any[] | undefined;
+    fields?: any[] | undefined;
+    cinfo?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SimpleProps = typeof __propDef.props;
+export type SimpleEvents = typeof __propDef.events;
+export type SimpleSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: string | undefined;
+        self?: null | undefined;
+        focus?: boolean | undefined;
+        select?: string | 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: {};
+};
+export {};

package/components/table/_template.table.svelte

@@ -0,0 +1,111 @@
+<script>
+    import {data_tick_store, context_items_store, context_info_store } from '../../stores.js'
+    import {getContext} from 'svelte';
+
+    export let context = ""
+    export let collection = ""
+    export let self = null
+    export let objects = null;
+    export let headers = [];
+    export let fields = [];
+    export let select = "sel"
+    export let cinfo = 'default'
+    export let focus = true
+    export let nav = true
+    let items = null;
+    
+    let ctx = context ? context : getContext('ctx');
+        
+    let item = null 
+    if(self == null)
+        item = $context_items_store[ctx];
+    else
+        item = self    
+
+    if(objects != null)
+        items = objects
+    else if (item != null)
+        items = item[collection]
+    
+    let  last_tick = $data_tick_store
+    
+    let t = 0
+    $:{ t = $data_tick_store        
+        if(t > last_tick)
+        {
+            last_tick = t            
+            if(self == null)
+                item = $context_items_store[ctx];
+            else
+                item = self    
+
+            if(objects != null)
+                items = objects
+            else if (item != null)
+                items = item[collection]
+                    
+            //console.log("t["+ctx+", "+collection + "]: " + t + ", "  + last_tick)
+        }        
+    }
+    
+
+    
+    const select_item = (itm, cinfo) => () => {
+       
+        $context_items_store[select] = itm;
+        $context_info_store[select] = cinfo;
+        
+        if(focus)
+            $context_items_store.focused = select
+        if(nav)
+            $data_tick_store = $data_tick_store + 1;
+    };
+    
+    let selected_item = $context_items_store[select]
+    $: selected_item = $context_items_store[select]
+</script>
+
+
+    <table class="min-w-full h-auto divide-gray-200 cursor-default">
+        <thead class="bg-gray-50 sticky">
+            <tr>
+                {#if headers != null}
+                    {#each headers as header}
+                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            {header}
+                        </th>
+                    {/each}    
+                {:else}
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        No headers... 
+                    </th>
+                {/if}
+            </tr>
+        </thead>
+        {#if (items != null && items.length > 0 && fields != null)}
+            <tbody class="bg-white dark:bg-slate-900">
+                {#each items as item}
+                    {#if (item != null )}
+                        <tr on:click={select_item(item, cinfo)}
+                            class="whitespace-nowrap text-sm font-normal text-gray-900 dark:text-gray-300"
+                            class:bg-slate-100={item==selected_item}
+                            class:dark:bg-slate-700={item==selected_item}>
+                            {#if $$slots['row']}
+                                <slot name='row' {item}/>
+                            {:else}
+                                {#each fields as field}
+                                <td class="px-4 py-1">
+                                    {#if $$slots['cell']}
+                                        <slot name='cell' {field} value={item[field]}></slot>
+                                    {:else}
+                                        {item[field]}
+                                    {/if}
+                                </td>
+                                {/each}
+                            {/if}
+                        </tr>
+                    {/if}
+                {/each}
+            </tbody>
+        {/if}
+    </table>

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

@@ -0,0 +1,57 @@
+/** @typedef {typeof __propDef.props}  TemplateProps */
+/** @typedef {typeof __propDef.events}  TemplateEvents */
+/** @typedef {typeof __propDef.slots}  TemplateSlots */
+export default class Template extends SvelteComponentTyped<{
+    context?: string | undefined;
+    self?: null | undefined;
+    focus?: boolean | undefined;
+    select?: string | 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: {
+        context?: string | undefined;
+        self?: null | undefined;
+        focus?: boolean | undefined;
+        select?: string | 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

@@ -0,0 +1,17 @@
+<script>import { getContext, setContext } from "svelte";
+import { rTable_definition, rTable_column } from "./table";
+export let header = "";
+export let field = "";
+export let size = 0;
+let table_definition = null;
+table_definition = getContext("rTable-definition");
+let col = new rTable_column();
+col.field = field;
+col.header = header;
+col.size = size;
+if ($$restProps["class"])
+  col.cl = $$restProps["class"];
+table_definition.columns.push(col);
+</script>
+
+

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

@@ -0,0 +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 {};

package/components/table/item.svelte

@@ -0,0 +1,10 @@
+<script>import { getContext } from "svelte";
+export let e;
+export let idx;
+let definition = null;
+definition = getContext("rTable-definition");
+if (!idx)
+  definition.items = new Array();
+definition.items.push(e);
+definition.items_ticket++;
+</script>

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

@@ -0,0 +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 {};

package/components/table/table.d.ts

@@ -0,0 +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;
+}

package/components/table/table.js

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

package/components/table/table.svelte

@@ -0,0 +1,150 @@
+<script>import { data_tick_store, context_items_store, context_info_store, context_types_store } from "../../stores.js";
+import { getContext, setContext, onDestroy } from "svelte";
+import { rTable_definition } from "./table";
+import { parse_width_directive } from "../../utils.js";
+export let context = "";
+export let collection = "";
+export let self = null;
+export let objects = null;
+export let headers = [];
+export let fields = [];
+export let select = "sel";
+export let cinfo = "default";
+export let focus = true;
+export let nav = true;
+export let c = "";
+export let typename = "";
+let definition = new rTable_definition();
+setContext("rTable-definition", definition);
+setContext("rIs-table-component", true);
+let ctx = context ? context : getContext("ctx");
+let items = null;
+let item = null;
+let last_tick = -1;
+let selected_item;
+let cs = c ? parse_width_directive(c) : "w-full min-w-full";
+$: {
+  if ($data_tick_store > last_tick)
+    refresh();
+}
+$:
+  selected_item = $context_items_store[select];
+onDestroy(() => {
+  select_item(null, null);
+});
+export function refresh() {
+  last_tick = $data_tick_store;
+  item = self ?? $context_items_store[ctx];
+  if (objects)
+    items = objects;
+  else if (item && collection)
+    items = item[collection];
+  else
+    items = [];
+  if (!typename)
+    typename = $context_types_store[ctx];
+}
+export function update_objects(_objects) {
+  objects = _objects;
+  refresh();
+}
+export function update_self(_self) {
+  self = _self;
+  refresh();
+}
+export function select_item(itm, cinfo2) {
+  $context_items_store[select] = itm;
+  $context_info_store[select] = cinfo2;
+  if (itm && itm.oclType)
+    $context_types_store[select] = itm.oclType;
+  if (focus)
+    $context_items_store.focused = select;
+  if (nav)
+    $data_tick_store = $data_tick_store + 1;
+}
+let last_tick_internal = -1;
+function override_items_from_slot(...args) {
+  if (last_tick_internal != definition.items_ticket) {
+    last_tick_internal = definition.items_ticket;
+    if (definition.items)
+      items = definition.items;
+    console.log("override_items_from_slot", definition.items, definition.items_ticket);
+  }
+  return 0;
+}
+</script>
+
+{#if true}
+    <slot/> <!-- let definition execute -->
+    
+    <table class="{cs} h-auto divide-gray-200 cursor-default">
+        <thead class="bg-gray-50 sticky">
+            <tr>
+                {#if definition || headers.length }
+                    {@const lheaders = headers.length ? headers : definition.columns.map( v => v.header )}
+                    {#if lheaders.length && lheaders.some(s => s.length > 0)}
+                        {#each lheaders as header}
+                            <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                {header}
+                            </th>
+                        {/each}    
+                    {/if}
+                {:else}
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        No headers... 
+                    </th>
+                {/if}
+            </tr>
+        </thead>
+        {#if (items != null) && (items.length > 0)}
+            {@const lfields = fields.length ? fields : definition.columns.map( v => v.field )}
+            <tbody class="bg-white dark:bg-slate-900">
+                {#each items as item}
+                    {#if (item != null )}
+                        <tr on:click={ (e) => { select_item(item, cinfo);} }
+                            class="whitespace-nowrap text-sm font-normal text-gray-900 dark:text-gray-300"
+                            class:bg-slate-100={item==selected_item}
+                            class:dark:bg-slate-700={item==selected_item}>
+                            {#each lfields as field, i}
+                                {@const cc = `c${i}`}
+                                {@const column = definition.columns[i]}
+                                {@const col_size = (column && column.size) ? `${column.size*0.25}rem` : '' } 
+                                <td class="pl-4 py-1 {column.cl}" style:width={col_size}>
+                                    {#if $$slots[cc]}
+                                        {#if cc=='c0'}
+                                            <slot name='c0' {item}/>
+                                        {:else if cc=='c1'}
+                                            <slot name='c1' {item}/>
+                                        {:else if cc=='c2'}
+                                            <slot name='c2' {item}/>
+                                        {:else if cc=='c3'}
+                                            <slot name='c3' {item}/>
+                                        {:else if cc=='c4'}
+                                            <slot name='c4' {item}/>
+                                        {:else if cc=='c5'}
+                                            <slot name='c5' {item}/>
+                                        {:else if cc=='c6'}
+                                            <slot name='c6' {item}/>
+                                        {:else if cc=='c7'}
+                                            <slot name='c7' {item}/>
+                                        {:else if cc=='c8'}
+                                            <slot name='c8' {item}/>
+                                        {:else if cc=='c9'}
+                                            <slot name='c9' {item}/>
+                                        {:else if cc=='c10'}
+                                            <slot name='c10' {item}/>
+                                        {:else if cc=='c11'}
+                                            <slot name='c11' {item}/>
+                                        {/if}
+                                    {:else}
+                                        {item[field]}
+                                    {/if}
+                                </td>
+                            {/each}
+                        </tr>
+                    {/if}
+                {/each}
+            </tbody>
+        {/if}
+    </table>
+{/if}

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

@@ -0,0 +1,73 @@
+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;
+        refresh?: (() => void) | undefined;
+        update_objects?: ((_objects: any) => void) | undefined;
+        update_self?: ((_self: any) => void) | undefined;
+        select_item?: ((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 update_objects(): (_objects: any) => void;
+    get update_self(): (_self: any) => void;
+    get select_item(): (itm: any, cinfo: any) => void;
+}
+export {};

package/components/textarea.ltop.svelte

@@ -0,0 +1,55 @@
+<script>
+    export let label = 'lbl'
+    export let placeholder = 'Ex. Audi'
+    export let val = ''
+    export let sy = 'm'
+   
+    export let r = 5;
+       
+    export  let s = 'sm'
+    let     label_mb = '' //
+    let     input_p = ''
+    
+    switch (s)
+    {
+        case 'md':
+            label_mb = 'mb-2';
+            input_p = 'pt-2.5 pb-2.5'
+            break;
+        default:
+            label_mb = 'mb-1'
+            input_p = 'pt-0.5 pb-1'    
+            break;
+            
+            
+    }
+    
+    export let c='4-8'
+    let col_span = ''
+    switch (c)
+    {
+        case '4-4':
+            col_span = 'col-span-4';
+            break;
+        case '4-8':
+            col_span = 'col-span-4 sm:col-span-8';
+            break;
+        case '4-8-12':
+            col_span = 'col-span-4 sm:col-span-8 xl:col-span-12';
+            break;
+        default:
+            col_span = 'col-span-4 sm:col-span-8 xl:col-span-12';
+            break;
+    }       
+    
+</script>    
+
+<div class="{col_span}">
+    <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
+    <textarea id="description" rows="5" 
+    class="block {input_p} w-full text-sm text-gray-900 bg-gray-50 
+    rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500
+     dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white 
+     dark:focus:ring-primary-500 dark:focus:border-primary-500" 
+     placeholder={placeholder}>{val}</textarea>                    
+</div>