Installation

Install Concrete in your project by running

npm install --save @crhio/concrete
Copy

Basic Usage

Concrete components can be imported individually in your project

<template>
  <CIcon size="sm" type="trash" />
</template>

<script setup>
  import { CIcon } from '@crhio/concrete';
</script>
Copy

Vue Plugin

However, the best way to use the components and take advantage of Concrete's other features is to install the Concrete Vue plugin:

import { createApp } from 'vue';
import Concrete from '@crhio/concrete';
import App from './App';

const app = createApp(App);

app.use(Concrete, options);
Copy

Plugin Options

Overview

The Concrete Vue plugin accepts the following options

Options

components

Specifies which components should be made globally available within the application. If the property is falsy then all components will be loaded. To prevent any components from being registered, pass an empty array.

app.use(Concrete, {
  components: ['CIcon', 'CTextInput', 'CModal']
});
Copy

size

Specifies the default size for all components with a size prop.

app.use(Concrete, { size: 'lg' });
Copy

labelFormatter

default null

Specifies a function for formatting labels in form input groups

app.use(Concrete, {
  labelFormatter: (label) => translate(label)
});
Copy

inputHandler

Specifies a function for globally handling changes in input values. The handler is called with the id of the input and the updated value. This feature allows you to standardise the behaviour of all inputs in your application e.g. connecting them to store functionality

const store = useStore();

app.use(Concrete, {
  inputHandler: (id, value) => store.updateEntity(id, value)
});
Copy

wrapFormInputs

Specifies whether inputs should be wrapped in a <FormElement> component by default (default true). This option can be overridden by components using the no-wrap prop.

app.use(Concrete, {
  wrapFormInputs: false
});
Copy

customUnits

This option allows you to pass multiple unit conversions into concrete to be used in conjunction with <CNumericInput>'s unit prop. Best practice dictates that all numeric values should be stored as SI values. However, it is often more appropriate and familiar for users to use converted units in the UI. Concrete provides many of the common conversions out of the box, but for when a unit does not exist you can pass in your own conversions as an option. customUnits should be an array of items each containing the following properties:

• unit: string - the unit you wish to add. This will also be the value you specify in the unit prop of the numeric input.
• siUnit: string - the SI unit related to the unit you are adding
• conversions: object - an object containing the following properties to convert to and from SI respectively:
  • toSI: function(convertedValue: Big) - function for converting the converted value back to SI
  • fromSI: function(siValue: Big) - function for converting the SI value to the custom units

PLEASE NOTE - the values passed into toSI/fromSI are not number types, but a Big instance, used to prevent rounding issues with Javascript floats. Therefore, when converting values the times and div methods should be used.

See the following example for adding a nanometers conversion

app.use(Concrete, {
  customUnits: [{
    unit: 'nm',
    siUnit: 'm',
    conversions: {
      toSI: (nm) => nm.div(1000000000),
      fromSI: (m) => m.times(1000000000),
    }
  }]
});
Copy

Accessing options globally

The options, with the exception of components, will be available throughout all the Vue components in your application by injecting the concrete property

<script setup>
import { inject } from 'vue';

const { size, labelFormatter, inputHandler } = inject('concrete');
</setup>
Copy