@carbon/vue 2.44.1 → 2.45.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.44.1",
+  "version": "2.45.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -57,23 +57,27 @@
   "scripts": {
     "build": "vue-cli-service build --target lib --name carbon-vue ./src/index.js --no-clean",
     "clean": "rimraf dist node_modules/.cache",
-    "postinstall": "carbon-telemetry collect --install"
+    "postinstall": "carbon-telemetry collect --install",
+    "upgrade:dependencies": "run-s -s 'upgrade:dependencies:*'",
+    "upgrade:dependencies:carbon": "npm-check-updates -u --dep dev,peer,prod  --filter '/carbon/' --target minor",
+    "upgrade:dependencies:other": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^vue$|^@vue)/'",
+    "upgrade:dependencies:yarn": "yarn set version latest"
   },
   "engines": {
     "node": ">=10.x"
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.56.0",
+    "@carbon/icons-vue": "10.63.0",
     "@carbon/telemetry": "^0.1.0",
-    "carbon-components": "10.58.0",
+    "carbon-components": "10.58.5",
     "flatpickr": "4.6.13",
     "vue": "^2.7.10"
   },
   "devDependencies": {
-    "@vue/cli-service": "^3.12.1",
-    "eslint-plugin-prettier": "^3.4.1",
-    "vue-template-compiler": "^2.7.10"
+    "@vue/cli-service": "~4.5.19",
+    "eslint-plugin-prettier": "^4.2.1",
+    "vue-template-compiler": "^2.7.14"
   },
-  "gitHead": "bc9edcb2243d53639b8e402752df209934fc2476"
+  "gitHead": "46ff5b12ef6af76bf521bef0ceaa6ab7dcc181fb"
 }

package/src/carbon.yml

@@ -2,10 +2,64 @@
 library:
   id: carbon-components-vue
   name: Carbon Vue
-  description: Vue implementation of Carbon Components.
+  description: Build user interfaces with Carbon's core components.
   externalDocsUrl: https://vue.carbondesignsystem.com/?path=/story/welcome
   inherits: carbon-styles
   packageJsonPath: /../package.json
+  navData:
+    - title: Get started
+      path: "https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/frameworks/vue.mdx"
+    - title: Tutorial
+      items:
+        - title: Overview
+          path: 'https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/vue-tutorial/overview.mdx'
+        - title: Step 1
+          path: 'https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/vue-tutorial/step-1.mdx'
+        - title: Step 2
+          path: 'https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/vue-tutorial/step-2.mdx'
+        - title: Step 3
+          path: 'https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/vue-tutorial/step-3.mdx'
+        - title: Step 4
+          path: 'https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/vue-tutorial/step-4.mdx'
+        - title: Step 5
+          path: 'https://github.com/carbon-design-system/carbon-website/blob/carbon-platform/src/pages/developing/vue-tutorial/step-5.mdx'
+        - title: Wrapping up
+          path: 'https://github.com/carbon-design-system/carbon-website/blob/main/src/pages/developing/vue-tutorial/wrapping-up.mdx'
+  designKits:
+    carbon-white-sketch:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-sketch
+    carbon-g10-sketch:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-sketch
+    carbon-g90-sketch:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-sketch
+    carbon-g100-sketch:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-sketch
+    carbon-shell-sketch:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-shell-sketch
+    carbon-white-adobe-xd:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-adobe-xd
+    carbon-g10-adobe-xd:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-adobe-xd
+    carbon-g90-adobe-xd:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-adobe-xd
+    carbon-g100-adobe-xd:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-adobe-xd
+    axure-widget-library:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/axure-widget-library
+    text-toolbar-sketch:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/text-toolbar-sketch
+    carbon-mid-fi-sketch:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-mid-fi-sketch
+    carbon-wireframe-invision-freehand:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-wireframe-invision-freehand
+    carbon-white-figma:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-white-figma
+    carbon-g10-figma:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g10-figma
+    carbon-g90-figma:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g90-figma
+    carbon-g100-figma:
+      $ref: https://unpkg.com/@carbon-platform/resources/carbon.yml#/designKits/carbon-g100-figma
 assets:
   accordion:
     status: stable

