@dosgato/dialog 1.2.8 → 1.3.0

package/dist/colorpicker/FieldColorPicker.svelte

@@ -1,35 +1,37 @@
-<script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
-import { getContext, onMount } from 'svelte';
-import { get, isNotBlank, randomid, shouldUseWhiteText } from 'txstate-utils';
-import { Radio } from '..';
-import FieldStandard from '../FieldStandard.svelte';
-export let id = undefined;
-let className = '';
-export { className as class };
-export let path;
-export let options;
-export let addAllOption = false;
-export let label = '';
-export let required = false;
-export let notNull = false;
-export let defaultValue = notNull ? (addAllOption ? 'alternating' : options[0].value) : undefined;
-export let conditional = undefined;
-export let helptext = undefined;
-const groupid = randomid();
-const store = getContext(FORM_CONTEXT);
-const inheritedPath = getContext(FORM_INHERITED_PATH);
-const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-async function reactToOptions(..._) {
-    const val = get($store.data, finalPath);
-    if (!val)
-        return;
-    if (!options.length)
-        await store.setField(finalPath, addAllOption ? 'alternating' : undefined);
-    else if (val !== 'alternating' && !options.some(o => o.value === val))
-        await store.setField(finalPath, notNull ? options[0].value : (addAllOption ? 'alternating' : undefined));
-}
-$: reactToOptions(options).catch(console.error);
-onMount(reactToOptions);
+<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 { Radio } from '..'
+  import FieldStandard from '../FieldStandard.svelte'
+  import type { ColorPickerOption } from './colorpicker'
+
+  export let id: string | undefined = undefined
+  let className = ''
+  export { className as class }
+  export let path: string
+  export let options: ColorPickerOption[]
+  export let addAllOption: boolean = false
+  export let label: string = ''
+  export let required = false
+  export let notNull = false
+  export let defaultValue: any = notNull ? (addAllOption ? 'alternating' : options[0].value) : 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)
+    else if (val !== 'alternating' && !options.some(o => o.value === val)) await store.setField(finalPath, notNull ? options[0].value : (addAllOption ? 'alternating' : undefined))
+  }
+  $: reactToOptions(options).catch(console.error)
+  onMount(reactToOptions)
 </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>
@@ -37,7 +39,7 @@ onMount(reactToOptions);
     <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
       {#if addAllOption}
         <label for={`${groupid}.alt`} class="colorsel alternating">
-          <Radio id={`${groupid}.alt`} name={groupid} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
+          <Radio id={`${groupid}.alt`} name={groupid} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid} {messagesid} />
           <span class="alternating-bg">
             {#each options as option (option.value)}
               <span style:background-color={option.color}></span>
@@ -49,7 +51,7 @@ onMount(reactToOptions);
       {#each options as option, idx (option.value) }
         {@const radioid = `${groupid}.${idx}`}
         <label for={radioid} class="colorsel">
-          <Radio id={radioid} name={groupid} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
+          <Radio id={radioid} name={groupid} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid} {messagesid} />
           <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
         </label>
       {/each}
@@ -137,5 +139,4 @@ onMount(reactToOptions);
     color: white;
     text-shadow: 1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222;
   }
-
 </style>

package/dist/cropper/FieldCropper.svelte

