# @hyperionx/xds-component-library

> A collection of components for Hyperion X Design System built using Vue.js

Latest version **1.1.3** (published 2020-09-03) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @hyperionx/xds-component-library
pnpm add @hyperionx/xds-component-library
yarn add @hyperionx/xds-component-library
bun add @hyperionx/xds-component-library
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2020-09-03 |
| First published | 2020-06-22 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 10.22.0 |
| Dependencies | 9 |
| Unpacked size | 33.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | charliehorton, dan.m, hmznvd, y.pak |
| Keywords | xds, vue, components |

## Links

- npm: https://www.npmjs.com/package/@hyperionx/xds-component-library
- Repository: https://bitbucket.org/modulaldn/xds-component-library
- Homepage: https://bitbucket.org/modulaldn/xds-component-library#readme
- npm.io page: https://npm.io/package/@hyperionx/xds-component-library

## Dependencies (9)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [flatpickr](https://npm.io/package/flatpickr.md) 4.6.3
- [@carbon/icons-vue](https://npm.io/package/@carbon/icons-vue.md) 10.10.2
- [carbon-components](https://npm.io/package/carbon-components.md) 10.11.2
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.5
- [@ag-grid-community/vue](https://npm.io/package/@ag-grid-community/vue.md) ^23.2.1
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^9.0.0
- [@ag-grid-enterprise/core](https://npm.io/package/@ag-grid-enterprise/core.md) ^23.2.1
- [@ag-grid-enterprise/all-modules](https://npm.io/package/@ag-grid-enterprise/all-modules.md) ^23.2.1

## Recent versions

- 1.1.3 (latest) — 2020-09-03
- 1.1.2 — 2020-08-11
- 0.0.1 — 2020-06-22
- 2.27.0 — 2020-06-22

## README

# @hyperionx/xds-component-library

# Getting Started

## Quick Start (Vue CLI)

Assuming we're starting with a new Vue CLI project:

```sh
Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-
sass)
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
```

Using Yarn

```sh
$ yarn add @hyperionx/xds-component-library
```

Or npm

```sh
$ npm install @hyperionx/xds-component-library
```

In src/main.js add the following to include the components.

```js
import XDSComponents from '@hyperionx/xds-component-library/src/index';
Vue.use(XDSComponents);
```

Replace the contents of src/components/HelloWorld.vue with the following

```html
<template>
  <div class="sample">
    <h1>Example use of @hyperionx/xds-component-library</h1>
    <x-text-input label="Who are you?" v-model="yourName" placeholder="your name" />
    <x-btn @click="onClick">Hello {{yourName}}</x-btn>
    <x-modal :visible="visible" @modal-hidden="modalClosed">
      <template slot="title">Welcome to @hyperionx/xds-component-library {{yourName}}</template>
      <template slot="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.
        </p>
      </template>
    </x-modal>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        yourName: '',
        visible: false,
      };
    },
    methods: {
      onClick() {
        this.visible = true;
      },
      modalClosed() {
        this.visible = false;
      },
    },
  };
</script>

<style>
  .sample {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 5% auto;
  }

  .x-text-input {
    margin: 30px 0;
  }
</style>
```

That's it! Now start the server and start building.

Using Yarn

```sh
$ yarn serve
```

Or npm

```sh
$ npm serve
```

## Longer start

### Install

Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @hyperionx/xds-component-library
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:

```bash
yarn add @hyperionx/xds-component-library
```

NOTE: [current-script-polyfill](https://www.npmjs.com/package/current-script-polyfill) is required for older browsers (_e.g._ IE11)

### Using the component library

In your main js file (where you include Vue):

```javascript
import XDSComponents from '@hyperionx/xds-component-library';
Vue.use(XDSComponents);
```

The above lines will register all the core components. You can register only the components you need if you prefer:

```
Vue.use(XDSComponents, ['XBtn', 'XTag']);
```

### Using the components directly or individually

You can import the component source either for all core components or for the individual components you need.

To import all the core components:

```javascript
import XDSComponents from '@hyperionx/xds-component-library/src/index';
Vue.use(XDSComponents);
```

To import individual components:

```javascript
<script>
...
import { XBtn } from '@hyperionx/xds-component-library';
...
components: {
  XBtn,
},
...
</script>
```

Alternataively from source:

```javascript
<script>
...
import { XBtn } from '@hyperionx/xds-component-library/src';
...
components: {
  XBtn,
},
...
</script>
```

or

```javascript
<script>
...
import { XBtn } from '@hyperionx/xds-component-library/src/components/x-btn';
...
components: {
  XBtn,
},
...
</script>
```

or

```javascript
<script>
...
import XBtn from '@hyperionx/xds-component-library/src/components/x-btn/x-btn';
...
components: {
  XBtn,
},
...
</script>
```

Note: to import the component source you will need to ensure that Babel can process the source. We recommend the Babel preset `@vue/app`. If @hyperionx/xds-component-library is installed as a dependency in a `node_modules` folder or similar, you may need to enable Babel to process the source files, for example with the following lines, or similar, inside the `webpack.config.js` file:

````javascript
{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [path.resolve(__dirname, 'node_modules/@hyperionx/xds-component-library'), path.resolve(__dirname, 'src')]
}
```h

````

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