@dosgato/dialog 1.2.7 → 1.3.0

package/dist/FormDialog.svelte

@@ -1,29 +1,45 @@
-<script>import contentSave from '@iconify-icons/mdi/content-save';
-import { createEventDispatcher, setContext } from 'svelte';
-import { CHOOSER_API_CONTEXT, Form } from './';
-import Dialog from './Dialog.svelte';
-export let submit;
-export let validate = undefined;
-export let store = undefined;
-export let chooserClient = undefined;
-export let tagClient = undefined;
-export let autocomplete = undefined;
-export let name = undefined;
-export let title = '';
-export let icon = undefined;
-export let size = 'normal';
-export let preload = undefined;
-const dispatch = createEventDispatcher();
-async function onSubmit() {
-    const resp = await store.submit();
-    if (resp.success)
-        dispatch('saved', resp.data);
-}
-setContext(CHOOSER_API_CONTEXT, chooserClient);
+<script lang="ts" generics="T extends Record<string, any> = Record<string, any>, F = any">
+  import type { IconifyIcon } from '@iconify/svelte'
+  import contentSave from '@iconify-icons/mdi/content-save'
+  import type { Feedback, FormStore } from '@txstate-mws/svelte-forms'
+  import { type ComponentProps } from 'svelte'
+  import { Form } from './'
+  import Dialog from './Dialog.svelte'
+
+  interface $$Props extends ComponentProps<Form<T, F>> {
+    title?: string
+    icon?: IconifyIcon
+    size?: 'tiny' | 'small' | 'normal' | 'large'
+    expandable?: boolean
+  }
+
+  interface $$Slots {
+    default: {
+      messages: Feedback[]
+      allMessages: Feedback[]
+      saved: boolean
+      validating: boolean
+      submitting: boolean
+      valid: boolean
+      invalid: boolean
+      showingInlineErrors: boolean
+      data: Partial<T>
+    }
+  }
+
+  export let store: FormStore<T> | undefined = undefined
+  export let title: string = ''
+  export let icon: IconifyIcon | undefined = undefined
+  export let size: 'tiny' | 'small' | 'normal' | 'large' = 'normal'
+  export let expandable = true
+
+  async function onSubmit () {
+    await store!.submit()
+  }
 </script>
 
-<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size} escapable={false} expandable>
-  <Form bind:store {submit} {validate} {chooserClient} {tagClient} {autocomplete} {name} {preload} on:saved let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
+<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size} escapable={false} {expandable}>
+  <Form bind:store {...$$restProps} on:saved on:autosaved on:validationfail let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
     <slot {messages} {allMessages} {saved} {validating} {submitting} {valid} {invalid} {data} {showingInlineErrors} />
   </Form>
 </Dialog>
@@ -32,5 +48,4 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
   :global(:root) {
     --ck-z-default: var(--popup-z, 3001);
   }
-
 </style>

package/dist/FormDialog.svelte.d.ts

@@ -1,24 +1,30 @@
 import { SvelteComponentTyped } from "svelte";
 import type { IconifyIcon } from '@iconify/svelte';
