1. Project Overview

Koala-Form

A low-code form solution that lets you be as "lazy" as a koala.

What is Koala Form?

Koala Form is a low-code solution for form pages. Built on Vue3, it is designed around form scenarios in backend applications, allowing developers to focus only on form fields and API interfaces.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

It mainly offers the following features:

• Efficient . Developing a complete form page from scratch may take a day or several hours, while Koala Form may require only a few minutes. All you need to do is configure the field display rules.
• Simple . Built-in basic form scenarios,useScene, useFrom、useTable、useModal、usePager, parses the provided field rules and returns the scenario context for operating on scenario content. The render function reduces the need to focus on UI implementation.
• Flexible . Rich scenarios can be freely combined; all fields also support vueslot; you can extend your own plugins and render your own UI.

Low Code

Reduce 80% of your repetitive work and improve your productivity.

Easier

Get started quickly with common built-in basic scenarios. Simply configure the settings to complete CRUD form pages.

Flexible

Provides plugin extension capabilities, such as support for additional UI libraries.

5. Tech Stack

UI Library Plugins

Plugin

Introduction

@koala-form/fes-plugin

Bridge plugin for the Fes Design component library

@koala-form/element-plugin

Bridge plugin for the Element Plus component library

Install

npm i @koala-form/core
npm i @koala-form/fes-plugin

Usage

Register Global Plugins

import '@koala-form/fes-plugin';
import { installPluginPreset } from '@koala-form/core';

// Install the required plugins globally
installPluginPreset();

Create a Simple Form

<template>
    <KoalaRender :render="render"></KoalaRender>
</template>

<script>
import { KoalaRender, useForm, ComponentType } from '@koala-form/core';

export default {
    components: { KoalaRender },
    setup() {
        const { render } = useForm({
            fields: [
                {
                    name: 'name', // Access the value through modelRef.value.name
                    label: 'Name', // Form field label
                    defaultValue: 'Monkey D. Luffy', // Default value
                    components: {
                        name: ComponentType.Input, // The form component is an input field
                    },
                },
            ],
        });
        return {
            render
        };
    },
};
</script>