JSON Schema Validation

A sample application for data validation using JSON Schema.

Looks good!
Please enter your email
Looks good!
Please enter your firstname
Looks good!
Please enter your firstname
vue
<template>
 <ViewState
  v-slot="user"
  src="reqres://users/5"
  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"
     validate
     :state-src="user"
     state-path="email"
    />
    <BValidFeedback>
     <template #valid>
      Looks good!
     </template>
     Please enter your email
    </BValidFeedback>
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword"
    class="col-sm-2"
   >
    first_name
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     validate
     :state-src="user"
     state-path="first_name"
    />
    <BValidFeedback>
     <template #valid>
      Looks good!
     </template>
     Please enter your firstname
    </BValidFeedback>
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword"
    class="col-sm-2"
   >
    last_name
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     validate
     :state-src="user"
     state-path="last_name"
    />
    <BValidFeedback>
     <template #valid>
      Looks good!
     </template>
     Please enter your firstname
    </BValidFeedback>
   </Col>
  </Row>
  <ActionState src="reqres://user/5">
   <template #default="{ action }">
    <b-button
     color="primary"
     :disabled="!user.validationResult.valid"
     @click="action('post', user.data)"
    >
     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 }">
    <b-button
     color="success-subtle"
     color-generate
     @click="status.value = 0"
    >
     Retry
    </b-button>
    <div v-if="status.value == 201">
     Response: {{ data }}
    </div>
    <div v-else>
     ErrorMessages: {{ data }}
    </div>
   </template>
  </ActionState>
 </ViewState>
</template>