@dosgato/dialog 1.2.8 → 1.3.0

package/dist/FieldDualListbox.svelte

@@ -1,87 +1,89 @@
-<script>import menuRight from '@iconify-icons/mdi/menu-right.js';
-import menuLeft from '@iconify-icons/mdi/menu-left.js';
-import { ScreenReaderOnly, modifierKey } from '@txstate-mws/svelte-components';
-import { arraySerialize } from '@txstate-mws/svelte-forms';
-import { randomid } from 'txstate-utils';
-import FieldStandard from './FieldStandard.svelte';
-import Icon from './Icon.svelte';
-import Listbox from './Listbox.svelte';
-import { getDescribedBy } from './';
-export let id = undefined;
-export let path;
-export let label = '';
-export let sourceLabel = 'Available';
-export let selectedLabel = 'Selected';
-export let multiselect = false;
-export let choices;
-export let defaultValue = [];
-export let conditional = undefined;
-export let required = false;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-let itemsToAdd = []; // the items selected in the left listbox
-let itemsToRemove = []; // the items selected in the right listbox
-let instructions = 'test';
-$: {
-    if (itemsToAdd.length === 1)
-        instructions = `Press right arrow key to move selected ${sourceLabel} items to ${selectedLabel} items list.`;
-    else
-        instructions = '';
-}
-$: {
-    if (itemsToRemove.length === 1)
-        instructions = `Press left arrow key to move selected ${selectedLabel} items to ${sourceLabel} list.`;
-    else
-        instructions = '';
-}
-const descid = randomid();
-function addToSelected(value, setVal) {
+<script lang="ts">
+  import menuRight from '@iconify-icons/mdi/menu-right.js'
+  import menuLeft from '@iconify-icons/mdi/menu-left.js'
+  import { type PopupMenuItem, ScreenReaderOnly, modifierKey } from '@txstate-mws/svelte-components'
+  import { arraySerialize } from '@txstate-mws/svelte-forms'
+  import { randomid } from 'txstate-utils'
+  import FieldStandard from './FieldStandard.svelte'
+  import Icon from './Icon.svelte'
+  import Listbox from './Listbox.svelte'
+  import { getDescribedBy } from './'
+
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let sourceLabel: string = 'Available'
+  export let selectedLabel: string = 'Selected'
+  export let multiselect: boolean = false
+  export let choices: PopupMenuItem[]
+  export let defaultValue: string[] = []
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+
+  let itemsToAdd: PopupMenuItem[] = [] // the items selected in the left listbox
+  let itemsToRemove: PopupMenuItem[] = [] // the items selected in the right listbox
+  let instructions: string = 'test'
+
+  $: {
+    if (itemsToAdd.length === 1) instructions = `Press right arrow key to move selected ${sourceLabel} items to ${selectedLabel} items list.`
+    else instructions = ''
+  }
+
+  $: {
+    if (itemsToRemove.length === 1) instructions = `Press left arrow key to move selected ${selectedLabel} items to ${sourceLabel} list.`
+    else instructions = ''
+  }
+
+  const descid = randomid()
+
+  function addToSelected (value: string[], setVal: (val: any) => void) {
     return () => {
-        const selected = value.concat(itemsToAdd.map(item => item.value));
-        itemsToAdd = [];
-        setVal(selected);
-    };
-}
-function addToAvailable(value, setVal) {
+      const selected = value.concat(itemsToAdd.map(item => item.value))
+      itemsToAdd = []
+      setVal(selected)
+    }
+  }
+
+  function addToAvailable (value: string[], setVal: (val: any) => void) {
     return () => {
-        const itemsToRemoveSet = new Set(itemsToRemove.map(i => i.value));
-        const selected = value.filter(v => !itemsToRemoveSet.has(v));
-        itemsToRemove = [];
-        setVal(selected);
-    };
-}
-function valueToSelectedChoices(value) {
+      const itemsToRemoveSet = new Set(itemsToRemove.map(i => i.value))
+      const selected = value.filter(v => !itemsToRemoveSet.has(v))
+      itemsToRemove = []
+      setVal(selected)
+    }
+  }
+
+  function valueToSelectedChoices (value: string[]) {
     // keep the selected options ordered as they were in the available options
-    const valueSet = new Set(value);
-    const ret = [];
+    const valueSet = new Set(value)
+    const ret: PopupMenuItem[] = []
     for (const choice of choices) {
-        if (valueSet.has(choice.value))
-            ret.push({ value: choice.value, label: choice.label || choice.value });
+      if (valueSet.has(choice.value)) ret.push({ value: choice.value, label: choice.label || choice.value })
     }
-    return ret;
-}
-function getAvailable(value) {
-    return choices.filter(choice => !value.includes(choice.value));
-}
-function onkeydown(value, setVal) {
+    return ret
+  }
+
+  function getAvailable (value: string[]) {
+    return choices.filter(choice => !value.includes(choice.value))
+  }
+
+  function onkeydown (value: string[], setVal: (val: any) => void) {
     return (e) => {
-        if (modifierKey(e))
-            return;
-        if (e.key === 'ArrowRight') {
-            e.preventDefault();
-            if (itemsToAdd.length === 0)
-                return;
-            addToSelected(value, setVal)();
-        }
-        else if (e.key === 'ArrowLeft') {
-            e.preventDefault();
-            if (itemsToRemove.length === 0)
-                return;
-            addToAvailable(value, setVal)();
-        }
-    };
-}
+      if (modifierKey(e)) return
+      if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        if (itemsToAdd.length === 0) return
+        addToSelected(value, setVal)()
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        if (itemsToRemove.length === 0) return
+        addToAvailable(value, setVal)()
+      }
+    }
+  }
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {descid} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:helptextid let:messagesid serialize={arraySerialize}>
@@ -117,5 +119,4 @@ function onkeydown(value, setVal) {
     border: 0;
     padding: 0;
   }
