Vue implementation of the Carbon Design System

Overview

carbon-components-vue

Carbon Components Vue is released under the Apache-2.0 license CircleCI lerna

Vue implementation of the Carbon Design System A collection of Carbon Components implemented using Vue logo Vue.js.

Carbon Vue library - A Carbon Community Project

The library provides front-end developers & engineers a collection of reusable Vue components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.

Community Contributions Needed

As a community project contributions are not only welcome, but essential for the maintenance and growth of this project.

Changelog

CHANGELOG.md

Gettting started

Usage and getting started instructions for @carbon/vue.

Packages

@carbon/vue

A library of the Carbon core components

@carbon/vue

List of available components

View available Vue Components here. Usage information is available in the notes provided with each story.

Building and publishing

This is a monorepo using lerna. The following steps will build and publish the packages:

  • clone or download the repo;
  • run yarn to install dependencies and bootstrap the packages;
  • run yarn build to build all the packages including the storybook;

If you just want to build an individual package you can limit the scope: yarn build --scope @carbon/vue yarn build --scope storybook

To start the storybook in a local server use yarn start.

Comments
  • problem about input

    problem about input

    l want to use the input (type is password),but i can not hide the button (we can use it to control hide the password or not),can you tell me how can l use it correctly?? of course ,you can provide api

    opened by YYL1999 11
  • feat(component): add gauge component

    feat(component): add gauge component

    Closes #49

    Add gauge component with the following props: amount, total, header and suffix. It depends on d3 library.

    Changelog

    New

    • gauge component, story and notes

    Changed

    • status of the gauge component in README

    Removed

    Comments

    Many thanks to @rodet and @lee-chase for their help!

    opened by ZrianinaMariia 11
  • vendors css is not created since v2.30.0-canary.0

    vendors css is not created since v2.30.0-canary.0

    Detailed description

    When I run yarn build I would expect that the build process (vue-cli-service build) creates 4 files:

    dist/js/chunk-vendors.xxx.js
    dist/js/app.xxx.js
    dist/css/chunk-vendors.xxx.css
    dist/css/app.xxx.css
    
    image

    This worked fine up until @carbon/vue 2.29.0.

    Since @carbon/vue 2.30.0-canary.0 the dist/css/chunk-vendors.xxx.css is not created anymore. image

    Steps to reproduce the issue

    1. In package.json in dependencies section change the version number of @carbon/vue to 2.30.0-canary.0
    image
    1. Run yarn install
    2. Run yarn build
    opened by mawwerik 10
  • Bug when loading cvdropdown

    Bug when loading cvdropdown

    Hi, when I try to load the library on my Vue code like this :

    import CarbonComponentsVue from '@carbon/vue/src/index';
    Vue.use(CarbonComponentsVue);
    

    I get this when it comes to load : [1] * ./_cv-dropdown-inner in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/@carbon/vue/src/components/cv-dropdown/cv-dropdown.vue?vue&type=script&lang=js& [1] * ./_cv-dropdown-inner-c10 in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/@carbon/vue/src/components/cv-dropdown/cv-dropdown.vue?vue&type=script&lang=js&

    CvDropdown element seems to be broken...

    "@carbon/vue": "^2.12.0"

    opened by vykimo 10
  • carbon-components-vue based app does not work in IE11 or Edge (Windows 10)

    carbon-components-vue based app does not work in IE11 or Edge (Windows 10)

    We are using several components (CvTile, CvButton, CvSelect, CvDatePicker, CvTabs, CvCheckbox, CvTextInput) in our application. When trying to open it in Internet Explorer 11 or Edge on a Windows 10 machine, we see the following error:

    image

    At this point the page is blank and the loading stops.

    We use webpack to build our app.

    I will try to attach sample code in the next days, but I need some time to put it together, because I cannot attach or link our confidential source code.

    We need this fix for our upcoming release at the latest by the end of the month (May 2019).

    opened by KJaspers 9
  • fix: multiple a11y fixes

    fix: multiple a11y fixes

    Contributes to #

    ## What did you do? Fix various accessibillty errors.

    ## Why did you do it? Fix IBM accessibility checker failures.

    How have you tested it?

    Tested on my local m2mui build.

    Were docs updated if needed?

    • [ ] N/A
    • [ x] No
    • [ ] Yes

    cv-checkbox.vue: Before:

    image

    image

    cv-codesnippet...:

    Before:

    image

    image

    image

    cv-file-uploader.vue:

    Before:

    image

    image

    cv-modal.vue:

    Before: image

    image

    cv-multi-select.vue:

    Before

    image

    image

    cv-number-input.vue:

    Before:

    image

    image

    cv-search.vue:

    Before: image

    image

    cv-slider.vue:

    image

    image

    cv-tabs.vue: Before:

    image

    image

    cv-toggle.vue: image

    image


    opened by travis1111 8
  • [CvDropdown] - Component style/design is not displaying properly

    [CvDropdown] - Component style/design is not displaying properly

    Detailed description

    I'm trying to use the Dropdown component but it's not displaying properly. The option shown has a bullet point. Also, the input controller doesn't have the arrow.

    General issue

    Related to [CvDropdown]

    I'm using Chrome

    I'm using the 2.19.0 version

    I work for Systems Special Projects as an application developer

    Steps to reproduce the issue

    1. Add component to your project
    2. See the preview

    Additional information

    image

    opened by caiobozato 7
  • feat: add AccordionSkeleton and SkeletonText components

    feat: add AccordionSkeleton and SkeletonText components

    Issue #167

    Adds CvAccordionSkeleton and CvSkeletonText components. Updates CvAccordion story.

    Changelog

    New

    • AccordionSkeleton
    • SkeletonText

    Changed

    • CvAccordion story

    Preview

    skeleton

    opened by sabov 7
  • Add data-table components

    Add data-table components

    Is your feature request related to a problem? Please describe. Add a Vue.js implementation of the carbon data-table components http://www.carbondesignsystem.com/components/data-table

    Describe the solution you'd like Single file templates, notes and story as per other components.

    Ideally, it should not rely on core javascript.

    Describe alternatives you've considered Initial version can rely on core carbon javascript.

    Additional context Add any other context or screenshots about the feature request here.

    Todo:

    • [x] Add filter
    • [x] Add selection and associated controls
    • [x] Add toolbar
    • [x] Add overflow menu to rows
    • [x] HTML table cell content
    • [x] Update notes file
    opened by lee-chase 7
  • chore: switch acc  to script setup

    chore: switch acc to script setup

    Slack question regarding use of script setup

    ## What did you do?

    Changed the vNext accordion component to script setup

    ## Why did you do it?

    As an experiment for comparison.

    How have you tested it?

    Only in storybook as the tests seem to be down

    image

    Were docs updated if needed?

    • [x] N/A
    • [x] No
    • [ ] Yes
    opened by lee-chase 6
  • Replace node-sass on V3 & update eslint-plugin-vue

    Replace node-sass on V3 & update eslint-plugin-vue

    What did you do?

    • Removed node-sass dev dependency
    • Added dart-sass (sass version ^1.49.9) dependency
    • Updated carbon-components to version ^10.56.0
    • Updated .yarn-offline-mirror dependencies

    Why did you do it?

    node-sass is now deprecated. New projects should be migrated to dart-sass.

    I also updated carbon-components because building the current version generated lots of warnings for the usage of / as a division operator. Newer versions of carbon-components fix this issue.

    How have you tested it?

    I ran yarn serve after making the changes and made sure the components were still working.

    Were docs updated if needed?

    • [x] N/A
    • [ ] No
    • [ ] Yes
    opened by mateusbandeiraa 6
  • feat: data table v3

    feat: data table v3

    Contributes to #1380

    ## What did you do? Implement table for v3 also cleanup imports

    ## Why did you do it?

    How have you tested it?

    Were docs updated if needed?

    • [x] Yes
    opened by davidnixon 0
  • Accessibility violation: The tabbable element’s role ‘none’ is not a widget role

    Accessibility violation: The tabbable element’s role ‘none’ is not a widget role

    Detailed description

    Describe in detail the issue you're having.

    This issue is related to CvDataTable. Using IBM Accessibility Checker on the CvDataTable results on the following violation: "The tabbable element's role 'none' is not a widget role" I have uploaded a print of accessibility checker scan showing the violation and the code.

    Is this a feature request (new component, new icon), a bug, or a general issue?

    Bug

    Is this issue related to a specific component?

    CvDataTable

    What did you expect to happen? What happened instead? What would you like to see changed?

    Was expecting no violations. Got an accessibility violation as showed on the screenshot below.

    What browser are you working in?

    Chrome

    What version of the Carbon Design System are you using?

    "@carbon/vue": "^2.42.0",

    Additional information

    • Screenshots or code
    Captura de Tela 2023-01-06 às 10 53 26
    <div
      :class="`${carbonPrefix}--search-magnifier`"
      ref="magnifier"
    >
    
    • Notes
    opened by bmamprim 0
  • fix(cv-data-table): Fix accessibility violations from CvDataTable

    fix(cv-data-table): Fix accessibility violations from CvDataTable

    Contributes to #1394

    ## What did you do? I added role and aria-label attributes to remove accessibility violations

    ## Why did you do it? I did that to remove violations reported on issue #1394

    How have you tested it?

    I've ran IBM accessibility checker and the violations was gone, with none extra violations added.

    Were docs updated if needed?

    • [x] N/A
    • [ ] No
    • [ ] Yes
    opened by bmamprim 0
  • feat: using native Crypto API to generate UUIDs

    feat: using native Crypto API to generate UUIDs

    What did you do?

    Replaced an obscure UUID generation function with a native method from the Crypto API (available everywhere).

    About the Crypto API and its availability: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

    Why did you do it?

    Using the native API was about 50% faster, and it's all done in a single line of code, calling the Crypto API. The current version is somewhat obscure.

    The in-browser benchmark can run here: https://jsbench.me/a9lcjwwi2p/2

    How have you tested it?

    Function output was unaltered with the change. Both versions output uid-${ a_random_uuid }

    Were docs updated if needed?

    • [x] N/A
    • [ ] No
    • [ ] Yes
    opened by edo9k 0
  • fix(cv-data-table): fix searchbox role

    fix(cv-data-table): fix searchbox role

    Contributes to #1389

    ## What did you do?

    Change search box input tag role to searchbox

    ## Why did you do it?

    Fix accessibility report check on multiple search roles

    How have you tested it?

    Run accessibility test after alteration

    Were docs updated if needed?

    • [x] N/A
    • [ ] No
    • [ ] Yes
    opened by lbenicio-ibm 0
  • Accessibility Violations in Web component - Multiple elements with “search” role do not have unique labels

    Accessibility Violations in Web component - Multiple elements with “search” role do not have unique labels

    Detailed description

    Accessibility Violations in Web component reported by IBM Equal Access Accessibility Checker - Multiple elements with “search” role do not have unique labels

    Describe in detail the issue you're having.

    the vue web component cv-data-table have multiple html tags with role="search" which casuses a flag on accessibility checker

    Is this a feature request (new component, new icon), a bug, or a general issue?

    bug

    Is this issue related to a specific component?

    cv-data-table

    What did you expect to happen? What happened instead? What would you like to see changed?

    Role value for input field inside search box should be "searchbox" not "search"

    What browser are you working in?

    Safari

    What version of the Carbon Design System are you using?

    10.46.0

    What offering/product do you work on? Any pressing ship or release dates we should be aware of?

    eConfig

    Steps to reproduce the issue

    1. Create a vue component cv-data-table
    2. enable search on that table
    3. run accessibility checker

    Additional information

    • Screenshots or code
    • Notes
    opened by lbenicio-ibm 0
