{"id":19714398,"url":"https://github.com/peternaydenov/vue-form-list","last_synced_at":"2026-02-02T17:37:21.529Z","repository":{"id":57135895,"uuid":"289299886","full_name":"PeterNaydenov/vue-form-list","owner":"PeterNaydenov","description":"Create and manipulate HTML forms","archived":false,"fork":false,"pushed_at":"2024-02-04T11:14:05.000Z","size":595,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T14:58:08.487Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/PeterNaydenov.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":"2020-08-21T15:14:03.000Z","updated_at":"2021-11-01T07:50:24.000Z","dependencies_parsed_at":"2024-02-04T12:32:57.725Z","dependency_job_id":"ca0abb1d-6155-4803-b1e3-50074cc4db8b","html_url":"https://github.com/PeterNaydenov/vue-form-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvue-form-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvue-form-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvue-form-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvue-form-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PeterNaydenov","download_url":"https://codeload.github.com/PeterNaydenov/vue-form-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241035731,"owners_count":19898082,"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":[],"created_at":"2024-11-11T22:31:29.041Z","updated_at":"2026-02-02T17:37:21.470Z","avatar_url":"https://github.com/PeterNaydenov.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-form-list\n**BROKEN!!!:** *Do not use it until repear*\n\nCreate and manipulate HTML-forms with a javascript objects.\n\n## WARNING: UNDER HEAVY DEVELOPMENT!\n\nDescribe form as simple array of formset objects:\n\n```js\n[ formset, formset, formset ]\n\n// formset is an object\nlet formset = { legend, fields, customClasses }\n\n// legend : string(optional). Represents formset legend;\n// fields  : field[](required). List of field descriptions;\n// customClasses : className[](optional). Array of custom classnames applied to formset container;\n\nlet fields = [ field, field ];\n\n// field is an object that describes input field. Field has few\n// required properties but also have some optional. Full list of props\n// is here:\n\n{\n      label         // string (required). Label infront of input;\n    , id            // string (required). Should be a unique string;\n    , value         // string (optional). Predefined value. Default value = '';\n    , options       // enum(optional). List of possible values \n    , required      // boolean (optional). Flag to filter only required fields;\n    , error         // string(optional). If any error should be displayed;\n    , customClasses // Array of custom classnames applied to field container; \n}\n\n// Example:\n\n{\n      label   : 'user'\n    , value   : 'Darwin' \n    , id      : 'userName'\n    , options : [ 'Darwin', 'Gumball', 'Penny' ] \n}\n\n```\n### field.options\n\nThere are two ways to describe options. As object with two properties: text and value. When text and value are equal the option can be represented with a string.\n```js\n, options : [ \n                { text: 'Darwin', value: 'fish' }\n              , { text: 'Gumball', value: 'cat' }\n              , 'Penny' // Equal to {text:'Penny', value: 'Penny' }\n      ] \n```\n\n\n\n## Methods\n\n```js\n   hide  : 'Hide elements with specific ids'\n , show  : 'Show elements with specific ids'\n , filter : 'Apply filter function on each field'\n```\n\n\n\n\n\n## Events\n\n### form-ls:change\nTriggered when value of field was changed. Listen for change event example:\n\n```js\neBus.on ( 'form-ls:change', ([id,value]) =\u003e {\n                // value contain the new value of \n        })\n\n```\n\n\n\n\n\n## Project setup\n\n```\nnpm i @peterNaydenov/vue-form-list\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeternaydenov%2Fvue-form-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeternaydenov%2Fvue-form-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeternaydenov%2Fvue-form-list/lists"}