@humandialog/forms.svelte 0.4.11 → 0.4.12

package/components/Grid.menu.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {context_items_store} from '..'
+    import {context_items_store} from '../stores.js'
 
     export let operations = []
     export let hide = undefined;

package/components/combo/combo.svelte

@@ -31,23 +31,36 @@ let filtered_source = null;
 let mutation_observer = null;
 let highlighted_option = null;
 let item = null;
+let root_element;
 let label_mb = "mb-1";
 let input_pt = "pt-0.5";
 let input_pb = "pb-1";
+let font_size = "text-sm";
+let line_h = "h-5";
 switch (s) {
   case "md":
     label_mb = "mb-2";
     input_pt = "pt-2.5";
     input_pb = "pb-2.5";
+    font_size = "text-sm";
+    line_h = "h-5";
+    break;
+  case "xs":
+    label_mb = "mb-0.5";
+    input_pt = "pt-0.5";
+    input_pb = "pb-0.5";
+    font_size = "text-xs";
+    line_h = "h-4";
     break;
 }
+let background_class = is_compact && !icon ? "bg-slate-900/10 dark:bg-slate-100/10 rounded-lg" : "";
 let appearance_class;
 if (is_compact)
-  appearance_class = `   text-gray-900 text-sm 
+  appearance_class = `   text-gray-900 ${font_size} 
                                 focus:ring-primary-600 block w-full  ${input_pb} ${input_pt} px-2.5 dark:bg-gray-700 
-                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500`;
+                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 ${background_class}`;
 else
-  appearance_class = `   bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg 
+  appearance_class = `   bg-gray-50 border border-gray-300 text-gray-900 ${font_size} 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`;
 let cs = c ? parse_width_directive(c) : "col-span-1";
@@ -76,12 +89,6 @@ afterUpdate(() => {
   if (is_dropdown_open && textbox && document.activeElement != textbox)
     textbox.focus();
 });
-function toggle() {
-  if (is_dropdown_open)
-    hide();
-  else
-    show();
-}
 function dropdown_action(node) {
   if (is_dropdown_open)
     dropdown_height = node.getBoundingClientRect().height;
@@ -94,13 +101,22 @@ function dropdown_action(node) {
     }
   };
 }
-function show() {
+let on_hide_callback = void 0;
+export function show(event, hide_callback) {
   if (!can_be_activated)
     return;
   if (!combo)
     return;
   if (is_dropdown_open)
     return;
+  if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  if (!!hide_callback)
+    on_hide_callback = hide_callback;
+  else
+    on_hide_callback = void 0;
   let client_rect;
   client_rect = new DOMRect();
   client_rect.x = 0;
@@ -112,6 +128,8 @@ function show() {
   let bottom_space = client_rect.height - (rect.y + rect.height);
   let palette_max_height_px = 500;
   let palette_width_px = rect.width;
+  if (palette_width_px < 120)
+    palette_width_px = 120;
   let preferred_palette_height = dropdown_height > 0 ? dropdown_height : palette_max_height_px;
   let preferred_palette_width = palette_width_px;
   let x = 0, y = 0;
@@ -131,11 +149,11 @@ function show() {
     y = rect.y;
     show_above = true;
   } else
-    show_fullscreen = true;
-  if (false) {
+    y = rect.y + rect.height;
+  if (show_fullscreen) {
     dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
   } else {
-    dropdown_position = `width: ${rect.width}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
+    dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
@@ -163,12 +181,15 @@ function show() {
     highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
   }
 }
-function hide() {
+export function hide() {
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
   combo_text = get_combo_text();
-  textbox.innerHtml = combo_text;
+  if (!!textbox)
+    textbox.innerHtml = combo_text;
+  if (!!on_hide_callback)
+    on_hide_callback();
   tick_request_internal = tick_request_internal + 1;
 }
 function selected_item(itm, a2) {
@@ -420,6 +441,11 @@ function setup_view(...args) {
   if (textbox)
     textbox.innerHTML = combo_text;
 }
+function on_focus_out(e) {
+  if (e.relatedTarget && root_element?.contains(e.relatedTarget)) {
+  } else
+    hide();
+}
 </script>
 
 <slot/>     <!-- definition slot first -->
@@ -427,16 +453,18 @@ function setup_view(...args) {
 
 {#if true}
     {@const c = setup_view(item, a, tick_request_internal) }
-
+    
 <div class={cs}
-    on:focusout={(e) => setTimeout(() => {hide()}, 100)}>
+    on:focusout={on_focus_out}
+    bind:this={root_element}>
     {#if !is_compact}
         <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
     {/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div    bind:this={combo}    
-            on:click|preventDefault|stopPropagation={show}
+            on:click={show}
             class="{appearance_class} flex flex-row content-between items-center"
+            class:cursor-pointer={can_be_activated && is_compact}
          >
             
         <div class="flex-1 flex flex-row items-center">
@@ -450,16 +478,19 @@ function setup_view(...args) {
                 {/if}
             {/if}
 
+            
             <p  bind:this={textbox}
-                class="ml-2 dark:text-white"
+                class="dark:text-white {line_h}"
+                class:ml-2={icon}
                 class:text-gray-400={ (!is_dropdown_open) && (!sel_item)}
                 class:text-gray-700={ is_dropdown_open || sel_item }
+                class:w-10={!combo_text}
                 contenteditable={is_dropdown_open}
                 on:keydown={on_keydown}>
                 {combo_text}</p>
         </div>
         
-        {#if can_be_activated }
+        {#if can_be_activated && !is_compact }
             <Icon size={3} component={FaChevronDown} class="flex-none text-gray-700 dark:text-gray-200"/>
         {/if}
     </div>
@@ -487,7 +518,8 @@ function setup_view(...args) {
                             class:dark:bg-gray-700={highlighted_option == item}
                             class:dark:hover:bg-gray-700={highlighted_option == item}
                             on:mousemove={() => on_mouse_move(item)}
-                            on:click|preventDefault|stopPropagation={async () => await on_choose(item)}>
+                            on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                            tabindex="-1">
 
                             {#if icon}
                                 {#if item.Color}

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

@@ -14,6 +14,8 @@ declare const __propDef: {
         c?: string | undefined;
         compact?: boolean | undefined;
         in_context?: string | undefined;
+        show?: ((event: any, hide_callback: any) => void) | undefined;
+        hide?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,5 +28,7 @@ export type ComboProps = typeof __propDef.props;
 export type ComboEvents = typeof __propDef.events;
 export type ComboSlots = typeof __propDef.slots;
 export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+    get show(): (event: any, hide_callback: any) => void;
+    get hide(): () => void;
 }
 export {};

package/components/delayed.spinner.svelte

@@ -1,6 +1,43 @@
 <script>import { Spinner } from "flowbite-svelte";
 import { onMount } from "svelte";
+export let color = "blue";
+export let size = 8;
 export let delay = 100;
+let user_class = $$props.class ?? "";
+const sizes = {
+  1: "w-1 h-1",
+  2: "w-2 h-2",
+  3: "w-3 h-3",
+  4: "w-4 h-4",
+  5: "w-5 h-5",
+  6: "w-6 h-6",
+  7: "w-7 h-7",
+  8: "w-8 h-8",
+  9: "w-9 h-9",
+  10: "w-10 h-10",
+  11: "w-11 h-11",
+  12: "w-12 h-12",
+  14: "w-14 h-14",
+  16: "w-16 h-16",
+  20: "w-20 h-20",
+  24: "w-24 h-24",
+  28: "w-28 h-28",
+  32: "w-32 h-32",
+  36: "w-36 h-36",
+  40: "w-40 h-40"
+};
+let iconsize = sizes[size];
+const colors = {
+  blue: "fill-blue-600",
+  gray: "fill-gray-600 dark:fill-gray-300",
+  green: "fill-green-500",
+  red: "fill-red-600",
+  yellow: "fill-yellow-400",
+  pink: "fill-pink-600",
+  purple: "fill-purple-600",
+  white: "fill-white"
+};
+let fillColorClass = colors[color];
 let visible = false;
 onMount(() => {
   visible = false;
@@ -14,5 +51,18 @@ onMount(() => {
 
 
 {#if visible}
-    <Spinner/>
+    <svg
+        role="status"
+        class='inline -mt-px animate-spin dark:text-gray-600 {iconsize} text-gray-300 {fillColorClass} {user_class}'
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+
+            <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor" />
+            <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill" />
+    </svg>
 {/if}

package/components/delayed.spinner.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        color?: string | undefined;
+        size?: number | undefined;
         delay?: number | undefined;
     };
     events: {

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

@@ -6,8 +6,8 @@ export default class Inputbox extends SvelteComponentTyped<{
     label?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
-    typename?: string | undefined;
     c?: string | undefined;
+    typename?: string | undefined;
     a?: string | undefined;
     s?: string | undefined;
     placeholder?: string | undefined;
@@ -28,8 +28,8 @@ declare const __propDef: {
         label?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
-        typename?: string | undefined;
         c?: string | undefined;
+        typename?: string | undefined;
         a?: string | undefined;
         s?: string | undefined;
         placeholder?: string | undefined;

package/form.box.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Form extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    cl?: string | undefined;
     c?: string | undefined;
+    cl?: string | undefined;
     fit?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,8 +21,8 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        cl?: string | undefined;
         c?: string | undefined;
+        cl?: string | undefined;
         fit?: boolean | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",

package/page.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  PageEvents */
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
-    cl?: string | undefined;
     c?: string | undefined;
+    cl?: string | undefined;
     w?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type PageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        cl?: string | undefined;
         c?: string | undefined;
+        cl?: string | undefined;
         w?: string | undefined;
     };
     events: {

package/page.svelte

@@ -95,9 +95,15 @@
         if(!clears_context)
             return;
 
+        let contexts = clears_context.split(' ');
+        contexts.forEach(c => 
+        {
+            $context_items_store[c] = null;
+            $context_info_store[c] = '';
+        })
+
         e.stopPropagation();
-        $context_items_store[clears_context] = null;
-        $context_info_store[clears_context] = '';
+       
         $context_toolbar_operations = [];
         $data_tick_store = $data_tick_store + 1;
     }

package/page.svelte.d.ts

@@ -4,11 +4,11 @@
 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;
-    cl?: string | undefined;
-    c?: string | undefined;
     toolbar_operations?: any;
     clears_context?: string | undefined;
 }, {
@@ -25,11 +25,11 @@ 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;
-        cl?: string | undefined;
-        c?: string | undefined;
         toolbar_operations?: any;
         clears_context?: string | undefined;
     };

package/tile.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Tile extends SvelteComponentTyped<{
     context?: string | undefined;
     self?: null | undefined;
-    cl?: string | undefined;
     c?: string | undefined;
+    cl?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         context?: string | undefined;
         self?: null | undefined;
-        cl?: string | undefined;
         c?: string | undefined;
+        cl?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tiles.row.svelte.d.ts

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

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

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