@dosgato/dialog 0.0.16 → 0.0.18

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/FieldSelect.svelte

@@ -12,7 +12,7 @@ export let choices;
 export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
-export let inputelement;
+export let inputelement = undefined;
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>

package/FieldSelect.svelte.d.ts

@@ -16,7 +16,7 @@ declare const __propDef: {
         defaultValue?: any;
         conditional?: boolean | undefined;
         required?: boolean;
-        inputelement: HTMLSelectElement;
+        inputelement?: HTMLSelectElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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/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.16",
+  "version": "0.0.18",
   "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",