@dosgato/dialog 1.3.5 → 1.3.7

package/dist/FieldChooserLink.svelte

@@ -206,7 +206,7 @@
           </div>
           <div class="tabs-container">
             <AssetTabs id={assetTabsId} {selectedAsset} showMetadata={$$slots.metadata != null} {altTextPath} {altTextRequired}>
-              <slot name="metadata" slot="metadata" selectedAsset={selectedAsset} />
+              <slot name="metadata" slot="metadata" {selectedAsset} />
             </AssetTabs>
           </div>
         </div>
@@ -346,11 +346,10 @@
     display: flex;
     align-items: flex-start;
     gap: 1em;
-    padding: 1em;
   }
 
   .asset-chooser-container .preview-container {
-    width: 20%;
+    width: 30%;
   }
 
   .asset-chooser-container .preview-container :global(.dialog-chooser-thumbnail) {
@@ -368,6 +367,7 @@
     flex: 1;
     border: 1px solid var(--dg-dialog-header-bg, #ddd);
     border-radius: 4px;
+    font-size: 0.9em;
   }
 
   .asset-chooser-container .detail-container .file-name {

package/dist/chooser/AssetTabs.svelte

@@ -23,6 +23,8 @@
 
   $: isImage = selectedAsset?.image !== undefined
 
+  $: useTabs = (isImage && altTextPath) || showMetadata
+
   $: tabs = [
     ...(isImage && altTextPath ? [{ id: `${id}-alttext`, label: 'Alternate Text' }] : []),
     { id: `${id}-details`, label: 'Asset Details' },
@@ -69,35 +71,37 @@
   }
 </script>
 
-<ul bind:this={tabListEl} class="tabs" role="tablist">
-  {#each tabs as tab, idx}
-    <li
-      id="{tab.id}-tab"
-      class="tab {activeTab === tab.id ? 'active' : ''}"
-      role="tab"
-      aria-selected={activeTab === tab.id}
-      aria-controls={tab.id}
-      tabindex={focusedTabIdx === idx ? 0 : -1}
-      data-tab-asset
-      on:click={() => selectTab(tab.id)}
-      on:keydown={(e) => onTabKeydown(e, idx)}
-      on:focus={() => { focusedTabIdx = idx }}
-    >
-      <span>{tab.label}</span>
-    </li>
-  {/each}
-</ul>
+{#if useTabs}
+  <ul bind:this={tabListEl} class="tabs" role="tablist">
+    {#each tabs as tab, idx}
+      <li
+        id="{tab.id}-tab"
+        class="tab {activeTab === tab.id ? 'active' : ''}"
+        role="tab"
+        aria-selected={activeTab === tab.id}
+        aria-controls={tab.id}
+        tabindex={focusedTabIdx === idx ? 0 : -1}
+        data-tab-asset
+        on:click={() => selectTab(tab.id)}
+        on:keydown={(e) => onTabKeydown(e, idx)}
+        on:focus={() => { focusedTabIdx = idx }}
+      >
+        <span>{tab.label}</span>
+      </li>
+    {/each}
+  </ul>
 
-{#if activeTab === `${id}-alttext`}
-  <div id={`${id}-alttext`} class="tab-content" role="tabpanel" aria-labelledby="{id}-alttext-tab">
-    {#if altTextPath}<FieldTextArea required={altTextRequired} path={altTextPath} label="Alt. Text" helptext="Describes the asset for visually-impaired users and search engines."/>{/if}
-  </div>
+  {#if activeTab === `${id}-alttext`}
+    <div id={`${id}-alttext`} class="tab-content" role="tabpanel" aria-labelledby="{id}-alttext-tab">
+      {#if altTextPath}<FieldTextArea required={altTextRequired} path={altTextPath} label="Alt. Text" helptext="Describes the asset for visually-impaired users and search engines."/>{/if}
+    </div>
+  {/if}
 {/if}
-{#if activeTab === `${id}-details`}
+{#if activeTab === `${id}-details` || !useTabs}
   <div id={`${id}-details`} class="tab-content" role="tabpanel" aria-labelledby="{id}-details-tab">
     <div class="details">
       <div class="path">
-        <span class="chooser-label">Assets Path:</span>
+        <span class="chooser-label">Path:</span>
         <span class="chooser-data">{selectedAsset.path}</span>
       </div>
       {#if selectedAsset.image}
@@ -127,7 +131,7 @@
 {/if}
 {#if activeTab === `${id}-metadata`}
   <div id={`${id}-metadata`} class="tab-content" role="tabpanel" aria-labelledby="{id}-metadata-tab">
-    <slot name="metadata" let:selectedAsset={selectedAsset} />
+    <slot name="metadata" {selectedAsset} />
   </div>
 {/if}
 {#if manageAssetsModalOpen}

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

@@ -12,7 +12,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        metadata: {};
+        metadata: {
+            selectedAsset: Asset;
+        };
     };
 };
 export type AssetTabsProps = typeof __propDef.props;

package/dist/chooser/Chooser.svelte

@@ -129,7 +129,7 @@
 <style>
   .dialog-chooser-window {
     position: relative;
-    height: 80vh;
+    height: 75vh;
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
@@ -139,7 +139,7 @@
     container-name: dosgato-dialog-chooser-window
   }
   .dialog-chooser-window.no-controls {
-    height: 85vh;
+    height: 80vh;
   }
   .dialog-chooser-window * {
     box-sizing: border-box;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",