@spectrace/components v0.0.1

Components

A collection of reusable components for usage within web apps

Usage

Add @spectrace/components to your package.json

npm install --save @spectrace/components

To use in a Nuxt project, include add the following to the nuxt.config.js file.

export default {
  components: true,
  buildModules: [
    '@spectrace/components/nuxt'
  ]
}

Components

Text Input

<sc-text-input placeholder="First Name" :value.sync="first_name" required="true" />

export default {
  data() {
    return {
      first_name
    }
  }
}

Buttons

<sc-simple-button icon="fas fa-plus" label="New" @click="newItem" />

export default {
  methods: {
    newItem() {
      // Do operation
    }
  }
}

Grid Control

<sc-grid-control
  :columns="columns"
  :data="data"
  @rowclick="rowClick"
  @rowselected="rowSelected"
  />

export default {
  data() {
    return {
      columns: [
        { label: "Given Name", name: "first_name" },
        { label: "Surname", name: "last_name" },
      ],
      data: [
        { first_name: "Joe", last_name: "Bloggs" }
      ],
      selected: null,
    }
  },
  methods: {
    rowClick(e) {
      // e.row
    },
    rowSelected(e) {
      // e.row
      this.selected = e.row;
    },
  }
}