package/src/components/cv-combo-box/cv-combo-box.vue

@@ -182,7 +182,7 @@ export default {
     this.updateOptions();
   },
   mounted() {
-    this.filter = this.value;
+    this.internalUpdateValue(this.value);
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },

package/src/components/cv-data-table/cv-data-table.vue

@@ -54,7 +54,7 @@
               :class="`${carbonPrefix}--search-input`"
               type="text"
               :id="uid"
-              role="search"
+              role="searchbox"
               :placeholder="searchPlaceholder"
               :aria-labelledby="uid"
               ref="search"

package/src/components/cv-file-uploader/cv-file-uploader.vue

@@ -4,6 +4,7 @@
     <p :class="`${carbonPrefix}--label-description`">{{ helperText }}</p>
     <div :class="`${carbonPrefix}--file`" data-file>
       <label
+        v-if="kind === 'button'"
         :for="uid"
         :class="[
           {
@@ -18,13 +19,33 @@
         @keydown.space.prevent
         @keyup.space.prevent="onShow()"
       >
-        <cv-wrapper
-          :tag-type="kind !== 'button' ? 'div' : ''"
+        <slot name="drop-target">{{ internalDropTargetLabel }}</slot>
+        <input
+          v-if="kind !== 'button'"
+          v-bind="$attrs"
+          type="file"
+          :accept="accept"
+          :class="`${carbonPrefix}--file-input`"
+          :id="uid"
+          data-file-uploader
+          data-target="[data-file-container]"
+          v-on="inputListeners"
+          ref="file-input"
+        />
+      </label>
+      <label v-else :for="uid">
+        <div
+          tabindex="0"
+          ref="focusTarget"
           data-file-drop-container
-          :class="`${carbonPrefix}--file__drop-container${allowDropClass}`"
+          :class="wrapperClass"
+          role="button"
           @dragover="onDragEvent"
           @dragleave="onDragEvent"
           @drop="onDragEvent"
+          @keydown.enter.prevent="onShow()"
+          @keydown.space.prevent
+          @keyup.space.prevent="onShow()"
         >
           <slot name="drop-target">{{ internalDropTargetLabel }}</slot>
           <input
@@ -39,7 +60,7 @@
             v-on="inputListeners"
             ref="file-input"
           />
-        </cv-wrapper>
+        </div>
       </label>
       <input
         v-if="kind === 'button'"
@@ -205,6 +226,15 @@ export default {
     allowDropClass() {
       return this.allowDrop ? ` ${this.carbonPrefix}--file__drop-container--drag-over` : '';
     },
+    wrapperClass() {
+      const staticClass = `${this.carbonPrefix}--file__drop-container${this.allowDropClass}`;
+      const dynamicClass =
+        this.kind !== 'button'
+          ? `${this.carbonPrefix}--file-browse-btn`
+          : `${this.carbonPrefix}--btn ${this.carbonPrefix}--btn--primary`;
+
+      return `${staticClass} ${dynamicClass}`;
+    },
   },
   methods: {
     remove(index) {

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -14,6 +14,8 @@
       type="button"
       :aria-expanded="open ? 'true' : 'false'"
       :aria-controls="`${uid}-menu`"
+      :aria-labelledby="`${uid}`"
+      :aria-label="ariaLabel"
       :id="`${uid}-trigger`"
       ref="trigger"
       @click="doToggle"
@@ -75,6 +77,7 @@ export default {
   mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ trigger: ['blur', 'focus'] })],
   props: {
     label: String,
+    ariaLabel: String,
     flipMenu: Boolean,
     up: Boolean,
     offset: {

package/src/components/cv-tabs/cv-tabs.vue

@@ -59,6 +59,7 @@
               // eslint-disable-nextx-line
               selectedId == tab.uid ? 0 : -1
             "
+            type="button"
           >
             {{ tab.label }}
           </button>

package/src/components/cv-tag/cv-tag.vue

@@ -28,6 +28,7 @@
       :aria-label="clearAriaLabel"
       @click.stop.prevent="onRemove"
       :disabled="disabled"
+      type="button"
     >
       <Close16 />
     </button>