@dosgato/dialog 0.0.35 → 0.0.37

package/chooser/Chooser.svelte

@@ -37,8 +37,7 @@ const treeStore = new TreeStore(fetchChildren);
 const selected = derivedStore(treeStore, 'selectedItems.0');
 $: store.setSource($currentName);
 $: selectPreview($preview, $source);
-$: if (['asset', 'page'].includes($selected?.type))
-    store.setPreview($selected);
+$: store.setPreview($selected);
 function onChoose() {
     dispatch('change', $store.preview);
 }
@@ -101,7 +100,7 @@ onMount(async () => {
     </section>
     <section class="dialog-chooser-preview" tabindex="-1">
       {#if $preview}
-        <Thumbnail item={$preview} />
+        <Thumbnail item={$preview} larger />
         <Details item={$preview}>
           {#if $preview.type === 'folder'}
             <li>{$selected?.children?.length ?? 0} sub-items</li>

package/chooser/ChooserAPI.d.ts

@@ -75,6 +75,7 @@ export interface Asset extends Item {
         width: number;
         height: number;
         thumbnailUrl?: string;
+        previewUrl?: string;
     };
 }
 export {};

package/chooser/Thumbnail.svelte

@@ -3,12 +3,13 @@ import fileLinkOutline from '@iconify-icons/mdi/file-link-outline.js';
 import FileIcon from '../FileIcon.svelte';
 import Icon from '../Icon.svelte';
 export let item;
+export let larger = false;
 </script>
 
 <div class="dialog-chooser-thumbnail">
   {#if item.type === 'asset'}
     {#if item.image}
-      <img src={item.image.thumbnailUrl} alt="" />
+      <img src={(larger ? item.image.thumbnailUrl : item.image.previewUrl) ?? item.image.thumbnailUrl ?? item.url} alt="" />
     {:else}
       <FileIcon mime={item.mime} width='5em' />
     {/if}

package/chooser/Thumbnail.svelte.d.ts

@@ -4,6 +4,7 @@ import type { RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
         item: AnyItem | RawURL;
+        larger?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/colorpicker/FieldColorPicker.svelte

@@ -43,7 +43,7 @@ const groupid = randomid();
   .color-container {
     display: grid;
     grid-gap: 10px;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
   }
 
   label.colorsel :global(input[type="radio"]) {

package/cropper/FieldCropper.svelte

@@ -39,7 +39,7 @@ let container;
 function onMouseDown(e) {
     if (!updateRect())
         return;
-    if (e instanceof TouchEvent && e.touches.length > 1)
+    if (window.TouchEvent && TouchEvent && e instanceof TouchEvent && e.touches.length > 1)
         return;
     const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
     const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
@@ -51,7 +51,7 @@ function onMouseDown(e) {
 function onMouseMove(e) {
     if (!updateRect())
         return;
-    if (e instanceof TouchEvent && e.touches.length > 1)
+    if (window.TouchEvent && e instanceof TouchEvent && e.touches.length > 1)
         return;
     const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
     const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.7",
     "@txstate-mws/svelte-forms": "^1.3.4",