open-index/open-npm huggingface dataset:
npm package: @spectrace/components
Description: Components used in Spectrace software
Latest version: 0.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.

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

## Components

### Text Input

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

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

### Buttons

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

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

### Grid Control

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

```javascript
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;
    },
  }
}
```