Afiq
96fafd33d7
- Introduced a new Switch component for toggling options within forms, enhancing user interactivity. - Updated formkit-custom.js to include the Switch component with appropriate props. - Enhanced formkit-theme.js to define styles for the Switch component, ensuring consistent theming. - Added CSS styles for the Switch component to improve visual presentation and user experience. - Updated FormBuilderCanvas and FormBuilderComponents to support the new Switch component in the form builder interface. - Enhanced documentation to include details about the new Switch component and its usage within forms.
103 lines
2.6 KiB
JavaScript
103 lines
2.6 KiB
JavaScript
// Create some re-useable definitions because
|
|
// many input types are identical in how
|
|
// we want to style them.
|
|
const textClassification = {
|
|
label: "formkit-outer-text",
|
|
inner: "formkit-inner-text",
|
|
input: "formkit-input-text",
|
|
prefix: "formkit-prefix-text",
|
|
message: "formkit-message-text",
|
|
};
|
|
const boxClassification = {
|
|
inner: "formkit-inner-box",
|
|
fieldset: "formkit-fieldset-box",
|
|
legend: "formkit-legend-box",
|
|
wrapper: "formkit-wrapper-box",
|
|
help: "formkit-help-box",
|
|
input: "formkit-input-box",
|
|
label: "formkit-label-box",
|
|
message: "formkit-message-box",
|
|
};
|
|
const buttonClassification = {
|
|
wrapper: "formkit-wrapper-button",
|
|
input: "formkit-input-button",
|
|
};
|
|
const OtpClassification = {
|
|
label: "formkit-label-otp",
|
|
inner: "formkit-inner-otp",
|
|
digit: "formkit-digit-otp",
|
|
message: "formkit-message-otp",
|
|
};
|
|
|
|
const switchClassification = {
|
|
label: "formkit-label-switch",
|
|
inner: "formkit-inner-switch",
|
|
input: "formkit-input-switch",
|
|
message: "formkit-message-switch",
|
|
};
|
|
|
|
const colorClassification = {
|
|
label: "formkit-label-color",
|
|
input: "formkit-input-color",
|
|
};
|
|
|
|
const fileClassification = {
|
|
label: "formkit-label-file",
|
|
inner: "formkit-inner-file",
|
|
input: "formkit-input-file",
|
|
};
|
|
|
|
const rangeClassification = {
|
|
input: "formkit-input-range",
|
|
};
|
|
|
|
// export our definitions using our above
|
|
// templates and declare one-offs and
|
|
// overrides as needed.
|
|
export default {
|
|
// the global key will apply to all inputs
|
|
global: {
|
|
label: "formkit-label-global",
|
|
outer: "formkit-outer-global",
|
|
help: "formkit-help-global",
|
|
messages: "formkit-messages-global",
|
|
message: "formkit-message-global",
|
|
wrapper: "formkit-wrapper-global",
|
|
},
|
|
button: buttonClassification,
|
|
color: colorClassification,
|
|
date: textClassification,
|
|
"datetime-local": textClassification,
|
|
checkbox: boxClassification,
|
|
email: textClassification,
|
|
file: fileClassification,
|
|
month: textClassification,
|
|
number: textClassification,
|
|
password: textClassification,
|
|
radio: {
|
|
...boxClassification,
|
|
input: "formkit-input-radio",
|
|
},
|
|
range: rangeClassification,
|
|
search: textClassification,
|
|
select: { ...textClassification, option: "p-2" },
|
|
submit: buttonClassification,
|
|
tel: textClassification,
|
|
text: textClassification,
|
|
textarea: {
|
|
...textClassification,
|
|
input: "formkit-input-textarea",
|
|
},
|
|
time: textClassification,
|
|
url: textClassification,
|
|
week: textClassification,
|
|
otp: OtpClassification,
|
|
mask: textClassification,
|
|
switch: switchClassification,
|
|
dropzone: {
|
|
...textClassification,
|
|
inner: "formkit-inner-dropzone",
|
|
dropzone: "formkit-dropzone",
|
|
},
|
|
};
|