@dosgato/dialog 0.0.17 → 0.0.19

package/FieldIdentifier.svelte

@@ -0,0 +1,9 @@
+<script>import { Field, nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+import { randomid } from 'txstate-utils';
+export let path;
+export let conditional = undefined;
+</script>
+
+<Field {path} {conditional} defaultValue={randomid()} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value>
+  <input type="hidden" name={path} {value}>
+</Field>

package/FieldIdentifier.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+        conditional?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldIdentifierProps = typeof __propDef.props;
+export declare type FieldIdentifierEvents = typeof __propDef.events;
+export declare type FieldIdentifierSlots = typeof __propDef.slots;
+export default class FieldIdentifier extends SvelteComponentTyped<FieldIdentifierProps, FieldIdentifierEvents, FieldIdentifierSlots> {
+}
+export {};

package/Listbox.svelte

@@ -122,6 +122,7 @@ function focusListbox() {
   <span id={labelId}>{label}</span>
   <ul bind:this={listboxElement} role="listbox" id={listId} class="listbox-items" tabindex="0" aria-describedby={descid} aria-labelledby={labelId} aria-multiselectable={multiselect} on:keydown={onkeydown} on:focus={focusListbox}>
     {#each items as item, i (item.value)}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <li
         bind:this={itemelements[i]}
         id={`${listId}-${i}`}

package/Tab.svelte

@@ -13,7 +13,7 @@ const last = idx === $store.tabs.length - 1;
 {#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>
 {/if}
-<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="0" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
+<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="-1" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
   <slot />
 </div>
 

package/chooser/Chooser.svelte

@@ -92,7 +92,7 @@ onMount(async () => {
         </ul>
       </Loading>
     </section>
-    <section class="dialog-chooser-preview" tabindex={$preview ? 0 : -1}>
+    <section class="dialog-chooser-preview" tabindex="-1">
       {#if $preview}
         <Thumbnail item={$preview} />
         <Details item={$preview}>

package/chooser/Details.svelte

@@ -2,7 +2,7 @@
 export let item;
 </script>
 
-<ul class="dialog-chooser-info">
+<ul class="dialog-chooser-info" aria-live="polite">
   {#if item.type !== 'raw'}
     <li>{item.name}</li>
   {/if}

package/colorpicker/FieldColorPicker.svelte

@@ -0,0 +1,43 @@
+<script>import FieldStandard from '../FieldStandard.svelte';
+import { keyby } from 'txstate-utils';
+export let id = undefined;
+let className = '';
+export { className as class };
+export let path;
+export let options;
+export let label = '';
+export let required = false;
+export let disabled = false;
+export let notNull = false;
+export let defaultValue = notNull ? options[0].value : undefined;
+export let conditional = undefined;
+export let placeholder = 'Select' + (label ? ' ' + label : '');
+export let inputelement = undefined;
+const colorsByValue = keyby(options, 'value');
+</script>
+
+<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:id let:value let:valid let:invalid let:onBlur let:onChange>
+  <div class="flex-color-container">
+    <div class="selected-color" style="background-color: { value ? colorsByValue[value].color : 'transparent' }"/>
+    <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid>
+      {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
+      {#each options as option (option.value) }
+        <option value={option.value} selected={value === option.value}>{option.name || option.value}</option>
+      {/each}
+    </select>
+  </div>
+</FieldStandard>
+
+<style>
+  .flex-color-container {
+    display: flex;
+    align-items: center;
+  }
+  .selected-color {
+    height: 2em;
+    width: 2em;
+    margin-right: 1em;
+    border: 1px solid #6d6d6d;
+    border-radius: 3px;
+  }
+</style>

package/colorpicker/FieldColorPicker.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ColorPickerOption } from './colorpicker';
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        class?: string;
+        path: string;
+        options: ColorPickerOption[];
+        label?: string;
+        required?: boolean;
+        disabled?: boolean;
+        notNull?: boolean;
+        defaultValue?: any;
+        conditional?: boolean | undefined;
+        placeholder?: string;
+        inputelement?: HTMLSelectElement;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldColorPickerProps = typeof __propDef.props;
+export declare type FieldColorPickerEvents = typeof __propDef.events;
+export declare type FieldColorPickerSlots = typeof __propDef.slots;
+export default class FieldColorPicker extends SvelteComponentTyped<FieldColorPickerProps, FieldColorPickerEvents, FieldColorPickerSlots> {
+}
+export {};

package/colorpicker/colorpicker.d.ts

@@ -0,0 +1,5 @@
+export interface ColorPickerOption {
+    name: string;
+    color: string;
+    value: string;
+}

package/colorpicker/colorpicker.js

@@ -0,0 +1 @@
+export {};

package/colorpicker/index.d.ts

@@ -0,0 +1 @@
+export { default as FieldColorPicker } from './FieldColorPicker.svelte';

package/colorpicker/index.js

@@ -0,0 +1 @@
+export { default as FieldColorPicker } from './FieldColorPicker.svelte';

package/fileIcons.js

@@ -1,47 +1,47 @@
-import archiveOutline from '@iconify-icons/mdi/archive-outline.js';
-import fileCodeOutline from '@iconify-icons/mdi/file-code-outline.js';
-import fileDocumentOutline from '@iconify-icons/mdi/file-document-outline.js';
-import fileMusicOutline from '@iconify-icons/mdi/file-music-outline.js';
-import fileOutline from '@iconify-icons/mdi/file-outline.js';
-import fileTableOutline from '@iconify-icons/mdi/file-table-outline.js';
-import fileVideoOutline from '@iconify-icons/mdi/file-video-outline.js';
-import fileImageOutline from '@iconify-icons/mdi/file-image-outline.js';
-import microsoftExcel from '@iconify-icons/mdi/microsoft-excel.js';
-import microsoftWord from '@iconify-icons/mdi/microsoft-word.js';
-import noteTextOutline from '@iconify-icons/mdi/note-text-outline.js';
+import archiveLight from '@iconify-icons/ph/archive-light.js';
+import fileCodeLight from '@iconify-icons/ph/file-code-light.js';
+import fileTextLight from '@iconify-icons/ph/file-text-light.js';
+import fileAudioLight from '@iconify-icons/ph/file-audio-light.js';
+import filePdfLight from '@iconify-icons/ph/file-pdf-light';
+import fileLight from '@iconify-icons/ph/file-light.js';
+import fileCsvLight from '@iconify-icons/ph/file-csv-light.js';
+import fileVideoLight from '@iconify-icons/ph/file-video-light.js';
+import fileImageLight from '@iconify-icons/ph/file-image-light.js';
+import microsoftExcel from '@iconify-icons/ph/file-xls-light.js';
+import microsoftWord from '@iconify-icons/ph/file-doc-light.js';
 const fileIconsByMime = {
     'application/vnd.ms-excel': microsoftExcel,
     'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': microsoftExcel,
     'application/vnd.oasis.opendocument.spreadsheet': microsoftExcel,
-    'text/csv': fileTableOutline,
+    'text/csv': fileCsvLight,
     'application/msword': microsoftWord,
     'application/vnd.openxmlformats-officedocument.wordprocessingml.document': microsoftWord,
     'application/vnd.oasis.opendocument.text': microsoftWord,
     'application/rtf': microsoftWord,
-    'application/pdf': fileDocumentOutline,
-    'application/json': fileCodeOutline,
-    'application/x-httpd-php': fileCodeOutline,
-    'application/x-sh': fileCodeOutline,
-    'application/xml': fileCodeOutline,
-    'text/css': fileCodeOutline,
-    'text/html': fileCodeOutline,
-    'text/javascript': fileCodeOutline,
-    'application/gzip': archiveOutline,
-    'application/java-archive': archiveOutline,
-    'application/zip': archiveOutline,
-    'application/vnd.apple.installer+xml': archiveOutline,
-    'application/vnd.rar': archiveOutline,
-    'application/x-7z-compressed': archiveOutline,
-    'application/x-bzip': archiveOutline,
-    'application/x-bzip2': archiveOutline,
-    'application/x-tar': archiveOutline
+    'application/pdf': filePdfLight,
+    'application/json': fileCodeLight,
+    'application/x-httpd-php': fileCodeLight,
+    'application/x-sh': fileCodeLight,
+    'application/xml': fileCodeLight,
+    'text/css': fileCodeLight,
+    'text/html': fileCodeLight,
+    'text/javascript': fileCodeLight,
+    'application/gzip': archiveLight,
+    'application/java-archive': archiveLight,
+    'application/zip': archiveLight,
+    'application/vnd.apple.installer+xml': archiveLight,
+    'application/vnd.rar': archiveLight,
+    'application/x-7z-compressed': archiveLight,
+    'application/x-bzip': archiveLight,
+    'application/x-bzip2': archiveLight,
+    'application/x-tar': archiveLight
 };
 const prefixes = {
-    image: fileImageOutline,
-    text: noteTextOutline,
-    video: fileVideoOutline,
-    audio: fileMusicOutline
+    image: fileImageLight,
+    text: fileTextLight,
+    video: fileVideoLight,
+    audio: fileAudioLight
 };
 export function iconForMime(mime) {
-    return fileIconsByMime[mime] ?? prefixes[mime.split('/', 2)[0]] ?? fileOutline;
+    return fileIconsByMime[mime] ?? prefixes[mime.split('/', 2)[0]] ?? fileLight;
 }

package/iconpicker/FieldIconPicker.svelte

@@ -73,10 +73,10 @@ function onSelectCategory() {
 }
 function onKeyDown(e) {
     const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon);
-    let newIndex;
     if (modifierKey(e))
         return;
-    else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    let newIndex;
+    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
         e.preventDefault();
         if (currentSelectionIndex === visibleIcons.length - 1) {
             newIndex = 0;
@@ -124,11 +124,11 @@ function onKeyDown(e) {
               {/each}
             </select>
           </div>
-          <fieldset tabindex="0">
+          <fieldset>
             <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
-            <div class="icon-picker-items" role="radiogroup" on:keydown={onKeyDown}>
+            <div class="icon-picker-items" role="radiogroup">
               {#each visibleIcons as icon, idx (icon.class)}
-                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}>
+                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}  on:keydown={onKeyDown}>
                   <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
                   <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
                 </div>
@@ -253,4 +253,4 @@ function onKeyDown(e) {
       line-height: 250px;
       color: #999;
   }
-</style>
+</style>

package/index.d.ts

@@ -30,3 +30,4 @@ export * from './chooser/index.js';
 export * from './fileIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
+export * from './colorpicker/index.js';

package/index.js

@@ -30,3 +30,4 @@ export * from './chooser/index.js';
 export * from './fileIcons.js';
 export * from './TabStore.js';
 export * from './iconpicker/index.js';
+export * from './colorpicker/index.js';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.0",
-    "@txstate-mws/svelte-forms": "^0.0.21",
+    "@txstate-mws/svelte-forms": ">=0.0.22",
     "@iconify/svelte": "^2.2.1",
     "@iconify-icons/mdi": "^1.2.22",
+    "@iconify-icons/ph": "^1.2.2",
     "txstate-utils": "^1.7.3"
   },
   "devDependencies": {
@@ -36,6 +37,7 @@
     "./FieldDateTime.svelte": "./FieldDateTime.svelte",
     "./FieldDualListbox.svelte": "./FieldDualListbox.svelte",
     "./FieldHidden.svelte": "./FieldHidden.svelte",
+    "./FieldIdentifier.svelte": "./FieldIdentifier.svelte",
     "./FieldMultiple.svelte": "./FieldMultiple.svelte",
     "./FieldMultiselect.svelte": "./FieldMultiselect.svelte",
     "./FieldNumber.svelte": "./FieldNumber.svelte",
@@ -64,6 +66,9 @@
     "./chooser/Page.svelte": "./chooser/Page.svelte",
     "./chooser/Thumbnail.svelte": "./chooser/Thumbnail.svelte",
     "./chooser": "./chooser/index.js",
+    "./colorpicker/FieldColorPicker.svelte": "./colorpicker/FieldColorPicker.svelte",
+    "./colorpicker/colorpicker": "./colorpicker/colorpicker.js",
+    "./colorpicker": "./colorpicker/index.js",
     "./fileIcons": "./fileIcons.js",
     "./iconpicker/FieldIconPicker.svelte": "./iconpicker/FieldIconPicker.svelte",
     "./iconpicker/iconpicker": "./iconpicker/iconpicker.js",