{"id":18555622,"url":"https://github.com/n2ref/coreui-form","last_synced_at":"2026-01-23T22:27:18.209Z","repository":{"id":62495315,"uuid":"78341408","full_name":"n2ref/coreui-form","owner":"n2ref","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-03T10:38:08.000Z","size":13709,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-03T12:17:20.530Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://n2ref.github.io/coreui-form/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/n2ref.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-01-08T12:29:29.000Z","updated_at":"2025-08-03T10:38:12.000Z","dependencies_parsed_at":"2024-06-02T14:13:56.698Z","dependency_job_id":"82cbdb45-1f9b-4eb7-9d9f-0757678bb430","html_url":"https://github.com/n2ref/coreui-form","commit_stats":null,"previous_names":["n2ref/coreui-form","shabuninil/coreui-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/n2ref/coreui-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2ref%2Fcoreui-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2ref%2Fcoreui-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2ref%2Fcoreui-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2ref%2Fcoreui-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/n2ref","download_url":"https://codeload.github.com/n2ref/coreui-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2ref%2Fcoreui-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28701676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T17:25:48.045Z","status":"ssl_error","status_checked_at":"2026-01-23T17:25:47.153Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-06T21:27:22.400Z","updated_at":"2026-01-23T22:27:18.204Z","avatar_url":"https://github.com/n2ref.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CoreUI form\n\n**[DEMO](https://n2ref.github.io/coreui-form)**\n\n\n### Install with NPM\n\n`npm install coreui-form`\n\n### Example usage\n\n![Preview](https://raw.githubusercontent.com/n2ref/coreui-form/master/preview.png)\n\n```html\n\n\u003cdiv id=\"form-all\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    let allOptions = {\n        id           : \"myform\",\n        lang         : 'en',\n        title        : 'Form title',\n        save         : {\n            url   : '/path/to/object/1',\n            method: 'post'\n        },\n        width        : '100%',\n        minWidth     : 500,\n        maxWidth     : '100%',\n        controlsWidth: 150,\n        labelWidth   : 150,\n        fieldWidth   : 200,\n        readonly     : false,\n        validate     : true,\n        errorClass   : 'error1 error2',\n        onSubmit     : function () {\n            return false;\n        },\n        layout       :\n                '\u003cdiv class=\"d-flex flex-wrap\"\u003e' +\n                '\u003cdiv style=\"width: 500px\"\u003e[column_left]\u003c/div\u003e' +\n                '\u003cdiv class=\"flex-fill\"\u003e[column_right]\u003c/div\u003e' +\n                '\u003cdiv class=\"border-bottom w-100 my-4\"\u003e\u003c/div\u003e' +\n                '\u003cdiv class=\"w-100\"\u003e[column_default]\u003c/div\u003e' +\n                '\u003c/div\u003e',\n        record       : {\n            text    : 'default text value',\n            mask    : '1234 AB-7',\n            int     : 10,\n            float   : -1.1,\n            range   : 40,\n            email   : 'example@mail.com',\n            tel     : '123-456-7890',\n            url     : 'https://www.example.com',\n            color   : '#695D98',\n            password: 123,\n            textarea: \"123\",\n\n            date      : \"2023-01-01\",\n            time      : \"12:00\",\n            datetime  : \"2023-06-12 19:30:00\",\n            date_month: \"2023-01\",\n            date_week : \"2023-W18\",\n\n            select         : 2,\n            select_multiple: [2, 3],\n            modal          : {value: 1, text: \"text\"},\n            dataset        : [\n                {nmbr: 123, date_order: \"2023-01-01\"},\n                {nmbr: \"234\", date_order: \"2023-02-01\"},\n            ],\n            checkbox       : [1, 3],\n            radio          : 2,\n            is_active_sw   : 'Y',\n            hidden         : 'value',\n            wysiwyg        : 'Simple wysiwyg editor'\n        },\n        fields       : [\n            {\n                type  : 'group', label: 'Text and numbers', show: true, showCollapsible: true, column: 'left',\n                fields: [\n                    {\n                        type       : 'text',\n                        name       : 'text',\n                        label      : 'Text',\n                        attr       : {minlength: 3, maxlength: 255},\n                        required   : true,\n                        invalidText: 'Required field',\n                        datalist  : [\n                            {value: 'Adams, John', label: 'Group 1'},\n                            {value: 'Johnson, Peter', label: 'Group 1'},\n                            {value: 'Lewis, Frank', label: 'Group 2'},\n                            {value: 'Cruz, Steve', label: 'Group 2'},\n                            {value: 'Donnun, Nick', label: 'Group 2'}\n                        ]\n                    },\n                    {\n                        type   : 'mask',\n                        name   : 'mask',\n                        label  : 'Mask',\n                        mask   : '0000 AA-0',\n                        options: {translation: {A: {pattern: /[A-Z]/},}}\n                    },\n                    {\n                        type     : 'number',\n                        name     : 'float',\n                        label    : 'Float',\n                        width    : 100,\n                        attr     : {min: -2, max: 50, step: 0.1},\n                        precision: 2\n                    },\n                    {type: 'number', name: 'int', label: 'Int', width: 100, attr: {min: -2, max: 50},},\n                    {type: 'email', name: 'email', label: 'Email'},\n                    {type: 'tel', name: 'tel', label: 'Phone', attr: {pattern: \"[0-9]{3}-[0-9]{3}-[0-9]{4}\"}},\n                    {type: 'url', name: 'url', label: 'Url', attr: {pattern: \"https://.*\"}},\n                    {\n                        type      : 'password',\n                        name      : 'password',\n                        label     : 'Password',\n                        attr      : {minlength: 8},\n                        outContent: ' \u003ci\u003emin length 8\u003c/i\u003e'\n                    },\n                    {\n                        type       : 'textarea',\n                        name       : 'textarea',\n                        label      : 'Text Area',\n                        attr       : {style: 'height:60px; resize: vertical'},\n                        description: 'Description text'\n                    },\n                    {type: 'hidden', name: 'hidden'}\n                ]\n            },\n\n            {\n                type  : 'group', label: 'Date and time', column: 'right', id: 'group_id',\n                fields: [\n                    {type: 'date', name: 'date', label: 'Date', width: 110,},\n                    {type: 'time', name: 'time', label: 'time', width: 110,},\n                    {\n                        type : 'datetime-local',\n                        name : 'datetime',\n                        label: 'Date time',\n                        attr : {min: \"2023-06-06 00:00:00\", max: \"2023-06-14 00:00:00\"}\n                    },\n                    {type: 'month', name: 'date_month', label: 'Date month',},\n                    {type: 'week', name: 'date_week', label: 'Date week',},\n                    {\n                        type  : 'date', name: 'date_rage1', label: 'Date range', width: 110,\n                        fields: [\n                            {type: 'date', name: 'date_rage2', width: 110}\n                        ]\n                    },\n                ]\n            },\n\n            {type: 'color', name: 'color', label: 'Color'},\n            {\n                type     : 'range', name: 'range', label: 'Range', width: 200, attr: {min: 0, max: 100, step: 1},\n                datalist: [\n                    {value: '10'},\n                    {value: '20'},\n                    {value: '30'},\n                ]\n            },\n\n            {\n                type   : 'select', name: 'select', label: 'Select', width: 200, column: 'default',\n                options: [\n                    {value: '', text: 'No value'},\n                    {\n                        type   : \"group\", label: 'Group 1',\n                        options: [\n                            {value: 1, text: 'Adams John'},\n                            {value: 2, text: 'Johnson Peter'},\n                        ]\n                    },\n                    {\n                        type   : \"group\", label: 'Group 2', attr: {class: \"group-class\"},\n                        options: [\n                            {value: 3, text: 'Lewis Frank'},\n                            {value: 4, text: 'Cruz Steve'},\n                            {value: 5, text: 'Donnun Nick'}\n                        ]\n                    }\n                ]\n            },\n            {\n                type   : 'select', name: 'select_multiple', label: 'Multiple', width: 200, attr: {multiple: \"multiple\"},\n                options: [\n                    {value: 1, text: 'Adams John'},\n                    {value: 2, text: 'Johnson Peter'},\n                    {value: 3, text: 'Lewis Frank'},\n                    {value: 4, text: 'Cruz Steve'},\n                    {value: 5, text: 'Donnun Nick'},\n                ]\n            },\n            {\n                type   : 'checkbox', name: 'checkbox', label: 'Check box',\n                options: [\n                    {value: 1, text: 'Check 1'},\n                    {value: 2, text: 'Check 2'},\n                    {value: 3, text: 'Check 3'}\n                ]\n            },\n            {\n                type   : 'radio', name: 'radio', label: 'Radio Box', invalidText: 'Required field',\n                options: [\n                    {value: 1, text: 'Radio 1'},\n                    {value: 2, text: 'Radio 2'},\n                    {value: 3, text: 'Radio 3'}\n                ]\n            },\n            {type: 'switch', name: 'is_active_sw', label: 'Switch', valueY: 1, valueN: 0},\n            {type: 'file', name: 'file', label: 'Files', width: 300},\n            {\n                type   : 'modal', name: 'modal', label: 'Modal', width: 300,\n                options: {\n                    title   : 'Modal title',\n                    size    : 'lg',\n                    url     : 'data/modal.html',\n                    onHidden: function () {\n                        console.log('onHidden')\n                    },\n                    onClear : function () {\n                        console.log('onClear')\n                    },\n                    onChange: function () {\n                        console.log('onChange')\n                    },\n                }\n            },\n            {\n                type   : 'dataset', name: 'dataset', label: 'Dataset',\n                options: [\n                    {\n                        type : 'text',\n                        title: 'Номер',\n                        name : 'nmbr',\n                        attr : {style: 'width: 200px'}\n                    },\n                    {\n                        type : 'date',\n                        title: 'Дата',\n                        name : 'date_order',\n                        attr : {style: 'width: 140px'}\n                    }\n                ]\n            },\n\n            {type: 'custom', label: 'Custom', content: '\u003cdiv class=\"mt-2\"\u003e\u003ci\u003ehtml\u003c/i\u003e\u003c/div\u003e'},\n            {type: 'wysiwyg', name: 'wysiwyg', label: 'Wysiwyg', width: 600, height: 300, options: 'simple'}\n        ],\n        controls     : [\n            {\n                type: \"submit\", content: \"Save\", onClick: function (e) {\n                }\n            },\n            {\n                type: \"button\", content: \"Button\", onClick: function (e) {\n                }\n            },\n            {type: \"link\", content: \"Link\", href: \"#\"},\n            {\n                type: \"custom\", content:\n                        '\u003cdiv class=\"form-check\"\u003e' +\n                        '\u003clabel class=\"form-check-label\"\u003e' +\n                        '\u003cinput class=\"form-check-input\" type=\"checkbox\"\u003e' +\n                        'Check me\u003c/label\u003e' +\n                        '\u003c/div\u003e'\n            }\n        ]\n    };\n\n    let form = CoreUI.form.create(allOptions);\n    $('#form-all').html(form.render());\n    form.initEvents();\n\u003c/script\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn2ref%2Fcoreui-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fn2ref%2Fcoreui-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn2ref%2Fcoreui-form/lists"}