Test Task Table
View
Table page
Form page
TODO list:
Base tasks
- setup repo (base): vue, vite, ts, vue-router, pinia
- setup repo (optional): eslint, prettier + github actions
Components
- button
- popup (may be reused for alerts potentially in the project)
- confirm popup (required)
- input (number)
- table
Pages
- table
- form
Interesting places for reviewer
Button border color
I used native css in this project, because components are relatively small, therefore, most of the selectors are short. Also, native css, opposed to scss supports wonderful currentColor method, which was used to compute the color of the button's border
Additionally, I used the css variables to support potential themization of the app.
Popups using native dialog element
Component from src/components/AppPopup is using native dialog tag and it's events. On form submit the dialog is closed. To use the native dialog methods, they should be exposed from the vue component.
The problem is that defineExpose works before component's mount, therefore, the dialogRef at the expose moment still has value undefined. It order to prevent the expose-related problems, I wrapped the exported functions into arrow functions, so that dialogRef will be computed at the runtime, after mounting.
const dialogRef = ref<HTMLDialogElement | undefined>()
defineExpose({
showModal: () => dialogRef.value?.showModal(),
close: () => dialogRef.value?.close(),
})Table cells via h function
AppInsertH component is used to insert a cell into a table, while the cell itself is passed a a render-function