@humandialog/forms.svelte 1.4.11 → 1.5.1

package/components/breadcrumb.svelte

@@ -3,6 +3,7 @@
 	import { breadcrumbParse, breadcrumbStringify } from './breadcrumb_utils';
 	
     export let path;
+    export let collapseLonger = false
 
     let segments = []
     let userClass = $$props.class ?? ''
@@ -34,24 +35,39 @@
             {#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>
+                {@const collapsable = collapseLonger && segments.length > 5}
+                {@const isCollapsed = collapsable && idx > 0 && idx < segments.length-3}
+                {@const isFirstCollapsed = isCollapsed && idx == 1}
+                
+                {#if isCollapsed}
+                    {#if isFirstCollapsed}
+                        <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>
+                        <span class="ms-1 text-sm md:ms-2 font-semibold text-stone-900 dark:text-stone-100 whitespace-nowrap">
+                            ...
+                        </span>
+                    {/if}
+                {:else}
+                    <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>
+                {/if}
             {/each}
         {/if}
     

package/components/breadcrumb.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Breadcrumb extends SvelteComponentTyped<{
     [x: string]: any;
     path: any;
+    collapseLonger?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,6 +17,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         path: any;
+        collapseLonger?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -262,7 +262,7 @@ async function dblclick(e) {
             </button-->
         </h2>
     </header>
-    <ul class="w-full border-stone-700 pb-20" bind:this={column_element}>
+    <ul class="w-full border-stone-400 dark:border-stone-700 pb-20" bind:this={column_element}>
         {#if showInserterAfterId === KanbanColumnTop}
             <Inserter   onInsert={async (title, summary) => {await onInsert(currentColumnIdx, title, summary, KanbanColumnTop)}}
                         bind:this={inserter} />

package/index.d.ts

@@ -71,3 +71,4 @@ export { default as IcH1 } from './components/document/internal/h1.icon.svelte';
 export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';
 export { default as IcH4 } from './components/document/internal/h4.icon.svelte';
+export { registerKicksObserver, unregisterKicksObserver, forceKicksChecking } from './kicks.js';

package/index.js

@@ -77,3 +77,4 @@ export { default as IcH1 } from './components/document/internal/h1.icon.svelte';
 export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';
 export { default as IcH4 } from './components/document/internal/h4.icon.svelte';
+export { registerKicksObserver, unregisterKicksObserver, forceKicksChecking } from './kicks.js';

package/kicks.d.ts

@@ -0,0 +1,3 @@
+export function registerKicksObserver(labels: any, interval: any, callback: any): number;
+export function unregisterKicksObserver(regId: any): void;
+export function forceKicksChecking(): void;

package/kicks.js

@@ -0,0 +1,155 @@
+import {reef, session} from '@humandialog/auth.svelte'
+import {get} from 'svelte/store'
+
+let nextObserverId = 1000
+let registeredObservers = []
+let minInterval = 0
+let lastCheckAt = 0
+let timerId = 0;
+
+let lastKicks = new Map();
+
+export function registerKicksObserver(labels, interval, callback)
+{
+    let lbs = []
+    if(labels && Array.isArray(labels))
+        lbs = labels
+    else
+        lbs = [labels]
+
+    registeredObservers.push( {
+        labels: lbs,
+        interval: interval,
+        callback: callback,
+        id: nextObserverId
+    })
+
+    const res = nextObserverId;
+    nextObserverId++;
+
+    updateTimer()
+    return res
+}
+
+export function unregisterKicksObserver(regId)
+{
+    const fIdx = registeredObservers.findIndex( (o) => o.id == regId)
+    if(fIdx >=0)
+        registeredObservers.splice(fIdx, 1)
+
+    updateTimer()
+}
+
+export function forceKicksChecking()
+{
+    checkKicks();
+    
+
+    if(timerId > 0)
+    {
+        clearTimeout(timerId)
+        timerId = 0
+    }
+
+    if(minInterval > 0)
+        timerId = setTimeout(timerHandler, minInterval*1000)
+}
+
+function getMinInterval()
+{
+    if(registeredObservers.length == 0)
+        return 0;
+
+    let minInterval = Number.MAX_SAFE_INTEGER;
+    registeredObservers.forEach((o) => {
+        if(o.interval < minInterval)
+            minInterval = o.interval
+    })
+
+    return minInterval;
+}
+
+function timerHandler()
+{
+    checkKicks();
+    timerId = setTimeout(timerHandler, minInterval*1000)
+}
+
+function updateTimer()
+{
+    const newInterval = getMinInterval()
+    
+    let isFirstTimeLaunch = (timerId == 0) && (newInterval > 0)
+
+    if(timerId > 0)
+    {
+        clearTimeout(timerId)
+        timerId = 0
+    }
+
+    if(newInterval > 0)
+        timerId = setTimeout(timerHandler, newInterval*1000)
+
+    minInterval = newInterval
+
+    if(isFirstTimeLaunch)
+        checkKicks(false)
+}
+
+function checkKicks(informObservers=true)
+{
+    const s = get(session)
+    const appId = s.appId ? s.appId : 'octopus'
+    const tid = s.tid ? s.tid : 'octopus/15'
+    console.log(s.isActive, appId, tid)
+    if(s.isActive && appId && tid)
+    {
+        reef.fetch(`/dev/kicks?app_id=${appId}&tenant_id=${encodeURIComponent(tid)}&last_check=${lastCheckAt}`).then(res => {
+            if(res.ok)
+            {
+                res.json().then( result =>
+                {
+                    // todo 
+                    //console.log('kicks:', result)  
+
+
+                    let changedLabels = []
+                    result.allKicks.forEach(current => {
+                        
+                        if(lastKicks.has(current.label))
+                        {
+                            let storedKick = lastKicks.get(current.label)
+                            if(storedKick.kick != current.kick)
+                            {
+                                lastKicks.set(current.label, {...current})
+                                changedLabels.push(current.label)
+                            }
+                        }
+                        else
+                        {
+                            lastKicks.set(current.label, {...current})
+                            changedLabels.push(current.label)
+                        }
+                    })
+
+                    if(informObservers && changedLabels.length > 0)
+                    {
+                        registeredObservers.forEach(ob => {
+                            const changedLabelsPerObserver = ob.labels.filter(label => changedLabels.includes(label))
+                            if(changedLabelsPerObserver.length > 0)
+                            {
+                                if(ob.callback)
+                                    ob.callback(changedLabelsPerObserver)
+                            }
+                        })
+                    }
+                }
+                ).catch(err => console.error(err))
+            }
+        }).catch(err => {
+            console.error(err)
+        })
+    }
+    
+    lastCheckAt = Date.now() / 1000;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.4.11",
+  "version": "1.5.1",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -46,7 +46,8 @@
     "qs": "^6.14.0",
     "svelte-icons": "^2.1.0",
     "svelte-share-buttons-component": "^3.0.0",
-    "svelte-spa-router": "^4.0.1"
+    "svelte-spa-router": "^4.0.1",
+    "swagger-ui-dist": "^5.27.0"
   },
   "keywords": [
     "svelte",
@@ -158,6 +159,7 @@
     ".": "./index.js",
     "./internal/configurable.content.svelte": "./internal/configurable.content.svelte",
     "./internal/loading.svelte": "./internal/loading.svelte",
+    "./kicks": "./kicks.js",
     "./modal.svelte": "./modal.svelte",
     "./operations.svelte": "./operations.svelte",
     "./page.row.svelte": "./page.row.svelte",