@carbon/vue 2.44.0 → 2.44.2

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.0",
+  "version": "2.44.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -64,16 +64,16 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.49.1",
+    "@carbon/icons-vue": "10.56.0",
     "@carbon/telemetry": "^0.1.0",
-    "carbon-components": "10.56.0",
-    "flatpickr": "4.6.9",
-    "vue": "^2.6.14"
+    "carbon-components": "10.58.0",
+    "flatpickr": "4.6.13",
+    "vue": "^2.7.10"
   },
   "devDependencies": {
-    "@vue/cli-service": "^3.11.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "vue-template-compiler": "^2.6.14"
+    "@vue/cli-service": "^3.12.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "vue-template-compiler": "^2.7.10"
   },
-  "gitHead": "cf32f525094daf7cd1073afb4285dd1b8961bba5"
+  "gitHead": "a680fe88936b6d711a40ad1d2b2a29bf1f5233c2"
 }

package/src/carbon.yml

@@ -1,11 +1,65 @@
 # yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
 library:
   id: carbon-components-vue
-  name: Carbon Components Vue
-  description: Vue implementation of Carbon Components.
+  name: Carbon Vue
+  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-dropdown/cv-dropdown-item.vue

@@ -17,6 +17,7 @@
       `cv-dropdown-item ${carbonPrefix}--dropdown-item`,
       { [`${carbonPrefix}--dropdown--selected`]: internalSelected },
     ]"
+    role="menuitem"
   >
     <a
       :aria-checked="internalSelected"

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,7 @@
       type="button"
       :aria-expanded="open ? 'true' : 'false'"
       :aria-controls="`${uid}-menu`"
+      :aria-labelledby="`${uid}`"
       :id="`${uid}-trigger`"
       ref="trigger"
       @click="doToggle"