@dosgato/dialog 1.2.7 → 1.3.0

package/dist/FieldChoices.svelte

@@ -4,76 +4,83 @@
   flex. Ordering is top down by default but can be order horizontally by toggling `leftToRight`.
   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, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
-import { derivedStore } from '@txstate-mws/svelte-store';
-import { get, isNotBlank, randomid } from 'txstate-utils';
-import Container from './Container.svelte';
-import Checkbox from './Checkbox.svelte';
-import { getDescribedBy } from './helpers';
-let className = '';
-export { className as class };
-export let id = undefined;
-export let path;
-export let label = '';
-export let choices;
-export let defaultValue = [];
-export let conditional = undefined;
-export let maxwidth = 250;
-export let leftToRight = false;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let selectAll = false;
-const store = getContext(FORM_CONTEXT);
-const inheritedPath = getContext(FORM_INHERITED_PATH);
-const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-const valStore = store.getField(finalPath);
-const currentWidth = derivedStore(store, 'width');
-$: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices.length);
-let orders;
-let width = '100%';
-function redoLayout(..._) {
-    width = `${100 / cols}%`;
-    const rows = Math.ceil(choices.length / cols);
-    orders = choices.map((_, i) => leftToRight ? i : Math.floor((i + 1) / cols) + rows * (i % cols));
-}
-$: redoLayout(choices, cols);
-function onChangeCheckbox(setVal, choice, included) {
+<script lang="ts">
+  import { getContext, onMount } 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 Container from './Container.svelte'
+  import Checkbox from './Checkbox.svelte'
+  import { getDescribedBy } from './helpers'
+
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let choices: { label?: string, value: any, disabled?: boolean }[]
+  export let defaultValue: any = []
+  export let conditional: boolean | undefined = undefined
+  export let maxwidth = 250
+  export let leftToRight = false
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let selectAll: boolean = false
+
+  const store = getContext<FormStore>(FORM_CONTEXT)
+  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
+  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+  const valStore = store.getField<any[]>(finalPath)
+  const currentWidth = derivedStore(store, 'width')
+  $: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices.length)
+
+  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))
+  }
+  $: redoLayout(choices, cols)
+
+  function onChangeCheckbox (setVal: (val: any) => void, choice: typeof choices[number], included: boolean) {
     setVal(v => {
-        if (v == null)
-            return included ? [] : [choice.value];
-        if (included)
-            return v.filter(s => s !== choice.value);
-        else
-            return [...v, choice.value];
-    });
-}
-$: selected = new Set($valStore ?? []);
-let selectAllElement;
-const selectAllId = randomid();
-$: selectAllChecked = choices.every(choice => choice.disabled || selected.has(choice.value));
-function selectAllChanged() {
+      if (v == null) return included ? [] : [choice.value]
+      if (included) return v.filter(s => s !== choice.value)
+      else return [...v, choice.value]
+    })
+  }
+
+  $: selected = new Set($valStore ?? [])
+
+  let selectAllElement: HTMLInputElement | undefined
+  const selectAllId = randomid()
+
+  $: selectAllChecked = choices.every(choice => choice.disabled || selected.has(choice.value))
+
+  function selectAllChanged () {
     if (selectAllChecked) {
-        // it was checked and is now unchecked, clear it out
-        void store.setField(finalPath, []);
+      // it was checked and is now unchecked, clear it out
+      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))
     }
-    else {
-        // it was not checked and now it is checked
-        void store.setField(finalPath, choices.filter(choice => !choice.disabled).map(choice => choice.value));
-    }
-}
-const descid = randomid();
-function reactToChoices(..._) {
-    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);
+  }
+
+  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 let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
@@ -116,5 +123,4 @@ onMount(reactToChoices);
   label :global(input[type="checkbox"]) {
     transform: none;
   }
-
 </style>

package/dist/FieldChooserLink.svelte

