@dosgato/dialog 1.2.8 → 1.3.0

package/dist/imageposition/FieldImagePosition.svelte

@@ -1,116 +1,126 @@
-<script>import { isNotBlank, randomid } from 'txstate-utils';
-import FieldStandard from '../FieldStandard.svelte';
-import Button from '../Button.svelte';
-import arrowsIn from '@iconify-icons/ph/arrows-in';
-import { Dialog } from '..';
-import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-export let id = undefined;
-export let path;
-export let imageSrc;
-export let label = '';
-export let required = false;
-export let conditional = undefined;
-export let helptext = undefined;
-export let defaultValue = { x: 50, y: 50 };
-let initialVal;
-function init(v) {
+<script lang="ts">
+  import { isNotBlank, randomid } from 'txstate-utils'
+  import FieldStandard from '../FieldStandard.svelte'
+  import Button from '../Button.svelte'
+  import arrowsIn from '@iconify-icons/ph/arrows-in'
+  import { Dialog, type ImagePositionOutput } from '..'
+  import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components'
+
+  export let id: string | undefined = undefined
+  export let path: string
+  export let imageSrc: string | undefined
+  export let label: string = ''
+  export let required = false
+  export let conditional: boolean | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let defaultValue: ImagePositionOutput = { x: 50, y: 50 }
+
+  let initialVal: ImagePositionOutput
+  function init (v) {
     if (v) {
-        initialVal = v;
+      initialVal = v
+    } else {
+      initialVal = defaultValue
     }
-    else {
-        initialVal = defaultValue;
-    }
-}
-const boxes = [];
-const descid = randomid();
-const labelid = randomid();
-let modalOpen = false;
-function showModal() {
-    modalOpen = true;
-}
-function hideModal() {
-    modalOpen = false;
-}
-let x, y;
-function onSave(setVal) {
-    setVal({ x: x * 25, y: y * 25 });
-    hideModal();
-}
-function onSelectBox(newX, newY) {
-    x = newX;
-    y = newY;
-    boxes[x + y * 5].focus();
-}
-function onKeyDown(e) {
-    if (modifierKey(e))
-        return;
+  }
+
+  const boxes: HTMLDivElement[] = []
+
+  const descid = randomid()
+  const labelid = randomid()
+  let modalOpen: boolean = false
+
+  function showModal () {
+    modalOpen = true
+  }
+
+  function hideModal () {
+    modalOpen = false
+  }
+
+  let x, y
+
+  function onSave (setVal) {
+    setVal({ x: x * 25, y: y * 25 })
+    hideModal()
+  }
+
+  function onSelectBox (newX, newY) {
+    x = newX
+    y = newY
+    boxes[x + y * 5].focus()
+  }
+
+  function onKeyDown (e: KeyboardEvent) {
+    if (modifierKey(e)) return
     if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        y = Math.min(y + 1, 4);
-    }
-    else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        y = Math.max(y - 1, 0);
-    }
-    else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        x = Math.min(x + 1, 4);
+      e.preventDefault()
+      y = Math.min(y + 1, 4)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      y = Math.max(y - 1, 0)
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      x = Math.min(x + 1, 4)
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      x = Math.max(0, x - 1)
     }