Releases(@carbon/[email protected])
Owner
Carbon Design System
Carbon is an open-source design system built by IBM.
Carbon Design System
A Vue.js design-system for Web.

A Vue.js Design System for Web. Responsive, user-friendly and lightweight library helping us build great products for our customers. This library for

Qvant 229 Dec 27, 2022
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Yan Savinov 873 Jan 3, 2023
Vue Components inspired by Microsoft's Fluent Design System

Vue Components inspired by Microsoft's Fluent Design System

null 74 Dec 14, 2022
ICIJ's Design System for Bootstrap 4 and Vue.js

Murmur is ICIJ's Design System for Bootstrap 4 and Vue.js Status CI checks Code Climate NPM version NPM downloads Installation guide If you are using

The International Consortium of Investigative Journalists 15 Nov 15, 2022
Maker Design System by Square

Square Maker A Vue.js 2.x component library. View the styleguide here. ?? Install # install maker npm i @square/maker # install peer dependencies npx

Square 55 Dec 21, 2022
Most complete implementation of Spectre.css on Vue.js

A Lightweight, Simple and Responsive Component Framework Vectre is a set of lightweight, simple and responsive Vue components based on Spectre CSS Fea

null 64 Oct 16, 2022
Ory Kratos Vue3 / Vite with Typescript User Interface Reference Implementation

