# Komponent

Handy state abstraction for presentation components.


  • counter
  • selected value
<Komponent :data="{ count: 0 }" v-slot="{ data }">
    <KButton size="small" appearance="outline" :isRounded="false" @click="data.count = data.count - 1">-</KButton>
    {{ data.count }}
    <KButton size="small" appearance="outline" :isRounded="false" @click="data.count = data.count + 1">+</KButton>

# Props

# data

The state that the component should begin with.

  • Default: null

# Slots

  • default - content to provide state to.

# Slot Props

Props Type Description
data Object reactive component state

# Usage

Komponent is meant to be used to add behavior to other components, by wrapping them and placing them inside Komponent's default slot.

# Select

<KCard class="mt-2" style="min-height: 100px;">
  <template v-slot:body>
    <Komponent :data="{ selected: '' }" v-slot="{ data }">
        <label for="apes">What's your favorite great ape?</label>
        <select id="apes" v-model="data.selected" onchange="s => data.selected = s">
          <option disabled value="">Please select one</option>
        <i v-if="data.selected">{{ data.selected }} are neat!</i>