@dosgato/dialog 1.0.3 → 1.0.5

package/dist/Dialog.svelte

@@ -65,7 +65,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
           <Button cancel {describedby} on:click={() => dispatch('escape')}>{cancelText}</Button>
         {/if}
         {#if isNotBlank(continueText)}
-          <Button class="primary" disabled={disabled || (hasRequired && !ignoreTabs)} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline />{continueText}</Button>
+          <Button class="primary" disabled={disabled || (hasRequired && !ignoreTabs)} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline /> {continueText}</Button>
         {/if}
         {#if nextTitle && !ignoreTabs}
           <Button class="next" disabled={!nextTitle} on:click={onNext}>Next<ScreenReaderOnly> Tab ({nextTitle})</ScreenReaderOnly> <Icon width="1.2em" icon={arrowRightLight} inline /></Button>
@@ -106,6 +106,16 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     max-width: 2000px;
   }
 
+  @media (max-width: 430px) {
+    section.tiny, section.small, section.normal, section.large, section.xl {
+      width: 95vw;
+      max-width: 2000px;
+    }
+    button.expand {
+      display: none;
+    }
+  }
+
   header {
     display: flex;
     align-items: center;

package/dist/FieldIdentifier.svelte

@@ -1,10 +1,21 @@
 <script>import { Field, nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import { randomid } from 'txstate-utils';
+import { onMount } from 'svelte';
 export let path;
 export let conditional = undefined;
 export let length = 10;
+let val, stVal;
+function updateValue(valu, sVal) {
+    val = valu;
+    stVal = sVal;
+}
+onMount(() => {
+    if (!val)
+        stVal(randomid(length));
+});
 </script>
 
-<Field {path} {conditional} defaultValue={randomid(length)} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value>
+<Field {path} {conditional} defaultValue={randomid(length)} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value let:setVal>
+  {@const _ = updateValue(value, setVal)}
   <input type="hidden" name={path} {value}>
 </Field>

package/dist/Tabs.svelte

@@ -143,7 +143,22 @@ onMount(reactToCurrent);
     font-weight: 700;
   }
 
-  .tabs-active {
+  li.active span {
+    position: relative;
+  }
+
+  li.active span:after {
+    content: '';
+    position: absolute;
+    height: 3px;
+    background-color: var(--dg-tabs-active, var(--dg-button-bg, #501214));
+    width: 100%;
+    left: 0;
+    bottom: -3px;
+    border-radius: 2px;
+  }
+
+  /* .tabs-active {
     background: var(--dg-tabs-active, var(--dg-button-bg, #501214));
     height: 3px;
     border-radius: 2px;
@@ -157,6 +172,6 @@ onMount(reactToCurrent);
     .tabs-active {
       transition: none;
     }
-  }
+  } */
 
 </style>

package/dist/chooser/Chooser.svelte

@@ -8,6 +8,7 @@ import { CHOOSER_API_CONTEXT } from './ChooserAPI';
 import { CHOOSER_STORE_CONTEXT, ChooserStore } from './ChooserStore';
 import Details from './Details.svelte';
 import Thumbnail from './Thumbnail.svelte';
+import ChooserPreview from './ChooserPreview.svelte';
 const chooserClient = getContext(CHOOSER_API_CONTEXT);
 export let label = undefined;
 export let images = false;
@@ -84,11 +85,11 @@ let thumbnailExpanded = false;
 
 <Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
   <section class="dialog-chooser-window">
+    {#if $sources.length > 1}
     <header class="dialog-chooser-controls">
-      {#if $sources.length > 1}
-        <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} accordionOnMobile={false}/>
-      {/if}
+      <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} accordionOnMobile={false}/>
     </header>
+    {/if}
     <section class="dialog-chooser-chooser">
       {#if $store.initialized}
         <Tree headers={[
@@ -96,22 +97,7 @@ let thumbnailExpanded = false;
         ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
       {/if}
     </section>
-    <section id={previewId} class="dialog-chooser-preview" class:image={$preview?.type === 'asset' && $preview.image} tabindex="-1">
-      {#if $preview}
-        <Thumbnail item={$preview} larger expandable expanded={thumbnailExpanded} on:thumbnailsizechage={() => { thumbnailExpanded = !thumbnailExpanded }}/>
-        {#if !thumbnailExpanded}<Details item={$preview} />{/if}
-      {:else}
-        <section class="placeholder">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371 181">
-            <g id="Group_2845" data-name="Group 2845" transform="translate(-34 -94)">
-              <rect id="Rectangle_2035" data-name="Rectangle 2035" width="371" height="181" transform="translate(34 94)" fill="#d8d8d8"/>
-              <path id="Icon_awesome-image" data-name="Icon awesome-image" d="M145.453,124.875H15.047A15.047,15.047,0,0,1,0,109.828V19.547A15.047,15.047,0,0,1,15.047,4.5H145.453A15.047,15.047,0,0,1,160.5,19.547v90.281A15.047,15.047,0,0,1,145.453,124.875ZM35.109,22.055A17.555,17.555,0,1,0,52.664,39.609,17.555,17.555,0,0,0,35.109,22.055ZM20.063,104.813H140.438V69.7L113,42.269a3.762,3.762,0,0,0-5.32,0L65.2,84.75l-17.4-17.4a3.762,3.762,0,0,0-5.32,0L20.063,89.766Z" transform="translate(139 119.5)" fill="#c7c7c7"/>
-            </g>
-          </svg>
-          <p>Select an item to preview it here.</p>
-        </section>
-      {/if}
-    </section>
+    <ChooserPreview {thumbnailExpanded} {previewId} {store} on:thumbnailsizechange={() => { thumbnailExpanded = !thumbnailExpanded }}/>
   </section>
   <svelte:fragment slot="buttons" let:describedby>
     {#if chooserClient.upload && $source?.type === 'asset'}
@@ -148,17 +134,6 @@ let thumbnailExpanded = false;
     background-color: white;
     overflow: auto;
   }
-  .dialog-chooser-preview {
-    width: 25%;
-    max-width: 21em;
-    height: calc(100% - 4em);
-    padding: 0 1em 1em 1em;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
-      display: none;
-  }
   .dialog-chooser-controls {
     position: relative;
     width: 100%;
@@ -166,21 +141,6 @@ let thumbnailExpanded = false;
   :global(footer.actions .upload) {
     margin-right: auto;
   }
-  .placeholder {
-    position: relative;
-  }
-  .placeholder p {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-weight: 600;
-    width: 90%;
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-  }
   @container dosgato-dialog-chooser-window (max-width: 800px) {
     .dialog-chooser-controls {
       order: 2;
@@ -190,46 +150,6 @@ let thumbnailExpanded = false;
       width: 100%;
       height: 50%;
     }
-    .dialog-chooser-preview {
-      order: 1;
-      width: 100%;
-      max-width: unset;
-      padding: 0;
-      height: unset;
-      display: flex;
-      overflow: hidden;
-    }
-    .dialog-chooser-preview.image {
-      height: 25vh;
-    }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail) {
-      max-width: 50%;
-    }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded) {
-      max-width: unset;
-    }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail img) {
-      object-fit: cover;
-      object-position: center;
-    }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded img) {
-      object-fit: scale-down;
-      width: unset;
-    }
-    .dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
-      display: block;
-    }
-    .dialog-chooser-preview :global(.dialog-chooser-info) {
-      width: 50%;
-      flex-direction: column;
-      flex-wrap: nowrap;
-      overflow-y: scroll;
-    }
-    .dialog-chooser-preview :global(.placeholder) {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
   }
 
 </style>

package/dist/chooser/ChooserPreview.svelte

@@ -0,0 +1,145 @@
+<script>import Thumbnail from './Thumbnail.svelte';
+import Details from './Details.svelte';
+import { createEventDispatcher } from 'svelte';
+export let previewId;
+export let store;
+const { preview } = store;
+export let thumbnailExpanded;
+const dispatch = createEventDispatcher();
+function reactToPreview(_preview) {
+    if (thumbnailExpanded)
+        dispatch('thumbnailsizechange');
+}
+$: reactToPreview($preview);
+</script>
+
+<section id={previewId} class="dialog-chooser-preview" class:image={$preview?.type === 'asset' && $preview.image} class:collapsed={!thumbnailExpanded} tabindex="-1">
+  {#if $preview}
+    {#if $preview?.type === 'asset' && $preview.image}
+      <div class="mobile-name">
+        <div class="label">Name:</div>
+        <div>{$preview.name}</div>
+      </div>
+    {/if}
+    <div class="preview-container">
+      <Thumbnail item={$preview} larger expandable expanded={thumbnailExpanded} on:thumbnailsizechange />
+      {#if !thumbnailExpanded}<Details item={$preview} />{/if}
+    </div>
+  {:else}
+    <section class="placeholder">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371 181">
+        <g id="Group_2845" data-name="Group 2845" transform="translate(-34 -94)">
+          <rect id="Rectangle_2035" data-name="Rectangle 2035" width="371" height="181" transform="translate(34 94)" fill="#d8d8d8"/>
+          <path id="Icon_awesome-image" data-name="Icon awesome-image" d="M145.453,124.875H15.047A15.047,15.047,0,0,1,0,109.828V19.547A15.047,15.047,0,0,1,15.047,4.5H145.453A15.047,15.047,0,0,1,160.5,19.547v90.281A15.047,15.047,0,0,1,145.453,124.875ZM35.109,22.055A17.555,17.555,0,1,0,52.664,39.609,17.555,17.555,0,0,0,35.109,22.055ZM20.063,104.813H140.438V69.7L113,42.269a3.762,3.762,0,0,0-5.32,0L65.2,84.75l-17.4-17.4a3.762,3.762,0,0,0-5.32,0L20.063,89.766Z" transform="translate(139 119.5)" fill="#c7c7c7"/>
+        </g>
+      </svg>
+      <p>Select an item to preview it here.</p>
+    </section>
+  {/if}
+</section>
+
+<style>
+  .dialog-chooser-preview {
+    width: 25%;
+    max-width: 21em;
+    height: calc(100% - 4em);
+    padding: 0 1em 1em 1em;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
+      display: none;
+  }
+  .preview-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  .placeholder {
+    position: relative;
+  }
+  .placeholder svg {
+    width: 100%;
+  }
+  .placeholder p {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: 600;
+    width: 90%;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+  .mobile-name {
+    display: none;
+  }
+  .mobile-name .label {
+    font-weight: bold;
+  }
+  @container dosgato-dialog-chooser-window (max-width: 800px) {
+    .dialog-chooser-preview {
+      order: 1;
+      width: 100%;
+      max-width: unset;
+      padding: 0;
+      height: unset;
+      display: flex;
+      overflow: hidden;
+    }
+    .dialog-chooser-preview.image.collapsed {
+      flex-direction: column;
+      gap: 0.75em;
+    }
+    .preview-container {
+      flex-direction: row;
+      height: 25vh;
+    }
+    .dialog-chooser-preview :global(.dialog-chooser-thumbnail) {
+      max-width: 50%;
+    }
+    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded) {
+      max-width: unset;
+    }
+    .dialog-chooser-preview :global(.dialog-chooser-thumbnail img) {
+      object-fit: cover;
+      object-position: center;
+    }
+    .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded img) {
+      object-fit: scale-down;
+      width: unset;
+    }
+    .dialog-chooser-preview:not(.image) .dialog-chooser-thumbnail :global(svg) {
+      height: 8em;
+      width: 8em;
+    }
+    .dialog-chooser-preview .placeholder {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+    .dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
+      display: block;
+    }
+    .dialog-chooser-preview:not(.image) :global(.preview-container) {
+      height: unset;
+    }
+    .dialog-chooser-preview.collapsed .mobile-name {
+      display: block;
+      font-size: 0.75em;
+    }
+    .dialog-chooser-preview :global(.dialog-chooser-info) {
+      width: 50%;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      overflow-y: scroll;
+      font-size: 0.75em;
+    }
+    .dialog-chooser-preview.image :global(.dialog-chooser-info .name){
+      display: none;
+    }
+  }
+
+</style>

package/dist/chooser/ChooserPreview.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ChooserStore } from './ChooserStore';
+declare const __propDef: {
+    props: {
+        previewId: string;
+        store: ChooserStore;
+        thumbnailExpanded: boolean;
+    };
+    events: {
+        thumbnailsizechange: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChooserPreviewProps = typeof __propDef.props;
+export type ChooserPreviewEvents = typeof __propDef.events;
+export type ChooserPreviewSlots = typeof __propDef.slots;
+export default class ChooserPreview extends SvelteComponentTyped<ChooserPreviewProps, ChooserPreviewEvents, ChooserPreviewSlots> {
+}
+export {};

package/dist/chooser/Details.svelte

@@ -15,7 +15,7 @@ export let singleLine = false;
       <dd>{item.url}</dd>
     </div>
   {:else if item.type !== 'raw'}
-    <div class="top-row">
+    <div class="top-row name">
       <dt>Name:</dt>
       <dd>{item.name}</dd>
     </div>

package/dist/chooser/Thumbnail.svelte

@@ -11,7 +11,7 @@ export let expandable = false;
 export let expanded = false;
 const dispatch = createEventDispatcher();
 function toggleThumbnailSize() {
-    dispatch('thumbnailsizechage');
+    dispatch('thumbnailsizechange');
 }
 </script>
 <div class="dialog-chooser-thumbnail" class:expanded>

package/dist/chooser/Thumbnail.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         expanded?: boolean | undefined;
     };
     events: {
-        thumbnailsizechage: CustomEvent<any>;
+        thumbnailsizechange: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/colorpicker/FieldColorPicker.svelte

@@ -34,34 +34,50 @@ onMount(reactToOptions);
 
 <FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid let:setVal>
   {@const _ = updateValue(value, setVal)}
-  <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
-    {#if addAllOption}
-      <label for={`${path}.alt`} class="colorsel alternating">
-        <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
-        <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 = `${path}.${idx}`}
-      <label for={radioid} class="colorsel">
-        <Radio id={radioid} name={path} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
-        <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
-      </label>
-    {/each}
+  <div class="container-query-wrapper">
+    <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
+      {#if addAllOption}
+        <label for={`${path}.alt`} class="colorsel alternating">
+          <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
+          <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 = `${path}.${idx}`}
+        <label for={radioid} class="colorsel">
+          <Radio id={radioid} name={path} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
+          <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
+        </label>
+      {/each}
+    </div>
   </div>
 </FieldStandard>
 
 <style>
+  .container-query-wrapper {
+    container-type: inline-size;
+    container-name: color-picker-container;
+  }
   .color-container {
     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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -26,8 +26,8 @@
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "@txstate-mws/svelte-components": "^1.5.3",
-    "@txstate-mws/svelte-forms": "^1.3.15",
+    "@txstate-mws/svelte-components": "^1.5.5",
+    "@txstate-mws/svelte-forms": "^1.3.16",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },