castlabs-ui

This is a vanilla HTML and Vue.js component library for Castlabs branded sites.

Using @castlabs/ui in npm projects

This is a public NPM package, add it via:

• npm install @castlabs/ui

Using @castlabs/ui in Vue.js 3 projects

Use the boilerplate-vue demo project, it comes preconfigured with the UI lib.

Using @castlabs/ui in Angular projects

Follow the steps described above under Using @castlabs/ui in npm projects. Then edit your angular.json file and add the style files to your projects section:

"assets": [
  { "glob": "favicon.ico", "input": "node_modules/@castlabs/ui/dist/favicon", "output": "/" },
  { "glob": "favicon.svg", "input": "node_modules/@castlabs/ui/dist/favicon", "output": "/" },
  { "glob": "*", "input": "node_modules/@castlabs/ui/dist/favicon", "output": "favicon/" },
  "src/assets"
],
"styles": [
  "src/styles.scss"
],

Create/edit your src/style.scss file and add:

@use '@castlabs/ui/src/styles/ui' with (
  $castlabs-ui-asset-prefix: '../..'
);

To use our $cl-* helper SCSS variables in a component *.scss file, add to its top:

@use '@castlabs/ui/src/styles/global' as *;

To use our cl* helper js methods (csModalShow in the following examples), import them your TS files:

import { clModalShow } from '@castlabs/ui/dist/castlabs-ui.module.js'

You can use the helpers now in your code/template:

<!-- TS --->
export class ... {
  ...
  clModalShow = (id: string): void => clModalShow(id)
  ...
}

<!-- HTML --->
<button class="btn cl-color-red" (click)="clModalShow('mymodal')">click me</button>

Finally, it might or might not necessary to copy node_modules/@castlabs/ui/dist/castlabs-ui.module.d.ts over into your source tree for your local IDE to pick up all types. The angular builder should be able to fetch them directly from the node module.

Which .js file to use

There are multiple variants of our library js available. Depending on your needs:

• castlabs-ui.core.js is used by static/vanilla JS projects that use tags to load the file.
• castlabs-ui.common.js is used by Vue projects
• castlabs-ui-editor.common.js is used by Vue projects that also use the Ace editor.
• castlabs-ui.module.js is used by other frameworks that import JS files as JS modules.