@@ -1,151 +1,153 @@
-<script>import { resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { onMount, tick } from 'svelte';
-import { isNotBlank, randomid } from 'txstate-utils';
-import FieldStandard from '../FieldStandard.svelte';
-import { CropperStore } from './cropper';
-import { Button } from '..';
-import arrowsOutIcon from '@iconify-icons/ph/arrows-out-fill';
-import arrowsCircleIcon from '@iconify-icons/ph/arrows-clockwise-fill';
-export let id = undefined;
-export let path;
-export let imageSrc;
-export let selectionAspectRatio = 1;
-export let minSelection = 0; // percentage of image, a value 0-1
-export let label = '';
-export let required = false;
-export let conditional = undefined;
-export let helptext = undefined;
-const store = new CropperStore({ width: 0, height: 0, minSelection, targetAspect: selectionAspectRatio });
-const { output, outputPct, selection } = store;
-let setVal;
-let value;
-const initialAspectRatio = selectionAspectRatio;
-function init(spValue, spSetVal) {
-    setVal = spSetVal;
-    value = spValue;
-}
-$: store.setOutput(value);
-function reactToOutput(...args) {
-    if (mounted)
-        setVal?.($output);
-}
-$: reactToOutput($output);
-let rect;
-function updateRect(..._) {
-    if (!container)
-        return false;
-    rect = container.getBoundingClientRect();
-    store.updateDimensions(rect.width, rect.height);
-    return true;
-}
-function isInside(clientX, clientY) {
-    return !(clientX < rect.left || clientX > rect.right || clientY > rect.bottom || clientY < rect.top);
-}
-function relativeToRect(clientX, clientY) {
-    return [Math.min(Math.max(0, clientX - rect.left), rect.width), Math.min(Math.max(0, clientY - rect.top), rect.height)];
-}
-let container;
-function onMouseDown(e) {
-    if (!updateRect())
-        return;
-    if (window.TouchEvent && TouchEvent && e instanceof TouchEvent && e.touches.length > 1)
-        return;
-    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
-    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+<script lang="ts">
+  import { resize, ScreenReaderOnly } from '@txstate-mws/svelte-components'
+  import { onMount, tick } from 'svelte'
+  import { isNotBlank, randomid } from 'txstate-utils'
+  import FieldStandard from '../FieldStandard.svelte'
+  import { CropperStore, type CropOutput } from './cropper'
+  import { Button } from '..'
+  import arrowsOutIcon from '@iconify-icons/ph/arrows-out-fill'
+  import arrowsCircleIcon from '@iconify-icons/ph/arrows-clockwise-fill'
+
+  export let id: string | undefined = undefined
+  export let path: string
+  export let imageSrc: string | undefined
+  export let selectionAspectRatio: number = 1
+  export let minSelection: number = 0 // percentage of image, a value 0-1
+  export let label: string = ''
+  export let required = false
+  export let conditional: boolean | undefined = undefined
+  export let helptext: string | undefined = undefined
+
+  const store = new CropperStore({ width: 0, height: 0, minSelection, targetAspect: selectionAspectRatio })
+  const { output, outputPct, selection } = store
+
+  let setVal: (val: any) => void
+  let value: CropOutput | undefined
+  const initialAspectRatio: number = selectionAspectRatio
+  function init (spValue, spSetVal) {
+    setVal = spSetVal
+    value = spValue
+  }
+
+  $: store.setOutput(value)
+  function reactToOutput (...args: any[]) {
+    if (mounted) setVal?.($output)
+  }
+  $: reactToOutput($output)
+
+  let rect: DOMRect
+  function updateRect (..._: any) {
+    if (!container) return false
+    rect = container.getBoundingClientRect()
+    store.updateDimensions(rect.width, rect.height)
+    return true
+  }
+
+  function isInside (clientX, clientY) {
+    return !(clientX < rect.left || clientX > rect.right || clientY > rect.bottom || clientY < rect.top)
+  }
+
+  function relativeToRect (clientX, clientY): [number, number] {
+    return [Math.min(Math.max(0, clientX - rect.left), rect.width), Math.min(Math.max(0, clientY - rect.top), rect.height)]
+  }
+
+  let container: HTMLDivElement
+  function onMouseDown (e: MouseEvent | TouchEvent) {
+    if (!updateRect()) return
+    if (window.TouchEvent && TouchEvent && e instanceof TouchEvent && e.touches.length > 1) return
+    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX
+    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY
     if (isInside(clientX, clientY)) {
-        e.preventDefault();
-        store.startDrag(clientX - rect.left, clientY - rect.top);
+      e.preventDefault()
+      store.startDrag(clientX - rect.left, clientY - rect.top)
     }
-}
-function onMouseMove(e) {
-    if (!updateRect())
-        return;
-    if (window.TouchEvent && e instanceof TouchEvent && e.touches.length > 1)
-        return;
-    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
-    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
-    if (e instanceof MouseEvent && !e.buttons && $store.drag)
-        store.endDrag();
-    if (isInside(clientX, clientY) || $store.drag)
-        store.mouseMove(...relativeToRect(clientX, clientY));
-}
-function onMouseUp(e) {
-    if (!updateRect())
-        return;
-    store.endDrag();
-    const clientX = e instanceof MouseEvent ? e.clientX : e.changedTouches[0].clientX;
-    const clientY = e instanceof MouseEvent ? e.clientY : e.changedTouches[0].clientY;
+  }
+
+  function onMouseMove (e: MouseEvent | TouchEvent) {
+    if (!updateRect()) return
+    if (window.TouchEvent && e instanceof TouchEvent && e.touches.length > 1) return
+    const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX
+    const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY
+    if (e instanceof MouseEvent && !e.buttons && $store.drag) store.endDrag()
+    if (isInside(clientX, clientY) || $store.drag) store.mouseMove(...relativeToRect(clientX, clientY))
+  }
+
+  function onMouseUp (e: MouseEvent | TouchEvent) {
+    if (!updateRect()) return
+    store.endDrag()
+    const clientX = e instanceof MouseEvent ? e.clientX : e.changedTouches[0].clientX
+    const clientY = e instanceof MouseEvent ? e.clientY : e.changedTouches[0].clientY
     if (isInside(clientX, clientY)) {
-        store.mouseMove(...relativeToRect(clientX, clientY));
-        container?.querySelector('.selectionHilite')?.focus();
+      store.mouseMove(...relativeToRect(clientX, clientY))
+      container?.querySelector<HTMLDivElement>('.selectionHilite')?.focus()
+    }
+  }
+
+  function onMaximize () {
+    if (!updateRect()) return
+    store.maximize()
+  }
+
+  function onKeyDown (type: 'move' | 'tl' | 'tr' | 'bl' | 'br') {
+    return (e: KeyboardEvent) => {
+      const tl = type === 'tl'
+      const tr = type === 'tr'
+      const bl = type === 'bl'
+      const br = type === 'br'
+      const left = e.key === 'ArrowLeft'
+      const right = e.key === 'ArrowRight'
+      const up = e.key === 'ArrowUp'
+      const down = e.key === 'ArrowDown'
+      if (left || right || up || down) {
+        e.preventDefault()
+        e.stopPropagation()
+      } else return
+      const step = e.shiftKey ? (e.altKey || e.metaKey ? 80 : 20) : (e.altKey || e.metaKey ? 40 : 1)
+      if (type === 'move') {
+        store.move(left ? -1 * step : (right ? step : 0), up ? -1 * step : (down ? step : 0))
+      } else {
+        store.expand(type, ((tl || bl) && right) || ((tl || tr) && down) || ((tr || br) && left) || ((bl || br) && up) ? -1 * step : step)
+      }
     }
-}
-function onMaximize() {
-    if (!updateRect())
-        return;
-    store.maximize();
-}
-function onKeyDown(type) {
-    return (e) => {
-        const tl = type === 'tl';
-        const tr = type === 'tr';
-        const bl = type === 'bl';
-        const br = type === 'br';
-        const left = e.key === 'ArrowLeft';
-        const right = e.key === 'ArrowRight';
-        const up = e.key === 'ArrowUp';
-        const down = e.key === 'ArrowDown';
-        if (left || right || up || down) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        else
-            return;
-        const step = e.shiftKey ? (e.altKey || e.metaKey ? 80 : 20) : (e.altKey || e.metaKey ? 40 : 1);
-        if (type === 'move') {
-            store.move(left ? -1 * step : (right ? step : 0), up ? -1 * step : (down ? step : 0));
-        }
-        else {
-            store.expand(type, ((tl || bl) && right) || ((tl || tr) && down) || ((tr || br) && left) || ((bl || br) && up) ? -1 * step : step);
-        }
-    };
-}
-let mounted = false;
-onMount(() => {
-    mounted = true;
-});
-$: updateRect(container);
-const descid = randomid();
-const movedescid = randomid();
-let focusWithin = false;
-let arChanged = false;
-async function reactToAspectRatio(ar) {
-    if (!ar)
-        return;
-    store.updateTargetAspect(ar);
-    await tick();
+  }
+
+  let mounted = false
+  onMount(() => {
+    mounted = true
+  })
+
+  $: updateRect(container)
+  const descid = randomid()
+  const movedescid = randomid()
+  let focusWithin = false
+
+  let arChanged = false
+  async function reactToAspectRatio (ar) {
+    if (!ar) return
+    store.updateTargetAspect(ar)
+    await tick()
     if (ar !== initialAspectRatio || arChanged) {
-        store.maximize();
-        arChanged = true;
+      store.maximize()
+      arChanged = true
     }
-}
-$: void reactToAspectRatio(selectionAspectRatio);
-let initialLoad = true;
-let initialVal;
-let srcChanged = false;
-async function onimageload(e) {
+  }
+  $: void reactToAspectRatio(selectionAspectRatio)
+
+  let initialLoad = true
+  let initialVal
+  let srcChanged = false
+  async function onimageload (e) {
     if (initialLoad) {
-        initialVal = e.target.src;
-        initialLoad = false;
+      initialVal = e.target.src
+      initialLoad = false
+    } else {
+      if (e.target.src !== initialVal || srcChanged) {
+        await tick()
+        store.maximize()
+        srcChanged = true
+      }
     }
-    else {
-        if (e.target.src !== initialVal || srcChanged) {
-            await tick();
-            store.maximize();
-            srcChanged = true;
-        }
-    }
-}
+  }
 </script>
 
 <svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} on:touchend={onMouseUp} on:touchcancel={onMouseUp} />
