@dosgato/dialog 1.3.4 → 1.3.5

package/dist/FieldChooserLink.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import arrowClockwiseFill from '@iconify-icons/ph/arrow-clockwise-fill'
-  import deleteOutline from '@iconify-icons/mdi/delete-outline'
+  import deleteOutline from '@iconify-icons/mdi/delete'
   import xCircle from '@iconify-icons/ph/x-circle'
   import { FORM_CONTEXT, FORM_INHERITED_PATH, type FormStore } from '@txstate-mws/svelte-forms'
   import { getContext } from 'svelte'
@@ -9,6 +9,7 @@
   import type { AnyItem, Client } from './chooser/ChooserAPI'
   import Details from './chooser/Details.svelte'
   import Thumbnail from './chooser/Thumbnail.svelte'
+  import AssetTabs from './chooser/AssetTabs.svelte'
   import { getDescribedBy, FieldStandard, InlineMessage, Icon } from './'
 
   export let id: string | undefined = undefined
@@ -28,6 +29,8 @@
   export let extradescid: string | undefined = undefined
   export let helptext: string | undefined = undefined
   export let selectedAsset: AnyItem | RawURL | BrokenURL | undefined = undefined
+  export let altTextPath : string | undefined = undefined
+  export let altTextRequired: boolean = false
 
   // TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
   // choosing unacceptable mime types
@@ -41,6 +44,7 @@
   let urlEntryInput: HTMLInputElement | undefined
 
   const descid = randomid()
+  const assetTabsId = randomid()
   let modalshown = false
   async function show () {
     if (selectedAsset && selectedAsset.type !== 'raw' && selectedAsset.type !== 'broken') store.setPreview(selectedAsset)
@@ -51,7 +55,15 @@
   }
   function onChange (setVal: any) {
     return (e) => {
-      selectedAsset = e.detail
+      selectedAsset = e.detail.preview
+      if (
+        altTextPath &&
+        e.detail.copyAltText &&
+        selectedAsset?.type === 'asset' &&
+        selectedAsset?.image?.altText
+      ) {
+        formStore.setField(altTextPath, selectedAsset.image.altText).catch(console.error)
+      }
       setVal(selectedAsset?.id)
       hide()
     }
@@ -159,25 +171,66 @@
     }
   }
   $: void updateSelected($value)
