mathsgod/formkit-php

1.0.7 2023-08-18 09:05 UTC

This package is auto-updated.

Last update: 2024-04-18 10:34:32 UTC


README

A PHP library for generating FormKit Schema from PHP classes.

Installation

Install via composer:

composer require mathsgod/formkit-php

Usage

Basic Usage

$schema = new FormKit\Schema();
$schema->appendHTML("<form-kit label='hello' type='text'/>");
echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$formkit": "text",
        "label": "hello"
    }
]

Simple element

$schema = new FormKit\Schema();
$schema->appendElement("div")->appendElement("span")->appendHTML("hello");
echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$el": "div",
        "children": [
            {
                "$el": "span",
                "children": [
                    "hello"
                ]
            }
        ]
    }
]

Component

$schema = new FormKit\Schema();
$card=$schema->appendComponent("q-card");
$card->setAttribute("flat","");

echo json_encode($schema, JSON_PRETTY_PRINT);
    

output:

[
    {
        "$cmp": "q-card",
        "props": {
            "flat": true
        }
    }
]

Registering custom Vue components

$schema = new FormKit\Schema();
$schema->registerClass("q-card", FormKit\Component::class);
$schema->appendHTML("<q-card flat>Hello</q-card>");

echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$cmp": "q-card",
        "props": {
            "flat": true
        },
        "children": [
            "Hello"
        ]
    }
]

Registering custom FormKit input components

$schema = new FormKit\Schema();
$schema->registerInputClass("my-input", FormKit\FormKitInputs::class);
$schema->appendHTML("<form-kit label='My custom input' type='my-input'/>");
echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$formkit": "my-input",
        "label": "My custom input"
    }
]

Custom component class

class QBtn extends FormKit\Component
{

    public function setLabel($label)
    {
        $this->setAttribute("label", $label);
    }
}

$schema = new FormKit\Schema();
$schema->registerClass("q-btn", QBtn::class);
$node=$schema->appendHTML("<q-btn label='Hello'/>")[0]; //$node=$schema->appendComponent("q-btn");

//change label
$node->setLabel("World");

echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$cmp": "q-btn",
        "props": {
            "label": "World"
        }
    }
]

Append child nodes

$schema = new FormKit\Schema();
$e = $schema->appendHTML("<div></div>")[0];
$e->append($schema->createElement("div", "hello"));
echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$el": "div",
        "children": [
            {
                "$el": "div",
                "children": [
                    "hello"
                ]
            }
        ]
    }
]

Append child nodes from HTML

$schema = new FormKit\Schema();
$e = $schema->appendHTML("<div></div>")[0];
$e->appendHTML("<div>hello</div>");
echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$el": "div",
        "children": [
            {
                "$el": "div",
                "children": [
                    "hello"
                ]
            }
        ]
    }
]

Loops

$group = $schema->appendHTML("<form-kit type='group'/>")[0];
$group->setAttribute(":value", json_encode([
    "cities" => ["Hong Kong", "Taiwan", "China"]
]));

$div = $group->appendElement("div");

$div->for(["item", "key", '$value.cities']);

$div->appendHTML('$item');

echo json_encode($schema, JSON_PRETTY_PRINT);

output:

[
    {
        "$formkit": "group",
        "label": "Group",
        "value": {
            "cities": [
                "Hong Kong",
                "Taiwan",
                "China"
            ]
        },
        "children": [
            {
                "$el": "div",
                "children": [
                    "$item"
                ],
                "for": [
                    "item",
                    "key",
                    "$value.cities"
                ]
            }
        ]
    }
]