CMLABS Components

CMLABS Components Design System only for NuxtJS 2 project using TailwindCSS as the base CSS Utility Framework.

• ✨  Release Notes
• 📖  Documentation

Introduction

This package uses @nuxt/postcss8 (for [TailwindCSS] requirement) and @nuxtjs/moment (for datepicker component) under the hood and register them automatically so it is encouraged for you not to install these packages in your project.

The base component uses cm-{component_name} as a prefix for conventional use and to avoid component name conflict issue. Some component uses external libraries (which have been automatically registered) as defined below:

• @blowstack/ckeditor-nuxt - used for <cm-editor> component.
• floating-vue - used for <cm-tooltip> and <cm-dropdown> components.
• v-calendar - used for <cm-date-picker>, <cm-date-time-picker>, and <cm-time-picker> components.
• vee-validate - automatically registers <ValidationObserver> and <ValidationProvider> components with standard rules configuration. (see the configuration here)
• vt-notifications - used for <cm-toast> component.
• vue-cleave-component - used for <cm-cleave> component.
• vue-final-modal - used for <cm-modal> component.
• vue-js-toggle-button - used for <cm-toggle> component.
• vue-multipane - automatically registers <Multipane> and <MultipaneResizer> components.
• vue-slider-component - used for <cm-slider> component.

The library and dependencies are installed with respect of the Vue version for compatibility. For the next major updates, these library and dependencies will be upgraded. There is no need for you to install the listed packages above (the libraries have been installed automatically).

Please do *note that this package is used only in NuxtJS 2 project at the moment.

Features

• 👌  NuxtJS version 2 compatible.
• ⚡️  TailwindCSS version 3 installed.
• 🗜  Automatically merge your tailwind.config.js with the package's default configuration.
• 📦  Automatically install and configure peer component library dependencies.
• 🎨  Uses only CMLABS style guide. (see the theme here)
• 🪄  Accessibility and usability driven components.
• ⚙️  Configurable and composable components.
• ☀️  Light and Dark support for the components.

Installation

1. Add @cmlabs/components package to your project.

# Using npm
npm install @cmlabs/components
# Using yarn
yarn add @nuxtjs/tailwindcss

2. Add @cmlabs/components to the modules section of nuxt.config.js.

{
  modules: [
    '@cmlabs/components'
  ]
}

3. Add boxicons cdn to your nuxt.config.js to use the icons.

{
  head: {
    ...
    link: [
      ...
      {
        rel: 'stylesheet',
        href: 'https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css'
      },
      ...
    ],
    ...
  },
}

That's it! You can now use Tailwind classes and CMLABS components in your Nuxt app ✨

📖  Read more about the configuration

Usage

Make sure to add the boxicons cdn in order to use bx-icon syntax to render your icons.

📖  Read more about boxicons usage

Examples:

<cm-button outline variant="info">
  Hello, World
</cm-button>

<cm-dropdown placement="bottom-start">
  <template #toggler>
    <cm-dropdown-toggler>
      <div class="flex items-center gap-4">
        <cm-icon
          class="text-gray-80 text-xl"
          icon="bx-cog"
        />
        <p> Manage User </p>
      </div>
    </cm-dropdown-toggler>
  </template>

  <cm-dropdown-card>
    ...
  </cm-dropdown-card>
</cm-button>

📖  Read more about the components

License

MIT License