@dosgato/dialog 1.0.8 → 1.1.1

package/dist/tree/Tree.svelte

@@ -1,6 +1,10 @@
-<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 circleIcon from '@iconify-icons/ph/circle';
+import radioSelectedIcon from '@iconify-icons/ph/radio-button-fill';
 import { isNotBlank } from 'txstate-utils';
 import LoadIcon from './LoadIcon.svelte';
 import TreeNode from './TreeNode.svelte';
@@ -12,6 +16,13 @@ export let filter = '';
 export let nodeClass = undefined;
 export let singleSelect = undefined;
 export let enableResize = false;
+/**
+ * Takes the width of the tree, in pixels, and returns an array of TreeHeader IDs that should be
+ * displayed at that screen width. Any headers whose ID is not returned will be added to a dropdown, which allows
+ * the user to view them. The last ID returned by this function is the header that is replaced if the user chooses
+ * to view a different header. The headers will always appear in the order in which they are defined in the headers prop.
+ */
+export let responsiveHeaders = undefined;
 /**
  * this `itemType` prop is here for typescript only
  *
@@ -34,22 +45,55 @@ setContext(TREE_STORE_CONTEXT, store);
 const { filteredRootItems, headerOverride } = store;
 let checkboxelement;
 const headerelements = [];
+let showMoreButton;
 const treeWidth = new Store({});
+// Need to keep track of which headers are shown or hidden and which is selected
+let shownHeaders = headers;
+let hiddenHeaders = [];
+let selectedHeader = undefined;
+let selectedHeaderValue;
+function updateShownHeaders() {
+    if (typeof responsiveHeaders === 'function') {
+        shownHeaders = [];
+        hiddenHeaders = [];
+        const shown = responsiveHeaders($treeWidth.clientWidth ?? 1024);
+        if (selectedHeader && !shown.includes(selectedHeader.id)) {
+            shown[shown.length - 1] = selectedHeader.id;
+        }
+        for (const h of headers) {
+            if (shown.includes(h.id)) {
+                shownHeaders.push(h);
+            }
+            else {
+                hiddenHeaders.push(h);
+            }
+        }
+        selectedHeaderValue = shown[shown.length - 1];
+        if (hiddenHeaders.length) {
+            const hideable = headers.find(h => h.id === selectedHeaderValue);
+            if (hideable)
+                hiddenHeaders.push(hideable);
+        }
+    }
+}
 function calcHeaderSizes() {
+    updateShownHeaders();
     const headerSizes = [];
     let totalFixed = checkboxelement?.offsetWidth ?? 0;
-    for (let i = 0; i < headers.length; i++) {
-        const header = headers[i];
+    if (hiddenHeaders.length)
+        totalFixed += (showMoreButton?.offsetWidth ?? 0);
+    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;
             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,17 +195,36 @@ 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();
+    store.resetHeaderOverride();
+    const headersizes = shownHeaders.map(h => h.fixed ? h.fixed : '');
+    headerSizes.set(headersizes);
+    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>
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    {#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}
+<div class="tree-header" class:resizing={!!dragtargetid} use:resize={{ store: treeWidth }} on:mouseup={headerDragEnd} on:touchend={headerDragEnd} on:mousemove={dragtargetid ? headerDrag : undefined} on:touchmove={dragtargetid ? headerDrag : undefined}>
+<div class="checkbox" bind:this={checkboxelement} aria-hidden="true">&nbsp;</div>
+{#each shownHeaders as header, i (header.label)}
+  <div bind:this={headerelements[i]} id={header.id} class="tree-header-cell {header.id}" aria-hidden="true" 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>
+  <!-- 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}
+{#if hiddenHeaders.length}
+  <div class="button-wrapper">
+    <button bind:this={showMoreButton} type='button'><Icon icon={dotsIcon} hiddenLabel="View other columns"/></button>
+    <PopupMenu bind:value={selectedHeaderValue} items={hiddenHeaders.map(h => ({ value: h.id, label: h.label }))} buttonelement={showMoreButton} on:change={e => {selectHeader(e.detail)}} let:item menuContainerClass="hideable-container" menuClass="hideable-headers" menuItemSelectedClass="selected-header">
+      {#if item.hasOwnProperty('value')}
+        <Icon icon={'value' in item && item.value === selectedHeaderValue ? radioSelectedIcon : circleIcon} inline/>
+        {item.label}
+      {/if}
+    </PopupMenu>
+  </div>
+{/if}
 </div>
 {#if mounted && myRootItems?.length}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
@@ -169,7 +232,7 @@ $: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? [];
     {#each myRootItems as item, i (item.id)}
       <TreeNode
         {item}
-        {headers}
+        headers={shownHeaders}
         {headerSizes}
         {nodeClass}
         posinset={i + 1}
@@ -234,5 +297,29 @@ $: myRootItems = $store?.rootItems?.filter(r => myRootItemIds.has(r.id)) ?? [];
   :global([data-eq~="650px"]) ul {
     font-size: 0.8em;
   }
+  .button-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    flex-grow: 2;
+  }
+  .button-wrapper button {
+    background: transparent;
+    color: var(--tree-head-text, white);
+    border: 0;
+  }
+  :global(.hideable-container .hideable-headers) {
+    margin: 0;
+    padding: 0.4em;
+    background: white;
+    border: 1px solid slategray;
+    border-radius: 3px;
+    min-width: 10em;
+    max-height: 20em;
+    overflow-y: auto;
+  }
+  :global(div.hideable-container ul.hideable-headers li[role="option"]) {
+    padding-left: 0;
+    color: black;
+  }
 
 </style>

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

@@ -10,6 +10,12 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
         nodeClass?: ((itm: T) => string) | undefined;
         singleSelect?: boolean | undefined;
         enableResize?: boolean | undefined;
+        /**
+           * Takes the width of the tree, in pixels, and returns an array of TreeHeader IDs that should be
+           * displayed at that screen width. Any headers whose ID is not returned will be added to a dropdown, which allows
+           * the user to view them. The last ID returned by this function is the header that is replaced if the user chooses
+           * to view a different header. The headers will always appear in the order in which they are defined in the headers prop.
+           */ responsiveHeaders?: ((treeWidth: number) => string[]) | undefined;
         /**
            * this `itemType` prop is here for typescript only
            *

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.8",
+  "version": "1.1.1",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",