Create a list application from the provided design file list.xd (can be opened in Adobe XD) or available here.
- Fork this repository.
- Install dependencies.
- Start dev server.
# install
npm ci
# serve with hot-reload for development
npm run serve
Tips for VSCode extensions.
The following libraries are available, you can import any utility you'll need.
- This project should use typescript and vue (vue components should also use typescript).
- Vue components should use composition api with
setup() { ... }
- Bonus points when
<script lang="ts" setup>
is used. - The
<style>
blocks should use scss modules<style lang="scss" module>
- Bonus points when
- All scss colors should be defined in
sass/_color.scss
file.- This can be then used via
@use "sass/color"
in component style blocks.
- This can be then used via
- Search bar, list item and icons (svg files in assets) should be individual vue
components.
- Tip: Create icon components simply by copying the svg code to component
<template>
- Tip: Create icon components simply by copying the svg code to component
- Should be a vue component.
- The search bar should use
v-model
for its value, for example<SearchBar v-model="searchQuery" />
- Non-empty value can be cleared through the clear button, or by pressing Escape key.
- If the search bar is empty, the clear and add buttons should be hidden.
- Typing in search bar should filter the displayed list by its value (case insensitive), including partial matches.
- If searched string (case insensitive) is already present in the list, the add button should be disabled and appropriate item should be marked as "Exact match".
- If no exact match is found, the add button should be enabled and click on it (or by pressing Enter key) should add the string value to the list.
- List data should be stored in localStorage in such way, that data in list will be preserved on page refresh.
- Each item in list should keep track of when that item was added to the list.
- Each item should also track in what order it was added in the following way:
- Starting from #1
- New item # should be equal to maximum number in list + 1
- Deleting an item from list will not recalculate # of the remaining items
- Tip: There should be a data source ref that is sorted/filtered using computed.
- Should be a vue component.
- Should display delete button on mouse over.
- Should display the added date in human readable format (use date-fns)
- Bonus points if the displayed time is updated in realtime.
- List should be sortable by either string value (from a to z) or by added date (newest date first).
- Simple click on the Sort by Value or Sort by Added Date buttons should sort the list immediately.
- Bonus points if the selected sort method is preserved on page refresh.