Event List

blockproductivity

List of upcoming events in a SectionCard. Spell rows out inline with DataListItem — title + Clock date + optional status Badge per row.

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/lit/event-list.json

$npx shadcn@latest add https://uipkge.dev/r/lit/event-list.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/lit/event-list.json

$bunx shadcn@latest add https://uipkge.dev/r/lit/event-list.json

Manifest:https://uipkge.dev/r/lit/event-list.jsonInstalls to:src/uip/blocks/event-list/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`heading`	`string`	`Upcoming Events`	optional
`description`	`string`	—	optional

Schema

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

HTMLElementTagNameMap

interface HTMLElementTagNameMap {
    'uip-event-list': UipEventList
  }
}

npm dependencies

lit

Includes

badge data-list lit-core section-card

Files installed (1)

src/uip/blocks/event-list/event-list.ts1.8 kB

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/badge/badge'
import '../../components/data-list/data-list'
import '../../components/section-card/section-card'

/**
 * <uip-event-list> — the registry EventList block as a web component.
 *
 * Class strings are React's EventList verbatim. `heading` is React's `title`
 * (`title` is taken by HTMLElement). Rows are light-DOM
 * `<uip-data-list-item>` children (React's `children`), spelled out inline
 * after install — DataListItem, Badge, and Clock markup copy the demo.
 */
export class UipEventList 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: {},
  }

  /** React's `title` (`title` is taken by HTMLElement). */
  heading = 'Upcoming Events'
  description?: string

  constructor() {
    super()
    new ThemeController(this)
  }

  connectedCallback() {
    super.connectedCallback()
    this.setAttribute('data-uipkge', '')
    this.setAttribute('data-slot', 'event-list')
  }

  render() {
    return html`
      <uip-section-card data-slot="event-list" heading=${this.heading} description=${this.description ?? ''}>
        <uip-data-list><slot></slot></uip-data-list>
      </uip-section-card>
    `
  }
}

customElements.get('uip-event-list') || customElements.define('uip-event-list', UipEventList)

declare global {
  interface HTMLElementTagNameMap {
    'uip-event-list': UipEventList
  }
}

Raw manifest:https://uipkge.dev/r/lit/event-list.json

Change language