@dosgato/dialog 1.1.13 → 1.1.15

package/dist/Dialog.svelte

@@ -39,7 +39,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
 </script>
 
 <Modal {escapable} {initialfocus} hidefocus={false} includeselector=".ck-body-wrapper" on:escape>
-  <section class="{expanded ? 'xl' : size}" use:eq>
+  <section class="{expanded ? 'xl expanded' : size}" use:eq>
     {#if title || icon}
       <header id={labelid}>
         <Icon width="1.4em" {icon} inline />{title}
@@ -118,7 +118,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     width: 95vw;
     max-width: 2000px;
   }
-  @media (max-width: 2000px) { section.xl button.expand { display: none; } }
+  @media (max-width: 2000px) { section.xl:not(.expanded) button.expand { display: none; } }
   @media (max-width: 800px) { section.xl { width: 97vw; } }
 
   header {
@@ -148,8 +148,8 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     max-height: calc(100vh - 7.5em);
     max-height: calc(100dvh - 7.5em);
   }
-  @media (max-width: 800px) { .dialog-content { padding: 1.2em; } }
-  @media (max-width: 430px) { .dialog-content { padding: 0.6em; } }
+  @media (max-width: 800px) { .dialog-content { padding: 2rem 1.2em; } }
+  @media (max-width: 430px) { .dialog-content { padding: 2rem 0.6em; } }
 
   section.tiny .dialog-content, section.small .dialog-content {
     padding: 0 1em;

package/dist/FieldChoices.svelte

@@ -5,9 +5,9 @@
   The value of the field will be an array corresponding to the values of the checkboxes that are checked.
 -->
 <script>import { getContext, onMount } from 'svelte';
-import { Field, FORM_CONTEXT, arraySerialize } from '@txstate-mws/svelte-forms';
+import { Field, FORM_CONTEXT, arraySerialize, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
-import { randomid } from 'txstate-utils';
+import { get, isNotBlank, randomid } from 'txstate-utils';
 import Container from './Container.svelte';
 import Checkbox from './Checkbox.svelte';
 import { getDescribedBy } from './helpers';
@@ -25,6 +25,8 @@ export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
 const store = getContext(FORM_CONTEXT);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
 const currentWidth = derivedStore(store, 'width');
 $: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices.length);
 let orders;
@@ -46,25 +48,18 @@ function onChangeCheckbox(setVal, choice, included) {
     });
 }
 const descid = randomid();
-let val, stVal;
-function updateValue(valu, sVal) {
-    val = valu;
-    stVal = sVal;
-}
 function reactToChoices(..._) {
-    if (!stVal)
-        return;
     const choiceSet = new Set(choices?.map(c => c.value));
+    const val = get($store, finalPath);
     const filtered = val?.filter(v => choiceSet.has(v));
     if (filtered?.length !== val?.length)
-        stVal(filtered, true);
+        store.setField(finalPath, filtered).catch(console.error);
 }
 $: reactToChoices(choices);
 onMount(reactToChoices);
 </script>
 
 <Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
