Integration of server and client data

ViewState

ViewStateはScript無しでサーバーやクライアントから状態を取得し変更することができるコンポーネントです。

id	email	first_name	last_name
1	george.bluth@reqres.in	George	Bluth
2	janet.weaver@reqres.in	Janet	Weaver
3	emma.wong@reqres.in	Emma	Wong
4	eve.holt@reqres.in	Eve	Holt
5	charles.morris@reqres.in	Charles	Morris
6	tracey.ramos@reqres.in	Tracey	Ramos

vue

<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>

ActionState

ActionStateはHttpPostやPluginHelperなどの関数をScript無しで実行し、結果を取得するコンポーネントです。

vue

<template>
 <ActionState src="reqres://login?delay=1">
  <template #default="{ action }">
   <b-button
    color="primary"
    @click="action('post', { email: 'eve.holt@reqres.in', password: 'cityslicka' })"
   >
    Action
   </b-button>
  </template>
  <template #fallback>
   <b-button
    color="primary"
    disabled
   >
    <Spinner
     spinner="grow"
     sm
     aria-hidden="true"
    />
    Loading...
   </b-button>
  </template>
  <template #complete="{ data, status }">
   <div v-if="status.value == 200">
    Response: {{ data }}
   </div>
   <div v-else>
    ErrorMessages: {{ data }}
   </div>
   <b-button
    color="success-subtle"
    @click="status.value = 0"
   >
    Retry
   </b-button>
  </template>
 </ActionState>
</template>

Bootstrap

Integration of server and client data

ViewState

ActionState