@dosgato/dialog 1.1.1 → 1.1.3

package/dist/Dialog.svelte

@@ -1,7 +1,7 @@
 <script context="module">export const DIALOG_TABS_CONTEXT = {};
 </script>
-<script>import arrowLeftLight from '@iconify-icons/ph/arrow-left-light';
-import arrowRightLight from '@iconify-icons/ph/arrow-right-light';
+<script>import arrowLeft from '@iconify-icons/ph/arrow-left';
+import arrowRight from '@iconify-icons/ph/arrow-right';
 import xLight from '@iconify-icons/ph/x-light';
 import arrowsOutSimple from '@iconify-icons/ph/arrows-out-simple';
 import arrowsInSimple from '@iconify-icons/ph/arrows-in-simple';
@@ -59,7 +59,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     <footer class="actions">
       <slot name="buttons" {nextTitle} {prevTitle} hasRequired={hasRequired && !ignoreTabs} onPrev={onPrev} onNext={onNext} {describedby}>
         {#if prevTitle && !ignoreTabs}
-          <Button class="prev" disabled={!prevTitle} on:click={onPrev}><Icon icon={arrowLeftLight} inline /> Previous<ScreenReaderOnly> Tab ({prevTitle})</ScreenReaderOnly></Button>
+          <Button class="prev" disabled={!prevTitle} on:click={onPrev}><Icon icon={arrowLeft} inline /> <span class="prev-next" aria-hidden="true">Previous</span><ScreenReaderOnly>Previous Tab ({prevTitle})</ScreenReaderOnly></Button>
         {/if}
         {#if isNotBlank(cancelText)}
           <Button cancel {describedby} on:click={() => dispatch('escape')}>{cancelText}</Button>
@@ -68,7 +68,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
           <Button class="primary" disabled={disabled || (hasRequired && !ignoreTabs)} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline /> {continueText}</Button>
         {/if}
         {#if nextTitle && !ignoreTabs}
-          <Button class="next" disabled={!nextTitle} on:click={onNext}>Next<ScreenReaderOnly> Tab ({nextTitle})</ScreenReaderOnly> <Icon width="1.2em" icon={arrowRightLight} inline /></Button>
+          <Button class="next" disabled={!nextTitle} on:click={onNext}><span class="prev-next" aria-hidden="true">Next</span><ScreenReaderOnly> Next Tab ({nextTitle})</ScreenReaderOnly> <Icon icon={arrowRight} inline /></Button>
         {/if}
       </slot>
     </footer>
@@ -167,9 +167,21 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     border-bottom: 0px !important;
   }
 
+  footer.actions {
+    container-type: inline-size;
+    container-name: dosgato-dialog-actions
+  }
+
   footer.actions :global(.prev) {
     margin-right: auto;
   }
+
+  @container dosgato-dialog-actions (max-width: 450px) {
+    footer.actions :global(button span.prev-next) {
+      display: none;
+    }
+  }
+
   .header-buttons {
     position: absolute;
     top: 0.1em;

package/dist/FieldChooserLink.svelte

@@ -243,15 +243,26 @@ $: void updateSelected($value);
     align-items: flex-start;
     margin-top: 0.2em;
   }
+  :global([data-eq~="400px"]) .dialog-chooser-entry {
+    flex-direction: column;
+    align-items: center;
+  }
   .dialog-chooser-entry > button {
     border-radius: 0.25em;
-    border: 1px solid #808080;
-    color: black;
+    border: 0;
+    background-color: var(--dg-button-bg, #501214);
+    color: var(--dg-button-text, #fff);
+    padding: 0.5em 1em;
+    font-size: 0.8em;
   }
   .dialog-chooser-entry-input {
     position: relative;
     flex-grow: 1;
   }
+  :global([data-eq~="400px"]) .dialog-chooser-entry-input {
+    margin-bottom: 0.2em;
+    width: 100%;
+  }
   .dialog-chooser-entry-input input {
     width: 100%;
     padding-right: 1.4em;

package/dist/Tabs.svelte

@@ -11,6 +11,11 @@ export let active = undefined;
 export let store = new TabStore(tabs, active);
 export let disableDialogControl = false;
 export let accordionOnMobile = true;
+/**
+ * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
+ * displayed at that width.
+ */
+export let columnsShown = undefined;
 $: store.update(v => ({ ...v, tabs, accordionOnMobile }));
 const activeStore = new Store({});
 const tabelements = [];
@@ -30,7 +35,7 @@ if (!disableDialogControl)
 const currentName = store.currentName();
 const currentIdx = store.currentIdx();
 const accordion = store.accordion();
-$: cols = Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
+$: cols = (typeof columnsShown === 'function') ? columnsShown($store.clientWidth ?? 1024) : Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
 $: scalefactor = Math.min(roundTo(($store.clientWidth ?? 1024) / (cols * 130), 4), 1);
 $: wrapping = cols !== $store.tabs.length;
 $: dialogContext.hasTabs = !$accordion;

package/dist/Tabs.svelte.d.ts

@@ -7,6 +7,10 @@ declare const __propDef: {
         store?: TabStore | undefined;
         disableDialogControl?: boolean | undefined;
         accordionOnMobile?: boolean | undefined;
+        /**
+           * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
+           * displayed at that width.
+           */ columnsShown?: ((tabsWidth: number) => number) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/Chooser.svelte

@@ -151,7 +151,7 @@ let thumbnailExpanded = false;
     .dialog-chooser-chooser {
       order: 3;
       width: 100%;
-      height: 50%;
+      height: 70%;
     }
   }
 

package/dist/chooser/ChooserPreview.svelte

@@ -97,17 +97,17 @@ $: reactToPreview($preview);
       flex-direction: row;
       height: 25vh;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail) {
       max-width: 50%;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail.expanded) {
       max-width: unset;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail img) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail img) {
       object-fit: cover;
       object-position: center;
     }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded img) {
+    .dialog-chooser-preview .preview-container :global(.dialog-chooser-thumbnail.expanded img) {
       object-fit: scale-down;
       width: unset;
     }

package/dist/iconpicker/FieldIconPicker.svelte

@@ -156,8 +156,11 @@ function onKeyDown(e) {
 <style>
   .select-icon {
     border-radius: 0.25em;
-    border: 1px solid #808080;
-    color: black;
+    border: 0px;
+    background-color: var(--dg-button-bg, #501214);
+    color: var(--dg-button-text, #fff);
+    padding: 0.5em 1em;
+    font-size: 0.8em;
   }
   section {
     position: relative;

package/dist/tree/Tree.svelte

@@ -207,24 +207,24 @@ async function selectHeader(selected) {
 </script>
 
 <svelte:window on:mouseup={headerDragEnd} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <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 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>
+    {#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={async e => { await selectHeader(e.detail) }} let:item menuContainerClass="hideable-container" menuClass="hideable-headers" menuItemSelectedClass="selected-header">
+        {#if 'value' in item}
+          <Icon icon={'value' in item && item.value === selectedHeaderValue ? radioSelectedIcon : circleIcon} inline width="1.1em"/>
+          {item.label}
+        {/if}
+      </PopupMenu>
+    </div>
+  {/if}
 </div>
 {#if mounted && myRootItems?.length}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
@@ -312,7 +312,7 @@ async function selectHeader(selected) {
     padding: 0.4em;
     background: white;
     border: 1px solid slategray;
-    border-radius: 3px;
+    border-radius: 5px;
     min-width: 10em;
     max-height: 20em;
     overflow-y: auto;
@@ -320,6 +320,8 @@ async function selectHeader(selected) {
   :global(div.hideable-container ul.hideable-headers li[role="option"]) {
     padding-left: 0;
     color: black;
+    padding: 0.5em;
+    font-size: 1.1em;
   }
 
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -27,7 +27,7 @@
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
     "@txstate-mws/svelte-components": "^1.5.5",
-    "@txstate-mws/svelte-forms": "^1.3.16",
+    "@txstate-mws/svelte-forms": "^1.3.17",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },