Components

<template>
 <ViewState
  v-slot="example"
  src="state://editor"
  :data="[
   {
    type: 'paragraph',
    content: [
     {
      type: 'text',
      text: 'I\'m running Tiptap with use-bootstrap. 🎉',
     },
    ],
   },
   {
    type: 'paragraph',
   },
  ]"
 >
  <TiptapEditor
   :state-src="example"
  />
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://sortable/"
  :data="[
   { id: 1, name: 'An item' },
   { id: 2, name: 'A second item' },
   { id: 3, name: 'A third item' },
   { id: 4, name: 'A fourth item' },
   { id: 5, name: 'And a fifth one' },
  ]"
 >
  <ListGroupList>
   <Sortable
    :state-src="example"
   >
    <ListGroupItem
     v-for="item in example.data"
     :id="`${item.id}`"
     :key="item.id"
     toggle="list"
    >
     {{ item.name }}
    </ListGroupItem>
   </Sortable>
  </ListGroupList>
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://date-picker"
  :data="{
   date: new Date(),
  }"
 >
  <DatePicker
   :state-src="example"
   state-path="date"
   mode="date"
  />
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://check-radio/state"
  :data="{ key1: true, key2: '' }"
 >
  <BFormCheck>
   <BFormCheckInput
    :state-src="example"
    state-path="key1"
   />
   <BFormCheckLabel>Default checkbox</BFormCheckLabel>
  </BFormCheck>
  <BFormCheck>
   <BFormCheckInput
    :state-src="example"
    state-path="key2"
   />
   <BFormCheckLabel>Key2 checkbox</BFormCheckLabel>
  </BFormCheck>
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://check-radio/state-array"
  :data="{ key1: ['John'] }"
 >
  <BFormCheck>
   <BFormCheckInput
    value="Jack"
    :state-src="example"
    state-path="key1"
   />
   <BFormCheckLabel>Jack</BFormCheckLabel>
  </BFormCheck>
  <BFormCheck>
   <BFormCheckInput
    value="John"
    :state-src="example"
    state-path="key1"
   />
   <BFormCheckLabel>John</BFormCheckLabel>
  </BFormCheck>
  <BFormCheck>
   <BFormCheckInput
    value="Mike"
    :state-src="example"
    state-path="key1"
   />
   <BFormCheckLabel>Mike</BFormCheckLabel>
  </BFormCheck>
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://check-radio/state-radio"
  :data="{ key1: 'two' }"
 >
  <BFormCheck>
   <BFormCheckInput
    :state-src="example"
    state-path="key1"
    value="one"
    type="radio"
   />
   <BFormCheckLabel>Default radio</BFormCheckLabel>
  </BFormCheck>
  <BFormCheck>
   <BFormCheckInput
    :state-src="example"
    state-path="key1"
    value="two"
    type="radio"
   />
   <BFormCheckLabel>Default checked radio</BFormCheckLabel>
  </BFormCheck>
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://form-color/state"
  :data="{ key1: '#05bc90', key2: false }"
 >
  <BFormLabel for="exampleColorInput">
   Color picker
  </BFormLabel>
  <BFormColor
   id="exampleColorInput"
   :state-src="example"
   state-path="key1"
   title="Choose your color"
  />
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="user"
  src="reqres://users/5"
  path="data"
 >
  <Row margin="b-3">
   <BColFormLabel
    for="staticEmail"
    class="col-sm-2"
   >
    Email
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     :state-src="user"
     state-path="email"
    />
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword"
    class="col-sm-2"
   >
    first_name
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     :state-src="user"
     state-path="first_name"
    />
   </Col>
  </Row>
  <JsonView :data="user.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://range/state"
  :data="{ key1: 30, key2: false }"
 >
  <BFormLabel for="customRange1">
   Example range
  </BFormLabel>
  <BFormRange
   id="customRange1"
   :state-src="example"
   state-path="key1"
  />
  <b-dl margin="t-5">
   <b-dt col="sm-3">
    RangeValue
   </b-dt>
   <b-dd col="sm-9">
    {{ example.data.key1 }}
   </b-dd>
  </b-dl>
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://select/state"
  :data="{ key1: 2, key2: false }"
 >
  <BFormSelect
   :state-src="example"
   state-path="key1"
   aria-label="Default select example"
  >
   <option>
    Open this select menu
   </option>
   <option :value="1">
    One
   </option>
   <option :value="2">
    Two
   </option>
   <option :value="3">
    Three
   </option>
  </BFormSelect>
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://select/state-multiple"
  :data="{ key1: ['2', '3'], key2: false }"
 >
  <BFormSelect
   :state-src="example"
   state-path="key1"
   multiple
   aria-label="Default select example"
  >
   <option>
    Open this select menu
   </option>
   <option :value="1">
    One
   </option>
   <option :value="2">
    Two
   </option>
   <option :value="3">
    Three
   </option>
  </BFormSelect>
  <JsonView :data="example.data" />
 </ViewState>
</template>

<template>
 <ViewState
  v-slot="example"
  src="state://textarea/state"
  :data="{ key1: '', key2: '' }"
 >
  <b-div margin="b-3">
   <BFormLabel for="exampleBFormControlInput1">
    Email address
   </BFormLabel>
   <BFormInput
    id="exampleBFormControlInput1"
    type="email"
    :state-src="example"
    state-path="key1"
    placeholder="name@example.com"
   />
  </b-div>
  <b-div margin="b-3">
   <BFormLabel for="exampleBFormControlTextarea1">
    Example textarea
   </BFormLabel>
   <BFormTextarea
    id="exampleBFormControlTextarea1"
    rows="3"
    :state-src="example"
    state-path="key2"
   />
  </b-div>
  <JsonView :data="example.data" />
 </ViewState>
</template>