List

Create a list application from the provided design file list.xd (can be opened in Adobe XD) or available here.

Project setup

# 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>
All scss colors should be defined in sass/_color.scss file.
- This can be then used via @use "sass/color" in component style blocks.
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>

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.

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.