bootstrap-details-vue v0.1.4

bootstrap-details-vue

A simple bootstrap details view in vue.js using conventional table

Installation

Installation with npm

npm install --save bootstrap-details-vue

Installation with yarn

yarn add bootstrap

Use globally in Vue project

import Vue from 'vue'
import App from './App.vue'

import BootstrapDetailsVue from 'bootstrap-details-vue'

import 'bootstrap/dist/css/bootstrap.min.css'

Vue.use(BootstrapDetailsVue)

Basic Usage

<template>
  <div>

    <details-vue :model="user"></details-vue>

  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      user: {
        "id": 1,
        "username": "giba",
        "email": "giba@email.com",
        "firstname": "Giba",
        "lastname": "Maranhão",
        "status": "active",
        "role": "admin",
        "created_at": 1611642440,
        "updated_at": 1611642440
      },
    }
  }, 
}
</script>

Usage on Demand

You can use bootstrap-details-vue on demand importing directly the component:

<template>
  <div>
    <details-vue :model="user"></details-vue>
  </div>
</template>

<script>
import { DetailsVue } from 'bootstrap-details-vue'

export default {
  components: {
    DetailsVue
  },
  data() {
    return {
      user: {
        "id": 1,
        "username": "giba",
        // ...
      },
    }
  }, 
}
</script>

Easy to use properties

boostrap-details-vue has a set of properties to easily configure the grid

<template>
  <div>
    <details-vue :model="user" 
      borderless bordered striped 
      label-align-left start-case ></details-vue>
  </div>
</template>

Configure Fields

Using the property 'fields' you can configure which fields will be shown and change the label to these fields:

<template>
  <div>
    <details-vue :model="user" :fields="fields" ></details-vue>
  </div>
</template>

<script>
import { DetailsVue } from 'bootstrap-details-vue'

export default {
  components: {
    DetailsVue
  },
  data() {
    return {
      user: {
        "id": 1,
        "username": "giba",
        "email": "giba@email.com",
        "firstname": "Giba",
        "lastname": "Maranhão",
        "status": "active",
        "role": "admin",
        "created_at": 1611642440,
        "updated_at": 1611642440
      },
      fields: [
        'id',
        'email',
        {key: "username", label: "Login"},
        {key: "firstname", label: "First Name"},
        'status',
      ]
    }
  }, 
}
</script>

Slots

Using vue slots you can show the data exactly as you need it:

<template>
  <div>
    <details-vue :model="user" :fields="fields" >

      <template #label(email)="{data}">
        <td class="text-danger text-right font-weight-bold"> {{ data.label }}  </td>
      </template>

      <template #value(email)="{data}">
        <td> <a :href="`mailto:${data.value}`"> {{ data.value }} </a> </td>
      </template>

      <template #value(created_at)="{data}">
        <td> {{ new Date(data.value) }} </td>
      </template>
    </details-vue>
  </div>
</template>

You can add fields that are not in the model, just add it in fields and create the slot related to it

<template>
  <div>
    <details-vue :model="user" :fields="fields" >

      <template #value(complete_name)="{data}">
        <td> {{ data.model.firstname}} {{ data.model.lastname }} </td>
      </template>

    </details-vue>
  </div>
</template>

<script>
import { DetailsVue } from 'bootstrap-details-vue'

export default {
  components: {
    DetailsVue
  },
  data() {
    return {
      user: {
        "id": 1,
        "username": "giba",
        "email": "giba@email.com",
        "firstname": "Giba",
        "lastname": "Maranhão",
        "status": "active",
        "role": "admin",
        "created_at": 1611642440,
        "updated_at": 1611642440
      },
      fields: [
        'complete_name'
      ]
    }
  }, 
}
</script>

Styling

You can alternate color of the DetailsVue using the variant property according to your variant configurations. Inside the cells you can use vue slots to add the bootstrap classes to the <td> tags. Ex.: table-primary, bg-dark, text-light, etc.

Properties

DetailsVueLabel Component

The component DetailVueLabel renders the default style of DetailsVue field labels. You can use it inside a named slot of the label.

<template>
  <div id="app">
   <details-vue :model="user">
     <template #label(username)>
       <details-vue-label> User Name </details-vue-label>
     </template>
   </details-vue>
  </div>
</template>

<script>

import { DetailsVue, DetailsVueLabel } from 'bootstrap-details-vue'

export default {
  name: 'App',
  components: {
    DetailsVue,
    DetailsVueLabel,
  },
  data() {
    return {
      user: {
        id: 1,
        username: 'giba',
        //...
      }
    }
  }
}
</script>

properties