@humandialog/forms.svelte 1.4.8 → 1.4.9

package/components/breadcrumb.svelte

@@ -0,0 +1,59 @@
+<script>
+    import {location, link, querystring} from 'svelte-spa-router'
+	import { breadcrumbParse, breadcrumbStringify } from './breadcrumb_utils';
+	
+    export let path;
+
+    let segments = []
+    let userClass = $$props.class ?? ''
+
+    $: init($location, $querystring)
+
+    function init(...args)
+    {
+        segments = breadcrumbParse(path);
+    }
+
+    function getSegmentHRef(href, idx)
+    {
+        let prevSegments = []
+        if(idx > 0)
+            prevSegments = segments.slice(0, idx)
+        
+        const prevPath = breadcrumbStringify(prevSegments)
+        return `${href}?path=${prevPath}` 
+
+    }
+
+</script>
+
+<nav class="flex {userClass}" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
+    
+        {#if (segments && segments.length > 1)}
+            {#each segments as segment, idx (segment.href)}
+                {@const isFirst = idx == 0}
+                {@const isLast = idx == segments.length-1}
+                <li>
+                    <div class="flex items-center">
+                        {#if !isFirst}
+                            <svg class="rtl:rotate-180 w-3 h-3 text-stone-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                            </svg>
+                        {/if}
+                        {#if isLast}
+                            <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                                {segment.name}
+                            </span>
+                        {:else}
+                            <a href={getSegmentHRef(segment.href, idx)} use:link class="ms-1 text-sm font-medium md:ms-2 text-stone-700 hover:text-stone-900  dark:text-stone-400 dark:hover:text-white whitespace-nowrap">
+                                {segment.name}
+                            </a>
+                        {/if}
+                    </div>
+                </li>
+            {/each}
+        {/if}
+    
+  </ol>
+</nav>

package/components/breadcrumb.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  BreadcrumbProps */
+/** @typedef {typeof __propDef.events}  BreadcrumbEvents */
+/** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
+export default class Breadcrumb extends SvelteComponentTyped<{
+    [x: string]: any;
+    path: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        path: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/breadcrumb_utils.d.ts

@@ -0,0 +1,4 @@
+export function breadcrumbAdd(path: any, name: any, href: any): any;
+export function breadcrumbParse(path: any): any[];
+export function breadcrumbStringify(segments: any): string;
+export function breadcrumbClipName(name: any): any;

package/components/breadcrumb_utils.js

@@ -0,0 +1,45 @@
+
+export function breadcrumbAdd(path, name, href)
+{
+    if(path.length > 0)
+        path += ';'
+    path += `${encodeURIComponent(href)}!${encodeURIComponent(breadcrumbClipName(name))}`
+    return path
+}
+
+export function breadcrumbParse(path)
+{
+    let segments = []
+    const segs = path.split(';')
+    segs.forEach(s => {
+        const nidx = s.indexOf('!')
+        segments.push({
+            href: decodeURIComponent( s.substring(0, nidx) ),
+            name: decodeURIComponent( s.substring(nidx+1))
+        })
+    })
+
+    return segments;
+}
+
+export function breadcrumbStringify(segments)
+{
+    let result = ''
+    segments.forEach(s => {
+
+        if(result.length > 0)
+            result += ";";
+        result += `${encodeURIComponent(s.href)}!${encodeURIComponent(breadcrumbClipName(s.name))}`
+    })
+
+    return result;
+}
+
+export function breadcrumbClipName(name)
+    {
+        const maxNameLen = 24;
+        if(name.length > maxNameLen)
+            return name.substr(0, maxNameLen-3) + "..."
+        else
+            return name;
+    }

package/components/paginator.svelte

@@ -0,0 +1,105 @@
+<script>
+    
+    export let pageNo
+    export let allPagesNo
+    export let onPage
+    export let visiblePagesNo = 4
+
+    let visiblePages = []
+    $: update()
+
+    export function updatePageNo(p)
+    {
+        pageNo = p
+        update()
+    }
+
+    export function updateAllPagesNo(allP)
+    {
+        allPagesNo = allP
+        update()
+    }
+
+    function update(...args)
+    {
+        const absStart = 0
+        const absEnd = allPagesNo-1
+
+        if(pageNo < absStart)
+            pageNo = absStart
+
+        if(pageNo > absEnd)
+            pageNo = absEnd
+
+        let visStart = pageNo - Math.floor(visiblePagesNo/2)
+        if(visStart < absStart)
+            visStart = absStart
+
+        let visEnd = visStart + visiblePagesNo - 1
+        if(visEnd > absEnd)
+        {
+            visEnd = absEnd
+            visStart = Math.max(absStart, visEnd - visiblePagesNo + 1)
+        }
+
+        visiblePages = []
+        for(let p=visStart; p<= visEnd; p++)
+            visiblePages.push(p)
+    }
+    
+    function onPrevPage(e)
+    {
+        if(pageNo > 0)
+            onPage(pageNo-1)
+    }
+
+    function onNextPage(e)
+    {
+        if(pageNo <= allPagesNo-2)
+           onPage(pageNo+1) 
+    }
+    
+</script>
+
+<nav aria-label="Page navigation example" class="">
+    {#if visiblePages.length > 1}
+        <ul class="flex items-center -space-x-px h-8 text-sm">
+            <li>
+                <button on:click={onPrevPage} 
+                    class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-stone-500 bg-white border border-e-0 border-stone-300 rounded-s-lg hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
+                    <span class="sr-only">Previous</span>
+                        <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
+                        </svg>
+                </button>
+            </li>
+            
+
+            {#each visiblePages as p (p)}
+                <li>
+                    {#if p == pageNo}
+                        <button disabled class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-stone-700 dark:bg-stone-700 dark:text-white">
+                            {p+1}
+                        </button>
+                    {:else}
+                        <button on:click={(e) => onPage(p)} class="flex items-center justify-center px-3 h-8 leading-tight text-stone-500 bg-white border border-stone-300 hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
+                            {p+1}
+                        </button>
+                    {/if}
+                </li>
+                
+            {/each}
+
+            
+            <!--a href="#" aria-current="page" class="">3</a-->
+            <li>
+                <button on:click={onNextPage} class="flex items-center justify-center px-3 h-8 leading-tight text-stone-500 bg-white border border-stone-300 rounded-e-lg hover:bg-stone-100 hover:text-stone-700 dark:bg-stone-800 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-700 dark:hover:text-white">
+                    <span class="sr-only">Next</span>
+                        <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+                        </svg>
+                </button>
+            </li>
+        </ul>
+    {/if}
+</nav>

package/components/paginator.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  PaginatorProps */
+/** @typedef {typeof __propDef.events}  PaginatorEvents */
+/** @typedef {typeof __propDef.slots}  PaginatorSlots */
+export default class Paginator extends SvelteComponentTyped<{
+    pageNo: any;
+    allPagesNo: any;
+    onPage: any;
+    visiblePagesNo?: number | undefined;
+    updatePageNo?: ((p: any) => void) | undefined;
+    updateAllPagesNo?: ((allP: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get updatePageNo(): (p: any) => void;
+    get updateAllPagesNo(): (allP: any) => void;
+}
+export type PaginatorProps = typeof __propDef.props;
+export type PaginatorEvents = typeof __propDef.events;
+export type PaginatorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        pageNo: any;
+        allPagesNo: any;
+        onPage: any;
+        visiblePagesNo?: number | undefined;
+        updatePageNo?: ((p: any) => void) | undefined;
+        updateAllPagesNo?: ((allP: any) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/sidebar/sidebar.item.svelte

@@ -64,6 +64,10 @@ export async function editSummary() {
     });
   }
 }
+export function updateSummary(txt) {
+  console.log("updateSummary", txt);
+  summaryText = txt;
+}
 let user_class = $$props.class ?? "";
 let root;
 function calculateIsRowActive(...args) {
@@ -289,7 +293,7 @@ function activateRow(e) {
                 {/if}
             </div>
 
-            {#if summaryText}
+            {#if summaryText || summaryPlaceholder}
                 <p class="ml-14 mt-1
                         text-stone-900 dark:text-stone-400
                         cursor-default

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

@@ -11,6 +11,7 @@ declare const __propDef: {
         item?: object | undefined;
         summary?: string | object | undefined;
         editSummary?: (() => Promise<void>) | undefined;
+        updateSummary?: ((txt: any) => void) | undefined;
     };
     events: {
         click: MouseEvent;
@@ -28,5 +29,6 @@ export type SidebarEvents = typeof __propDef.events;
 export type SidebarSlots = typeof __propDef.slots;
 export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
     get editSummary(): () => Promise<void>;
+    get updateSummary(): (txt: any) => void;
 }
 export {};

package/index.d.ts

@@ -57,6 +57,9 @@ 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 { default as Paginator } from './components/paginator.svelte';
+export { default as Breadcrumb } from './components/breadcrumb.svelte';
+export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';

package/index.js

@@ -63,6 +63,9 @@ 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 { default as Paginator } from './components/paginator.svelte';
+export { default as Breadcrumb } from './components/breadcrumb.svelte';
+export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';

package/operations.svelte

@@ -200,7 +200,7 @@ function isOperationDisabled(operation) {
                         </button>
                     {/each}
                 {:else}
-                    {@const enabledLightColors ='text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200'}
+                    {@const enabledLightColors ='text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-100 border-stone-200'}
                     {@const disabledLightColors ='text-stone-400 border-stone-200'}
 
                     {@const enabledDarkColors ='dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600'}
@@ -216,7 +216,7 @@ function isOperationDisabled(operation) {
                             focus:outline-none
                             inline-flex items-center
                             {colors}"
-                            class:bg-stone-700={isActive}
+                            class:bg-stone-200={isActive}
                             class:dark:bg-stone-800={isActive}
                             disabled={isDisabled}
                             on:mousedown={(e) => mousedown(e, operation)}
@@ -258,7 +258,7 @@ function isOperationDisabled(operation) {
                         {colors}
                         focus:outline-none
                         inline-flex items-center"
-                        class:bg-stone-700={isActive}
+                        class:bg-stone-200={isActive}
                         class:dark:bg-stone-800={isActive}
                         disabled={isDisabled}
                         on:mousedown={(e) => mousedown(e, operation)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "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.8.12",
+    "@humandialog/auth.svelte": "^1.8.14",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",
@@ -45,6 +45,7 @@
     "pdfjs-dist": "^4.10.38",
     "qs": "^6.14.0",
     "svelte-icons": "^2.1.0",
+    "svelte-share-buttons-component": "^3.0.0",
     "svelte-spa-router": "^4.0.1"
   },
   "keywords": [
@@ -67,6 +68,8 @@
   "homepage": "https://github.com/HumanDialog/forms.svelte#readme",
   "exports": {
     "./package.json": "./package.json",
+    "./components/breadcrumb.svelte": "./components/breadcrumb.svelte",
+    "./components/breadcrumb_utils": "./components/breadcrumb_utils.js",
     "./components/button.svelte": "./components/button.svelte",
     "./components/checkbox.svelte": "./components/checkbox.svelte",
     "./components/combo/combo.item.svelte": "./components/combo/combo.item.svelte",
@@ -130,6 +133,7 @@
     "./components/list/list.title.svelte": "./components/list/list.title.svelte",
     "./components/list/List": "./components/list/List.js",
     "./components/menu": "./components/menu.js",
+    "./components/paginator.svelte": "./components/paginator.svelte",
     "./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",