Ory Kratos Vue3 / Vite with Typescript User Interface Reference Implementation This repository contains a reference implementation for Ory Kratos' in

Tim 21 Jan 1, 2023
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Vue Material 9.7k Jan 5, 2023
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 307 Dec 25, 2022
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Ant Design Vue An enterprise-class UI components based on Ant Design and Vue. English | 简体中文 Features An enterprise-class UI design system for desktop

vueComponent 17.6k Jan 4, 2023
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 428 Jan 4, 2023
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

MDBootstrap 902 Jan 4, 2023
Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 899 Dec 29, 2022
Bootstrap4 Material Design Components for Vue.js

Vue MDBootstrap Vue MDBootstrap is a collection of VueJs components and built according to the Google Material Design specs. They can be used to built

Ahmad Fajar 3 Dec 23, 2022
Material Design UI library for Vuejs 2.0

Muse-UI Material Design UI library for Vuejs 2.0 Installation Muse-UI is available as an npm package npm install muse-ui -S yarn add muse-ui Usage imp

Muse UI 8.3k Dec 27, 2022
Build material design interfaces in record time... without stress for devs... 🍺💛

Beercss Build material design interfaces in record time... ...without stress for devs ?? ?? Cheers, www.beercss.com Why? It's based on latest material

beercss 359 Jan 3, 2023
administrative region cascader base on view-design

ar-cascader 基于view-design的行政区域级联组件(基于iviewArea中alCascader改良) administrative region cascader base on view-design install 安装 npm install ar-cascader

Ricky 1 Dec 31, 2021
Ant design guide with storybook,

An enterprise-class UI components based on Ant Design and Vue.

null 0 Jan 20, 2022
Vue2 material design icons with easy access to icons names and types

vue-material-icons Vue2 material design icons with easy access to icons names and types (all available in IDE hints). Hints were tested on IntelliJ ID

Dominik Betka 0 May 11, 2022