├── .gitignore ├── .vscode └── extensions.json ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── preview ├── el-tree-select.png ├── elAutocomplete.png ├── elCascader.png ├── elDatePicker.png ├── elRate.png ├── elSelect.png ├── elSwitch.png ├── elTimePicker.png ├── elUpload.png ├── formItem.png └── ui.png ├── public └── vite.svg ├── src ├── App.vue ├── assets │ └── vue.svg ├── components │ ├── Autocomplete.ts │ ├── Cascader.ts │ ├── Checkbox.ts │ ├── CheckboxGroup.ts │ ├── ColorPicker.ts │ ├── DatePicker.ts │ ├── DateRangePicker.ts │ ├── Form.vue │ ├── FormItem.vue │ ├── FormUpload.ts │ ├── Input.ts │ ├── InputNumber.ts │ ├── Password.ts │ ├── RadioGroup.ts │ ├── Rate.ts │ ├── Select.ts │ ├── Slider.ts │ ├── Switch.ts │ ├── Textarea.ts │ ├── TimePicker.ts │ ├── TimeSelect.ts │ ├── Transfer.ts │ ├── Tree.ts │ ├── TreeSelect.ts │ ├── Upload.ts │ ├── createFormItemInput.ts │ └── index.ts ├── main.ts ├── pages │ ├── autocomplete.vue │ ├── cascader.vue │ ├── date.vue │ ├── form.vue │ ├── index.vue │ ├── input.vue │ ├── password.vue │ ├── radio.vue │ ├── rate.vue │ ├── select.vue │ ├── slots.vue │ ├── switch.vue │ ├── time.vue │ ├── transfer.vue │ ├── tree.vue │ └── upload.vue └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Raymond 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FormKit element 2 | 3 | Element plus for FormKit. 4 | 5 | Most of the components are based on Element plus, attributes directly pass to the element plus component. 6 | 7 | ## Preview 8 | 9 | preview 10 | 11 | ## Setup 12 | 13 |

14 | 1. This library require Element plus and FormKit to be installed. 15 |

16 | 17 | If you are using nuxt, you can use FormKit nuxt module to install FormKit. 18 | 19 |

20 | 2. Create formkit.config.ts if using nuxt 21 |

22 | 23 | ```typescript 24 | import { DefaultConfigOptions } from '@formkit/vue' 25 | import { createElementPlugin } from 'formkit-element' 26 | 27 | const config: DefaultConfigOptions = { 28 | plugins: [createElementPlugin()] 29 | } 30 | ``` 31 | 32 | 1. or direct setup in main.ts 33 | ```typescript 34 | const app = createApp(App); 35 | 36 | import { plugin, defaultConfig } from '@formkit/vue' 37 | import { createElementPlugin } from "formkit-element"; 38 | app.use(plugin, defaultConfig({ 39 | plugins: [createElementPlugin()] 40 | })) 41 | ``` 42 | 43 | ## Usage 44 | 45 | ### Basic 46 | 47 | ```html 48 | 49 | 50 | 51 | 52 | 54 | 55 | 56 | 57 | 58 | 59 | 69 | 70 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | ``` 90 | 91 |

92 | When using attributes `form-item` the component will be wrapped in a el-form-item component. 93 | 94 | #### el-form-item preivew 95 | 96 | preview 97 | 98 | 99 | ```typescript 100 | 101 | 102 | 103 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | ``` 142 | 143 | 144 | ### Supported type 145 |

146 | el-cascader 147 | 148 |
149 | 150 |
151 | el-rate 152 | 153 | 154 | ```html 155 | 156 | 157 | 158 | 159 | 160 | 162 | 163 | 164 | 165 | ``` 166 | 167 |
168 | 169 |
170 | el-select 171 | 172 | 173 | Custom template of select options 174 | ```html 175 | 207 |