vira 28.7.0 → 28.8.0
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.
|
@@ -30,6 +30,7 @@ export type ViraFormField = {
|
|
|
30
30
|
icon?: ViraIconSvg | undefined;
|
|
31
31
|
hasError?: boolean | undefined;
|
|
32
32
|
isUsername?: boolean | undefined;
|
|
33
|
+
testId?: string | undefined;
|
|
33
34
|
} | {
|
|
34
35
|
type: ViraFormFieldType.Select;
|
|
35
36
|
label: string;
|
|
@@ -39,12 +40,14 @@ export type ViraFormField = {
|
|
|
39
40
|
disabled?: boolean | undefined;
|
|
40
41
|
icon?: ViraIconSvg | undefined;
|
|
41
42
|
hasError?: boolean | undefined;
|
|
43
|
+
testId?: string | undefined;
|
|
42
44
|
} | {
|
|
43
45
|
type: ViraFormFieldType.Checkbox;
|
|
44
46
|
label: string;
|
|
45
47
|
value: boolean;
|
|
46
48
|
disabled?: boolean | undefined;
|
|
47
49
|
hasError?: boolean | undefined;
|
|
50
|
+
testId?: string | undefined;
|
|
48
51
|
};
|
|
49
52
|
/**
|
|
50
53
|
* A collection of form fields for {@link ViraForm}.
|
|
@@ -66,4 +69,4 @@ export declare const ViraForm: import("element-vir").DeclarativeElementDefinitio
|
|
|
66
69
|
valueChange: import("element-vir").DefineEvent<{
|
|
67
70
|
key: string;
|
|
68
71
|
} & ViraFormField>;
|
|
69
|
-
}, "vira-form-", "vira-form-", readonly [
|
|
72
|
+
}, "vira-form-", "vira-form-", readonly [], readonly []>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getObjectTypedEntries } from '@augment-vir/common';
|
|
2
|
-
import { css, defineElementEvent, html, listen } from 'element-vir';
|
|
2
|
+
import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
|
|
3
3
|
import { defineViraElement } from './define-vira-element.js';
|
|
4
4
|
import { ViraCheckbox } from './vira-checkbox.element.js';
|
|
5
5
|
import { ViraInput, ViraInputType } from './vira-input.element.js';
|
|
@@ -28,7 +28,6 @@ export var ViraFormFieldType;
|
|
|
28
28
|
*/
|
|
29
29
|
export const ViraForm = defineViraElement()({
|
|
30
30
|
tagName: 'vira-form',
|
|
31
|
-
slotNames: ['actionButtons'],
|
|
32
31
|
events: {
|
|
33
32
|
valueChange: defineElementEvent(),
|
|
34
33
|
},
|
|
@@ -39,7 +38,7 @@ export const ViraForm = defineViraElement()({
|
|
|
39
38
|
gap: 10px;
|
|
40
39
|
}
|
|
41
40
|
`,
|
|
42
|
-
render({ inputs,
|
|
41
|
+
render({ inputs, dispatch, events }) {
|
|
43
42
|
const formFields = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
|
|
44
43
|
if (field.type === ViraFormFieldType.Checkbox) {
|
|
45
44
|
return html `
|
|
@@ -49,6 +48,7 @@ export const ViraForm = defineViraElement()({
|
|
|
49
48
|
hasError: field.hasError,
|
|
50
49
|
label: field.label,
|
|
51
50
|
})}
|
|
51
|
+
${field.testId ? testId(field.testId) : nothing}
|
|
52
52
|
${listen(ViraCheckbox.events.valueChange, (event) => {
|
|
53
53
|
dispatch(new events.valueChange({
|
|
54
54
|
key,
|
|
@@ -70,6 +70,7 @@ export const ViraForm = defineViraElement()({
|
|
|
70
70
|
hasError: field.hasError,
|
|
71
71
|
icon: field.icon,
|
|
72
72
|
})}
|
|
73
|
+
${field.testId ? testId(field.testId) : nothing}
|
|
73
74
|
${listen(ViraSelect.events.valueChange, (event) => {
|
|
74
75
|
dispatch(new events.valueChange({
|
|
75
76
|
key,
|
|
@@ -116,6 +117,7 @@ export const ViraForm = defineViraElement()({
|
|
|
116
117
|
? ViraInputType.Email
|
|
117
118
|
: ViraInputType.Default,
|
|
118
119
|
})}
|
|
120
|
+
${field.testId ? testId(field.testId) : nothing}
|
|
119
121
|
${listen(ViraInput.events.valueChange, (event) => {
|
|
120
122
|
dispatch(new events.valueChange({
|
|
121
123
|
key,
|
|
@@ -130,7 +132,7 @@ export const ViraForm = defineViraElement()({
|
|
|
130
132
|
return html `
|
|
131
133
|
<form ${listen('submit', (event) => event.preventDefault())}>
|
|
132
134
|
${formFields}
|
|
133
|
-
<slot
|
|
135
|
+
<slot></slot>
|
|
134
136
|
</form>
|
|
135
137
|
`;
|
|
136
138
|
},
|