@humandialog/forms.svelte 0.3.2 → 0.3.4

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

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  TextareaProps */
+/** @typedef {typeof __propDef.events}  TextareaEvents */
+/** @typedef {typeof __propDef.slots}  TextareaSlots */
+export default class Textarea extends SvelteComponentTyped<{
+    c?: string | undefined;
+    label?: 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: {
+        c?: string | undefined;
+        label?: string | undefined;
+        s?: string | undefined;
+        placeholder?: string | undefined;
+        val?: string | undefined;
+        sy?: string | undefined;
+        r?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/tile.title.svelte

@@ -0,0 +1,54 @@
+<script>
+    import {getContext} from 'svelte';
+    import {data_tick_store, context_items_store} from '../stores.js' 
+    import { parse_width_directive} from '../utils.js'
+   
+    export let label = "Label"
+    export let a = '';
+    export let c=''
+
+    let _label = label;
+
+
+    let cs = parse_width_directive(c);
+    
+    let     item = null
+    let     ctx = ''
+    ctx = getContext('ctx')
+    
+    let  last_tick = $data_tick_store    
+
+    if(label)
+    {
+        _label = label;
+    }
+    else if(a != '')
+    {
+        item = $context_items_store[ctx];
+        if(item != null)
+            _label = item[a]
+    }
+
+
+    let t = 0
+    $: { t = $data_tick_store        
+        if(t > last_tick)
+        {
+            last_tick = t       
+            
+            if(label)
+                _label = label;
+            else
+            {
+                item = $context_items_store[ctx];
+                if(item != null)
+                    _label = item[a]
+            }
+     
+    }
+       
+}
+</script>
+
+<p class="{cs} text-gray-900 dark:text-white {$$restProps['class']}">{_label}</p>
+

package/components/tile.title.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  TileProps */
+/** @typedef {typeof __propDef.events}  TileEvents */
+/** @typedef {typeof __propDef.slots}  TileSlots */
+export default class Tile extends SvelteComponentTyped<{
+    [x: string]: any;
+    c?: string | undefined;
+    label?: string | undefined;
+    a?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+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: {
+        [x: string]: any;
+        c?: string | undefined;
+        label?: string | undefined;
+        a?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/form.box.svelte

@@ -0,0 +1,60 @@
+<script>
+   import { writable } from 'svelte/store'; 
+   import {data_tick_store, context_items_store} from './stores.js' 
+   import { setContext } from 'svelte';
+
+    export let context = ""
+    export let self = null
+    
+    export let c = ''
+    export let cl = 'grid-cols-1'
+    export let fit = false;
+
+    if(context != "")
+    {    
+        setContext('ctx', context) 
+        if(self != null)
+            context_items_store[context] = self 
+    }
+
+    let in_tile_flex_behaviour = fit ? "flex-1" : "flex-none"
+   
+    switch (c)
+    {
+        case '1':
+            cl = 'grid-cols-1';
+            break; 
+        case '2':
+            cl = 'grid-cols-2';
+            break; 
+        case '3':
+            cl = 'grid-cols-3';
+            break; 
+        case '4':
+            cl = 'grid-cols-4';
+            break; 
+        case '5':
+            cl = 'grid-cols-5';
+            break;         
+        case 'flex':
+            cl = 'grid-cols-4 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12'
+            break;
+            
+        case '4-s8-m10-l12':
+            cl = 'grid-cols-4 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12';
+            break; 
+        case '4-x16':
+            cl = 'grid-cols-4 xl:grid-cols-16';
+            break; 
+        case '5-s10-m12':
+            cl = 'grid-cols-5 sm:grid-cols-10 md:grid-cols-12';
+            break; 
+        case '5-x12':
+            cl = 'grid-cols-5 xl:grid-cols-12';
+            break; 
+    }
+</script>    
+
+<div class="{in_tile_flex_behaviour} grid gap-2 mb-2 {cl} overflow-y-hidden">
+    <slot/>
+</div>

package/form.box.svelte.d.ts

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

package/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

package/icon.svelte

@@ -0,0 +1,105 @@
+<svelte:options accessors={true}/>
+<script>import { icons } from "./utils.js";
+export let component = null;
+export let module_name = "fa/FaQuestion";
+export let img = "";
+export let label = "";
+export let symbol = "";
+export let color = "";
+export let size = 5;
+export let bg = "";
+export let circle = false;
+let additional_class = $$restProps.class ?? "";
+let _bg;
+let txt = "";
+let symbol_html = "";
+let icon_size = `${size * 0.25}rem`;
+$: {
+  if (symbol) {
+    if (symbol.startsWith("label:"))
+      label = symbol.substring(6);
+    else if (symbol.startsWith("color:"))
+      color = symbol.substring(6);
+    else if (symbol.startsWith("img:"))
+      img = symbol.substring(4);
+    else if (icons && icons.symbols && icons.symbols.has(symbol))
+      symbol_html = icons.symbols.get(symbol);
+  }
+  if (img) {
+    img = img;
+    txt = "";
+    _bg = bg;
+  } else if (label) {
+    label = label;
+    bg = bg;
+    if (!bg) {
+      let saturation = 100;
+      let lightness = 75;
+      let hash = 0;
+      for (let i = 0; i < label.length; i++) {
+        hash = label.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash;
+      }
+      _bg = `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;
+    } else
+      _bg = bg;
+    let arr = label.split(" ");
+    if (arr.length > 0) {
+      txt = arr[0].substring(0, 1).toUpperCase();
+      if (arr.length > 1)
+        txt += arr[arr.length - 1].substring(0, 1).toUpperCase();
+    }
+  } else if (color) {
+    _bg = color;
+  } else if (symbol) {
+  } else if (!component) {
+    import("../../node_modules/svelte-icons/" + module_name + ".svelte").then(
+      (module) => {
+        component = module.default || module;
+      }
+    );
+  } else
+    component = component;
+}
+</script>
+
+<div class=" {additional_class}"
+    style:width={icon_size} 
+    style:height={icon_size} 
+    style:background-color={_bg}
+    style:border-radius={ circle ? '50%' : ''}
+    on:blur
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover >
+    {#if component != null}
+        <svelte:component this={component} />
+    {:else if txt}
+        <div   class="m-0 p-0 font-sans font-bold flex flex-col justify-center text-center w-full h-full text-slate-900"
+               style:font-size={`${size/8}rem`}
+               >
+            <div>{txt}</div>
+        </div>
+    {:else if img}
+        <img src={img} class="w-full max-w-full h-full max-h-full" alt='img'/>
+    {:else if symbol_html}
+        {@html symbol_html}
+    {/if}
+</div>
+
+<style>
+  svg {
+    stroke: currentColor;
+    fill: currentColor;
+    stroke-width: 0;
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+  }  
+
+</style>

package/icon.svelte.d.ts

@@ -0,0 +1,62 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        component?: null | undefined;
+        module_name?: string | undefined;
+        img?: string | undefined;
+        label?: string | undefined;
+        symbol?: string | undefined;
+        color?: string | undefined;
+        size?: number | undefined;
+        bg?: string | undefined;
+        circle?: boolean | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mouseover: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
+    get component(): null | undefined;
+    /**accessor*/
+    set component(_: null | undefined);
+    get module_name(): string | undefined;
+    /**accessor*/
+    set module_name(_: string | undefined);
+    get img(): string | undefined;
+    /**accessor*/
+    set img(_: string | undefined);
+    get label(): string | undefined;
+    /**accessor*/
+    set label(_: string | undefined);
+    get symbol(): string | undefined;
+    /**accessor*/
+    set symbol(_: string | undefined);
+    get color(): string | undefined;
+    /**accessor*/
+    set color(_: string | undefined);
+    get size(): number | undefined;
+    /**accessor*/
+    set size(_: number | undefined);
+    get bg(): string | undefined;
+    /**accessor*/
+    set bg(_: string | undefined);
+    get circle(): boolean | undefined;
+    /**accessor*/
+    set circle(_: boolean | undefined);
+}
+export {};

package/index.d.ts

@@ -0,0 +1,21 @@
+export { default as Page } from "./page.svelte";
+export { default as Tile } from "./tile.svelte";
+export { default as Row } from "./tiles.row.svelte";
+export { default as Box } from "./form.box.svelte";
+export { default as Icon } from "./icon.svelte";
+export { default as Button } from './components/button.svelte';
+export { default as Checkbox } from './components/checkbox.svelte';
+export { default as Date } from './components/date.svelte';
+export { default as Edit } from './components/edit.field.svelte';
+export { default as FileLoader } from './components/file.loader.svelte';
+export { default as Input } from './components/inputbox.ltop.svelte';
+export { default as Radio } from './components/radio.svelte';
+export { default as SimpleTable } from './components/simple.table.svelte';
+export { default as Title } from './components/tile.title.svelte';
+export { default as Table } from './components/table/table.svelte';
+export { default as TableColumn } from './components/table/column.svelte';
+export { default as TableItem } from './components/table/item.svelte';
+export { default as Combo } from './components/combo/combo.svelte';
+export { default as ComboSource } from './components/combo/combo.source.svelte';
+export { default as ComboItem } from './components/combo/combo.item.svelte';
+export { default as RichEdit } from './components/document/rich.edit.svelte';

package/index.js

@@ -0,0 +1,25 @@
+// @ts-ignore
+//export { default as Row } from "./page.row.svelte";
+export { default as Page } from "./page.svelte";
+export { default as Tile } from "./tile.svelte";
+export { default as Row } from "./tiles.row.svelte";
+export { default as Box } from "./form.box.svelte";
+//export { default as TilesVerticalRow } from "./tiles.vertical.row.svelte";
+// @ts-ignore
+export { default as Icon } from "./icon.svelte";
+export { default as Button } from './components/button.svelte';
+export { default as Checkbox } from './components/checkbox.svelte';
+export { default as Date } from './components/date.svelte';
+export { default as Edit } from './components/edit.field.svelte';
+export { default as FileLoader } from './components/file.loader.svelte';
+export { default as Input } from './components/inputbox.ltop.svelte';
+export { default as Radio } from './components/radio.svelte';
+export { default as SimpleTable } from './components/simple.table.svelte';
+export { default as Title } from './components/tile.title.svelte';
+export { default as Table } from './components/table/table.svelte';
+export { default as TableColumn } from './components/table/column.svelte';
+export { default as TableItem } from './components/table/item.svelte';
+export { default as Combo } from './components/combo/combo.svelte';
+export { default as ComboSource } from './components/combo/combo.source.svelte';
+export { default as ComboItem } from './components/combo/combo.item.svelte';
+export { default as RichEdit } from './components/document/rich.edit.svelte';

package/package.json

@@ -1,50 +1,7 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Basic Svelte UI components for Object Reef applications",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./components/button.svelte": "./components/button.svelte",
-    "./components/checkbox.svelte": "./components/checkbox.svelte",
-    "./components/combo/combo.item.svelte": "./components/combo/combo.item.svelte",
-    "./components/combo/combo.source.svelte": "./components/combo/combo.source.svelte",
-    "./components/combo/combo.svelte": "./components/combo/combo.svelte",
-    "./components/combo/combo": "./components/combo/combo.js",
-    "./components/date.svelte": "./components/date.svelte",
-    "./components/document/internal/Document_command": "./components/document/internal/Document_command.js",
-    "./components/document/internal/palette.row.svelte": "./components/document/internal/palette.row.svelte",
-    "./components/document/internal/palette.svelte": "./components/document/internal/palette.svelte",
-    "./components/document/internal/Selection_helper": "./components/document/internal/Selection_helper.js",
-    "./components/document/internal/Selection_range": "./components/document/internal/Selection_range.js",
-    "./components/document/rich.edit.svelte": "./components/document/rich.edit.svelte",
-    "./components/edit.field.svelte": "./components/edit.field.svelte",
-    "./components/file.loader.svelte": "./components/file.loader.svelte",
-    "./components/input.text.svelte": "./components/input.text.svelte",
-    "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
-    "./components/radio.svelte": "./components/radio.svelte",
-    "./components/simple.table.svelte": "./components/simple.table.svelte",
-    "./components/table/column.svelte": "./components/table/column.svelte",
-    "./components/table/item.svelte": "./components/table/item.svelte",
-    "./components/table/table.svelte": "./components/table/table.svelte",
-    "./components/table/table": "./components/table/table.js",
-    "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",
-    "./components/tile.title.svelte": "./components/tile.title.svelte",
-    "./form.box.svelte": "./form.box.svelte",
-    "./icon.svelte": "./icon.svelte",
-    "./page.row.svelte": "./page.row.svelte",
-    "./page.svelte": "./page.svelte",
-    "./stores": "./stores.js",
-    "./tile.svelte": "./tile.svelte",
-    "./tiles.row.svelte": "./tiles.row.svelte",
-    "./tiles.vertical.row.svelte": "./tiles.vertical.row.svelte",
-    "./updates": "./updates.js",
-    "./utils": "./utils.js"
-  },
-  "svelte": "./dist/index.js",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^1.0.0-next.90",
@@ -64,9 +21,6 @@
     "vite": "^4.0.0"
   },
   "type": "module",
-  "files": [
-    "dist"
-  ],
   "dependencies": {
     "@humandialog/auth.svelte": "^1.0.2",
     "flowbite-svelte": "^0.29.13",
@@ -89,5 +43,45 @@
   "bugs": {
     "url": "https://github.com/HumanDialog/forms.svelte/issues"
   },
-  "homepage": "https://github.com/HumanDialog/forms.svelte#readme"
+  "homepage": "https://github.com/HumanDialog/forms.svelte#readme",
+  "exports": {
+    "./package.json": "./package.json",
+    "./components/button.svelte": "./components/button.svelte",
+    "./components/checkbox.svelte": "./components/checkbox.svelte",
+    "./components/combo/combo.item.svelte": "./components/combo/combo.item.svelte",
+    "./components/combo/combo.source.svelte": "./components/combo/combo.source.svelte",
+    "./components/combo/combo.svelte": "./components/combo/combo.svelte",
+    "./components/combo/combo": "./components/combo/combo.js",
+    "./components/date.svelte": "./components/date.svelte",
+    "./components/document/internal/Document_command": "./components/document/internal/Document_command.js",
+    "./components/document/internal/palette.row.svelte": "./components/document/internal/palette.row.svelte",
+    "./components/document/internal/palette.svelte": "./components/document/internal/palette.svelte",
+    "./components/document/internal/Selection_helper": "./components/document/internal/Selection_helper.js",
+    "./components/document/internal/Selection_range": "./components/document/internal/Selection_range.js",
+    "./components/document/rich.edit.svelte": "./components/document/rich.edit.svelte",
+    "./components/edit.field.svelte": "./components/edit.field.svelte",
+    "./components/file.loader.svelte": "./components/file.loader.svelte",
+    "./components/input.text.svelte": "./components/input.text.svelte",
+    "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
+    "./components/radio.svelte": "./components/radio.svelte",
+    "./components/simple.table.svelte": "./components/simple.table.svelte",
+    "./components/table/column.svelte": "./components/table/column.svelte",
+    "./components/table/item.svelte": "./components/table/item.svelte",
+    "./components/table/table.svelte": "./components/table/table.svelte",
+    "./components/table/table": "./components/table/table.js",
+    "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",
+    "./components/tile.title.svelte": "./components/tile.title.svelte",
+    "./form.box.svelte": "./form.box.svelte",
+    "./icon.svelte": "./icon.svelte",
+    ".": "./index.js",
+    "./page.row.svelte": "./page.row.svelte",
+    "./page.svelte": "./page.svelte",
+    "./stores": "./stores.js",
+    "./tile.svelte": "./tile.svelte",
+    "./tiles.row.svelte": "./tiles.row.svelte",
+    "./tiles.vertical.row.svelte": "./tiles.vertical.row.svelte",
+    "./updates": "./updates.js",
+    "./utils": "./utils.js"
+  },
+  "svelte": "./index.js"
 }

package/page.row.svelte

@@ -0,0 +1,31 @@
+
+
+<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-400px)] lg:w-[calc(100vw-40px)]'
+          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';
+     //default: Nie ma default. Mozna nadpisać cl
+   }
+</script>    
+
+<div class="grid {cl} mt-0 {w} gap-1">
+    <slot/>
+</div>

package/page.row.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  PageProps */
+/** @typedef {typeof __propDef.events}  PageEvents */
+/** @typedef {typeof __propDef.slots}  PageSlots */
+export default class Page extends SvelteComponentTyped<{
+    c?: string | undefined;
+    cl?: string | undefined;
+    w?: 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: {
+        c?: string | undefined;
+        cl?: string | undefined;
+        w?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};