<grte-tab-cat-menu>

This webcomponent follows the open-wc recommendation.

This component, as a table, contains n-rows, each row:

 <grte-cat-menu>

You receive as an entry a table of objects, where each object is a category.

e.g.:

const stringArrayCategorias = '[ {"category": "Postres", "order": 20, "totProds": 10} , {"category": "Bebidas",  "order": 15, "totProds": 25}, {"category": "Primeros", "order": 10, "totProds": 12}, {"category": "Entrates", "order": 1, "totProds": 5}]';

Installation

npm i @jcdomber/grte-tab-cat-menu

Usage

<script type="module">
  import 'grte-tab-cat-menu/grte-tab-cat-menu.js';
</script>

<grte-tab-cat-menu
  .relCategories=${JSON.parse(stringArrayCategorias)}
  @get-category-delete=${getEventDelete}
  @get-category-edit=${getEventEdit}>
</grte-tab-cat-menu>

Properties

relCategories: Array

Events

@click on the edit button. Expose the event: get-category-edit

detail:

• selected category
• selected order

@click on the cancel button. Expose the event: get-category-delete

detail:

• selected category
• selected order

Tooling configs

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.

Local Demo with es-dev-server

npm run start

To run a local development server that serves the basic demo located in demo/index.html