@xy-planning-network/trees 0.4.4 → 0.4.7
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.
package/package.json
CHANGED
|
@@ -55,61 +55,67 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
|
|
|
55
55
|
:aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
|
|
56
56
|
:aria-describedby="help ? `${uuid}-help` : undefined"
|
|
57
57
|
>
|
|
58
|
-
<div class="space-y-0.5">
|
|
58
|
+
<div v-if="hasLegend || help" class="space-y-0.5">
|
|
59
59
|
<FieldsetLegend :id="`${uuid}-legend`">
|
|
60
60
|
<div v-if="legend">{{ legend }}</div>
|
|
61
61
|
<slot v-if="$slots.legend" name="legend"></slot>
|
|
62
62
|
</FieldsetLegend>
|
|
63
63
|
<InputHelp tag="p" :text="help" :id="`${uuid}-help`" />
|
|
64
64
|
</div>
|
|
65
|
-
<div
|
|
66
|
-
class="grid gap-4"
|
|
67
|
-
:class="{
|
|
68
|
-
'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
|
|
69
|
-
'sm:grid-cols-2': columns === 2,
|
|
70
|
-
'sm:grid-cols-3': columns === 3,
|
|
71
|
-
'sm:grid-cols-4': columns === 4,
|
|
72
|
-
}"
|
|
73
|
-
>
|
|
65
|
+
<div class="flex">
|
|
74
66
|
<div
|
|
75
|
-
|
|
76
|
-
:
|
|
77
|
-
|
|
67
|
+
class="grid gap-4"
|
|
68
|
+
:class="{
|
|
69
|
+
'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
|
|
70
|
+
'sm:grid-cols-2': columns === 2,
|
|
71
|
+
'sm:grid-cols-3': columns === 3,
|
|
72
|
+
'sm:grid-cols-4': columns === 4,
|
|
73
|
+
}"
|
|
78
74
|
>
|
|
79
|
-
<div
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
75
|
+
<div
|
|
76
|
+
v-for="(option, index) in options"
|
|
77
|
+
:key="option.value"
|
|
78
|
+
class="flex items-start"
|
|
79
|
+
>
|
|
80
|
+
<div class="flex items-center h-5">
|
|
81
|
+
<input
|
|
82
|
+
:id="`${uuid}-${index}`"
|
|
83
|
+
:aria-labelledby="`${uuid}-${index}-label`"
|
|
84
|
+
:aria-describedby="
|
|
85
|
+
option?.help && option.help
|
|
86
|
+
? `${uuid}-${index}-help`
|
|
87
|
+
: undefined
|
|
88
|
+
"
|
|
89
|
+
:checked="modelValue.includes(option.value)"
|
|
90
|
+
:disabled="option.disabled === true ? true : undefined"
|
|
91
|
+
class="focus:ring-blue-500 h-4 w-4 text-blue-500 border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
|
|
92
|
+
type="checkbox"
|
|
93
|
+
v-bind="{
|
|
94
|
+
onChange: ($event) => {
|
|
95
|
+
onChange(($event.target as HTMLInputElement).checked, option.value)
|
|
96
|
+
},
|
|
92
97
|
...$attrs,
|
|
93
98
|
}"
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
99
|
+
/>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="ml-3">
|
|
102
|
+
<InputLabel
|
|
103
|
+
class="mt-auto"
|
|
104
|
+
:disabled="
|
|
105
|
+
($attrs.hasOwnProperty('disabled') &&
|
|
106
|
+
$attrs.disabled !== false) ||
|
|
107
|
+
option.disabled === true
|
|
108
|
+
"
|
|
109
|
+
:id="`${uuid}-${index}-label`"
|
|
110
|
+
:for="`${uuid}-${index}`"
|
|
111
|
+
:label="option.label"
|
|
112
|
+
/>
|
|
113
|
+
<InputHelp
|
|
114
|
+
class="-mt-1"
|
|
115
|
+
:id="`${uuid}-${index}-help`"
|
|
116
|
+
:text="option.help"
|
|
117
|
+
/>
|
|
118
|
+
</div>
|
|
113
119
|
</div>
|
|
114
120
|
</div>
|
|
115
121
|
</div>
|
|
@@ -39,65 +39,69 @@ const hasLegend = computed(() => {
|
|
|
39
39
|
:aria-labelledby="hasLegend ? `${uuid}-legend` : undefined"
|
|
40
40
|
:aria-describedby="help ? `${uuid}-help` : undefined"
|
|
41
41
|
>
|
|
42
|
-
<div class="space-y-0.5">
|
|
42
|
+
<div v-if="hasLegend || help" class="space-y-0.5">
|
|
43
43
|
<FieldsetLegend :id="`${uuid}-legend`">
|
|
44
44
|
<div v-if="legend">{{ legend }}</div>
|
|
45
45
|
<slot v-if="$slots.legend" name="legend"></slot>
|
|
46
46
|
</FieldsetLegend>
|
|
47
47
|
<InputHelp tag="p" :text="help" :id="`${uuid}-help`" />
|
|
48
48
|
</div>
|
|
49
|
-
<div
|
|
50
|
-
class="grid gap-4"
|
|
51
|
-
:class="{
|
|
52
|
-
'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
|
|
53
|
-
'sm:grid-cols-2': columns === 2,
|
|
54
|
-
'sm:grid-cols-3': columns === 3,
|
|
55
|
-
'sm:grid-cols-4': columns === 4,
|
|
56
|
-
}"
|
|
57
|
-
>
|
|
49
|
+
<div class="">
|
|
58
50
|
<div
|
|
59
|
-
|
|
60
|
-
:
|
|
61
|
-
|
|
51
|
+
class="grid gap-4"
|
|
52
|
+
:class="{
|
|
53
|
+
'sm:grid sm:gap-y-4 sm:gap-x-5 sm:space-y-0': columns !== undefined,
|
|
54
|
+
'sm:grid-cols-2': columns === 2,
|
|
55
|
+
'sm:grid-cols-3': columns === 3,
|
|
56
|
+
'sm:grid-cols-4': columns === 4,
|
|
57
|
+
}"
|
|
62
58
|
>
|
|
63
|
-
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
59
|
+
<div
|
|
60
|
+
v-for="(option, index) in options"
|
|
61
|
+
:key="option.value"
|
|
62
|
+
class="flex items-start"
|
|
63
|
+
>
|
|
64
|
+
<div class="flex items-center h-5">
|
|
65
|
+
<input
|
|
66
|
+
:aria-describedby="
|
|
67
|
+
option?.help && option.help
|
|
68
|
+
? `${uuid}-${index}-help`
|
|
69
|
+
: undefined
|
|
70
|
+
"
|
|
71
|
+
:aria-labelledby="`${uuid}-${index}-label`"
|
|
72
|
+
:checked="modelValue === option.value"
|
|
73
|
+
class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue disabled:opacity-50 disabled:cursor-not-allowed"
|
|
74
|
+
:disabled="option.disabled === true ? true : undefined"
|
|
75
|
+
:id="`${uuid}-${index}`"
|
|
76
|
+
:name="uuid"
|
|
77
|
+
type="radio"
|
|
78
|
+
:value="option.value"
|
|
79
|
+
v-bind="{
|
|
80
|
+
onChange: () => {
|
|
81
|
+
emits('update:modelValue', option.value)
|
|
82
|
+
},
|
|
83
|
+
...$attrs,
|
|
84
|
+
}"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="ml-3">
|
|
88
|
+
<InputLabel
|
|
89
|
+
class="mt-auto"
|
|
90
|
+
:disabled="
|
|
91
|
+
($attrs.hasOwnProperty('disabled') &&
|
|
92
|
+
$attrs.disabled !== false) ||
|
|
93
|
+
option.disabled === true
|
|
94
|
+
"
|
|
95
|
+
:id="`${uuid}-${index}-label`"
|
|
96
|
+
:for="`${uuid}-${index}`"
|
|
97
|
+
:label="option.label"
|
|
98
|
+
/>
|
|
99
|
+
<InputHelp
|
|
100
|
+
class="-mt-1"
|
|
101
|
+
:id="`${uuid}-${index}-help`"
|
|
102
|
+
:text="option.help"
|
|
103
|
+
/>
|
|
104
|
+
</div>
|
|
101
105
|
</div>
|
|
102
106
|
</div>
|
|
103
107
|
</div>
|
|
@@ -34,7 +34,7 @@ const onChange = (e: Event) => {
|
|
|
34
34
|
:aria-labelledby="legend ? `${uuid}-legend` : undefined"
|
|
35
35
|
:aria-describedby="help ? `${uuid}-help` : undefined"
|
|
36
36
|
>
|
|
37
|
-
<div class="space-y-0.5">
|
|
37
|
+
<div v-if="legend || help" class="space-y-0.5">
|
|
38
38
|
<InputLabel
|
|
39
39
|
class="block my-auto"
|
|
40
40
|
:label="legend"
|