@dosgato/dialog 1.0.3 → 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.
|
@@ -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>
|
|
@@ -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="
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
{
|
|
51
|
-
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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