@dosgato/dialog 0.0.61 → 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

@@ -80,7 +80,7 @@ onMount(async () => {
 const previewId = randomid();
 </script>
 
-<Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel" on:continue={onChoose}>
+<Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
   <section class="dialog-chooser-window">
     <header class="dialog-chooser-controls">
       {#if $sources.length > 1}
@@ -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>
@@ -106,7 +106,7 @@ const previewId = randomid();
       <Button class="upload" disabled={$selected?.type !== 'folder' || !(chooserClient.mayUpload?.($selected) ?? true)} on:click={() => { showuploader = true }}>Upload</Button>
     {/if}
     <Button cancel {describedby} on:click={() => dispatch('escape')}>Cancel</Button>
-    <Button class="primary" disabled={!$preview && required} describedby={previewId} on:click={() => dispatch('continue')}>Choose</Button>
+    <Button class="primary" disabled={!$preview && required} describedby={previewId} on:click={onChoose}>Choose</Button>
   </svelte:fragment>
   {#if showuploader && $selected?.type === 'folder' && chooserClient.upload}
     <UploadUI title="Upload to {$selected.path}" folder={$selected} uploader={chooserClient.upload.bind(chooserClient)} on:escape={() => { showuploader = false }} on:saved={onUploadComplete}/>

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

@@ -18,7 +18,6 @@ declare class __sveltets_Render<F> {
     };
     events(): {
         escape: CustomEvent<any>;
-        continue: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/UploadUI.svelte

@@ -47,6 +47,8 @@ async function onUploadSubmit() {
         for (let i = 0; i < uploadList.length; i++) {
             data.append('file' + i, uploadList[i]);
         }
+        // TODO: accept new list of children from uploader function and feed it
+        // to the tree instead of refreshing the tree
         await uploader(folder, uploadList, ratio => { uploadProgress = ratio; });
         uploadList = [];
         uploadError = undefined;

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