@dosgato/dialog 1.2.7 → 1.3.0

package/dist/MaxLength.svelte

@@ -1,22 +1,24 @@
-<script>export let maxlength;
-export let value;
-let overLimit = false;
-$: message = getMaxlengthMessage(value.length);
-function getMaxlengthMessage(length) {
-    overLimit = false;
+<script lang="ts">
+  export let maxlength: number
+  export let value: string
+
+  let overLimit = false
+
+  $: message = getMaxlengthMessage(value.length)
+
+  function getMaxlengthMessage (length: number) {
+    overLimit = false
     if (length === 0) {
-        return `${maxlength} characters allowed`;
-    }
-    else if (length <= maxlength) {
-        const diff = maxlength - length;
-        return `${diff} character${diff === 1 ? '' : 's'} remaining`;
+      return `${maxlength} characters allowed`
+    } else if (length <= maxlength) {
+      const diff = maxlength - length
+      return `${diff} character${diff === 1 ? '' : 's'} remaining`
+    } else {
+      overLimit = true
+      const diff = length - maxlength
+      return `${diff} character${diff === 1 ? '' : 's'} over limit`
     }
-    else {
-        overLimit = true;
-        const diff = length - maxlength;
-        return `${diff} character${diff === 1 ? '' : 's'} over limit`;
-    }
-}
+  }
 </script>
 
 <div class:over={overLimit} aria-live="polite">{message}</div>
@@ -32,5 +34,4 @@ function getMaxlengthMessage(length) {
     color: #9a3332;
     font-weight: bold;
   }
-
 </style>

package/dist/Radio.svelte

@@ -1,17 +1,21 @@
-<script>import { isNotBlank } from 'txstate-utils';
-export let id = undefined;
-export let name;
-export let value;
-export let selected = false;
-export let onChange = undefined;
-export let onBlur = undefined;
-export let messagesid = undefined;
-export let helptextid = undefined;
-export let extradescid = undefined;
-export let disabled = false;
-export let valid = false;
-export let invalid = false;
-$: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ');
+<script lang="ts">
+  import { isNotBlank } from 'txstate-utils'
+
+
+  export let id: string | undefined = undefined
+  export let name: string
+  export let value: string
+  export let selected = false
+  export let onChange: any = undefined
+  export let onBlur: any = undefined
+  export let messagesid: string | undefined = undefined
+  export let helptextid: string | undefined = undefined
+  export let extradescid: string | undefined = undefined
+  export let disabled = false
+  export let valid = false
+  export let invalid = false
+
+  $: descby = [messagesid, helptextid, extradescid].filter(isNotBlank).join(' ')
 </script>
 
 <input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={descby} {value} on:change={onChange} on:blur={onBlur}>
@@ -66,5 +70,4 @@ input[type="radio"]:disabled {
   color: var(--dialog-checkbox-color);
   cursor: not-allowed;
 }
-
 </style>

package/dist/Switcher.svelte

@@ -1,35 +1,40 @@
-<script>import { eq } from '@txstate-mws/svelte-components';
-import { Store } from '@txstate-mws/svelte-store';
-import { createEventDispatcher } from 'svelte';
-import { randomid } from 'txstate-utils';
-import Container from './Container.svelte';
-import Radio from './Radio.svelte';
-let className = '';
-export { className as class };
-export let id = randomid();
-export let path = '';
-export let name = randomid();
-export let choices;
-export let horizontal = false;
-export let label;
-export let required = false;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let messages = [];
-export let iptValue = choices[0].value;
-export let valid = false;
-export let invalid = false;
-export let onBlur = undefined;
-const dispatch = createEventDispatcher();
-const store = new Store({ width: 1000 });
-const groupid = randomid();
-function onChange(e) {
-    iptValue = this.value;
-    dispatch('change', iptValue);
-}
-$: columns = Math.floor($store.width / 250);
-$: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 && columns === 3 ? 2 : columns) : 100) + '%';
+<script lang="ts">
+  import { eq } from '@txstate-mws/svelte-components'
+  import type { Feedback } from '@txstate-mws/svelte-forms'
+  import { Store } from '@txstate-mws/svelte-store'
+  import { createEventDispatcher } from 'svelte'
+  import { randomid } from 'txstate-utils'
+  import Container from './Container.svelte'
+  import Radio from './Radio.svelte'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = randomid()
+  export let path: string = ''
+  export let name = randomid()
+  export let choices: { label?: string, value: string, disabled?: boolean }[]
+  export let horizontal = false
+  export let label: string
+  export let required = false
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let messages: Feedback[] = []
+  export let iptValue = choices[0].value
+  export let valid = false
+  export let invalid = false
+  export let onBlur: (() => void | Promise<void>) | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+  const store = new Store({ width: 1000 })
+
+  const groupid = randomid()
+  function onChange (e: InputEvent) {
+    iptValue = this.value
+    dispatch('change', iptValue)
+  }
+
+  $: columns = Math.floor($store.width / 250)
+  $: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 && columns === 3 ? 2 : columns) : 100) + '%'
 </script>
 <Container {path} {id} {label} {messages} descid={groupid} {required} {related} {helptext} let:helptextid>
   <div class="dialog-radio {className}" use:eq={{ store }} class:horizontal role="radiogroup" aria-labelledby={groupid} class:valid class:invalid>
