@dosgato/dialog 0.0.18 → 0.0.20

package/Tabs.svelte

@@ -1,20 +1,33 @@
-<script>import { modifierKey, resize } from '@txstate-mws/svelte-components';
-import { setContext } from 'svelte';
+<script>import { modifierKey, resize, offset } from '@txstate-mws/svelte-components';
+import { Store } from '@txstate-mws/svelte-store';
+import { getContext, setContext } from 'svelte';
 import { roundTo } from 'txstate-utils';
+import { DIALOG_TABS_CONTEXT } from './Dialog.svelte';
 import Icon from './Icon.svelte';
 import { TabStore, TAB_CONTEXT } from './TabStore';
 export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
+// TODO: react to tabs prop changing
+const activeStore = new Store({});
 const tabelements = [];
+let activeelement;
 setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
-const current = store.currentTitle();
+const dialogContext = getContext(DIALOG_TABS_CONTEXT);
+dialogContext.onNext = () => { store.right(); };
+dialogContext.onPrev = () => { store.left(); };
+$: dialogContext.prevTitle = $store.prevTitle;
+$: dialogContext.nextTitle = $store.nextTitle;
+$: dialogContext.hasRequired = $store.requireNext;
+$: dialogContext.change($store);
+setContext(DIALOG_TABS_CONTEXT, {}); // reset context so that any sub-tabs do NOT control the Dialog component
+const currentTitle = store.currentTitle();
+const currentIdx = store.currentIdx();
 const accordion = store.accordion();
 $: cols = Math.min(Math.floor($store.clientWidth / 90), $store.tabs.length);
 $: scalefactor = Math.min(roundTo($store.clientWidth / (cols * 130), 4), 1);
-$: width = `calc(${100 / cols}% + 1px)`;
-$: widthleft = `${100 / cols}%`;
 $: wrapping = cols !== $store.tabs.length;
+$: dialogContext.hasTabs = !$accordion;
 function onClick(idx) {
     return () => store.activate(idx);
 }
