@humandialog/forms.svelte 0.4.12 → 0.4.13

package/components/sidebar/sidebar.brand.svelte

@@ -0,0 +1,16 @@
+
+<script>
+    export let href = "/";
+    export let img = "";
+
+</script>
+
+<a href={href} class="flex items-center pl-2.5 mb-5">
+    {#if img}
+        <img src={img} class="h-6 mr-3 sm:h-7" alt="" />
+    {/if}
+
+    <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+        <slot/>
+    </span>
+</a>

package/components/sidebar/sidebar.brand.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    img?: string | undefined;
+    href?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        img?: string | undefined;
+        href?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/sidebar/sidebar.group.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Icon from '../icon.svelte'
+    import Edit from '../edit.field.svelte'
+    import {FaPlus} from 'svelte-icons/fa'
+
+    export let border = false;
+    export let inserter = undefined;
+    export let inserter_placeholder = 'New'
+
+    let border_class = border ? " pt-4 mt-4 border-t border-gray-200 dark:border-gray-700" : ""
+</script>
+
+<ul class="space-y-2 {border_class}">
+    <slot/>
+
+    {#if inserter}
+        <Edit class="p-2 text-base font-normal text-gray-500 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" on_enter={inserter} placeholder={inserter_placeholder} inserter={true}>
+            <Icon size={5} component={FaPlus} class="mr-3"/>
+        </Edit>
+    {/if}
+</ul>

package/components/sidebar/sidebar.group.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    inserter?: any;
+    border?: boolean | undefined;
+    inserter_placeholder?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        inserter?: any;
+        border?: boolean | undefined;
+        inserter_placeholder?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/sidebar/sidebar.item.svelte

@@ -0,0 +1,60 @@
+<script>import Icon from "../icon.svelte";
+import { context_items_store, auto_hide_sidebar } from "../../stores";
+import {
+  selectable as _selectable,
+  is_selected,
+  editable as _editable
+} from "../../utils";
+export let href;
+export let icon = void 0;
+export let active = false;
+export let selectable = void 0;
+export let editable = void 0;
+$:
+  context_data = $context_items_store;
+let user_class = $$props.class ?? "";
+function selectable_if_needed(node, selectable2) {
+  if (selectable2)
+    _selectable(node, selectable2);
+}
+function selected(itm, context_data2) {
+  if (is_selected(itm))
+    return true;
+  else
+    return false;
+}
+function editable_if_needed(node, editable2) {
+  if (editable2)
+    _editable(node, editable2);
+}
+</script>
+
+<li>
+    <a
+        href={href}
+        on:click={ (e) => auto_hide_sidebar() } 
+        on:contextmenu
+        class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 border-2 border-transparent {user_class}"
+        class:bg-gray-200={active}
+        class:dark:bg-gray-700={active}
+        use:selectable_if_needed={selectable}
+        class:selected={selected(selectable, context_data)}
+                            >
+            {#if icon}
+                <Icon size={5} component={icon}/>
+            {/if}
+            <span   class="ml-3"
+                    use:editable_if_needed={editable}>
+                <slot/>
+            </span>
+    </a>
+</li>
+
+
+<style>
+    .selected {
+    border-width: 2px;
+    --tw-border-opacity: 1 !important;
+    border-color: rgb(147 197 253 / var(--tw-border-opacity)) !important
+}
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        href: string;
+        icon?: any | undefined;
+        active?: boolean | undefined;
+        selectable?: any | undefined;
+        editable?: any | undefined;
+    };
+    events: {
+        contextmenu: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+}
+export {};

package/components/sidebar/sidebar.svelte

@@ -0,0 +1,9 @@
+<script>
+
+</script>
+
+<aside class="w-full" aria-label="Sidebar">
+    <div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
+        <slot/>
+    </div>
+</aside>

package/components/sidebar/sidebar.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  SidebarProps */
+/** @typedef {typeof __propDef.events}  SidebarEvents */
+/** @typedef {typeof __propDef.slots}  SidebarSlots */
+export default class Sidebar extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/simple.table.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  SimpleEvents */
 /** @typedef {typeof __propDef.slots}  SimpleSlots */
 export default class Simple extends SvelteComponentTyped<{
-    focus?: boolean | undefined;
     select?: string | undefined;
+    focus?: boolean | undefined;
     context?: string | undefined;
     self?: null | undefined;
     nav?: boolean | undefined;
@@ -22,8 +22,8 @@ export type SimpleSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        focus?: boolean | undefined;
         select?: string | undefined;
+        focus?: boolean | undefined;
         context?: string | undefined;
         self?: null | undefined;
         nav?: boolean | undefined;

package/components/table/_template.table.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TemplateEvents */
 /** @typedef {typeof __propDef.slots}  TemplateSlots */
 export default class Template extends SvelteComponentTyped<{
-    focus?: boolean | undefined;
     select?: string | undefined;
+    focus?: boolean | undefined;
     context?: string | undefined;
     self?: null | undefined;
     nav?: boolean | undefined;
@@ -30,8 +30,8 @@ export type TemplateSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        focus?: boolean | undefined;
         select?: string | undefined;
+        focus?: boolean | undefined;
         context?: string | undefined;
         self?: null | undefined;
         nav?: boolean | undefined;

package/desk.svelte

@@ -16,8 +16,8 @@
             set_dark_mode_default } from './stores.js'
     
     import {session, AuthorizedView, Authorized, NotAuthorized, Auth} from '@humandialog/auth.svelte'
-
-
+    import { handle_select } from './utils'
+    
     export let layout;
 
     
@@ -133,7 +133,11 @@
 <svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />
 
 <AuthorizedView>
-    <div id="__hd_svelte_layout_root" class="{$dark_mode_store}">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div    id="__hd_svelte_layout_root" class="{$dark_mode_store}"
+            on:click={handle_select} 
+            on:contextmenu={handle_select}>
+
         <div class="bg-white dark:bg-gray-900 dark:text-white      min-h-screen h-screen">    
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->

package/index.d.ts

@@ -24,5 +24,10 @@ export { default as RichEdit } from './components/document/rich.edit.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
 export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
+export { default as Sidebar } from './components/sidebar/sidebar.svelte';
+export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
+export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
+export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
+export { select_item, activate_item, clear_active_item, is_active, is_selected, 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 } from './stores';

package/index.js

@@ -29,5 +29,10 @@ export { default as Spinner } from './components/delayed.spinner.svelte';
 //export { default as Menu } from './components/contextmenu.svelte'
 export { show_menu, show_grid_menu, show_floating_toolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';
+export { default as Sidebar } from './components/sidebar/sidebar.svelte';
+export { default as SidebarBrand } from './components/sidebar/sidebar.brand.svelte';
+export { default as SidebarGroup } from './components/sidebar/sidebar.group.svelte';
+export { default as SidebarItem } from './components/sidebar/sidebar.item.svelte';
+export { select_item, activate_item, clear_active_item, is_active, is_selected, 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 } from './stores'; // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -76,6 +76,10 @@
     "./components/inputbox.ltop.svelte": "./components/inputbox.ltop.svelte",
     "./components/menu": "./components/menu.js",
     "./components/radio.svelte": "./components/radio.svelte",
+    "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",
+    "./components/sidebar/sidebar.group.svelte": "./components/sidebar/sidebar.group.svelte",
+    "./components/sidebar/sidebar.item.svelte": "./components/sidebar/sidebar.item.svelte",
+    "./components/sidebar/sidebar.svelte": "./components/sidebar/sidebar.svelte",
     "./components/simple.table.svelte": "./components/simple.table.svelte",
     "./components/table/column.svelte": "./components/table/column.svelte",
     "./components/table/item.svelte": "./components/table/item.svelte",

package/utils.d.ts

@@ -1,3 +1,16 @@
+export function select_item(itm: any): void;
+export function activate_item(context_level: any, itm: any, operations?: null): void;
+export function clear_active_item(context_level: any): void;
+export function is_selected(itm: any): boolean;
+export function is_active(context_level: any, itm: any): boolean;
+export function editable(node: any, action: any): {
+    destroy(): void;
+};
+export function start_editing(element: any, finish_callback: any): void;
+export function selectable(node: any, itm: any): {
+    destroy(): void;
+};
+export function handle_select(e: any): void;
 export function parse_width_directive(c: any): string;
 export function should_be_comapact(): boolean;
 export namespace icons {

package/utils.js

@@ -1,7 +1,219 @@
-import { getContext } from "svelte";
+import { getContext, tick } from "svelte";
+import {get} from 'svelte/store'
+import { context_items_store, context_toolbar_operations } from "./stores";
 
 export let icons = {symbols :null}
 
+export function select_item(itm)
+{
+    let data_context = get(context_items_store);
+    data_context['sel'] = itm;
+    data_context.focused = 'sel';
+    context_items_store.set( {...data_context} )
+}
+
+export function activate_item(context_level, itm, operations=null)
+{
+    let data_context = get(context_items_store);
+    data_context['sel'] = itm; //null;
+    data_context[context_level] = itm;
+    data_context.focused = context_level;
+    context_items_store.set( {...data_context} )
+
+    if(operations && Array.isArray(operations))
+        context_toolbar_operations.set( [...operations] )
+}
+
+export function clear_active_item(context_level)
+{
+    let data_context = get(context_items_store);
+    data_context[context_level] = null;
+    data_context.focused = context_level;
+    context_items_store.set( {...data_context} )
+
+    context_toolbar_operations.set( [] )
+}
+
+export function is_selected(itm)
+{
+    let data_context = get(context_items_store);
+    if(!!data_context && !!data_context['sel'] && data_context['sel'] == itm)
+        return true;
+    else
+        return false;
+}
+
+
+export function is_active(context_level, itm)
+{
+    let data_context = get(context_items_store);
+    if(data_context != undefined && data_context[context_level] != undefined && data_context[context_level] == itm)
+        return true;
+    else
+        return false;
+}
+
+
+export function editable(node, action)
+{
+    const org_text = node.textContent;
+    const blur_listener = async (e) =>
+    {
+        await finish_editing(true);
+    }
+
+    const key_listener = async (e) =>
+    {
+        switch(e.key)
+        {
+        case 'Esc':
+        case 'Escape':
+            await finish_editing(true);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+
+        case 'Enter':
+            await finish_editing(false);
+            e.stopPropagation();
+            e.preventDefault();
+            break;
+        }
+    }
+
+    const finish_editing = async (cancel) =>
+    {
+        node.removeEventListener("blur", blur_listener);
+        node.removeEventListener("keydown", key_listener);
+        node.contentEditable = "false"
+
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+
+        if(cancel)
+        {
+            node.innerHTML = org_text;
+        }
+        else if(action)
+        {
+            await action(node.textContent)
+        }
+
+        node.dispatchEvent(new Event("finish"))
+        node.removeEventListener("finish", (e) => {});
+    }
+
+    const edit_listener = async (e) =>
+    {
+        //console.log('Edit event fired:', itm, "node", node)
+        node.contentEditable = "true"
+        node.addEventListener("blur", blur_listener);
+        node.addEventListener("keydown", key_listener);
+        
+        node.focus();
+        
+        await tick();
+        let range = document.createRange();
+        range.selectNodeContents(node);
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+        
+    }
+
+    node.addEventListener("edit", edit_listener);
+    node.classList.add("editable")
+    node.classList.add("focus:outline-none")
+    return {
+        destroy() {
+            node.removeEventListener("edit", edit_listener)
+            node.classList.remove("editable")
+            node.contentEditable = "false"
+        }};
+}
+
+export function start_editing(element, finish_callback)
+{
+    let editable_node = null;
+    
+    if(element.classList.contains("editable"))
+        editable_node = element;
+    else
+    {
+        let editables = element.getElementsByClassName("editable");
+        if(editables && editables.length > 0)
+            editable_node = editables[0];
+    }
+
+    if(editable_node)
+    {
+        if(editable_node.contentEditable == "true")
+            return;
+
+        if(finish_callback)
+        {
+            editable_node.addEventListener("finish", (e) => {finish_callback()})
+        }
+
+        const edit_event = new Event("edit")
+        editable_node.dispatchEvent(edit_event)
+    }
+}
+
+export function selectable(node, itm)
+{
+    const select_listener = (e) =>
+    {
+        select_item(itm);
+    }
+
+    node.setAttribute("selectable", "true")
+    node.addEventListener("select", select_listener);
+
+    return {
+    destroy() {
+        node.removeEventListener("select", select_listener)
+        try{
+            node.removeAttribute("selectable")
+        }
+        catch(err)
+        {
+            console.error(err);
+            console.log(node);
+        }
+    }};
+}
+
+export function handle_select(e)
+{
+    let node = e.target;
+    if(!node)
+    {
+        select_item(null);
+        return;
+    }
+
+    let selection_node = null;
+    
+    while(!!node)
+    {
+        if(node.hasAttribute("selectable"))
+        {
+            selection_node = node;
+            break;
+        }
+
+        node = node.parentElement;
+    }
+
+    if(selection_node)
+        selection_node.dispatchEvent(new Event("select"))
+    else
+        select_item(null);
+}
+
+
+
 export function parse_width_directive(c)
 {   
     let cs = '';