{"id":28089110,"url":"https://github.com/dimonka2/flatform","last_synced_at":"2025-05-13T12:53:51.324Z","repository":{"id":56969219,"uuid":"226847791","full_name":"Dimonka2/flatform","owner":"Dimonka2","description":"HTML component rendering helper package for Laravel and Livewire","archived":false,"fork":false,"pushed_at":"2024-06-19T07:58:50.000Z","size":625,"stargazers_count":20,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-17T01:52:47.918Z","etag":null,"topics":["bootstrap","html","laravel","livewire","livewire-components","tablecomponent"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dimonka2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-09T10:44:09.000Z","updated_at":"2024-06-19T07:58:54.000Z","dependencies_parsed_at":"2024-11-21T08:45:29.078Z","dependency_job_id":"674949cf-4e74-46cf-8ba9-ca73aaba99ea","html_url":"https://github.com/Dimonka2/flatform","commit_stats":{"total_commits":349,"total_committers":4,"mean_commits":87.25,"dds":"0.35243553008595985","last_synced_commit":"b35b91d5f3d4d98c16daa745524224a06ff6eefe"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimonka2%2Fflatform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimonka2%2Fflatform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimonka2%2Fflatform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimonka2%2Fflatform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dimonka2","download_url":"https://codeload.github.com/Dimonka2/flatform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948267,"owners_count":21988952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","html","laravel","livewire","livewire-components","tablecomponent"],"created_at":"2025-05-13T12:53:50.501Z","updated_at":"2025-05-13T12:53:51.302Z","avatar_url":"https://github.com/Dimonka2.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel Flatform\n\n\n[![Packagist](https://img.shields.io/packagist/v/dimonka2/flatform.svg)](https://packagist.org/packages/dimonka2/flatform)\n[![Packagist](https://img.shields.io/packagist/l/dimonka2/flatform.svg)](https://packagist.org/packages/dimonka2/flatform)\n[![Packagist](https://img.shields.io/packagist/dm/dimonka2/flatform.svg)]()\n\n\nHTML control rendering helper for Laravel and Livewire\n\n## Features\n\n- **Separate control rendering from control styling.** Write only an interface definition and the styling will be applied based on selected templates.\n\n- **Possibility to switch styles via config.** It is possible to declare several styles and switch between them. Option to switch styles at runtime is coming soon.\n\n- **Write less code.** Using this approach you define control styles once and focus only on interface declaration.\n\n- **Livewire table component.** Unique Livewire table with sorting, search, filters, actions, row select, column formatters and sub details.\n\n## Install\n\ncomposer require dimonka2/flatform\n\nPublish provider:\n\n$ php artisan vendor:publish --provider=\"dimonka2\\flatform\\FlatformServiceProvider\"\n\n## Configure\n\nComing soon\n\n## Using in the blade\n\nFollowing text creates text inputs with labels\n```php\n@form([\n    ['row', [\n        ['text', 'label' =\u003e 'First name', 'name' =\u003e 'first_name',],\n        ['text', 'label' =\u003e 'Last name', 'name' =\u003e 'last_name',],\n    ]]\n])\n```\n\nDepending on styles the code above will generate something like:\n\n```html\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-6 form-group\"\u003e\n        \u003clabel for=\"first_name-100\"\u003eFirst name\u003c/label\u003e\n        \u003cinput id=\"first_name-100\" class=\"  form-control form-control-alt\" name=\"first_name\" type=\"text\"\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col-6 form-group\"\u003e\n        \u003clabel for=\"last_name-101\"\u003eLast name\u003c/label\u003e\n        \u003cinput id=\"last_name-101\" class=\"  form-control form-control-alt\" name=\"last_name\" type=\"text\"\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Included elements, inputs and components\n* **Inputs**: text, password, number, textarea, select, file, date, checkbox, radio, hidden, select2, bootstrap select, summernote\n* **Components**: alert, breadcrumb, button, dropdown, progress, tabs, card, datatable, table\n* **Trait for datatable**\n* **HTML tags**: form, text, div, row (div with class \"row\"), col (div with class 'col-xx')\n* **Blade directives**: stack, include, yield, section, Livewire\n* **TableComponent**: Livewire table component\n\n## Documentation\n\nComing soon\n\n## TableComponent\n\nIn order to create a Livewire TableComponent you cave to create a class in your Livewire folder that is derived from *TableComponent* class. See following sample code:\n\n```php\nnamespace App\\Http\\Livewire\\User;\n\nuse App\\Models\\User;\nuse dimonka2\\flatform\\Flatform;\nuse dimonka2\\flatform\\Livewire\\TableComponent;\nuse dimonka2\\flatform\\Form\\Components\\Table\\Table;\n\nclass UserList extends TableComponent\n{\nprotected function getTable(): ?Table\n    {\n        $table = new Table([\n            'class' =\u003e 'table table-hover',\n            'columns' =\u003e [\n                ['name' =\u003e 'name'       , 'title'   =\u003e 'Name'       , 'search',    ],\n                ['name' =\u003e 'email'      , 'title'   =\u003e 'Email'      , 'search',    ],\n                ['name' =\u003e 'position'   , 'title'   =\u003e 'Position'   , 'search',    ],\n                ['name' =\u003e 'updated_at' , 'title'   =\u003e 'Last update', 'sort' =\u003e 'Desc'  , '_format' =\u003e \"date\", ],\n                ['name' =\u003e 'id', 'hide'],\n            ],\n            'order' =\u003e 'updated_at',\n            'query' =\u003e User::whereNull('disabled_at'),\n        ]);\n\n        return $table;\n    }\n}\n```\nThis component will generate a table with a user list with 4 columns.\n\n### Table component properties and functions\nClass: `dimonka2\\flatform\\Livewire\\TableComponent`\n\n| Property | Default | Usage |\n| -------- | ------- | ----- |\n|`idField`|'id'|ID field that needs to be is equal to key column name field. This field is required to be properly setup if you use **Table Select** or **Table Details** functions|\n|`selectAll`|false|Indicates whether user has clicked 'Select all' checkbox|\n|`search`|null|Current search string|\n|`searchDebounce`|500|Search input bounce time, see Livewire documentation|\n|`order`|\"\"|Currently ordered column name. The format could be a name as a string or an array like ['fieldName' =\u003e 'DESC] |\n|`length`|10| Currently selected number of elements per page|\n|`class`||??|\n|`expanded`|[]|Array of expanded row IDs|\n|`filtered`|[]|Array of filter values|\n|`selected`|[]|Array of selected row IDs|\n|`info`||  // make it false to exclude info column|\n|`table`||Contains the current instance of Table definition|\n|`rowsReady`|null|Indicates that table rows are queried and prepared for rendering|\n|`scrollUp`|true|Scrolls page up to the table header after paginator click|\n\nTable component has also few functions, that can be called, defined or overridden:\n| Function | Defined | Parameters | Usage |\n| -------- | ------- | ---------- | ----- |\n|`getTable()`|yes||This is the main function that returns Table class that describes the table properties. This function has to return class `dimonka2\\flatform\\Form\\Components\\Table\\Table`|\n|`getQuery()`|no||Enables defining table query as a separate function, it has to return `Builder` class|\n|`getSelect()`|no||Enables defining table Select as a separate function|\n|`getDetails()`|no||Enables defining table Details as a separate function|\n|`getActions()`|no||Enables defining table Actions as a separate function|\n|`getFilters()`|no||Enables defining table Filters as a separate function|\n|`getView()`|yes|$viewName|By overriding this function you may replace default table views by your own views blades|\n|`getLengthOptions()`|yes||Enables to override length option: number of items per page in filter dropdown|\n\n\n\n### Table definition properties\nClass: `dimonka2\\flatform\\Form\\Components\\Table\\Table`\n\n| Property | Default | Usage |\n| -------- | ------- | ----- |\n|`actions`|null|Define table actions as sub array|\n|`columns`|[]|Sub array with table column definitions. See **Table Column properties** section|\n|`details`|null|Enables table row details as sub array options. See **Table Details properties** section|\n|`filters`|null|Enables table query filters as sub array options. See **Table Filter properties** section|\n|`lengthOptions`| [10, 20, 30, 50, 100] |Number of items per page in filter dropdown|\n|`evenOddClasses`| ['even', 'odd'] |Array with even/odd classes|\n|`query`|null|Laravel Builder query that might contain any kind of joins, whereExists, with or Counts|\n|`search`|null|Setting this property to `false` will disable and hide table search functionality|\n|`select`|null|Enables and define row select options as sub array options. See **Table Select properties** section|\n|`rows`|null|Sub array with table rows definitions. You can define content of rows and columns without setting up `query` property|\n|`formatters`|[]|Lookup array for custom column formatters|\n|`formatFunction`|null|TD element format closure function|\n|`links`|null|Setting this property to `false` will hide pagination links|\n|`rowRenderCallback`|null|Callback required for a Livewire table to separate table from rows rendering, currently unused. Closure parameters: ($row, $html, $details = false)|\n|`rowPreRenderCallback`|null|Allows to update row definition before it is rendered to HTML. Closure parameters ($row, array $def): array|\n|`order`|null|Default ordered column. Can be defined as a column name or as `false` to disable table ordering|\n\n### Table Column properties\n| Property | Default | Usage |\n| -------- | ------- | ----- |\n|`name`|null|Field name, this name is queried from the query via select, also the row data will use field name as a key|\n|`title`|null|Column title used in a header. Title might be in Flatform rendering format|\n|`search`|false|Setting this property to true will include this column in text search query|\n|`sort`|ASC|Setting to false will disable sort by this column, setting column to \"DESC\" will make DESC as default (first) sort order|\n|`system`|false|Setting this property to true means a virtual (calculated) field without adding it to select query statement with disabled sort and search. Useful for calculated fields and menu elements|\n|`class`|null|Class will be added to column's TD and TH tag class attribute|\n|`titleClass`|null|Class will be added to column's TH tag class attribute|\n|`tdClass`|null|Class will be added to column's TD tag class attribute|\n|`hide`|false| `true` denotes that this column will not be rendered|\n|`raw`|null|This option might be used when you need a calculated value and it used as DB:raw select statement|\n|`noSelect`|null|Setting this to true denotes a special case for some columns are in a select statement and there is no need to add an extra select, like “count()”|\n|`as`|see usage|This property specifies field alias and how this column will be mapped to the Model attributes. If this field is undefined for a column fields with table name like `users.name` will have a replacement of dot to '__' e.g.  `users__name`|\n|`format`|null|Column format: callable (IColumnFormat), Flatform language definition or container|\n|`_format`|null|Quick column format: 'number','link', 'check', 'str' or an array with additional parameters|\n|`width`|null|Column width style. Column width will be added to the header style and each TD tag style|\n\n### Table Details properties\nTable Details is a pull down row that may contain any additional details connected to the row including even Livewire components.\n\n| Property | Default | Usage |\n| -------- | ------- | ----- |\n|`expander`| Flatform expander| You may override default table expander by defining this property. See default expander setup in `TableDetails::default_expander` |\n|`callback`|null|Closure function that should return the content of the row details, defined as `function ($row){}`|\n|`disabled`|false|Setting this option to true will disable details|\n|`title`|null|Detail column title|\n|`class`|null|Style classes that will be applied to the expander TD element|\n|`trClass`|null|Style classes that will be applied to the details TR element|\n|`tdClass`|null|Style classes that will be applied to the details TD element|\n|`width`|null|Expander column width style|\n\nExample of table with details:\n\n```php\nprotected function getTable(): ?Table\n    {\n        $table = new Table([\n            'columns' =\u003e [\n                // ...\n            ],\n            'details' =\u003e [\n                'callback' =\u003e function($row) {\n                    // get a queried model from the row\n                    $model = $row-\u003e_item;\n                    return 'Model name: \u003cstrong\u003e' . $model-\u003ename . '\u003c/strong\u003e';\n                    // or alternatively in Flatform language:\n                    return [['span', 'text' =\u003e 'Model name: '], ['strong', 'text' =\u003e $model-\u003ename]];\n                }\n            ],\n        ]);\n\n        return $table;\n    }\n}\n```\n\n### Table Select properties\nTable Select is an additional checkbox in most left column that enables to select table rows.\n| Property | Default | Usage |\n| -------- | ------- | ----- |\n|`checkbox`|Flatform checkbox|Definition of the checkbox in flatform format|\n|`headerCheckbox`|Flatform checkbox|Definition of the checkbox in header that works as \"select all\" in flatform format|\n|`column`|???||\n|`disabled`|false|Setting this option to `true` will disable Table Select|\n|`width`|null|Checkbox column width style|\n|`selectCallback`|null|Callback function used internally by the TableComponent to determine whether the row is selected|\n|`class`|null|Style classes that will be applied to the selected row TR element|\n\nExample of table with Select that will highlight selected rows using class `table-primary`:\n\n```php\nprotected function getTable(): ?Table\n    {\n        $table = new Table([\n            'columns' =\u003e [\n                // ...\n            ],\n            'select' =\u003e [\n                'class' =\u003e 'table-primary',\n            ],\n        ]);\n\n        return $table;\n    }\n}\n```\n\n### Table Action properties\n\nTable actions should be defined together with TableSelect as they currently rendered for selected items.\n\n| Property | Default | Usage |\n| -------- | ------- | ----- |\n|`name`| |Action unique name. This can be ignored. See example.|\n|`position`|null|array where action is rendered: `selection`, `dropdown`, `row`, `row-dd`|\n|`title`| |action title or label|\n|`disabled`|false| Setting this option to `true` will disable this action|\n|`callback`||Action callback. This can be ignored. See example.|\n|`attributes`||All other elements. Those attributes are populated automatically from the unspecified action properties|\n\nExample of table with Table Select and Actions:\n\n```php\n    protected function getTable(): ?Table\n        {\n            return new Table([\n                'columns' =\u003e [\n                    // ...\n                ],\n                'select' =\u003e [\n                ],\n                'actions' =\u003e [\n                    // in this case we just calling a normal Livewire action for this action\n                    ['title' =\u003e 'Disable selected users', 'position' =\u003e 'dropdown',\n                        'icon' =\u003e 'fa fa-ban', 'wire:click.prevent' =\u003e 'disableUsers', 'href' =\u003e '#'],\n                ],\n            ]);\n\n        }\n    }\n    // handle action\n    public function disableUsers()\n    {\n        // get selected models\n        $users = $this-\u003egetSelected(true);\n        // disable users one by one\n        foreach ($users as $user) {\n            if($user-\u003eid != Auth::user()-\u003eid) {\n                $user-\u003edisabled = $disable;\n                $user-\u003eupdate();\n            }\n        }\n        // reload table rows in order to populate changes\n        $this-\u003ereload();\n    }\n```\n\n### Table Filter properties\nFilter is a basic Flatform input control that is associated with persistent input and a closure function that can be attached to filter query based on the user input.\n| Property | Default | Usage |\n| -------- | ------- | ----- |\n|`name`|           | Filter name, assigned to input. This name is used to map filter input. Name has to be unique.|\n|`title`|          | Filter control title or label|\n|`type`|           | Filter type: checkbox, select, text|\n|`disabled`|false  | Disables filter|\n|`value`|          | Default value|\n|`list`|           | Item list for select, might be a closure|\n|`filterFunction`| | Filter callback in format: `function($query, $data) {}`|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimonka2%2Fflatform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimonka2%2Fflatform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimonka2%2Fflatform/lists"}