@dosgato/dialog 0.0.62 → 0.0.63

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 => item.type === 'asset' ? { icon: iconForMime(item.mime) } : (item.type === 'folder' ? (item.open ? { icon: folderNotchOpen } : { icon: folderIcon }) : { icon: applicationOutline }), get: 'name' }
         ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
       {/if}
     </section>

package/dist/tree/TreeCell.svelte

@@ -1,13 +1,16 @@
-<script>import { get } from 'txstate-utils';
+<script>import { get, titleCase } from 'txstate-utils';
 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).icon : header.icon?.icon;
+$: iconLabel = typeof header.icon === 'function' ? header.icon(item).label : header.icon?.label;
 $: headerComponent = header.component;
 </script>
 
 {#if header.icon}
-  <span class="icon"><Icon {icon} inline width="1.5em" /></span>
+  <span class="icon">
+    <Icon {icon} tooltip={iconLabel} inline width="1.5em" hiddenLabel={iconLabel} />
+  </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 | undefined;
+    } | ((item: TypedTreeItem<T>) => {
+        icon: IconifyIcon;
+        label?: string;
+    });
     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.63",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",