@dosgato/dialog 0.0.28 → 0.0.29

package/Tab.svelte

@@ -1,19 +1,24 @@
-<script>import { getContext } from 'svelte';
+<script>import { derivedStore } from '@txstate-mws/svelte-store';
+import { getContext } from 'svelte';
 import Icon from './Icon.svelte';
 import { TabStore, TAB_CONTEXT } from './TabStore';
-export let title;
+export let name;
 const { store, onClick, onKeyDown, tabelements } = getContext(TAB_CONTEXT);
 const accordion = store.accordion();
-const current = store.currentTitle();
-$: active = $current === title;
-const idx = $store.tabs.findIndex(t => t.title === title);
+const current = store.currentName();
+const def = derivedStore(store, v => v.tabs.find(t => t.name === name));
+const title = derivedStore(def, 'title');
+const tabid = derivedStore(store, v => v.tabids[name]);
+const panelid = derivedStore(store, v => v.panelids[name]);
+$: active = $current === name;
+const idx = $store.tabs.findIndex(t => t.name === name);
 const last = idx === $store.tabs.length - 1;
 </script>
 
 {#if $accordion}
-  <div bind:this={tabelements[idx]} id={$store.tabids[title]} class="tabs-tab" class:last aria-selected={active} aria-controls={$store.panelids[title]} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{title}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
+  <div bind:this={tabelements[idx]} id={$tabid} class="tabs-tab" class:last aria-selected={active} aria-controls={$panelid} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{$title}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
 {/if}
-<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
+<div id={$panelid} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$tabid} class="tabs-panel" class:accordion={$accordion}>
   <slot />
 </div>
 

package/Tab.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title: string;
+        name: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/TabStore.d.ts

@@ -3,8 +3,8 @@ import type { ElementSize } from '@txstate-mws/svelte-components';
 import type { IconifyIcon } from '@iconify/svelte';
 export declare const TAB_CONTEXT: {};
 export interface TabDef {
-    name?: string;
-    title: string;
+    name: string;
+    title?: string;
     icon?: IconifyIcon;
     required?: boolean;
 }

package/TabStore.js

@@ -26,6 +26,7 @@ export class TabStore extends Store {
         v.tabids ??= {};
         v.panelids ??= {};
         for (const tab of v.tabs) {
+            tab.title ??= tab.name;
             v.tabids[tab.title] ??= randomid();
             v.panelids[tab.title] ??= randomid();
         }
@@ -35,16 +36,16 @@ export class TabStore extends Store {
         return derivedStore(this, v => v.current);
     }
     currentName() {
-        return derivedStore(this, v => v.tabs[v.current].name ?? v.tabs[v.current].title);
+        return derivedStore(this, v => v.tabs[v.current].name);
     }
     currentTitle() {
         return derivedStore(this, v => v.tabs[v.current].title);
     }
     currentTabId() {
-        return derivedStore(this, v => v.tabids[v.tabs[v.current].title]);
+        return derivedStore(this, v => v.tabids[v.tabs[v.current].name]);
     }
     currentPanelId() {
-        return derivedStore(this, v => v.panelids[v.tabs[v.current].title]);
+        return derivedStore(this, v => v.panelids[v.tabs[v.current].name]);
     }
     accordion() {
         return derivedStore(this, v => v.clientWidth < 500);
@@ -65,6 +66,6 @@ export class TabStore extends Store {
         this.update(v => ({ ...v, current: Math.min(v.tabs.length, Math.max(0, idx)) }));
     }
     activateName(name) {
-        this.update(v => ({ ...v, current: findIndex(v.tabs, t => t.name === name) ?? findIndex(v.tabs, t => t.title === name) ?? v.current }));
+        this.update(v => ({ ...v, current: findIndex(v.tabs, t => t.name === name) ?? v.current }));
     }
 }

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.28",
+  "version": "0.0.29",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.5",
     "@txstate-mws/svelte-forms": "^1.2.1",