# @spectrace/components

> Components used in Spectrace software

Latest version **0.0.1** (published 2020-12-12) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @spectrace/components
pnpm add @spectrace/components
yarn add @spectrace/components
bun add @spectrace/components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-12-12 |
| First published | 2020-12-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ljfio |

## Links

- npm: https://www.npmjs.com/package/@spectrace/components
- Repository: https://github.com/spectrace/components
- Homepage: https://github.com/spectrace/components#readme
- Issues: https://github.com/spectrace/components/issues
- npm.io page: https://npm.io/package/@spectrace/components

## Recent versions

- 0.0.1 (latest) — 2020-12-12

## README

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

---
_Source: https://npm.io/package/@spectrace/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._