@@ -278,5 +280,4 @@ async function onimageload(e) {
     bottom: 0;
     right: 0;
   }
-
 </style>

package/dist/iconpicker/FieldIconPicker.svelte

@@ -1,107 +1,116 @@
-<script>import FieldStandard from '../FieldStandard.svelte';
-import { ScreenReaderOnly, Modal, modifierKey } from '@txstate-mws/svelte-components';
-import { FontAwesomeIcons, IconCategories } from './iconpicker';
-import Icon from '@iconify/svelte';
-import { randomid, keyby } from 'txstate-utils';
-import { getDescribedBy } from '../helpers';
-export let id = undefined;
-export let path;
-export let label = '';
-export let required = false;
-export let defaultValue = { icon: 'fa-graduation-cap', prefix: 'fas' };
-export let conditional = undefined;
-export let helptext = undefined;
-const labelid = randomid();
-const descid = randomid();
-let modalOpen = false;
-let selected = defaultValue;
-const iconToPrefix = {};
-const categoriesToIcons = keyby(IconCategories, 'key');
-for (const icon of FontAwesomeIcons) {
-    iconToPrefix[icon.class] = icon.free.includes('brands') ? 'fab' : 'fas';
-}
-const iconElements = [];
-let visibleIcons = FontAwesomeIcons;
-let searchVal = '';
-let category = 'all';
-$: iconCountMessage = visibleIcons.length === FontAwesomeIcons.length ? 'Showing all icons' : `Showing ${visibleIcons.length} icons`;
-function onSelectIcon(iconClass) {
-    selected = { icon: iconClass, prefix: iconToPrefix[iconClass] };
-}
-function onSaveIconSelection(setVal) {
+<script lang="ts">
+  import FieldStandard from '../FieldStandard.svelte'
+  import { ScreenReaderOnly, Modal, modifierKey } from '@txstate-mws/svelte-components'
+  import { FontAwesomeIcons, IconCategories } from './iconpicker'
+  import Icon from '@iconify/svelte'
+  import { randomid, keyby } from 'txstate-utils'
+  import { getDescribedBy } from '../helpers'
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let required = false
+  export let defaultValue: { icon: string, prefix: string } = { icon: 'fa-graduation-cap', prefix: 'fas' }
+  export let conditional: boolean | undefined = undefined
+  export let helptext: string | undefined = undefined
+
+  const labelid = randomid()
+  const descid = randomid()
+
+  let modalOpen: boolean = false
+  let selected: { icon: string, prefix: string } = defaultValue
+
+  const iconToPrefix: Record<string, string> = {}
+  const categoriesToIcons = keyby(IconCategories, 'key')
+
+  for (const icon of FontAwesomeIcons) {
+    iconToPrefix[icon.class] = icon.free.includes('brands') ? 'fab' : 'fas'
+  }
+
+  const iconElements: HTMLDivElement[] = []
+
+  let visibleIcons = FontAwesomeIcons
+
+  let searchVal: string = ''
+  let category: string = 'all'
+
+  $:iconCountMessage = visibleIcons.length === FontAwesomeIcons.length ? 'Showing all icons' : `Showing ${visibleIcons.length} icons`
+
+  function onSelectIcon (iconClass: string) {
+    selected = { icon: iconClass, prefix: iconToPrefix[iconClass] }
+  }
+
+  function onSaveIconSelection (setVal: (val: any) => void) {
     return function () {
-        setVal(selected);
-        category = 'all';
-        searchVal = '';
-        visibleIcons = FontAwesomeIcons;
-        modalOpen = false;
-    };
-}
-function onCancel(val) {
+      setVal(selected)
+      category = 'all'
+      searchVal = ''
+      visibleIcons = FontAwesomeIcons
+      modalOpen = false
+    }
+  }
+
+  function onCancel (val) {
     return function () {
-        selected = val;
-        category = 'all';
-        searchVal = '';
-        visibleIcons = FontAwesomeIcons;
-        modalOpen = false;
-    };
-}
-function onSearch() {
+      selected = val
+      category = 'all'
+      searchVal = ''
+      visibleIcons = FontAwesomeIcons
+      modalOpen = false
+    }
+  }
+
+
+  function onSearch () {
     visibleIcons = FontAwesomeIcons.filter(i => {
-        const searchValLC = searchVal.toLowerCase();
-        if (i.class.toLowerCase().includes(searchValLC))
-            return true;
-        for (const term of i.search.terms) {
-            if (term.toLowerCase().includes(searchValLC))
-                return true;
-        }
-        return false;
-    });
+      const searchValLC = searchVal.toLowerCase()
+      if (i.class.toLowerCase().includes(searchValLC)) return true
+      for (const term of i.search.terms) {
+        if (term.toLowerCase().includes(searchValLC)) return true
+      }
+      return false
+    })
     if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
