@dosgato/dialog 0.0.28 → 0.0.30

package/FieldChooserLink.svelte

@@ -1,6 +1,6 @@
-<script>import { FORM_CONTEXT } from '@txstate-mws/svelte-forms';
+<script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
-import { randomid } from 'txstate-utils';
+import { isNotBlank, randomid } from 'txstate-utils';
 import { Chooser, ChooserStore, CHOOSER_API_CONTEXT } from './chooser';
 import Details from './chooser/Details.svelte';
 import Thumbnail from './chooser/Thumbnail.svelte';
@@ -21,7 +21,9 @@ export let initialSource = undefined;
 export let initialPath = undefined;
 export let helptext = undefined;
 const formStore = getContext(FORM_CONTEXT);
-const value = formStore.getField(path);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+const value = formStore.getField(finalPath);
 const chooserClient = getContext(CHOOSER_API_CONTEXT);
 const store = new ChooserStore(chooserClient);
 const descid = randomid();
@@ -55,7 +57,8 @@ async function userUrlEntry() {
         id: newVal,
         url
     };
-    formStore.setField(path, newVal);
+    formStore.setField(finalPath, newVal);
+    formStore.dirtyField(finalPath);
 }
 let selectedAsset;
 async function updateSelected(..._) {

package/FieldCodeEditor.svelte

@@ -1,7 +1,8 @@
 <script>import { passActions } from '@txstate-mws/svelte-components';
-import { nullableSerialize, nullableDeserialize, FORM_CONTEXT, FormStore } from '@txstate-mws/svelte-forms';
+import { nullableSerialize, nullableDeserialize, FORM_CONTEXT, FormStore, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import CodeFlask from 'codeflask';
 import { getContext, onMount } from 'svelte';
+import { isNotBlank } from 'txstate-utils';
 import { getDescribedBy, FieldStandard } from './';
 let className = '';
 export { className as class };
@@ -10,7 +11,7 @@ export let path;
 export let label = '';
 export let notNull = false;
 export let defaultValue = notNull ? '' : undefined;
-export let rows = undefined;
+export let rows = 8;
 export let conditional = undefined;
 export let required = false;
 export let use = [];
@@ -18,13 +19,13 @@ export let inputelement = undefined;
 export let helptext = undefined;
 export let language;
 const store = getContext(FORM_CONTEXT);
-const value = store.getField(path);
+const inheritedPath = getContext(FORM_INHERITED_PATH);
+const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+const value = store.getField(finalPath);
 let editorelement;
 let flask;
-let codeValue = '';
 onMount(() => {
     flask = new CodeFlask(editorelement, { language, lineNumbers: true, areaId: id });
-    flask.onUpdate(code => { codeValue = code; });
     inputelement = editorelement.querySelector(`#${id}`);
     if (className)
         inputelement.classList.add(...className.split(' '));
@@ -60,6 +61,7 @@ function updateValidState(invalidIn, messagesIdIn) {
 
 <style>
   div {
+    position: relative;
     overflow: hidden;
     resize: vertical;
   }

package/FieldCodeEditor.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         label?: string;
         notNull?: boolean;
         defaultValue?: any;
-        rows?: number | undefined;
+        rows?: number;
         conditional?: boolean | undefined;
         required?: boolean;
         use?: HTMLActionEntry[];

package/FieldSelect.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         disabled?: boolean;
         choices: {
             label?: string;
-            value: string;
+            value: any;
             disabled?: boolean;
         }[];
         defaultValue?: any;

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