@dosgato/dialog 1.2.5 → 1.2.7

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/FieldMultiple.svelte.d.ts

@@ -31,7 +31,7 @@ declare const __propDef: {
         default: {
             path: string;
             index: number;
-            value: unknown;
+            value: any;
             maxed: boolean;
             maxLength: number;
             currentLength: number;

package/dist/FieldStandard.svelte.d.ts

@@ -31,7 +31,7 @@ declare const __propDef: {
             value: any;
             onBlur: () => void;
             onChange: (e?: any) => void;
-            setVal: (val: string | number | boolean | object | Date | undefined, notDirty?: boolean | undefined) => void;
+            setVal: (val: string | number | boolean | object | Date | undefined, notDirty?: boolean) => void;
             valid: boolean;
             invalid: boolean;
             messagesid: string | undefined;

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/colorpicker/FieldColorPicker.svelte

@@ -1,9 +1,8 @@
 <script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext, onMount } from 'svelte';
-import { get, isNotBlank, isNotNull, keyby, randomid } from 'txstate-utils';
+import { get, isNotBlank, randomid, shouldUseWhiteText } from 'txstate-utils';
 import { Radio } from '..';
 import FieldStandard from '../FieldStandard.svelte';
-import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
 export let id = undefined;
 let className = '';
 export { className as class };
@@ -20,7 +19,6 @@ const groupid = randomid();
 const store = getContext(FORM_CONTEXT);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-$: colorsByValue = keyby(options, 'value');
 async function reactToOptions(..._) {
     const val = get($store.data, finalPath);
     if (!val)
@@ -40,31 +38,22 @@ onMount(reactToOptions);
       {#if addAllOption}
         <label for={`${groupid}.alt`} class="colorsel alternating">
           <Radio id={`${groupid}.alt`} name={groupid} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
-          <div class="picker-text">
-            <ScreenReaderOnly>Alternating</ScreenReaderOnly>
-            <div class="alternating-bg">
-              {#each options as option (option.value)}
-                <div style:background-color={option.color} style:flex-basis={`calc(100% / ${options.length})`}></div>
-              {/each}
-            </div>
-          </div>
+          <span class="alternating-bg">
+            {#each options as option (option.value)}
+              <span style:background-color={option.color}></span>
+            {/each}
+          </span>
+          <span class="picker-text">Alternating</span>
         </label>
       {/if}
       {#each options as option, idx (option.value) }
         {@const radioid = `${groupid}.${idx}`}
-        <label for={radioid} class="colorsel" title={option.name || option.value}>
+        <label for={radioid} class="colorsel">
           <Radio id={radioid} name={groupid} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
-          <div class="picker-text" style:background-color={option.color}>
-            <ScreenReaderOnly>{option.name || option.value}</ScreenReaderOnly>
-          </div>
+          <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
         </label>
       {/each}
     </div>
-    {#if options.length && isNotNull(get($store.data, finalPath))}
-      <div>
-        Selected Color: <span class="selected-color">{get($store.data, finalPath) === 'alternating' ? 'Alternating' : (colorsByValue[get($store.data, finalPath)]?.name ?? get($store.data, finalPath))}</span>
-      </div>
-    {/if}
   </div>
 </FieldStandard>
 
@@ -74,11 +63,21 @@ onMount(reactToOptions);
     container-name: color-picker-container;
   }
   .color-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1em;
-    margin-bottom: 1em;
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+  @container color-picker-container (max-width: 600px) {
+    .color-container {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+  @container color-picker-container (max-width: 350px) {
+    .color-container {
+      grid-template-columns: 1fr 1fr;
+    }
   }
+
   label.colorsel :global(input[type="radio"]) {
     border: 0;
     clip: rect(0 0 0 0);
@@ -89,33 +88,54 @@ onMount(reactToOptions);
     position: absolute;
     width: 1px;
   }
-  label.colorsel :global(input[type="radio"] + div.picker-text) {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 50px;
-    height: 50px;
-    border-radius: 100%;
+
+  label.colorsel :global(input[type="radio"] + span) {
+    display: inline-block;
+    padding: 1rem;
+    width: 100%;
     text-align: center;
     white-space: nowrap;
     border: 1px solid #D1D1D1;
   }
 
-  label.colorsel :global(input[type="radio"]:checked + div.picker-text) {
+  label.colorsel :global(input[type="radio"]:checked + span) {
     outline: 5px solid #93BBC4;
   }
 
-  label.colorsel :global(input[type="radio"]:focus + div.picker-text) {
+  label.colorsel :global(input[type="radio"]:focus + span) {
     outline: 5px solid blue;
   }
-  label.colorsel.alternating .picker-text {
-    overflow: hidden;
+
+  label.colorsel.alternating {
+    position: relative;
   }
-  label.colorsel.alternating .picker-text .alternating-bg {
+
+  label.colorsel.alternating span.alternating-bg {
     display: flex;
+    padding: 0;
     height: 100%;
+  }
+
+  label.colorsel.alternating span.alternating-bg span {
     width: 100%;
   }
 
+  label.colorsel.alternating span.picker-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  label .picker-text {
+    font-weight: bold;
+    letter-spacing: 0.5px;
+    color: black;
+    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6), 1px -1px 1px rgba(255, 255, 255, 0.6), -1px 1px 1px rgba(255, 255, 255, 0.6), -1px -1px 1px rgba(255, 255, 255, 0.6);
+  }
+  label .picker-text.dark, label.alternating .picker-text {
+    color: white;
+    text-shadow: 1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222;
+  }
+
 </style>

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.5",
+  "version": "1.2.7",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -35,6 +35,7 @@
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.1",
     "@sveltejs/package": "^2.0.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-svelte": "^2.0.0",
     "svelte-check": "^3.0.1",