@dosgato/dialog 1.5.6 → 1.5.9

package/dist/Container.svelte

@@ -26,6 +26,8 @@
   export let required = false
   export let related: true | number = 0
   export let conditional: boolean | undefined = undefined
+  let className = ''
+  export { className as class }
   /** The `id` of `<div>` messages are rendered in. */
   let messagesid: string | undefined
 
@@ -55,7 +57,7 @@
 </script>
 
 {#if conditional !== false}
-<div use:eq class="dialog-field-container" data-related={Array.from({ length: related === true ? 1 : related }, (_, i) => i + 1).join(' ')}>
+<div use:eq class="dialog-field-container {className}" data-related={Array.from({ length: related === true ? 1 : related }, (_, i) => i + 1).join(' ')}>
   {#if descid == null}
     <label class="dialog-field-label" for={id}>{label}{#if required}&nbsp;*{/if}</label>
   {:else}

package/dist/Container.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         /** Syntactic sugar that toggles a '*' to be appended to label. */ required?: boolean;
         related?: true | number;
         conditional?: boolean | undefined;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldChoices.svelte

@@ -5,11 +5,11 @@
   The value of the field will be an array corresponding to the values of the checkboxes that are checked.
 -->
 <script lang="ts">
-  import { getContext, onMount } from 'svelte'
+  import { getContext } from 'svelte'
   import { Field, FORM_CONTEXT, arraySerialize, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms'
   import type { FormStore } from '@txstate-mws/svelte-forms'
   import { derivedStore } from '@txstate-mws/svelte-store'
-  import { get, isNotBlank, randomid } from 'txstate-utils'
+  import { isNotBlank, randomid } from 'txstate-utils'
   import Container from './Container.svelte'
   import Checkbox from './Checkbox.svelte'
   import { getDescribedBy } from './helpers'
@@ -19,7 +19,7 @@
   export let id: string | undefined = undefined
   export let path: string
   export let label = ''
-  export let choices: { label?: string, value: any, disabled?: boolean }[]
+  export let choices: { label?: string, value: any, disabled?: boolean }[] | undefined
   export let defaultValue: any = []
   export let conditional: boolean | undefined = undefined
   export let maxwidth = 250
@@ -34,18 +34,18 @@
   const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
   const val = store.getField<any[]>(finalPath)
   const currentWidth = derivedStore(store, 'width')
-  $: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices.length)
+  $: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices?.length ?? 0)
 
   let orders: number[]
   let width = '100%'
   function redoLayout (..._: any) {
     width = `${100 / cols}%`
-    const rows = Math.ceil(choices.length / cols)
-    orders = choices.map((_, i) => leftToRight ? i : Math.floor((i + 1) / cols) + rows * (i % cols))
+    const rows = Math.ceil((choices?.length ?? 0) / cols)
+    orders = choices?.map((_, i) => leftToRight ? i : Math.floor((i + 1) / cols) + rows * (i % cols)) ?? []
   }
   $: redoLayout(choices, cols)
 
-  function onChangeCheckbox (setVal: (val: any) => void, choice: typeof choices[number], included: boolean) {
+  function onChangeCheckbox (setVal: (val: any) => void, choice: NonNullable<typeof choices>[number], included: boolean) {
     setVal(v => {
       if (v == null) return included ? [] : [choice.value]
       if (included) return v.filter(s => s !== choice.value)
@@ -62,7 +62,7 @@
   let selectAllElement: HTMLInputElement | undefined
   const selectAllId = randomid()
 
-  $: selectAllChecked = choices.every(choice => choice.disabled || selected.has(choice.value))
+  $: selectAllChecked = choices?.every(choice => choice.disabled || selected.has(choice.value)) ?? false
 
   function selectAllChanged () {
     if (selectAllChecked) {
@@ -70,24 +70,14 @@
       void store.setField(finalPath, [])
     } else {
       // it was not checked and now it is checked
-      void store.setField(finalPath, choices.filter(choice => !choice.disabled).map(choice => choice.value))
+      void store.setField(finalPath, choices?.filter(choice => !choice.disabled).map(choice => choice.value) ?? [])
     }
   }
 
   const descid = randomid()
-
-  function reactToChoices (..._: any[]) {
-    const choiceSet = new Set(choices?.filter(c => !c.disabled).map(c => c.value))
-    selected = new Set(Array.from(selected).filter(v => choiceSet.has(v)))
-    const val = get($store.data, finalPath)
-    const filtered = val?.filter(v => choiceSet.has(v))
-    if (filtered?.length !== val?.length) store.setField(finalPath, filtered).catch(console.error)
-  }
-  $: reactToChoices(choices)
-  onMount(reactToChoices)
 </script>
 
-<Field {path} {defaultValue} {conditional} let:path={fullpath} let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
+<Field {path} {defaultValue} allowedValues={choices?.map(choice => choice.value)} allowedValuesMultiple {conditional} let:path={fullpath} let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
   <Container path={fullpath} {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#if selectAll}

package/dist/FieldChoices.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
             label?: string;
             value: any;
             disabled?: boolean;
-        }[];
+        }[] | undefined;
         defaultValue?: any;
         conditional?: boolean | undefined;
         maxwidth?: number;

package/dist/FieldMultiple.svelte

@@ -75,7 +75,7 @@
   let messages: Feedback[] = []
 </script>
 
-<Container {path} {label} {messages} {conditional} {related} {helptext} let:helptextid>
+<Container {path} {label} {messages} {conditional} {related} {helptext} class={compact ? 'compact' : ''} let:helptextid>
   {noOp(fieldMultipleContext.helptextid = helptextid)}
   <AddMore bind:messages {path} {initialState} {minLength} {maxLength} {conditional} let:path={fullpath} let:currentLength let:maxLength={resolvedMaxLength} let:index let:minned let:maxed let:value let:onDelete let:onMoveUp let:onMoveDown>
     {@const showDelete = removable && !minned}
@@ -92,7 +92,7 @@
         {#if showDelete}<button class="dialog-multiple-delete" type="button" on:click|preventDefault|stopPropagation={confirmedDelete(onDelete, value)}><Icon icon={xCircle} hiddenLabel="remove from list" /></button>{/if}
       </div>{/if}
     </div>
-    <svelte:fragment slot="addbutton" let:maxed let:onClick>
+    <svelte:fragment slot="addbutton" let:maxed let:onClick let:maxLength={resolvedMaxLength}>
       {#if !maxed || (maxed && resolvedMaxLength > 1)}
         <Button type="button" icon={plusCircleLight} class="{addMoreClass} dialog-multiple-button" disabled={maxed} on:click={onClick}>{maxed ? maxedText : addMoreText}</Button>
       {/if}

package/dist/FieldRadio.svelte

@@ -9,9 +9,9 @@
   export let path: string
   export let label = ''
   export let notNull = false
-  export let choices: { label?: string, value: any, disabled?: boolean }[]
-  export let defaultValue: any = notNull ? choices[0].value : undefined
-  export let conditional: boolean | undefined = undefined
+  export let choices: { label?: string, value: any, disabled?: boolean }[] | undefined
+  export let defaultValue: any = undefined
+  export let conditional = true
   export let required = false
   export let horizontal = false
   export let related: true | number = 0
@@ -24,23 +24,10 @@
   export let serialize: ((value: any) => string) | undefined = undefined
   export let deserialize: ((value: string) => any) | undefined = undefined
 
-  const store = getContext<FormStore>(FORM_CONTEXT)
   const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
   const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
-
-  let finalDeserialize: (value: string) => any
-  async function reactToChoices (..._: any[]) {
-    if (!finalDeserialize) return
-    if (!choices.length) {
-      return await store.setField(finalPath, finalDeserialize(''), { notDirty: true })
-    }
-    const val = get($store.data, finalPath)
-    if (!choices.some(o => equal(o.value, val))) await store.setField(finalPath, notNull ? defaultValue : finalDeserialize(''), { notDirty: true })
-  }
-  $: reactToChoices(choices).catch(console.error)
-  onMount(reactToChoices)
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} bind:finalDeserialize let:serialize={finalSerialize} let:value let:valid let:invalid let:onBlur let:setVal let:messages>
-  <Switcher bind:id {path} class={className} name={finalPath} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={e => setVal(finalDeserialize(e.detail))} {onBlur} choices={choices.map(c => ({ ...c, value: finalSerialize(c.value) }))} />
+<Field {path} {defaultValue} allowedValues={choices?.map(c => c.value)} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:deserialize={finalDeserialize} let:serialize={finalSerialize} let:value let:valid let:invalid let:onBlur let:setVal let:messages>
+  <Switcher bind:id {path} class={className} name={finalPath} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={e => setVal(finalDeserialize(e.detail))} {onBlur} choices={choices?.map(c => ({ ...c, value: finalSerialize(c.value) })) ?? []} />
 </Field>

package/dist/FieldRadio.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
             label?: string;
             value: any;
             disabled?: boolean;
-        }[];
+        }[] | undefined;
         defaultValue?: any;
-        conditional?: boolean | undefined;
+        conditional?: boolean;
         required?: boolean;
         horizontal?: boolean;
         related?: true | number;

package/dist/FieldSelect.svelte

@@ -12,8 +12,8 @@
   export let placeholder: string = 'Select' + (label ? ' ' + label : '')
   export let notNull = false
   export let disabled = false
-  export let choices: { label?: string, value: any, disabled?: boolean }[]
-  export let defaultValue: any = notNull ? choices[0]?.value : undefined
+  export let choices: { label?: string, value: any, disabled?: boolean }[] | undefined
+  export let defaultValue: any = undefined
   export let conditional: boolean | undefined = undefined
   export let required = false
   export let inputelement: HTMLSelectElement = undefined as any
@@ -26,25 +26,9 @@
   export let boolean = false
   export let serialize: ((value: any) => string) | undefined = undefined
   export let deserialize: ((value: string) => any) | undefined = undefined
-
-  const store = getContext<FormStore>(FORM_CONTEXT)
-  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
-  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
-
-  let finalDeserialize: (value: string) => any
-  async function reactToChoices (..._: any[]) {
-    if (!finalDeserialize) return
-    if (!choices.length) {
-      return await store.setField(finalPath, finalDeserialize(''), { notDirty: true })
-    }
-    const val = get($store.data, finalPath)
-    if (!choices.some(o => equal(o.value, val))) await store.setField(finalPath, notNull ? defaultValue : finalDeserialize(''), { notDirty: true })
-  }
-  $: 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} bind:finalDeserialize let:serialize={finalSerialize} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:onChange let:messagesid let:helptextid>
+<FieldStandard bind:id allowedValues={choices?.map(choice => choice.value)} {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:serialize={finalSerialize} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:onChange let:messagesid let:helptextid>
   <select bind:this={inputelement} id={fieldid} 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/FieldSelect.svelte.d.ts

@@ -12,7 +12,7 @@ declare const __propDef: {
             label?: string;
             value: any;
             disabled?: boolean;
-        }[];
+        }[] | undefined;
         defaultValue?: any;
         conditional?: boolean | undefined;
         required?: boolean;

package/dist/FieldStandard.svelte

@@ -36,9 +36,11 @@
   export let helptext: string | undefined = undefined
   export let finalSerialize: ((value: any) => string) | undefined = undefined
   export let finalDeserialize: ((value: string) => any) | undefined = undefined
+  export let allowedValues: any[] | undefined = undefined
+  export let allowedValuesMultiple = false
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} bind:finalSerialize bind:finalDeserialize {initialize} {finalize} let:path={fullpath} let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid>
+<Field {path} {defaultValue} {allowedValues} {allowedValuesMultiple} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} bind:finalSerialize bind:finalDeserialize {initialize} {finalize} let:path={fullpath} let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid>
   <Container path={fullpath} {id} {label} {messages} {descid} {required} {related} {helptext} let:messagesid let:helptextid>
     <slot {id} path={fullpath} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} {helptextid} serialize={finalSerialize} deserialize={finalDeserialize} />
   </Container>

