Afiq
eab2ca3647
- Introduced a new 'searchSelect' component to the form builder, allowing users to search and select options from a dropdown. - Updated FormBuilderComponents.vue to include the new searchable select component with default properties and options. - Enhanced form validation rules in various components to support the new searchable select input type. - Adjusted z-index values in multiple components and styles for improved layering and visibility. - Refined CSS styles for modal and header components to ensure consistent appearance across the application.
111 lines
2.9 KiB
JavaScript
111 lines
2.9 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",
|
|
};
|
|
|
|
const searchSelectClassification = {
|
|
label: "formkit-label-search-select",
|
|
inner: "formkit-inner-search-select",
|
|
input: "formkit-input-search-select",
|
|
message: "formkit-message-search-select",
|
|
};
|
|
|
|
// 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",
|
|
},
|
|
searchSelect: searchSelectClassification,
|
|
};
|