@dosgato/dialog 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/FieldChooserLink.svelte +10 -1
  2. package/dist/FieldIdentifier.svelte +12 -1
  3. package/dist/chooser/Chooser.svelte +88 -5
  4. package/dist/chooser/Thumbnail.svelte +33 -7
  5. package/dist/chooser/Thumbnail.svelte.d.ts +4 -0
  6. package/dist/chooser/icons.d.ts +2 -0
  7. package/dist/chooser/icons.js +40 -0
  8. package/dist/colorpicker/FieldColorPicker.svelte +35 -19
  9. package/package.json +1 -1
package/dist/FieldChooserLink.svelte CHANGED
@@ -204,7 +204,10 @@ $: updateSelected($value);
204
204
  flex-wrap: wrap;
205
205
  margin-bottom: 0.25em;
206
206
  font-size: 0.9em;
207
- align-items: center;
207
+ align-items: flex-start;
208
+ }
209
+ :global([data-eq~="400px"]) .dialog-chooser-container {
210
+ flex-direction: column;
208
211
  }
209
212
  div.dialog-chooser-container > :global(.dialog-chooser-thumbnail) {
210
213
  width: 8em;
@@ -220,6 +223,9 @@ $: updateSelected($value);
220
223
  max-width: calc(100% - 8.5em);
221
224
  flex-grow: 1;
222
225
  }
226
+ :global([data-eq~="400px"]) .dialog-chooser-right {
227
+ max-width: unset;
228
+ }
223
229
  .dialog-chooser-right button {
224
230
  margin-top: 0.5em;
225
231
  border: 0;
@@ -256,5 +262,8 @@ $: updateSelected($value);
256
262
  cursor: pointer;
257
263
  line-height: 1;
258
264
  }
265
+ :global([data-eq~="400px"] .dialog-chooser-container .dialog-chooser-thumbnail img) {
266
+ object-position: left;
267
+ }
259
268
 
260
269
  </style>