package/dist/FieldStandard.svelte.d.ts

@@ -22,6 +22,8 @@ declare const __propDef: {
         helptext?: string | undefined;
         finalSerialize?: ((value: any) => string) | undefined;
         finalDeserialize?: ((value: string) => any) | undefined;
+        allowedValues?: any[] | undefined;
+        allowedValuesMultiple?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Switcher.svelte

@@ -19,7 +19,7 @@
   export let extradescid: string | undefined = undefined
   export let helptext: string | undefined = undefined
   export let messages: Feedback[] = []
-  export let iptValue = choices[0].value
+  export let iptValue: string | undefined = undefined
   export let valid = false
   export let invalid = false
   export let onBlur: (() => void | Promise<void>) | undefined = undefined

package/dist/Switcher.svelte.d.ts

@@ -18,7 +18,7 @@ declare const __propDef: {
         extradescid?: string | undefined;
         helptext?: string | undefined;
         messages?: Feedback[];
-        iptValue?: string;
+        iptValue?: string | undefined;
         valid?: boolean;
         invalid?: boolean;
         onBlur?: (() => void | Promise<void>) | undefined;

package/dist/chooser/Chooser.svelte

@@ -105,6 +105,8 @@
       {/if}
     </section>
     <ChooserPreview {thumbnailExpanded} {previewId} {store} on:thumbnailsizechange={() => { thumbnailExpanded = !thumbnailExpanded }}/>
+  </section>
+  <svelte:fragment slot="buttons" let:describedby>
     {#if showAltTextOption}
       <section class="alt-text-options">
         <label>
@@ -113,8 +115,6 @@
         </label>
       </section>
     {/if}
-  </section>
-  <svelte:fragment slot="buttons" let:describedby>
     {#if chooserClient.upload && $source?.type === 'asset'}
       <Button class="upload" disabled={$selected?.type !== 'folder' || !(chooserClient.mayUpload?.($selected) ?? true)} on:click={() => { showuploader = true }}>Upload</Button>
     {/if}
@@ -159,6 +159,7 @@
   .alt-text-options {
     width: 100%;
     padding-block: 1em;
+    margin-bottom: 0.5em;
   }
   :global(footer.actions .upload) {
     margin-right: auto;
@@ -172,8 +173,5 @@
       width: 100%;
       height: 50%;
     }
-    .alt-text-options {
-      order: 4;
-    }
   }
 </style>

package/dist/colorpicker/FieldColorPicker.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { FORM_CONTEXT, FORM_INHERITED_PATH, type FormStore } from '@txstate-mws/svelte-forms'
-  import { getContext, onMount } from 'svelte'
-  import { get, isNotBlank, randomid, shouldUseWhiteText } from 'txstate-utils'
+  import { randomid, shouldUseWhiteText } from 'txstate-utils'
   import { Radio } from '..'
   import FieldStandard from '../FieldStandard.svelte'
   import type { ColorPickerOption } from './colorpicker'
@@ -15,26 +13,15 @@
   export let label = ''
   export let required = false
   export let notNull = false
-  export let defaultValue: any = notNull ? (addAllOption ? 'alternating' : options[0].value) : undefined
+  export let defaultValue: any = notNull && addAllOption ? 'alternating' : undefined
   export let conditional: boolean | undefined = undefined
   export let helptext: string | undefined = undefined
   const groupid = randomid()
 
-  const store = getContext<FormStore>(FORM_CONTEXT)
-  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
-  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
-
-  async function reactToOptions (..._: any[]) {
-    const val = get($store.data, finalPath)
-    if (!val) return
-    if (!options.length) await store.setField(finalPath, addAllOption ? 'alternating' : undefined, { notDirty: true })
-    else if (val !== 'alternating' && !options.some(o => o.value === val)) await store.setField(finalPath, notNull ? options[0].value : (addAllOption ? 'alternating' : undefined), { notDirty: true })
-  }
-  $: reactToOptions(options).catch(console.error)
-  onMount(reactToOptions)
+  $: allowedValues = [...(addAllOption ? ['alternating'] : []), ...options.map(o => o.value)]
 </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>
+<FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {notNull} {conditional} {helptext} {allowedValues} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid>
   <div class="container-query-wrapper">
     <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
       {#if addAllOption}

package/dist/tree/TreeNode.svelte

@@ -256,7 +256,7 @@
     aria-posinset={posinset}
     aria-setsize={setsize}
     aria-selected={isSelected}
-    aria-expanded={item.hasChildren ? item.open && !!item.children && !!item.children.length : undefined}
+    aria-expanded={item.hasChildren ? !!item.open && !!item.children?.length : undefined}
     aria-busy={item.loading}
     on:keydown={onKeyDown}
     on:click={onClick}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.5.6",
+  "version": "1.5.9",
   "scripts": {
     "prepublishOnly": "npm run package",
     "dev": "vite dev --force",
@@ -32,7 +32,7 @@
     "@iconify-icons/ph": "^1.2.2",
     "@iconify/svelte": "^4.0.0 || ^5.0.0",
     "@txstate-mws/svelte-components": "^1.6.11",
-    "@txstate-mws/svelte-forms": "^2.0.0",
+    "@txstate-mws/svelte-forms": "^2.1.0",
     "@valtown/codemirror-ts": "^2.3.1",
     "codemirror": "^6.0.1",
     "cm6-graphql": "0.2.1",