-
 </style>

package/dist/FieldHidden.svelte

@@ -1,19 +1,20 @@
-<script>import { Field, nullableSerialize, nullableDeserialize, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
-import { getContext } from 'svelte';
-import { isNotBlank } from 'txstate-utils';
-export let id = undefined;
-export let path;
-export let value = '';
-export let notNull = false;
-export let boolean = false;
-export let number = false;
-export let conditional = undefined;
-const store = getContext(FORM_CONTEXT);
-const inheritedPath = getContext(FORM_INHERITED_PATH);
-const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-$: void store.setField(finalPath, value);
+<script lang="ts">
+  import { Field, type FormStore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms'
+  import { getContext } from 'svelte'
+  import { isNotBlank } from 'txstate-utils'
+  export let id: string | undefined = undefined
+  export let path: string
+  export let value: string | boolean | number = ''
+  export let notNull = false
+  export let boolean = false
+  export let number = false
+  export let conditional: boolean | undefined = undefined
+  const store = getContext<FormStore>(FORM_CONTEXT)
+  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
+  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+  $: void store.setField(finalPath, value)
 </script>
 
-<Field {path} {conditional} {boolean} {number} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value>
+<Field {path} {conditional} {boolean} {number} {notNull} let:value>
   <input type="hidden" name={path} {value} {id}>
 </Field>

package/dist/FieldIdentifier.svelte

@@ -1,21 +1,22 @@
-<script>import { Field, nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
-import { randomid } from 'txstate-utils';
-import { onMount } from 'svelte';
-export let path;
-export let conditional = undefined;
-export let length = 10;
-let val, stVal;
-function updateValue(valu, sVal) {
-    val = valu;
-    stVal = sVal;
-}
-onMount(() => {
-    if (!val)
-        stVal(randomid(length));
-});
+<script lang="ts">
+  import { Field, FORM_INHERITED_PATH, type FormStore, FORM_CONTEXT } from '@txstate-mws/svelte-forms'
+  import { getContext, onMount } from 'svelte'
+  import { isNotBlank, randomid } from 'txstate-utils'
+
+  export let path: string
+  export let conditional: boolean | undefined = undefined
+  export let length: number = 10
+
+  const store = getContext<FormStore>(FORM_CONTEXT)
+  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
+  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+  const valueStore = store.getField<string | null>(finalPath)
+
+  onMount(() => {
+    if (!$valueStore) store.setField(finalPath, randomid(length))
+  })
 </script>
 
-<Field {path} {conditional} defaultValue={randomid(length)} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value let:setVal>
-  {@const _ = updateValue(value, setVal)}
+<Field {path} {conditional} defaultValue={randomid(length)} notNull let:value>
   <input type="hidden" name={path} {value}>
 </Field>

package/dist/FieldMultiple.svelte

@@ -1,84 +1,82 @@
-<script context="module">export const DG_DIALOG_FIELD_MULTIPLE = {};
-function noOp(..._) { return ''; }
+<script lang="ts" context="module">
+  export const DG_DIALOG_FIELD_MULTIPLE = {}
+  function noOp (..._: any[]) { return '' }
 </script>
-<script>import caretCircleDown from '@iconify-icons/ph/caret-circle-down-fill';
-import caretCircleUp from '@iconify-icons/ph/caret-circle-up-fill';
-import plusCircleLight from '@iconify-icons/ph/plus-circle-light';
-import xCircle from '@iconify-icons/ph/x-circle-fill';
-import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
-import { derivedStore } from '@txstate-mws/svelte-store';
-import { getContext, setContext } from 'svelte';
-import { isNotNull } from 'txstate-utils';
-import Button from './Button.svelte';
-import Container from './Container.svelte';
-import Icon from './Icon.svelte';
-export let path;
-export let label;
-export let initialState = undefined;
-export let minLength = 1;
-export let maxLength = undefined;
-export let compact = false;
-export let removable = false;
-export let reorder = false;
-export let conditional = undefined;
-export let addMoreText = 'Add';
-export let maxedText = addMoreText;
-export let addMoreClass = undefined;
-export let related = 0;
-export let helptext = undefined;
-/**
- * If you want to ask users if they're sure before removing an array element, fill this
- * prop with the question that should be in the confirmation dialog.
- *
- * Alternatively, you can provide a function to generate the question from the item being
- * deleted. e.g. (item) => `Are you sure you want to delete ${item.name}?`
- */
-export let confirmDelete = undefined;
-const fieldMultipleContext = { helptextid: undefined };
-setContext(DG_DIALOG_FIELD_MULTIPLE, fieldMultipleContext);
-const inheritedPath = getContext(FORM_INHERITED_PATH);
-const finalPath = [inheritedPath, path].filter(isNotNull).join('.');
-const store = getContext(FORM_CONTEXT);
-const messageStore = derivedStore(store, ({ messages }) => messages.all.filter(m => m.path?.startsWith(finalPath)));
-const reorderupelements = [];
-const reorderdownelements = [];
-function moveUpAndFocus(onMove, idx) {
+<script lang="ts">
+  import caretCircleDown from '@iconify-icons/ph/caret-circle-down-fill'
+  import caretCircleUp from '@iconify-icons/ph/caret-circle-up-fill'
+  import plusCircleLight from '@iconify-icons/ph/plus-circle-light'
+  import xCircle from '@iconify-icons/ph/x-circle-fill'
+  import { AddMore, type Feedback } from '@txstate-mws/svelte-forms'
+  import { setContext } from 'svelte'
+  import { writable } from 'svelte/store'
+  import Button from './Button.svelte'
+  import Container from './Container.svelte'
+  import Icon from './Icon.svelte'
+
+  export let path: string
+  export let label: string
+  export let initialState: any | ((index: number) => any) = undefined
+  export let minLength = 1
+  export let maxLength: number | undefined = undefined
+  export let compact = false
+  export let removable = false
+  export let reorder = false
+  export let conditional: boolean | undefined = undefined
+  export let addMoreText = 'Add'
+  export let maxedText = addMoreText
+  export let addMoreClass: string | undefined = undefined
+  export let related: true | number = 0
+  export let helptext: string | undefined = undefined
+  /**
+   * If you want to ask users if they're sure before removing an array element, fill this
+   * prop with the question that should be in the confirmation dialog.
+   *
+   * Alternatively, you can provide a function to generate the question from the item being
+   * deleted. e.g. (item) => `Are you sure you want to delete ${item.name}?`
+   */
+  export let confirmDelete: string | ((item: any) => string) | undefined = undefined
+
+  const fieldMultipleContext: { helptextid: string | undefined } = { helptextid: undefined }
+  setContext(DG_DIALOG_FIELD_MULTIPLE, fieldMultipleContext)
+
+  const reorderupelements: HTMLButtonElement[] = []
+  const reorderdownelements: HTMLButtonElement[] = []
+  function moveUpAndFocus (onMove: () => void, idx: number) {
     return () => {
-        onMove();
-        let newFocus = reorderupelements[idx - 1];
-        if (newFocus) {
-            if (newFocus.disabled)
-                newFocus = reorderdownelements[idx - 1];
-            newFocus.focus();
-        }
-    };
-}
-function moveDownAndFocus(onMove, idx) {
+      onMove()
+      let newFocus = reorderupelements[idx - 1]
+      if (newFocus) {
+        if (newFocus.disabled) newFocus = reorderdownelements[idx - 1]
+        newFocus.focus()
+      }
+    }
+  }
+  function moveDownAndFocus (onMove: () => void, idx: number) {
     return () => {
-        onMove();
-        let newFocus = reorderdownelements[idx + 1];
-        if (newFocus) {
-            if (newFocus.disabled)
-                newFocus = reorderupelements[idx + 1];
-            newFocus.focus();
-        }
-    };
-}
-function confirmedDelete(onDelete, item) {
+      onMove()
+      let newFocus = reorderdownelements[idx + 1]
+      if (newFocus) {
+        if (newFocus.disabled) newFocus = reorderupelements[idx + 1]
+        newFocus.focus()
+      }
+    }
+  }
+
+  function confirmedDelete (onDelete: () => void, item: any) {
     return () => {
-        if (confirmDelete == null)
-            return onDelete();
-        const msg = typeof confirmDelete === 'string' ? confirmDelete : confirmDelete(item);
-        if (confirm(msg))
-            onDelete();
-    };
-}
-$: messages = compact ? $messageStore : [];
+      if (confirmDelete == null) return onDelete()
+      const msg = typeof confirmDelete === 'string' ? confirmDelete : confirmDelete(item)
+      if (confirm(msg)) onDelete()
+    }
+  }
+
+  let messages: Feedback[] = []
 </script>
 
 <Container {path} {label} {messages} {conditional} {related} {helptext} let:helptextid>
   {noOp(fieldMultipleContext.helptextid = helptextid)}
