Design Concept

Besides being fun, the main purpose is to practice component design.

Therefore, while designing, you need to consider the following aspects:

Currently focused on Vue. Remember to add TSDoc comments for each field.

Customization for content and style, with proper type checking and default values.

Members that the component exposes externally.

Besides common events like click, focus, consider if there are other events that need to be emitted.

To provide higher customizability, consider slot props or dynamic slot rules, etc.

---

• 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:

📚 Learn Responsive Design

---

At minimum, implement tabindex. You can refer to the following link for more details:

📚 巧用 tabindex 讓你的 UI 更鍵盤友善 (Chinese)

For deeper understanding, study more a11y resources:

📚 Learn Accessibility

---

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

---

Please do not use UI libraries like Quasar or Vuetify for development, but you can use utility libraries like Lodash or VueUse.

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).