@ak2021/web-components

A lightweight Web Components package that provides reusable UI elements:

• wc-button
• wc-picker
• wc-popover

Install

pnpm add @ak2021/web-components
Copy

Quick Start

Import once to register all custom elements:

import "@ak2021/web-components";
Copy

If you need styles from the package output:

<link rel="stylesheet" href="./dist/style/css.css" />
Copy

Components

wc-button

A simple button wrapper based on Shadow DOM.

<wc-button>Button</wc-button>
Copy

wc-picker

A picker/pop layer component powered by @skax/picker.

<wc-picker trigger="click" placement="bottom" content='<div style="padding: 12px; background: #fff;">Picker Content</div>'>
  <button>Open Picker</button>
</wc-picker>
Copy

Supported attributes:

• content: HTML string displayed in the picker
• trigger: click | hover (default: click)
• placement: top | tl | tr | bottom | bl | br (default: bottom)
• open: controlled open state (true/presence means open)
• disabled: disable interactions
• mobile: enable mobile mode

wc-popover

A popover menu component with list data.

<wc-popover
  list='[
    {"value": 1, "label": "1x"},
    {"value": 2, "label": "2x"}
  ]'
  open="true">
  <wc-button>Click Me</wc-button>
</wc-popover>
Copy

Supported attributes:

• list: JSON string array, e.g. [{"label":"A","value":"a"}]
• open: controlled visible state (true/presence means visible)

Development

pnpm --filter @ak2021/web-components dev
Copy

Build

pnpm --filter @ak2021/web-components build
Copy