@dosgato/dialog 0.0.22 → 0.0.24

package/Button.svelte

@@ -74,4 +74,5 @@ export { className as class };
     background-color: var(--dg-button-delete-hover-bg, rgb(240, 62, 62));
     color: var(--dg-button-delete-hover-text, white);
   }
+
 </style>

package/ButtonGroup.svelte

@@ -71,4 +71,5 @@ function onKeyDown(choice, idx) {
     background-color: var(--dialog-btngrp-active-bg, #333333);
     color: var(--dialog-btngrp-active-text, white);
   }
+
 </style>

package/Checkbox.svelte

@@ -67,4 +67,5 @@ input[type="checkbox"]:disabled {
   color: var(--dialog-checkbox-color);
   cursor: not-allowed;
 }
+
 </style>

package/Container.svelte

@@ -86,4 +86,5 @@ const helptextid = helptext ? randomid() : undefined;
     font-size: 0.9em;
     color: #595959;
   }
+
 </style>

package/Dialog.svelte

@@ -152,4 +152,5 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     background: none;
     cursor: pointer;
   }
+
 </style>

package/FieldChoices.svelte

@@ -73,4 +73,5 @@ const descid = randomid();
   label :global(input[type="checkbox"]) {
     transform: none;
   }
+
 </style>

package/FieldChooserLink.svelte

@@ -100,4 +100,5 @@ $: updateSelected($value);
   input {
     flex-grow: 1;
   }
+
 </style>

package/FieldDualListbox.svelte

@@ -111,4 +111,5 @@ function onkeydown(value, setVal) {
     border: 0;
     padding: 0;
   }
+
 </style>

package/FieldMultiple.svelte

@@ -87,4 +87,5 @@ $: messages = compact ? $messageStore : [];
   .dialog-multiple-content {
     flex-grow: 1;
   }
+
 </style>

package/FieldMultiselect.svelte

@@ -59,4 +59,5 @@ async function reactToValue(value) {
   .invalid {
     --multiselect-border: 1px solid red;
   }
+
 </style>

package/FieldRadio.svelte

@@ -54,4 +54,5 @@ const width = '100%';
   label :global(input[type="checkbox"]) {
     transform: none;
   }
+
 </style>

package/FieldTextArea.svelte

@@ -26,4 +26,5 @@ export let helptext = undefined;
   textarea {
     resize: vertical;
   }
+
 </style>

package/Form.svelte

@@ -43,4 +43,5 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
     color: var(--dg-danger-bg, #9a3332);
     padding: 1em;
   }
+
 </style>

package/FormDialog.svelte

@@ -31,4 +31,5 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
   :global(:root) {
     --ck-z-default: var(--popup-z, 3001);
   }
+
 </style>

package/InlineMessage.svelte

@@ -39,4 +39,5 @@ $: icon = icons[message.type] ?? alertCircleOutline;
     background-color: #218739;
     color: white;
   }
+
 </style>

package/InlineMessages.svelte

@@ -18,4 +18,5 @@ $: id = messages.length ? savedid : undefined;
   div {
     width: 100%;
   }
+
 </style>

package/Listbox.svelte

@@ -164,4 +164,5 @@ function focusListbox() {
   .listbox-item.disabled {
     color: rgba(0,0,0,0.6);
   }
+
 </style>

package/Radio.svelte

@@ -65,4 +65,5 @@ input[type="radio"]:disabled {
   color: var(--dialog-checkbox-color);
   cursor: not-allowed;
 }
+
 </style>

package/Tab.svelte

@@ -55,4 +55,5 @@ const last = idx === $store.tabs.length - 1;
     transform: translateY(-50%) rotate(225deg);
     top: calc(50% + 0.08em);
   }
+
 </style>

package/Tabs.svelte

@@ -150,4 +150,5 @@ onMount(reactToCurrent);
       transition: none;
     }
   }
+
 </style>

package/chooser/Chooser.svelte

@@ -46,7 +46,6 @@ function onDeselect() {
     store.setPreview(undefined);
 }
 async function openRecursive(pathSplit, depth) {
-    console.log($treeStore.rootItems);
     let curr = $treeStore.rootItems?.find(itm => itm.name === pathSplit[0]);
     for (let i = 0; i < depth; i++) {
         curr = curr?.children?.find(c => c.name === pathSplit[i + 1]);
@@ -80,7 +79,7 @@ async function selectPreview(..._) {
 }
 onMount(async () => {
     await store.init({ images, pages, assets, folders, activeSources, initialSource, initialPath, passthruFilters, filter });
-    tabStore.activateName($source.name);
+    tabStore?.activateName($source.name);
     await selectPreview();
 });
 </script>
@@ -89,7 +88,7 @@ onMount(async () => {
   <section class="dialog-chooser-window">
     <header class="dialog-chooser-controls">
       {#if $sources.length > 1}
-        <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ id: s.name, title: s.label ?? s.name }))} />
+        <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} />
       {/if}
     </header>
     <section class="dialog-chooser-chooser">
@@ -145,4 +144,5 @@ onMount(async () => {
     position: relative;
     width: 100%;
   }
+
 </style>

package/chooser/ChooserStore.js

@@ -54,9 +54,7 @@ export class ChooserStore extends Store {
             return { ...v, sources };
         });
         this.setSource(this.value.preview?.source ?? this.options.initialSource, true);
-        console.log('before initialized', this.value);
         await tick();
-        console.log('just before initialized');
         this.update(v => ({ ...v, initialized: true }));
     }
     setPreview(item) {

package/chooser/Details.svelte

@@ -26,4 +26,5 @@ export let item;
     margin: 0;
     list-style: none;
   }
+
 </style>

package/chooser/Thumbnail.svelte

@@ -44,4 +44,5 @@ export let item;
     left: 50%;
     transform: translate(-50%, -50%);
   }
+
 </style>

package/colorpicker/FieldColorPicker.svelte

@@ -1,6 +1,6 @@
 <script>import FieldStandard from '../FieldStandard.svelte';
-import { getDescribedBy, Radio } from '..';
-import { randomid } from 'txstate-utils';
+import { Radio } from '..';
+import { randomid, shouldUseWhiteText } from 'txstate-utils';
 export let id = undefined;
 let className = '';
 export { className as class };
@@ -23,17 +23,17 @@ const groupid = randomid();
         <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
         <span class="alternating-bg">
           {#each options as option}
-            <span style={`background-color: ${option.color}`}></span>
+            <span style:background-color={option.color}></span>
           {/each}
         </span>
-        <span class="alternating-text">Alternating</span>
+        <span class="picker-text">Alternating</span>
       </label>
     {/if}
     {#each options as option, idx (option.value) }
       {@const radioid = `${path}.${idx}`}
       <label for={radioid} class="colorsel">
         <Radio id={radioid} name={path} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
-        <span style={`background-color: ${option.color}`}>{option.name || option.value}</span>
+        <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
       </label>
     {/each}
   </div>
@@ -59,7 +59,6 @@ const groupid = randomid();
 
   label.colorsel :global(input[type="radio"] + span) {
     display: inline-block;
-    font-weight: bold;
     padding: 1rem;
     width: 100%;
     text-align: center;
@@ -71,6 +70,10 @@ const groupid = randomid();
     outline: 5px solid #93BBC4;
   }
 
+  label.colorsel :global(input[type="radio"]:focus + span) {
+    outline: 5px solid blue;
+  }
+
   label.colorsel.alternating {
     position: relative;
   }
@@ -85,13 +88,22 @@ const groupid = randomid();
     width: 100%;
   }
 
-  label.colorsel.alternating span.alternating-text {
+  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 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, -1px -1px 0 #222;
+    text-shadow: 1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222;
   }
-</style>
+
+</style>

package/iconpicker/FieldIconPicker.svelte

@@ -255,4 +255,5 @@ function onKeyDown(e) {
       line-height: 250px;
       color: #999;
   }
+
 </style>

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.5",
     "@txstate-mws/svelte-forms": "^1.1.2",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "txstate-utils": "^1.7.12"
+    "txstate-utils": "^1.8.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
@@ -16,13 +16,15 @@
     "@sveltejs/package": "^1.0.0-next.5",
     "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",
     "svelte2tsx": "^0.5.20",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
+  "peerDependencies": {
+    "svelte": "^3.53.1"
+  },
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/tree/LoadIcon.svelte

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

package/tree/Tree.svelte

@@ -8,6 +8,13 @@ export let headers;
 export let nodeClass = undefined;
 export let singleSelect = undefined;
 export let enableResize = false;
+/**
+ * this `itemType` prop is here for typescript only
+ *
+ * it will allow users to specify T
+ *
+ * we are able to determine T from the store prop, but not everyone will use the store prop
+ */
 export const itemType = undefined;
 export let fetchChildren = undefined;
 export let dragEligible = undefined;
@@ -201,4 +208,5 @@ afterUpdate(() => {
   :global([data-eq~="650px"]) ul {
     font-size: 0.8em;
   }
+
 </style>

package/tree/Tree.svelte.d.ts

@@ -7,7 +7,13 @@ declare class __sveltets_Render<T extends TreeItemFromDB> {
         nodeClass?: (itm: T) => string;
         singleSelect?: boolean;
         enableResize?: boolean;
-        itemType?: T;
+        /**
+           * this `itemType` prop is here for typescript only
+           *
+           * it will allow users to specify T
+           *
+           * we are able to determine T from the store prop, but not everyone will use the store prop
+           */ itemType?: T;
         fetchChildren?: FetchChildrenFn<T>;
         dragEligible?: DragEligibleFn<T>;
         moveHandler?: MoveHandlerFn<T>;

package/tree/TreeNode.svelte

@@ -170,7 +170,6 @@ function onCheckClick(e) {
         shiftClick();
     }
     else {
-        console.log('onCheckClick', isSelected);
         if (isSelected)
             dispatch('deselect', item);
         store.select(item, { clear: false, toggle: true });
@@ -415,4 +414,5 @@ $: if ($dragging) {
       animation: none;
     }
   }
+
 </style>