@dosgato/dialog 0.0.26 → 0.0.27

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/index.d.ts

@@ -27,10 +27,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

@@ -27,10 +27,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,10 +1,10 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "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",
@@ -59,6 +59,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",