@humandialog/forms.svelte 0.4.19 → 0.4.20

package/components/checkbox.svelte

@@ -42,13 +42,13 @@ function on_changed() {
 }
 </script>
 
-<div class="ml-2 h-6 {cs} {color_style} {additional_class} flex items-center">
+<div class="ml-1 h-6 text-sm font-medium {cs} {color_style} {additional_class} flex items-center">
     <input  type="checkbox" 
             bind:checked={value} 
             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">
+    <span class="ml-1">
         <slot/>
     </span>
     

package/components/icon.svelte

@@ -10,6 +10,7 @@ export let size = 5;
 export let bg = "";
 export let circle = false;
 let additional_class = $$restProps.class ?? "";
+let id = $$restProps.id ?? "";
 let _bg;
 let txt = "";
 let symbol_html = "";
@@ -63,6 +64,7 @@ $: {
     style:height={icon_size} 
     style:background-color={_bg}
     style:border-radius={ circle ? '50%' : ''}
+    {id}
     on:blur
     on:click
     on:focus

package/components/inputbox.ltop.svelte

@@ -13,13 +13,26 @@
     export let context = ""
     export let itype="text"
     export let typename = '';
+    export let invalid = false;
     
     export let val = ''
         
-    export const placeholder = 'pl'
+    export let placeholder = 'pl'
 
     export  let s = 'sm'
     export  let c = ''
+    export  let validate_cb = undefined;
+    export function validate()
+    {
+        if(!validate_cb)
+        {
+            invalid = false;
+            return true;
+        }
+
+        invalid = !validate_cb(val);
+        return !invalid;
+    } 
 
     
     let   item = null
@@ -41,6 +54,7 @@
     let ctx = context ? context : getContext('ctx');
         
     let  last_tick = -1    
+    let border_style = "border-gray-300  dark:border-gray-600"
 
     $:{ 
         if($data_tick_store > last_tick)
@@ -60,12 +74,13 @@
         
         if(label == '')
             label = a
+
+        
     }
     
-    
-    
     function value_changed()
     {
+        validate();
         if(item != null)
         {
             item[a] = val
@@ -81,22 +96,33 @@
         push_changes();
             
     }
+
+    function check_validity()
+    {
+        if(invalid)
+            validate();
+    }
         
    
 </script>    
 
 {#if itype == 'text'}
+    {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-gray-300 dark:border-gray-600" }
     <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(); } }
+                on:blur={() => { accept_change();} }
+                on:keydown={(e)=>{check_validity();}}
                 
-                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" 
+                class="     bg-gray-50 dark:bg-gray-700
+                            border {border_style} rounded-lg 
+                            focus:ring-primary-600 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500
+                            text-gray-900 dark:text-white text-sm  
+                            block w-full {input_pb} {input_pt} px-2.5 
+                            dark:placeholder-gray-400" 
                 
                 placeholder={placeholder}>
     </div>

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

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  InputboxSlots */
 export default class Inputbox extends SvelteComponentTyped<{
     [x: string]: any;
+    invalid?: boolean | undefined;
     label?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
@@ -13,10 +14,12 @@ export default class Inputbox extends SvelteComponentTyped<{
     placeholder?: string | undefined;
     itype?: string | undefined;
     val?: string | undefined;
+    validate_cb?: any;
+    validate?: (() => boolean) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
-    get placeholder(): string;
+    get validate(): () => boolean;
 }
 export type InputboxProps = typeof __propDef.props;
 export type InputboxEvents = typeof __propDef.events;
@@ -25,6 +28,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        invalid?: boolean | undefined;
         label?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
@@ -35,6 +39,8 @@ declare const __propDef: {
         placeholder?: string | undefined;
         itype?: string | undefined;
         val?: string | undefined;
+        validate_cb?: any;
+        validate?: (() => boolean) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/List.d.ts

@@ -20,8 +20,12 @@ export declare class rList_property_combo extends rList_property {
 export declare class rList_definition {
     title: string;
     title_editable: boolean;
+    on_title_changed: Function | undefined;
+    title_readonly: boolean;
     summary: string;
     summary_editable: boolean;
+    on_summary_changed: Function | undefined;
+    summary_readonly: boolean;
     can_insert: boolean;
     oninsert: Function | undefined;
     properties: rList_property[];

package/components/list/List.js

@@ -26,8 +26,12 @@ export class rList_property_combo extends rList_property {
 export class rList_definition {
     title = '';
     title_editable = false;
+    on_title_changed = undefined;
+    title_readonly = false;
     summary = '';
     summary_editable = false;
+    on_summary_changed = undefined;
+    summary_readonly = false;
     can_insert = false;
     oninsert = undefined;
     properties = [];

package/components/list/internal/list.element.svelte

@@ -38,6 +38,14 @@ if (!typename) {
     typename = s[0];
   }
 }
+let item_key = "";
+let keys = Object.keys(item);
+if (keys.includes("Id"))
+  item_key = "Id";
+else if (keys.includes("$ref"))
+  item_key = "$ref";
+else if (keys.length > 0)
+  item_key = keys[0];
 if (!title)
   title = definition.title;
 if (!summary)
@@ -49,14 +57,22 @@ function selected(...args) {
   return is_selected(item);
 }
 async function change_name(text) {
-  item[title] = text;
-  inform_modification(item, title, typename);
-  push_changes();
+  if (definition.on_title_changed) {
+    definition.on_title_changed(item, text, title);
+  } else {
+    item[title] = text;
+    inform_modification(item, title, typename);
+    push_changes();
+  }
 }
 async function change_summary(text) {
-  item[summary] = text;
-  inform_modification(item, summary, typename);
-  push_changes();
+  if (definition.on_summary_changed) {
+    definition.on_summary_changed(item, text, summary);
+  } else {
+    item[summary] = text;
+    inform_modification(item, summary, typename);
+    push_changes();
+  }
 }
 function edit(e) {
   if (!is_row_active)
@@ -129,7 +145,9 @@ function on_combo_changed(key, name, prop) {
   }
 }
 export function edit_property(field) {
-  if (field == "Summary")
+  if (field == title)
+    force_editing("Title");
+  else if (field == summary)
     force_editing("Summary");
   else {
     let prop_idx = definition.properties.findIndex((p) => p.name == field);
@@ -147,7 +165,7 @@ export function edit_property(field) {
   }
 }
 async function force_editing(field) {
-  let element_id = `__hd_list_ctrl_${item.Id}_${field}`;
+  let element_id = `__hd_list_ctrl_${item[item_key]}_${field}`;
   let element_node = document.getElementById(element_id);
   if (!element_node) {
     placeholder = field;
@@ -204,11 +222,17 @@ async function edit_date(field, prop_idx) {
     <div class="ml-3 w-full py-1" use:selectable={item} on:click={(e) => {activate_row(e, item)}} role="row" tabindex="0">
         <div class="flex flex-row">
             <p class="font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3">
-                <span  id="__hd_list_ctrl_{item.Id}_Title" role="gridcell" tabindex="0"
-                    use:editable={(text) => {change_name(text)}}
-                    on:click={edit}> 
+                {#if definition.title_readonly}
+                <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"> 
                     {item[title]}
                 </span>
+                {:else}
+                    <span  id="__hd_list_ctrl_{item[item_key]}_Title" role="gridcell" tabindex="0"
+                        use:editable={(text) => {change_name(text)}}
+                        on:click={edit}> 
+                        {item[title]}
+                    </span>
+                {/if}
             </p>
 
             <!--div class="flex flex-row justify-between text-xs flex-none w-1/2 sm:w-2/3"-->
@@ -248,9 +272,13 @@ async function edit_date(field, prop_idx) {
         </div>
 
         {#if summary && (item[summary] || placeholder=='Summary')}
-            {@const element_id = `__hd_list_ctrl_${item.Id}_Summary`}
+            {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
             <p class="text-xs text-slate-400" style="min-height: 1rem;">
-                {#if item[summary]}
+                {#if definition.summary_readonly}
+                    <span   id={element_id} role="gridcell" tabindex="0">
+                        {item[summary]}
+                    </span>
+                {:else if item[summary]}
                     <span   id={element_id} role="gridcell" tabindex="0"
                             use:editable={(text) => {change_summary(text)}}
                             on:click={edit}>

package/components/list/internal/list.inserter.svelte

@@ -1,6 +1,4 @@
 <script>import { editable, start_editing } from "../../../utils";
-import Icon from "../../icon.svelte";
-import { FaRegCircle } from "svelte-icons/fa";
 export let oninsert;
 export function run(onclose) {
   start_editing(insertion_paragraph, onclose);
@@ -9,9 +7,7 @@ let insertion_paragraph;
 </script>
 
 <section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent bg-gray-200 dark:bg-gray-700">
-    <Icon   size={4} 
-            component={FaRegCircle} 
-            class="cursor-pointer mt-1.5 ml-2 "/>
+    <slot name='left'/>
 
     <p  class="ml-3 py-1 font-bold whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3"
         bind:this={insertion_paragraph}

package/components/list/internal/list.inserter.svelte.d.ts

@@ -7,7 +7,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        left: {};
+    };
 };
 export type ListProps = typeof __propDef.props;
 export type ListEvents = typeof __propDef.events;

package/components/list/list.summary.svelte

@@ -1,7 +1,11 @@
 <script>import { getContext } from "svelte";
 export let a;
 export let editable = false;
+export let on_change = void 0;
+export let readonly = false;
 let definition = getContext("rList-definition");
 definition.summary = a;
 definition.summary_editable = editable;
+definition.on_summary_changed = on_change;
+definition.summary_readonly = readonly;
 </script>

package/components/list/list.summary.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         a: string;
         editable?: boolean | undefined;
+        on_change?: Function | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/list/list.svelte

@@ -25,6 +25,7 @@ const END_OF_LIST = {};
 let rows = [];
 let activate_after_dom_update = null;
 let inserter;
+let item_key = "";
 clear_active_item("props");
 let last_tick = -1;
 $:
@@ -38,6 +39,18 @@ function setup(...args) {
     items = item[a];
   else
     items = [];
+  if (items.length > 0) {
+    let first_element = items[0];
+    let keys = Object.keys(first_element);
+    if (keys.includes("Id"))
+      item_key = "Id";
+    else if (keys.includes("$ref"))
+      item_key = "$ref";
+    else if (keys.length > 0)
+      item_key = keys[0];
+    else
+      item_key = "";
+  }
   if (!typename)
     typename = $context_types_store[ctx];
 }
@@ -121,8 +134,8 @@ export function edit(element, property_name) {
 {/if}
 
 
-{#if items && items.length > 0 }
-    {#each items as element, i (element.Id)}
+{#if items && items.length > 0 && !!item_key }
+    {#each items as element, i (element[item_key])}
         
         <List_element   item={element} 
                         {toolbar_operations}

package/components/list/list.title.svelte

@@ -1,7 +1,11 @@
 <script>import { getContext } from "svelte";
 export let a;
 export let editable = false;
+export let on_change = void 0;
+export let readonly = false;
 let definition = getContext("rList-definition");
 definition.title = a;
 definition.title_editable = editable;
+definition.on_title_changed = on_change;
+definition.title_readonly = readonly;
 </script>

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

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         a: string;
         editable?: boolean | undefined;
+        on_change?: Function | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -34,6 +34,7 @@ export { default as ListSummary } from './components/list/list.summary.svelte';
 export { default as ListInserter } from './components/list/list.inserter.svelte';
 export { default as ListDateProperty } from './components/list/list.date.svelte';
 export { default as ListComboProperty } from './components/list/list.combo.svelte';
+export { default as Modal } from './modal.svelte';
 export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores';

package/index.js

@@ -40,6 +40,7 @@ export { default as ListSummary } from './components/list/list.summary.svelte';
 export { default as ListInserter } from './components/list/list.inserter.svelte';
 export { default as ListDateProperty } from './components/list/list.date.svelte';
 export { default as ListComboProperty } from './components/list/list.combo.svelte';
+export { default as Modal } from './modal.svelte';
 export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores'; // tmp

package/modal.svelte

@@ -0,0 +1,100 @@
+<script>import Icon from "./components/icon.svelte";
+export let title = "";
+export let open = false;
+export let content = "";
+export let icon = void 0;
+export const OK = 0;
+export const OKCancel = 1;
+export const Custom = 2;
+export let mode = OKCancel;
+export let ok_caption = "OK";
+export let cancel_caption = "Cancel";
+export let on_ok_callback = void 0;
+export let on_cancel_callback = void 0;
+export function show(on_close_callback = void 0) {
+  open = true;
+  close_callback = on_close_callback;
+}
+let close_callback = void 0;
+function on_ok(event) {
+  if (on_ok_callback)
+    on_ok_callback();
+  if (close_callback)
+    close_callback("OK");
+}
+function on_cancel(event) {
+  open = false;
+  if (on_cancel_callback)
+    on_cancel_callback();
+  if (close_callback)
+    close_callback("Cancel");
+}
+</script>
+
+{#if open}
+<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <!--
+      Background backdrop, show/hide based on modal state.
+  
+      Entering: "ease-out duration-300"
+        From: "opacity-0"
+        To: "opacity-100"
+      Leaving: "ease-in duration-200"
+        From: "opacity-100"
+        To: "opacity-0"
+    -->
+    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+  
+    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <!--
+          Modal panel, show/hide based on modal state.
+  
+          Entering: "ease-out duration-300"
+            From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            To: "opacity-100 translate-y-0 sm:scale-100"
+          Leaving: "ease-in duration-200"
+            From: "opacity-100 translate-y-0 sm:scale-100"
+            To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        -->
+        <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+          <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+            <div class="sm:flex sm:items-start">
+              <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+                {#if icon}
+                    <Icon component={icon} size={6} class="text-gray-700"/>
+                {/if}
+              </div>
+              <div class="grow mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">{title}</h3>
+                <div class="mt-2">
+                    {#if content}
+                        <p class="text-sm text-gray-500">{content}</p>
+                    {:else}
+                        <slot/>
+                    {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+            {#if mode == OK}
+                <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
+                        on:click={on_ok}>
+                        {ok_caption}</button>
+            {:else if mode == OKCancel}
+                <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
+                        on:click={on_ok}>
+                        {ok_caption}</button>
+                <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                        on:click={on_cancel}>
+                        {cancel_caption}</button>
+            {:else if mode == Custom}
+                <slot name="footer"/>
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {/if}

package/modal.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        open?: boolean | undefined;
+        content?: string | undefined;
+        icon?: undefined;
+        OK?: 0 | undefined;
+        OKCancel?: 1 | undefined;
+        Custom?: 2 | undefined;
+        mode?: number | undefined;
+        ok_caption?: string | undefined;
+        cancel_caption?: string | undefined;
+        on_ok_callback?: Function | undefined;
+        on_cancel_callback?: Function | undefined;
+        show?: ((on_close_callback?: Function | undefined) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        footer: {};
+    };
+};
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
+    get OK(): 0;
+    get OKCancel(): 1;
+    get Custom(): 2;
+    get show(): (on_close_callback?: Function | undefined) => void;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.1.2",
+    "@humandialog/auth.svelte": "^1.2.0",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"
@@ -102,6 +102,7 @@
     ".": "./index.js",
     "./internal/configurable.content.svelte": "./internal/configurable.content.svelte",
     "./internal/loading.svelte": "./internal/loading.svelte",
+    "./modal.svelte": "./modal.svelte",
     "./operations.svelte": "./operations.svelte",
     "./page.row.svelte": "./page.row.svelte",
     "./page.svelte": "./page.svelte",