Design Concept
Besides being fun, the main purpose is to practice component design.
Therefore, while designing, you need to consider the following aspects:
Component Characteristics
⚙️ Functionality
Currently focused on Vue. Remember to add TSDoc comments for each field.
Prop
Customization for content and style, with proper type checking and default values.
Expose
Members that the component exposes externally.
Emit
Besides common events like click, focus, consider if there are other events that need to be emitted.
Slot
To provide higher customizability, consider slot props or dynamic slot rules, etc.
🤏🏻 Responsiveness
- For example, referring to Quasar, consider the following breakpoints:
📚 Breakpoints | Quasar Framework
- You need to account for differences between touch and mouse interactions.
Recommended reading:
✨ Accessibility (a11y)
At minimum, implement tabindex. You can refer to the following link for more details:
📚 巧用 tabindex 讓你的 UI 更鍵盤友善 (Chinese)
For deeper understanding, study more a11y resources:
🧪 Testability
For each prop, expose, emit, and slot, consider at least 3 types of test cases:
- Happy Path: When used under normal and correct conditions, the expected behavior.
- Sad Path: When used under normal but incorrect content conditions, the expected behavior.
- Bad Path: When used under abnormal usage conditions, the expected behavior.
Recommended reading:
📚 Easy Understanding of Vue 3 Unit Testing (Chinese)
📚 javascript-testing-best-practices
Deliverables
Please do not use UI libraries like Quasar or Vuetify for development, but you can use utility libraries like Lodash or VueUse.
So, where's the documentation?
Engineers must practice writing documentation. ( •̀ ω •́ )✧
You need to describe the functionality requirements, implementation methods, and test results. Create a component documentation that allows others to understand the component's features and usage.
The tools for documentation are flexible, such as VitePress, Storybook, etc.
Make sure the documentation includes:
- Description of props, slots, events (emits), and methods (exposes) provided by the component.
- Examples and explanations for all features (props, slots, events, methods).