@humandialog/forms.svelte 0.5.12 → 0.5.14

package/components/combo/combo.d.ts

@@ -3,6 +3,7 @@ export declare class rCombo_item {
     Name: string | undefined;
     Avatar: string | undefined;
     Color: string | undefined;
+    Icon: any | undefined;
 }
 export declare class rCombo_definition {
     source: rCombo_item[];
@@ -13,5 +14,6 @@ export declare class rCombo_definition {
     element_key: string | undefined;
     element_name: string | undefined;
     element_avatar: string | undefined;
+    element_icon: string | undefined;
 }
 export declare const cached_sources: Map<string, Promise<object>>;

package/components/combo/combo.item.svelte

@@ -4,11 +4,13 @@ export let key = void 0;
 export let name = void 0;
 export let avatar = void 0;
 export let color = void 0;
+export let icon = void 0;
 let definition = getContext("rCombo-definition");
 let item = new rCombo_item();
 item.Name = name;
 item.Key = key;
 item.Avatar = avatar;
 item.Color = color;
+item.Icon = icon;
 definition.source.push(item);
 </script>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         name?: string | undefined;
         avatar?: string | undefined;
         color?: string | undefined;
+        icon?: any | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/combo/combo.js

@@ -3,6 +3,7 @@ export class rCombo_item {
     Name;
     Avatar; //url to avatar
     Color;
+    Icon = undefined;
 }
 export class rCombo_definition {
     source = [];
@@ -13,5 +14,6 @@ export class rCombo_definition {
     element_key;
     element_name;
     element_avatar;
+    element_icon;
 }
 export const cached_sources = new Map();

package/components/combo/combo.source.svelte

@@ -6,6 +6,7 @@ export let onCollect = void 0;
 export let key = "";
 export let name = "";
 export let avatar = "";
+export let icon = "";
 let definition = getContext("rCombo-definition");
 definition.collection_expr = association;
 definition.collection_path = path;
@@ -14,4 +15,5 @@ definition.onCollect = onCollect;
 definition.element_key = key;
 definition.element_name = name;
 definition.element_avatar = avatar;
+definition.element_icon = icon;
 </script>

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         key?: string | undefined;
         name?: string | undefined;
         avatar?: string | undefined;
+        icon?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/combo/combo.svelte

@@ -84,6 +84,14 @@ function setup(...args) {
   item = self ?? $contextItemsStore[ctx];
   if (!typename)
     typename = $contextTypesStore[ctx];
+  if (!typename) {
+    if (item.$type)
+      typename = item.$type;
+    else if (item.$ref) {
+      let s2 = item.$ref.split("/");
+      typename = s2[1];
+    }
+  }
   if (!label)
     label = a;
   tick_request_internal = tick_request_internal + 1;
@@ -493,6 +501,8 @@ function source_fetched(source) {
     if (icon) {
       if (definition.element_avatar)
         el.Avatar = e[definition.element_avatar];
+      else if (definition.element_icon)
+        el.Icon = e[definition.element_icon];
       else
         el.Avatar = e.$icon;
     }
@@ -541,6 +551,10 @@ function on_focus_out(e) {
                 {#if icon && sel_item}
                     {#if sel_item.Color}
                         <Icon size={5} circle={true} color={sel_item.Color}/>
+                    {:else if sel_item.Icon}
+                        <Icon size={4} component={sel_item.Icon}/>
+                    {:else if sel_item.Icon == null}
+                        <div class="w-4 h-4"></div>
                     {:else}
                         <Icon size={5} circle={true} symbol={sel_item.Avatar} label={sel_item.Name}/>
                     {/if}
@@ -591,6 +605,10 @@ function on_focus_out(e) {
                                     <Icon size={5} circle={true} color={item.Color}/>
                                 {:else if item.Avatar} 
                                     <Icon size={5} circle={true} symbol={item.Avatar}/>
+                                {:else if item.Icon}
+                                    <Icon size={4} component={item.Icon}/>
+                                {:else if item.Icon == null}
+                                    <div class="w-4 h-4"></div>
                                 {:else if item.Name}
                                     <Icon size={5} circle={true} label={item.Name}/>
                                 {:else}

package/components/document/internal/palette.svelte

@@ -18,7 +18,7 @@ let toolboxY;
 export function showAsToolbox(rect) {
   isToolbox = true;
   visible = true;
-  const margin = 15;
+  const margin = 0;
   const windowWidth = window.innerWidth - 2 * margin;
   toolboxX = margin;
   toolboxY = rect.bottom + margin;

package/components/document/rich.edit.svelte

@@ -1,5 +1,5 @@
 <script>import { Selection_helper } from "./internal/Selection_helper";
-import { afterUpdate, getContext, onDestroy, onMount } from "svelte";
+import { beforeUpdate, afterUpdate, getContext, onDestroy, onMount } from "svelte";
 import { Selection_range, Selection_edge } from "./internal/Selection_range";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
@@ -85,8 +85,6 @@ function setup_source() {
   if (!value)
     value = "<p>\u200B</p>";
   has_changed_value = false;
-  if (stored_selection)
-    set_selection(stored_selection);
 }
 onMount(() => {
   if (!editable_div)
@@ -114,6 +112,19 @@ onDestroy(() => {
   if (is_command_palette_visible)
     hide_command_palette();
 });
+let storedSelection = null;
+beforeUpdate(() => {
+  if (editable_div && document.activeElement == editable_div)
+    storedSelection = Selection_helper.get_selection(editable_div);
+  else
+    storedSelection = null;
+});
+afterUpdate(() => {
+  if (storedSelection) {
+    const range = Selection_helper.create_range(editable_div, storedSelection.begin.absolute_index, storedSelection.end.absolute_index);
+    set_selection(range);
+  }
+});
 function content_changed(checkZeroWitdhSpaces) {
   if (document.activeElement != editable_div)
     return;
@@ -755,7 +766,7 @@ function set_tag_and_class_for_paragraph(node, tag, css_class) {
 function do_format(tag, css_class) {
   const elem = editable_div;
   const editableElem = editable_div;
-  let stored_selection2 = Selection_helper.get_selection(elem);
+  let stored_selection = Selection_helper.get_selection(elem);
   let sel = window.getSelection();
   let should_restore_selection = false;
   if (sel.isCollapsed || sel.focusNode === sel.anchorNode) {
@@ -784,7 +795,7 @@ function do_format(tag, css_class) {
     } while (node);
   }
   if (should_restore_selection) {
-    const range = Selection_helper.create_range(editableElem, stored_selection2.begin.absolute_index, stored_selection2.end.absolute_index);
+    const range = Selection_helper.create_range(editableElem, stored_selection.begin.absolute_index, stored_selection.end.absolute_index);
     set_selection(range);
   }
 }
@@ -941,10 +952,7 @@ function navigate_command_palette(key) {
   else if (key == "ArrowUp")
     palette.navigate_up();
 }
-let stored_selection = void 0;
 function on_selection_changed() {
-  let active_range = Selection_helper.get_selection(editable_div);
-  stored_selection = window.getSelection()?.getRangeAt(0);
 }
 let intervalId = 0;
 function on_focus() {
@@ -952,7 +960,7 @@ function on_focus() {
 function on_blur() {
   let active_range = Selection_helper.get_selection(editable_div);
   console.log("rich.edit: on_blur", active_range?.begin?.absolute_index);
-  stored_selection = void 0;
+  storedSelection = null;
   if (onBlur) {
     onBlur();
     onBlur = void 0;
@@ -989,7 +997,10 @@ let commands = [
   //   {   caption: 'Heading 1',    description: 'Big section heading',            tags: 'h1',      icon: FaHead,    icon_size: 6,      on_choice: () => { do_format('h2', '') } } ,
   //   {   caption: 'Heading 2',    description: 'Medium section heading',         tags: 'h2',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,
   //   {   caption: 'Heading 3',    description: 'Small section heading',          tags: 'h3',      icon: FaHead,    icon_size: 4,      on_choice: () => { do_format('h4', '') } } ,
-  { caption: "Heading", description: "Description heading", tags: "h2", icon: FaHead, icon_size: 6, on_choice: () => {
+  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: FaHead, icon_size: 6, on_choice: () => {
+    do_format("h1", "");
+  } },
+  { caption: "Heading 2", description: "Description heading", tags: "h2", icon: FaHead, icon_size: 6, on_choice: () => {
     do_format("h2", "");
   } },
   //   {   caption: 'Heading 2',      description: 'Medium description heading',     tags: 'h3',      icon: FaHead,    icon_size: 5,      on_choice: () => { do_format('h3', '') } } ,

package/components/kanban/Kanban.js

@@ -4,7 +4,7 @@ export const KanbanCardBottom = 3;
 export class rKanban_column {
     id;
     title = '';
-    width = 'w-[240px]';
+    width = '';
     state = '';
     finishing = false;
     operations = undefined;

package/components/kanban/internal/kanban.column.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext, afterUpdate, tick } from "svelte";
+<script>import { getContext, afterUpdate, tick, onMount } from "svelte";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../../stores";
-import { getActive, activateItem, editable, isActive, isSelected, selectable, startEditing } from "../../../utils.js";
+import { getActive, activateItem, editable, isActive, isSelected, selectable, startEditing, isDeviceSmallerThan } from "../../../utils.js";
 import Card from "./kanban.card.svelte";
 import { KanbanColumnTop, KanbanColumnBottom } from "../Kanban";
 import Inserter from "./kanban.inserter.svelte";
@@ -38,7 +38,6 @@ export function setBorder(what_to_do) {
 let definition = getContext("rKanban-definition");
 let columnDef = definition.columns[currentColumnIdx];
 let column_items = void 0;
-let width_class = columnDef.width ? `w-11/12 sm:${columnDef.width}` : "w-11/12 sm:w-[240px]";
 $:
   setup_data();
 $:
@@ -165,6 +164,25 @@ export function activate(e) {
       }
     );
 }
+onMount(() => {
+  window.addEventListener("resize", onResizeWindow);
+  return () => {
+    window.removeEventListener("resize", onResizeWindow);
+  };
+});
+let styleWidth = getWidthStyle();
+function onResizeWindow() {
+  styleWidth = getWidthStyle();
+}
+function getWidthStyle() {
+  const assumed_space = 800;
+  const default_column_width = Math.floor(assumed_space / definition.columns.length);
+  const column_width = columnDef.width ? columnDef.width : default_column_width;
+  if (window.innerWidth >= 640)
+    return `width: ${column_width}px; min-width: 180px; max-width: ${column_width}px;`;
+  else
+    return "width: 92%;";
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -172,11 +190,11 @@ export function activate(e) {
 <section class="    snap-center 
                     sm:snap-align-none 
                     flex-none sm:flex-1
-                    sm:min-w-[180px] sm:max-w-[240px]
                     sm:min-h-[calc(100vh-8rem)] 
                     min-h-[calc(100vh-5rem)] 
                     rounded-md border border-transparent  
-                    {width_class} {selected_class} {focused_class}"
+                    {selected_class} {focused_class}"
+        style={styleWidth}
         use:selectable={columnDef}
         on:click={activate}>
     <header class:cursor-pointer={!is_row_active && columnDef.operations} bind:this={headerElement}>
@@ -237,4 +255,5 @@ export function activate(e) {
         {/if}
 
     </ul>
-</section>
+</section>
+

package/components/kanban/kanban.column.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from "svelte";
 import { rKanban_column } from "./Kanban";
 export let title = "";
-export let width = "w-[240px]";
+export let width = "";
 export let state = "";
 export let finishing = false;
 export let operations = void 0;

package/index.d.ts

@@ -52,7 +52,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 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 } from './utils';
-export { mainViewReloader, reloadMainView } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';

package/index.js

@@ -58,7 +58,7 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 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 } from './utils';
-export { mainViewReloader, reloadMainView } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.12",
+  "version": "0.5.14",
   "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.5.1",
+    "@humandialog/auth.svelte": "^1.5.3",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"

package/stores.d.ts

@@ -1,7 +1,7 @@
 export function setNavigatorTitle(key: any, title: any): void;
 export function hasSelectedItem(): boolean;
 export function hasDataItem(): boolean;
-export function reloadMainView(): void;
+export function reloadMainContentPage(): void;
 export function set_dark_mode_default(value: any): void;
 export function set_default_tools_visible(value: any): void;
 export function restore_defults(): void;
@@ -28,7 +28,7 @@ export const contextToolbarOperations: import("svelte/store").Writable<never[]>;
 export const pageToolbarOperations: import("svelte/store").Writable<never[]>;
 export const page_title: import("svelte/store").Writable<string>;
 export const nav_titles: import("svelte/store").Writable<{}>;
-export const mainViewReloader: import("svelte/store").Writable<number>;
+export const mainContentPageReloader: import("svelte/store").Writable<number>;
 export const dark_mode_store: import("svelte/store").Writable<any>;
 export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
 export let previously_visible_sidebar: string;

package/stores.js

@@ -10,7 +10,7 @@ export const contextToolbarOperations = writable([]);
 export const pageToolbarOperations = writable([]);
 export const page_title = writable('');
 export const nav_titles = writable({});
-export const mainViewReloader = writable(1);
+export const mainContentPageReloader = writable(1);
 
 export function setNavigatorTitle(key, title)
 {
@@ -31,11 +31,11 @@ export function hasDataItem()
     return itm !== null && itm !== undefined;
 }
 
-export function reloadMainView()
+export function reloadMainContentPage()
 {
-    let val = get(mainViewReloader);
+    let val = get(mainContentPageReloader);
     val += 1;
-    mainViewReloader.set(val);
+    mainContentPageReloader.set(val);
 }