-import type { Feedback, FormStore, SubmitResponse } from '@txstate-mws/svelte-forms';
-import { type Client, type TagClient } from './';
-declare class __sveltets_Render<T extends Record<string, any>> {
-    props(): {
-        submit: (state: T) => Promise<SubmitResponse<T>>;
+import type { Feedback, FormStore } from '@txstate-mws/svelte-forms';
+declare class __sveltets_Render<T extends Record<string, any> = Record<string, any>, F = any> {
+    props(): import("svelte/elements").HTMLFormAttributes & {
+        submit?: ((state: T) => Promise<import("@txstate-mws/svelte-forms").SubmitResponse<T>>) | undefined;
         validate?: ((state: T) => Promise<Feedback[]>) | undefined;
+        autoSave?: boolean;
+        preload?: T | undefined;
         store?: FormStore<T> | undefined;
-        chooserClient?: Client | undefined;
-        tagClient?: TagClient | undefined;
-        autocomplete?: string | undefined;
-        name?: string | undefined;
+        formelement?: HTMLFormElement;
+    } & {
+        tagClient?: import("./").TagClient;
+        chooserClient?: import("./").Client<F> | undefined;
+    } & {
         title?: string;
-        icon?: IconifyIcon | undefined;
+        icon?: IconifyIcon;
         size?: "tiny" | "small" | "normal" | "large";
-        preload?: T | undefined;
+        expandable?: boolean;
     };
     events(): {
-        saved: CustomEvent<T>;
-        escape: CustomEvent<undefined>;
+        escape: CustomEvent<any>;
+        saved: any;
+        autosaved: any;
+        validationfail: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
     };
     slots(): {
         default: {
@@ -34,9 +40,9 @@ declare class __sveltets_Render<T extends Record<string, any>> {
         };
     };
 }
-export type FormDialogProps<T extends Record<string, any>> = ReturnType<__sveltets_Render<T>['props']>;
-export type FormDialogEvents<T extends Record<string, any>> = ReturnType<__sveltets_Render<T>['events']>;
-export type FormDialogSlots<T extends Record<string, any>> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class FormDialog<T extends Record<string, any>> extends SvelteComponentTyped<FormDialogProps<T>, FormDialogEvents<T>, FormDialogSlots<T>> {
+export type FormDialogProps<T extends Record<string, any> = Record<string, any>, F = any> = ReturnType<__sveltets_Render<T, F>['props']>;
+export type FormDialogEvents<T extends Record<string, any> = Record<string, any>, F = any> = ReturnType<__sveltets_Render<T, F>['events']>;
+export type FormDialogSlots<T extends Record<string, any> = Record<string, any>, F = any> = ReturnType<__sveltets_Render<T, F>['slots']>;
+export default class FormDialog<T extends Record<string, any> = Record<string, any>, F = any> extends SvelteComponentTyped<FormDialogProps<T, F>, FormDialogEvents<T, F>, FormDialogSlots<T, F>> {
 }
 export {};

package/dist/Icon.svelte

@@ -3,42 +3,48 @@
   implementation of icons that adds a hidden label that can be read by screen readers. Useful for situations where aria-label
   isn't supported, to provide in kind icon support, while still making use of aria attributes regardless of support.
 -->
-<script>import { randomid } from 'txstate-utils';
-import Tooltip from './Tooltip.svelte';
-export let icon;
-/** Label used in a `<ScreenReaderOnly>`. */
-export let hiddenLabel = undefined;
-export let inline = false;
-export let width = undefined;
-export let height = undefined;
-export let tooltip = undefined;
-let className = undefined;
-export { className as class };
-function replaceIDs(body) {
-    const matches = body.matchAll(/\sid="(\S+)"/g);
-    const ids = Array.from(matches).map(m => m[1]);
-    if (!ids.length)
-        return body;
+<script lang="ts">
+  import type { IconifyIcon } from '@iconify/svelte'
+  import { randomid } from 'txstate-utils'
+  import Tooltip from './Tooltip.svelte'
+  export let icon: IconifyIcon | undefined
+  /** Label used in a `<ScreenReaderOnly>`. */
+  export let hiddenLabel: string | undefined = undefined
+  export let inline: boolean = false
+  export let width: string | number | undefined = undefined
+  export let height: string | number | undefined = undefined
+  export let tooltip: string | undefined = undefined
+  let className: string | undefined = undefined
+  export { className as class }
+
+  function replaceIDs (body: string): string {
+    const matches = body.matchAll(/\sid="(\S+)"/g)
+    const ids = Array.from(matches).map(m => m[1])
+    if (!ids.length) return body
+
     // Replace with unique ids
     ids.forEach((id) => {
-        const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        body = body.replace(
+      const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+      body = body.replace(
         // Allowed characters before id: [#;"]
         // Allowed characters after id: [)"], .[a-z]
-        new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', 'g'), '$1' + randomid() + '$3');
-    });
-    return body;
-}
-const fixedSVG = new Map();
-function svgBody(icon) {
-    if (!fixedSVG.has(icon))
-        fixedSVG.set(icon, replaceIDs(icon.body));
-    return fixedSVG.get(icon);
-}
-// If neither is defined, set both to 1em
-if (!width && !height)
-    width = height = '1em';
-height ??= width;
+        new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', 'g'),
+        '$1' + randomid() + '$3'
+      )
+    })
+    return body
+  }
+
+  const fixedSVG = new Map<IconifyIcon, string>()
+  function svgBody (icon: IconifyIcon) {
+    if (!fixedSVG.has(icon)) fixedSVG.set(icon, replaceIDs(icon.body))
+    return fixedSVG.get(icon)
+  }
+
+  // If neither is defined, set both to 1em
+  if (!width && !height) width = height = '1em'
+  height ??= width
 </script>
 
 {#if icon}
@@ -62,5 +68,4 @@ height ??= width;
   svg.hFlip.vFlip {
     transform: scale(-1, -1);
   }
-
 </style>

package/dist/InlineMessage.svelte

@@ -1,37 +1,40 @@
 <!-- @component
   The purpose of this component is to provide common `Feedback` message styling with icons that support screen readers.
 -->
-<script>import { htmlEncode } from 'txstate-utils';
-import { messageIcons, messageLabels } from './';
-import Icon from './Icon.svelte';
-export let message;
-$: icon = messageIcons[message.type] ?? messageIcons.error;
-$: iconLabel = messageLabels[message.type] ?? messageLabels.error;
-function addMarkup(msg) {
-    const lines = msg.split(/\r?\n/);
-    const output = [];
+<script lang="ts">
+  import type { Feedback } from '@txstate-mws/svelte-forms'
+  import { htmlEncode } from 'txstate-utils'
+
+  import { messageIcons, messageLabels } from './'
+  import Icon from './Icon.svelte'
+  export let message: Feedback
+
+  $: icon = messageIcons[message.type] ?? messageIcons.error
+  $: iconLabel = messageLabels[message.type] ?? messageLabels.error
+
+  function addMarkup (msg: string) {
+    const lines = msg.split(/\r?\n/)
+    const output: string[] = []
     for (const line of lines) {
-        const splitLinks = line.split(/((?:\[[^\]]+\])?\([^)]+\))/);
-        const replaced = [];
-        for (const segment of splitLinks) {
-            const m = segment.match(/(?:\[([^\]]+)\])?\(([^)]+)\)/);
-            if (m) {
-                try {
-                    const url = new URL(m[2]);
-                    replaced.push('<a href="' + htmlEncode(url.toString()) + '" target="_blank">' + htmlEncode(m[1] || m[2]) + '</a>');
-                }
-                catch {
-                    replaced.push(htmlEncode(m[0]));
-                }
-            }
-            else {
-                replaced.push(htmlEncode(segment));
-            }
+      const splitLinks = line.split(/((?:\[[^\]]+\])?\([^)]+\))/)
+      const replaced: string[] = []
+      for (const segment of splitLinks) {
+        const m = segment.match(/(?:\[([^\]]+)\])?\(([^)]+)\)/)
+        if (m) {
+          try {
+            const url = new URL(m[2])
+            replaced.push('<a href="' + htmlEncode(url.toString()) + '" target="_blank">' + htmlEncode(m[1] || m[2]) + '</a>')
+          } catch {
+            replaced.push(htmlEncode(m[0]))
+          }
+        } else {
+          replaced.push(htmlEncode(segment))
         }
-        output.push(replaced.join(''));
+      }
+      output.push(replaced.join(''))
     }
