presets-bar

Presets bar Web Component.

npm i presets-bar

pnpm add presets-bar

yarn add presets-bar

Examples

# web

# view source

example/web.tsx

/** @jsxImportSource sigl */
import $ from 'sigl'

import { cheapRandomId } from 'everyday-utils'
import { PresetElement, PresetsBarElement, randomName } from 'presets-bar'

type PresetDetail = {
  whatever: string
}

interface PresetsContainerElement extends $.Element<PresetsContainerElement> {}
@$.element()
class PresetsContainerElement extends HTMLElement {
  PresetsBar = $.element(PresetsBarElement<PresetDetail>)
  presets = new $.RefSet<PresetElement<PresetDetail>>([
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
    { name: randomName(), id: cheapRandomId() },
  ])

  mounted($: PresetsContainerElement['$']) {
    $.render(({ PresetsBar, presets }) => <PresetsBar presets={presets} />)
  }
}

const PresetsContainer = $.element(PresetsContainerElement)

$.render(
  <PresetsContainer style="width=300px;height:400px;resize:both;overflow:hidden;display:inline-flex" />,
  document.body
)

// console.log(JSON.stringify(document.body.querySelector('' + PresetsBar)))

API

Credits

• everyday-utils by stagas – Everyday utilities
• rfdc by David Mark Clements – Really Fast Deep Clone
• sigl by stagas – Web framework
• sigl-ui by stagas – UI elements and components for sigl
• x-sortable by stagas – Sortable Web Component

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas