@humandialog/forms.svelte 1.3.6 → 1.3.7

package/components/Fab.svelte

@@ -46,6 +46,7 @@ export function activateMainOperation() {
   const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
   if (!mainOperationButton)
     return;
+  console.log("activateMainOperation");
   mainOperationButton.click();
 }
 function on_click(e, operation) {

package/components/document/editor.svelte

@@ -184,7 +184,8 @@ const suggestion = {
           lockNextBlurCallbacks++;
           suggestionRange = props.range;
           editor.commands.blur();
-          setTimeout(() => UI.fab?.activateMainOperation(), 100);
+          const cursorRect = props.clientRect();
+          setTimeout(() => show_command_palette(cursorRect), 100);
         } else {
           const cursorRect = props.clientRect();
           show_command_palette(cursorRect);
@@ -575,13 +576,26 @@ function on_palette_shown() {
 function on_palette_hidden() {
   is_command_palette_visible = false;
 }
-function show_command_palette(cursorRect) {
-  let rect = cursorRect;
+function show_command_palette(cursor_rect) {
   let client_rect = get_window_box();
+  if (isDeviceSmallerThan("sm"))
+    show_small_command_palette(client_rect);
+  else
+    show_big_command_palette(cursor_rect, client_rect);
+}
+function show_small_command_palette(client_rect) {
+  palette.max_height_px = client_rect.height - 64;
+  palette.width_px = client_rect.width - 96;
+  let x = 64, y = 32;
+  let show_above = false;
+  palette.show(x, y, show_above);
+}
+function show_big_command_palette(cursor_rect, client_rect) {
+  let rect = cursor_rect;
   let top_space = rect.y;
   let bottom_space = client_rect.height - (rect.y + rect.height);
   palette.max_height_px = 500;
-  palette.width_px = 400;
+  palette.width_px = 200;
   let preferred_palette_height = palette.max_height_px;
   let preferred_palette_width = palette.width_px;
   let x = 0, y = 0;

package/components/document/internal/palette.row.big.svelte

@@ -0,0 +1,59 @@
+<svelte:options accessors={true}/>
+<script>import Icon from "../../icon.svelte";
+export let id;
+export let cmd;
+export let width_px = 400;
+export let is_highlighted = false;
+export let active = false;
+let icon_placeholder_size = cmd.description ? 12 : 6;
+let icon_size = cmd.icon_size ? cmd.icon_size : icon_placeholder_size - 6;
+let cl = $$props.class ?? "";
+$:
+  active_class = calculateBackground(is_highlighted, active);
+function calculateBackground(...args) {
+  if (is_highlighted) {
+    if (active)
+      return "bg-stone-400/40 dark:bg-stone-400/40";
+    else
+      return "bg-stone-400/30 dark:bg-stone-400/30";
+  } else {
+    if (active)
+      return "bg-stone-400/20 dark:bg-stone-400/20";
+    else
+      return "";
+  }
+}
+let element;
+export function scrollToView() {
+  element?.scrollIntoView({
+    block: "nearest",
+    inline: "nearest"
+  });
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div id={id} class="font-medium m-0 p-0 text-sm w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" 
+     on:click 
+     on:mousemove
+     on:mousedown
+     bind:this={element}>
+    <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
+        {#if cmd.icon}
+            <Icon size={icon_size} component={cmd.icon}/>
+        {/if}
+    </div>
+    <div class ="">
+        <p>{cmd.caption}</p>
+        {#if cmd.description}
+            {@const shortcut_width_px = cmd.shortcut ? 80 : 0}
+            <p  class="text-sm font-normal text-stone-400 dark:text-stone-500 truncate inline-block"
+                style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{cmd.description}</p>
+        {/if}
+    </div>
+    {#if cmd.shortcut}
+        <div class="pr-1 text-sm font-mono text-stone-500" 
+             style:width={"80px"} >{cmd.shortcut}</div>
+    {/if}
+</div>
+

package/components/document/internal/palette.row.big.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Document_command } from './Document_command';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        cmd: Document_command;
+        width_px?: number | undefined;
+        is_highlighted?: boolean | undefined;
+        active?: boolean | undefined;
+        scrollToView?: (() => void) | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mousedown: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PaletteProps = typeof __propDef.props;
+export type PaletteEvents = typeof __propDef.events;
+export type PaletteSlots = typeof __propDef.slots;
+export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteEvents, PaletteSlots> {
+    get scrollToView(): () => void;
+    get id(): string;
+    /**accessor*/
+    set id(_: string);
+    get cmd(): Document_command;
+    /**accessor*/
+    set cmd(_: Document_command);
+    get width_px(): number | undefined;
+    /**accessor*/
+    set width_px(_: number | undefined);
+    get is_highlighted(): boolean | undefined;
+    /**accessor*/
+    set is_highlighted(_: boolean | undefined);
+    get active(): boolean | undefined;
+    /**accessor*/
+    set active(_: boolean | undefined);
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
+}
+export {};

package/components/document/internal/palette.row.svelte

@@ -5,8 +5,8 @@ export let cmd;
 export let width_px = 400;
 export let is_highlighted = false;
 export let active = false;
-let icon_placeholder_size = cmd.description ? 12 : 6;
-let icon_size = cmd.icon_size ? cmd.icon_size : icon_placeholder_size - 6;
+let icon_size = cmd.icon_size ? cmd.icon_size : 4;
+let icon_placeholder_size = icon_size + 4;
 let cl = $$props.class ?? "";
 $:
   active_class = calculateBackground(is_highlighted, active);
@@ -33,27 +33,17 @@ export function scrollToView() {
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div id={id} class="font-medium m-0 p-0 text-sm w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" 
+<div id={id} class="w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" 
      on:click 
      on:mousemove
      on:mousedown
      bind:this={element}>
-    <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
+    <div class="flex items-center justify-center space-x-10 px-4 py-2" >
         {#if cmd.icon}
             <Icon size={icon_size} component={cmd.icon}/>
         {/if}
     </div>
-    <div class ="">
-        <p>{cmd.caption}</p>
-        {#if cmd.description}
-            {@const shortcut_width_px = cmd.shortcut ? 80 : 0}
-            <p  class="text-sm font-normal text-stone-400 dark:text-stone-500 truncate inline-block"
-                style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{cmd.description}</p>
-        {/if}
-    </div>
-    {#if cmd.shortcut}
-        <div class="pr-1 text-sm font-mono text-stone-500" 
-             style:width={"80px"} >{cmd.shortcut}</div>
-    {/if}
+    
+    <h4>{cmd.caption}</h4>
 </div>
 

package/components/document/internal/palette.svelte

@@ -28,6 +28,7 @@ export function showAsToolbox(rect) {
   toolboxY = rect.bottom + margin;
   toolboxY += window.scrollY;
   css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+  console.log("toolbox: ", css_style);
   dispatch("palette_shown");
 }
 let paletteElement;
@@ -220,7 +221,7 @@ function isRowActive(cmd) {
 </script>
 
 {#if isToolbox}
-    <menu   class=" not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
+    <menu   class="  bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
                     z-30
                     flex flex-row flex-nowrap"
             style={css_style}
@@ -259,7 +260,7 @@ function isRowActive(cmd) {
     </menu>
 {:else}
     <div    id="__hd_FormattingPalette"
-            class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30 overflow-y-auto" 
+            class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30 overflow-y-auto" 
             hidden={!visible}
             style={css_style}
             bind:this={paletteElement}>

package/index.d.ts

@@ -54,7 +54,7 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/index.js

@@ -60,7 +60,7 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -82,6 +82,7 @@
     "./components/document/internal/h2.icon.svelte": "./components/document/internal/h2.icon.svelte",
     "./components/document/internal/h3.icon.svelte": "./components/document/internal/h3.icon.svelte",
     "./components/document/internal/h4.icon.svelte": "./components/document/internal/h4.icon.svelte",
+    "./components/document/internal/palette.row.big.svelte": "./components/document/internal/palette.row.big.svelte",
     "./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",

package/utils.d.ts

@@ -31,6 +31,8 @@ export function isOnScreenKeyboardVisible(): boolean;
 export function isOnNavigationPage(): boolean;
 export function pushNavigationPage(): void;
 export function popNavigationPage(): void;
+export function dec2hex(dec: any): any;
+export function randomString(len: any): string;
 export namespace icons {
     const symbols: null;
 }

package/utils.js

@@ -643,4 +643,17 @@ export function popNavigationPage()
 {
     if(isOnNavigationPage())
         pop();
+}
+
+export function dec2hex (dec) 
+{
+    return dec.toString(16).padStart(2, "0")
+}
+  
+
+export function randomString(len) 
+{
+    var arr = new Uint8Array((len || 16) / 2)
+    window.crypto.getRandomValues(arr)
+    return Array.from(arr, dec2hex).join('')
 }