@@ -1,165 +1,164 @@
-<script>import arrowClockwiseFill from '@iconify-icons/ph/arrow-clockwise-fill';
-import deleteOutline from '@iconify-icons/mdi/delete-outline';
-import xCircle from '@iconify-icons/ph/x-circle';
-import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
-import { getContext } from 'svelte';
-import { isBlank, isNotBlank, randomid } from 'txstate-utils';
-import { Chooser, ChooserStore, CHOOSER_API_CONTEXT, cleanUrl } from './chooser';
-import Details from './chooser/Details.svelte';
-import Thumbnail from './chooser/Thumbnail.svelte';
-import { getDescribedBy, FieldStandard, InlineMessage, Icon } from './';
-export let id = undefined;
-export let path;
-export let label = '';
-export let defaultValue = undefined;
-export let conditional = undefined;
-export let required = false;
-export let images = false;
-export let pages = false;
-export let assets = images;
-export let folders = false;
-export let urlEntry = false;
-export let initialSource = undefined;
-export let initialPath = undefined;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let selectedAsset = undefined;
-// TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
-// choosing unacceptable mime types
-const formStore = getContext(FORM_CONTEXT);
-const inheritedPath = getContext(FORM_INHERITED_PATH);
-const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-const value = formStore.getField(finalPath);
-const chooserClient = getContext(CHOOSER_API_CONTEXT);
-const store = new ChooserStore(chooserClient);
-let urlEntryInput;
-const descid = randomid();
-let modalshown = false;
-async function show() {
-    if (selectedAsset && selectedAsset.type !== 'raw' && selectedAsset.type !== 'broken')
-        store.setPreview(selectedAsset);
-    modalshown = true;
-}
-function hide() {
-    modalshown = false;
-}
-function onChange(setVal) {
+<script lang="ts">
+  import arrowClockwiseFill from '@iconify-icons/ph/arrow-clockwise-fill'
+  import deleteOutline from '@iconify-icons/mdi/delete-outline'
+  import xCircle from '@iconify-icons/ph/x-circle'
+  import { FORM_CONTEXT, FORM_INHERITED_PATH, type FormStore } from '@txstate-mws/svelte-forms'
+  import { getContext } from 'svelte'
+  import { isBlank, isNotBlank, randomid } from 'txstate-utils'
+  import { Chooser, ChooserStore, CHOOSER_API_CONTEXT, cleanUrl, type BrokenURL, type RawURL } from './chooser'
+  import type { AnyItem, Client } from './chooser/ChooserAPI'
+  import Details from './chooser/Details.svelte'
+  import Thumbnail from './chooser/Thumbnail.svelte'
+  import { getDescribedBy, FieldStandard, InlineMessage, Icon } from './'
+
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let defaultValue: boolean | undefined = undefined
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let images = false
+  export let pages = false
+  export let assets = images
+  export let folders = false
+  export let urlEntry = false
+  export let initialSource: string | undefined = undefined
+  export let initialPath: string | undefined = undefined
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let selectedAsset: AnyItem | RawURL | BrokenURL | undefined = undefined
+
+  // TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
+  // choosing unacceptable mime types
+
+  const formStore = getContext<FormStore>(FORM_CONTEXT)
+  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
+  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+  const value = formStore.getField<string>(finalPath)
+  const chooserClient = getContext<Client>(CHOOSER_API_CONTEXT)
+  const store = new ChooserStore(chooserClient)
+  let urlEntryInput: HTMLInputElement | undefined
+
+  const descid = randomid()
+  let modalshown = false
+  async function show () {
+    if (selectedAsset && selectedAsset.type !== 'raw' && selectedAsset.type !== 'broken') store.setPreview(selectedAsset)
+    modalshown = true
+  }
+  function hide () {
+    modalshown = false
+  }
+  function onChange (setVal: any) {
     return (e) => {
-        selectedAsset = e.detail;
-        setVal(selectedAsset?.id);
-        hide();
-    };
-}
-function clearUrlEntry() {
-    urlEntryInput.value = '';
-    urlEntryInput.dispatchEvent(new InputEvent('input'));
-}
-let timer;
-function userUrlEntry() {
-    clearTimeout(timer);
-    timer = setTimeout(userUrlEntryDebounced.bind(this), 300);
-}
-async function userUrlEntryDebounced() {
-    const url = this.value;
-    const cleanedUrl = cleanUrl(url);
-    store.clearPreview();
+      selectedAsset = e.detail
+      setVal(selectedAsset?.id)
+      hide()
+    }
+  }
+  function clearUrlEntry () {
+    urlEntryInput!.value = ''
+    urlEntryInput!.dispatchEvent(new InputEvent('input'))
+  }
+
+  let timer: ReturnType<typeof setTimeout>
+  function userUrlEntry () {
+    clearTimeout(timer)
+    timer = setTimeout(userUrlEntryDebounced.bind(this), 300)
+  }
+
+  async function userUrlEntryDebounced () {
+    const url = this.value
+    const cleanedUrl = cleanUrl(url)
+    store.clearPreview()
     if (isBlank(url)) {
-        selectedAsset = undefined;
-        void formStore.setField(finalPath, undefined);
-        return;
+      selectedAsset = undefined
+      void formStore.setField(finalPath, undefined)
+      return
     }
-    let found = false;
+    let found = false
     if (chooserClient.findByUrl) {
-        let item = await chooserClient.findByUrl(url);
-        if (!item && isNotBlank(cleanedUrl))
-            item = await chooserClient.findByUrl(cleanedUrl);
-        if (url !== this.value)
-            return;
-        if (item) {
-            found = true;
-            if ((item.type === 'page' && !pages) || // they typed the URL for a page but we don't allow pages right now
-                (item.type === 'folder' && !folders) || // they typed the URL for an asset folder but not allowed
-                (item.type === 'asset' && !assets) || // they typed the URL for an asset but not allowed
-                (item.type === 'asset' && !item.image && images) // they typed the URL for a non-image asset but we only want images
-            ) {
-                // they entered something that is recognized but not allowed
-                // they can keep the typing they've done, but the id must be 'undefined' so that nothing
-                // is entered into the form data
-                selectedAsset = {
-                    type: 'raw',
-                    id: undefined,
-                    url
-                };
-            }
-            else {
-                selectedAsset = { ...item, url };
-            }
+      let item = await chooserClient.findByUrl(url)
+      if (!item && isNotBlank(cleanedUrl)) item = await chooserClient.findByUrl(cleanedUrl)
+      if (url !== this.value) return
+      if (item) {
+        found = true
+        if (
+          (item.type === 'page' && !pages) || // they typed the URL for a page but we don't allow pages right now
+          (item.type === 'folder' && !folders) || // they typed the URL for an asset folder but not allowed
+          (item.type === 'asset' && !assets) || // they typed the URL for an asset but not allowed
+          (item.type === 'asset' && !item.image && images) // they typed the URL for a non-image asset but we only want images
+        ) {
+          // they entered something that is recognized but not allowed
+          // they can keep the typing they've done, but the id must be 'undefined' so that nothing
+          // is entered into the form data
+          selectedAsset = {
+            type: 'raw',
+            id: undefined,
+            url
+          }
+        } else {
+          selectedAsset = { ...item, url } as any
         }
+      }
     }
     if (!found) {
-        if (urlToValueCache[url]) {
-            selectedAsset = { type: 'raw', id: urlToValueCache[url], url };
-        }
-        else {
-            if (isBlank(cleanedUrl) || cleanedUrl.startsWith('/')) {
-                // here we "select" a raw url so that we do not interrupt the users' typing, but
-                // we set its id to 'undefined' so that nothing makes it into the form until it's
-                // a valid URL
-                selectedAsset = { type: 'raw', id: undefined, url };
-            }
-            else {
-                selectedAsset = {
-                    type: 'raw',
-                    id: chooserClient.urlToValue?.(cleanedUrl) ?? cleanedUrl,
-                    url
-                };
-            }
+      if (urlToValueCache[url]) {
+        selectedAsset = { type: 'raw', id: urlToValueCache[url], url }
+      } else {
+        if (isBlank(cleanedUrl) || cleanedUrl.startsWith('/')) {
+          // here we "select" a raw url so that we do not interrupt the users' typing, but
+          // we set its id to 'undefined' so that nothing makes it into the form until it's
+          // a valid URL
+          selectedAsset = { type: 'raw', id: undefined, url }
+        } else {
+          selectedAsset = {
+            type: 'raw',
+            id: chooserClient.urlToValue?.(cleanedUrl) ?? cleanedUrl,
+            url
+          }
         }
+      }
     }
-    void formStore.setField(finalPath, selectedAsset?.id);
-    formStore.dirtyField(finalPath);
-}
-const urlToValueCache = {};
-async function updateSelected(..._) {
+    void formStore.setField(finalPath, selectedAsset?.id)
+  }
+
+  const urlToValueCache: Record<string, string> = {}
+  async function updateSelected (..._: any) {
     if (selectedAsset?.id !== $value) {
-        if (!$value) {
-            selectedAsset = undefined;
-            return;
-        }
-        const valueBeforeFind = $value;
-        const asset = await chooserClient.findById($value);
-        if ($value !== valueBeforeFind)
-            return;
-        selectedAsset = asset;
-        try {
-            if (!selectedAsset) {
-                const urlFromValue = chooserClient.valueToUrl?.($value) ?? $value;
-                const cleanedUrlFromValue = cleanUrl(urlFromValue);
-                if (isBlank(cleanedUrlFromValue)) {
-                    selectedAsset = undefined;
-                }
-                else if (cleanedUrlFromValue.startsWith('/')) {
-                    selectedAsset = { type: 'broken', id: $value, url: cleanedUrlFromValue };
-                }
-                else {
-                    selectedAsset = { type: 'raw', id: $value, url: cleanedUrlFromValue };
-                }
-            }
-            if (selectedAsset) {
-                urlToValueCache[selectedAsset.url] = $value;
-                if (selectedAsset.type !== 'raw' && selectedAsset.type !== 'broken') {
-                    initialPath = selectedAsset.path ?? initialPath;
-                    initialSource = selectedAsset.source ?? initialSource;
-                }
-            }
+      if (!$value) {
+        selectedAsset = undefined
+        return
+      }
+      const valueBeforeFind = $value
+      const asset = await chooserClient.findById($value)
+      if ($value !== valueBeforeFind) return
+      selectedAsset = asset
+      try {
+        if (!selectedAsset) {
+          const urlFromValue = chooserClient.valueToUrl?.($value) ?? $value
+          const cleanedUrlFromValue = cleanUrl(urlFromValue)
+          if (isBlank(cleanedUrlFromValue)) {
+            selectedAsset = undefined
+          } else if (cleanedUrlFromValue.startsWith('/')) {
+            selectedAsset = { type: 'broken', id: $value, url: cleanedUrlFromValue }
+          } else {
+            selectedAsset = { type: 'raw', id: $value, url: cleanedUrlFromValue }
+          }
         }
-        catch (e) {
-            console.error(e);
+        if (selectedAsset) {
+          urlToValueCache[selectedAsset.url] = $value
+          if (selectedAsset.type !== 'raw' && selectedAsset.type !== 'broken') {
+            initialPath = selectedAsset.path ?? initialPath
+            initialSource = selectedAsset.source ?? initialSource
+          }
         }
+      } catch (e: any) {
+        console.error(e)
+      }
     }
-}
-$: void updateSelected($value);
+  }
+  $: void updateSelected($value)
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {related} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
@@ -282,5 +281,4 @@ $: void updateSelected($value);
   :global([data-eq~="400px"] .dialog-chooser-container .dialog-chooser-thumbnail img) {
     object-position: left;
   }
-
 </style>

package/dist/FieldDate.svelte

@@ -1,21 +1,22 @@
-<script>import { dateSerialize, dateDeserialize } from '@txstate-mws/svelte-forms';
-import FieldStandard from './FieldStandard.svelte';
-import Input from './Input.svelte';
-let className = '';
-export { className as class };
-export let id = undefined;
-export let path;
-export let label = '';
-export let defaultValue = undefined;
-export let min = undefined;
-export let max = undefined;
-export let step = undefined;
-export let conditional = undefined;
-export let required = false;
-export let inputelement = undefined;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
+<script lang="ts">
+  import { dateSerialize, dateDeserialize } from '@txstate-mws/svelte-forms'
+  import FieldStandard from './FieldStandard.svelte'
+  import Input from './Input.svelte'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let defaultValue: any = undefined
+  export let min: Date | { toJSDate: () => Date } | undefined = undefined
+  export let max: Date | { toJSDate: () => Date } | undefined = undefined
+  export let step: number | undefined = undefined
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let inputelement: HTMLInputElement = undefined as any
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>

package/dist/FieldDateTime.svelte

@@ -1,39 +1,41 @@
-<script>import { datetimeSerialize, datetimeDeserialize } from '@txstate-mws/svelte-forms';
-import FieldStandard from './FieldStandard.svelte';
-import Input from './Input.svelte';
-import { createEventDispatcher } from 'svelte';
-let className = '';
-export { className as class };
-export let id = undefined;
-export let path;
-export let label = '';
-export let defaultValue = undefined;
-export let min = undefined;
-export let max = undefined;
-export let step = undefined;
-export let conditional = undefined;
-export let required = false;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let inputelement = undefined;
-const dispatch = createEventDispatcher();
-function onChange(setVal) {
+<script lang="ts">
+  import { datetimeSerialize, datetimeDeserialize } from '@txstate-mws/svelte-forms'
+  import FieldStandard from './FieldStandard.svelte'
+  import Input from './Input.svelte'
+  import { createEventDispatcher } from 'svelte'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let defaultValue: any = undefined
+  export let min: Date | { toJSDate: () => Date } | undefined = undefined
+  export let max: Date | { toJSDate: () => Date } | undefined = undefined
+  export let step: number | undefined = undefined
+  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
+  export let inputelement: HTMLInputElement = undefined!
+
+  const dispatch = createEventDispatcher()
+
+  function onChange (setVal) {
     return () => {
-        if (inputelement) {
-            const date = new Date(inputelement.value);
-            const invalid = inputelement.validity.badInput || !(date instanceof Date && !isNaN(date.valueOf()));
-            if (invalid) {
-                setVal(undefined);
-                dispatch('change', undefined);
-            }
-            else {
-                setVal(datetimeDeserialize(inputelement.value));
-                dispatch('change', datetimeDeserialize(inputelement.value));
-            }
+      if (inputelement) {
+        const date = new Date(inputelement.value)
+        const invalid = inputelement.validity.badInput || !(date instanceof Date && !isNaN(date.valueOf()))
+        if (invalid) {
+          setVal(undefined)
+          dispatch('change', undefined)
+        } else {
+          setVal(datetimeDeserialize(inputelement.value))
+          dispatch('change', datetimeDeserialize(inputelement.value))
         }
-    };
-}
+      }
+    }
+  }
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:helptextid let:messagesid let:setVal>