@xy-planning-network/trees 0.4.5 → 0.4.6
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/dist/trees.es.js +122 -116
- package/dist/trees.umd.js +3 -3
- package/package.json +1 -1
- package/src/lib-components/forms/MultiCheckboxes.vue +47 -43
- package/src/lib-components/forms/Radio.vue +54 -50
package/package.json
CHANGED
|
@@ -62,54 +62,58 @@ const onChange = (checked: boolean, val: CheckboxValue) => {
|
|
|
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
|
-
|
|
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"
|
|
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="{
|
|
91
94
|
onChange: ($event) => { onChange(($event.target as HTMLInputElement).checked, option.value) },
|
|
92
95
|
...$attrs,
|
|
93
96
|
}"
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="ml-3">
|
|
100
|
+
<InputLabel
|
|
101
|
+
class="mt-auto"
|
|
102
|
+
:disabled="
|
|
103
|
+
($attrs.hasOwnProperty('disabled') &&
|
|
104
|
+
$attrs.disabled !== false) ||
|
|
105
|
+
option.disabled === true
|
|
106
|
+
"
|
|
107
|
+
:id="`${uuid}-${index}-label`"
|
|
108
|
+
:for="uuid"
|
|
109
|
+
:label="option.label"
|
|
110
|
+
/>
|
|
111
|
+
<InputHelp
|
|
112
|
+
class="-mt-1"
|
|
113
|
+
:id="`${uuid}-${index}-help`"
|
|
114
|
+
:text="option.help"
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
113
117
|
</div>
|
|
114
118
|
</div>
|
|
115
119
|
</div>
|
|
@@ -46,58 +46,62 @@ const hasLegend = computed(() => {
|
|
|
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"
|
|
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>
|