@dosgato/dialog 0.0.63 → 0.0.65

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/FieldStandard.svelte.d.ts

@@ -30,7 +30,7 @@ declare const __propDef: {
             value: any;
             onBlur: () => void;
             onChange: (e?: any) => void;
-            setVal: (val: string | number | boolean | object | Date) => void;
+            setVal: (val: string | number | boolean | object | Date | undefined) => void;
             valid: boolean;
             invalid: boolean;
             messagesid: any;

package/dist/FieldText.svelte

@@ -16,10 +16,11 @@ export let required = false;
 export let use = [];
 export let inputelement = undefined;
 export let related = 0;
+export let autocomplete = 'off';
 export let extradescid = undefined;
 export let helptext = undefined;
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <Input bind:inputelement {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {extradescid} {use}></Input>
+  <Input bind:inputelement {type} {autocomplete} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {extradescid} {use}></Input>
 </FieldStandard>

package/dist/FieldText.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         use?: HTMLActionEntry[] | undefined;
         inputelement?: HTMLInputElement | undefined;
         related?: number | true | undefined;
+        autocomplete?: string | undefined;
         extradescid?: string | undefined;
         helptext?: string | undefined;
     };

package/dist/Input.svelte

@@ -13,6 +13,7 @@ export let max = undefined;
 export let step = undefined;
 export let id = undefined;
 export let disabled = false;
+export let autocomplete = 'off';
 export let extradescid = undefined;
 export let messagesid = undefined;
 export let helptextid = undefined;
@@ -37,4 +38,5 @@ $: minStr = resolveMinMax(min);
 $: maxStr = resolveMinMax(max);
 </script>
 
-<input bind:this={inputelement} {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={isNotBlank(descby) ? descby : null} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>
+<!-- svelte-ignore a11y-autocomplete-valid -->
+<input bind:this={inputelement} {type} {id} {autocomplete} class={className} data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={isNotBlank(descby) ? descby : null} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>

package/dist/Input.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         step?: number | undefined;
         id?: string | undefined;
         disabled?: boolean | undefined;
+        autocomplete?: string | undefined;
         extradescid?: string | undefined;
         messagesid?: string | undefined;
         helptextid?: string | undefined;

package/dist/Tab.svelte

@@ -31,7 +31,7 @@ const last = idx === $store.tabs.length - 1;
     width: 100%;
     min-height: 50vh;
     border: var(--tabs-panel-border, var(--tabs-border, 0));
-    padding: var(--tabs-margin-top, 2em) var(--tabs-padding-hori, 0.7em) 0 var(--tabs-padding-hori, 0.7em);
+    padding: var(--tabs-margin-top, 2em) var(--tabs-padding-hori, 0.7em) 0.5em var(--tabs-padding-hori, 0.7em);
   }
   .tabs-panel.accordion {
     border-left: 0;

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

@@ -23,6 +23,7 @@ export interface ITreeStore<T extends TreeItemFromDB> {
     selectedItems: TypedTreeItem<T>[];
     copied: Map<string, TypedTreeItem<T>>;
     cut?: boolean;
+    copyRecursive?: boolean;
     draggable: boolean;
     selectedUndraggable?: boolean;
     dragging: boolean;
@@ -41,11 +42,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;
@@ -120,7 +121,7 @@ export declare class TreeStore<T extends TreeItemFromDB> extends ActiveStore<ITr
     protected _dropEffect(item: TypedTreeItem<T>, droppedItems: Map<string, TypedTreeItem<T>>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
     dropEffect(item: TypedTreeItem<T>, above: boolean, userWantsCopy: boolean): "none" | "copy" | "move";
     cut(): void;
-    copy(): void;
+    copy(recursive?: boolean): void;
     cutEligible(): boolean | undefined;
     copyEligible(): boolean | undefined;
     cancelCopy(): void;

package/dist/tree/treestore.js

@@ -334,11 +334,12 @@ export class TreeStore extends ActiveStore {
         this.value.cut = true;
         this.trigger();
     }
-    copy() {
+    copy(recursive = false) {
         if (!this.copyEligible())
             return;
         this.value.copied = new Map(this.value.selected);
         this.value.cut = false;
+        this.value.copyRecursive = recursive;
         this.trigger();
     }
     cutEligible() {
@@ -350,6 +351,7 @@ export class TreeStore extends ActiveStore {
     cancelCopy() {
         this.value.copied = new Map();
         this.value.cut = undefined;
+        this.value.copyRecursive = undefined;
         this.trigger();
     }
     pasteEligible(above = false) {
@@ -365,6 +367,7 @@ export class TreeStore extends ActiveStore {
         const cut = this.value.cut;
         this.value.copied = new Map();
         this.value.cut = undefined;
+        this.value.copyRecursive = undefined;
         return await this._drop(this.value.selectedItems[0], copied, above, !cut, userWantsRecursive);
     }
     setHeaderOverride(id, width) {

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