@dosgato/dialog 0.0.27 → 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/Switcher.svelte

@@ -13,7 +13,7 @@ export let horizontal = false;
 export let label;
 export let required = false;
 export let helptext = undefined;
-export let messages;
+export let messages = [];
 export let iptValue = choices[0].value;
 export let valid = false;
 export let invalid = false;

package/Switcher.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         label: string;
         required?: boolean;
         helptext?: string | undefined;
-        messages: Feedback[];
+        messages?: Feedback[];
         iptValue?: string;
         valid?: boolean;
         invalid?: boolean;

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';

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';

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