{"id":18427105,"url":"https://github.com/nowisesys/uup-web-component","last_synced_at":"2025-04-13T19:38:44.575Z","repository":{"id":57028826,"uuid":"167280615","full_name":"nowisesys/uup-web-component","owner":"nowisesys","description":"OOP web components for PHP","archived":false,"fork":false,"pushed_at":"2019-02-08T12:32:23.000Z","size":582,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-16T08:27:30.408Z","etag":null,"topics":["component","php-library","render","template"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nowisesys.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-24T01:24:29.000Z","updated_at":"2021-06-17T17:10:36.000Z","dependencies_parsed_at":"2022-08-23T16:20:47.379Z","dependency_job_id":null,"html_url":"https://github.com/nowisesys/uup-web-component","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nowisesys%2Fuup-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nowisesys%2Fuup-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nowisesys%2Fuup-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nowisesys%2Fuup-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nowisesys","download_url":"https://codeload.github.com/nowisesys/uup-web-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248769392,"owners_count":21158809,"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":["component","php-library","render","template"],"created_at":"2024-11-06T05:09:39.649Z","updated_at":"2025-04-13T19:38:44.547Z","avatar_url":"https://github.com/nowisesys.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"## UUP-WEB-COMPONENT - OOP approach on web components\n\nThis library provides web component classes for rendering HTML. \n\nA component is a class that has both behavior and interface. The main classes\nare widget (standard components), element (simple HTML elements) and finally\ncontainer (using template file). You can use these direct, but recommended is\nto use one of their sub-classes.\n\nThe easiest way to get started is to examine the code in the examples directory\nwhile watching the outcome in a web browser. It's recommended to open the project\nin i.e. NetBeans IDE to get autocomplete of property names. Start explore the \ncontainer and widget classes.\n\nThe library is organized as:\n\n    UUP\\Web\\Component\n        +-- Component           // Interface class\n        +-- Transform           // Rendition transformer (callable)\n        +-- Element             // Generic element component class\n        +-- Container           // Generic container component class\n        +-- Style               // Enum classes for inline CSS\n        |     +-- Alignment\n        |     +-- Border\n        |     +-- Color\n        |     +-- Font\n        |    ...\n        +-- Collection          // Collection support (i.e. attributes and events).\n        |     +-- Attributes\n        |     +-- Classes\n        |     +-- Events\n        |     +-- Stylesheet\n        |     +-- Properties    // Generic properties\n        |     +-- Collection    // Base class\n        +-- Element             // Components with direct rendering (HTML elements)\n        |     +-- Button\n        |     +-- Span\n        |     +-- List\n        |     +-- Table\n        |    ...\n        +-- Widget              // Components with direct rendering (specialized objects)\n        |     +-- Button\n        |     +-- Combobox\n        |     +-- Panel\n        |    ...\n        +-- Container           // Components using rendering template\n              +-- Grid\n              +-- Card\n              +-- Download\n              +-- Sitemap\n\nAll classes derived from element has access to the special properties class, \nevent, props, style and attr that provides collection support. Settings in the\nprops collection are transformed during rendering. Some of the collection has\nvirtual sub collections that groups properties together:\n\n```php\n$element = new Element(array(), \"p\", \"...\");\n$element-\u003eid = 12;\n$element-\u003edata-\u003eorder = 4885;\n$element-\u003erender();     // \u003cp id=\"12\" data-order=\"4885\"\u003e...\u003c/p\u003e\n```\n\nComponents contains properties and optional sub components. It's the job of the \nrender transformer to generate HTML from component objects and rendition can be \naltered by passing the transformer to render() method or set a default transformer \nglobally:\n\n```php\n$transformer = new CustomTransformer();\nTransformer::setInstance($transfomer);\n```\n\nThe reason for using a custom transformer could be to support themes, creating \nhigh-contrast styles or translation of text. It's up to you as the library user\nto decide how to use it, at the extreme you can bypass the builtin rendition and\nuse the library classes as plain objects.\n\nThe default render transformer is paragon that produces HTML targetting the W3.CSS\nlibrary from properties defined in component objects:\n\n```php\n$button = new Button(\"Download\");\n$button-\u003ecolor = \"red\";\n$button-\u003erender();          // \u003cbutton class=\"w3-btn w3-red\"\u003eDownload\u003c/button\u003e\n```\n\nYou can override this by passing an transform class instance to the render()\nmethod and modify classes:\n\n```php\n$transform = new MaterialDesignTransform();\n$button-\u003erender($transform);\n```\n\nAnother option is to not using the component properties, but to use the collection \nproperties instead:\n\n```php\n$button = new Button(\"Download\");\n$button-\u003eattr-\u003ecolor = \"red\";\n$button-\u003erender();          // \u003cbutton color=\"red\"\u003eDownload\u003c/button\u003e\n```\n\nFor setting attributes that can't be used as property names (syntax violation on\ni.e. background-color), use the add() method instead:\n\n```php\n$button-\u003eattr-\u003eadd(\"background-color\", \"red\");\n```\n\nYou are not limited to setting individual properties. The class, event, attr and \nstyle properties all accepts an array:\n\n```php\n$button-\u003eattr-\u003eset(array(\n    \"color\" =\u003e \"red\",\n    \"background-color\" =\u003e \"blue\"\n));\n```\n\nFor setting all at once, use the second argument during construction:\n\n```php\n$button = new Button(\"Download\", array(\n    \"style\" =\u003e array(           // Define inline CSS\n            ...     \n    ),\n    \"event\" =\u003e array(           // Define event handlers\n            ...     \n    ),\n));\n```\n\nAll components (element and containers) can contain other child components:\n\n```php\n$div = new Div();\n$p1 = $div-\u003eadd(new Paragraph(\"Some text here\"));\n$p2 = $div-\u003eadd(new Paragraph(\"More text here\"));\n$div-\u003erender();     // \u003cdiv\u003e\u003cp\u003eSome text here\u003c/p\u003e\u003cp\u003eMore text here\u003c/p\u003e\u003c/div\u003e\n```\n\nCalling render() on parent component automatic renders all child components. \nThe rendition will take care of outputting them inside itself using their added \norder but after its own text (think inner HTML).\n\nThe scope of this library is not to provide a complete set of HTML element \ncomponents. Neither does it care if nesting input elements inside an option\nelement.\n\n### More\n\nVisit the [project page](https://nowise.se/oss/uup-web-component/) for more examples.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnowisesys%2Fuup-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnowisesys%2Fuup-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnowisesys%2Fuup-web-component/lists"}