@dosgato/dialog 1.2.5 → 1.2.6

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/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.6",
   "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",