vira 28.10.0 → 28.12.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.
- package/dist/elements/form/vira-form-fields.d.ts +100 -0
- package/dist/elements/form/vira-form-fields.js +60 -0
- package/dist/elements/form/vira-form.element.d.ts +35 -0
- package/dist/elements/{vira-form.element.js → form/vira-form.element.js} +34 -32
- package/dist/elements/index.d.ts +2 -1
- package/dist/elements/index.js +2 -1
- package/dist/elements/vira-checkbox.element.d.ts +2 -1
- package/dist/elements/vira-checkbox.element.js +15 -6
- package/dist/elements/vira-input.element.js +9 -5
- package/dist/elements/vira-select.element.js +6 -4
- package/package.json +1 -1
- package/dist/elements/vira-form.element.d.ts +0 -72
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
+
import { type ViraIconSvg } from '../../icons/icon-svg.js';
|
|
3
|
+
import { type ViraSelectOption } from '../vira-select.element.js';
|
|
4
|
+
/**
|
|
5
|
+
* Form field types for {@link ViraFormField}.
|
|
6
|
+
*
|
|
7
|
+
* @category Internal
|
|
8
|
+
*/
|
|
9
|
+
export declare enum ViraFormFieldType {
|
|
10
|
+
Text = "text",
|
|
11
|
+
/** Allows auto complete for _existing_ passwords used on this website (for login). */
|
|
12
|
+
ExistingPassword = "existing-password",
|
|
13
|
+
/** Allows auto complete for _new_ passwords used on this website (for login). */
|
|
14
|
+
NewPassword = "new-password",
|
|
15
|
+
/** Uses a password input without any attributes applied for auto complete hints. */
|
|
16
|
+
PlainPassword = "plain-password",
|
|
17
|
+
Email = "email",
|
|
18
|
+
Select = "select",
|
|
19
|
+
Checkbox = "checkbox"
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* {@link ViraFormField} properties that are shared between all field types.
|
|
23
|
+
*
|
|
24
|
+
* @category Internal
|
|
25
|
+
*/
|
|
26
|
+
export type CommonViraFormFields = {
|
|
27
|
+
label: string;
|
|
28
|
+
} & PartialWithUndefined<{
|
|
29
|
+
/** Applies a test id to the form field element. */
|
|
30
|
+
testId: string;
|
|
31
|
+
/**
|
|
32
|
+
* When `true`, visually indicates the form field as required and affects form validation.
|
|
33
|
+
*
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
isRequired: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* When `true`, marks this form field element with error styling.
|
|
39
|
+
*
|
|
40
|
+
* @default false
|
|
41
|
+
*/
|
|
42
|
+
hasError: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* When `true`, hides this form field entirely.
|
|
45
|
+
*
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
isHidden: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* When `true`, continues showing the form field but prevents edits.
|
|
51
|
+
*
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
isDisabled: boolean;
|
|
55
|
+
}>;
|
|
56
|
+
/**
|
|
57
|
+
* An individual form field for {@link ViraFormFields}.
|
|
58
|
+
*
|
|
59
|
+
* @category Internal
|
|
60
|
+
*/
|
|
61
|
+
export type ViraFormField = ({
|
|
62
|
+
type: ViraFormFieldType.Text | ViraFormFieldType.ExistingPassword | ViraFormFieldType.NewPassword | ViraFormFieldType.PlainPassword | ViraFormFieldType.Email;
|
|
63
|
+
value: string | undefined;
|
|
64
|
+
} & PartialWithUndefined<{
|
|
65
|
+
placeholder: string;
|
|
66
|
+
icon: ViraIconSvg;
|
|
67
|
+
isUsername: boolean;
|
|
68
|
+
}> & CommonViraFormFields) | ({
|
|
69
|
+
type: ViraFormFieldType.Select;
|
|
70
|
+
value: string | undefined;
|
|
71
|
+
options: ReadonlyArray<Readonly<ViraSelectOption>>;
|
|
72
|
+
} & PartialWithUndefined<{
|
|
73
|
+
placeholder: string;
|
|
74
|
+
icon: ViraIconSvg;
|
|
75
|
+
}> & CommonViraFormFields) | ({
|
|
76
|
+
type: ViraFormFieldType.Checkbox;
|
|
77
|
+
value: boolean | undefined;
|
|
78
|
+
} & CommonViraFormFields);
|
|
79
|
+
/**
|
|
80
|
+
* A collection of form fields for `ViraForm`.
|
|
81
|
+
*
|
|
82
|
+
* @category Internal
|
|
83
|
+
*/
|
|
84
|
+
export type ViraFormFields = Record<string, ViraFormField>;
|
|
85
|
+
/**
|
|
86
|
+
* Appends a `'*'` to a label if it exist sand if it is required.
|
|
87
|
+
*
|
|
88
|
+
* @category Internal
|
|
89
|
+
*/
|
|
90
|
+
export declare function applyRequiredLabel(label: string | undefined, isRequired: boolean): string | undefined;
|
|
91
|
+
/**
|
|
92
|
+
* Checks if all the {@link ViraFormField} entries in a given {@link ViraFormFields} are valid through
|
|
93
|
+
* the following checks:
|
|
94
|
+
*
|
|
95
|
+
* - Checks that required fields are provided (not `undefined`)
|
|
96
|
+
* - Ignores hidden fields
|
|
97
|
+
*
|
|
98
|
+
* @category Internal
|
|
99
|
+
*/
|
|
100
|
+
export declare function areFieldsValid(formFields: Readonly<ViraFormFields>): boolean;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { check } from '@augment-vir/assert';
|
|
2
|
+
import { addSuffix, getObjectTypedValues } from '@augment-vir/common';
|
|
3
|
+
/**
|
|
4
|
+
* Form field types for {@link ViraFormField}.
|
|
5
|
+
*
|
|
6
|
+
* @category Internal
|
|
7
|
+
*/
|
|
8
|
+
export var ViraFormFieldType;
|
|
9
|
+
(function (ViraFormFieldType) {
|
|
10
|
+
ViraFormFieldType["Text"] = "text";
|
|
11
|
+
/** Allows auto complete for _existing_ passwords used on this website (for login). */
|
|
12
|
+
ViraFormFieldType["ExistingPassword"] = "existing-password";
|
|
13
|
+
/** Allows auto complete for _new_ passwords used on this website (for login). */
|
|
14
|
+
ViraFormFieldType["NewPassword"] = "new-password";
|
|
15
|
+
/** Uses a password input without any attributes applied for auto complete hints. */
|
|
16
|
+
ViraFormFieldType["PlainPassword"] = "plain-password";
|
|
17
|
+
ViraFormFieldType["Email"] = "email";
|
|
18
|
+
ViraFormFieldType["Select"] = "select";
|
|
19
|
+
ViraFormFieldType["Checkbox"] = "checkbox";
|
|
20
|
+
})(ViraFormFieldType || (ViraFormFieldType = {}));
|
|
21
|
+
/**
|
|
22
|
+
* Appends a `'*'` to a label if it exist sand if it is required.
|
|
23
|
+
*
|
|
24
|
+
* @category Internal
|
|
25
|
+
*/
|
|
26
|
+
export function applyRequiredLabel(label, isRequired) {
|
|
27
|
+
if (label) {
|
|
28
|
+
if (isRequired) {
|
|
29
|
+
return addSuffix({ value: label, suffix: '*' });
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
return label;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
return undefined;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Checks if all the {@link ViraFormField} entries in a given {@link ViraFormFields} are valid through
|
|
41
|
+
* the following checks:
|
|
42
|
+
*
|
|
43
|
+
* - Checks that required fields are provided (not `undefined`)
|
|
44
|
+
* - Ignores hidden fields
|
|
45
|
+
*
|
|
46
|
+
* @category Internal
|
|
47
|
+
*/
|
|
48
|
+
export function areFieldsValid(formFields) {
|
|
49
|
+
return getObjectTypedValues(formFields).every((formField) => {
|
|
50
|
+
if (formField.isHidden || !formField.isRequired) {
|
|
51
|
+
return true;
|
|
52
|
+
}
|
|
53
|
+
else if (check.isString(formField.value)) {
|
|
54
|
+
return !!formField.value;
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
return formField.value != undefined;
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
+
import { type ViraFormField, type ViraFormFields } from './vira-form-fields.js';
|
|
3
|
+
/**
|
|
4
|
+
* A form element.
|
|
5
|
+
*
|
|
6
|
+
* @category Elements
|
|
7
|
+
* @see https://electrovir.github.io/vira/book/elements/vira-form
|
|
8
|
+
*/
|
|
9
|
+
export declare const ViraForm: import("element-vir").DeclarativeElementDefinition<"vira-form", Readonly<{
|
|
10
|
+
fields: Readonly<ViraFormFields>;
|
|
11
|
+
} & PartialWithUndefined<{
|
|
12
|
+
showClearButtons: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* When `true`, all fields in this form are disabled. Note that this will not (and can
|
|
15
|
+
* not) disable any child elements you've inserted via <slot>.
|
|
16
|
+
*
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
isDisabled: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* If true, no `'*'` is appended to required form field labels.
|
|
22
|
+
*
|
|
23
|
+
* @default false
|
|
24
|
+
*/
|
|
25
|
+
hideRequiredMarkers: boolean;
|
|
26
|
+
}>>, {
|
|
27
|
+
lastIsValid: boolean;
|
|
28
|
+
}, {
|
|
29
|
+
valueChange: import("element-vir").DefineEvent<{
|
|
30
|
+
key: string;
|
|
31
|
+
} & ViraFormField>;
|
|
32
|
+
validChange: import("element-vir").DefineEvent<{
|
|
33
|
+
allFieldsAreValid: boolean;
|
|
34
|
+
}>;
|
|
35
|
+
}, "vira-form-", "vira-form-", readonly [], readonly []>;
|
|
@@ -1,25 +1,10 @@
|
|
|
1
1
|
import { getObjectTypedEntries } from '@augment-vir/common';
|
|
2
2
|
import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
|
|
3
|
-
import { defineViraElement } from '
|
|
4
|
-
import { ViraCheckbox } from '
|
|
5
|
-
import { ViraInput, ViraInputType } from '
|
|
6
|
-
import { ViraSelect } from '
|
|
7
|
-
|
|
8
|
-
* Form field types for {@link ViraFormField}.
|
|
9
|
-
*
|
|
10
|
-
* @category Internal
|
|
11
|
-
*/
|
|
12
|
-
export var ViraFormFieldType;
|
|
13
|
-
(function (ViraFormFieldType) {
|
|
14
|
-
ViraFormFieldType["Text"] = "text";
|
|
15
|
-
/** Allows auto complete for _existing_ passwords used on this website (for login). */
|
|
16
|
-
ViraFormFieldType["ExistingPassword"] = "existing-password";
|
|
17
|
-
/** Allows auto complete for _new_ passwords used on this website (for login). */
|
|
18
|
-
ViraFormFieldType["NewPassword"] = "new-password";
|
|
19
|
-
ViraFormFieldType["Email"] = "email";
|
|
20
|
-
ViraFormFieldType["Select"] = "select";
|
|
21
|
-
ViraFormFieldType["Checkbox"] = "checkbox";
|
|
22
|
-
})(ViraFormFieldType || (ViraFormFieldType = {}));
|
|
3
|
+
import { defineViraElement } from '../define-vira-element.js';
|
|
4
|
+
import { ViraCheckbox } from '../vira-checkbox.element.js';
|
|
5
|
+
import { ViraInput, ViraInputType } from '../vira-input.element.js';
|
|
6
|
+
import { ViraSelect } from '../vira-select.element.js';
|
|
7
|
+
import { applyRequiredLabel, areFieldsValid, ViraFormFieldType, } from './vira-form-fields.js';
|
|
23
8
|
/**
|
|
24
9
|
* A form element.
|
|
25
10
|
*
|
|
@@ -30,6 +15,7 @@ export const ViraForm = defineViraElement()({
|
|
|
30
15
|
tagName: 'vira-form',
|
|
31
16
|
events: {
|
|
32
17
|
valueChange: defineElementEvent(),
|
|
18
|
+
validChange: defineElementEvent(),
|
|
33
19
|
},
|
|
34
20
|
styles: css `
|
|
35
21
|
:host {
|
|
@@ -48,15 +34,30 @@ export const ViraForm = defineViraElement()({
|
|
|
48
34
|
}
|
|
49
35
|
}
|
|
50
36
|
`,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
37
|
+
state() {
|
|
38
|
+
return {
|
|
39
|
+
lastIsValid: false,
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
render({ inputs, dispatch, events, state, updateState }) {
|
|
43
|
+
const currentIsValid = areFieldsValid(inputs.fields);
|
|
44
|
+
if (currentIsValid !== state.lastIsValid) {
|
|
45
|
+
updateState({
|
|
46
|
+
lastIsValid: currentIsValid,
|
|
47
|
+
});
|
|
48
|
+
dispatch(new events.validChange({ allFieldsAreValid: currentIsValid }));
|
|
49
|
+
}
|
|
50
|
+
const formFieldTemplates = getObjectTypedEntries(inputs.fields).map(([key, field,]) => {
|
|
51
|
+
if (field.isHidden) {
|
|
52
|
+
return nothing;
|
|
53
|
+
}
|
|
54
|
+
else if (field.type === ViraFormFieldType.Checkbox) {
|
|
54
55
|
return html `
|
|
55
56
|
<${ViraCheckbox.assign({
|
|
56
|
-
value: field.value,
|
|
57
|
-
disabled: field.
|
|
57
|
+
value: field.value || false,
|
|
58
|
+
disabled: inputs.isDisabled || field.isDisabled,
|
|
58
59
|
hasError: field.hasError,
|
|
59
|
-
label: field.label,
|
|
60
|
+
label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
|
|
60
61
|
})}
|
|
61
62
|
${field.testId ? testId(field.testId) : nothing}
|
|
62
63
|
${listen(ViraCheckbox.events.valueChange, (event) => {
|
|
@@ -75,8 +76,8 @@ export const ViraForm = defineViraElement()({
|
|
|
75
76
|
options: field.options,
|
|
76
77
|
value: field.value,
|
|
77
78
|
placeholder: field.placeholder,
|
|
78
|
-
disabled: field.
|
|
79
|
-
label: field.label,
|
|
79
|
+
disabled: inputs.isDisabled || field.isDisabled,
|
|
80
|
+
label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
|
|
80
81
|
hasError: field.hasError,
|
|
81
82
|
icon: field.icon,
|
|
82
83
|
})}
|
|
@@ -94,11 +95,11 @@ export const ViraForm = defineViraElement()({
|
|
|
94
95
|
else {
|
|
95
96
|
return html `
|
|
96
97
|
<${ViraInput.assign({
|
|
97
|
-
value: field.value,
|
|
98
|
-
disabled: field.
|
|
98
|
+
value: field.value || '',
|
|
99
|
+
disabled: inputs.isDisabled || field.isDisabled,
|
|
99
100
|
hasError: field.hasError,
|
|
100
101
|
icon: field.icon,
|
|
101
|
-
label: field.label,
|
|
102
|
+
label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
|
|
102
103
|
placeholder: field.placeholder,
|
|
103
104
|
showClearButton: inputs.showClearButtons,
|
|
104
105
|
attributePassthrough: field.isUsername
|
|
@@ -121,6 +122,7 @@ export const ViraForm = defineViraElement()({
|
|
|
121
122
|
type: [
|
|
122
123
|
ViraFormFieldType.NewPassword,
|
|
123
124
|
ViraFormFieldType.ExistingPassword,
|
|
125
|
+
ViraFormFieldType.PlainPassword,
|
|
124
126
|
].includes(field.type)
|
|
125
127
|
? ViraInputType.Password
|
|
126
128
|
: field.type === ViraFormFieldType.Email
|
|
@@ -141,7 +143,7 @@ export const ViraForm = defineViraElement()({
|
|
|
141
143
|
});
|
|
142
144
|
return html `
|
|
143
145
|
<form ${listen('submit', (event) => event.preventDefault())}>
|
|
144
|
-
${
|
|
146
|
+
${formFieldTemplates}
|
|
145
147
|
<slot></slot>
|
|
146
148
|
</form>
|
|
147
149
|
`;
|
package/dist/elements/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export * from './define-vira-element.js';
|
|
2
|
+
export * from './form/vira-form-fields.js';
|
|
3
|
+
export * from './form/vira-form.element.js';
|
|
2
4
|
export * from './pop-up/pop-up-helpers.js';
|
|
3
5
|
export * from './pop-up/pop-up-menu-item.js';
|
|
4
6
|
export * from './pop-up/vira-menu-item.element.js';
|
|
@@ -13,7 +15,6 @@ export * from './vira-checkbox.element.js';
|
|
|
13
15
|
export * from './vira-collapsible-wrapper.element.js';
|
|
14
16
|
export * from './vira-dropdown.element.js';
|
|
15
17
|
export * from './vira-error.element.js';
|
|
16
|
-
export * from './vira-form.element.js';
|
|
17
18
|
export * from './vira-icon.element.js';
|
|
18
19
|
export * from './vira-image.element.js';
|
|
19
20
|
export * from './vira-input.element.js';
|
package/dist/elements/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export * from './define-vira-element.js';
|
|
2
|
+
export * from './form/vira-form-fields.js';
|
|
3
|
+
export * from './form/vira-form.element.js';
|
|
2
4
|
export * from './pop-up/pop-up-helpers.js';
|
|
3
5
|
export * from './pop-up/pop-up-menu-item.js';
|
|
4
6
|
export * from './pop-up/vira-menu-item.element.js';
|
|
@@ -13,7 +15,6 @@ export * from './vira-checkbox.element.js';
|
|
|
13
15
|
export * from './vira-collapsible-wrapper.element.js';
|
|
14
16
|
export * from './vira-dropdown.element.js';
|
|
15
17
|
export * from './vira-error.element.js';
|
|
16
|
-
export * from './vira-form.element.js';
|
|
17
18
|
export * from './vira-icon.element.js';
|
|
18
19
|
export * from './vira-image.element.js';
|
|
19
20
|
export * from './vira-input.element.js';
|
|
@@ -18,6 +18,7 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
|
|
|
18
18
|
disabled: boolean;
|
|
19
19
|
label: string;
|
|
20
20
|
hasError: boolean;
|
|
21
|
+
horizontal: boolean;
|
|
21
22
|
}> & {
|
|
22
23
|
value: boolean;
|
|
23
24
|
};
|
|
@@ -30,4 +31,4 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
|
|
|
30
31
|
*/
|
|
31
32
|
export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
|
|
32
33
|
valueChange: import("element-vir").DefineEvent<boolean>;
|
|
33
|
-
}, "vira-checkbox-", "vira-checkbox-", readonly [], readonly []>;
|
|
34
|
+
}, "vira-checkbox-horizontal", "vira-checkbox-", readonly [], readonly []>;
|
|
@@ -15,7 +15,10 @@ import { ViraIcon } from './vira-icon.element.js';
|
|
|
15
15
|
*/
|
|
16
16
|
export const ViraCheckbox = defineViraElement()({
|
|
17
17
|
tagName: 'vira-checkbox',
|
|
18
|
-
|
|
18
|
+
hostClasses: {
|
|
19
|
+
'vira-checkbox-horizontal': ({ inputs }) => !!inputs.horizontal,
|
|
20
|
+
},
|
|
21
|
+
styles: ({ hostClasses }) => css `
|
|
19
22
|
:host {
|
|
20
23
|
display: inline-flex;
|
|
21
24
|
}
|
|
@@ -46,6 +49,11 @@ export const ViraCheckbox = defineViraElement()({
|
|
|
46
49
|
cursor: pointer;
|
|
47
50
|
font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
|
|
48
51
|
}
|
|
52
|
+
|
|
53
|
+
&:hover .custom-checkbox {
|
|
54
|
+
background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
|
|
55
|
+
.value};
|
|
56
|
+
}
|
|
49
57
|
}
|
|
50
58
|
|
|
51
59
|
${ViraIcon} {
|
|
@@ -75,11 +83,6 @@ export const ViraCheckbox = defineViraElement()({
|
|
|
75
83
|
border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
|
|
76
84
|
}
|
|
77
85
|
|
|
78
|
-
&:hover {
|
|
79
|
-
background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
|
|
80
|
-
.value};
|
|
81
|
-
}
|
|
82
|
-
|
|
83
86
|
&:active {
|
|
84
87
|
background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
|
|
85
88
|
.value};
|
|
@@ -89,6 +92,12 @@ export const ViraCheckbox = defineViraElement()({
|
|
|
89
92
|
${viraDisabledStyles};
|
|
90
93
|
}
|
|
91
94
|
}
|
|
95
|
+
|
|
96
|
+
${hostClasses['vira-checkbox-horizontal'].selector} label {
|
|
97
|
+
flex-direction: row-reverse;
|
|
98
|
+
align-items: center;
|
|
99
|
+
gap: 8px;
|
|
100
|
+
}
|
|
92
101
|
`,
|
|
93
102
|
events: {
|
|
94
103
|
valueChange: defineElementEvent(),
|
|
@@ -244,17 +244,18 @@ export const ViraInput = defineViraElement()({
|
|
|
244
244
|
${hostClasses['vira-input-disabled'].selector} {
|
|
245
245
|
cursor: not-allowed;
|
|
246
246
|
|
|
247
|
-
&
|
|
248
|
-
& .input-wrapper {
|
|
247
|
+
& * {
|
|
249
248
|
cursor: not-allowed;
|
|
250
249
|
}
|
|
251
250
|
|
|
252
|
-
&
|
|
253
|
-
& .wrapper-border,
|
|
254
|
-
& input::placeholder {
|
|
251
|
+
& > * {
|
|
255
252
|
${viraDisabledStyles};
|
|
256
253
|
}
|
|
257
254
|
|
|
255
|
+
& .show-password-button {
|
|
256
|
+
pointer-events: none;
|
|
257
|
+
}
|
|
258
|
+
|
|
258
259
|
& .focus-border {
|
|
259
260
|
display: none;
|
|
260
261
|
}
|
|
@@ -375,6 +376,9 @@ export const ViraInput = defineViraElement()({
|
|
|
375
376
|
event.preventDefault();
|
|
376
377
|
})}
|
|
377
378
|
${listen('click', () => {
|
|
379
|
+
if (inputs.disabled) {
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
378
382
|
dispatch(new events.valueChange(''));
|
|
379
383
|
})}
|
|
380
384
|
>
|
|
@@ -151,14 +151,16 @@ export const ViraSelect = defineViraElement()({
|
|
|
151
151
|
${hostClasses['vira-select-disabled'].selector} {
|
|
152
152
|
cursor: not-allowed;
|
|
153
153
|
|
|
154
|
-
& label {
|
|
155
|
-
cursor: not-allowed;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
154
|
& select,
|
|
159
155
|
& .wrapper-border {
|
|
160
156
|
${viraDisabledStyles}
|
|
161
157
|
}
|
|
158
|
+
${ViraIcon} {
|
|
159
|
+
${viraDisabledStyles}
|
|
160
|
+
}
|
|
161
|
+
& * {
|
|
162
|
+
cursor: not-allowed;
|
|
163
|
+
}
|
|
162
164
|
}
|
|
163
165
|
|
|
164
166
|
${hostClasses['vira-select-error'].selector} {
|
package/package.json
CHANGED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import { type PartialWithUndefined } from '@augment-vir/common';
|
|
2
|
-
import { type ViraIconSvg } from '../icons/icon-svg.js';
|
|
3
|
-
import { type ViraSelectOption } from './vira-select.element.js';
|
|
4
|
-
/**
|
|
5
|
-
* Form field types for {@link ViraFormField}.
|
|
6
|
-
*
|
|
7
|
-
* @category Internal
|
|
8
|
-
*/
|
|
9
|
-
export declare enum ViraFormFieldType {
|
|
10
|
-
Text = "text",
|
|
11
|
-
/** Allows auto complete for _existing_ passwords used on this website (for login). */
|
|
12
|
-
ExistingPassword = "existing-password",
|
|
13
|
-
/** Allows auto complete for _new_ passwords used on this website (for login). */
|
|
14
|
-
NewPassword = "new-password",
|
|
15
|
-
Email = "email",
|
|
16
|
-
Select = "select",
|
|
17
|
-
Checkbox = "checkbox"
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* An individual form field for {@link ViraFormFields}.
|
|
21
|
-
*
|
|
22
|
-
* @category Internal
|
|
23
|
-
*/
|
|
24
|
-
export type ViraFormField = {
|
|
25
|
-
type: ViraFormFieldType.Text | ViraFormFieldType.ExistingPassword | ViraFormFieldType.NewPassword | ViraFormFieldType.Email;
|
|
26
|
-
label: string;
|
|
27
|
-
value: string;
|
|
28
|
-
placeholder?: string | undefined;
|
|
29
|
-
disabled?: boolean | undefined;
|
|
30
|
-
icon?: ViraIconSvg | undefined;
|
|
31
|
-
hasError?: boolean | undefined;
|
|
32
|
-
isUsername?: boolean | undefined;
|
|
33
|
-
testId?: string | undefined;
|
|
34
|
-
} | {
|
|
35
|
-
type: ViraFormFieldType.Select;
|
|
36
|
-
label: string;
|
|
37
|
-
value: string | undefined;
|
|
38
|
-
options: ReadonlyArray<Readonly<ViraSelectOption>>;
|
|
39
|
-
placeholder?: string | undefined;
|
|
40
|
-
disabled?: boolean | undefined;
|
|
41
|
-
icon?: ViraIconSvg | undefined;
|
|
42
|
-
hasError?: boolean | undefined;
|
|
43
|
-
testId?: string | undefined;
|
|
44
|
-
} | {
|
|
45
|
-
type: ViraFormFieldType.Checkbox;
|
|
46
|
-
label: string;
|
|
47
|
-
value: boolean;
|
|
48
|
-
disabled?: boolean | undefined;
|
|
49
|
-
hasError?: boolean | undefined;
|
|
50
|
-
testId?: string | undefined;
|
|
51
|
-
};
|
|
52
|
-
/**
|
|
53
|
-
* A collection of form fields for {@link ViraForm}.
|
|
54
|
-
*
|
|
55
|
-
* @category Internal
|
|
56
|
-
*/
|
|
57
|
-
export type ViraFormFields = Record<string, ViraFormField>;
|
|
58
|
-
/**
|
|
59
|
-
* A form element.
|
|
60
|
-
*
|
|
61
|
-
* @category Elements
|
|
62
|
-
* @see https://electrovir.github.io/vira/book/elements/vira-form
|
|
63
|
-
*/
|
|
64
|
-
export declare const ViraForm: import("element-vir").DeclarativeElementDefinition<"vira-form", Readonly<{
|
|
65
|
-
fields: Readonly<ViraFormFields>;
|
|
66
|
-
} & PartialWithUndefined<{
|
|
67
|
-
showClearButtons: boolean;
|
|
68
|
-
}>>, {}, {
|
|
69
|
-
valueChange: import("element-vir").DefineEvent<{
|
|
70
|
-
key: string;
|
|
71
|
-
} & ViraFormField>;
|
|
72
|
-
}, "vira-form-", "vira-form-", readonly [], readonly []>;
|