@txstate-mws/svelte-components 1.7.1 → 1.7.3

package/dist/actions/glue.js

@@ -65,7 +65,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
             parent.style.minHeight = String(minHeight) + 'px';
         }
     }
-    let lastrect;
+    let lastmeasured;
     // The containing block (nearest ancestor that establishes a containing block for
     // position: fixed) is determined by the ancestors' computed styles. Scrolling can
     // never change it, but it CAN change when an ancestor gains/loses a transform,
@@ -84,19 +84,33 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
         let fixedRect = { left: 0, top: 0, right: 0, bottom: 0 };
         if (fixedParent) {
+            // fixed elements are positioned against the containing block's padding box, so
+            // measure from inside its borders
             const tmpRect = fixedParent.getBoundingClientRect();
-            fixedRect = { left: tmpRect.left, right: document.documentElement.clientWidth - tmpRect.right, top: tmpRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom };
+            const left = tmpRect.left + fixedParent.clientLeft;
+            const top = tmpRect.top + fixedParent.clientTop;
+            fixedRect = { left, right: document.documentElement.clientWidth - left - fixedParent.clientWidth, top, bottom: document.documentElement.clientHeight - top - fixedParent.clientHeight };
         }
         if (!target)
             return undefined;
         const tmpRect = target.getBoundingClientRect();
