@dosgato/dialog 0.0.62 → 0.0.64

package/dist/FieldMultiselect.svelte

@@ -33,12 +33,11 @@ export let lookupByValue = async (val) => { const options = await getOptions(val
 export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
-// Each time we run getOptions we will save the value -> label mappings
-// that it finds, so that we can display labels on pills.
+/** Each time we run getOptions we will save the value -> label mappings that it finds, so that we can display labels on pills. */
 const valueToLabel = {};
 async function wrapGetOptions(search) {
     const opts = await getOptions(search);
-    /** If no options are returned with the search term, we can end up with an infinite loop the first time reactToValue calls wrapGetOptions */
+    /* If no options are returned with the search term, we can end up with an infinite loop the first time reactToValue calls wrapGetOptions */
     // if (opts.length === 0) opts = await getOptions('')
     for (const opt of opts) {
         valueToLabel[opt.value] = opt.label || opt.value;
@@ -54,10 +53,9 @@ onMount(async () => {
     await reactToValue(defaultValue);
     hasInit = true;
 });
-// If we get a value from the form that we haven't seen in the popup menu
-// yet, we won't have a label for it.
-// This function runs getOptions on any selected values for which the label
-// is currently unknown.
+/**
+If we get a value from the form that we haven't seen in the popup menu yet, we won't have a label for it.
+This function runs getOptions on any selected values for which the label is currently unknown. */
 async function reactToValue(value) {
     await Promise.all(value.map(async (v) => {
         if (!valueToLabel[v]) {
@@ -75,7 +73,11 @@ async function reactToValue(value) {
   <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
-      <MultiSelect {id} name={path} usePortal={portal} descid={getDescribedBy([messagesid, helptextid, extradescid])} {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur} />
+      <MultiSelect {id} name={path} usePortal={portal} descid={getDescribedBy([messagesid, helptextid, extradescid])}
+        {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions}
+        inputClass='multiselect-input'
+        on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}
+      />
     </div>
   </FieldStandard>
 {/if}
@@ -84,5 +86,8 @@ async function reactToValue(value) {
   .invalid {
     --multiselect-border: 1px solid red;
   }
+  :global(.multiselect-input) {
+    width: 100%
+  }
 
 </style>

package/dist/FileIcon.svelte

@@ -5,8 +5,7 @@ export let hiddenLabel = undefined;
 export let inline = false;
 export let width = '1em';
 export let height = width;
-export let vAlign = 'middle';
 $: icon = iconForMime(mime);
 </script>
 
-<Icon {icon} {hiddenLabel} {inline} {width} {height} {vAlign} />
+<Icon {icon} {hiddenLabel} {inline} {width} {height} />

package/dist/FileIcon.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         inline?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        vAlign?: "top" | "bottom" | "middle" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Icon.svelte

@@ -5,17 +5,20 @@
 -->
 <script>import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
 import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import Tooltip from './Tooltip.svelte';
 export let icon;
 /** Label used in a `<ScreenReaderOnly>`. */
 export let hiddenLabel = undefined;
 export let inline = false;
 export let width = '1em';
 export let height = width;
-export let vAlign = 'middle';
+export let tooltip = undefined;
 </script>
 
 {#if icon}
-  <Icon {icon} {inline} {width} {height} {vAlign} aria-hidden={!hiddenLabel} />
+  <Tooltip tip={tooltip} top>
+    <Icon {icon} {inline} {width} {height} aria-hidden={!hiddenLabel} />
+  </Tooltip>
   {#if hiddenLabel}
     <ScreenReaderOnly>{hiddenLabel}</ScreenReaderOnly>
   {/if}

package/dist/Icon.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         inline?: boolean | undefined;
         width?: string | number | undefined;
         height?: string | number | undefined;
-        vAlign?: "top" | "bottom" | "middle" | undefined;
+        tooltip?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Tooltip.svelte

@@ -0,0 +1,60 @@
+<script>export let tip = undefined;
+export let top = false;
+export let right = false;
+export let bottom = false;
+export let left = false;
+export let active = false;
+export let color = "#fff";
+let style = `background-color: ${color}; border: 1px solid black;`;
+</script>
+
+<style>
+  .tooltip {
+    opacity: 0;
+    position: absolute;
+    z-index: 1;
+    visibility: hidden;
+    transition: opacity 150ms, visibility 150ms;
+  }
+  .default-tip {
+    padding: 4px 8px;
+    border-radius: 6px;
+    color: inherit;
+  }
+  .tooltip.top {
+    transform: translate(-40%, -100%);
+    margin-top: -20px;
+  }
+  .tooltip.active {
+    opacity: 1;
+    visibility: initial;
+  }
+  .tooltip-slot:hover + .tooltip {
+    opacity: 1;
+    visibility: initial;
+  }
+  .tip {
+    border: 1px solid #000;
+    background-color: #fff;
+  }
+
+</style>
+
+{#if tip}
+<div class="tooltip-wrapper">
+  <span class="tooltip-slot">
+    <slot />
+  </span>
+  <div
+    class="tooltip"
+    class:active
+    class:left
+    class:right
+    class:bottom
+    class:top>
+      <div class="default-tip tip">{tip}</div>
+  </div>
+</div>
+{:else}
+  <slot />
+{/if}

package/dist/Tooltip.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tip?: string | undefined;
+        top?: boolean | undefined;
+        right?: boolean | undefined;
+        bottom?: boolean | undefined;
+        left?: boolean | undefined;
+        active?: boolean | undefined;
+        color?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponentTyped<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/chooser/Chooser.svelte

@@ -90,7 +90,7 @@ const previewId = randomid();
     <section class="dialog-chooser-chooser">
       {#if $store.initialized}
         <Tree headers={[
-          { label: 'Path', id: 'name', grow: 4, icon: item => item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline), get: 'name' }
+          { label: 'Path', id: 'name', grow: 4, icon: item => ({ icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : applicationOutline) }), get: 'name' }
         ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
       {/if}
     </section>

package/dist/tree/TreeCell.svelte

@@ -2,12 +2,14 @@
 import { Icon } from '..';
 export let header;
 export let item;
-$: icon = typeof header.icon === 'function' ? header.icon(item) : header.icon;
+$: icon = (typeof header.icon === 'function' ? header.icon(item) : header.icon);
 $: headerComponent = header.component;
 </script>
 
-{#if header.icon}
-  <span class="icon"><Icon {icon} inline width="1.5em" /></span>
+{#if icon}
+  <span class="icon">
+    <Icon icon={icon.icon} tooltip={icon.label} inline width="1.5em" hiddenLabel={icon.label} />
+  </span>
 {/if}
 {#if header.component}
   <svelte:component this={headerComponent} {item} {header} />

package/dist/tree/treestore.d.ts

@@ -39,7 +39,13 @@ export interface TreeHeader<T extends TreeItemFromDB> {
     label: string;
     fixed?: string;
     grow?: number;
-    icon?: IconifyIcon | ((item: TypedTreeItem<T>) => IconifyIcon | undefined);
+    icon?: {
+        icon: IconifyIcon;
+        label?: string;
+    } | ((item: TypedTreeItem<T>) => {
+        icon: IconifyIcon;
+        label?: string;
+    } | undefined);
     get?: string;
     render?: (item: TypedTreeItem<T>) => string;
     component?: SvelteComponent;

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.62",
+  "version": "0.0.64",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",