package/dist/FieldIdentifier.svelte CHANGED
@@ -1,10 +1,21 @@
1
1
  <script>import { Field, nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
2
2
  import { randomid } from 'txstate-utils';
3
+ import { onMount } from 'svelte';
3
4
  export let path;
4
5
  export let conditional = undefined;
5
6
  export let length = 10;
7
+ let val, stVal;
8
+ function updateValue(valu, sVal) {
9
+ val = valu;
10
+ stVal = sVal;
11
+ }
12
+ onMount(() => {
13
+ if (!val)
14
+ stVal(randomid(length));
15
+ });
6
16
  </script>
7
17
 
8
- <Field {path} {conditional} defaultValue={randomid(length)} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value>
18
+ <Field {path} {conditional} defaultValue={randomid(length)} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value let:setVal>
19
+ {@const _ = updateValue(value, setVal)}
9
20
  <input type="hidden" name={path} {value}>
10
21
  </Field>
package/dist/chooser/Chooser.svelte CHANGED
@@ -38,6 +38,7 @@ function onChoose() {
38
38
  }
39
39
  function onDeselect() {
40
40
  store.setPreview(undefined);
41
+ thumbnailExpanded = false;
41
42
  }
42
43
  function onUploadComplete() {
43
44
  treeStore.openAndRefresh($selected).catch(console.error);
@@ -78,13 +79,14 @@ onMount(async () => {
78
79
  await selectPreview(preloadPath);
79
80
  });
80
81
  const previewId = randomid();
82
+ let thumbnailExpanded = false;
81
83
  </script>
82
84
 
83
85
  <Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
84
86
  <section class="dialog-chooser-window">
85
87
  <header class="dialog-chooser-controls">
86
88
  {#if $sources.length > 1}
87
- <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} />
89
+ <Tabs bind:store={tabStore} tabs={$sources.map(s => ({ name: s.name, title: s.label ?? s.name }))} active={$preview?.source ?? $selected?.source ?? $source?.name ?? initialSource} accordionOnMobile={false}/>
88
90
  {/if}
89
91
  </header>
90
92
  <section class="dialog-chooser-chooser">
@@ -94,10 +96,20 @@ const previewId = randomid();
94
96
  ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
95
97
  {/if}
96
98
  </section>
97
- <section id={previewId} class="dialog-chooser-preview" tabindex="-1">
99
+ <section id={previewId} class="dialog-chooser-preview" class:image={$preview?.type === 'asset' && $preview.image} tabindex="-1">
98
100
  {#if $preview}
99
- <Thumbnail item={$preview} larger />
100
- <Details item={$preview} />
101
+ <Thumbnail item={$preview} larger expandable expanded={thumbnailExpanded} on:thumbnailsizechage={() => { thumbnailExpanded = !thumbnailExpanded }}/>
102
+ {#if !thumbnailExpanded}<Details item={$preview} />{/if}
103
+ {:else}
104
+ <section class="placeholder">
105
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371 181">
106
+ <g id="Group_2845" data-name="Group 2845" transform="translate(-34 -94)">
107
+ <rect id="Rectangle_2035" data-name="Rectangle 2035" width="371" height="181" transform="translate(34 94)" fill="#d8d8d8"/>
108
+ <path id="Icon_awesome-image" data-name="Icon awesome-image" d="M145.453,124.875H15.047A15.047,15.047,0,0,1,0,109.828V19.547A15.047,15.047,0,0,1,15.047,4.5H145.453A15.047,15.047,0,0,1,160.5,19.547v90.281A15.047,15.047,0,0,1,145.453,124.875ZM35.109,22.055A17.555,17.555,0,1,0,52.664,39.609,17.555,17.555,0,0,0,35.109,22.055ZM20.063,104.813H140.438V69.7L113,42.269a3.762,3.762,0,0,0-5.32,0L65.2,84.75l-17.4-17.4a3.762,3.762,0,0,0-5.32,0L20.063,89.766Z" transform="translate(139 119.5)" fill="#c7c7c7"/>
109
+ </g>
110
+ </svg>
111
+ <p>Select an item to preview it here.</p>
112
+ </section>
101
113
  {/if}
102
114
  </section>
103
115
  </section>
@@ -122,6 +134,8 @@ const previewId = randomid();
122
134
  align-items: stretch;
123
135
  justify-content: flex-end;
124
136
  overflow: hidden;
137
+ container-type: inline-size;
138
+ container-name: dosgato-dialog-chooser-window
125
139
  }
126
140
  .dialog-chooser-window * {
127
141
  box-sizing: border-box;
@@ -138,8 +152,12 @@ const previewId = randomid();
138
152
  width: 25%;
139
153
  max-width: 21em;
140
154
  height: calc(100% - 4em);
141
- padding: 1em;
155
+ padding: 0 1em 1em 1em;
142
156
  overflow-y: auto;
157
+ overflow-x: hidden;
158
+ }
159
+ .dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
160
+ display: none;
143
161
  }
144
162
  .dialog-chooser-controls {
145
163
  position: relative;
@@ -148,5 +166,70 @@ const previewId = randomid();
148
166
  :global(footer.actions .upload) {
149
167
  margin-right: auto;
150
168
  }
169
+ .placeholder {
170
+ position: relative;
171
+ }
172
+ .placeholder p {
173
+ position: absolute;
174
+ left: 50%;
175
+ top: 50%;
176
+ transform: translate(-50%, -50%);
177
+ font-weight: 600;
178
+ width: 90%;
179
+ margin: 0;
180
+ display: flex;
181
+ justify-content: center;
182
+ text-align: center;
183
+ }
184
+ @container dosgato-dialog-chooser-window (max-width: 800px) {
185
+ .dialog-chooser-controls {
186
+ order: 2;
187
+ }
188
+ .dialog-chooser-chooser {
189
+ order: 3;
190
+ width: 100%;
191
+ height: 50%;
192
+ }
193
+ .dialog-chooser-preview {
194
+ order: 1;
195
+ width: 100%;
196
+ max-width: unset;
197
+ padding: 0;
198
+ height: unset;
199
+ display: flex;
200
+ overflow: hidden;
201
+ }
202
+ .dialog-chooser-preview.image {
203
+ height: 25vh;
204
+ }
205
+ .dialog-chooser-preview :global(.dialog-chooser-thumbnail) {
206
+ max-width: 50%;
207
+ }
208
+ .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded) {
209
+ max-width: unset;
210
+ }
211
+ .dialog-chooser-preview :global(.dialog-chooser-thumbnail img) {
212
+ object-fit: cover;
213
+ object-position: center;
214
+ }
215
+ .dialog-chooser-preview :global(.dialog-chooser-thumbnail.expanded img) {
216
+ object-fit: scale-down;
217
+ width: unset;
218
+ }
219
+ .dialog-chooser-preview :global(.dialog-chooser-thumbnail button) {
220
+ display: block;
221
+ }
222
+ .dialog-chooser-preview :global(.dialog-chooser-info) {
223
+ width: 50%;
224
+ flex-direction: column;
225
+ flex-wrap: nowrap;
226
+ overflow-y: scroll;
227
+ }
228
+ .dialog-chooser-preview :global(.placeholder) {
229
+ width: 100%;
230
+ display: flex;
231
+ justify-content: center;
232
+ }
233
+ }
151
234
 
152
235
  </style>
package/dist/chooser/Thumbnail.svelte CHANGED
@@ -2,14 +2,30 @@
2
2
  import fileLinkOutline from '@iconify-icons/mdi/file-link-outline.js';
3
3
  import FileIcon from '../FileIcon.svelte';
4
4
  import Icon from '../Icon.svelte';
5
+ import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
6
+ import { collapseIconSVG, expandIconSVG } from './icons';
7
+ import { createEventDispatcher } from 'svelte';
5
8
  export let item;
6
9
  export let larger = false;
10
+ export let expandable = false;
11
+ export let expanded = false;
12
+ const dispatch = createEventDispatcher();
13
+ function toggleThumbnailSize() {
14
+ dispatch('thumbnailsizechage');
15
+ }
7
16
  </script>
8
-
9
- <div class="dialog-chooser-thumbnail">
17
+ <div class="dialog-chooser-thumbnail" class:expanded>
10
18
  {#if item.type === 'asset'}
11
19
  {#if item.image}
12
- <img src={(larger ? (item.image.previewUrl ?? item.image.thumbnailUrl) : (item.image.thumbnailUrl ?? item.image.previewUrl)) ?? item.url} alt="" />
20
+ <div style="position: relative; height: 100%;">
21
+ <img src={(larger ? (item.image.previewUrl ?? item.image.thumbnailUrl) : (item.image.thumbnailUrl ?? item.image.previewUrl)) ?? item.url} alt="" />
22
+ {#if expandable}
23
+ <button on:click={toggleThumbnailSize}>
24
+ {@html expanded ? collapseIconSVG : expandIconSVG}
25
+ <ScreenReaderOnly>{expanded ? 'View Image Details' : 'View Full Image'}</ScreenReaderOnly>
26
+ </button>
27
+ {/if}
28
+ </div>
13
29
  {:else}
14
30
  <FileIcon mime={item.mime} width='5em' />
15
31
  {/if}
@@ -24,13 +40,14 @@ export let larger = false;
24
40
  .dialog-chooser-thumbnail {
25
41
  position: relative;
26
42
  width: 100%;
27
- padding-top: 75%;
28
43
  margin-right: 0.5em;
44
+ margin-bottom: 0.5em;
29
45
  }
30
46
  .dialog-chooser-thumbnail img {
31
47
  width: 100%;
32
48
  height: 100%;
33
49
  object-fit: scale-down;
50
+ object-position: top;
34
51
  }
35
52
  .dialog-chooser-thumbnail :global(svg) {
36
53
  width: 80%;
@@ -39,10 +56,19 @@ export let larger = false;
39
56
  }
40
57
  .dialog-chooser-thumbnail > :global(*) {
41
58
  display: block;
59
+ }
60
+ .dialog-chooser-thumbnail button {
42
61
  position: absolute;
43
- top: 50%;
44
- left: 50%;
45
- transform: translate(-50%, -50%);
62
+ left: 0;
63
+ bottom: 0;
64
+ padding: 0;
65
+ background-color: transparent;
66
+ width: 2.5em;
67
+ border: 0;
68
+ }
69
+ .dialog-chooser-thumbnail button :global(svg) {
70
+ width: 100%;
71
+ height: 100%;
46
72
  }
47
73
 
48
74
  </style>
package/dist/chooser/Thumbnail.svelte.d.ts CHANGED
@@ -5,8 +5,12 @@ declare const __propDef: {
5
5
  props: {
6
6
  item: AnyItem | RawURL | BrokenURL;
7
7
  larger?: boolean | undefined;
8
+ expandable?: boolean | undefined;
9
+ expanded?: boolean | undefined;
8
10
  };
9
11
  events: {
12
+ thumbnailsizechage: CustomEvent<any>;
13
+ } & {
10
14
  [evt: string]: CustomEvent<any>;
11
15
  };
12
16
  slots: {};
package/dist/chooser/icons.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const collapseIconSVG = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 37 33\">\n <g id=\"Group_2847\" data-name=\"Group 2847\" transform=\"translate(-145 -259)\">\n <g id=\"Group_2844\" data-name=\"Group 2844\" transform=\"translate(107 8)\">\n <path id=\"Rectangle_2144\" data-name=\"Rectangle 2144\" d=\"M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z\" transform=\"translate(38 251)\" fill=\"#461314\"/>\n <g id=\"Component_2_4\" data-name=\"Component 2 \u2013 4\" transform=\"translate(43.803 254.77)\">\n <g id=\"Group_38\" data-name=\"Group 38\" transform=\"translate(0.5 0.5)\">\n <path id=\"Path_52\" data-name=\"Path 52\" d=\"M224.933,140.769\" transform=\"translate(-208.763 -132.536)\" fill=\"#fff\" stroke=\"#fff\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1\"/>\n <path id=\"Path_53\" data-name=\"Path 53\" d=\"M61.806,55.229a.47.47,0,0,0-.47.47v5.208l-7.4-7.407a.471.471,0,0,0-.665.666l7.384,7.389-5.141.071a.47.47,0,0,0,.013.94l6.289-.087a.469.469,0,0,0,.463-.47V55.7A.47.47,0,0,0,61.806,55.229Z\" transform=\"translate(-53.13 -53.362)\" fill=\"#fff\"/>\n <path id=\"Path_53_-_Outline\" data-name=\"Path 53 - Outline\" d=\"M53.6,52.862a.964.964,0,0,1,.687.285L60.836,59.7v-4a.97.97,0,1,1,1.94,0v6.31a.971.971,0,0,1-.958.97l-6.3.087a.97.97,0,0,1-.011-1.94l3.957-.055L52.914,54.52a.971.971,0,0,1,.686-1.657Z\" transform=\"translate(-53.13 -53.362)\" fill=\"#fff\"/>\n <path id=\"Path_54\" data-name=\"Path 54\" d=\"M223.42,53.943a.47.47,0,0,0-.665,0l-7.406,7.411-.072-5.183a.47.47,0,1,0-.94.013l.087,6.293a.469.469,0,0,0,.47.464H221.2a.47.47,0,0,0,0-.94h-5.166l7.387-7.392A.471.471,0,0,0,223.42,53.943Z\" transform=\"translate(-199.163 -53.764)\" fill=\"#fff\"/>\n <path id=\"Path_54_-_Outline\" data-name=\"Path 54 - Outline\" d=\"M223.087,53.305a.971.971,0,0,1,.686,1.657L217.239,61.5h3.96a.97.97,0,0,1,0,1.94h-6.306a.972.972,0,0,1-.97-.958l-.087-6.292a.97.97,0,0,1,.959-.984h.012a.973.973,0,0,1,.968.958l.055,4L222.4,53.59A.963.963,0,0,1,223.087,53.305Z\" transform=\"translate(-199.163 -53.764)\" fill=\"#fff\"/>\n <path id=\"Path_55\" data-name=\"Path 55\" d=\"M225.431,204.214\" transform=\"translate(-209.214 -190.005)\" fill=\"#fff\" stroke=\"#fff\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" stroke-width=\"1\"/>\n <path id=\"Path_56\" data-name=\"Path 56\" d=\"M223.859,224.095l-7.346-7.352,5.143-.071a.47.47,0,0,0-.013-.941l-6.289.087a.469.469,0,0,0-.464.47V222.6a.47.47,0,1,0,.94,0v-5.206l7.362,7.367a.471.471,0,0,0,.665-.666Z\" transform=\"translate(-199.666 -200.438)\" fill=\"#fff\"/>\n <path id=\"Path_56_-_Outline\" data-name=\"Path 56 - Outline\" d=\"M223.526,225.4a.964.964,0,0,1-.687-.285l-6.509-6.513v4a.97.97,0,1,1-1.94,0v-6.311a.972.972,0,0,1,.958-.97l6.3-.087a.97.97,0,0,1,.012,1.941l-3.96.055,6.51,6.515a.971.971,0,0,1-.686,1.657Z\" transform=\"translate(-199.666 -200.438)\" fill=\"#fff\"/>\n <path id=\"Path_57\" data-name=\"Path 57\" d=\"M62.542,216.473a.469.469,0,0,0-.47-.464H55.766a.47.47,0,0,0,0,.94h5.2l-7.37,7.375a.471.471,0,1,0,.666.666l7.352-7.358.071,5.145a.47.47,0,1,0,.94-.013Z\" transform=\"translate(-53.43 -200.689)\" fill=\"#fff\"/>\n <path id=\"Path_57_-_Outline\" data-name=\"Path 57 - Outline\" d=\"M55.766,215.509h6.307a.972.972,0,0,1,.969.959l.087,6.292a.97.97,0,0,1-.959.984h-.012a.973.973,0,0,1-.968-.958l-.055-3.96-6.515,6.52a.971.971,0,1,1-1.373-1.373l6.517-6.522h-4a.97.97,0,0,1,0-1.94Z\" transform=\"translate(-53.43 -200.689)\" fill=\"#fff\"/>\n </g>\n </g>\n </g>\n </g>\n </svg>\n";
2
+ export declare const expandIconSVG = "\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 37 33\">\n <g id=\"Group_2846\" data-name=\"Group 2846\" transform=\"translate(-36 -251)\">\n <path id=\"Rectangle_2144\" data-name=\"Rectangle 2144\" d=\"M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z\" transform=\"translate(36 251)\" fill=\"#461314\"/>\n <g id=\"Icon_ionic-ios-expand\" data-name=\"Icon ionic-ios-expand\" transform=\"translate(38.737 251.737)\">\n <path id=\"Path_1316\" data-name=\"Path 1316\" d=\"M7.339,6.142H11.9a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,11.9,4.5H5.315a.814.814,0,0,0-.815.815V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V7.339l6.869,6.822a.807.807,0,0,0,.575.235.789.789,0,0,0,.575-.241.814.814,0,0,0,0-1.15Z\" transform=\"translate(0 0)\" fill=\"#fff\"/>\n <path id=\"Path_1316_-_Outline\" data-name=\"Path 1316 - Outline\" d=\"M5.315,4.25H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,6.392H7.94l6.4,6.437a1.064,1.064,0,0,1,0,1.5,1.035,1.035,0,0,1-.752.314,1.054,1.054,0,0,1-.752-.308L6.392,7.94V11.9a1.067,1.067,0,0,1-1.065,1.065H5.315A1.067,1.067,0,0,1,4.25,11.9V5.315A1.067,1.067,0,0,1,5.315,4.25ZM11.9,5.892a.566.566,0,0,0,.565-.565V5.315A.566.566,0,0,0,11.9,4.75H5.315a.566.566,0,0,0-.565.565V11.9a.566.566,0,0,0,.565.565h.012a.566.566,0,0,0,.565-.565V6.738l7.3,7.245a.558.558,0,0,0,.4.162.542.542,0,0,0,.395-.164.565.565,0,0,0,0-.8L6.738,5.892Z\" transform=\"translate(0 0)\" fill=\"#fff\"/>\n <path id=\"Path_1317\" data-name=\"Path 1317\" d=\"M28.718,4.5H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h4.558l-6.822,6.869a.815.815,0,0,0,1.15,1.156l6.869-6.828V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,28.718,4.5Z\" transform=\"translate(-2.508 0)\" fill=\"#fff\"/>\n <path id=\"Path_1317_-_Outline\" data-name=\"Path 1317 - Outline\" d=\"M22.137,4.25h6.582a1.067,1.067,0,0,1,1.065,1.065V11.9a1.067,1.067,0,0,1-1.065,1.065h-.012A1.067,1.067,0,0,1,27.641,11.9V7.94l-6.443,6.4a1.065,1.065,0,0,1-1.5-1.51l6.4-6.442H22.137a1.067,1.067,0,0,1-1.065-1.065V5.315A1.067,1.067,0,0,1,22.137,4.25Zm6.582,8.212a.566.566,0,0,0,.565-.565V5.315a.566.566,0,0,0-.565-.565H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565H27.3l-7.245,7.3a.565.565,0,0,0,.8.8l7.3-7.252V11.9a.566.566,0,0,0,.565.565Z\" transform=\"translate(-2.508 0)\" fill=\"#fff\"/>\n <path id=\"Path_1318\" data-name=\"Path 1318\" d=\"M13.586,19.631a.807.807,0,0,0-.575.235L6.142,26.694V22.136a.814.814,0,0,0-.815-.815H5.315a.814.814,0,0,0-.815.815v6.582a.814.814,0,0,0,.815.815H11.9a.814.814,0,0,0,.815-.815v-.012a.814.814,0,0,0-.815-.815H7.339l6.822-6.869a.815.815,0,0,0-.575-1.39Z\" transform=\"translate(0 -2.508)\" fill=\"#fff\"/>\n <path id=\"Path_1318_-_Outline\" data-name=\"Path 1318 - Outline\" d=\"M13.586,19.381a1.065,1.065,0,0,1,.752,1.817l-6.4,6.442H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,29.783H5.315A1.067,1.067,0,0,1,4.25,28.718V22.136a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v3.957l6.443-6.4A1.054,1.054,0,0,1,13.586,19.381Zm-1.689,9.9a.566.566,0,0,0,.565-.565v-.012a.566.566,0,0,0-.565-.565H6.738l7.245-7.3a.565.565,0,0,0-.8-.8l-7.3,7.252V22.136a.566.566,0,0,0-.565-.565H5.315a.566.566,0,0,0-.565.565v6.582a.566.566,0,0,0,.565.565Z\" transform=\"translate(0 -2.508)\" fill=\"#fff\"/>\n <path id=\"Path_1319\" data-name=\"Path 1319\" d=\"M28.718,21.322h-.012a.814.814,0,0,0-.815.815V26.7l-6.869-6.822a.807.807,0,0,0-.575-.235.789.789,0,0,0-.575.241.814.814,0,0,0,0,1.15l6.822,6.863H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h6.582a.814.814,0,0,0,.815-.815V22.137A.814.814,0,0,0,28.718,21.322Z\" transform=\"translate(-2.508 -2.509)\" fill=\"#fff\"/>\n <path id=\"Path_1319_-_Outline\" data-name=\"Path 1319 - Outline\" d=\"M20.447,19.388a1.054,1.054,0,0,1,.752.308l6.442,6.4V22.137a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v6.582a1.067,1.067,0,0,1-1.065,1.065H22.137a1.067,1.067,0,0,1-1.065-1.065v-.012a1.067,1.067,0,0,1,1.065-1.065h3.957L19.7,21.2a1.064,1.064,0,0,1,0-1.5A1.035,1.035,0,0,1,20.447,19.388ZM28.141,27.3l-7.3-7.245a.558.558,0,0,0-.4-.162.542.542,0,0,0-.395.164.565.565,0,0,0,0,.8l7.246,7.29H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565h6.582a.566.566,0,0,0,.565-.565V22.137a.566.566,0,0,0-.565-.565h-.012a.566.566,0,0,0-.565.565Z\" transform=\"translate(-2.508 -2.509)\" fill=\"#fff\"/>\n </g>\n </g>\n </svg>\n";
package/dist/chooser/icons.js ADDED
@@ -0,0 +1,40 @@
1
+ export const collapseIconSVG = `
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 33">
3
+ <g id="Group_2847" data-name="Group 2847" transform="translate(-145 -259)">
4
+ <g id="Group_2844" data-name="Group 2844" transform="translate(107 8)">
5
+ <path id="Rectangle_2144" data-name="Rectangle 2144" d="M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z" transform="translate(38 251)" fill="#461314"/>
6
+ <g id="Component_2_4" data-name="Component 2 – 4" transform="translate(43.803 254.77)">
7
+ <g id="Group_38" data-name="Group 38" transform="translate(0.5 0.5)">
8
+ <path id="Path_52" data-name="Path 52" d="M224.933,140.769" transform="translate(-208.763 -132.536)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/>
9
+ <path id="Path_53" data-name="Path 53" d="M61.806,55.229a.47.47,0,0,0-.47.47v5.208l-7.4-7.407a.471.471,0,0,0-.665.666l7.384,7.389-5.141.071a.47.47,0,0,0,.013.94l6.289-.087a.469.469,0,0,0,.463-.47V55.7A.47.47,0,0,0,61.806,55.229Z" transform="translate(-53.13 -53.362)" fill="#fff"/>
10
+ <path id="Path_53_-_Outline" data-name="Path 53 - Outline" d="M53.6,52.862a.964.964,0,0,1,.687.285L60.836,59.7v-4a.97.97,0,1,1,1.94,0v6.31a.971.971,0,0,1-.958.97l-6.3.087a.97.97,0,0,1-.011-1.94l3.957-.055L52.914,54.52a.971.971,0,0,1,.686-1.657Z" transform="translate(-53.13 -53.362)" fill="#fff"/>
11
+ <path id="Path_54" data-name="Path 54" d="M223.42,53.943a.47.47,0,0,0-.665,0l-7.406,7.411-.072-5.183a.47.47,0,1,0-.94.013l.087,6.293a.469.469,0,0,0,.47.464H221.2a.47.47,0,0,0,0-.94h-5.166l7.387-7.392A.471.471,0,0,0,223.42,53.943Z" transform="translate(-199.163 -53.764)" fill="#fff"/>
12
+ <path id="Path_54_-_Outline" data-name="Path 54 - Outline" d="M223.087,53.305a.971.971,0,0,1,.686,1.657L217.239,61.5h3.96a.97.97,0,0,1,0,1.94h-6.306a.972.972,0,0,1-.97-.958l-.087-6.292a.97.97,0,0,1,.959-.984h.012a.973.973,0,0,1,.968.958l.055,4L222.4,53.59A.963.963,0,0,1,223.087,53.305Z" transform="translate(-199.163 -53.764)" fill="#fff"/>
13
+ <path id="Path_55" data-name="Path 55" d="M225.431,204.214" transform="translate(-209.214 -190.005)" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1"/>
14
+ <path id="Path_56" data-name="Path 56" d="M223.859,224.095l-7.346-7.352,5.143-.071a.47.47,0,0,0-.013-.941l-6.289.087a.469.469,0,0,0-.464.47V222.6a.47.47,0,1,0,.94,0v-5.206l7.362,7.367a.471.471,0,0,0,.665-.666Z" transform="translate(-199.666 -200.438)" fill="#fff"/>
15
+ <path id="Path_56_-_Outline" data-name="Path 56 - Outline" d="M223.526,225.4a.964.964,0,0,1-.687-.285l-6.509-6.513v4a.97.97,0,1,1-1.94,0v-6.311a.972.972,0,0,1,.958-.97l6.3-.087a.97.97,0,0,1,.012,1.941l-3.96.055,6.51,6.515a.971.971,0,0,1-.686,1.657Z" transform="translate(-199.666 -200.438)" fill="#fff"/>
16
+ <path id="Path_57" data-name="Path 57" d="M62.542,216.473a.469.469,0,0,0-.47-.464H55.766a.47.47,0,0,0,0,.94h5.2l-7.37,7.375a.471.471,0,1,0,.666.666l7.352-7.358.071,5.145a.47.47,0,1,0,.94-.013Z" transform="translate(-53.43 -200.689)" fill="#fff"/>
17
+ <path id="Path_57_-_Outline" data-name="Path 57 - Outline" d="M55.766,215.509h6.307a.972.972,0,0,1,.969.959l.087,6.292a.97.97,0,0,1-.959.984h-.012a.973.973,0,0,1-.968-.958l-.055-3.96-6.515,6.52a.971.971,0,1,1-1.373-1.373l6.517-6.522h-4a.97.97,0,0,1,0-1.94Z" transform="translate(-53.43 -200.689)" fill="#fff"/>
18
+ </g>
19
+ </g>
20
+ </g>
21
+ </g>
22
+ </svg>
23
+ `;
24
+ export const expandIconSVG = `
25
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 33">
26
+ <g id="Group_2846" data-name="Group 2846" transform="translate(-36 -251)">
27
+ <path id="Rectangle_2144" data-name="Rectangle 2144" d="M4,0H33a4,4,0,0,1,4,4V29a4,4,0,0,1-4,4H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z" transform="translate(36 251)" fill="#461314"/>
28
+ <g id="Icon_ionic-ios-expand" data-name="Icon ionic-ios-expand" transform="translate(38.737 251.737)">
29
+ <path id="Path_1316" data-name="Path 1316" d="M7.339,6.142H11.9a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,11.9,4.5H5.315a.814.814,0,0,0-.815.815V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V7.339l6.869,6.822a.807.807,0,0,0,.575.235.789.789,0,0,0,.575-.241.814.814,0,0,0,0-1.15Z" transform="translate(0 0)" fill="#fff"/>
30
+ <path id="Path_1316_-_Outline" data-name="Path 1316 - Outline" d="M5.315,4.25H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,6.392H7.94l6.4,6.437a1.064,1.064,0,0,1,0,1.5,1.035,1.035,0,0,1-.752.314,1.054,1.054,0,0,1-.752-.308L6.392,7.94V11.9a1.067,1.067,0,0,1-1.065,1.065H5.315A1.067,1.067,0,0,1,4.25,11.9V5.315A1.067,1.067,0,0,1,5.315,4.25ZM11.9,5.892a.566.566,0,0,0,.565-.565V5.315A.566.566,0,0,0,11.9,4.75H5.315a.566.566,0,0,0-.565.565V11.9a.566.566,0,0,0,.565.565h.012a.566.566,0,0,0,.565-.565V6.738l7.3,7.245a.558.558,0,0,0,.4.162.542.542,0,0,0,.395-.164.565.565,0,0,0,0-.8L6.738,5.892Z" transform="translate(0 0)" fill="#fff"/>
31
+ <path id="Path_1317" data-name="Path 1317" d="M28.718,4.5H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h4.558l-6.822,6.869a.815.815,0,0,0,1.15,1.156l6.869-6.828V11.9a.814.814,0,0,0,.815.815h.012a.814.814,0,0,0,.815-.815V5.315A.814.814,0,0,0,28.718,4.5Z" transform="translate(-2.508 0)" fill="#fff"/>
32
+ <path id="Path_1317_-_Outline" data-name="Path 1317 - Outline" d="M22.137,4.25h6.582a1.067,1.067,0,0,1,1.065,1.065V11.9a1.067,1.067,0,0,1-1.065,1.065h-.012A1.067,1.067,0,0,1,27.641,11.9V7.94l-6.443,6.4a1.065,1.065,0,0,1-1.5-1.51l6.4-6.442H22.137a1.067,1.067,0,0,1-1.065-1.065V5.315A1.067,1.067,0,0,1,22.137,4.25Zm6.582,8.212a.566.566,0,0,0,.565-.565V5.315a.566.566,0,0,0-.565-.565H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565H27.3l-7.245,7.3a.565.565,0,0,0,.8.8l7.3-7.252V11.9a.566.566,0,0,0,.565.565Z" transform="translate(-2.508 0)" fill="#fff"/>
33
+ <path id="Path_1318" data-name="Path 1318" d="M13.586,19.631a.807.807,0,0,0-.575.235L6.142,26.694V22.136a.814.814,0,0,0-.815-.815H5.315a.814.814,0,0,0-.815.815v6.582a.814.814,0,0,0,.815.815H11.9a.814.814,0,0,0,.815-.815v-.012a.814.814,0,0,0-.815-.815H7.339l6.822-6.869a.815.815,0,0,0-.575-1.39Z" transform="translate(0 -2.508)" fill="#fff"/>
34
+ <path id="Path_1318_-_Outline" data-name="Path 1318 - Outline" d="M13.586,19.381a1.065,1.065,0,0,1,.752,1.817l-6.4,6.442H11.9a1.067,1.067,0,0,1,1.065,1.065v.012A1.067,1.067,0,0,1,11.9,29.783H5.315A1.067,1.067,0,0,1,4.25,28.718V22.136a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v3.957l6.443-6.4A1.054,1.054,0,0,1,13.586,19.381Zm-1.689,9.9a.566.566,0,0,0,.565-.565v-.012a.566.566,0,0,0-.565-.565H6.738l7.245-7.3a.565.565,0,0,0-.8-.8l-7.3,7.252V22.136a.566.566,0,0,0-.565-.565H5.315a.566.566,0,0,0-.565.565v6.582a.566.566,0,0,0,.565.565Z" transform="translate(0 -2.508)" fill="#fff"/>
35
+ <path id="Path_1319" data-name="Path 1319" d="M28.718,21.322h-.012a.814.814,0,0,0-.815.815V26.7l-6.869-6.822a.807.807,0,0,0-.575-.235.789.789,0,0,0-.575.241.814.814,0,0,0,0,1.15l6.822,6.863H22.137a.814.814,0,0,0-.815.815v.012a.814.814,0,0,0,.815.815h6.582a.814.814,0,0,0,.815-.815V22.137A.814.814,0,0,0,28.718,21.322Z" transform="translate(-2.508 -2.509)" fill="#fff"/>
36
+ <path id="Path_1319_-_Outline" data-name="Path 1319 - Outline" d="M20.447,19.388a1.054,1.054,0,0,1,.752.308l6.442,6.4V22.137a1.067,1.067,0,0,1,1.065-1.065h.012a1.067,1.067,0,0,1,1.065,1.065v6.582a1.067,1.067,0,0,1-1.065,1.065H22.137a1.067,1.067,0,0,1-1.065-1.065v-.012a1.067,1.067,0,0,1,1.065-1.065h3.957L19.7,21.2a1.064,1.064,0,0,1,0-1.5A1.035,1.035,0,0,1,20.447,19.388ZM28.141,27.3l-7.3-7.245a.558.558,0,0,0-.4-.162.542.542,0,0,0-.395.164.565.565,0,0,0,0,.8l7.246,7.29H22.137a.566.566,0,0,0-.565.565v.012a.566.566,0,0,0,.565.565h6.582a.566.566,0,0,0,.565-.565V22.137a.566.566,0,0,0-.565-.565h-.012a.566.566,0,0,0-.565.565Z" transform="translate(-2.508 -2.509)" fill="#fff"/>
37
+ </g>
38
+ </g>
39
+ </svg>
40
+ `;
package/dist/colorpicker/FieldColorPicker.svelte CHANGED
@@ -34,34 +34,50 @@ onMount(reactToOptions);
34
34
 
35
35
  <FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid let:setVal>
36
36
  {@const _ = updateValue(value, setVal)}
37
- <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
38
- {#if addAllOption}
39
- <label for={`${path}.alt`} class="colorsel alternating">
40
- <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
41
- <span class="alternating-bg">
42
- {#each options as option (option.value)}
43
- <span style:background-color={option.color}></span>
44
- {/each}
45
- </span>
46
- <span class="picker-text">Alternating</span>
47
- </label>
48
- {/if}
49
- {#each options as option, idx (option.value) }
50
- {@const radioid = `${path}.${idx}`}
51
- <label for={radioid} class="colorsel">
52
- <Radio id={radioid} name={path} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
53
- <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
54
- </label>
55
- {/each}
37
+ <div class="container-query-wrapper">
38
+ <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
39
+ {#if addAllOption}
40
+ <label for={`${path}.alt`} class="colorsel alternating">
41
+ <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
42
+ <span class="alternating-bg">
43
+ {#each options as option (option.value)}
44
+ <span style:background-color={option.color}></span>
45
+ {/each}
46
+ </span>
47
+ <span class="picker-text">Alternating</span>
48
+ </label>
49
+ {/if}
50
+ {#each options as option, idx (option.value) }
51
+ {@const radioid = `${path}.${idx}`}
52
+ <label for={radioid} class="colorsel">
53
+ <Radio id={radioid} name={path} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
54
+ <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
55
+ </label>
56
+ {/each}
57
+ </div>
56
58
  </div>
57
59
  </FieldStandard>
58
60
 
59
61
  <style>
62
+ .container-query-wrapper {
63
+ container-type: inline-size;
64
+ container-name: color-picker-container;
65
+ }
60
66
  .color-container {
61
67
  display: grid;
62
68
  grid-gap: 10px;
63
69
  grid-template-columns: 1fr 1fr 1fr 1fr;
64
70
  }
71
+ @container color-picker-container (max-width: 600px) {
72
+ .color-container {
73
+ grid-template-columns: 1fr 1fr 1fr;
74
+ }
75
+ }
76
+ @container color-picker-container (max-width: 350px) {
77
+ .color-container {
78
+ grid-template-columns: 1fr 1fr;
79
+ }
80
+ }
65
81
 
66
82
  label.colorsel :global(input[type="radio"]) {
67
83
  border: 0;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dosgato/dialog",
3
3
  "description": "A component library for building forms that edit a JSON document.",
4
- "version": "1.0.2",
4
+ "version": "1.0.4",
5
5
  "scripts": {
6
6
  "prepublishOnly": "svelte-package",
7
7
  "dev": "vite dev --force",