-        onSelectIcon(visibleIcons[0].class);
+      onSelectIcon(visibleIcons[0].class)
     }
-}
-function onSelectCategory() {
+  }
+
+  function onSelectCategory () {
     if (category === 'all') {
-        visibleIcons = FontAwesomeIcons;
-    }
-    else {
-        visibleIcons = FontAwesomeIcons.filter(i => {
-            return categoriesToIcons[category].icons.includes(i.class);
-        });
+      visibleIcons = FontAwesomeIcons
+    } else {
+      visibleIcons = FontAwesomeIcons.filter(i => {
+        return categoriesToIcons[category].icons.includes(i.class)
+      })
     }
     if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
-        onSelectIcon(visibleIcons[0].class);
+      onSelectIcon(visibleIcons[0].class)
     }
-}
-function onKeyDown(e) {
-    const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon);
-    if (modifierKey(e))
-        return;
-    let newIndex;
+  }
+
+  function onKeyDown (e: KeyboardEvent) {
+    const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon)
+    if (modifierKey(e)) return
+    let newIndex
     if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
-        e.preventDefault();
-        if (currentSelectionIndex === visibleIcons.length - 1) {
-            newIndex = 0;
-        }
-        else {
-            newIndex = currentSelectionIndex + 1;
-        }
-        onSelectIcon(visibleIcons[newIndex].class);
-        iconElements[newIndex].focus();
+      e.preventDefault()
+      if (currentSelectionIndex === visibleIcons.length - 1) {
+        newIndex = 0
+      } else {
+        newIndex = currentSelectionIndex + 1
+      }
+      onSelectIcon(visibleIcons[newIndex].class)
+      iconElements[newIndex].focus()
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (currentSelectionIndex === 0) {
+        newIndex = visibleIcons.length - 1
+      } else {
+        newIndex = currentSelectionIndex - 1
+      }
+      onSelectIcon(visibleIcons[newIndex].class)
+      iconElements[newIndex].focus()
     }
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
-        e.preventDefault();
-        if (currentSelectionIndex === 0) {
-            newIndex = visibleIcons.length - 1;
-        }
-        else {
-            newIndex = currentSelectionIndex - 1;
-        }
-        onSelectIcon(visibleIcons[newIndex].class);
-        iconElements[newIndex].focus();
-    }
-}
+  }
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
@@ -283,5 +292,4 @@ function onKeyDown(e) {
       line-height: 250px;
       color: #999;
   }
-
 </style>