@humandialog/forms.svelte 0.4.45 → 0.5.1

package/components/Fab.svelte

@@ -1,24 +1,24 @@
-<script>import { context_toolbar_operations, page_toolbar_operations, context_items_store } from "../stores.js";
-import { show_floating_toolbar, show_menu, show_grid_menu } from "./menu.js";
+<script>import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
+import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import FaChevronUp from "svelte-icons/fa/FaChevronUp.svelte";
 import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
 let expanded = false;
 $:
-  update($page_toolbar_operations, $context_toolbar_operations);
+  update($pageToolbarOperations, $contextToolbarOperations);
 let operations = [];
 function update(...args) {
-  if ($context_toolbar_operations && $context_toolbar_operations.length > 0)
-    operations = $context_toolbar_operations;
+  if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
+    operations = $contextToolbarOperations;
   else
-    operations = $page_toolbar_operations;
+    operations = $pageToolbarOperations;
 }
 function on_click(e, operation) {
   if (!operation)
     return;
   if (operation.action) {
     let focused_item = null;
-    if ($context_items_store.focused)
-      focused_item = $context_items_store[$context_items_store.focused];
+    if ($contextItemsStore.focused)
+      focused_item = $contextItemsStore[$contextItemsStore.focused];
     operation.action(focused_item);
   }
   let owner = e.target;
@@ -33,15 +33,18 @@ function on_click(e, operation) {
   rect.width += 2 * margin;
   rect.height += 2 * margin;
   if (operation.menu)
-    show_menu(rect, operation.menu);
+    showMenu(rect, operation.menu);
   else if (operation.toolbar)
-    show_floating_toolbar(rect, operation.toolbar);
+    showFloatingToolbar(rect, operation.toolbar, operation.props ?? {});
   else if (operation.grid)
-    show_grid_menu(rect, operation.grid);
+    showMenu(rect, operation.grid);
 }
 function toggle_expand(e) {
   expanded = !expanded;
 }
+function mousedown(e) {
+  e.preventDefault();
+}
 </script>
 
 {#if operations && operations.length > 0}
@@ -54,28 +57,32 @@ function toggle_expand(e) {
                     dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                     flex items-center justify-center
                     disable-dbl-tap-zoom"
-                    on:click|stopPropagation={(e) => {on_click(e, main_operation)}} >
+                    on:click|stopPropagation={(e) => {on_click(e, main_operation)}} 
+                    on:mousedown={mousedown} >
         <div class="w-7 h-7"><svelte:component this={main_operation.icon}/></div>
     </button>
 
     {#if operations.length > 1}
         {@const secondary_operation = operations[1]}
-        <button class=" bg-transparent 
-                        w-[55px] h-[55px] 
-                        fixed m-0 absolute bottom-[10px] right-[60px]
-                        flex items-center justify-center
-                        disable-dbl-tap-zoom"
-                        on:click|stopPropagation={(e) => {on_click(e, secondary_operation)}} >
-            <div class="    w-10 h-10 
-                            text-white bg-zinc-500 hover:bg-zinc-500
-                            dark:bg-zinc-500 dark:hover:bg-zinc-500
-                            font-medium rounded-full text-sm text-center shadow-md
-                            flex items-center justify-center">
-                <div class="w-5 h-5">
-                    <svelte:component this={secondary_operation.icon}/>
+        {#if !secondary_operation.separator}
+            <button class=" bg-transparent 
+                            w-[55px] h-[55px] 
+                            fixed m-0 absolute bottom-[10px] right-[60px]
+                            flex items-center justify-center
+                            disable-dbl-tap-zoom"
+                            on:click|stopPropagation={(e) => {on_click(e, secondary_operation)}} 
+                            on:mousedown={mousedown} >
+                <div class="    w-10 h-10 
+                                text-white bg-zinc-500 hover:bg-zinc-500
+                                dark:bg-zinc-500 dark:hover:bg-zinc-500
+                                font-medium rounded-full text-sm text-center shadow-md
+                                flex items-center justify-center">
+                    <div class="w-5 h-5">
+                        <svelte:component this={secondary_operation.icon}/>
+                    </div>
                 </div>
-            </div>
-        </button>
+            </button>
+        {/if}
 
         {#if operations.length == 3}
             {@const thrid_operation = operations[2]}
@@ -85,7 +92,8 @@ function toggle_expand(e) {
                             
                             flex items-center justify-center
                             disable-dbl-tap-zoom"
-                            on:click|stopPropagation={(e) => {on_click(e, thrid_operation)}} >
+                            on:click|stopPropagation={(e) => {on_click(e, thrid_operation)}} 
+                            on:mousedown={mousedown} >
                 <div class="    w-10 h-10
                             text-white bg-zinc-500 hover:bg-zinc-500 
                             font-medium rounded-full text-sm text-center shadow-md
@@ -103,7 +111,8 @@ function toggle_expand(e) {
                             
                             flex items-center justify-center
                             disable-dbl-tap-zoom"
-                            on:click|stopPropagation={toggle_expand}>
+                            on:click|stopPropagation={toggle_expand}
+                            on:mousedown={mousedown}>
                 <div class="    w-10 h-10
                                 text-white bg-zinc-500 hover:bg-zinc-500 
                                 font-medium rounded-full text-sm text-center shadow-md
@@ -119,28 +128,31 @@ function toggle_expand(e) {
                 </div>
             </button>
             {#if expanded}
-                {@const operations_to_expand = operations.slice(2)}
+                {@const operations_to_expand = operations.slice(2).reverse()}
                 <ul class="list-none m-0 absolute bottom-[125px] right-0">
                     {#each operations_to_expand as operation}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <li class="flex flex-row px-0 py-0 justify-end group"
-                            on:click|stopPropagation={(e) => {on_click(e, operation)}}>
-                            <div>
-                                <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-slate-700 group-hover:bg-slate-800 px-1 shadow-lg rounded">{operation.caption}</span>
-                            </div>
-                            <button class=" bg-transparent
-                                            mx-0 mb-4 w-[55px] h-[55px] 
-                                            flex items-center justify-center
-                                            disable-dbl-tap-zoom">
-                                <div class="    w-[55px] h-[55px]
-                                                text-white bg-zinc-500 group-hover:bg-zinc-500 
-                                                dark:bg-zinc-500 dark:group-hover:bg-zinc-500
-                                                font-medium rounded-full text-sm text-center shadow-md
-                                                flex items-center justify-center">
-                                    <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                        {#if !operation.separator}
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <li class="flex flex-row px-0 py-0 justify-end group"
+                                on:click|stopPropagation={(e) => {on_click(e, operation)}}
+                                on:mousedown={mousedown}>
+                                <div>
+                                    <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
                                 </div>
-                            </button>
-                        </li>
+                                <button class=" bg-transparent
+                                                mx-0 mb-4 w-[55px] h-[55px] 
+                                                flex items-center justify-center
+                                                disable-dbl-tap-zoom">
+                                    <div class="    w-[55px] h-[55px]
+                                                    text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                    dark:bg-zinc-500 dark:group-hover:bg-zinc-500
+                                                    font-medium rounded-full text-sm text-center shadow-md
+                                                    flex items-center justify-center">
+                                        <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                                    </div>
+                                </button>
+                            </li>
+                        {/if}
                     {/each}
                 </ul>
             {/if}

package/components/Floating_container.svelte

@@ -22,7 +22,7 @@ export async function show(around, _toolbar, _props = {}) {
   visible = true;
   toolbar = _toolbar;
   props = _props;
-  props.onhide = () => {
+  props.onHide = () => {
     hide();
   };
   hide_window_indicator = 0;
@@ -31,7 +31,7 @@ export async function show(around, _toolbar, _props = {}) {
   if (!was_visible)
     root_element.addEventListener("click", on_before_container_click, true);
 }
-export function is_visible() {
+export function isVisible() {
   return visible;
 }
 export function hide() {
@@ -58,7 +58,8 @@ afterUpdate(() => {
   let rect = root_element.getBoundingClientRect();
   if (rect.height == 0)
     return;
-  let container_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+  const m = 15;
+  let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
   if (rect.right > container_rect.right)
     x = container_rect.right - rect.width;
   if (rect.bottom > container_rect.bottom)
@@ -71,7 +72,7 @@ afterUpdate(() => {
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-slate-100 dark:bg-slate-800 rounded-lg shadow {display} z-30"
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow {display} z-30"
         style="left:{x}px; top:{y}px; width: max-content; height:max-content"
         bind:this={root_element}>
     <svelte:component this={toolbar} {...props} />

package/components/Floating_container.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
-        is_visible?: (() => boolean) | undefined;
+        isVisible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
     };
     events: {
@@ -15,7 +15,7 @@ export type FloatingContainerEvents = typeof __propDef.events;
 export type FloatingContainerSlots = typeof __propDef.slots;
 export default class FloatingContainer extends SvelteComponentTyped<FloatingContainerProps, FloatingContainerEvents, FloatingContainerSlots> {
     get show(): (around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>;
-    get is_visible(): () => boolean;
+    get isVisible(): () => boolean;
     get hide(): () => void;
 }
 export {};

package/components/Grid.menu.svelte

@@ -1,8 +1,8 @@
 <script>
-    import {context_items_store} from '../stores.js'
+    import {contextItemsStore} from '../stores.js'
 
     export let operations = []
-    export let onhide = undefined;
+    export let onHide = undefined;
     
     $: grid_cols = init(operations);
 
@@ -94,8 +94,8 @@
 
     function execute_action(e, operation)
     {
-        if(!!onhide)
-            onhide();
+        if(!!onHide)
+            onHide();
 
         e.stopPropagation();
 
@@ -106,8 +106,8 @@
             return;
 
         let context_item = null
-        if($context_items_store.focused)
-            context_item = $context_items_store[$context_items_store.focused]
+        if($contextItemsStore.focused)
+            context_item = $contextItemsStore[$contextItemsStore.focused]
         
         operation.action(context_item);
     }
@@ -121,11 +121,15 @@
             {@const col=col_span(operation.columns ?? 1)}
             
             <button class=" py-2.5 px-5 {col}
-                            text-base sm:text-xs font-medium text-gray-900 dark:text-gray-400 dark:hover:text-white
-                            bg-slate-100 hover:bg-slate-200 dark:bg-gray-800 dark:hover:bg-gray-700 active:bg-slate-300 dark:active:bg-gray-600
-                            border rounded border-gray-200 dark:border-gray-600 focus:outline-none
+                            text-base sm:text-xs font-medium text-stone-900 dark:text-stone-400 dark:hover:text-white
+                            bg-stone-100 hover:bg-stone-200 dark:bg-stone-800 dark:hover:bg-stone-700 active:bg-stone-300 dark:active:bg-stone-600
+                            border rounded border-stone-200 dark:border-stone-600 focus:outline-none
                             inline-flex items-center justify-center"
                             on:click={(e) => {execute_action(e, operation)}}>
+                
+                {#if operation.icon}
+                    <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
+                {/if}
                 <div>{operation.caption}</div>
             </button>
         {/if}

package/components/Grid.menu.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
-    onhide?: any;
+    onHide?: any;
     operations?: any[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -14,7 +14,7 @@ export type GridSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        onhide?: any;
+        onHide?: any;
         operations?: any[] | undefined;
     };
     events: {

package/components/button.svelte

@@ -1,6 +1,6 @@
 <script>import { Button } from "flowbite-svelte";
 import { getContext } from "svelte";
-import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../stores.js";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
 export let self = null;
 export let operation = "";
@@ -21,12 +21,12 @@ function setup(data_tick_store2) {
     return;
   last_tick = data_tick_store2;
   if (!action) {
-    item = self ?? $context_items_store[ctx];
+    item = self ?? $contextItemsStore[ctx];
     if (!typename)
-      typename = $context_types_store[ctx];
+      typename = $contextTypesStore[ctx];
   }
   if (is_table_component) {
-    if ($context_items_store["sel"] != self)
+    if ($contextItemsStore["sel"] != self)
       can_be_activated = false;
     else
       can_be_activated = true;

package/components/checkbox.svelte

@@ -1,7 +1,7 @@
 <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";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../stores.js";
+import { informModification, pushChanges } from "../updates.js";
+import { parseWidthDirective } from "../utils.js";
 export let checked = void 0;
 export let disabled = false;
 export let self = null;
@@ -9,12 +9,13 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let c = "";
+export let pushChangesImmediately = true;
 let item = null;
 let additional_class = $$restProps.class ?? "";
 let value = false;
 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 cs = parseWidthDirective(c);
+let color_style = disabled ? "text-stone-400 dark:text-stone-500" : "text-stone-900 dark:text-stone-300";
 let last_tick = -1;
 $:
   setup($data_tick_store);
@@ -23,9 +24,9 @@ function setup(data_tick_store2) {
     return;
   last_tick = data_tick_store2;
   if (checked === void 0) {
-    item = self ?? $context_items_store[ctx];
+    item = self ?? $contextItemsStore[ctx];
     if (!typename)
-      typename = $context_types_store[ctx];
+      typename = $contextTypesStore[ctx];
     value = item && a ? !!item[a] : false;
   } else
     value = checked;
@@ -34,9 +35,10 @@ function on_changed() {
   if (item && a) {
     item[a] = value;
     if (typename) {
-      inform_modification(item, a, typename);
+      informModification(item, a, typename);
       $data_tick_store = $data_tick_store + 1;
-      push_changes();
+      if (pushChangesImmediately)
+        pushChanges();
     }
   }
 }
@@ -47,7 +49,7 @@ function on_changed() {
             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"/>
+            class="w-4 h-4 bg-stone-100 border-stone-300 dark:ring-offset-stone-800 focus:ring-2 mr-2 dark:bg-stone-700 dark:border-stone-600 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"/>
     <span class="ml-1">
         <slot/>
     </span>

package/components/checkbox.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/combo/combo.d.ts

@@ -9,7 +9,7 @@ export declare class rCombo_definition {
     collection_expr: string | undefined;
     collection_path: string | undefined;
     collection: object[] | undefined;
-    on_collect: undefined;
+    onCollect: undefined;
     element_key: string | undefined;
     element_name: string | undefined;
     element_avatar: string | undefined;

package/components/combo/combo.js

@@ -9,7 +9,7 @@ export class rCombo_definition {
     collection_expr;
     collection_path;
     collection;
-    on_collect = undefined;
+    onCollect = undefined;
     element_key;
     element_name;
     element_avatar;

package/components/combo/combo.source.svelte

@@ -2,7 +2,7 @@
 export let association = void 0;
 export let path = void 0;
 export let objects = void 0;
-export let on_collect = void 0;
+export let onCollect = void 0;
 export let key = "";
 export let name = "";
 export let avatar = "";
@@ -10,7 +10,7 @@ let definition = getContext("rCombo-definition");
 definition.collection_expr = association;
 definition.collection_path = path;
 definition.collection = objects;
-definition.on_collect = on_collect;
+definition.onCollect = onCollect;
 definition.element_key = key;
 definition.element_name = name;
 definition.element_avatar = avatar;

package/components/combo/combo.source.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         association?: string | undefined;
         path?: string | undefined;
         objects?: object[] | undefined;
-        on_collect?: undefined;
+        onCollect?: undefined;
         key?: string | undefined;
         name?: string | undefined;
         avatar?: string | undefined;