@dosgato/dialog 0.0.26 → 0.0.28

package/FieldCodeEditor.svelte

@@ -0,0 +1,67 @@
+<script>import { passActions } from '@txstate-mws/svelte-components';
+import { nullableSerialize, nullableDeserialize, FORM_CONTEXT, FormStore } from '@txstate-mws/svelte-forms';
+import CodeFlask from 'codeflask';
+import { getContext, onMount } from 'svelte';
+import { getDescribedBy, FieldStandard } from './';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let notNull = false;
+export let defaultValue = notNull ? '' : undefined;
+export let rows = undefined;
+export let conditional = undefined;
+export let required = false;
+export let use = [];
+export let inputelement = undefined;
+export let helptext = undefined;
+export let language;
+const store = getContext(FORM_CONTEXT);
+const value = store.getField(path);
+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(' '));
+    inputelement.addEventListener('change', onChange);
+    updateValidState(invalid, messagesid);
+});
+$: flask?.updateCode($value ?? '');
+let invalid;
+let messagesid;
+let helptextid;
+let onChange;
+function setSlotProps(helptextidIn, onChangeIn) {
+    helptextid = helptextidIn;
+    onChange = onChangeIn;
+}
+function updateValidState(invalidIn, messagesIdIn) {
+    invalid = !!invalidIn;
+    messagesid = messagesIdIn;
+    inputelement?.setAttribute('aria-invalid', String(!!invalid));
+    const descby = getDescribedBy([messagesid, helptextid]);
+    if (descby)
+        inputelement?.setAttribute('aria-describedby', getDescribedBy([messagesid, helptextid]));
+    else
+        inputelement?.removeAttribute('aria-describedby');
+}
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  {@const _ = setSlotProps(helptextid, onChange)}
+  {@const __ = updateValidState(invalid, messagesid)}
+  <div bind:this={editorelement} style:height="{rows * 1.333}em" class:valid class:invalid on:paste on:focusout={onBlur} use:passActions={use}></div>
+</FieldStandard>
+
+<style>
+  div {
+    overflow: hidden;
+    resize: vertical;
+  }
+
+</style>

package/FieldCodeEditor.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        notNull?: boolean;
+        defaultValue?: any;
+        rows?: number | undefined;
+        conditional?: boolean | undefined;
+        required?: boolean;
+        use?: HTMLActionEntry[];
+        inputelement?: HTMLTextAreaElement;
+        helptext?: string | undefined;
+        language: 'js' | 'css' | 'html';
+    };
+    events: {
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldCodeEditorProps = typeof __propDef.props;
+export type FieldCodeEditorEvents = typeof __propDef.events;
+export type FieldCodeEditorSlots = typeof __propDef.slots;
+export default class FieldCodeEditor extends SvelteComponentTyped<FieldCodeEditorProps, FieldCodeEditorEvents, FieldCodeEditorSlots> {
+}
+export {};

package/FieldRadio.svelte

@@ -1,6 +1,5 @@
-<script>import { randomid } from 'txstate-utils';
-import FieldStandard from './FieldStandard.svelte';
-import Radio from './Radio.svelte';
+<script>import { Field } from '@txstate-mws/svelte-forms';
+import Switcher from './Switcher.svelte';
 let className = '';
 export { className as class };
 export let id = undefined;
@@ -16,44 +15,11 @@ export let helptext = undefined;
 export let number = false;
 export let date = false;
 export let datetime = false;
+export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
-const groupid = randomid();
-const width = '100%';
 </script>
 
-<FieldStandard bind:id descid={groupid} {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:helptextid let:serialize>
-  <div class="dialog-radio {className}" class:horizontal role="radiogroup" aria-labelledby={groupid} class:invalid>
-    {#each choices as choice, idx}
-      {@const radioid = `${path}.${idx}`}
-      {@const serializedValue = serialize(choice.value)}
-      <label for={radioid} style:width>
-        <Radio id={radioid} name={path} value={serializedValue} selected={value === serializedValue} disabled={choice.disabled} {onChange} {onBlur} {helptextid}/>
-        <span>{choice.label || serializedValue}</span>
-      </label>
-    {/each}
-  </div>
-</FieldStandard>
-
-<style>
-  .dialog-radio {
-    padding: 0.2em 0;
-  }
-  label {
-    margin-bottom: 0.7em;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  label:last-child {
-    margin-bottom: 0;
-  }
-  span {
-    margin-left: 0.45em;
-    max-width: calc(100% - 1.6em);
-  }
-  label :global(input[type="checkbox"]) {
-    transform: none;
-  }
-
-</style>
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize>
+  <Switcher bind:id class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
+</Field>

package/FieldRadio.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         number?: boolean;
         date?: boolean;
         datetime?: boolean;
+        boolean?: boolean;
         serialize?: (value: any) => string;
         deserialize?: (value: string) => any;
     };

package/FieldSelect.svelte

@@ -17,11 +17,12 @@ export let helptext = undefined;
 export let number = false;
 export let date = false;
 export let datetime = false;
+export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize>
   <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}

package/FieldSelect.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         number?: boolean;
         date?: boolean;
         datetime?: boolean;
+        boolean?: boolean;
         serialize?: (value: any) => string;
         deserialize?: (value: string) => any;
     };

package/FieldStandard.svelte

@@ -10,6 +10,7 @@ export let notNull = false;
 export let number = false;
 export let date = false;
 export let datetime = false;
+export let boolean = false;
 export let serialize = undefined;
 export let deserialize = undefined;
 export let conditional = undefined;
@@ -17,7 +18,7 @@ export let required = false;
 export let helptext = undefined;
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:path let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid let:serialize let:deserialize>
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:path let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid let:serialize let:deserialize>
   <Container {id} {label} {messages} {descid} {required} {helptext} let:messagesid let:helptextid>
     <slot {id} {path} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} {helptextid} {serialize} {deserialize} />
   </Container>