@@ -50,17 +63,34 @@ function onKeyDown(idx) {
 function isActive(idx, activeidx) {
     return idx === (activeidx ?? 0);
 }
-$: active = $current;
+const activeOversize = 2;
+async function reactToCurrent(..._) {
+    if (!activeelement)
+        return;
+    const tabelement = tabelements[$currentIdx];
+    if (!tabelement)
+        return;
+    const span = tabelement.querySelector(':scope > span');
+    if (!span)
+        return;
+    const left = span.offsetLeft - activeelement.offsetLeft - activeOversize;
+    const width = span.offsetWidth + (activeOversize * 2);
+    activeelement.style.transform = `translateX(${left}px)`;
+    activeelement.style.width = `${width}px`;
+}
+$: active = $currentTitle;
+$: reactToCurrent($activeStore);
 </script>
 
 {#if !$accordion}
-  <ul use:resize={{ store }} class="dialog-tab-buttons" role="tablist">
+  <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
     {#each $store.tabs as tab, idx (tab.title)}
-    {@const active = isActive(idx, $store.current)}
-    {@const left = idx % cols === 0}
-    <li bind:this={tabelements[idx]} id={$store.tabids[tab.title]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} style:width={left ? widthleft : width} aria-selected={active} aria-controls={$store.panelids[tab.title]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={tab.icon} inline />{tab.title}</li>
+      {@const active = isActive(idx, $store.current)}
+      {@const left = idx % cols === 0}
+      <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.title]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.title]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
     {/each}
   </ul>
+  <div bind:this={activeelement} class="tabs-active"></div>
   <slot current={$store.current} />
 {:else}
   <div use:resize={{ store }} class="tabs-container">
@@ -70,6 +100,7 @@ $: active = $current;
 
 <style>
   .tabs-container {
+    position: relative;
     display: flex;
     flex-wrap: wrap;
     border-radius: var(--tabs-radius, 0.6em);
@@ -84,22 +115,38 @@ $: active = $current;
     list-style-type: none;
     display: flex;
     flex-wrap: wrap;
+    justify-content: flex-start;
+    font-size: 0.9em;
   }
   li, .tabs-container :global(.tabs-tab) {
-    padding: var(--tabs-padding, 0.7em 1em);
+    padding: var(--tabs-padding-vert, 0.7em) var(--tabs-padding-hori, 1em);
     cursor: pointer;
     word-break: break-word;
-  }
-  li {
-    border: var(--tabs-border, 1px solid #666666);
-    border-top-left-radius: var(--tabs-radius, 0.6em);
-    border-top-right-radius: var(--tabs-radius, 0.6em);
+    text-transform: uppercase;
+    font-weight: 500;
+    color: var(--tabs-text, #363534)
   }
   li:not(.left) {
     margin-left: -1px;
   }
+
   li:global(.tabs-tab[aria-selected="true"]), .tabs-container :global(.tabs-tab[aria-selected="true"]) {
-    color: var(--tabs-active-text, #ffffff);
-    background-color: var(--tabs-active-bg, #333333);
+    font-weight: 700;
+  }
+
+  .tabs-active {
+    background: var(--dg-tabs-active, var(--dg-button-bg, #501214));
+    height: 3px;
+    border-radius: 2px;
+    overflow: hidden;
+    width: 0px;
+    margin-top: calc(-1 * var(--tabs-padding-vert, 0.7em));
+    margin-bottom: var(--tabs-padding-vert, 0.7em);
+    transition: 0.2s transform;
+  }
+  @media (prefers-reduced-motion) {
+    .tabs-active {
+      transition: none;
+    }
   }
 </style>

package/Tabs.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import { TabStore } from './TabStore';
+import { TabStore, type TabDef } from './TabStore';
 declare const __propDef: {
     props: {
-        tabs: {
-            title: string;
-        }[];
+        tabs: TabDef[];
         active?: string | undefined;
         store?: TabStore;
     };

package/chooser/Chooser.svelte

@@ -92,7 +92,7 @@ onMount(async () => {
         </ul>
       </Loading>
     </section>
-    <section class="dialog-chooser-preview" tabindex={$preview ? 0 : -1}>
+    <section class="dialog-chooser-preview" tabindex="-1">
       {#if $preview}
         <Thumbnail item={$preview} />
         <Details item={$preview}>

package/chooser/Details.svelte

@@ -2,7 +2,7 @@
 export let item;
 </script>
 
-<ul class="dialog-chooser-info">
+<ul class="dialog-chooser-info" aria-live="polite">
   {#if item.type !== 'raw'}
     <li>{item.name}</li>
   {/if}

package/fileIcons.d.ts

@@ -1 +1,2 @@
-export declare function iconForMime(mime: string): import("@iconify/types").IconifyIcon;
+import type { IconifyIcon } from '@iconify/svelte';
+export declare function iconForMime(mime: string): IconifyIcon;

package/helpers.d.ts

@@ -0,0 +1 @@
+export declare function getDescribedBy(ids: string[]): string;

package/helpers.js

@@ -0,0 +1,5 @@
+import { isNotBlank } from 'txstate-utils';
+export function getDescribedBy(ids) {
+    const descby = ids.filter(isNotBlank).join(' ');
+    return isNotBlank(descby) ? descby : null;
+}

package/iconpicker/FieldIconPicker.svelte

@@ -73,10 +73,10 @@ function onSelectCategory() {
 }
 function onKeyDown(e) {
     const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon);
-    let newIndex;
     if (modifierKey(e))
         return;
-    else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    let newIndex;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
         e.preventDefault();
         if (currentSelectionIndex === visibleIcons.length - 1) {
             newIndex = 0;
@@ -124,11 +124,11 @@ function onKeyDown(e) {
               {/each}
             </select>
           </div>
-          <fieldset tabindex="0">
+          <fieldset>
             <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
-            <div class="icon-picker-items" role="radiogroup" on:keydown={onKeyDown}>
+            <div class="icon-picker-items" role="radiogroup">
               {#each visibleIcons as icon, idx (icon.class)}
-                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}>
+                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}  on:keydown={onKeyDown}>
                   <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
                   <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
                 </div>
@@ -253,4 +253,4 @@ function onKeyDown(e) {
       line-height: 250px;
       color: #999;
   }
-</style>
+</style>

package/index.d.ts

@@ -1,5 +1,7 @@
+export { default as Button } from './Button.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
+export { default as Dialog } from './Dialog.svelte';
 export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
@@ -18,6 +20,7 @@ export { default as FieldText } from './FieldText.svelte';
 export { default as FieldTextArea } from './FieldTextArea.svelte';
 export { default as FileIcon } from './FileIcon.svelte';
 export { default as Form } from './Form.svelte';
+export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';
 export { default as InlineMessages } from './InlineMessages.svelte';
@@ -31,3 +34,4 @@ export * from './fileIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
+export * from './helpers.js';

package/index.js

@@ -1,5 +1,7 @@
+export { default as Button } from './Button.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
+export { default as Dialog } from './Dialog.svelte';
 export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
@@ -18,6 +20,7 @@ export { default as FieldText } from './FieldText.svelte';
 export { default as FieldTextArea } from './FieldTextArea.svelte';
 export { default as FileIcon } from './FileIcon.svelte';
 export { default as Form } from './Form.svelte';
+export { default as FormDialog } from './FormDialog.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';
 export { default as InlineMessages } from './InlineMessages.svelte';
@@ -31,3 +34,4 @@ export * from './fileIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
+export * from './helpers.js';

package/package.json

@@ -1,34 +1,36 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.0",
-    "@txstate-mws/svelte-forms": ">=0.0.22",
-    "@iconify/svelte": "^2.2.1",
+    "@txstate-mws/svelte-components": "^1.3.4",
+    "@txstate-mws/svelte-forms": "^1.1.2",
+    "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "txstate-utils": "^1.7.3"
+    "txstate-utils": "^1.7.12"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
-    "@sveltejs/package": "next",
-    "eslint-config-standard-with-typescript": "^21.0.1",
-    "eslint-plugin-svelte3": "^3.2.1",
+    "@sveltejs/package": "^1.0.0-next.5",
+    "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",
-    "svelte2tsx": "^0.4.14",
+    "svelte2tsx": "^0.5.20",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
+    "./Button.svelte": "./Button.svelte",
     "./ButtonGroup.svelte": "./ButtonGroup.svelte",
     "./Checkbox.svelte": "./Checkbox.svelte",
     "./Container.svelte": "./Container.svelte",
+    "./Dialog.svelte": "./Dialog.svelte",
     "./FieldAutocomplete.svelte": "./FieldAutocomplete.svelte",
     "./FieldCheckbox.svelte": "./FieldCheckbox.svelte",
     "./FieldChoices.svelte": "./FieldChoices.svelte",
@@ -48,6 +50,7 @@
     "./FieldTextArea.svelte": "./FieldTextArea.svelte",
     "./FileIcon.svelte": "./FileIcon.svelte",
     "./Form.svelte": "./Form.svelte",
+    "./FormDialog.svelte": "./FormDialog.svelte",
     "./Icon.svelte": "./Icon.svelte",
     "./InlineMessage.svelte": "./InlineMessage.svelte",
     "./InlineMessages.svelte": "./InlineMessages.svelte",
@@ -66,10 +69,11 @@
     "./chooser/Page.svelte": "./chooser/Page.svelte",
     "./chooser/Thumbnail.svelte": "./chooser/Thumbnail.svelte",
     "./chooser": "./chooser/index.js",
-    "./colorpicker/FieldColorPIcker.svelte": "./colorpicker/FieldColorPIcker.svelte",
+    "./colorpicker/FieldColorPicker.svelte": "./colorpicker/FieldColorPicker.svelte",
     "./colorpicker/colorpicker": "./colorpicker/colorpicker.js",
     "./colorpicker": "./colorpicker/index.js",
     "./fileIcons": "./fileIcons.js",
+    "./helpers": "./helpers.js",
     "./iconpicker/FieldIconPicker.svelte": "./iconpicker/FieldIconPicker.svelte",
     "./iconpicker/iconpicker": "./iconpicker/iconpicker.js",
     "./iconpicker": "./iconpicker/index.js",