-  <AddMore {path} {initialState} {minLength} {maxLength} {conditional} let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp let:onMoveDown>
+  <AddMore bind:messages {path} {initialState} {minLength} {maxLength} {conditional} let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp let:onMoveDown>
     {@const showDelete = removable && !minned}
     {@const showMove = reorder && currentLength > 1}
     <div class="dialog-multiple" class:has-delete-icon={showDelete} class:has-move-icon={showMove} class:first={index === 0}>
@@ -138,5 +136,4 @@ $: messages = compact ? $messageStore : [];
   .dialog-multiple-buttons button:disabled {
     color: #6d6d6d;
   }
-
 </style>

package/dist/FieldMultiselect.svelte

@@ -6,82 +6,92 @@
   controlled by the parent component via the `getOptions` function that will be used as a
   debounced callback on the contents of the text input.
 -->
-<script>import { MultiSelect } from '@txstate-mws/svelte-components';
-import { arraySerialize } from '@txstate-mws/svelte-forms';
-import { Store } from '@txstate-mws/svelte-store';
-import { onMount } from 'svelte';
-import { isNotBlank } from 'txstate-utils';
-import FieldStandard from './FieldStandard.svelte';
-import { getDescribedBy } from './helpers';
-export let path;
-/** Function to pass to the component that tells it how to use the text
-in the text input to determine what `PopupMenuItem[]` should be displayed
-in the `<PopupMenu>`. Items already 'selected' from the popup menu will be
-tracked and automatically filtered from the popup if returned as one of the
-`PopupMenuItem[]` by `getOptions`. */
-export let getOptions;
-export let id = undefined;
-export let label = '';
-/** Text to display in the text input when it's empty. */
-export let placeholder = '';
-/** When there are no items (e.g. it's a filtered search and there were no results), we still display one
-disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */
-export let emptyText = undefined;
-export let disabled = false;
-export let defaultValue = [];
-export let conditional = undefined;
-export let required = false;
-/** Max number of selections to be allowed before disabling the input - 0 for unlimited. */
-export let maxSelections = 0;
-export let lookupByValue = async (val) => { const options = await getOptions(val); return options.find((opt) => opt.value === val); };
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let menuContainerClass = '';
-export let menuClass = '';
-export let menuItemClass = '';
-export let menuItemHilitedClass = '';
-export let menuCategoryClass = '';
-/** Add a Delete All button to clear all selected items */
-export let includeDeleteAll = false;
-/** Show a confirmation message before clearing all selections */
-export let confirmDelete = undefined;
-export let selectedItemLabel = (item) => item.label || item.value;
-/** 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 = {};
-const valueToGroup = {};
-async function wrapGetOptions(search) {
-    const opts = await getOptions(search);
+<script lang="ts">
+  import { MultiSelect } from '@txstate-mws/svelte-components'
+  import type { PopupMenuItem } from '@txstate-mws/svelte-components'
+  import { arraySerialize } from '@txstate-mws/svelte-forms'
+  import { Store } from '@txstate-mws/svelte-store'
+  import { onMount } from 'svelte'
+  import { isNotBlank } from 'txstate-utils'
+  import FieldStandard from './FieldStandard.svelte'
+  import { getDescribedBy } from './helpers'
+
+  export let path: string
+  /** Function to pass to the component that tells it how to use the text
+  in the text input to determine what `PopupMenuItem[]` should be displayed
+  in the `<PopupMenu>`. Items already 'selected' from the popup menu will be
+  tracked and automatically filtered from the popup if returned as one of the
+  `PopupMenuItem[]` by `getOptions`. */
+  export let getOptions: (search: string) => Promise<PopupMenuItem[]>
+  export let id: string | undefined = undefined
+  export let label: string = ''
+  /** Text to display in the text input when it's empty. */
+  export let placeholder = ''
+  /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
+  disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */
+  export let emptyText: string | undefined = undefined
+  export let disabled = false
+  export let defaultValue: string[] = []
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  /** Max number of selections to be allowed before disabling the input - 0 for unlimited. */
+  export let maxSelections = 0
+  export let lookupByValue: (val: string) => Promise<PopupMenuItem | undefined> = async (val) => { const options = await getOptions(val); return options.find((opt) => opt.value === val) }
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let menuContainerClass = ''
+  export let menuClass = ''
+  export let menuItemClass = ''
+  export let menuItemHilitedClass = ''
+  export let menuCategoryClass = ''
+  /** Add a Delete All button to clear all selected items */
+  export let includeDeleteAll = false
+  /** Show a confirmation message before clearing all selections */
+  export let confirmDelete: string | undefined = undefined
+
+  export let selectedItemLabel: ((item: PopupMenuItem) => string) | undefined = (item) => item.label || item.value
+
+  /** 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: Record<string, string> = {}
+  const valueToGroup: Record<string, string | undefined> = {}
+
+  async function wrapGetOptions (search: string) {
+    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 (opts.length === 0) opts = await getOptions('')
     for (const opt of opts) {
-        valueToLabel[opt.value] = opt.label || opt.value;
-        valueToGroup[opt.value] = opt.group;
+      valueToLabel[opt.value] = opt.label || opt.value
+      valueToGroup[opt.value] = opt.group
     }
-    return opts;
-}
-const selectedStore = new Store([]);
-let hasInit = !defaultValue.length;
-let inputelement;
-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. */
-async function reactToValue(value) {
-    await Promise.all(value.map(async (v) => {
-        if (!valueToLabel[v]) {
-            const item = await lookupByValue(v);
-            if (item) {
-                valueToLabel[item.value] = item.label ?? item.value;
-                valueToGroup[item.value] = item.group;
-            }
+    return opts
+  }
+
+  const selectedStore = new Store<{ value: string, label: string, group?: string }[]>([])
+
+  let hasInit = !defaultValue.length
+
+  let inputelement: HTMLElement
+  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. */
+  async function reactToValue (value: string[]) {
+    await Promise.all(value.map(async v => {
+      if (!valueToLabel[v]) {
+        const item = await lookupByValue(v)
+        if (item) {
+          valueToLabel[item.value] = item.label ?? item.value
+          valueToGroup[item.value] = item.group
         }
-    }));
-    selectedStore.set(value.map(v => ({ value: v, label: valueToLabel[v], group: valueToGroup[v] })).filter(v => isNotBlank(v.label)));
-}
+      }
+    }))
+    selectedStore.set(value.map(v => ({ value: v, label: valueToLabel[v], group: valueToGroup[v] })).filter(v => isNotBlank(v.label)))
+  }
 </script>
 
 <div bind:this={inputelement}></div>
@@ -109,5 +119,4 @@ async function reactToValue(value) {
   :global(.multiselect-input) {
     width: 100%
   }
-
 </style>