package/FieldStandard.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         number?: boolean;
         date?: boolean;
         datetime?: boolean;
+        boolean?: boolean;
         serialize?: (value: any) => string;
         deserialize?: (value: string) => any;
         conditional?: boolean | undefined;

package/Switcher.svelte

@@ -0,0 +1,67 @@
+<script>import { eq } from '@txstate-mws/svelte-components';
+import { Store } from '@txstate-mws/svelte-store';
+import { createEventDispatcher } from 'svelte';
+import { randomid } from 'txstate-utils';
+import Container from './Container.svelte';
+import Radio from './Radio.svelte';
+let className = '';
+export { className as class };
+export let id = randomid();
+export let name = randomid();
+export let choices;
+export let horizontal = false;
+export let label;
+export let required = false;
+export let helptext = undefined;
+export let messages = [];
+export let iptValue = choices[0].value;
+export let valid = false;
+export let invalid = false;
+export let onBlur = undefined;
+const dispatch = createEventDispatcher();
+const store = new Store({ width: 1000 });
+const groupid = randomid();
+function onChange(e) {
+    iptValue = this.value;
+    dispatch('change', iptValue);
+}
+$: columns = Math.floor($store.width / 250);
+$: width = (horizontal ? 100 / Math.min(choices.length, choices.length === 4 && columns === 3 ? 2 : columns) : 100) + '%';
+</script>
+<Container {id} {label} {messages} descid={groupid} {required} {helptext} let:helptextid>
+  <div class="dialog-radio {className}" use:eq={{ store }} class:horizontal role="radiogroup" aria-labelledby={groupid} class:valid class:invalid>
+    {#each choices as choice, idx}
+      {@const radioid = `${groupid}.${idx}`}
+      <label for={radioid} style:width>
+        <Radio id={radioid} {name} value={choice.value} selected={iptValue === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid}/>
+        <span>{choice.label || choice.value}</span>
+      </label>
+    {/each}
+  </div>
+</Container>
+
+<style>
+  .dialog-radio {
+    padding: 0.2em 0;
+  }
+  label {
+    margin-bottom: 0.7em;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    cursor: pointer;
+    width: 25%;
+  }
+  .dialog-radio:not(.horizontal) label:last-child {
+    margin-bottom: 0;
+  }
+  span {
+    margin-left: 0.45em;
+    max-width: calc(100% - 1.6em);
+  }
+  .horizontal {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+</style>

package/Switcher.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Feedback } from '@txstate-mws/svelte-forms';
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        name?: string;
+        choices: {
+            label?: string;
+            value: string;
+            disabled?: boolean;
+        }[];
+        horizontal?: boolean;
+        label: string;
+        required?: boolean;
+        helptext?: string | undefined;
+        messages?: Feedback[];
+        iptValue?: string;
+        valid?: boolean;
+        invalid?: boolean;
+        onBlur?: (() => void | Promise<void>);
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SwitcherProps = typeof __propDef.props;
+export type SwitcherEvents = typeof __propDef.events;
+export type SwitcherSlots = typeof __propDef.slots;
+export default class Switcher extends SvelteComponentTyped<SwitcherProps, SwitcherEvents, SwitcherSlots> {
+}
+export {};

package/Tabs.svelte

@@ -8,19 +8,21 @@ import { TabStore, TAB_CONTEXT } from './TabStore';
 export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
+export let disableDialogControl = false;
 $: store.update(v => ({ ...v, tabs }));
 const activeStore = new Store({});
 const tabelements = [];
 let activeelement;
 setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
-const dialogContext = getContext(DIALOG_TABS_CONTEXT) ?? { change: () => { } };
+const dialogContext = (disableDialogControl ? undefined : getContext(DIALOG_TABS_CONTEXT)) ?? { change: () => { } };
 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, { change: () => { } }); // reset context so that any sub-tabs do NOT control the Dialog component
