0.0.8 • Published yesterday

@ppg_pl/tinting

Licence

MIT

Version

0.0.8

Deps

Size

7.4 MB

Vulns

Weekly

Summary Dependency Versions

Project Documentation

This documentation provides an overview of the project's architecture, technologies used, and integration instructions for both the backend and frontend components.

Backend

Framework: The application backend is built using Directus version 10.10.4.
Database: The staging environment is configured with a PostgreSQL database.
Collation Method: Refer to the Directus documentation for detailed information on collation.

Frontend

Webcomponent Library: The frontend application is written as a webcomponent using StencilJS.
Integration: To integrate the webcomponent into an HTML file, follow these steps:
1. Install the package using npm:
```
npm install @ppg_pl/tinting
```
  or using yarn:
```
yarn add @ppg_pl/tinting
```
2. Connect the generated www folder to your HTML file.
3. Ensure correct paths for assets and scripts within the HTML file. Below is an example of how to import the package into any project:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Selector</title>

    <!-- here is the path  -->
    <script type="module" src="/node_modules/@ppg_pl/tinting/www/build/tinting.esm.js"></script>
    <script nomodule src="/node_modules/@ppg_pl/tinting/www/build/tinting.js"></script>
  </head>
  <body>
    <my-component class="modal_tinting"></my-component>

    <label for="shop">Shop</label> <input name="shop" type="shop" /> <label for="product">Product</label><input name="product" type="product" />
    <button>open modal</button>

    <script>
      const btn = document.querySelector('button');
      const modal = document.querySelector('.modal_tinting');
      const shop = document.querySelector('input[name="shop"]');
      const product = document.querySelector('input[name="product"]');

      btn.addEventListener('click', () => {
        modal.setAttribute('shop', shop.value);
        modal.setAttribute('product', product.value);
        modal.open();
      });

      modal.addEventListener('onSelectedColor', e => {
        console.log('Color selected:', e.detail);
      });
    </script>
  </body>
</html>

Additional Integrations

For other integrations and specific functionalities, refer to the comprehensive documentation provided for each component or library.