+ function onClickRemove (setVal: any) {
+      return (e) => {
+        selectedAsset = undefined
+        setVal(undefined)
+        if (altTextPath) {
+          formStore.setField(altTextPath, undefined).catch(console.error)
+        }
+      }
+    }
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {related} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
   {#if selectedAsset?.id}
-    <div class="dialog-chooser-container" class:urlEntry>
-      <Thumbnail item={selectedAsset} />
-      <div class="dialog-chooser-right">
-        <Details item={selectedAsset} singleLine />
-        {#if !urlEntry}
-          <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
-            <Icon icon={arrowClockwiseFill} inline /> Replace
-          </button>
-          <button type="button" on:click={() => { selectedAsset = undefined; setVal(undefined) }} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
-            <Icon icon={deleteOutline} inline /> Remove
-          </button>
-        {/if}
-    </div>
-    </div>
+    {#if selectedAsset?.type === 'asset'}
+      <div class="asset-chooser-container">
+        <div class="preview-container">
+          <Thumbnail item={selectedAsset} />
+          {#if !urlEntry}
+            <div class="actions">
+              <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
+                <span>Replace</span> <Icon icon={arrowClockwiseFill} inline />
+              </button>
+              <button type="button" on:click={onClickRemove(setVal)} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
+                <span>Remove</span> <Icon icon={deleteOutline} inline />
+              </button>
+            </div>
+          {/if}
+        </div>
+        <div class="detail-container">
+          <div class="file-name" aria-live="polite">
+            <span class="chooser-label">Name:</span>
+            <span class="chooser-data">{selectedAsset.name}</span>
+          </div>
+          <div class="tabs-container">
+            <AssetTabs id={assetTabsId} {selectedAsset} showMetadata={$$slots.metadata != null} {altTextPath} {altTextRequired}>
+              <slot name="metadata" slot="metadata" selectedAsset={selectedAsset} />
+            </AssetTabs>
+          </div>
+        </div>
+      </div>
+    {:else}
+      <div class="dialog-chooser-container" class:urlEntry>
+        <Thumbnail item={selectedAsset} />
+        <div class="dialog-chooser-right">
+          <Details item={selectedAsset} singleLine />
+          {#if !urlEntry}
+            <div class="actions">
+              <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
+                <Icon icon={arrowClockwiseFill} inline /> Replace
+              </button>
+              <button type="button" on:click={() => { selectedAsset = undefined; setVal(undefined) }} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
+                <Icon icon={deleteOutline} inline /> Remove
+              </button>
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/if}
   {/if}
+
   {#if urlEntry || !selectedAsset?.id}
     <div class="dialog-chooser-entry">
       {#if urlEntry}
@@ -193,7 +246,7 @@
     <InlineMessage message={{ message: 'Entry does not match an internal resource and is not a valid URL. Nothing will be saved.', type: 'warning' }} />
   {/if}
   {#if modalshown}
-    <Chooser {store} {label} {pages} {assets} {images} {initialSource} {initialPath} {folders} {required} on:change={onChange(setVal)} on:escape={hide} />
+    <Chooser {store} {label} {pages} {assets} {images} {initialSource} {initialPath} {folders} {required} showAltTextOption={!!altTextPath} on:change={onChange(setVal)} on:escape={hide} />
   {/if}
 </FieldStandard>
 
@@ -225,16 +278,24 @@
   :global([data-eq~="400px"]) .dialog-chooser-right {
     max-width: unset;
   }
-  .dialog-chooser-right button {
-    margin-top: 0.5em;
+  .dialog-chooser-right .actions {
+    display: flex;
+  }
+  .dialog-chooser-right button, .asset-chooser-container .actions button {
     border: 0;
-    font-weight: bold;
     border-radius: 0.2em;
     cursor: pointer;
     padding: 0.4em;
     background: none;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  .asset-chooser-container .actions button span {
+    font-weight: bold;
+    font-size: 0.75em;
   }
-  .dialog-chooser-right button:hover {
+  .dialog-chooser-right button:hover, .asset-chooser-container .actions button:hover {
     background-color: #cccccc;
   }
   .dialog-chooser-entry {
@@ -281,4 +342,64 @@
   :global([data-eq~="400px"] .dialog-chooser-container .dialog-chooser-thumbnail img) {
     object-position: left;
   }
+  .asset-chooser-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 1em;
+    padding: 1em;
+  }
+
+  .asset-chooser-container .preview-container {
+    width: 20%;
+  }
+
+  .asset-chooser-container .preview-container :global(.dialog-chooser-thumbnail) {
+    justify-content: center;
+    display: flex;
+  }
+
+  .asset-chooser-container .preview-container .actions {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .asset-chooser-container .detail-container {
+    flex: 1;
+    border: 1px solid var(--dg-dialog-header-bg, #ddd);
+    border-radius: 4px;
+  }
+
+  .asset-chooser-container .detail-container .file-name {
+    background-color: var(--dg-dialog-header-bg, #ddd);
+    padding: 0.75em;
+    word-break: break-word;
+  }
+
+  .asset-chooser-container .detail-container .chooser-label {
+    font-weight: bold;
+    margin-right: 0.5em;
+  }
+  .asset-chooser-container .detail-container .tabs-container {
+    position: relative;
+  }
+
+  @media (max-width: 800px) {
+    .asset-chooser-container {
+      flex-direction: column;
+    }
+    .asset-chooser-container .preview-container {
+      width: 100%;
+    }
+    .asset-chooser-container .preview-container :global(.dialog-chooser-thumbnail img) {
+      max-height: 300px;
+    }
+    .asset-chooser-container .preview-container .actions {
+      justify-content: center;
+      gap: 2em;
+    }
+    .asset-chooser-container .detail-container {
+      width: 100%;
+    }
+  }
 </style>

package/dist/FieldChooserLink.svelte.d.ts

@@ -20,11 +20,18 @@ declare const __propDef: {
         extradescid?: string | undefined;
         helptext?: string | undefined;
         selectedAsset?: AnyItem | RawURL | BrokenURL | undefined;
+        altTextPath?: string | undefined;
+        altTextRequired?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        metadata: {
+            slot: string;
+            selectedAsset: AnyItem | RawURL | BrokenURL | undefined;
+        };
+    };
 };
 export type FieldChooserLinkProps = typeof __propDef.props;
 export type FieldChooserLinkEvents = typeof __propDef.events;

package/dist/chooser/AssetTabs.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+  import { bytesToHuman } from 'txstate-utils'
+  import type { Asset } from './ChooserAPI'
+  import { Dialog, FieldTextArea } from '..'
+  import Button from '../Button.svelte'
+  import Icon from '../Icon.svelte'
+  import outIcon from '@iconify-icons/ph/arrow-square-out-bold'
+  import warningIcon from '@iconify-icons/ph/warning'
+  import { getContext } from 'svelte'
+  import type { Client } from './ChooserAPI'
+  import { CHOOSER_API_CONTEXT } from './ChooserAPI'
+
+  export let id: string
+  export let selectedAsset: Asset
+  export let showMetadata: boolean = false
+  export let altTextRequired: boolean = false
+  // if they say it's required but don't provide a path, default to 'altText'
+  export let altTextPath: string | undefined = altTextRequired ? 'altText' : undefined
+  const chooserClient = getContext<Client>(CHOOSER_API_CONTEXT)
+
+  let tabListEl: HTMLUListElement
+  let manageAssetsModalOpen = false
+
+  $: isImage = selectedAsset?.image !== undefined
+
+  $: tabs = [
+    ...(isImage && altTextPath ? [{ id: `${id}-alttext`, label: 'Alternate Text' }] : []),
+    { id: `${id}-details`, label: 'Asset Details' },
+    ...(showMetadata ? [{ id: `${id}-metadata`, label: 'Metadata' }] : [])
+  ]
+  $: activeTab = tabs ? tabs[0].id : 0
+  let focusedTabIdx = 0
+
+  function selectTab(tabId: string) {
+    activeTab = tabId
+    focusedTabIdx = tabs.findIndex(t => t.id === tabId)
+    // ensure the focused tab is visible
+    const tabEls = tabListEl.querySelectorAll(`[role="tab"][data-tab-asset]`)
+    tabEls[focusedTabIdx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center'})
+  }
+
+  function focusTab(idx: number) {
+    focusedTabIdx = idx
+    activeTab = tabs[idx].id
+    const tabEls = tabListEl.querySelectorAll(`[role="tab"][data-tab-asset]`)
+    if (tabEls[idx]) (tabEls[idx] as HTMLElement).focus()
+    tabEls[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center'})
+  }
+
+  function onTabKeydown(e: KeyboardEvent, idx: number) {
+    if (e.key === 'ArrowRight') {
+      e.preventDefault()
+      focusTab((idx + 1) % tabs.length)
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault()
+      focusTab((idx - 1 + tabs.length) % tabs.length)
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      selectTab(tabs[idx].id)
+    }
+  }
+
+  async function navigateToManageAsset() {
+    manageAssetsModalOpen = false
+    const url = chooserClient.idToEditingUrl ? await chooserClient.idToEditingUrl(selectedAsset.id) : undefined
+    if (url) {
+      window.location.assign(url)
+    }
+  }
+</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 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 activeTab === `${id}-details`}
+  <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-data">{selectedAsset.path}</span>
+      </div>
+      {#if selectedAsset.image}
+        <div>
+          <span class="chooser-label">Dimensions:</span>
+          <span class="chooser-data">{selectedAsset.image.width}x{selectedAsset.image.height}</span>
+        </div>
+      {/if}
+      <div>
+        <span class="chooser-label">File Type:</span>
+        <span class="chooser-data">{selectedAsset.mime}</span>
+      </div>
+      <div>
+        <span class="chooser-label">File Size:</span>
+        <span class="chooser-data">{bytesToHuman(selectedAsset.bytes)}</span>
+      </div>
+      {#if chooserClient.idToEditingUrl}
+        <Button on:click={() => { manageAssetsModalOpen = true }}>
+          <span class="manage-in-assets">
+        Manage in Assets
+        <Icon icon={outIcon} />
+          </span>
+        </Button>
+      {/if}
+    </div>
+  </div>
+{/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} />
+  </div>
+{/if}
+{#if manageAssetsModalOpen}
+  <Dialog
+    title="Leave Dialog?"
+    size="small"
+    on:escape={() => { manageAssetsModalOpen = false }}
+    on:continue={navigateToManageAsset}
+    continueText="Manage Asset"
+    cancelText="Go Back"
+    icon={warningIcon}>
+    <p>Any changes made in the previous window may not be saved. Do you wish to continue?</p>
+  </Dialog>
+{/if}
+
+<style>
+  .tabs {
+    list-style: none;
+    display: flex;
+    gap: 10px;
+    margin: 0;
+    padding-inline: 0.375em;
+    background-color: var(--dg-dialog-header-bg, #ddd);
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .tabs .tab {
+    background-color: #ebebeb;
+    color: #696969;
+    font-weight: 600;
+    padding: 0.5em 0.75em 0.125em;
+    border: 1px solid #ccced1;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+   .tabs .tab span{
+    white-space: nowrap;
+   }
+  .tabs .tab[aria-selected="true"] {
+    background-color: #f7f7f7;
+    color: #000;
+    border-bottom-color: #f7f7f7;
+  }
+  .tab-content {
+    padding: 1em 1em 1em 1.125em;  /* left padding to align with tab text, which is 0.75em + 0.375em */
+  }
+  .tab-content .details {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 1.5em;
+    row-gap: 0.5em;
+  }
+  .tab-content .details > div {
+    display: flex;
+    flex-direction: column;
+  }
+  .tab-content .path {
+    flex-basis: 100%;
+  }
+  .tab-content .chooser-label {
+    font-weight: 600;
+    margin-right: 0.5em;
+  }
+  .manage-in-assets {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4em;
+  }
+</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Asset } from './ChooserAPI';
+declare const __propDef: {
+    props: {
+        id: string;
+        selectedAsset: Asset;
+        showMetadata?: boolean;
+        altTextRequired?: boolean;
+        altTextPath?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        metadata: {};
+    };
+};
+export type AssetTabsProps = typeof __propDef.props;
+export type AssetTabsEvents = typeof __propDef.events;
+export type AssetTabsSlots = typeof __propDef.slots;
+export default class AssetTabs extends SvelteComponentTyped<AssetTabsProps, AssetTabsEvents, AssetTabsSlots> {
+}
+export {};

package/dist/chooser/Chooser.svelte

@@ -23,6 +23,7 @@
   export let passthruFilters: F | undefined = undefined
   export let filter: undefined | ((item: AnyItem) => boolean | Promise<boolean>) = undefined
   export let store = new ChooserStore<F>(chooserClient)
+  export let showAltTextOption = false
   store.filter = filter
 
   setContext(CHOOSER_STORE_CONTEXT, store)
@@ -40,7 +41,7 @@
   $: store.setPreview($selected)
 
   function onChoose () {
-    dispatch('change', $store.preview)
+    dispatch('change', { preview: $store.preview, copyAltText: altTextCheckbox?.checked ?? false } )
   }
 
   function onDeselect () {
@@ -85,6 +86,8 @@
       }
     }
   }
+
+  let altTextCheckbox: HTMLInputElement
 </script>
 
 <Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
@@ -102,6 +105,14 @@
       {/if}
     </section>
     <ChooserPreview {thumbnailExpanded} {previewId} {store} on:thumbnailsizechange={() => { thumbnailExpanded = !thumbnailExpanded }}/>
+    {#if showAltTextOption && $preview && $preview.type === 'asset' && $preview.image}
+      <section class="alt-text-options">
+        <label>
+          <input bind:this={altTextCheckbox} type="checkbox" />
+          <span>Copy/paste alt. text (if available)</span>
+        </label>
+      </section>
+    {/if}
   </section>
   <svelte:fragment slot="buttons" let:describedby>
     {#if chooserClient.upload && $source?.type === 'asset'}
@@ -137,7 +148,7 @@
     position: relative;
     width: 75%;
     min-width: calc(100% - 21em);
-    height: calc(100% - 4em);
+    height: calc(100% - 4.5em);
     background-color: white;
     overflow: auto;
   }
@@ -145,6 +156,10 @@
     position: relative;
     width: 100%;
   }
+  .alt-text-options {
+    width: 100%;
+    padding-block: 1em;
+  }
   :global(footer.actions .upload) {
     margin-right: auto;
   }
@@ -155,7 +170,10 @@
     .dialog-chooser-chooser {
       order: 3;
       width: 100%;
-      height: 70%;
+      height: 50%;
+    }
+    .alt-text-options {
+      order: 4;
     }
   }
 </style>

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

@@ -15,6 +15,7 @@ declare class __sveltets_Render<F> {
         passthruFilters?: F | undefined;
         filter?: ((item: AnyItem) => boolean | Promise<boolean>) | undefined;
         store?: ChooserStore<F> | undefined;
+        showAltTextOption?: boolean;
     };
     events(): {
         escape: CustomEvent<any>;

package/dist/chooser/ChooserAPI.d.ts

@@ -40,6 +40,11 @@ export interface Client<F = any> {
      * may optionally return an array of accepted mime types for the folder
      */
     mayUpload?: (folder: Folder) => boolean | string[];
+    /**
+     * given an asset ID, return a URL that can be used to edit the asset in the main
+     * application. If undefined is returned, no "Edit" button will be shown
+     */
+    idToEditingUrl?: (id: string) => Promise<string | undefined>;
 }
 export interface Source {
     type: ChooserType;
@@ -108,6 +113,7 @@ export interface Asset extends Item {
         thumbnailUrl?: string;
         previewUrl?: string;
         tinyUrl?: string;
+        altText?: string;
     };
 }
 export {};

package/dist/chooser/ChooserPreview.svelte

@@ -45,7 +45,7 @@
   .dialog-chooser-preview {
     width: 25%;
     max-width: 21em;
-    height: calc(100% - 4em);
+    height: calc(100% - 4.5em);
     padding: 0 1em 1em 1em;
     overflow-y: auto;
     overflow-x: hidden;

package/dist/chooser/Details.svelte

@@ -25,6 +25,12 @@
   {/if}
   {#if item.type === 'asset'}
     {#if item.image}
+      {#if item.image.altText}
+        <div class="alt-text">
+          <dt>Alt. Text:</dt>
+          <dd>{item.image.altText}</dd>
+        </div>
+      {/if}
       <div>
         <dt>Dimensions:</dt>
         <dd>{item.image.width}x{item.image.height}</dd>
@@ -83,8 +89,8 @@
   .multiLine .top-row {
     width: 100%;
   }
-  .top-row {
-    max-width: calc(100% - 9em);
+  .alt-text {
+    width: 100%;
   }
   dl.asset .top-row {
     max-width: 30em;

package/dist/chooser/Thumbnail.svelte

@@ -32,7 +32,9 @@
         {/if}
       </div>
     {:else}
-      <FileIcon mime={item.mime} width='5em' />
+      <div class="file-icon-container">
+        <FileIcon mime={item.mime} width='5em' />
+      </div>
     {/if}
   {:else if item.type === 'folder'}
     <Icon icon={folderOutline} width='5em' />
@@ -62,6 +64,15 @@
   .dialog-chooser-thumbnail > :global(*) {
     display: block;
   }
+  .dialog-chooser-thumbnail .file-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dialog-chooser-thumbnail .file-icon-container :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
   .dialog-chooser-thumbnail button {
     position: absolute;
     left: 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.3.4",
+  "version": "1.3.5",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -32,7 +32,7 @@
     "txstate-utils": "^1.8.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.0.1",
     "@sveltejs/package": "^2.0.1",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",