@humandialog/forms.svelte 0.3.3 → 0.3.4

package/components/document/rich.edit.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RichProps = typeof __propDef.props;
+export type RichEvents = typeof __propDef.events;
+export type RichSlots = typeof __propDef.slots;
+export default class Rich extends SvelteComponentTyped<RichProps, RichEvents, RichSlots> {
+}
+export {};

package/components/edit.field.svelte

@@ -0,0 +1,134 @@
+<script>import { afterUpdate, getContext } from "svelte";
+import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
+import { inform_modification, push_changes } from "../updates.js";
+import { parse_width_directive, should_be_comapact } from "../utils.js";
+export let value = "";
+export let placeholder = "";
+export let on_enter = null;
+export let self = null;
+export let a = "";
+export let context = "";
+export let typename = "";
+export let inserter = false;
+export let c = "";
+let is_table_component = getContext("rIs-table-component");
+let item = null;
+let input_box_is_active = false;
+let focus_input_box = false;
+let inputbox;
+let org_value = "";
+let additional_class = $$restProps.class ?? "";
+afterUpdate(() => {
+  if (focus_input_box && inputbox) {
+    focus_input_box = false;
+    if (value)
+      inputbox.select();
+    inputbox.focus();
+  }
+});
+let ctx = context ? context : getContext("ctx");
+let cs = parse_width_directive(c);
+let last_tick = -1;
+$:
+  setup($data_tick_store);
+function setup(data_tick_store2) {
+  if (data_tick_store2 <= last_tick)
+    return;
+  last_tick = data_tick_store2;
+  item = self ?? $context_items_store[ctx];
+  if (!typename)
+    typename = $context_types_store[ctx];
+  if (a) {
+    if (item != null)
+      value = item[a];
+    else
+      value = "<empty>";
+  }
+}
+function on_activate_input_box(event) {
+  if (!input_box_is_active && (is_table_component && $context_items_store["sel"] == self || !is_table_component)) {
+    input_box_is_active = true;
+    focus_input_box = true;
+    org_value = value;
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+async function on_key_down(event) {
+  if (event.key == "Enter") {
+    if (!value && inserter) {
+      input_box_is_active = false;
+      return;
+    }
+    try {
+      let success = false;
+      if (on_enter)
+        success = on_enter(value);
+      else {
+        success = value_changed();
+        accept_change();
+      }
+      if (inserter) {
+        if (success) {
+          focus_input_box = true;
+          value = "";
+        } else {
+          value = org_value;
+          input_box_is_active = false;
+        }
+      } else {
+        if (!success)
+          value = org_value;
+        else
+          org_value = value;
+        input_box_is_active = false;
+      }
+    } catch (error) {
+      console.log(error);
+      input_box_is_active = false;
+    }
+  } else if (event.key == "Esc" || event.key == "Escape") {
+    input_box_is_active = false;
+    value = org_value;
+  }
+}
+function on_blur(event) {
+  input_box_is_active = false;
+  value = org_value;
+}
+function value_changed() {
+  if (item && a) {
+    item[a] = value;
+    if (typename)
+      inform_modification(item, a, typename);
+  }
+  return true;
+}
+function accept_change() {
+  $data_tick_store = $data_tick_store + 1;
+  push_changes();
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="{cs} flex items-center {additional_class}" on:click={on_activate_input_box}>
+    <slot></slot>
+    
+    {#if input_box_is_active}
+        <input bind:this={inputbox} bind:value={value} on:keydown={on_key_down} on:blur={on_blur} class="w-full border-0 bg-transparent text-gray-900 dark:text-gray-300"/>
+    {:else if value}
+        {#if is_table_component}
+            <span>{value}</span>
+        {:else}
+            <span class="w-full text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 cursor-text">{value}</span>
+        {/if}
+    {:else if !is_table_component}
+        <span class="w-full text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400 cursor-text">{placeholder}</span>
+    {/if}
+</div>
+
+<style>
+    input:focus {
+    outline: 0px solid transparent;
+  }
+</style>

package/components/edit.field.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        on_enter?: null | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        inserter?: boolean | undefined;
+        c?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type EditProps = typeof __propDef.props;
+export type EditEvents = typeof __propDef.events;
+export type EditSlots = typeof __propDef.slots;
+export default class Edit extends SvelteComponentTyped<EditProps, EditEvents, EditSlots> {
+}
+export {};

package/components/file.loader.svelte

@@ -0,0 +1,90 @@
+<script>import FaExclamation from "svelte-icons/fa/FaExclamation.svelte";
+import FaCheck from "svelte-icons/fa/FaCheck.svelte";
+import FaTimes from "svelte-icons/fa/FaTimes.svelte";
+import Spinner from "flowbite-svelte";
+let file = void 0;
+let data = null;
+let reader;
+const Empty = 0;
+const Loading = 1;
+const Success = 2;
+const Failed = 3;
+let state = Empty;
+function load_file() {
+  const fileinput = document.getElementById("fileloader");
+  file = fileinput.files[0];
+  reader = new FileReader();
+  reader.addEventListener(
+    "load",
+    () => {
+      data = reader.result;
+      state = Success;
+    },
+    false
+  );
+  reader.addEventListener(
+    "error",
+    () => {
+      data = null;
+      state = Failed;
+    },
+    false
+  );
+  reader.addEventListener(
+    "loadstart",
+    () => {
+      data = null;
+      state = Loading;
+    },
+    false
+  );
+  reader.readAsArrayBuffer(file);
+}
+function clear() {
+  if (reader && reader.readyState == FileReader.LOADING)
+    reader.abort();
+  state = Empty;
+  file = void 0;
+  data = null;
+}
+export function get_name() {
+  if (file)
+    return file.name;
+  else
+    return "";
+}
+export function get_size() {
+  if (file)
+    return file.size;
+  else
+    return -1;
+}
+export function get_type() {
+  if (file)
+    return file.type;
+  else
+    return "";
+}
+export function get_data() {
+  return data;
+}
+export function is_selected() {
+  if (state == Success && data != null)
+    return true;
+  else
+    return false;
+}
+</script>
+
+<input id="fileloader" type="file" on:change={load_file}/>
+{#if state==Failed}
+    <!--span class="h-4 w-4 text-red-800"><FaExclamation/></span-->
+{:else if state==Success}
+    <!--span class="h-4 w-4 text-green-800"><FaCheck/></span-->
+{:else if state==Loading}
+    <Spinner size=4/>
+{/if}
+
+{#if state!=Empty}
+    <span class="h-4 w-4 text-slate-700"><FaTimes on:click={clear}/></span>
+{/if}

package/components/file.loader.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        get_name?: (() => string) | undefined;
+        get_size?: (() => number) | undefined;
+        get_type?: (() => string) | undefined;
+        get_data?: (() => ArrayBuffer) | undefined;
+        is_selected?: (() => boolean) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileProps = typeof __propDef.props;
+export type FileEvents = typeof __propDef.events;
+export type FileSlots = typeof __propDef.slots;
+export default class File extends SvelteComponentTyped<FileProps, FileEvents, FileSlots> {
+    get get_name(): () => string;
+    get get_size(): () => number;
+    get get_type(): () => string;
+    get get_data(): () => ArrayBuffer;
+    get is_selected(): () => boolean;
+}
+export {};

package/components/input.text.svelte

@@ -0,0 +1,37 @@
+
+<script>
+    import {data_tick_store} from '../stores.js' 
+
+    export let i = null;
+    export let fld = '';
+    export let placeholder = ''
+
+    export  let s = 'sm'
+    let     label_mb = 'mb-1' //
+    let     input_pt = 'pt-0.5'
+    let     input_pb = 'pb-1'
+
+    switch (s)
+    {
+        case 'md':
+            label_mb = 'mb-2';
+            input_pt = 'pt-2.5'
+            input_pb = 'pb-2.5';           
+            break;
+            
+            
+    }    
+    let value = "?" 
+    $: {if(i != null)
+        value = i[fld]}
+             
+    
+</script>    
+
+{#if i!= null}
+<input  type=text value={value} on:input={()=> ($data_tick_store = $data_tick_store + 1)}
+class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
+focus:ring-primary-600 focus:border-primary-600 block w-full  {input_pb} {input_pt} px-2.5 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}>
+{/if}

package/components/input.text.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  InputProps */
+/** @typedef {typeof __propDef.events}  InputEvents */
+/** @typedef {typeof __propDef.slots}  InputSlots */
+export default class Input extends SvelteComponentTyped<{
+    s?: string | undefined;
+    placeholder?: string | undefined;
+    i?: null | undefined;
+    fld?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        i?: null | undefined;
+        fld?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/inputbox.ltop.svelte

@@ -0,0 +1,110 @@
+<script>
+    import {data_tick_store, context_items_store, context_types_store} from '../stores.js' 
+    import {inform_modification, push_changes} from '../updates.js'
+    import {parse_width_directive} from '../utils.js'
+    import {getContext} from 'svelte';
+    import Rich_edit from './document/rich.edit.svelte'
+    
+
+    
+    export let label = ''
+    export let self = null;
+    export let a = '';
+    export let context = ""
+    export let itype="text"
+    export let typename = '';
+    
+    export let val = ''
+        
+    export const placeholder = 'pl'
+
+    export  let s = 'sm'
+    export  let c = ''
+
+    
+    let   item = null
+
+    let     label_mb = 'mb-1' //
+    let input_pt = 'pt-0.5'
+    let input_pb = 'pb-1'
+    
+    switch (s)
+    {
+        case 'md':
+            label_mb = 'mb-2';
+            input_pt = 'pt-2.5'
+            input_pb = 'pb-2.5';           
+            break;
+    }
+   
+    let cs =  c ? parse_width_directive(c) : 'col-span-1';
+    let ctx = context ? context : getContext('ctx');
+        
+    let  last_tick = -1    
+
+    $:{ 
+        if($data_tick_store > last_tick)
+            setup();
+    }
+
+    function setup()
+    {
+        last_tick = $data_tick_store;
+        item = self ?? $context_items_store[ctx];    
+
+        if(!typename)
+            typename = $context_types_store[ctx];
+
+        if(item && a)    
+            val = item[a]
+        
+        if(label == '')
+            label = a
+    }
+    
+    
+    
+    function value_changed()
+    {
+        if(item != null)
+        {
+            item[a] = val
+            
+            if(typename)
+                inform_modification(item, a, typename);
+        }
+    }
+
+    function accept_change()
+    {
+        $data_tick_store = $data_tick_store + 1;
+        push_changes();
+            
+    }
+        
+   
+</script>    
+
+{#if itype == 'text'}
+    <div class={cs}>
+        <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
+        
+        <input  type=text name="name" id="name" 
+                bind:value={val} 
+                on:change={()=> (value_changed())}
+                on:blur={() => { accept_change(); } }
+                
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
+                focus:ring-primary-600 focus:border-primary-600 block w-full  {input_pb} {input_pt} px-2.5 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}>
+    </div>
+{:else if itype == 'html'}   
+    <!-- div class="{cs} prose prose-sm sm:prose-base dark:prose-invert h-full max-h-full overflow-y-auto"    
+        contenteditable="true"
+        bind:innerHTML={val} 
+        on:input={()=> (value_changed())}
+        on:blur={() => { accept_change(); }}/ -->
+    <Rich_edit {...$$props} />
+{/if}       

package/components/inputbox.ltop.svelte.d.ts

@@ -0,0 +1,44 @@
+/** @typedef {typeof __propDef.props}  InputboxProps */
+/** @typedef {typeof __propDef.events}  InputboxEvents */
+/** @typedef {typeof __propDef.slots}  InputboxSlots */
+export default class Inputbox extends SvelteComponentTyped<{
+    [x: string]: any;
+    context?: string | undefined;
+    self?: null | undefined;
+    c?: string | undefined;
+    label?: string | undefined;
+    typename?: string | undefined;
+    a?: string | undefined;
+    s?: string | undefined;
+    placeholder?: string | undefined;
+    itype?: string | undefined;
+    val?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get placeholder(): string;
+}
+export type InputboxProps = typeof __propDef.props;
+export type InputboxEvents = typeof __propDef.events;
+export type InputboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        context?: string | undefined;
+        self?: null | undefined;
+        c?: string | undefined;
+        label?: string | undefined;
+        typename?: string | undefined;
+        a?: string | undefined;
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        itype?: string | undefined;
+        val?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/radio.svelte

@@ -0,0 +1,53 @@
+<script>import { getContext } from "svelte";
+import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
+import { inform_modification, push_changes } from "../updates.js";
+import { parse_width_directive } from "../utils.js";
+export let value;
+export let disabled = false;
+export let self = null;
+export let a = "";
+export let context = "";
+export let typename = "";
+export let c = "";
+let item = null;
+let additional_class = $$restProps.class ?? "";
+let ctx = context ? context : getContext("ctx");
+let cs = parse_width_directive(c);
+let color_style = disabled ? "text-gray-400 dark:text-gray-500" : "text-gray-900 dark:text-gray-300";
+let name;
+let last_tick = -1;
+$:
+  setup($data_tick_store);
+function setup(data_tick_store2) {
+  if (data_tick_store2 <= last_tick)
+    return;
+  last_tick = data_tick_store2;
+  item = self ?? $context_items_store[ctx];
+  if (!typename)
+    typename = $context_types_store[ctx];
+  name = `${typename}_${item.Id}_${a}`;
+}
+function on_changed() {
+  if (item && a) {
+    if (typename) {
+      inform_modification(item, a, typename);
+      $data_tick_store = $data_tick_store + 1;
+      push_changes();
+    }
+  }
+}
+</script>
+
+<div class="ml-2 h-6 {cs} {color_style} {additional_class} flex items-center">
+    <input  type="radio" 
+            bind:group={item[a]} 
+            {value}
+            {name}
+            on:change={on_changed}
+            {disabled} 
+            class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2 dark:bg-gray-700 dark:border-gray-600 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"/>
+    <span class="text-sm font-medium ml-1">
+        <slot/>
+    </span>
+    
+</div>

package/components/radio.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value: any;
+        disabled?: boolean | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        c?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RadioProps = typeof __propDef.props;
+export type RadioEvents = typeof __propDef.events;
+export type RadioSlots = typeof __propDef.slots;
+export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
+}
+export {};