List and Details

<template>
 <ViewState
  v-slot="uid"
  src="query://uid"
 >
  <ViewState
   v-if="uid.data"
   v-slot="user"
   :src="`reqres-sync://users/${uid.data}`"
   path="data"
   schema-src="app-config://usebootstrap/schemas/basic"
  >
   <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">
     <BInputGroup margin="b-3">
      <BFormInput
       type="text"
       :state-src="user"
       state-path="first_name"
      />
      <BInputGroupText style="width:3em;">
       <Spinner
        v-show="user.syncStatus == 100"
        spinner="grow"
        sm
       />
      </BInputGroupText>
     </BInputGroup>
    </Col>
   </Row>
   <JsonView
    v-if="user.validationResult && !user.validationResult.valid"
    :data="user.validationResult"
   />
   <JsonView
    v-else
    :data="user.syncResult"
   />
  </ViewState>
  <ViewState
   v-if="!uid.data"
   v-slot="users"
   src="reqres://users"
   path="data"
  >
   <b-table striped>
    <thead>
     <tr>
      <th scope="col">
       id
      </th>
      <th scope="col">
       email
      </th>
      <th scope="col">
       first_name
      </th>
      <th scope="col">
       last_name
      </th>
      <th scope="col">
       avatar
      </th>
     </tr>
    </thead>
    <tbody>
     <tr
      v-for="item in users.data"
      :key="item"
      @click="uid.update(item.id);"
     >
      <td>{{ item.id }}</td>
      <td>{{ item.email }}</td>
      <td>{{ item.first_name }}</td>
      <td>{{ item.last_name }}</td>
      <td>
       <Avatar
        circle
        :img-src="item.avatar"
        :img-alt="item.first_name"
       />
      </td>
     </tr>
    </tbody>
   </b-table>
  </ViewState>
 </ViewState>
</template>