@dosgato/dialog 1.2.2 → 1.2.4

package/dist/FieldChoices.svelte

@@ -24,9 +24,11 @@ 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;
@@ -47,10 +49,25 @@ function onChangeCheckbox(setVal, choice, included) {
             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 (selectAllChecked) {
+        // 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));
+    }
+}
 const descid = randomid();
 function reactToChoices(..._) {
     const choiceSet = new Set(choices?.filter(c => !c.disabled).map(c => c.value));
-    const val = get($store, finalPath);
+    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);
@@ -62,6 +79,12 @@ onMount(reactToChoices);
 <Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
   <Container {path} {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
+      {#if selectAll}
+        <label for={selectAllId} style:width>
+          <Checkbox id={selectAllId} name={selectAllId} bind:inputelement={selectAllElement} value={selectAllChecked} onChange={selectAllChanged} />
+          <span>Select All</span>
+        </label>
+      {/if}
       {#each choices as choice, idx (choice.value)}
         {@const checkid = `${path}.${idx}`}
         {@const included = value?.includes(choice.value)}

package/dist/FieldChoices.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         related?: true | number;
         extradescid?: string | undefined;
         helptext?: string | undefined;
+        selectAll?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldMultiple.svelte

@@ -1,10 +1,10 @@
 <script context="module">export const DG_DIALOG_FIELD_MULTIPLE = {};
 function noOp(..._) { return ''; }
 </script>
-<script>import caretCircleDown from '@iconify-icons/ph/caret-circle-down';
-import caretCircleUp from '@iconify-icons/ph/caret-circle-up';
+<script>import caretCircleDown from '@iconify-icons/ph/caret-circle-down-fill';
+import caretCircleUp from '@iconify-icons/ph/caret-circle-up-fill';
 import plusCircleLight from '@iconify-icons/ph/plus-circle-light';
-import xCircle from '@iconify-icons/ph/x-circle';
+import xCircle from '@iconify-icons/ph/x-circle-fill';
 import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { getContext, setContext } from 'svelte';
@@ -132,6 +132,9 @@ $: messages = compact ? $messageStore : [];
     font-size: 1.3em;
     color: black;
   }
+  .dialog-multiple-buttons .dialog-multiple-delete {
+    color: var(--dg-danger-bg, #9a3332);
+  }
   .dialog-multiple-buttons button:disabled {
     color: #6d6d6d;
   }

package/dist/FieldMultiselect.svelte

@@ -24,6 +24,9 @@ export let id = undefined;
 export let label = '';
 /** Text to display in the text input when it's empty. */
 export let placeholder = '';
+/** When there are no items (e.g. it's a filtered search and there were no results), we still display one
+disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */
+export let emptyText = undefined;
 export let disabled = false;
 export let defaultValue = [];
 export let conditional = undefined;
@@ -73,7 +76,7 @@ async function reactToValue(value) {
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
       <MultiSelect {id} name={path} descid={getDescribedBy([messagesid, helptextid, extradescid])}
-        {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions}
+        {disabled} {maxSelections} selected={$selectedStore} {placeholder} {emptyText} getOptions={wrapGetOptions}
         inputClass='multiselect-input'
         on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}
       />

package/dist/FieldMultiselect.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         id?: string | undefined;
         label?: string;
         /** Text to display in the text input when it's empty. */ placeholder?: string;
+        /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
+          disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */ emptyText?: string | undefined;
         disabled?: boolean;
         defaultValue?: string[];
         conditional?: boolean | undefined;

package/dist/cropper/FieldCropper.svelte

@@ -3,6 +3,9 @@ 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;
@@ -127,6 +130,22 @@ async function reactToAspectRatio(ar) {
     }
 }
 $: void reactToAspectRatio(selectionAspectRatio);
+let initialLoad = true;
+let initialVal;
+let srcChanged = false;
+async function onimageload(e) {
+    if (initialLoad) {
+        initialVal = e.target.src;
+        initialLoad = false;
+    }
+    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} />
@@ -134,9 +153,16 @@ $: void reactToAspectRatio(selectionAspectRatio);
   {@const _ = init(value, setVal)}
   {#if isNotBlank(imageSrc)}
     <div on:focusin={() => { focusWithin = true }} on:focusout={() => { focusWithin = false }}>
+      <div class="action-buttons">
+        <Button type="button" on:click={onMaximize} icon={arrowsOutIcon}>Center and Maximize</Button>
+        <Button type="button" on:click={() => store.reset()} icon={arrowsCircleIcon} class="btn-clear">Clear</Button>
+      </div>
+      <div class="cropper-instructions">
+        Click and drag to select a section of your image to use.
+      </div>
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div bind:this={container} use:resize on:resize={() => updateRect()} class="crop-image-container" on:mousedown={onMouseDown} on:touchstart={onMouseDown} on:touchmove={onMouseMove} style:cursor={$store.cursor}>
-        <img class="crop-image" src={imageSrc} alt="" />
+        <img class="crop-image" src={imageSrc} alt="" on:load={onimageload}/>
         {#if $selection && $outputPct}
           <div class='crop-bg'>
             <img class='crop-image clipped' src={imageSrc} alt="" style:clip-path="polygon({$outputPct.left}% {$outputPct.top}%, {100 - $outputPct.right}% {$outputPct.top}%, {100 - $outputPct.right}% {100 - $outputPct.bottom}%, {$outputPct.left}% {100 - $outputPct.bottom}%, {$outputPct.left}% {$outputPct.top}%)" />
@@ -187,13 +213,6 @@ $: void reactToAspectRatio(selectionAspectRatio);
           </div>
         {/if}
       </div>
-      <div class="action-buttons">
-        <button type="button" class='btn-center-max' on:click={onMaximize}>Center and Maximize</button>
-        <button type="button" class='btn-clear' on:click={() => store.reset()}>Clear</button>
-      </div>
-      <div class="cropper-instructions">
-        Click and drag to select a section of your image to use.
-      </div>
     </div>
   {:else}
     Image not selected
@@ -201,6 +220,22 @@ $: void reactToAspectRatio(selectionAspectRatio);
 </FieldStandard>
 
 <style>
+  .action-buttons {
+    display: flex;
+    gap: 1em;
+  }
+  :global(button.reset.btn-clear) {
+    background-color: var(--dg-button-cancel-bg, #808080);
+
+  }
+  :global(button.reset.btn-clear:not([disabled]):hover) {
+    background-color: var(--dg-button-cancel-hover-bg, #595959);
+  }
+
+  .cropper-instructions {
+    padding: 0.5em 0;
+  }
+
   .crop-image-container {
     position: relative;
     user-select: none;

package/dist/tagpicker/FieldTagPicker.svelte

@@ -5,6 +5,12 @@ import { TAG_API_CONTEXT } from './TagAPI';
 export let path;
 export let label;
 export let target;
+export let conditional = undefined;
+export let required = false;
+export let helptext = undefined;
+export let emptyText = undefined;
+/** Text to display in the tag picker input field when it's empty. */
+export let placeholder = '';
 const tagClient = getContext(TAG_API_CONTEXT);
 let lasttarget = -1;
 let groups = [];
@@ -33,4 +39,4 @@ async function lookupByValue(id) {
 }
 </script>
 
-<FieldMultiselect {path} {label} {getOptions} {lookupByValue} />
+<FieldMultiselect {path} {label} {getOptions} {lookupByValue} {conditional} {required} {helptext} {emptyText} {placeholder} />

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

@@ -4,6 +4,11 @@ declare const __propDef: {
         path: string;
         label: string;
         target: any;
+        conditional?: boolean | undefined;
+        required?: boolean;
+        helptext?: string | undefined;
+        emptyText?: string | undefined;
+        /** Text to display in the tag picker input field when it's empty. */ placeholder?: 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.2",
+  "version": "1.2.4",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",