{"id":28951188,"url":"https://github.com/wxsub/element-plus-formkit","last_synced_at":"2026-04-04T17:05:32.976Z","repository":{"id":299772848,"uuid":"1004142797","full_name":"wxsub/element-plus-formkit","owner":"wxsub","description":"Data-driven form component based on ElementPlus implementation","archived":false,"fork":false,"pushed_at":"2026-04-04T15:06:52.000Z","size":17541,"stargazers_count":72,"open_issues_count":1,"forks_count":7,"subscribers_count":9,"default_branch":"main","last_synced_at":"2026-04-04T16:44:39.269Z","etag":null,"topics":["el-form","element-plus","formkit","tailwindcss","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"https://wxsub.github.io/element-plus-formkit","language":"Vue","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/wxsub.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-18T07:19:47.000Z","updated_at":"2026-04-04T15:00:37.000Z","dependencies_parsed_at":"2026-03-15T09:01:48.459Z","dependency_job_id":null,"html_url":"https://github.com/wxsub/element-plus-formkit","commit_stats":null,"previous_names":["wxsub/element-plus-formkit"],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/wxsub/element-plus-formkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsub%2Felement-plus-formkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsub%2Felement-plus-formkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsub%2Felement-plus-formkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsub%2Felement-plus-formkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wxsub","download_url":"https://codeload.github.com/wxsub/element-plus-formkit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wxsub%2Felement-plus-formkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31407571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"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":["el-form","element-plus","formkit","tailwindcss","typescript","vue","vue3"],"created_at":"2025-06-23T14:09:07.580Z","updated_at":"2026-04-04T17:05:32.653Z","avatar_url":"https://github.com/wxsub.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/wxsub/element-plus-formkit/refs/heads/main/pages/docs/public/logo.png\" width=\"128\" height=\"128\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    Based on ElementPlus form components for the combination of packaging , through the data flow method of the form data , to facilitate rapid development.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/element-plus-formkit\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/element-plus-formkit\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/wxsub/element-plus-formkit\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/element-plus-formkit\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/element-plus-formkit\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/element-plus-formkit\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https[.npmignore](.npmignore)://github.com/wxsub/element-plus-formkit\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/node-%3E%3D18-lightgreen?logo=node.js\u0026labelColor=darkgreen\u0026color=brightgreen\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://wxsub.github.io/element-plus-formkit/en/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Docs-Official%20Documentation-brightgreen?logo=readthedocs\u0026logoColor=white\" alt=\"Official Documentation\" /\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n**English** | [中文](./README.zh_CN.md)\n\nTo check out live examples and docs, visit [document](https://wxsub.github.io/element-plus-formkit/en/get-started.html).\n\n\n## Install\n```\npnpm add element-plus-formkit@latest\n```\n\n## Use Formkit components\n```\n// main.ts\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport 'element-plus-formkit/dist/index.css'\n\nconst app = createApp(App);\n\napp.mount('#app');\n```\n\n### Basic Usage Guide\nUsing Formkit components on the page\n\n```\n\u003ctemplate\u003e\n  \u003cFormKit :config=\"config\" v-model=\"FormData\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { FormKit } from 'element-plus-formkit'\n\nconst FormData = reactive({})\n\nconst config = ref([\n  {\n    type: 'input',\n    key: 'name',\n    label: 'Name'\n  },\n  {\n    type: 'select',\n    key: 'class',\n    label: 'Class',\n    options: []\n  }\n])\n\u003c/script\u003e\n```\n\n### registerModule\nFormkit allows you to register customized components\n```\nimport { registerModule } from 'element-plus-formkit';\n\nimport CustomEditor from './components/CustomEditor.vue'\nregisterModule('customEditor', CustomEditor)\n\n// formkit item config\n{\n    type: 'customEditor', // Using custom modules\n    key: 'content',\n    label: 'Article'\n}\n```\n\n### setConfigure\nformkit accepts a number of global configuration parameters, e.g. file upload network, etc.\n```\n// Set global configuration (can be set before or after installation)\nimport { setConfigure } from 'element-plus-formkit'\nimport type { UploadRequesterOptions } from 'element-plus-formkit/types/formkit-types'\nimport 'element-plus-formkit/dist/index.css'\n\nsetConfigure('upload', async (file: File, options: UploadRequesterOptions) =\u003e {\n    const UploadFormData = new FormData()\n    UploadFormData.append('file', file)\n    const response = await useAxios().post(\"/default/oss/upload\", UploadFormData, {\n        headers: { 'Content-Type': 'multipart/form-data' },\n        onUploadProgress: (progressEvent) =\u003e {\n            const total = progressEvent.total || 1,\n                loaded = progressEvent.loaded;\n            options.onProgress?.({ total, loaded })\n        }\n    })\n    return response\n})\n```\n**Note that formkit relies on elementplus form for development, and you will need to introduce elementplus into your system.**\n\n## Component Attributes\n| Parameters | Description | Types | Defaults | \n| -------- | :----- | :----: | :----: |\n| model-value / v-model | Component Binding Data Source | Object | {}\n| config | Form configuration items, detailed config configuration parameters refer to `config Attributes` below | Array | []\n| disabled | Disable entire form | Boolean | false  \n| labelPosition | Label alignment rules, refer to [ElementPlus Form Attributes](https://element-plus.org/zh-CN/component/form.html#form-api) | String | top  \n| labelWidth | labelWidth of the title of the form item (this parameter is only valid when labelPosition is left or right, and will be ignored when labelPosition is top) | Number | 125 \n| columns | How many list items are displayed in each row | Number / String | 5  \n| size | The size of the components in the form (optional: '' / 'large' / 'default' / 'small') | String | mini \n| rows | See [ElementPlus Row API](https://element-plus.org/zh-CN/component/layout.html#row-api) | String | top\n\n**Note**: `label-width` will be invalidated when `columns` is set to the string `'auto'`, and the result will be `0px` when it is invalidated.\n\n## Config Attributes\n| Parameters | Description | Optional Values | Type | Case\n| -------- | :-----:  |  :----: |  :----:  | :----: |\n| label |  Form item name  |   -   |  String  |  -\n| type | Type of this form item | Configurable, see below for default Config type explain | String | -\n| disabled |  Whether the form item is disabled  |   true / false   |  boolean  |  -\n| keys |  form item key value (this item should correspond to the field of the form item returned by the backend, so as to facilitate direct interaction between the modified data and the backend)  |   -   |  String  |  -\n| span |  Number of columns occupied by the current item grid  |   24   |  number  |   24\n| labelWidth |  The length of the label, e.g. '50px'. This value is inherited by form-item as a direct child of Form. auto can be used.  |   -   |  string / number  |   ''\n| rules |  Form item validation rules, empty without validation  |   -   |  Array  |   -\n| options |  Operational items for components such as select, cascader, etc.  |   -   |  Array  |  ` options: [{ name: 'Open all day', id: 'ALL' }] `\n| requester |  This form item requires a custom requester for remote data loading  |   -   |  Promise  |  ` requester: useAxios().get('/default/shop/category-tree') `\n| handler |  Processing remote data in conjunction with remote data loading  |   -   |  Function  |  ` handler: (response: any) =\u003e Array.isArray(response) ? response : [] `\n| props |  Parameters bound directly to the component  |   -   |  Object  |  `props: { placeholder: 'Pls input shop code', max: 10 }`\n| visible |  This form entry displays the fields that need to be associated  |   -   |  Object  |  ` visible: { key: \"showid\", value: 0 } `Indicates that the item is not displayed when the value of the field `showid` in the form is 0.\n| events |  Accepting component events  |   -   |  Object  |  -\n| hint |  Display prompt text below the current line  |   -   |  string  |  -\n\n## Config type explain\n| Keywords | Description | Remarks\n| -------- | :-----: | :----: |\n| input | input box | -\n| select | drop-down selection box | -\n| datePicker | DateTimePicker | [Documentation](https://element-plus.org/zh-CN/component/datetime-picker.html)\n| timePicker | timePicker | [Documentation](https://element-plus.org/zh-CN/component/time-picker.html)\n| cascader | Cascade Selector | [documentation](https://element-plus.org/zh-CN/component/cascader.html)\n| remoteSearchSelect | input with remote search | Use the initialValue field for parameter fallback.\n| address | addressSelect | Internal fetchAddressData method requires API modification.\n| checkbox | radio | Radio | SingleCheckBox | checkboxes -\n| radio | Radio | SingleCheckBox | -\n| inputNumber | number input box | -\n| upload | File Upload | uploadUrl needs to be modified in utils/upload.class.ts.\n| rate | rating | [documentation](https://element-plus.org/zh-CN/component/rate.html)\n\n## FormKit Slots\n| Slot Name | Description | Parameters\n| -------- | :-----: | :-----: |\n| prepend | Input box front content | -\n| append | form item post content | -\n| content | form level content | configs =\u003e config item\n| ${config.keys} | form item content component level content | row =\u003e current config item, value =\u003e component binding value\n\n## Exposes\n| Name | Description | Parameters | Type\n| -------- | :-----: | :-----: | :-----: |\n| validate | Validate form items now | openTips =\u003e If or not popup tips for failed validation | Promise\n| clearValidate | clearValidate | - | Function\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwxsub%2Felement-plus-formkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwxsub%2Felement-plus-formkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwxsub%2Felement-plus-formkit/lists"}