119 lines
3.4 KiB
JavaScript
119 lines
3.4 KiB
JavaScript
import { generateClasses } from "@formkit/themes";
|
|
import defaultTheme from "@/assets/js/formkit-theme.js";
|
|
import customInput from "@/assets/js/formkit-custom.js";
|
|
|
|
// ----------------- Addons --------------------------- //
|
|
|
|
// https://formkit.com/plugins/auto-animate
|
|
import { createAutoAnimatePlugin } from "@formkit/addons";
|
|
|
|
// https://formkit.com/plugins/floating-labels
|
|
import { createFloatingLabelsPlugin } from "@formkit/addons";
|
|
import "@formkit/addons/css/floatingLabels";
|
|
|
|
// https://formkit.com/plugins/multi-step
|
|
import { createMultiStepPlugin } from "@formkit/addons";
|
|
import "@formkit/addons/css/multistep";
|
|
|
|
// https://formkit.com/plugins/auto-height-textarea
|
|
import { createAutoHeightTextareaPlugin } from "@formkit/addons";
|
|
|
|
// https://formkit.com/plugins/local-storage
|
|
import { createLocalStoragePlugin } from "@formkit/addons";
|
|
|
|
const legends = ["checkbox_multi", "radio_multi", "repeater", "transferlist"];
|
|
|
|
function addAsteriskPlugin(node) {
|
|
if (
|
|
["button", "submit", "hidden", "group", "list", "meta"].includes(
|
|
node.props.type
|
|
)
|
|
)
|
|
return;
|
|
|
|
const isRequired =
|
|
node.props?.validation === "required" ||
|
|
(Array.isArray(node.props?.validation) &&
|
|
node.props.validation.some(
|
|
(rule) => Array.isArray(rule) && rule.includes("required")
|
|
));
|
|
|
|
if (isRequired) {
|
|
node.on("created", () => {
|
|
// Determine if we should use legend or label
|
|
const legendOrLabel = legends.includes(
|
|
`${node.props.type}${node.props.options ? "_multi" : ""}`
|
|
)
|
|
? "legend"
|
|
: "label";
|
|
|
|
// Update schema memo key with proper suffix
|
|
if (node.props.definition.schemaMemoKey) {
|
|
node.props.definition.schemaMemoKey += `${
|
|
node.props.options ? "_multi" : ""
|
|
}_add_asterisk`;
|
|
}
|
|
|
|
const originalSchemaFn = node.props.definition.schema;
|
|
node.props.definition.schema = (sectionsSchema = {}) => {
|
|
// Initialize the proper section (legend or label)
|
|
if (!sectionsSchema[legendOrLabel]) {
|
|
sectionsSchema[legendOrLabel] = {};
|
|
}
|
|
if (!sectionsSchema[legendOrLabel].attrs) {
|
|
sectionsSchema[legendOrLabel].attrs = {};
|
|
}
|
|
sectionsSchema[legendOrLabel].attrs["data-required"] = true;
|
|
|
|
// Add children array for the proper section
|
|
sectionsSchema[legendOrLabel].children = [
|
|
"$label",
|
|
{
|
|
$el: "span",
|
|
attrs: {
|
|
class: "formkit-asterisk",
|
|
title: node.props?.requiredText || "diperlukan",
|
|
},
|
|
children: ["*"],
|
|
},
|
|
];
|
|
|
|
const schema = originalSchemaFn(sectionsSchema);
|
|
|
|
if (!schema.attrs) schema.attrs = {};
|
|
schema.attrs["data-required"] = true;
|
|
|
|
return schema;
|
|
};
|
|
});
|
|
}
|
|
}
|
|
|
|
export default {
|
|
plugins: [
|
|
addAsteriskPlugin,
|
|
createFloatingLabelsPlugin({
|
|
useAsDefault: false, // defaults to false
|
|
}),
|
|
createAutoAnimatePlugin({
|
|
// optional config
|
|
}),
|
|
createMultiStepPlugin(),
|
|
createAutoHeightTextareaPlugin(),
|
|
createLocalStoragePlugin({
|
|
// plugin defaults:
|
|
prefix: "formkit",
|
|
key: undefined,
|
|
control: undefined,
|
|
maxAge: 3600000, // 1 hour
|
|
debounce: 200,
|
|
beforeSave: undefined,
|
|
beforeLoad: undefined,
|
|
}),
|
|
],
|
|
config: {
|
|
classes: generateClasses(defaultTheme),
|
|
},
|
|
inputs: customInput,
|
|
};
|