@dosgato/dialog 0.0.63 → 0.0.64

package/dist/FieldMultiselect.svelte

@@ -33,12 +33,11 @@ export let lookupByValue = async (val) => { const options = await getOptions(val
 export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
-// Each time we run getOptions we will save the value -> label mappings
-// that it finds, so that we can display labels on pills.
+/** Each time we run getOptions we will save the value -> label mappings that it finds, so that we can display labels on pills. */
 const valueToLabel = {};
 async function wrapGetOptions(search) {
     const opts = await getOptions(search);
-    /** If no options are returned with the search term, we can end up with an infinite loop the first time reactToValue calls wrapGetOptions */
+    /* If no options are returned with the search term, we can end up with an infinite loop the first time reactToValue calls wrapGetOptions */
     // if (opts.length === 0) opts = await getOptions('')
     for (const opt of opts) {
         valueToLabel[opt.value] = opt.label || opt.value;
@@ -54,10 +53,9 @@ onMount(async () => {
     await reactToValue(defaultValue);
     hasInit = true;
 });
-// If we get a value from the form that we haven't seen in the popup menu
-// yet, we won't have a label for it.
-// This function runs getOptions on any selected values for which the label
-// is currently unknown.
+/**
+If we get a value from the form that we haven't seen in the popup menu yet, we won't have a label for it.
+This function runs getOptions on any selected values for which the label is currently unknown. */
 async function reactToValue(value) {
     await Promise.all(value.map(async (v) => {
         if (!valueToLabel[v]) {
@@ -75,7 +73,11 @@ async function reactToValue(value) {
   <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
-      <MultiSelect {id} name={path} usePortal={portal} descid={getDescribedBy([messagesid, helptextid, extradescid])} {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur} />
+      <MultiSelect {id} name={path} usePortal={portal} descid={getDescribedBy([messagesid, helptextid, extradescid])}
+        {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions}
+        inputClass='multiselect-input'
+        on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}
+      />
     </div>
   </FieldStandard>
 {/if}
@@ -84,5 +86,8 @@ async function reactToValue(value) {
   .invalid {
     --multiselect-border: 1px solid red;
   }
+  :global(.multiselect-input) {
+    width: 100%
+  }
 
 </style>

package/dist/chooser/Chooser.svelte

@@ -90,7 +90,7 @@ const previewId = randomid();
     <section class="dialog-chooser-chooser">
       {#if $store.initialized}
         <Tree headers={[
-          { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? { icon: iconForMime(item.mime) } : (item.type === 'folder' ? (item.open ? { icon: folderNotchOpen } : { icon: folderIcon }) : { icon: applicationOutline }), get: 'name' }
+          { label: 'Path', id: 'name', grow: 4, icon: item => ({ icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline) }), get: 'name' }
         ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
       {/if}
     </section>

package/dist/tree/TreeCell.svelte

@@ -1,15 +1,14 @@
-<script>import { get, titleCase } from 'txstate-utils';
+<script>import { get } from 'txstate-utils';
 import { Icon } from '..';
 export let header;
 export let item;
-$: icon = typeof header.icon === 'function' ? header.icon(item).icon : header.icon?.icon;
-$: iconLabel = typeof header.icon === 'function' ? header.icon(item).label : header.icon?.label;
+$: icon = (typeof header.icon === 'function' ? header.icon(item) : header.icon);
 $: headerComponent = header.component;
 </script>
 
-{#if header.icon}
+{#if icon}
   <span class="icon">
-    <Icon {icon} tooltip={iconLabel} inline width="1.5em" hiddenLabel={iconLabel} />
+    <Icon icon={icon.icon} tooltip={icon.label} inline width="1.5em" hiddenLabel={icon.label} />
   </span>
 {/if}
 {#if header.component}

package/dist/tree/treestore.d.ts

@@ -41,11 +41,11 @@ export interface TreeHeader<T extends TreeItemFromDB> {
     grow?: number;
     icon?: {
         icon: IconifyIcon;
-        label?: string | undefined;
+        label?: string;
     } | ((item: TypedTreeItem<T>) => {
         icon: IconifyIcon;
         label?: string;
-    });
+    } | undefined);
     get?: string;
     render?: (item: TypedTreeItem<T>) => string;
     component?: SvelteComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",