Progress Breakdown

Installation

Variants

Props

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface HTMLElementTagNameMap {
    'uip-progress-breakdown': UipProgressBreakdown
  }
}

Files installed (1)

• src/uip/blocks/progress-breakdown/progress-breakdown.ts2.3 kB

  Copy

  import { LitElement, css, html } from 'lit'
  import { tailwind } from '../../lib/styles'
  import { ThemeController } from '../../lib/theme'
  // Side-effect imports: register the composed elements for standalone use
  // (consumers who install only this block still get working primitives).
  import '../../components/section-card/section-card'
  import '../../components/progress-item/progress-item'
  
  /**
   * <uip-progress-breakdown> — the registry ProgressBreakdown block as a web component.
   *
   * A <uip-section-card> whose rows are slotted <uip-progress-item> children
   * (React's `children`). `title` is `heading` (`title` is taken by
   * HTMLElement); `description` maps as-is. React's `headerIcon` component prop
   * has no HTML equivalent — slot your own icon with `slot="header-action"`
   * (the demo does this with the trending-up mark). Rows go in the default
   * slot; wrap them in a flex column with a gap (React's
   * contentClassName="space-y-4" — space-y can't target slotted children).
   * No events.
   */
  export class UipProgressBreakdown extends LitElement {
    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
    // :host display can't be a utility class (the host has no template of its own).
    static styles = [tailwind, css`:host { display: block; }`]
  
    static properties = {
      heading: {},
      description: {},
    }
  
    heading = 'Breakdown'
    description?: string
  
    constructor() {
      super()
      new ThemeController(this)
    }
  
    connectedCallback() {
      super.connectedCallback()
      this.setAttribute('data-uipkge', '')
      this.setAttribute('data-slot', 'progress-breakdown')
    }
  
    render() {
      // data-slot lives on this wrapper: <uip-section-card> stamps its own
      // data-slot="section-card" on connect, which would clobber the block slot.
      return html`
        <div data-slot="progress-breakdown">
          <uip-section-card heading=${this.heading} description=${this.description ?? ''}>
            <slot name="header-action" slot="header-action"></slot>
            <slot></slot>
          </uip-section-card>
        </div>
      `
    }
  }
  
  customElements.get('uip-progress-breakdown') || customElements.define('uip-progress-breakdown', UipProgressBreakdown)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-progress-breakdown': UipProgressBreakdown
    }
  }
  

Raw manifest:https://uipkge.dev/r/lit/progress-breakdown.json