@@ -66,5 +71,4 @@ $: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 &&
     display: flex;
     flex-wrap: wrap;
   }
-
 </style>

package/dist/Tab.svelte

@@ -1,23 +1,26 @@
-<script>import warningCircleFill from '@iconify-icons/ph/warning-circle-fill';
-import { derivedStore } from '@txstate-mws/svelte-store';
-import { getContext, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import Icon from './Icon.svelte';
-import { TAB_CONTEXT, TAB_NAME_CONTEXT } from './TabStore';
-export let name;
-const { store, onClick, onKeyDown, tabelements } = getContext(TAB_CONTEXT);
-const accordion = store.accordion();
-const current = store.currentName();
-const def = derivedStore(store, v => v.tabs.find(t => t.name === name));
-const title = derivedStore(def, 'title');
-const tabid = derivedStore(store, v => v.tabids[name]);
-const panelid = derivedStore(store, v => v.panelids[name]);
-$: active = $current === name;
-const idx = $store.tabs.findIndex(t => t.name === name);
-const last = idx === $store.tabs.length - 1;
-const tabNameStore = writable(name);
-$: $tabNameStore = name;
-setContext(TAB_NAME_CONTEXT, tabNameStore);
+<script lang="ts">
+  import warningCircleFill from '@iconify-icons/ph/warning-circle-fill'
+  import { derivedStore } from '@txstate-mws/svelte-store'
+  import { getContext, setContext } from 'svelte'
+  import { writable } from 'svelte/store'
+  import Icon from './Icon.svelte'
+  import { type TabStore, TAB_CONTEXT, TAB_NAME_CONTEXT } from './TabStore'
+
+  export let name: string
+
+  const { store, onClick, onKeyDown, tabelements } = getContext<{ store: TabStore, onClick: (idx: number) => (() => void), onKeyDown: (idx: number) => (() => void), tabelements: HTMLElement[] }>(TAB_CONTEXT)
+  const accordion = store.accordion()
+  const current = store.currentName()
+  const def = derivedStore(store, v => v.tabs.find(t => t.name === name))
+  const title = derivedStore(def, 'title')
+  const tabid = derivedStore(store, v => v.tabids[name])
+  const panelid = derivedStore(store, v => v.panelids[name])
+  $: active = $current === name
+  const idx = $store.tabs.findIndex(t => t.name === name)
+  const last = idx === $store.tabs.length - 1
+  const tabNameStore = writable(name)
+  $: $tabNameStore = name
+  setContext(TAB_NAME_CONTEXT, tabNameStore)
 </script>
 
 {#if $store.tabs.length > 1}
@@ -77,5 +80,4 @@ setContext(TAB_NAME_CONTEXT, tabNameStore);
     margin-left: 0.4em;
   }
 
-
 </style>

package/dist/Tabs.svelte

@@ -1,114 +1,116 @@
-<script>import caretRightFill from '@iconify-icons/ph/caret-right-fill';
-import warningCircleFill from '@iconify-icons/ph/warning-circle-fill';
-import { modifierKey, resize, offset, PopupMenu } from '@txstate-mws/svelte-components';
-import { Store } from '@txstate-mws/svelte-store';
-import { getContext, onMount, setContext, tick } from 'svelte';
-import { roundTo } from 'txstate-utils';
-import { DIALOG_TABS_CONTEXT } from './Dialog.svelte';
-import Icon from './Icon.svelte';
-import { TabStore, TAB_CONTEXT } from './TabStore';
-export let tabs;
-export let active = undefined;
-export let store = new TabStore(tabs, active);
-export let disableDialogControl = false;
-export let accordionOnMobile = false;
-/**
- * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
- * displayed at that width.
- */
-export let columnsShown = undefined;
-$: store.update(v => ({ ...v, tabs, accordionOnMobile }));
-const activeStore = new Store({});
-const tabelements = [];
-let tabOverflowButton;
-let activeelement;
-let hiddenTabs = [];
-setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
-const dialogContext = (disableDialogControl ? undefined : getContext(DIALOG_TABS_CONTEXT)) ?? { change: () => { } };
-dialogContext.onNext = () => { store.right(); };
-dialogContext.onPrev = () => { store.left(); };
-$: dialogContext.prevTitle = $store.prevTitle;
-$: dialogContext.nextTitle = $store.nextTitle;
-$: dialogContext.hasRequired = $store.requireNext;
-$: dialogContext.change($store);
-if (!disableDialogControl)
-    setContext(DIALOG_TABS_CONTEXT, { change: () => { } }); // reset context so that any sub-tabs do NOT control the Dialog component
-const currentName = store.currentName();
-const currentIdx = store.currentIdx();
-const accordion = store.accordion();
-$: cols = (typeof columnsShown === 'function') ? columnsShown($store.clientWidth ?? 1024) : Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length);
-$: scalefactor = Math.min(roundTo(($store.clientWidth ?? 1024) / (cols * 130), 4), 1);
-$: wrapping = cols !== $store.tabs.length;
-$: dialogContext.hasTabs = !$accordion;
-function onClick(idx) {
-    return () => store.activate(idx);
-}
-function onKeyDown(idx) {
+<script lang="ts">
+  import caretRightFill from '@iconify-icons/ph/caret-right-fill'
+  import warningCircleFill from '@iconify-icons/ph/warning-circle-fill'
+  import { type ElementOffsets, modifierKey, resize, offset, PopupMenu } from '@txstate-mws/svelte-components'
+  import { Store } from '@txstate-mws/svelte-store'
+  import { getContext, onMount, setContext, tick } from 'svelte'
+  import { roundTo } from 'txstate-utils'
+  import { DIALOG_TABS_CONTEXT, type DialogTabContext } from './Dialog.svelte'
+  import Icon from './Icon.svelte'
+  import { TabStore, TAB_CONTEXT, type TabDef } from './TabStore'
+
+  export let tabs: TabDef[]
+  export let active: string | undefined = undefined
+  export let store = new TabStore(tabs, active)
+  export let disableDialogControl = false
+  export let accordionOnMobile = false
+  /**
+   * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
+   * displayed at that width.
+   */
+  export let columnsShown: ((tabsWidth: number) => number) | undefined = undefined
+  $: store.update(v => ({ ...v, tabs, accordionOnMobile }))
+
+  const activeStore = new Store<ElementOffsets>({})
+  const tabelements: HTMLElement[] = []
+  let tabOverflowButton: HTMLButtonElement
+  let activeelement: HTMLElement
+  let hiddenTabs: TabDef[] = []
+  setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements })
+
+  const dialogContext = (disableDialogControl ? undefined : getContext<DialogTabContext>(DIALOG_TABS_CONTEXT)) ?? { change: () => {} }
+  dialogContext.onNext = () => { store.right() }
+  dialogContext.onPrev = () => { store.left() }
+  $: dialogContext.prevTitle = $store.prevTitle
+  $: dialogContext.nextTitle = $store.nextTitle
+  $: dialogContext.hasRequired = $store.requireNext
+  $: dialogContext.change($store)
+  if (!disableDialogControl) setContext(DIALOG_TABS_CONTEXT, { change: () => {} }) // reset context so that any sub-tabs do NOT control the Dialog component
+
+  const currentName = store.currentName()
+  const currentIdx = store.currentIdx()
+  const accordion = store.accordion()
+  $: cols = (typeof columnsShown === 'function') ? columnsShown($store.clientWidth ?? 1024) : Math.min(Math.floor(($store.clientWidth ?? 1024) / 90), $store.tabs.length)
+  $: scalefactor = Math.min(roundTo(($store.clientWidth ?? 1024) / (cols * 130), 4), 1)
+  $: wrapping = cols !== $store.tabs.length
+  $: dialogContext.hasTabs = !$accordion
+
+  function onClick (idx: number) {
+    return () => store.activate(idx)
+  }
+  function onKeyDown (idx: number) {
     return async (e) => {
-        if (modifierKey(e))
-            return;
-        if (['Enter', ' ', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        if (e.key === 'Enter' || e.key === ' ') {
-            store.activate(idx);
-        }
-        else if (e.key === 'ArrowLeft' && $store.current > 0) {
-            store.left();
-            await tick();
-            tabelements[$store.current].focus();
-        }
-        else if (e.key === 'ArrowRight' && $store.current < $store.tabs.length - 1) {
-            store.right();
-            await tick();
-            tabelements[$store.current].focus();
-        }
-        else if (e.key === 'Home' && $store.current > 0) {
-            store.home();
-            await tick();
-            tabelements[$store.current].focus();
-        }
-        else if (e.key === 'End' && $store.current < $store.tabs.length - 1) {
-            store.end();
-            await tick();
-            tabelements[$store.current].focus();
-        }
-    };
-}
-function isActive(idx, activeidx) {
-    return idx === (activeidx ?? 0);
-}
-function onOverflowChange(e) {
-    store.activateName(e.detail.value);
-}
-function tabIsHidden(index) {
-    if (!wrapping)
-        return false;
-    const left = Math.max($currentIdx - cols + 1, 0);
-    const right = Math.min(left + cols - 1);
+      if (modifierKey(e)) return
+      if (['Enter', ' ', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        store.activate(idx)
+      } else if (e.key === 'ArrowLeft' && $store.current > 0) {
+        store.left()
+        await tick()
+        tabelements[$store.current].focus()
+      } else if (e.key === 'ArrowRight' && $store.current < $store.tabs.length - 1) {
+        store.right()
+        await tick()
+        tabelements[$store.current].focus()
+      } else if (e.key === 'Home' && $store.current > 0) {
+        store.home()
+        await tick()
+        tabelements[$store.current].focus()
+      } else if (e.key === 'End' && $store.current < $store.tabs.length - 1) {
+        store.end()
+        await tick()
+        tabelements[$store.current].focus()
+      }
+    }
+  }
+
+  function isActive (idx, activeidx) {
+    return idx === (activeidx ?? 0)
+  }
+
+  function onOverflowChange (e: any) {
+    store.activateName(e.detail.value)
+  }
+
+  function tabIsHidden (index: number) {
+    if (!wrapping) return false
+    const left = Math.max($currentIdx - cols + 1, 0)
+    const right = Math.min(left + cols - 1)
     // return (index !== $currentIdx && index >= cols) || (index === cols - 1 && $currentIdx > cols - 1)
-    return (index !== $currentIdx) && ((index < left) || (index > right));
-}
-const activeOversize = 2;
-async function reactToCurrent(..._) {
-    if (!activeelement)
-        return;
-    const tabelement = tabelements[$currentIdx];
-    if (!tabelement)
-        return;
-    const span = tabelement.querySelector(':scope > span');
-    if (!span)
-        return;
-    const left = span.offsetLeft - activeelement.offsetLeft - activeOversize;
-    const width = span.offsetWidth + (activeOversize * 2);
-    activeelement.style.transform = `translateX(${left}px)`;
-    activeelement.style.width = `${width}px`;
-    hiddenTabs = $store.tabs.filter((tab, idx) => { return tabIsHidden(idx); });
-}
-$: active = $currentName;
-$: void reactToCurrent($activeStore);
-onMount(reactToCurrent);
+    return (index !== $currentIdx) && ((index < left) || (index > right))
+  }
+
+  const activeOversize = 2
+  async function reactToCurrent (..._: any) {
+    if (!activeelement) return
+    const tabelement = tabelements[$currentIdx]
+    if (!tabelement) return
+    const span = tabelement.querySelector(':scope > span') as HTMLSpanElement
+    if (!span) return
+    const left = span.offsetLeft - activeelement.offsetLeft - activeOversize
+    const width = span.offsetWidth + (activeOversize * 2)
+    activeelement.style.transform = `translateX(${left}px)`
+    activeelement.style.width = `${width}px`
+    hiddenTabs = $store.tabs.filter((tab, idx) => { return tabIsHidden(idx) })
+  }
+
+  $: active = $currentName
+  $: void reactToCurrent($activeStore)
+  onMount(reactToCurrent)
+
 </script>
 
 {#if $store.tabs.length > 1}
@@ -208,5 +210,4 @@ onMount(reactToCurrent);
     bottom: -3px;
     border-radius: 2px;
   }
-
 </style>

package/dist/Tooltip.svelte

@@ -1,9 +1,10 @@
-<script>export let tip = undefined;
-export let top = false;
-export let right = false;
-export let bottom = false;
-export let left = false;
-export let active = false;
+<script lang="ts">
+  export let tip: string | undefined = undefined
+  export let top: boolean = false
+  export let right: boolean = false
+  export let bottom: boolean = false
+  export let left: boolean = false
+  export let active: boolean = false
 </script>
 
 <style>
@@ -35,7 +36,6 @@ export let active = false;
     border: 1px solid #000;
     background-color: #fff;
   }
-
 </style>
 
 {#if tip}