README

Flow-Symfony 是Vue框架与Symfony的强大集成，使得在Symfony应用程序中无缝开发响应式组件成为可能。

特性

• 状态和存储管理
• 基于属性的组件架构
• 自动状态初始化和更新
• 客户端方法处理
• 集成路由支持

安装

通过Composer安装此包

composer require flow4ui/flow-symfony

使用方法

以下是一个使用Flow-Symfony创建Todo List组件的简单示例

<?php

namespace App\UI\Component\Todo;

use Flow\Attributes\{Action,Attribute,Component,Property};
use Flow\Component\AbstractComponent;
use Flow\Contract\HasInitState;
use Symfony\Component\HttpFoundation\Request;

#[Component(
    props: [
        'initialTodos'
    ],
    template: <<<'VUE'
<div>
    <ul>
        <li v-for="todo in todos" :key="todo.id">
            {{ todo.text }}
            <button @click="removeTodo(todo.id)">Remove</button>
        </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <button @click="addTodo">Add Todo</button>
</div>
VUE
)]
class TodoList extends AbstractComponent implements HasInitState
{
    #[Property]
    public array $todos = [];

    #[Property]
    public string $newTodo = '';
    
    #[Attribute]
    public array $initialTodos = null;

    public function initState(Request $request): void
    {
        $this->todos = $this->initialTodos ?? [];
    }

    #[Action]
    public function addTodo(): void
    {
        if (!empty($this->newTodo)) {
            $this->todos[] = [
                'id' => uniqid(),
                'text' => $this->newTodo
            ];
            $this->newTodo = '';
        }
    }
    
    #[Action]
    public function removeTodo(string $id): void
    {
        $this->todos = array_filter($this->todos, fn($todo) => $todo['id'] !== $id);
    }
}

本示例演示了如何使用Flow-Symfony创建响应式的Todo List组件，展示了状态管理、属性绑定和事件处理。

文档

有关如何使用Flow-Symfony的更详细信息，请参阅我们的文档。

待办事项

• 增强JavaScript传输库
• 细化管理器
  • 将服务器端传输逻辑提取到类中
• 实现客户端代码编译和验证的表达式语言
• 添加对样式的支持
• 实现服务器端渲染
• 向flow_options模板函数添加更多选项
  • 从URL异步加载组件
  • 从CDN或路由加载组件

贡献

欢迎贡献！请随意提交Pull Request。

许可

本项目采用GPLv3许可协议。