@cmlabs/components v1.5.14
CMLABS Components
CMLABS Components Design System only for NuxtJS 2 project using TailwindCSS as the base CSS Utility Framework.
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
- Add
@cmlabs/components
package to your project.
# Using npm
npm install @cmlabs/components
# Using yarn
yarn add @nuxtjs/tailwindcss
- Add
@cmlabs/components
to themodules
section ofnuxt.config.js
.
{
modules: [
'@cmlabs/components'
]
}
- 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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago