@dosgato/dialog 1.2.6 → 1.2.8

package/dist/FieldDateTime.svelte

@@ -1,6 +1,7 @@
 <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;
@@ -16,23 +17,26 @@ export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
 export let inputelement = undefined;
-let showBadInputMessage = false;
-function wrapOnBlur(onBlur) {
-    const date = new Date(inputelement.value);
-    showBadInputMessage = inputelement.validity.badInput || !(date instanceof Date && !isNaN(date.valueOf()));
-    onBlur();
+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));
+            }
+        }
+    };
 }
 </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:onChange let:helptextid let:messagesid>
-  {#if showBadInputMessage}<div class="bad-input-warning" aria-live='polite'>{`Field ${label}`} must include both a date and time</div>{/if}
-  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} {id} class="dialog-input {className}" onBlur={() => { wrapOnBlur(onBlur) }} {onChange} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
+<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>
+  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onBlur} onChange={onChange(setVal)} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
 </FieldStandard>
 
-<style>
-  .bad-input-warning {
-    margin-bottom: 0.3em;
-    color: var(--dg-danger-bg, #9a3332);
-  }
-
-</style>

package/dist/FieldDateTime.svelte.d.ts

@@ -21,6 +21,8 @@ declare const __propDef: {
         inputelement?: HTMLInputElement;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/FieldMultiselect.svelte

@@ -37,14 +37,26 @@ export let lookupByValue = async (val) => { const options = await getOptions(val
 export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
+export let menuContainerClass = '';
+export let menuClass = '';
+export let menuItemClass = '';
+export let menuItemHilitedClass = '';
+export let menuCategoryClass = '';
+/** Add a Delete All button to clear all selected items */
+export let includeDeleteAll = false;
+/** Show a confirmation message before clearing all selections */
+export let confirmDelete = undefined;
+export let selectedItemLabel = (item) => item.label || item.value;
 /** Each time we run getOptions we will save the value -> label mappings that it finds, so that we can display labels on pills. */
 const valueToLabel = {};
+const valueToGroup = {};
 async function wrapGetOptions(search) {
     const opts = await getOptions(search);
     /* If no options are returned with the search term, we can end up with an infinite loop the first time reactToValue calls wrapGetOptions */
     // if (opts.length === 0) opts = await getOptions('')
     for (const opt of opts) {
         valueToLabel[opt.value] = opt.label || opt.value;
+        valueToGroup[opt.value] = opt.group;
     }
     return opts;
 }
@@ -62,11 +74,13 @@ async function reactToValue(value) {
     await Promise.all(value.map(async (v) => {
         if (!valueToLabel[v]) {
             const item = await lookupByValue(v);
-            if (item)
+            if (item) {
                 valueToLabel[item.value] = item.label ?? item.value;
+                valueToGroup[item.value] = item.group;
+            }
         }
     }));
-    selectedStore.set(value.map(v => ({ value: v, label: valueToLabel[v] })).filter(v => isNotBlank(v.label)));
+    selectedStore.set(value.map(v => ({ value: v, label: valueToLabel[v], group: valueToGroup[v] })).filter(v => isNotBlank(v.label)));
 }
 </script>
 
@@ -79,7 +93,11 @@ async function reactToValue(value) {
         {disabled} {maxSelections} selected={$selectedStore} {placeholder} {emptyText} getOptions={wrapGetOptions}
         inputClass='multiselect-input'
         on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}
-      />
+        {includeDeleteAll} {confirmDelete} {selectedItemLabel}
+        {menuClass} {menuContainerClass} {menuItemClass} {menuItemHilitedClass} {menuCategoryClass}
+      >
+      <slot name="deleteall" slot="deleteall" />
+    </MultiSelect>
     </div>
   </FieldStandard>
 {/if}

package/dist/FieldMultiselect.svelte.d.ts

@@ -22,11 +22,23 @@ declare const __propDef: {
         related?: true | number;
         extradescid?: string | undefined;
         helptext?: string | undefined;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        menuCategoryClass?: string;
+        /** Add a Delete All button to clear all selected items */ includeDeleteAll?: boolean;
+        /** Show a confirmation message before clearing all selections */ confirmDelete?: string | undefined;
+        selectedItemLabel?: ((item: PopupMenuItem) => string) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        deleteall: {
+            slot: string;
+        };
+    };
 };
 export type FieldMultiselectProps = typeof __propDef.props;
 export type FieldMultiselectEvents = typeof __propDef.events;

package/dist/chooser/Chooser.svelte

@@ -90,7 +90,7 @@ function iconForItem(item) {
       {#if $store.initialized}
         <Tree headers={[
           { label: 'Path', id: 'name', grow: 4, icon: item => iconForItem(item), get: 'name' }
-        ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
+        ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} searchable='name' />
       {/if}
     </section>
     <ChooserPreview {thumbnailExpanded} {previewId} {store} on:thumbnailsizechange={() => { thumbnailExpanded = !thumbnailExpanded }}/>

package/dist/tagpicker/FieldTagPicker.svelte

@@ -2,15 +2,25 @@
 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 = [];
@@ -23,7 +33,11 @@ async function fetchAvailableTags() {
     }
 }
 function tagToOption(tag) {
-    return { label: (!tag.group.excludeTitle && isNotBlank(tag.group.title) ? tag.group.title + ': ' : '') + tag.name, value: tag.id };
+    let group = undefined;
+    if (isNotBlank(tag.group.title) && (showTitleInDialog || !tag.group.excludeTitle)) {
+        group = tag.group.title;
+    }
+    return { label: tag.name, value: tag.id, group };
 }
 async function getOptions(search) {
     await fetchAvailableTags();
@@ -37,6 +51,49 @@ async function lookupByValue(id) {
         return undefined;
     return tagToOption(tag);
 }
+function selectedItemLabel(item) {
+    const tag = item.label ?? item.value;
+    return item.group ? `${item.group}: ${tag}` : tag;
+}
 </script>
 
-<FieldMultiselect {path} {label} {getOptions} {lookupByValue} {conditional} {required} {helptext} {emptyText} {placeholder} />
+<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?">
+  <svelte:fragment slot="deleteall"><span class="delete-button-text">Delete All <Icon icon={trashIcon}/></span></svelte:fragment>
+</FieldMultiselect>
+
+<style>
+  :global(span.default-menu-category) {
+    padding: 0.5em;
+    border-bottom: 1px solid #767676;
+    margin: 0 -0.4em;
+  }
+  :global(.defaultmenu .group.group ul:has(.default-menu-item)) {
+    padding-inline-start: 0;
+  }
+  :global(li.default-menu-item) {
+    margin: 0 -0.4em;
+    padding: 0.5em;
+    border-bottom: 1px solid #767676;
+  }
+  :global(.defaultmenu .group li.default-menu-item) {
+    padding-left: 1.25em;
+  }
+  :global(li.default-menu-item):hover {
+    background-color: var(--dg-dialog-header-bg, #DDDDDD);
+  }
+  .delete-button-text {
+    font-size: 0.75em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+  }
+  .delete-button-text :global(svg) {
+    color: #9A3332;
+  }
+  :global(button):has(.delete-button-text) {
+    background-color: transparent;
+    border: 0;
+  }
+
+</style>

package/dist/tagpicker/FieldTagPicker.svelte.d.ts

@@ -6,9 +6,16 @@ declare const __propDef: {
         target: any;
         conditional?: boolean | undefined;
         required?: boolean;
+        extradescid?: string | undefined;
         helptext?: string | undefined;
         emptyText?: string | undefined;
         /** Text to display in the tag picker input field when it's empty. */ placeholder?: string;
+        /** We might want to show the title in the dialog for clarity, even if it is excluded when rendering tags on a page. */ showTitleInDialog?: boolean;
+        menuContainerClass?: string;
+        menuClass?: string;
+        menuItemClass?: string;
+        menuItemHilitedClass?: string;
+        menuCategoryClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -26,7 +26,7 @@
     "@iconify/svelte": "^4.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "@txstate-mws/svelte-components": "^1.6.2",
+    "@txstate-mws/svelte-components": "^1.6.11",
     "@txstate-mws/svelte-forms": "^1.5.5",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"