Releases: wxsub/element-plus-formkit
Some minor optimizations and new interactive features for treeSelect
Introduce a small CLI to install an AI "skill" and include the skill content in the package. Adds scripts/cli.mjs (CLI entry) and scripts/install-skill.mjs (installer that copies SKILL.md into various agent skill dirs), and a new skills/element-plus-formkit-generator/SKILL.md skill definition. Update package.json to expose the CLI via bin, include skills and scripts in the published files, add a postinstall hint to run the skill installer, and add related keywords. Update .npmignore to allow publishing the skills and scripts. Update start-dev to copy the new scripts and skills into the development package. These changes enable easy installation of the AI coding skill into editor/agent skill folders (Trae, Cursor, Claude, GitHub Copilot).
Add a new treeSelect component (src/modules/treeSelect.vue) with v-model support, configurable labelKey/valueKey defaults, and scoped slot passthrough. Register the component in asyncModulesLoader (use local async component instead of element-plus proxy). Update English and Chinese docs (pages/docs/en/modules.md, pages/docs/modules.md) to replace inline data/props with an options array, introduce props-specific table (labelKey/valueKey), rename example dataset key to treeSelectValue, and add a requester/handler example for dynamic option loading.
Code Quality Optimization
- Remove auto-alignment handling and update docs
Remove legacy auto-alignment logic and related styles from FormKit component, simplifying the root class binding and always using configured label widths. Update English and Chinese docs to adjust labelWidth example (remove quotes) and remove the 'columns: auto' tip and example blocks. These changes clean up unused conditional behavior and sync documentation with the simplified implementation. - Add config.col documentation for grid options
Introduce theconfig.colfield in both Chinese and English docs to document additional el-col attributes (offset, push, pull, xs, sm, md, lg, xl) supported from Element Plus. Notes thatconfig.spanshould not be duplicated incol, and includes examples demonstrating offset usage and responsive layout with FormKit code samples. - Bind col props to el-col
Allow passing Element Plus row props via a new rows prop on FormKit and per-column props via conf.col bound to el-col. added v-bind on el-col, and updated types to include ColProps and a col?: Partial in ConfigInterface. This enables customizing el-row/el-col attributes (e.g., alignment, gutter overrides) from form configs.
Bump version and rename slot to append
Bump src/formkit.vue to use the 'append' slot instead of 'additional'. Change the v-if check to $slots.append and the slot name to 'append' so appended content renders correctly.
Add autocomplete to async Modules mapping
Register the Element Plus Autocomplete component in the Modules map by adding autocomplete: asyncElementPlus('ElAutocomplete') to src/asyncModulesLoader.ts. This enables lazy-loading of the Autocomplete component and keeps input-related components consistent with the existing asyncElementPlus usage.
Add mention module and inputTag module
- Add a new mention module component (src/modules/mention.vue) and register it in the async modules loader (src/asyncModulesLoader.ts)
- Import the Popover component (modules/popover.vue) and add it to the named exports alongside Upload, Address, and Uploader so the Popover component is available in the library's public API.
- Manage popover visibility with a new visible ref bound via v-model:visible and add handleCascaderChange to auto-close the popover when cascader is single-select. Wire the cascader @change to that handler, update template class bindings to use CSS modules, and animate/rotate the dropdown icon when the popover is open. Also adjust the label separator from ' | ' to ' | ' and minor markup/style cleanups.
- Convert component styles to CSS Modules and update templates to use $style bindings (checkbox, select, upload, formkit). Add scoped class generation in vite config (generateScopedName: '[hash:5]'). Refactor upload component to use CSS variables for sizing and computed inline style, replace deep/global selectors with :global as needed, and move row-gap ha
- Enhance FileUploader.isValidFileType to more robustly parse and match typePatterns. Patterns are split by commas/whitespace, and an empty set of patterns allows any file. Matching now supports file extension checks ('.ext'), wildcard MIME types ('type/*'), exact MIME matches, and regex patterns (case-insensitive) with safe try/catch handling. File name/type are normalized to lowercase and missing properties are handled gracefully.
Urgent version updates and bug fixes
Performance adjustments to certain components
- Refactored the
getComponentSlotSuffixesfunction into a computed property,slotSuffixMap, to avoid redundant calculations - Replaced
conf[‘disabled’]withconf.disabledto maintain consistent property access style - Pre-calculated the slot suffix mappings for all configuration options to improve rendering performance
- Expanded the $attrs type for the radio, select, and checkbox components from a simple object to a subset corresponding to the Element Plus component properties
- Replaced repeated calls to useAttrs() in the popover component with the predefined attrs
- Pre-fetched globalConfig in the checkbox component to avoid repeated calls
- Removed redundant valueKey property definitions in the select component
- refactor: Optimizing asynchronous loading for Element Plus components
- fix(formkit): Optimized error handling for asynchronous requests and replaced the enter event with the error event
- Changed
executeRequestStackfrom sequential to parallel execution to improve performance - Added an error-handling mechanism that returns an empty array as a fallback when a request fails and triggers the
errorevent - Removed unused
ElMessageimports - Replaced the
enterevent with the more genericerrorevent for error reporting
Replace Suspense with CSS skeleton loader and simplify loading behavior
Resolve Uploader method type exports warning
Update types/element-plus-formkit.d.ts to import UploaderClass and export typings for Address and Uploader. Adds import from '@/utils/upload.class', exports Address as a Component, exposes Uploader as both a value (typeof UploaderClass) and a type alias, so consumers have proper TypeScript typings for the uploader utility and Address component.
Refactor request stack handling
- refactor how requester configs are processed in formkit.vue. Removed the reactive Stacks array and onMounted initialization; introduced a computed requesterConfigs (filters props.config for items with requester and non-standalone types) and a deep, immediate watch that calls executeRequestStack when items change. executeRequestStack now accepts an items array iterator, making request execution respond to dynamic config updates and improving reactivity handling.
- Replace the deprecated upload size prop with explicit width and height props (defaults 80). In the component, add autoCalcSize to compute icon/progress sizes, update template bindings and styles to use width/height, and adjust icon/progress sizing.