-  {@const _ = updateValue(value, setVal)}
   <Container {path} {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#each choices as choice, idx (choice.value)}

package/dist/FieldChooserLink.svelte

@@ -183,7 +183,7 @@ $: void updateSelected($value);
     <div class="dialog-chooser-entry">
       {#if urlEntry}
         <div class="dialog-chooser-entry-input">
-          <input bind:this={urlEntryInput} type="text" data-lpignore="true" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:input={userUrlEntry}>
+          <input bind:this={urlEntryInput} {id} type="text" data-lpignore="true" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:input={userUrlEntry} on:blur={onBlur}>
           <button type="button" on:click={clearUrlEntry}><Icon icon={xCircle} hiddenLabel="clear input" inline/></button>
         </div>
       {/if}

package/dist/FieldRadio.svelte

@@ -1,5 +1,6 @@
-<script>import { Field } from '@txstate-mws/svelte-forms';
-import { onMount } from 'svelte';
+<script>import { FORM_CONTEXT, FORM_INHERITED_PATH, Field } from '@txstate-mws/svelte-forms';
+import { getContext, onMount } from 'svelte';
+import { get, isNotBlank } from 'txstate-utils';
 import Switcher from './Switcher.svelte';
 let className = '';
 export { className as class };
@@ -21,27 +22,26 @@ export let datetime = false;
 export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
-let val, stVal, finalDeserialize;
-function updateValue(valu, sVal, fDes) {
-    val = valu;
-    stVal = sVal;
+const store = getContext(FORM_CONTEXT);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+let finalDeserialize;
+function updateDeserialize(fDes) {
     finalDeserialize = fDes;
 }
-function reactToChoices(..._) {
-    if (!stVal)
-        return;
+async function reactToChoices(..._) {
     if (!choices.length) {
-        stVal(finalDeserialize(''), true);
-        return;
+        return await store.setField(finalPath, finalDeserialize(''));
     }
+    const val = get($store, finalPath);
     if (!choices.some(o => o.value === finalDeserialize(val)))
-        stVal(notNull ? defaultValue : finalDeserialize(''), true);
+        await store.setField(finalPath, notNull ? defaultValue : finalDeserialize(''));
 }
-$: reactToChoices(choices);
+$: reactToChoices(choices).catch(console.error);
 onMount(reactToChoices);
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize let:setVal let:deserialize>
-  {@const _ = updateValue(value, setVal, deserialize)}
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize let:deserialize>
+  {@const _ = updateDeserialize(deserialize)}
   <Switcher bind:id {path} class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
 </Field>

package/dist/FieldSelect.svelte

@@ -1,4 +1,6 @@
-<script>import { onMount } from 'svelte';
+<script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+import { getContext, onMount } from 'svelte';
+import { isNotBlank, get, equal } from 'txstate-utils';
 import { getDescribedBy } from './';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
@@ -23,28 +25,29 @@ export let datetime = false;
 export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
-let val, stVal, finalDeserialize;
-function updateValue(valu, sVal, fDes) {
-    val = valu;
-    stVal = sVal;
+const store = getContext(FORM_CONTEXT);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+let finalDeserialize;
+function updateDeserialize(fDes) {
     finalDeserialize = fDes;
 }
-function reactToChoices(..._) {
-    if (!stVal)
+async function reactToChoices(..._) {
+    if (!finalDeserialize)
         return;
     if (!choices.length) {
-        stVal(finalDeserialize(''), true);
-        return;
+        return await store.setField(finalPath, finalDeserialize(''));
     }
-    if (!choices.some(o => o.value === finalDeserialize(val)))
-        stVal(notNull ? defaultValue : finalDeserialize(''), true);
+    const val = get($store.data, finalPath);
+    if (!choices.some(o => equal(o.value, val)))
+        await store.setField(finalPath, notNull ? defaultValue : finalDeserialize(''));
 }
-$: reactToChoices(choices);
+$: reactToChoices(choices).catch(console.error);
 onMount(reactToChoices);
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize let:deserialize let:setVal>
-  {@const _ = updateValue(value, setVal, deserialize)}
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize let:deserialize>
+  {@const _ = updateDeserialize(deserialize)}
   <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}

package/dist/chooser/Chooser.svelte

@@ -6,8 +6,6 @@ import { isNotBlank, randomid } from 'txstate-utils';
 import { Button, Dialog, iconForMime, Tabs, Tree, UploadUI, expandTreePath } from '..';
 import { CHOOSER_API_CONTEXT } from './ChooserAPI';
 import { CHOOSER_STORE_CONTEXT, ChooserStore } from './ChooserStore';
-import Details from './Details.svelte';
-import Thumbnail from './Thumbnail.svelte';
 import ChooserPreview from './ChooserPreview.svelte';
 const chooserClient = getContext(CHOOSER_API_CONTEXT);
 export let label = undefined;

package/dist/chooser/ChooserStore.js

@@ -39,7 +39,8 @@ export class ChooserStore extends Store {
         const $source = this.getSource();
         if (item?.type === 'asset' || !$source)
             return [];
-        return await this.client.getChildren($source.name, item?.path ?? '/', this.filter);
+        const imageFilter = this.options.images ? (itm) => ((itm.type === 'asset' && !!itm.image) || itm.type === 'folder') : nofilter;
+        return (await this.client.getChildren($source.name, item?.path ?? '/', this.filter)).filter(imageFilter);
     }
     treeStore = new TreeStore(this.fetchChildren.bind(this));
     sources = derivedStore(this, v => [...(v.sources?.page ?? []), ...(v.sources?.asset ?? [])].filter(s => this.options.activeSources ? this.options.activeSources.has(s.name) : true));

package/dist/colorpicker/FieldColorPicker.svelte

@@ -1,7 +1,8 @@
-<script>import { onMount } from 'svelte';
-import { randomid, shouldUseWhiteText } from 'txstate-utils';
-import FieldStandard from '../FieldStandard.svelte';
+<script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+import { getContext, onMount } from 'svelte';
+import { get, isNotBlank, randomid, shouldUseWhiteText } from 'txstate-utils';
 import { Radio } from '..';
+import FieldStandard from '../FieldStandard.svelte';
 export let id = undefined;
 let className = '';
 export { className as class };
@@ -15,25 +16,23 @@ export let defaultValue = notNull ? (addAllOption ? 'alternating' : options[0].v
 export let conditional = undefined;
 export let helptext = undefined;
 const groupid = randomid();
-let val, stVal;
-function updateValue(valu, sVal) {
-    val = valu;
-    stVal = sVal;
-}
-function reactToOptions(..._) {
-    if (!stVal)
+const store = getContext(FORM_CONTEXT);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+async function reactToOptions(..._) {
+    const val = get($store.data, finalPath);
+    if (!val)
         return;
     if (!options.length)
-        stVal(addAllOption ? 'alternating' : undefined, true);
-    if (val !== 'alternating' && !options.some(o => o.value === val))
-        stVal(notNull ? options[0].value : (addAllOption ? 'alternating' : undefined), true);
+        await store.setField(finalPath, addAllOption ? 'alternating' : undefined);
+    else if (val !== 'alternating' && !options.some(o => o.value === val))
+        await store.setField(finalPath, notNull ? options[0].value : (addAllOption ? 'alternating' : undefined));
 }
-$: reactToOptions(options);
+$: reactToOptions(options).catch(console.error);
 onMount(reactToOptions);
 </script>
 
 <FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid let:setVal>
-  {@const _ = void updateValue(value, setVal)}
   <div class="container-query-wrapper">
     <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
       {#if addAllOption}

package/dist/iconpicker/FieldIconPicker.svelte

@@ -105,7 +105,7 @@ function onKeyDown(e) {
 
 <FieldStandard bind:id {path} {descid} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
   <Icon icon={`${value.prefix === 'fab' ? 'fa6-brands' : 'fa6-solid'}:${value.icon?.slice(3) ?? 'graduation-cap'}`}/>
-  <button type="button" id="btnSelectIcon" class="select-icon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
+  <button type="button" {id} class="select-icon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])} on:blur={onBlur}>Select New Icon</button>
   {#if modalOpen}
   <Modal>
     <section>

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