@umemo/ui-sdk

Frontend SDK that bundles @umemo/ui web components for use in Shadow DOM contexts.

Features

• Imports all UI components with Shadow DOM support
• render() method to render generated HTML into Shadow DOM
• Components receive data via attributes (e.g. data='{"city":"Beijing"}')
• Bundles Font Awesome 6 for icon support

Install

npm install @umemo/ui-sdk

Usage

import { createUmemoSdk } from '@umemo/ui-sdk';

const sdk = createUmemoSdk({ container: document.getElementById('my-container') });

const shadowRoot = sdk.render(`
  <weather-forecast data='{"city":"Beijing","current":{"temp":17,"condition":"晴","humidity":45,"windSpeed":12}}'></weather-forecast>
`);

const form = shadowRoot.querySelector('ui-form');
form?.addEventListener('submit', (e) => {
  console.log(e.detail.data);
  e.preventDefault();
});

API

createUmemoSdk(options)

Creates an SDK instance.

const sdk = createUmemoSdk({ container: HTMLElement });

sdk.render(html)

Renders generated HTML into the container via Shadow DOM. Returns the ShadowRoot.

const shadowRoot = sdk.render(html: string): ShadowRoot

Components

| Component | Purpose | |-----------|---------| | <weather-forecast> | Weather display with current conditions and forecast | | <ledger-card> | Single financial transaction entry | | <content-list> | Article/news/hot post list | | <text-input> | Single-line text input | | <textarea-input> | Multi-line text input | | <checkbox-element> | Single checkbox | | <radio-element> | Single radio button | | <switch-element> | On/off toggle | | <checkbox-group> | Multiple-choice selection | | <radio-group> | Single-choice selection | | <ui-button> | Action button | | <ui-form> | Form container | | <ui-text> | Styled text display | | <ui-tag> | Labels and status chips |

Data Attributes

Functional components (weather-forecast, ledger-card, content-list) accept a JSON data attribute:

<weather-forecast data='{"city":"Beijing","current":{"temp":17,"condition":"晴","humidity":45,"windSpeed":12}}'></weather-forecast>