@carbon/vue 1.0.2 → 1.1.3

package/CHANGELOG.md

@@ -0,0 +1,192 @@
+## 1.1.1 (March 19, 2019)
+
+### Features
+
+- A number of experimental additions for carbon x
+- Change node requirements to > 10 in package.json
+
+### Bug Fixes
+
+- Fix tabs on narrow screens (#273)
+- Fix dorpdown-items v-for (#273)
+
+### Dependency versions
+
+Versions reflect those version was built using.
+
+| Dependency           | Version      | Notes                    |
+| -------------------- | ------------ | ------------------------ |
+| @carbon/icon-helpers | 0.0.1-beta.0 | experimental only        |
+| @carbon/icons-vue    | 0.0.1-beta.0 | experimental only        |
+| carbon-components    | 9.70.1       |                          |
+| d3                   | 5.8.2        | Only needed for data-viz |
+| flatpickr            | 4.5.2        |                          |
+| vue                  | 2.6.3        |                          |
+
+## 1.1.0 (March 14, 2019)
+
+### Features
+
+- Experimental CvCodeSnippet behind feature flag (#244).
+- Experimental CvContentSwitcher behind feature flag (#246)
+- Experimental CvDatePicker behind feature flag (#251)
+- Added CvInlineLoader (#253)
+- Added password behviour for CvTextInput (#254)
+- Experimental toggle added for supporting components (#257)
+
+### Bug Fixes
+
+- chore: Reduced storybook CSS payload
+- fix: Checkbox hover when disabled (#241)
+- fix: add missing inherit attrs false (#249)
+- fix: show tip and hide tip buttons for interactive tooltip storybook (#248)
+- fix: content switcher icon spacing (#258)
+
+### Dependency versions
+
+Versions reflect those version was built using.
+
+| Dependency           | Version      | Notes                    |
+| -------------------- | ------------ | ------------------------ |
+| @carbon/icon-helpers | 0.0.1-beta.0 | experimental only        |
+| @carbon/icons-vue    | 0.0.1-beta.0 | experimental only        |
+| carbon-components    | 9.70.1       |                          |
+| d3                   | 5.8.2        | Only needed for data-viz |
+| flatpickr            | 4.5.2        |                          |
+| vue                  | 2.6.3        |                          |
+
+## 1.0.2 (Mar 8, 2019)
+
+### Features
+
+- Add row-select-change and row-select-changes events to table.
+- Add rows-selected property to table
+- Add use rows-selected with v-model for table
+
+### Bug fixes
+
+- Fix overflow menu issue #234
+
+### Dependency versions
+
+| Dependency           | Version      | Notes                                           |
+| -------------------- | ------------ | ----------------------------------------------- |
+| @carbon/icon-helpers | 0.0.1-beta.0 | experimental only                               |
+| @carbon/icons-vue    | 0.0.1-beta.0 | experimental only                               |
+| carbon-components    | 9.70.1       |                                                 |
+| d3                   | 5.7.0        | Only needed for data-viz                        |
+| flatpickr            | 4.5.1        |                                                 |
+| vue                  | 2.6.1        | some reactivity (e.g. data table) requires this |
+
+## 1.0.1 (Mar 4, 2019)
+
+- Removed setTimeout use
+- Added Skeleton components for
+- CvFileUpload
+- CvDropdown
+- CvCodeSnippet
+- CvCheckbox
+
+## 1.0.0 (Feb 19, 2019) :balloon: :tada: :balloon: :coffee: :balloon:
+
+- Add actions option to data table
+- Add batch actions option to data table
+- Updated table pagination
+- Add CvDataTableRow and CvDataTableCell to allow HTML use in tables
+- Add CvButtonSkeleton
+- Add overflow menu option to table.
+
+## 1.0.0-beta.4 (Feb 13, 2019)
+
+- Fix initially hidden expanding tile behaviour.
+- Add CvBreadCrumbSkeleton
+
+## 1.0.0-beta.3 (Feb 13, 2019)
+
+- Add header and footer slots for CvTable
+- Set button type="button" for all buttons except CvButton. This prevents form submit if a component happens to be inside a form.
+- Added CvSkeletonText, CvAccordionSeketon and CvAccordionItemSekeleton.
+
+## v1.0.0-beta.2 (Feb 10, 2019)
+
+- Removed Symbol use in prop types, fixing CvRadioButton, CvSlider and CvPagination use with the minified compiled modules.
+- Minor story fixes
+- Fix typo in CvContentSwitcherContent component name
+
+## v1.0.0-beta.1 (Feb 10, 2019)
+
+FAIL
+
+## v1.0.0-beta.0 (Feb 8, 2019)
+
+- Storybook: update views
+- CvFileUploader: added v-model and missing parts to
+- CvToolbar: added
+- CvDataTable: added minus the filter/toolbar
+- Tests - Added unit test suite and first tests (CvTag)
+- CvContentSwitcher - Added non-DOM direct content managment
+- Turned helper and invalidMessages into slops (slot-prop hybrid)
+- CvIcon - Downgraded to helper component to remove dependency on carbon-icons
+- Renamed UMD and CommonJS modules from carbon-components-vue... to carbon-vue...
+
+## v0.3.0 (Feb 1, 2019)
+
+- Initial data-viz/bar-graph added
+- Story corrections
+- Change use of \$parent to prefer events
+- Chagne use of \$children to check child type
+- Fix overflow and interactive-tooltip position on scroll/resize
+
+## v0.2.9 (Jan 25, 2019)
+
+- Add gauge component - story is Data-viz/CvGauge
+- Add pie chart component - story is Data-viz/CvPieChart
+- Add router-link version of CvLink
+
+## v0.2.8 (Jan 23, 2019)
+
+Correct duff deploy
+
+## v0.2.7 (Jan 23, 2019)
+
+- Fix click on modal dialog closing it
+
+## v0.2.6 (Jan 23, 2019)
+
+- Fix tab out of modal
+- Remove unused vars
+
+## v0.2.5 - Minor fixes (Jan 22, 2019)
+
+- Make structured list native Vue
+- Simplify structured list components
+- Removed non-core CSS
+- Fix to paginator reactivity
+
+## v0.2.4 - Minor fixes (Jan 18, 2019)
+
+- Make tooltip native Vue
+- Tidy up a bit of unused code
+- Make tabs native Vue and use carbon react pattern (breaks previous tab use)
+
+## v0.2.3 - Minor fixes (Jan 14, 2019)
+
+- Fix modal hide on main body click and show visible in story.
+- Make cv-search native Vue.
+- Make cv-number-input native Vue.
+
+## v0.2.2 - Minor fixes (Jan 10, 2019)
+
+- Fixed expandable tile and made it native Vue
+- Made notification componentes native Vue
+- Tidied toggle stories.
+
+## v0.2.0 - Moved to Storybook 4 (Jan 10, 2019)
+
+- Knobs now operate as Vue properties the template is no longer replaced each time (as per Knobs in storybook 3)
+- Story kinds array replaced by variants which define the settings used in each story.
+- NOTE: slots no longer editable
+
+## v0.1.0 - First draft of carbon-components-vue implementation (Dec 3, 2018)
+
+This initial set of components, based on v9 of carbon components, includes draft implementations of all non-data viz components found in the core carbon components library. Public parts of the component: properties, events, data, methods, computed values are at this point subject to review at this point.

package/README.md

@@ -7,12 +7,30 @@
 > A collection of [Carbon Components](https://github.com/carbon-design-system/carbon-components) implemented using <img src="https://vuejs.org/images/logo.png" width="20" alt="Vue logo"> [Vue.js](https://vuejs.org/).
 
 <div style="text-align: center">
-  <img src="./docs/AtCarbonVue.png" alt="@carbon/vue" height="200px">
+  <img src="../../docs/AtCarbonVue.png" alt="@carbon/vue" height="200px">
 </div>
 
-## Usage
+# Change log
 
-### General
+See [CHANGELOG.md](CHANGELOG.md)
+
+## Current Components
+
+View available Vue.js components [here](http://vue.carbondesignsystem.com). Usage information is available when you click the blue ? icon in the top right corner of the selected component.
+
+See [component status pages](https://www.carbondesignsystem.com/component-status) for the status of each component.
+
+# Development
+
+Please refer to the [Contribution Guidelines](../../.github/CONTRIBUTING.md) before starting any work.
+
+## Contributing
+
+Fork, create branch, submit PR. The PR will be used as part of a review process.
+
+# Usage
+
+## General
 
 The components do not import any of the carbon styles themselves. Use the SCSS or CSS from carbon-components to provide the styling.
 
@@ -21,11 +39,119 @@ The components do not import any of the carbon styles themselves. Use the SCSS o
 - If you prefer to build the SCSS, in the `<style>` tag of your top-level component you can include the styles wholesale: `@import "~carbon-components/scss/globals/scss/styles.scss";`
 - Check out the [Carbon Design System developers](https://www.carbondesignsystem.com/getting-started/developers/vanilla) page for information on including individual component styles into your project.
 
-### List of Available Components
+## List of Available Components
 
 View available Vue Components [here](http://vue.carbondesignsystem.com). Usage information is in the notes tab.
 
-### Getting Started
+# Getting Started
+
+## Quick Start (Vue CLI)
+
+Assuming we're starting with a new Vue CLI project:
+
+```sh
+$ vue create my-project
+Vue CLI v3.5.2
+? Please pick a preset: default (babel, eslint)
+$ cd my-project
+```
+
+Using Yarn
+
+```sh
+$ yarn add @carbon/vue
+```
+
+Or npm
+
+```sh
+$ npm install @carbon/vue
+```
+
+In src/main.js add the following to include the carbon styles and components.
+
+```js
+import 'carbon-components/css/carbon-components.css';
+import CarbonComponentsVue from '@carbon/vue/src/index';
+Vue.use(CarbonComponentsVue);
+```
+
+Replace the contents of src/components/HelloWorld.vue with the following
+
+```html
+<template>
+  <div class="sample">
+    <h1>Example use of @carbon/vue</h1>
+    <cv-text-input label="Who are you?" v-model="yourName" placeholder="your name" />
+    <cv-button @click="onClick">Hello {{yourName}}</cv-button>
+    <cv-modal :visible="visible" @modal-hidden="modalClosed">
+      <template slot="title"
+        >Welcome to @carbon/vue {{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>
+    </cv-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;
+  }
+
+  .cv-text-input {
+    margin: 30px 0;
+  }
+</style>
+```
+
+That's it! Now start the server and start building.
+
+Using Yarn
+
+```sh
+$ yarn serve
+```
+
+Or npm
+
+```sh
+$ npm serve
+```
+
+## Longer start
+
+### Install
 
 Run the following command using [npm](https://www.npmjs.com/):
 
@@ -39,35 +165,35 @@ If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead
 yarn add @carbon/vue
 ```
 
-NOTE: https://www.npmjs.com/package/current-script-polyfill is required for older browsers (e.g. IE11)
+NOTE: [current-script-polyfill](https://www.npmjs.com/package/current-script-polyfill) is required for older browsers (_e.g._ IE11)
 
-### Using all at once
+### Using the component library
 
-In your main js file (where you include Vue)
+In your main js file (where you include Vue):
 
 ```javascript
-// No need for Babel
 import CarbonComponentsVue from '@carbon/vue';
+Vue.use(CarbonComponentsVue);
 ```
 
-alternatively if wanting to specify babel presets
+The above lines will register all the core components. You can register only the components you need if you prefer:
 
-```javascript
-// need babel
-import CarbonComponentsVue from '@carbon/vue/src/index';
-Vue.use(CarbonComponentsVue);
 ```
+Vue.use(CarbonComponentsVue, ['CvButton', 'CvTag']);
+```
+
+### Using the components directly or individually
 
-### Using one at a time
+You can import the component source either for all core components or for the individual components you need.
 
-In your main js file (where you include Vue)
+To import all the core components:
 
 ```javascript
-// No need for Babel
-import { CvButton } from '@carbon/vue';
+import CarbonComponentsVue from '@carbon/vue/src/index';
+Vue.use(CarbonComponentsVue);
 ```
 
-In a component file
+To import individual components:
 
 ```javascript
 <script>
@@ -81,7 +207,17 @@ components: {
 </script>
 ```
 
-### From unkpg
+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 @carbon/vue 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:
+
+```javascript
+{
+  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.
 
@@ -94,194 +230,3 @@ Vue.use(window['carbon-vue'].default);
 
 . . . <cv-button>Hello</cv-button>
 ```
-
-## Project State
-
-**1.0.2**
-
-- Add row-select-change and row-select-changes events to table
-- Add rows-selected property to table
-- Add use rows-selected with v-model for table
-- Fix overflow menu issue #234
-
-**1.0.1**
-
-- Removed setTimeout use
-- Added Skeleton components for
-- CvFileUpload
-- CvDropdown
-- CvCodeSnippet
-- CvCheckbox
-
-**1.0.0**
-
-- Add actions option to data table
-- Add batch actions option to data table
-- Updated table pagination
-- Add CvDataTableRow and CvDataTableCell to allow HTML use in tables
-- Add CvButtonSkeleton
-- Add overflow menu option to table.
-
-**1.0.0-beta.4**
-
-- Fix initially hidden expanding tile behaviour.
-- Add CvBreadCrumbSkeleton
-
-**1.0.0-beta.3**
-
-- Add header and footer slots for CvTable
-- Set button type="button" for all buttons except CvButton. This prevents form submit if a component happens to be inside a form.
-- Added CvSkeletonText, CvAccordionSeketon and CvAccordionItemSekeleton.
-
-**v1.0.0-beta.2**
-
-- Removed Symbol use in prop types, fixing CvRadioButton, CvSlider and CvPagination use with the minified compiled modules.
-- Minor story fixes
-
-**v1.0.0-beta.1**
-
-- Fix typo in CvContentSwitcherContent component name
-
-**v1.0.0-beta.0**
-
-- Storybook: update views
-- CvFileUploader: added v-model and missing parts to
-- CvToolbar: added
-- CvDataTable: added minus the filter/toolbar
-- Tests - Added unit test suite and first tests (CvTag)
-- CvContentSwitcher - Added non-DOM direct content managment
-- Turned helper and invalidMessages into slops (slot-prop hybrid)
-- CvIcon - Downgraded to helper component to remove dependency on carbon-icons
-- Renamed UMD and CommonJS modules from carbon-components-vue... to carbon-vue...
-
-**v0.3.0**
-
-- Initial data-viz/bar-graph added
-- Story corrections
-- Change use of \$parent to prefer events
-- Chagne use of \$children to check child type
-- Fix overflow and interactive-tooltip position on scroll/resize
-
-**v0.2.9**
-
-- Add gauge component - story is Data-viz/CvGauge
-- Add pie chart component - story is Data-viz/CvPieChart
-- Add router-link version of CvLink
-
-**v0.2.8**
-Correct duff deploy
-
-**v0.2.7**
-
-- Fix click on modal dialog closing it
-
-**v0.2.6**
-
-- Fix tab out of modal
-- Remove unused vars
-
-**v0.2.5 - Minor fixes**
-
-- Make structured list native Vue
-- Simplify structured list components
-- Removed non-core CSS
-- Fix to paginator reactivity
-
-**v0.2.4 - Minor fixes**
-
-- Make tooltip native Vue
-- Tidy up a bit of unused code
-- Make tabs native Vue and use carbon react pattern (breaks previous tab use)
-
-**v0.2.3 - Minor fixes**
-
-- Fix modal hide on main body click and show visible in story.
-- Make cv-search native Vue.
-- Make cv-number-input native Vue.
-
-**v0.2.2 - Minor fixes**
-
-- Fixed expandable tile and made it native Vue
-- Made notification componentes native Vue
-- Tidied toggle stories.
-
-**v0.2.0 - Moved to Storybook 4**
-
-- Knobs now operate as Vue properties the template is no longer replaced each time (as per Knobs in storybook 3)
-- Story kinds array replaced by variants which define the settings used in each story.
-- NOTE: slots no longer editable
-
-**v0.1.0 - First draft of carbon-components-vue implementation**
-
-This initial set of components, based on v9 of carbon components, includes draft implementations of all non-data viz components found in the core carbon components library. Public parts of the component: properties, events, data, methods, computed values are at this point subject to review at this point.
-
-### Current Components
-
-View available Vue.js components [here](http://vue.carbondesignsystem.com). Usage information is available when you click the blue ? icon in the top right corner of the selected component.
-
-Current Version: 0.1
-:white_check_mark: Ready
-:warning: Under review
-:heavy_minus_sign: Not available
-
-| **Components**           | **State**          | **Link**                                                                         |
-| ------------------------ | ------------------ | -------------------------------------------------------------------------------- |
-| **CvAccordion**          | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvAccordion                      |
-| CvBarGraph               | :warning:          | http://vue.carbondesignsystem.com/?selectedKind=Data-Viz%2FCvBarGraph            |
-| **CvBreadcrumb**         | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvBreadcrumb                     |
-| **CvButton**             | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvButton                         |
-| **CvCheckbox**           | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvCheckbox                       |
-| **CvCodeSnippet**        | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvCodeSnippet&selectedStory=All  |
-| **CvContentSwitcher**    | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvContentSwitcher                |
-| CvDataTable              | :white_check_mark: | https://github.com/carbon-design-system/carbon-components-vue/issues/51          |
-|                          |
-| CvDatePicker             | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvDatePicker&selectedStory=All   |
-| **CvDropdown**           | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvDropdown                       |
-|                          |
-| **CvFileUploader**       | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvFileUploader&selectedStory=All |
-| **CvForm**               | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvForm                           |
-| **CvGauge**              | :warning:          | https://github.com/carbon-design-system/carbon-components-vue/issues/49          |
-|                          |
-| **CvInlineNotification** | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvInlineNotification             |
-| CvLineGraph              | :heavy_minus_sign: | https://github.com/carbon-design-system/carbon-components-vue/issues/53          |
-|                          |
-| **CvLink**               | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvLink                           |
-| **CvList**               | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvList                           |
-| **CvLoading**            | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvLoading                        |
-| **CvModal**              | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvModal                          |
-| **CvNumberInput**        | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvNumberInput                    |
-| **CvOverflowMenu**       | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvOverflowMenu                   |
-| **CvPagination**         | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvPagination&selectedStory=All   |
-| CvPieChart               | :warning:          | https://github.com/carbon-design-system/carbon-components-vue/issues/52          |
-|                          |
-| **CvProgress**           | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvProgress                       |
-| **CvRadioButton**        | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvRadioButton                    |
-| CvScatterPlot            | :heavy_minus_sign: | https://github.com/carbon-design-system/carbon-components-vue/issues/50          |
-|                          |
-| **CvSearch**             | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvSearch                         |
-| **CvSelect**             | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvSelect                         |
-| **CvSlider**             | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvSlider                         |
-| **CvStructuredList**     | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvStructuredList                 |
-| **CvTabs**               | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvTabs                           |
-| **CvTag**                | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvTag                            |
-| **CvTextArea**           | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvTextArea                       |
-| **CvTextInput**          | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvTextInput                      |
-| CvTimePicker             | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvTimePicker&selectedStory=All   |
-| **CvTile**               | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvTile                           |
-| **CvToastNotification**  | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvToastNotification              |
-| **CvToggle**             | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvToggle                         |
-| **CvTooltip**            | :white_check_mark: | http://vue.carbondesignsystem.com/?selectedKind=CvTooltip                        |
-
-## Development
-
-Please refer to the [Contribution Guidelines](./.github/CONTRIBUTING.md) before starting any work.
-
-### Contributing
-
-Fork, create branch, submit PR. The PR will be used as part of a review process.
-
-### Publishing this library on gh-pages
-
-```bash
-sh deploy-gh-pages.sh
-```