-    return output.join('<br>');
-}
+    return output.join('<br>')
+  }
 </script>
 
 <div class={message.type}><Icon width='1.5em' {icon} inline hiddenLabel={iconLabel} /><span>{@html addMarkup(message.message)}</span></div>
@@ -63,5 +66,4 @@ function addMarkup(msg) {
   div :global(a) {
     color: inherit;
   }
-
 </style>

package/dist/InlineMessages.svelte

@@ -1,12 +1,16 @@
 <!-- @component
   This renders the `Feedback` messages bound to it if there are any to display.
 -->
-<script>import { randomid } from 'txstate-utils';
-import InlineMessage from './InlineMessage.svelte';
-export let messages;
-export let id = randomid();
-const savedid = id;
-$: id = messages.length ? savedid : undefined;
+<script lang="ts">
+  import type { Feedback } from '@txstate-mws/svelte-forms'
+  import { randomid } from 'txstate-utils'
+  import InlineMessage from './InlineMessage.svelte'
+
+  export let messages: Feedback[]
+  export let id: string | undefined = randomid()
+
+  const savedid = id
+  $: id = messages.length ? savedid : undefined
 </script>
 
 {#if id}
@@ -21,5 +25,4 @@ $: id = messages.length ? savedid : undefined;
   div {
     width: 100%;
   }
-
 </style>

package/dist/Input.svelte

@@ -1,42 +1,43 @@
-<script>import { passActions } from '@txstate-mws/svelte-components';
-import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
-import { isNotBlank } from 'txstate-utils';
-let className = '';
-export { className as class };
-export let name;
-export let value;
-export let type = 'text';
-export let allowlastpass = false;
-export let placeholder = undefined;
-export let maxlength = undefined;
-export let min = undefined;
-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;
-export let valid = false;
-export let invalid = false;
-export let onChange;
-export let onBlur;
-export let onSelect = undefined;
-export let use = [];
-export let inputelement = undefined;
-$: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ');
-function resolveMinMax(dt) {
-    if (typeof dt === 'undefined')
-        return undefined;
-    if ('toJSDate' in dt)
-        dt = dt.toJSDate();
-    if (dt instanceof Date)
-        return type === 'date' ? dateSerialize(dt) : datetimeSerialize(dt);
-    return dt;
-}
-$: minStr = resolveMinMax(min);
-$: maxStr = resolveMinMax(max);
+<script lang="ts">
+  import { passActions, type HTMLActionEntry } from '@txstate-mws/svelte-components'
+  import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms'
+  import { isNotBlank } from 'txstate-utils'
+
+  let className = ''
+  export { className as class }
+  export let name: string
+  export let value: string
+  export let type: string = 'text'
+  export let allowlastpass = false
+  export let placeholder: string | undefined = undefined
+  export let maxlength: number | undefined = undefined
+  export let min: string | Date | { toJSDate: () => Date } | number | undefined = undefined
+  export let max: string | Date | { toJSDate: () => Date } | number | undefined = undefined
+  export let step: number | undefined = undefined
+  export let id: string | undefined = undefined
+  export let disabled = false
+  export let autocomplete = 'off'
+  export let extradescid: string | undefined = undefined
+  export let messagesid: string | undefined = undefined
+  export let helptextid: string | undefined = undefined
+  export let valid = false
+  export let invalid = false
+  export let onChange: any
+  export let onBlur: any
+  export let onSelect: any = undefined
+  export let use: HTMLActionEntry[] = []
+  export let inputelement: HTMLInputElement = undefined as any
+
+  $: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ')
+
+  function resolveMinMax (dt: any) {
+    if (typeof dt === 'undefined') return undefined
+    if ('toJSDate' in dt) dt = dt.toJSDate()
+    if (dt instanceof Date) return type === 'date' ? dateSerialize(dt) : datetimeSerialize(dt)
+    return dt
+  }
+  $: minStr = resolveMinMax(min)
+  $: maxStr = resolveMinMax(max)
 </script>
 
 <!-- svelte-ignore a11y-autocomplete-valid -->

package/dist/Listbox.svelte

@@ -1,121 +1,115 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { modifierKey } from '@txstate-mws/svelte-components';
-import check from '@iconify-icons/mdi/check.js';
-import Icon from './Icon.svelte';
-const dispatch = createEventDispatcher();
-export let items = [];
-export let label;
-export let multiselect = false;
-export let selected = [];
-export let descid = undefined;
-export let valid = false;
-export let invalid = false;
-import { randomid } from 'txstate-utils';
-const listId = randomid();
-const labelId = randomid();
-let listboxElement;
-let hilited = undefined;
-let firstactive = 0;
-let lastactive = items.length - 1;
-const itemelements = [];
-$: selectedSet = new Set(selected.map(s => s.value));
-async function reactToItems(..._) {
-    firstactive = items.findIndex(itm => !itm.disabled);
-    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled) - 1;
-    hilited = undefined;
-    if (listboxElement)
-        listboxElement.removeAttribute('aria-activedescendant');
-}
-$: void reactToItems(items);
-const selectItem = (item, index) => (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (item.disabled)
-        return;
-    listboxElement.setAttribute('aria-activedescendant', `${listId}-${index}`);
-    hilited = index;
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { modifierKey, type PopupMenuItem } from '@txstate-mws/svelte-components'
+  import check from '@iconify-icons/mdi/check.js'
+  import Icon from './Icon.svelte'
+  const dispatch = createEventDispatcher()
+  export let items: PopupMenuItem[] = []
+  export let label: string
+  export let multiselect: boolean = false
+  export let selected: { value: string, label?: string }[] = []
+  export let descid: string | undefined = undefined
+  export let valid = false
+  export let invalid = false
+
+  import { randomid } from 'txstate-utils'
+  const listId = randomid()
+  const labelId = randomid()
+  let listboxElement: HTMLElement
+  let hilited: number | undefined = undefined
+  let firstactive = 0
+  let lastactive = items.length - 1
+  const itemelements: HTMLElement[] = []
+  $: selectedSet = new Set(selected.map(s => s.value))
+
+  async function reactToItems (..._: any[]) {
+    firstactive = items.findIndex(itm => !itm.disabled)
+    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled) - 1
+    hilited = undefined
+
+    if (listboxElement) listboxElement.removeAttribute('aria-activedescendant')
+  }
+  $: void reactToItems(items)
+
+  const selectItem = (item: PopupMenuItem, index: number) => (e: MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    if (item.disabled) return
+    listboxElement.setAttribute('aria-activedescendant', `${listId}-${index}`)
+    hilited = index
     if (multiselect) {
-        if (selectedSet.has(item.value)) {
-            // remove it from selected
-            selected = selected.filter(s => s.value !== item.value);
-        }
-        else {
-            selected = [...selected, item];
-        }
-    }
-    else {
-        selected = [item];
+      if (selectedSet.has(item.value)) {
+        // remove it from selected
+        selected = selected.filter(s => s.value !== item.value)
+      } else {
+        selected = [...selected, item]
+      }
+    } else {
+      selected = [item]
     }
-    dispatch('change', selected);
-};
-function move(idx) {
-    if (items[idx]?.disabled)
-        return;
-    hilited = Math.max(firstactive, Math.min(lastactive, idx));
-    itemelements[hilited].scrollIntoView({ block: 'center' });
-    listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`);
+    dispatch('change', selected)
+  }
+
+  function move (idx: number) {
+    if (items[idx]?.disabled) return
+    hilited = Math.max(firstactive, Math.min(lastactive, idx))
+    itemelements[hilited].scrollIntoView({ block: 'center' })
+    listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`)
     if (!multiselect) {
-        selected = [items[hilited]];
-        dispatch('change', selected);
+      selected = [items[hilited]]
+      dispatch('change', selected)
     }
-}
-function onkeydown(e) {
-    if (modifierKey(e))
-        return;
+  }
+
+  function onkeydown (e: KeyboardEvent) {
+    if (modifierKey(e)) return
     if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        if (items.length < 1)
-            return;
-        let i = (hilited ?? firstactive - 1) + 1;
-        while (items[i]?.disabled)
-            i++;
-        move(i);
-    }
-    else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        if (items.length < 1)
-            return;
-        let i = (hilited ?? lastactive + 1) - 1;
-        while (items[i]?.disabled)
-            i--;
-        move(i);
-    }
-    else if (e.key === ' ') {
-        e.preventDefault();
-        if (items.length < 1)
-            return;
-        if (multiselect) {
-            if (hilited != null) {
-                if (selectedSet.has(items[hilited].value)) {
-                    // remove it from selected
-                    selected = selected.filter(s => s.value !== items[hilited].value);
-                }
-                else {
-                    selected = [...selected, items[hilited]];
-                }
-                dispatch('change', selected);
-            }
+      e.preventDefault()
+      if (items.length < 1) return
+      let i = (hilited ?? firstactive - 1) + 1
+      while (items[i]?.disabled) i++
+      move(i)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      if (items.length < 1) return
+      let i = (hilited ?? lastactive + 1) - 1
+      while (items[i]?.disabled) i--
+      move(i)
+    } else if (e.key === ' ') {
+      e.preventDefault()
+      if (items.length < 1) return
+      if (multiselect) {
+        if (hilited != null) {
+          if (selectedSet.has(items[hilited].value)) {
+            // remove it from selected
+            selected = selected.filter(s => s.value !== items[hilited!].value)
+          } else {
+            selected = [...selected, items[hilited]]
+          }
+          dispatch('change', selected)
         }
+      }
     }
-}
-function focusListbox() {
+  }
+
+  function focusListbox () {
     if (selected.length) {
-        for (let i = 0; i < items.length; i++) {
-            if (items[i].value === selected[0].value) {
-                hilited = i;
-                listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`);
-            }
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].value === selected[0].value) {
+          hilited = i
+          listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`)
         }
+      }
+    } else {
+      hilited = firstactive
+      listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`)
+      if (!multiselect) {
+        selected = [items[hilited]]
+        dispatch('change', selected)
+      }
     }
-    else {
-        hilited = firstactive;
-        listboxElement.setAttribute('aria-activedescendant', `${listId}-${hilited}`);
-        if (!multiselect) {
-            selected = [items[hilited]];
-            dispatch('change', selected);
-        }
-    }
-}
+  }
+
 </script>
 
 <div class="listbox-container" class:valid class:invalid>
@@ -165,5 +159,4 @@ function focusListbox() {
   .listbox-item.disabled {
     color: rgba(0,0,0,0.6);
   }
-
 </style>