@stead/dsl

A collection of design components built using Vue.js

Current Components

View available Vue.js components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.

Usage

General

The components do not import any of the carbon styles themselves. Use the SCSS or CSS from components to provide the styling.

• In your main js file (where you include Vue) you can include the styles wholesale: import "@stead/styles/css/components.min.css";
• You can also use the unpkg cdn to bring in the styles wholesale: aliases the latest minified css file.
• If you prefer to build the SCSS, in the <style> tag of your top-level component you can include the styles wholesale: @import "~components/scss/globals/scss/styles.scss";

List of Available Components

View available Vue Components here. Usage information is in the notes tab.

Getting Started

Quick Start (Vue CLI)

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

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

$ yarn add @stead/dsl

Or npm

$ npm install @stead/dsl

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

import "@stead/css/components.css";
import SteadComponentsVue from "@stead/dsl/src/index";
Vue.use(SteadComponentsVue);

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

<template>
  <div class="sample">
    <h1>Example use of @stead/dsl</h1>
    <ml-text-input
      label="Who are you?"
      v-model="yourName"
      placeholder="your name"
    />
    <ml-button @click="onClick">Hello {{yourName}}</ml-button>
    <ml-modal :visible="visible" @modal-hidden="modalClosed">
      <template slot="title"
        >Welcome to @stead/dsl {{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>
    </ml-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;
  }

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

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

Using Yarn

$ yarn serve

Or npm

$ npm serve

Longer start

Install

Run the following command using npm:

npm install @stead/dsl

If you prefer Yarn, use the following command instead:

yarn add @stead/dsl

NOTE: current-script-polyfill is required for older browsers (e.g. IE11)

Using the component library

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

import SteadComponentsVue from "@stead/dsl";
Vue.use(SteadComponentsVue);

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

Vue.use(SteadComponentsVue, ['MlButton', 'MlTag']);

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:

import SteadComponentsVue from "@stead/dsl/src/index";
Vue.use(SteadComponentsVue);

To import individual components:

<script>
...
import { MlButton } from '@stead/dsl';
...
components: {
  MlButton,
},
...
</script>

Alternataively from source:

<script>
...
import { MlButton } from '@stead/dsl';
...
components: {
  MlButton,
},
...
</script>

or

<script>
...
import { MlButton } from '@stead/dsl/src/components/ml-button';
...
components: {
  MlButton,
},
...
</script>

or

<script>
...
import MlButton from '@stead/dsl/src/components/ml-button/ml-button';
...
components: {
  MlButton,
},
...
</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 @stead/dsl 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:

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [path.resolve(__dirname, 'node_modules/@carbon'), path.resolve(__dirname, 'src')]
}

Using the components from unkpg

In your html file, no need to babel.

<script src="https://unpkg.com/vue@latest" />
<script src="https://unpkg.com/@stead/dsl" />
<script>
Vue.use(window['stead-vue'].default);
<script>

. . . <ml-button>Hello</ml-button>