-    else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        x = Math.max(0, x - 1);
-    }
-    boxes[y + x * 5].focus();
-}
-const positionText = {
+    boxes[y + x * 5].focus()
+  }
+
+
+  const positionText: Record<number, Record<number, string>> = {
     0: {
-        0: 'Top Left Corner',
-        1: 'Upper Left',
-        2: 'Middle Left',
-        3: 'Lower Left',
-        4: 'Bottom Left Corner'
+      0: 'Top Left Corner',
+      1: 'Upper Left',
+      2: 'Middle Left',
+      3: 'Lower Left',
+      4: 'Bottom Left Corner'
     },
     1: {
-        0: 'Top Left of Center',
-        1: 'Upper Left of Center',
-        2: 'Middle Left of Center',
-        3: 'Below Left of Center',
-        4: 'Bottom, Left of Center'
+      0: 'Top Left of Center',
+      1: 'Upper Left of Center',
+      2: 'Middle Left of Center',
+      3: 'Below Left of Center',
+      4: 'Bottom, Left of Center'
     },
     2: {
-        0: 'Top Center',
-        1: 'Upper Center',
-        2: 'Dead Center',
-        3: 'Below Center',
-        4: 'Bottom Center'
+      0: 'Top Center',
+      1: 'Upper Center',
+      2: 'Dead Center',
+      3: 'Below Center',
+      4: 'Bottom Center'
     },
     3: {
-        0: 'Top, Right of Center',
-        1: 'Upper Right of Center',
-        2: 'Middle Right of Center',
-        3: 'Below Right of Center',
-        4: 'Bottom, Right of Center'
+      0: 'Top, Right of Center',
+      1: 'Upper Right of Center',
+      2: 'Middle Right of Center',
+      3: 'Below Right of Center',
+      4: 'Bottom, Right of Center'
     },
     4: {
-        0: 'Top Right Corner',
-        1: 'Upper Right',
-        2: 'Middle Right',
-        3: 'Lower Right',
-        4: 'Bottom Right Corner'
+      0: 'Top Right Corner',
+      1: 'Upper Right',
+      2: 'Middle Right',
+      3: 'Lower Right',
+      4: 'Bottom Right Corner'
     }
-};
-let dialogWasOpened = false;
-function onDialogOpen() {
+  }
+
+  let dialogWasOpened = false
+  function onDialogOpen () {
     if (!dialogWasOpened) {
-        x = (initialVal.x ?? 50) / 25;
-        y = (initialVal.y ?? 50) / 25;
-        dialogWasOpened = true;
+      x = (initialVal.x ?? 50) / 25
+      y = (initialVal.y ?? 50) / 25
+      dialogWasOpened = true
     }
-}
-function resetPosition() {
-    x = 2;
-    y = 2;
-}
+  }
+
+  function resetPosition () {
+    x = 2
+    y = 2
+  }
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} conditional={conditional && isNotBlank(imageSrc)} {helptext} {descid} let:value let:setVal let:helptextid>
@@ -222,6 +232,5 @@ function resetPosition() {
   :global(button.reset-position.reset-position):not([disabled]):hover {
     background-color: var(--dg-button-cancel-hover-bg, #595959);
   }
-
 </style>
 

package/dist/tagpicker/FieldTagPicker.svelte

@@ -1,60 +1,70 @@
-<script>import FieldMultiselect from '../FieldMultiselect.svelte';
-import { getContext } from 'svelte';
-import { isNotBlank } from 'txstate-utils';
-import { TAG_API_CONTEXT } from './TagAPI';
-import trashIcon from '@iconify-icons/ph/trash-simple-fill';
-import { Icon } from '..';
-export let path;
-export let label;
-export let target;
-export let conditional = undefined;
-export let required = false;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let emptyText = undefined;
-/** Text to display in the tag picker input field when it's empty. */
-export let placeholder = '';
-/** We might want to show the title in the dialog for clarity, even if it is excluded when rendering tags on a page. */
-export let showTitleInDialog = false;
-export let menuContainerClass = '';
-export let menuClass = '';
-export let menuItemClass = 'default-menu-item';
-export let menuItemHilitedClass = '';
-export let menuCategoryClass = 'default-menu-category';
-const tagClient = getContext(TAG_API_CONTEXT);
-let lasttarget = -1;
-let groups = [];
-let tags;
-async function fetchAvailableTags() {
+<script lang="ts">
+  import FieldMultiselect from '../FieldMultiselect.svelte'
+  import { getContext } from 'svelte'
+  import { isNotBlank } from 'txstate-utils'
+  import { TAG_API_CONTEXT, type Tag, type TagClient, type TagGroup } from './TagAPI'
+  import trashIcon from '@iconify-icons/ph/trash-simple-fill'
+  import { Icon } from '..';
+  import type { PopupMenuItem } from '@txstate-mws/svelte-components'
+
+  export let path: string
+  export let label: string
+  export let target: any
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  export let emptyText: string | undefined = undefined
+  /** Text to display in the tag picker input field when it's empty. */
+  export let placeholder = ''
+  /** We might want to show the title in the dialog for clarity, even if it is excluded when rendering tags on a page. */
+  export let showTitleInDialog = false
+  export let menuContainerClass = ''
+  export let menuClass = ''
+  export let menuItemClass = 'default-menu-item'
+  export let menuItemHilitedClass = ''
+  export let menuCategoryClass = 'default-menu-category'
+
+  const tagClient = getContext<TagClient>(TAG_API_CONTEXT)
+
+  let lasttarget: any = -1
+  let groups: TagGroup[] = []
+  let tags: (Tag & { lcname: string, group: TagGroup & { lctitle: string } })[]
+  async function fetchAvailableTags () {
     if (lasttarget !== target) {
-        groups = await tagClient.availableForTarget(target);
-        tags = groups.flatMap(g => g.tags.map(t => ({ ...t, lcname: t.name.toLocaleLowerCase(), group: { ...g, lctitle: g.title?.toLocaleLowerCase() ?? '' } })));
-        lasttarget = target;
+      groups = await tagClient.availableForTarget(target)
+      tags = groups.flatMap(g => g.tags.map(t => ({ ...t, lcname: t.name.toLocaleLowerCase(), group: { ...g, lctitle: g.title?.toLocaleLowerCase() ?? '' } })))
+      lasttarget = target
     }
-}
-function tagToOption(tag) {
-    let group = undefined;
+  }
+
+  function tagToOption (tag: (typeof tags)[0]) {
+    let group: string | undefined = undefined
     if (isNotBlank(tag.group.title) && (showTitleInDialog || !tag.group.excludeTitle)) {
-        group = tag.group.title;
+      group = tag.group.title
     }
-    return { label: tag.name, value: tag.id, group };
-}
-async function getOptions(search) {
-    await fetchAvailableTags();
-    const lcsearch = search?.toLocaleLowerCase() ?? '';
-    return tags.filter(t => t.lcname.includes(lcsearch) || t.group.lctitle.includes(lcsearch)).map(tagToOption);
-}
-async function lookupByValue(id) {
-    await fetchAvailableTags();
-    const tag = tags.find(t => t.id === id);
-    if (!tag)
-        return undefined;
-    return tagToOption(tag);
-}
-function selectedItemLabel(item) {
-    const tag = item.label ?? item.value;
-    return item.group ? `${item.group}: ${tag}` : tag;
-}
+    return { label: tag.name, value: tag.id, group }
+  }
+
+  async function getOptions (search: string) {
+    await fetchAvailableTags()
+    const lcsearch = search?.toLocaleLowerCase() ?? ''
+    return tags.filter(t => t.lcname.includes(lcsearch) || t.group.lctitle.includes(lcsearch)).map(tagToOption)
+  }
+
+  async function lookupByValue (id: string) {
+    await fetchAvailableTags()
+    const tag = tags.find(t => t.id === id)
+    if (!tag) return undefined
+    return tagToOption(tag)
+  }
+
+  function selectedItemLabel (item: PopupMenuItem) {
+    const tag = item.label ?? item.value
+    return item.group ? `${item.group}: ${tag}` : tag
+  }
+
+
 </script>
 
 <FieldMultiselect {path} {label} {getOptions} {lookupByValue} {conditional} {required} {extradescid} {helptext} {emptyText} {placeholder} {menuClass} {menuContainerClass} {menuItemClass} {menuItemHilitedClass} {menuCategoryClass} selectedItemLabel={showTitleInDialog ? selectedItemLabel : undefined} includeDeleteAll confirmDelete="Are you sure you want remove all tag selections?">
@@ -95,5 +105,4 @@ function selectedItemLabel(item) {
     background-color: transparent;
     border: 0;
   }
-
 </style>

package/dist/tree/LoadIcon.svelte

@@ -21,5 +21,4 @@
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
-
 </style>