@humandialog/forms.svelte 0.3.2 → 0.3.4

package/page.svelte

@@ -0,0 +1,83 @@
+<script>
+    export let context = "data"
+    export let self = null
+    export let typename = '';
+    export let focused_only = false
+    export let in_context = ''
+    export let cl =
+        "w-full h-full flex flex-col dark:bg-slate-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0" // border-green-500
+    export let c = ''
+    import {
+        writable
+    } from 'svelte/store';
+    import {
+        setContext
+    } from 'svelte';
+    import {
+        context_items_store,
+        data_tick_store,
+        context_types_store
+    } from './stores.js'
+    switch (c) {
+        case 'main':
+            cl = "w-full h-full flex flex-col dark:bg-slate-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0"
+            break;
+        case 'main-d':
+            cl = "bg-slate-800 w-full h-full flex flex-col dark:bg-slate-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0"
+            break;
+        default:
+            //NOP    
+    }
+    setContext('ctx', context)
+    let item = null;
+    let visibilty = "hidden"
+    if (in_context == '')
+        in_context = context;
+    let last_tick = 0
+    if (self != null)
+        $context_items_store[context] = self
+    
+    if(typename)
+        $context_types_store[context] = typename;
+
+    item = $context_items_store[context]
+    visibilty = "hidden";
+    if (item != null) {
+        if (focused_only) {
+            if ($context_items_store.focused == in_context)
+                visibilty = "";
+        } else
+            visibilty = "";
+    }
+    let t = 0
+    $: {
+        t = $data_tick_store
+        if (t > last_tick) {
+            last_tick = t
+            if (self != null)
+                $context_items_store[context] = self
+            
+            if(typename)
+                $context_types_store[context] = typename;
+
+            item = $context_items_store[context]
+            visibilty = "hidden";
+            if (item != null) {
+                if (focused_only) {
+                    if ($context_items_store.focused == in_context)
+                        visibilty = "";
+                } else
+                    visibilty = "";
+            }
+            //console.log("$page[" + in_context + ", " + context + "]: " + visibilty)
+            //console.log(item)  
+            //console.log("--------------")
+        }
+    }
+</script>
+
+<div class="{visibilty} {cl} bg-slate-100 dark:bg-slate-800 ">
+    {#if visibilty == "" }
+        <slot/>
+    {/if}
+</div>

package/page.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @typedef {typeof __propDef.props}  PageProps */
+/** @typedef {typeof __propDef.events}  PageEvents */
+/** @typedef {typeof __propDef.slots}  PageSlots */
+export default class Page extends SvelteComponentTyped<{
+    context?: string | undefined;
+    self?: null | undefined;
+    c?: string | undefined;
+    cl?: string | undefined;
+    typename?: string | undefined;
+    focused_only?: boolean | undefined;
+    in_context?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PageProps = typeof __propDef.props;
+export type PageEvents = typeof __propDef.events;
+export type PageSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: string | undefined;
+        self?: null | undefined;
+        c?: string | undefined;
+        cl?: string | undefined;
+        typename?: string | undefined;
+        focused_only?: boolean | undefined;
+        in_context?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/stores.d.ts

@@ -0,0 +1,15 @@
+export const data_tick_store: import("svelte/store").Writable<number>;
+export const context_items_store: import("svelte/store").Writable<{
+    focused: string;
+    data: null;
+    sel: null;
+}>;
+export const context_info_store: import("svelte/store").Writable<{
+    data: string;
+    sel: string;
+}>;
+export const context_types_store: import("svelte/store").Writable<{
+    focused: string;
+    data: null;
+    sel: null;
+}>;

package/stores.js

@@ -0,0 +1,7 @@
+
+import {writable, get} from 'svelte/store';
+
+export const data_tick_store = writable(1);
+export const context_items_store = writable({focused:'', data: null, sel: null})
+export const context_info_store = writable({data: '', sel: ''})
+export const context_types_store = writable({focused:'', data: null, sel: null})

package/tile.svelte

@@ -0,0 +1,41 @@
+
+
+<script>
+    import {data_tick_store, context_items_store} from './stores.js' 
+    import { setContext } from 'svelte';
+    export let c = ''   
+    export let cl = 'col-span-1'
+    
+    export let context = ""
+    export let self = null
+
+    if(context != "")
+    {    
+        setContext('ctx', context) 
+        if(self != null)
+            context_items_store[context] = self 
+    }
+
+    
+    switch(c)
+    {
+         case 'flex':
+            cl = 'grid-cols-4 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12'
+            break;
+         case 'x2':
+            cl = 'xl:col-span-2'
+            break;
+         case 's2-l3-x4-w5':
+            cl = 'sm:col-span-2 lg:col-span-3 xl:col-span-4 2xl:col-span-5'
+            break;
+         case 'f1':   
+            cl = 'w-64 flex-none'
+            break;
+    }
+    
+ </script>    
+ 
+
+<div class=" {cl} bg-slate-100 dark:bg-slate-800 shadow rounded-lg p-2 flex flex-col">
+   <slot/> 
+</div>

package/tile.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  TileProps */
+/** @typedef {typeof __propDef.events}  TileEvents */
+/** @typedef {typeof __propDef.slots}  TileSlots */
+export default class Tile extends SvelteComponentTyped<{
+    context?: string | undefined;
+    self?: null | undefined;
+    c?: string | undefined;
+    cl?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TileProps = typeof __propDef.props;
+export type TileEvents = typeof __propDef.events;
+export type TileSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        context?: string | undefined;
+        self?: null | undefined;
+        c?: string | undefined;
+        cl?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/tiles.row.svelte

@@ -0,0 +1,35 @@
+
+
+<script>
+   export let c = ''  
+   export let cl = 'grid-cols-1';
+   export let w = 'w-full'
+   
+   switch(c)
+   {
+     case 'f2':
+          cl = 'grid-cols-2'
+          w =  'w-[calc(200vw)] sm:w-[calc(200vw-40px)] lg:w-[calc(100vw-40px)] h-full overflow-y-scroll'
+          break;
+     case 'g1':
+          cl="flex-grow grid-cols-2 overflow-y-scroll"     
+          break;
+     case 's2-l3-x4-w5':
+          cl = 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5';
+          break;
+     case 's2-x4':     
+          cl = 'grid-cols-1 sm:grid-cols-2 xl:grid-cols-4';
+          break;   
+     case 's2-x3':     
+          cl = 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3';
+          break;  
+     case '1':
+          cl = 'grid-cols-1';
+          break;
+     //default: Nie ma default. Mozna nadpisać cl i w
+   }
+</script>    
+
+<div class="grid {cl} mt-0 {w} gap-1">
+    <slot/>
+</div>

package/tiles.row.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  TilesProps */
+/** @typedef {typeof __propDef.events}  TilesEvents */
+/** @typedef {typeof __propDef.slots}  TilesSlots */
+export default class Tiles extends SvelteComponentTyped<{
+    c?: string | undefined;
+    cl?: string | undefined;
+    w?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TilesProps = typeof __propDef.props;
+export type TilesEvents = typeof __propDef.events;
+export type TilesSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        c?: string | undefined;
+        cl?: string | undefined;
+        w?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/tiles.vertical.row.svelte

@@ -0,0 +1,25 @@
+
+
+<script>
+    export let c = ''  
+    export let cl = 'grid-cols-1';
+    
+    switch(c)
+    {
+      case '1':
+           //cl = 'grid-cols-1'; already set 
+           break;
+      case '2':
+           cl = 'grid-cols-2';
+           break;
+      case '3':
+           cl = 'grid-cols-3';
+           break;
+      //default: Nie ma default. Mozna nadpisać cl
+    }
+ </script>    
+ 
+ <div class="{cl} mt-4 gap-4 bg-slate-500">
+     <slot/>
+ </div>
+ 

package/tiles.vertical.row.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  TilesProps */
+/** @typedef {typeof __propDef.events}  TilesEvents */
+/** @typedef {typeof __propDef.slots}  TilesSlots */
+export default class Tiles extends SvelteComponentTyped<{
+    c?: string | undefined;
+    cl?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TilesProps = typeof __propDef.props;
+export type TilesEvents = typeof __propDef.events;
+export type TilesSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        c?: string | undefined;
+        cl?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/updates.d.ts

@@ -0,0 +1,3 @@
+export function inform_modification(itm: any, field_name: any, type_name: any): void;
+export function inform_item(itm: any, type_name: any): void;
+export function push_changes(): void;

package/updates.js

@@ -0,0 +1,95 @@
+import {writable} from 'svelte/store';
+import {Auth} from '@humandialog/auth.svelte/dist/index'
+
+
+const modified_item_store = writable(null);
+export function inform_modification(itm, field_name, type_name)
+{
+    let item_entry = {
+        Id: [type_name] + itm.Id,
+        type_name: type_name,
+        item: { [type_name]: 
+                {
+                    Id: itm.Id,
+                    [field_name]: itm[field_name]
+                } },
+    };
+    
+    modified_item_store.set(item_entry);
+};
+
+export function inform_item(itm, type_name)
+{
+    let item_entry = {
+        Id: [type_name] + itm.Id,
+        type_name: type_name,
+        item: { [type_name]: 
+                itm },
+    };
+    
+    modified_item_store.set(item_entry);
+};
+
+const update_request_ticket = writable(0);
+let last_update_ticket = 0;
+export function push_changes()
+{
+    update_request_ticket.update(n => n + 1);
+}
+
+
+const modified_items_map = new Map();
+modified_item_store.subscribe((mod_item) => {
+    if(mod_item)
+    {
+        if(modified_items_map.has(mod_item.Id))
+        {
+            let last_itm = modified_items_map.get(mod_item.Id);
+            
+            let last_mods = last_itm.item[last_itm.type_name];
+            let curr_mods = mod_item.item[mod_item.type_name];
+            Object.keys(curr_mods).forEach(prop_name => {
+                last_mods[prop_name] = curr_mods[prop_name];
+            }); 
+        }
+        else
+        {
+            modified_items_map.set(mod_item.Id, mod_item);
+        }
+    }
+});
+
+update_request_ticket.subscribe(async (v) => {
+    if(v != last_update_ticket)
+    {
+        last_update_ticket = v;
+
+        if(!modified_items_map.size)
+            return;
+
+        let changes = [];
+        modified_items_map.forEach((value, key) => 
+        {
+            changes.push(value.item);
+        });
+
+        try
+        {
+            console.log('push: ', changes);
+            const res = await Auth.fetch('/json/yav1/Push', 
+                                        {
+                                        method: "POST",
+                                        body: JSON.stringify({ Items: changes }),
+                                        });
+
+            if(res)
+            {
+                modified_items_map.clear();
+            }
+        }
+        catch(err)
+        {
+            console.error(err);
+        }
+    }
+})

package/utils.d.ts

@@ -0,0 +1,5 @@
+export function parse_width_directive(c: any): string;
+export function should_be_comapact(): boolean;
+export namespace icons {
+    const symbols: null;
+}

package/utils.js

@@ -0,0 +1,51 @@
+import { getContext } from "svelte";
+
+export let icons = {symbols :null}
+
+export function parse_width_directive(c)
+{   
+    let cs = '';
+    switch (c)
+    {
+        case '1':
+            cs = 'col-span-1' 
+            break;
+        case '2':
+            cs = 'col-span-2' 
+            break;
+        case '3':
+            cs = 'col-span-3' 
+            break;
+        case '4':
+            cs = 'col-span-4' 
+            break;
+        case '5':
+            cs = 'col-span-5' 
+            break;
+        case '6':
+            cs = 'col-span-6' 
+            break;
+        case '1-x3':
+            cs = 'col-span-1 xl:col-span-3'    
+            break;
+        case '2-x3':
+            cs = 'col-span-2 xl:col-span-3'    
+            break;
+        case '3-x9':
+            cs = 'col-span-3 xl:col-span-9'
+            break;    
+        case '4-x9':
+            cs = 'col-span-4 xl:col-span-9'
+            break;    
+        default:
+            break;
+    }
+
+    return cs;
+}
+
+export function should_be_comapact()
+{
+    let is_in_table = getContext('rTable-definition');
+    return !!is_in_table;
+}