This is component being used on /details/@user?tab=lists page where are allowing user to create new lists and add any item there.
<iaux-userlist-settings
.userList=${{
id: 'hello', // id should provided while edit list
list_name: 'my first list',
description: 'my first list description',
is_private: true,
}}
.baseAPIUrl=${'https://archive.org/services/users'}
@listModalClosed=${() => {
this.modalManager.closeModal();
}}
@userListSaved=${(e: CustomEvent) => {
console.log(e.detail);
this.modalManager.closeModal();
}}
@userListError=${(e: CustomEvent) => {
console.log(e);
}}
></iaux-userlist-settings>
userList: { type: Object }, // { id: 'list-id', list_name: 'your list name', description: 'list description', is_private: bool }
baseAPIUrl: { type: String }, // api URL for user lists
@listModalClosed // dispatch when modal is closed
@userListSaving // dispatch when list is saving
@userListSaved // dispatch list is saved successfully
@userListError // dispatch when an error occured while saving list
yarn start
To run a local development server that serves the basic demo located in demo/index.html
To run the suite of Web Test Runner tests, run
yarn run test
To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
yarn run test:watch
To scan the project for linting errors, run
yarn run lint
You can lint with ESLint and Prettier individually as well
yarn run lint:eslint
yarn run lint:prettier
To automatically fix many linting errors, run
yarn run format
You can format using ESLint and Prettier individually as well
yarn run format:eslint
yarn run format:prettier
For most of the tools, the configuration is in the package.json
to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.