@dosgato/dialog 1.0.7 → 1.1.0

package/dist/tree/Tree.svelte

@@ -1,6 +1,8 @@
-<script>import { resize } from '@txstate-mws/svelte-components';
+<script>import { Icon } from '..';
+import { resize, PopupMenu } from '@txstate-mws/svelte-components';
 import { derivedStore, Store } from '@txstate-mws/svelte-store';
-import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext } from 'svelte';
+import { afterUpdate, beforeUpdate, onDestroy, onMount, setContext, tick } from 'svelte';
+import dotsIcon from '@iconify-icons/ph/dots-three-outline-vertical-fill';
 import { isNotBlank } from 'txstate-utils';
 import LoadIcon from './LoadIcon.svelte';
 import TreeNode from './TreeNode.svelte';
@@ -12,6 +14,7 @@ export let filter = '';
 export let nodeClass = undefined;
 export let singleSelect = undefined;
 export let enableResize = false;
+export let minColumnSize = 100;
 /**
  * this `itemType` prop is here for typescript only
  *
@@ -35,21 +38,52 @@ const { filteredRootItems, headerOverride } = store;
 let checkboxelement;
 const headerelements = [];
 const treeWidth = new Store({});
+let numShownColumns = headers.length;
+let numNeverHidden = headers.filter(h => h.neverHide).length;
+// Need to keep track of which headers are shown or hidden and which is selected
+let shownHeaders = headers;
+let hiddenHeaders = [];
+let selectedHeader = undefined;
+function updateShownHeaders() {
+    numShownColumns = Math.min(headers.length, Math.floor(($treeWidth.clientWidth ?? 1024) / minColumnSize));
+    if (numShownColumns < headers.length) {
+        shownHeaders = [];
+        hiddenHeaders = [];
+        let available = (selectedHeader ? numShownColumns - 1 : numShownColumns) - numNeverHidden;
+        if (selectedHeader?.neverHide)
+            available++;
+        for (let i = 0; i < headers.length; i++) {
+            if (available > 0 || headers[i].neverHide || headers[i].id === selectedHeader?.id) {
+                shownHeaders.push(headers[i]);
+                if (headers[i].id !== selectedHeader?.id && !headers[i].neverHide)
+                    available--;
+            }
+            else {
+                hiddenHeaders.push(headers[i]);
+            }
+        }
+    }
+    else {
+        shownHeaders = headers;
+        hiddenHeaders = [];
+    }
+}
 function calcHeaderSizes() {
+    updateShownHeaders();
     const headerSizes = [];
     let totalFixed = checkboxelement?.offsetWidth ?? 0;
-    for (let i = 0; i < headers.length; i++) {
-        const header = headers[i];
+    for (let i = 0; i < shownHeaders.length; i++) {
+        const header = shownHeaders[i];
         if (header.fixed || $headerOverride[header.id]) {
-            headerSizes[i] = $headerOverride[header.id] ?? header.fixed;
+            headerSizes[i] = $headerOverride[header.id] ?? (header.fixed ? (hiddenHeaders.length && i === shownHeaders.length - 1 ? `calc(${header.fixed} + 1em)` : header.fixed) : undefined);
             totalFixed += headerelements[i]?.offsetWidth ?? 0;
         }
     }
     const remainingWidth = ($treeWidth.clientWidth ?? 1024) - totalFixed;
-    const growHeaders = headers.filter((h, i) => !h.fixed && !$headerOverride[h.id] && headerelements[i]?.offsetWidth);
+    const growHeaders = shownHeaders.filter((h, i) => !h.fixed && !$headerOverride[h.id]);
     const totalGrowShares = growHeaders.reduce((sum, h) => sum + (h.grow ?? 1), 0);
-    for (let i = 0; i < headers.length; i++) {
-        const header = headers[i];
+    for (let i = 0; i < shownHeaders.length; i++) {
+        const header = shownHeaders[i];
         if (!header.fixed && !$headerOverride[header.id] && headerelements[i]?.offsetWidth) {
             headerSizes[i] = `${remainingWidth * (header.grow ?? 1) / totalGrowShares}px`;
         }
@@ -151,24 +185,42 @@ afterUpdate(() => {
 });
 $: myRootItemIds = $store && $filteredRootItems;
 $: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? [];
+async function selectHeader(selected) {
+    selectedHeader = headers.find(h => h.id === selected.value);
+    updateShownHeaders();
+    headerSizes.set([]);
+    store.resetHeaderOverride();
+    await tick();
+    headerSizes.set(calcHeaderSizes());
+}
 </script>
 
 <svelte:window on:mouseup={headerDragEnd} />
-
 <div class="tree-header" class:resizing={!!dragtargetid} use:resize={{ store: treeWidth }} aria-hidden="true" on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragtargetid ? headerDrag : undefined} on:touchmove={dragtargetid ? headerDrag : undefined}>
   <div class="checkbox" bind:this={checkboxelement}>&nbsp;</div>
-  {#each headers as header, i (header.label)}
-    <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" style:width={$headerOverride[header.id] ?? $headerSizes?.[i]} style:padding-left={i === 0 ? '1.4em' : undefined}>{header.label}{#if i === 0 && $store.loading}<LoadIcon />{/if}{#if i === 0 && isNotBlank(search)}&nbsp;(searching: {search}){/if}</div>
-    {#if enableResize && i !== headers.length - 1}<div class="tree-separator {header.id}" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
+  {#each shownHeaders as header, i (header.label)}
+    {@const hasDropdown = hiddenHeaders.length && i === shownHeaders.length - 1}
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" class:column-dropdown={hasDropdown} style:width={$headerOverride[header.id] ?? $headerSizes?.[i]} style:padding-left={i === 0 ? '1.4em' : undefined} tabindex={hasDropdown ? 0 : undefined}>{header.label}{#if i === 0 && $store.loading}
+      <LoadIcon />{/if}{#if i === 0 && isNotBlank(search)}&nbsp;(searching: {search}){/if}
+      {#if hasDropdown}
+        <Icon icon={dotsIcon} inline hiddenLabel="Show more columns"/>
+      {/if}
+    </div>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    {#if enableResize && i !== shownHeaders.length - 1}<div class="tree-separator {header.id}" on:mousedown={headerDragStart(header, i)} on:touchstart={headerDragStart(header, i)} on:dblclick={headerDragReset}>&nbsp;</div>{/if}
   {/each}
 </div>
+{#if hiddenHeaders.length > 0}
+  <PopupMenu items={hiddenHeaders.map(h => ({ value: h.id, label: h.label }))} buttonelement={headerelements[shownHeaders.length-1]} on:change={e => {selectHeader(e.detail)}}/>
+{/if}
 {#if mounted && myRootItems?.length}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul bind:this={store.treeElement} role="tree" class:resizing={!!dragtargetid} on:mousemove={dragtargetid ? headerDrag : undefined} on:touchmove={dragtargetid ? headerDrag : undefined} on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:keyup={onKeyUp}>
     {#each myRootItems as item, i (item.id)}
       <TreeNode
         {item}
-        {headers}
+        headers={shownHeaders}
         {headerSizes}
         {nodeClass}
         posinset={i + 1}
@@ -217,6 +269,11 @@ $: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? [];
     height: 100%;
     background-color: var(--tree-head-text, white);
   }
+  :global(.column-dropdown) {
+    display: flex;
+    gap: 0.5em;
+    justify-content: space-between;
+  }
   :global([data-eq~="650px"]) .tree-header {
     font-size: 0.8em;
   }

package/dist/tree/Tree.svelte.d.ts

@@ -10,6 +10,7 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
         nodeClass?: ((itm: T) => string) | undefined;
         singleSelect?: boolean | undefined;
         enableResize?: boolean | undefined;
+        minColumnSize?: number | undefined;
         /**
            * this `itemType` prop is here for typescript only
            *

package/dist/tree/TreeNode.svelte

@@ -41,7 +41,7 @@ function onKeyDown(e) {
             store.copy();
         }
         else if (e.key === 'v') {
-            store.paste();
+            void store.paste();
         }
     }
     else if (e.key === 'Escape') {
@@ -77,7 +77,7 @@ function onKeyDown(e) {
             store.focus(child);
         }
         else {
-            store.open(item);
+            void store.open(item);
         }
     }
     else if (e.key === 'ArrowLeft') {
@@ -158,7 +158,7 @@ function onClick(e) {
         if (item.open && wasFocused && !item.loading)
             store.close(item);
         else if (!item.open)
-            store.open(item);
+            void store.open(item);
     }
 }
 function onCheckClick(e) {
@@ -207,15 +207,15 @@ function onDragOverAbove(e) {
 }
 let dragOver = 0;
 let dragOverAbove = 0;
-function onDrop(e) {
+async function onDrop(e) {
     e.preventDefault();
     dragOver = 0;
-    return store.drop(item, false, e.dataTransfer.dropEffect === 'copy');
+    return await store.drop(item, false, e.dataTransfer.dropEffect === 'copy');
 }
-function onDropAbove(e) {
+async function onDropAbove(e) {
     e.preventDefault();
     dragOverAbove = 0;
-    return store.drop(item, true, e.dataTransfer.dropEffect === 'copy');
+    return await store.drop(item, true, e.dataTransfer.dropEffect === 'copy');
 }
 function onDragEnter(e) {
     if (!dropZone)
@@ -244,7 +244,7 @@ function onDragLeaveAbove(e) {
         dragOverAbove--;
 }
 let display = $focused && $focused.id === item.id;
-onMount(async () => {
+onMount(() => {
     if ($focused && $focused.id === item.id)
         nodeelement.scrollIntoView({ block: 'center' });
     nodeelement.addEventListener('lazy', () => { display = true; });
@@ -258,6 +258,7 @@ $: if ($dragging) {
 </script>
 <li role="presentation">
   {#if dropAbove}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="drop-above"
       class:dragOverAbove
       on:dragenter={onDragEnterAbove}
@@ -298,6 +299,7 @@ $: if ($dragging) {
   {#if display}
     <!-- keyboard users have modifier keys, they don't ever focus the checkbox -->
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="checkbox" on:click={onCheckClick}>
       <Icon icon={isSelected ? checkboxOutline : checkboxBlankOutline } width="1.15em" inline />
     </div>
@@ -310,6 +312,7 @@ $: if ($dragging) {
       >
         {#if i === 0 && item.hasChildren}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
           <span class="arrow" on:click={onClick}><Icon icon={item.open ? menuDown : menuRight} width="1.5em" inline /></span>
         {/if}
         <TreeCell {header} {item} />

package/dist/tree/treestore.d.ts

@@ -51,6 +51,7 @@ export interface TreeHeader<T extends TreeItemFromDB> {
     render?: (item: TypedTreeItem<T>) => string;
     component?: SvelteComponent;
     class?: (item: TypedTreeItem<T>) => string | string[];
+    neverHide?: boolean;
 }
 export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITreeStore<T>> {
     #private;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.7",
-    "@codemirror/lang-css": "^6.2.0",
+    "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.3",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
@@ -35,8 +35,8 @@
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.0.1",
     "@sveltejs/package": "^2.0.1",
-    "eslint-config-standard-with-typescript": "^34.0.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-plugin-svelte": "^2.0.0",
     "svelte-check": "^3.0.1",
     "svelte-preprocess": "^5.0.0",
     "svelte2tsx": "^0.6.0",