+if (!disableDialogControl)
+    setContext(DIALOG_TABS_CONTEXT, { change: () => { } }); // 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();

package/Tabs.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         tabs: TabDef[];
         active?: string | undefined;
         store?: TabStore;
+        disableDialogControl?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/index.d.ts

@@ -7,6 +7,7 @@ export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
 export { default as FieldChooserLink } from './FieldChooserLink.svelte';
+export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';
 export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
@@ -27,10 +28,11 @@ export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';
 export { default as InlineMessages } from './InlineMessages.svelte';
 export { default as Input } from './Input.svelte';
+export { default as Listbox } from './Listbox.svelte';
 export { default as Radio } from './Radio.svelte';
+export { default as Switcher } from './Switcher.svelte';
 export { default as Tab } from './Tab.svelte';
 export { default as Tabs } from './Tabs.svelte';
-export { default as Listbox } from './Listbox.svelte';
 export * from './chooser/index.js';
 export * from './fileIcons.js';
 export * from './TabStore.js';

package/index.js

@@ -7,6 +7,7 @@ export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
 export { default as FieldChooserLink } from './FieldChooserLink.svelte';
+export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';
 export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
@@ -27,10 +28,11 @@ export { default as Icon } from './Icon.svelte';
 export { default as InlineMessage } from './InlineMessage.svelte';
 export { default as InlineMessages } from './InlineMessages.svelte';
 export { default as Input } from './Input.svelte';
+export { default as Listbox } from './Listbox.svelte';
 export { default as Radio } from './Radio.svelte';
+export { default as Switcher } from './Switcher.svelte';
 export { default as Tab } from './Tab.svelte';
 export { default as Tabs } from './Tabs.svelte';
-export { default as Listbox } from './Listbox.svelte';
 export * from './chooser/index.js';
 export * from './fileIcons.js';
 export * from './TabStore.js';

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.5",
-    "@txstate-mws/svelte-forms": "^1.2.0",
+    "@txstate-mws/svelte-forms": "^1.2.1",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
+    "codeflask": "^1.4.1",
     "txstate-utils": "^1.8.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@sveltejs/package": "^1.0.0-next.5",
+    "@types/codeflask": "^1.4.3",
     "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "svelte-check": "^2.2.6",
@@ -37,6 +39,7 @@
     "./FieldCheckbox.svelte": "./FieldCheckbox.svelte",
     "./FieldChoices.svelte": "./FieldChoices.svelte",
     "./FieldChooserLink.svelte": "./FieldChooserLink.svelte",
+    "./FieldCodeEditor.svelte": "./FieldCodeEditor.svelte",
     "./FieldDate.svelte": "./FieldDate.svelte",
     "./FieldDateTime.svelte": "./FieldDateTime.svelte",
     "./FieldDualListbox.svelte": "./FieldDualListbox.svelte",
@@ -59,6 +62,7 @@
     "./Input.svelte": "./Input.svelte",
     "./Listbox.svelte": "./Listbox.svelte",
     "./Radio.svelte": "./Radio.svelte",
+    "./Switcher.svelte": "./Switcher.svelte",
     "./Tab.svelte": "./Tab.svelte",
     "./TabStore": "./TabStore.js",
     "./Tabs.svelte": "./Tabs.svelte",