-        const rect = { left: tmpRect.left - fixedRect.left, right: document.documentElement.clientWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
-        if (equal(rect, lastrect))
+        const vpWidth = document.documentElement.clientWidth;
+        const vpHeight = document.documentElement.clientHeight;
+        // The space available around the target in the viewport, used to make the auto
+        // alignment decision. This must not be relative to the fixed containing block: an
+        // ancestor with a transform, container-type, etc. changes what our CSS offsets are
+        // measured from, but it doesn't clip us, so the space that matters is the viewport.
+        const space = { left: tmpRect.left, right: vpWidth - tmpRect.right, top: tmpRect.top, bottom: vpHeight - tmpRect.bottom };
+        // The target's offsets from the edges of the fixed containing block, used to write
+        // the CSS position values.
+        const rect = { left: tmpRect.left - fixedRect.left, right: vpWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: vpHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
+        const measured = { rect, space };
+        if (equal(measured, lastmeasured))
             return undefined;
-        lastrect = rect;
+        lastmeasured = measured;
         let autoalign = align;
-        const leftright = rect.right > rect.left ? 'left' : 'right';
-        const topbottom = rect.bottom > rect.top ? 'bottom' : 'top';
+        const leftright = space.right > space.left ? 'left' : 'right';
+        const topbottom = space.bottom > space.top ? 'bottom' : 'top';
         if (align === 'auto') {
             autoalign = topbottom + leftright;
         }
@@ -123,12 +137,12 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 autoalign = 'middle';
             }
             else {
-                const maxSpace = Math.max(rect.top, rect.bottom, rect.left, rect.right);
-                if (maxSpace === rect.bottom)
+                const maxSpace = Math.max(space.top, space.bottom, space.left, space.right);
+                if (maxSpace === space.bottom)
                     autoalign = 'bottom';
-                else if (maxSpace === rect.top)
+                else if (maxSpace === space.top)
                     autoalign = 'top';
-                else if (maxSpace === rect.right)
+                else if (maxSpace === space.right)
                     autoalign = 'right';
                 else
                     autoalign = 'left';
@@ -304,14 +318,12 @@ function isFixedContainer(el) {
     const css = getComputedStyle(el);
     if (css.getPropertyValue('transform') !== 'none' || css.getPropertyValue('perspective') !== 'none')
         return true; // A transform or perspective value other than none
-    if (['transform', 'perspective', 'filter'].includes(css.getPropertyValue('will-change')))
-        return true; // A will-change value of transform, filter, or perspective
+    if (css.getPropertyValue('will-change').split(/,\s*/).some(v => ['transform', 'perspective', 'filter'].includes(v)))
+        return true; // A will-change value including transform, filter, or perspective (e.g. will-change: opacity, transform;)
     if (css.getPropertyValue('filter') !== 'none')
         return true; // A filter value other than none
-    if (['layout', 'paint', 'strict', 'content'].includes(css.getPropertyValue('contain')))
-        return true; // A contain value of layout, paint, strict or content (e.g. contain: paint;)
-    if ('container-type' in css && css.getPropertyValue('container-type') !== 'normal')
-        return true; // A container-type value other than normal
+    if (css.getPropertyValue('contain').split(/\s+/).some(v => ['layout', 'paint', 'strict', 'content'].includes(v)))
+        return true; // A contain value including layout, paint, strict or content (e.g. contain: paint; or contain: size layout;)
     if ('backdrop-filter' in css && css.getPropertyValue('backdrop-filter') !== 'none')
         return true; // A backdrop-filter other than none (e.g. backdrop-filter: blur(10px);)
     return false;

package/dist/components/NestedData.svelte

@@ -88,11 +88,23 @@
   export let maxlevel = 5
   /**
    * take over the display of any leaf value; receives the default rendering
-   * (datetimes already rewritten as local ISO8601, everything else stringified)
-   * plus the value's path, so it can do something else with specific fields or
-   * types; return undefined to keep the default rendering
+   * (datetimes already rewritten as local ISO8601, everything else
+   * stringified) plus the value's path, so it can do something else with
+   * specific fields or types - including recognizing marker strings a data
+   * source deliberately embedded, like '{"image": "https://..."}'
+   *
+   * return a string to display as text, return { html } to display markup the
+   * formatter built itself - it renders regardless of allowHtml, because the
+   * formatter is application code rather than data, though it is still
+   * scrubbed with stripUnsafeHtml since the urls and labels interpolated into
+   * it usually do come from the data - or return undefined to keep the
+   * default rendering
+   *
+   * { html } drops below its key as an indented block by default; pass
+   * inline: true for something compact like a link that should sit beside its
+   * key the way a short scalar does
    */
-  export let format: ((value: string, path: (string | number)[]) => string | undefined) | undefined = undefined
+  export let format: ((value: string, path: (string | number)[]) => string | { html: string, inline?: boolean } | undefined) | undefined = undefined
   /**
    * leaf values longer than this many characters are cut off with an ellipsis,
    * after `format` has had its say; set Infinity if you really want it all
@@ -144,12 +156,21 @@
    * so it stays beside the key, and a scalar whose rendered text contains line
    * breaks (or is long enough that wrapping is inevitable) drops below the key,
    * so the breaks don't leave text hanging in the middle of the row
+   *
+   * formatted values follow the same rules: { html } is a block unless the
+   * formatter flagged it inline, text follows the scalar rules
    */
   function isBlockValue (value: any, key: string) {
+    const formatted = applyFormat(value, [...path, key])
+    if (formatted != null) {
+      if (typeof formatted === 'object') return !formatted.inline
+      const t = truncate(formatted)
+      return t.includes('\n') || t.length > BLOCKTEXT
+    }
     if (level + 1 >= maxlevel || childAncestors.includes(value)) return false
     if (arrayEntries(value) != null || objectEntries(value) != null) return true
     if (typeof value !== 'string') return false
-    const rendered = formatValue(value, [...path, key])
+    const rendered = formatValue(value)
     return isHtml(rendered) || rendered.includes('\n') || rendered.length > BLOCKTEXT
   }
 
@@ -165,16 +186,41 @@
   let htmlContentHeight = 0
   $: htmlClipped = htmlContentHeight > htmlClipHeight + 1
 
-  function formatValue (value: any, atPath: (string | number)[]) {
+  function truncate (str: string) {
+    return str.length > maxtext ? str.slice(0, maxtext).trimEnd() + '…' : str
+  }
+
+  /**
+   * run the format prop on a leaf value's default rendering; an { html }
+   * result needs DOMParser for scrubbing, so without one (i.e. during SSR) it
+   * is ignored and the value renders the default way until the browser
+   * hydrates
+   */
+  function applyFormat (value: any, atPath: (string | number)[]): string | { html: string, inline?: boolean } | undefined {
+    if (format == null) return undefined
+    if (value == null || (typeof value === 'object' && !(value instanceof Date)) || typeof value === 'function') return undefined
+    const result = format(renderScalar(value), atPath)
+    if (result != null && typeof result === 'object' && typeof DOMParser === 'undefined') return undefined
+    return result
+  }
+
+  $: formatted = applyFormat(data, path)
+  $: formattedHtml = formatted != null && typeof formatted === 'object' ? stripUnsafeHtml(formatted.html) : undefined
+  $: formattedText = typeof formatted === 'string' ? truncate(formatted) : undefined
+
+  function formatValue (value: any) {
     const str = renderScalar(value)
-    const formatted = format?.(str, atPath) ?? str
     // never truncate html - slicing markup in half would break it
-    if (isHtml(formatted)) return formatted
-    return formatted.length > maxtext ? formatted.slice(0, maxtext).trimEnd() + '…' : formatted
+    if (isHtml(str)) return str
+    return truncate(str)
   }
 </script>
 
-{#if arrayData}
+{#if formattedHtml != null}
+  <span class="nested-data-scalar nested-data-trusted {className}">{@html formattedHtml}</span>
+{:else if formattedText != null}
+  <span class="nested-data-scalar {className}">{formattedText}</span>
+{:else if arrayData}
   {#if elided}
     <span class="nested-data-elided {className}" title={elidedTooltip}>{elidedArrayText}</span>
   {:else if arrayData.length}
@@ -198,19 +244,19 @@
     </dl>
   {/if}
 {:else if data != null && (typeof data !== 'object' || data instanceof Date) && typeof data !== 'function'}
-  {#if isHtml(formatValue(data, path))}
+  {#if isHtml(formatValue(data))}
     <!-- the frame and legend keep rendered markup (especially lists) from being mistaken for the data's own structure -->
     <fieldset class="nested-data-scalar nested-data-html {className}" class:nested-data-clipped={htmlClipped}>
       <legend>HTML</legend>
       <div class="nested-data-html-clip" bind:clientHeight={htmlClipHeight}>
-        <div bind:offsetHeight={htmlContentHeight}>{@html stripUnsafeHtml(formatValue(data, path))}</div>
+        <div bind:offsetHeight={htmlContentHeight}>{@html stripUnsafeHtml(formatValue(data))}</div>
       </div>
       {#if htmlClipped}
         <div class="nested-data-html-more" title={clippedTooltip}>&hellip;</div>
       {/if}
     </fieldset>
   {:else}
-    <span class="nested-data-scalar {className}">{formatValue(data, path)}</span>
+    <span class="nested-data-scalar {className}">{formatValue(data)}</span>
   {/if}
 {/if}
 
@@ -253,6 +299,14 @@
     white-space: pre-line;
     overflow-wrap: break-word;
   }
+  /* markup built by the format prop renders inline, unframed */
+  .nested-data-trusted {
+    white-space: normal;
+  }
+  .nested-data-trusted :global(img) {
+    max-width: 100%;
+    vertical-align: middle;
+  }
   /* html brings its own paragraphs and breaks; pre-line would double them up */
   .nested-data-html {
     white-space: normal;
@@ -296,8 +350,8 @@
   .nested-data-html :global(p:last-of-type) {
     margin-bottom: 0;
   }
-  /* de-emphasize blocks of text that have dropped below their key */
-  dl.nested-data dd.nested-data-block > :global(.nested-data-scalar) {
+  /* de-emphasize blocks of text that have dropped below their key; formatter-built markup keeps full strength */
+  dl.nested-data dd.nested-data-block > :global(.nested-data-scalar:not(.nested-data-trusted)) {
     opacity: var(--nested-data-block-opacity, 0.85);
   }
   .nested-data-elided {

package/dist/components/NestedData.svelte.d.ts

@@ -13,10 +13,25 @@ declare const __propDef: {
            */ maxlevel?: number;
         /**
            * take over the display of any leaf value; receives the default rendering
-           * (datetimes already rewritten as local ISO8601, everything else stringified)
-           * plus the value's path, so it can do something else with specific fields or
-           * types; return undefined to keep the default rendering
-           */ format?: ((value: string, path: (string | number)[]) => string | undefined) | undefined;
+           * (datetimes already rewritten as local ISO8601, everything else
+           * stringified) plus the value's path, so it can do something else with
+           * specific fields or types - including recognizing marker strings a data
+           * source deliberately embedded, like '{"image": "https://..."}'
+           *
+           * return a string to display as text, return { html } to display markup the
+           * formatter built itself - it renders regardless of allowHtml, because the
+           * formatter is application code rather than data, though it is still
+           * scrubbed with stripUnsafeHtml since the urls and labels interpolated into
+           * it usually do come from the data - or return undefined to keep the
+           * default rendering
+           *
+           * { html } drops below its key as an indented block by default; pass
+           * inline: true for something compact like a link that should sit beside its
+           * key the way a short scalar does
+           */ format?: ((value: string, path: (string | number)[]) => string | {
+            html: string;
+            inline?: boolean;
+        } | undefined) | undefined;
         /**
            * leaf values longer than this many characters are cut off with an ellipsis,
            * after `format` has had its say; set Infinity if you really want it all

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",