open-index/open-npm huggingface dataset:
npm package: @qomponent/qui-bubble
Description: A Chat bubble component
Author: Phillip Kruger
Latest version: 1.0.0

# qui-bubble

`qui-bubble` is a **lightweight, customizable Web Component** for rendering **chat bubbles** in a conversation-style UI. It supports **text messages, rich content, avatars, typing indicators, and CSS customizations**.

---

## 🌟 Features

✅ **Web Component** – Works in any frontend framework or vanilla HTML  
✅ **Customizable with CSS Variables** – Easily style bubbles, colors, and spacing  
✅ **Supports Named Messages** – Display sender names with icons  
✅ **Slot Support** – Embed rich content like images or formatted text  
✅ **Typing Indicator** – Animated dots for real-time conversations  

---

## 📦 Installation

Install via npm:

```bash
npm i @qomponent/qui-bubble
```

---

## 🚀 Usage

### **1. Import the Component**
#### **ES Module**
```javascript
import '@qomponent/qui-bubble';
```

#### **HTML (No Build Setup Required)**
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@qomponent/qui-bubble"></script>
```

### **2. Add Chat Bubbles**
```html
<div class="chat-container">

    <qui-bubble message="Hello! How are you?" side="left" name="Alice"
        icon="https://randomuser.me/api/portraits/women/1.jpg">
    </qui-bubble>

    <qui-bubble message="I'm good! How about you?" side="right"></qui-bubble>

    <qui-bubble side="right">
        <span style="color: blue; font-weight: bold;">Custom <i>styled</i> message!</span>
    </qui-bubble>

    <qui-bubble side="left" name="Kristen">
        <img src="https://randomuser.me/api/portraits/women/2.jpg"><span>My new profile pic</span>
    </qui-bubble>

    <qui-bubble side="left" name="Bob" typing></qui-bubble>
</div>
```

---

## 🎨 Customization

You can customize the chat bubbles using **CSS variables**:

```css
chat-bubble {
  --chat-bubble-bg: #007aff;
  --chat-bubble-color: white;
  --chat-bubble-border-radius: 20px;
  --chat-bubble-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  --chat-bubble-typing-dot: #ff5722;
}
```

#### **Available CSS Variables**
| Variable                     | Default Value | Description |
|------------------------------|--------------|-------------|
| `--chat-bubble-bg`           | `lightgray`  | Background color of the bubble |
| `--chat-bubble-color`        | `black`      | Text color inside the bubble |
| `--chat-bubble-border-radius` | `12px`       | Corner radius of the bubble |
| `--chat-bubble-padding`      | `8px 12px`   | Inner padding of the bubble |
| `--chat-bubble-shadow`       | `0px 4px 8px rgba(0, 0, 0, 0.1)` | Shadow effect |
| `--chat-bubble-typing-dot`   | `#666`       | Color of typing indicator dots |

---

## 🔥 Example (Run Locally)

To run the example locally:

```bash
npm install
npm start
```

This will start a **local development server** with a demo page.

---

## 🤝 Contributing

Pull requests are welcome! 🚀  
For major changes, please open an **issue** first to discuss your ideas.

---

## 📜 License

This project is licensed under the **Apache 2.0 License**.  
[Read the full license](http://www.apache.org/licenses/LICENSE-2.0).
npm package: @qomponent/qui-card
Description: A Card UI component
Author: Phillip Kruger
Latest version: 1.0.4

# qui-card

Card UI component


## Installation

```bash
npm i @qomponent/qui-card
```

## Usage

```javascript
import '@qomponent/qui-card';
```

```html
<div class="cards">
    <qui-card header="Small">
        <div slot="content">
            <div class="cardcontents">
                <span>Hello</span>
            </div>
        </div>
    </qui-card> 
```

### Header

Basic string header can be provided with the `header` attribute, example:

```html
<qui-card header = "Here the header">
    
</qui-card>
```

More complex header can be provided with the `header` slot, example:

```html
<qui-card>
    <div slot="header">
        <span>Here the header</span>
    </div>
</qui-card>
```

### Footer

Basic string footer can be provided with the `footer` attribute, example:

```html
<qui-card footer = "Here the header">
    
</qui-card>
```

More complex footer can be provided with the `footer` slot, example:

```html
<qui-card>
    <div slot="footer">
        <span>Here the footer</span>
    </div>
</qui-card>
```


## Example

To run the example:

```bash
npm install
npm start
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)
npm package: @qomponent/qui-code-block
Description: A Code block UI component
Author: Phillip Kruger
Latest version: 1.1.2

# qui-code-block

The code block UI component is based on codemirror 6, wrapped in a Lit webcomponent.

## Installation

```bash
npm i @qomponent/qui-code-block
```

## Usage

```javascript
import '@qomponent/qui-code-block';
```

```html
<qui-code-block mode="properties" theme="dark">
      <slot>
foo = bar
      </slot>
    </qui-code-block>
```

### Modes:

 - properties
 - js
 - java
 - xml
 - json
 - yaml
 - sql
 - html
 - css
 - sass
 - markdown

### Linenumber

Add `showLineNumbers` attribute. Example:

```html
<qui-code-block mode="properties" theme="dark" showLineNumbers>
      <slot>
foo = bar
      </slot>
    </qui-code-block>
```

### Editable

Add `editable` attribute. Example:

```html
<qui-code-block id="code" mode="properties" theme="dark" value='${this._value}' editable>
      <slot>
foo = bar
      </slot>
    </qui-code-block>
```

You can get the value at any time by looking at the value attribute that you set (it's reflective) or you 
can add a listener `shiftEnter` that will contain the new value in `event.detail.content` when Shift-Enter is pressed.

```javascript
let newValue = this.shadowRoot.getElementById('code').getAttribute('value');
```

### Theme

Add attribute `theme`. Value can be `dark` or `light`;

## Example

To run the example:

```bash
npm install
npm start
```


Then go to [http://localhost:8080/example](http://localhost:8080/example)

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)
npm package: @qomponent/qui-directory-tree
Description: A Lit-based web component to show files in a directory structure
Author: Phillip Kruger
Latest version: 1.0.4

# qui-directory-tree
A Lit-based web component to show files in a directory structure.

## Installation

```bash
npm i @qomponent/qui-directory-tree
```

## Usage

```javascript


import { LitElement, html, css } from 'lit';
import '@qomponent/qui-directory-tree';

class MyMainComponent extends LitElement {
  static styles = css`
    .file-info {
      font-weight: bold;
      color: blue;
      margin-top: 10px;
    }
  `;

  static properties = {
    selectedFilePath: { type: String },
  };

  constructor() {
    super();
    this.selectedFilePath = '';
    this.directoryData = [
      {
        name: 'Folder1',
        type: 'folder',
        children: [
          { name: 'File1.txt', type: 'file' },
          {
            name: 'SubFolder1',
            type: 'folder',
            children: [{ name: 'File2.txt', type: 'file' }],
          },
        ],
      },
      { name: 'File3.txt', type: 'file' },
    ];
  }

  handleFileSelect(event) {
    const { file } = event.detail;
    this.selectedFilePath = file.path;
  }

  render() {
    return html`
      <h2>Directory Tree</h2>
      <qui-directory-tree
        .directory="${this.directoryData}"
        header="Files and Folders"
        @file-select="${this.handleFileSelect}"
      ></qui-directory-tree>

      ${this.selectedFilePath
        ? html`<div class="file-info">Selected File Path: ${this.selectedFilePath}</div>`
        : html`<div class="file-info">No file selected</div>`}
    `;
  }
}

customElements.define('my-main-component', MyMainComponent);


```

## Example

To run the example:

```bash
npm install
npm start
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)
npm package: @qomponent/qui-dot
Description: A Lit-based web component to show dot files
Author: Phillip Kruger
Latest version: 0.0.2

# qui-dot
A Lit-based web component to show dot files

## Installation

```bash
npm i @qomponent/qui-dot
```

## Usage

```javascript


import { LitElement, html, css } from 'lit';
import '@qomponent/qui-dot';

class MyMainComponent extends LitElement {

  constructor() {
    super();
  }

  render() {
    return html`<qui-dot dot="digraph { Hello -> World }"></qui-dot>
    `;
  }
}

customElements.define('my-main-component', MyMainComponent);


```

## Example

To run the example:

```bash
npm install
npm start
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)
npm package: @qomponent/qui-icons
Description: An Icon component on top of Font Awesome
Author: Phillip Kruger
Latest version: 1.0.2

# qui-icons
All icons from fontawesome as webcomponents.

## Installation

```bash
npm i @qomponent/qui-icons
```

## Usage

```javascript
import '@qomponent/qui-icons';
```

### Size

 - tiny
 - small
 - normal
 - large
 - ??px                

Size can be provided with the `size` attribute.

### Color

Color can be provided with the `color` attribute or with CSS.

### Fontawesome

See [fontawesome.com](https://fontawesome.com/)

 - Use `fas-icon` for solid free
 - Use `far-icon` for regular free
 - Use `fab-icon` for brands free

```html
<fas-icon icon="user" size="tiny"></fas-icon>
<fas-icon icon="user" size="small"></fas-icon>
<fas-icon icon="user"></fas-icon>
<fas-icon icon="user" size="large"></fas-icon>
<fas-icon icon="user" size="50px" color="red"></fas-icon>
            
<far-icon icon="clock" size="tiny"></far-icon>
<far-icon icon="clock" size="small"></far-icon>
<far-icon icon="clock"></far-icon>
<far-icon icon="clock" size="large"></far-icon>
<far-icon icon="clock" size="50px" color="red"></far-icon>
            
<fab-icon icon="redhat" size="tiny"></fab-icon>
<fab-icon icon="redhat" size="small"></fab-icon>
<fab-icon icon="redhat"></fab-icon>
<fab-icon icon="redhat" size="large"></fab-icon>
<fab-icon icon="redhat" size="50px" color="#ee0000"></fab-icon>
```

## Example

To run the example:

```bash
npm install
npm start
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)
npm package: @qomponent/qui-switch
Description: A Switch UI component
Author: Phillip Kruger
Latest version: 1.0.5

# qui-switch

The switch UI component

## Installation

```bash
npm i @qomponent/qui-switch
```

## Usage

```javascript
import '@qomponent/qui-switch';
```

### Size

 - tiny
 - small
 - normal
 - large
 - ??px

Size can be provided with the `size` attribute.

```html
<body>
    <h1>Switch</h1>
    <qui-switch id="switch"></qui-switch>
    <br/>
    <qui-switch id="switch2" label="With label" ></qui-switch>
    <br/>
    <qui-switch id="switch3" size="tiny" label="tiny" ></qui-switch>
    <br/>
    <qui-switch id="switch4" size="small" label="small" ></qui-switch>
    <br/>
    <qui-switch id="switch5" size="normal" label="normal" ></qui-switch>
    <br/>
    <qui-switch id="switch6" size="large" label="large" ></qui-switch>
    <br/>
    <qui-switch id="switch7" size="100px200px" label="custom" ></qui-switch>
  </body>

  <script>
    document.getElementById("switch").addEventListener("valueChanged", displayValue);

    function displayValue(e){
      console.log("-----> checked: " + e.detail.checked);
    }

  </script>
```

## Example

To run the example:

```bash
npm install
npm start
```

Then go to [http://localhost:8080/example](http://localhost:8080/example)

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)
npm package: @qomponent/qui-tabs
Description: A Lit-based web component to display things in dynamic tabs
Author: Phillip Kruger
Latest version: 1.0.0

# qui-tabs
A Lit-based web component to display things in dynamic tabs.

## Installation

```bash
npm i @qomponent/qui-tabs
```

## Usage

Import the component in your project:

```javascript
import '@qomponent/qui-tabs';
```

Then, use it in your HTML:

```html
<qui-tabs>
  <div slot="tab-content" key="home" name="Home">Welcome to Home</div>
  <div slot="tab-content" key="profile" name="Profile">User Profile Information</div>
  <div slot="tab-content" key="settings" name="Settings">Settings Panel</div>
</qui-tabs>
```

## API

### Attributes
- `key` (required) - A unique identifier for the tab.
- `name` (required) - The display name of the tab.

### Events
- `tab-selected` - Fired when a tab is selected. Event detail includes:
  ```json
  {
    "key": "profile"
  }
  ```

### Methods
- `selectTab(key)` - Programmatically selects a tab by its key.

#### Example:
```javascript
document.querySelector('qui-tabs').selectTab('profile');
```

## Example

To run the example:

```bash
npm install
npm start
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

## License

[Apache 2](http://www.apache.org/licenses/LICENSE-2.0)