@carbon/vue 3.0.8-alpha.0 → 3.0.9-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.8-alpha.0",
+  "version": "3.0.9-alpha.0",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",
@@ -206,5 +206,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "15a95f30d38d6b600fd1b70274502895e777e02c"
+  "gitHead": "39dd5beb19a710758bd9c2b44a413f9cc296d31b"
 }

package/src/components/CvNotification/CvToastNotification.stories.js

@@ -58,10 +58,56 @@ export default {
     lowContrast: {
       control: { type: 'boolean' },
     },
+    // slots
+    default: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Slot for additional custom content.',
+    },
+    'title ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Title slot for more custom content.',
+    },
+    subtitle: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Subtitle slot for more custom content.',
+    },
+    'caption ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Caption slot for more custom content.',
+    },
   },
 };
 
-const template = `<cv-toast-notification v-bind="args" @close="onClose" />`;
+const template = `
+<cv-toast-notification v-bind="args" @close="onClose" >
+  <template v-if="args.titleSlot" #title>
+    <strong style="color: orange; font-size: 1.25rem;">Custom</strong> <span style="color: yellow;">title</span>
+  </template>
+
+  <template v-if="args.subtitleSlot" #subtitle>
+    Some <strong style="color: orange; font-size: 1.25rem;">custom</strong> <span style="color: yellow;">subtitle</span>
+  </template>
+
+  <template v-if="args.captionSlot" #caption>
+    Some <span style="color: green;">custom</span> <strong style="color: orange; font-size: 0.75rem;">caption</strong>
+  </template>
+
+  <template v-if="args.defaultSlot">
+    Default slot content.
+  </template>
+</cv-toast-notification>`;
 const Template = args => {
   return {
     components: { CvToastNotification },
@@ -106,3 +152,27 @@ export const Error = Template.bind({});
 Error.args = {
   kind: CvNotificationConsts.notificationKinds[5],
 };
+
+export const SlotDefault = Template.bind({});
+SlotDefault.args = {
+  kind: CvNotificationConsts.notificationKinds[4],
+  defaultSlot: true,
+};
+
+export const SlotTitle = Template.bind({});
+SlotTitle.args = {
+  kind: CvNotificationConsts.notificationKinds[0],
+  titleSlot: true,
+};
+
+export const SlotSubtitle = Template.bind({});
+SlotSubtitle.args = {
+  kind: CvNotificationConsts.notificationKinds[3],
+  subtitleSlot: true,
+};
+
+export const SlotCaption = Template.bind({});
+SlotCaption.args = {
+  kind: CvNotificationConsts.notificationKinds[1],
+  captionSlot: true,
+};

package/src/components/CvNotification/CvToastNotification.vue

@@ -13,12 +13,14 @@
       :class="`${carbonPrefix}--toast-notification__icon`"
     />
     <div :class="`${carbonPrefix}--toast-notification__details`">
-      <h3 :class="`${carbonPrefix}--toast-notification__title`">{{ title }}</h3>
+      <h3 :class="`${carbonPrefix}--toast-notification__title`">
+        <slot name="title">{{ title }}</slot>
+      </h3>
       <div :class="`${carbonPrefix}--toast-notification__subtitle`">
-        {{ subTitle }}
+        <slot name="subtitle">{{ subTitle }}</slot>
       </div>
       <div :class="`${carbonPrefix}--toast-notification__caption`">
-        {{ caption }}
+        <slot name="caption">{{ caption }}</slot>
       </div>
       <slot />
     </div>
@@ -28,7 +30,7 @@
       :class="`${carbonPrefix}--toast-notification__close-button`"
       @click="$emit('close')"
     >
-      <close20 :class="`${carbonPrefix}--inline-notification__close-icon`" />
+      <close20 :class="`${carbonPrefix}--toast-notification__close-icon`" />
     </button>
   </div>
 </template>

package/src/components/CvOverflowMenu/CvOverflowMenu.stories.mdx

@@ -25,18 +25,20 @@ export const Template = args => ({
   template: args.template,
 });
 const defaultTemplate = `
-<cv-overflow-menu
-  :flip-menu="flipMenu"
-  :up="up"
-  :offset="offset"
-  :label="label"
-  :tip-position="tipPosition"
-  :tip-alignment="tipAlignment"
-  @change=onChange>
-  <cv-overflow-menu-item value="item 1" primary-focus>list item 1</cv-overflow-menu-item>
-  <cv-overflow-menu-item value="item 2" disabled>list item 2</cv-overflow-menu-item>
-  <cv-overflow-menu-item value="item 3" danger>list item 3</cv-overflow-menu-item>
-</cv-overflow-menu>
+<div style="padding: 100px;">
+  <cv-overflow-menu
+    :flip-menu="flipMenu"
+    :up="up"
+    :offset="offset"
+    :label="label"
+    :tip-position="tipPosition"
+    :tip-alignment="tipAlignment"
+    @change=onChange>
+    <cv-overflow-menu-item value="item 1" primary-focus>list item 1</cv-overflow-menu-item>
+    <cv-overflow-menu-item value="item 2" disabled>list item 2</cv-overflow-menu-item>
+    <cv-overflow-menu-item value="item 3" danger>list item 3</cv-overflow-menu-item>
+  </cv-overflow-menu>
+</div>
 `;
 const slotsTemplate = `
 <cv-overflow-menu
@@ -117,3 +119,57 @@ Use slots for more control over the display.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name="Flipped"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Overflow menu',
+      flipMenu: true,
+      up: undefined,
+      offset: undefined,
+      tipPosition: undefined,
+      tipAlignment: undefined,
+    }}
+    argTypes={{
+      tipPosition: { control: 'select', default: 'right', options: ['top', 'left', 'bottom', 'right'] },
+      tipAlignment: { control: 'select', default: 'center', options: ['start', 'center', 'end'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Up"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Overflow menu',
+      flipMenu: undefined,
+      up: true,
+      offset: undefined,
+      tipPosition: undefined,
+      tipAlignment: undefined,
+    }}
+    argTypes={{
+      tipPosition: { control: 'select', default: 'right', options: ['top', 'left', 'bottom', 'right'] },
+      tipAlignment: { control: 'select', default: 'center', options: ['start', 'center', 'end'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvOverflowMenu/CvOverflowMenu.vue

@@ -38,40 +38,42 @@
         />
       </slot>
     </button>
-    <div
-      :class="[
-        `${carbonPrefix}--overflow-menu-options`,
-        {
-          [`${carbonPrefix}--overflow-menu--flip`]: flipMenu,
-          [`${carbonPrefix}--overflow-menu-options--open`]: open,
-        },
-      ]"
-      tabindex="-1"
-      ref="popup"
-      :aria-labelledby="`${uid}-trigger`"
-      :id="`${uid}-menu`"
-      :style="{ left: left + 'px', top: top + 'px' }"
-      @focusout="checkFocusOut"
-      @mousedown.prevent="preventFocusOut"
-    >
+    <Teleport to="body">
       <div
-        class="cv-overflow-menu__before-content"
-        ref="beforeContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        @focus="focusBeforeContent"
-      />
-      <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
-        <slot></slot>
-      </ul>
-      <div
-        class="cv-overflow-menu__after-content"
-        ref="afterContent"
-        tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
-        @focus="focusAfterContent"
-      />
-    </div>
+        :class="[
+          `${carbonPrefix}--overflow-menu-options`,
+          {
+            [`${carbonPrefix}--overflow-menu--flip`]: flipMenu,
+            [`${carbonPrefix}--overflow-menu-options--open`]: open,
+          },
+        ]"
+        tabindex="-1"
+        ref="popup"
+        :aria-labelledby="`${uid}-trigger`"
+        :id="`${uid}-menu`"
+        :style="{ left: left + 'px', top: top + 'px' }"
+        @focusout="checkFocusOut"
+        @mousedown.prevent="preventFocusOut"
+      >
+        <div
+          class="cv-overflow-menu__before-content"
+          ref="beforeContent"
+          tabindex="0"
+          style="position: absolute; height: 1px; width: 1px; left: -9999px"
+          @focus="focusBeforeContent"
+        />
+        <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
+          <slot></slot>
+        </ul>
+        <div
+          class="cv-overflow-menu__after-content"
+          ref="afterContent"
+          tabindex="0"
+          style="position: absolute; height: 1px; width: 1px; left: -9999px"
+          @focus="focusAfterContent"
+        />
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -79,8 +81,7 @@
 import { carbonPrefix } from '../../global/settings';
 import { props as propsCvId, useCvId } from '../../use/cvId';
 import OverflowMenuVertical16 from '@carbon/icons-vue/es/overflow-menu--vertical/16';
-import { computed, nextTick, onBeforeMount, onUnmounted, ref } from 'vue';
-import { getBus, removeBus } from '../../global/component-utils/event-bus';
+import { computed, nextTick, provide, ref } from 'vue';
 const props = defineProps({
   /**
    * assistive text shown as a tooltip
@@ -135,15 +136,8 @@ const offsetTop = computed(() => {
   return props.offset ? props.offset.top : 0;
 });
 
-let bus = undefined;
-onBeforeMount(() => {
-  bus = getBus(uid.value);
-  bus.on('cv:close', doClose);
-  bus.on('cv:click', menuItemClick);
-});
-onUnmounted(() => {
-  removeBus(uid.value);
-});
+provide('cv:close', doClose);
+provide('cv:click', menuItemClick);
 
 const trigger = ref(null);
 const popup = ref(null);
@@ -216,7 +210,7 @@ async function positionMenu() {
           popup.value.offsetHeight +
           pixelsScrolledY;
       } else {
-        top.value = menuPosition.left + offsetLeft.value + pixelsScrolledX;
+        top.value = menuPosition.bottom + offsetTop.value + pixelsScrolledY;
       }
     });
   }

package/src/components/CvOverflowMenu/CvOverflowMenuItem.vue

@@ -26,27 +26,22 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
-import { onMounted, ref, useAttrs } from 'vue';
-import { getBus } from '../../global/component-utils/event-bus';
+import { ref, useAttrs, inject } from 'vue';
 
 defineProps({
   primaryFocus: Boolean,
   disabled: Boolean,
   danger: Boolean,
 });
-let bus = undefined;
 const el = ref(null);
-onMounted(() => {
-  const pe = el.value.closest('[data-overflow-menu]');
-  const parent = pe?.getAttribute('id');
-  if (parent) bus = getBus(parent);
-  else console.warn('overflow menu not found');
-});
+const emitClick = inject('cv:click');
+const emitClose = inject('cv:close');
+
 const attrs = useAttrs();
 function onClick() {
-  bus?.emit('cv:click', attrs.value);
+  emitClick(attrs.value);
 }
 function onEsc() {
-  bus?.emit('cv:close');
+  emitClose();
 }
 </script>

package/src/components/CvOverflowMenu/index.js

@@ -1,3 +1,4 @@
 import CvOverflowMenu from './CvOverflowMenu.vue';
-export { CvOverflowMenu };
+import CvOverflowMenuItem from './CvOverflowMenuItem.vue';
+export { CvOverflowMenu, CvOverflowMenuItem };
 export default CvOverflowMenu;

package/src/components/CvStructuredList/CvStructuredList.stories.js

@@ -0,0 +1,141 @@
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import {
+  CvStructuredList,
+  CvStructuredListHeading,
+  CvStructuredListData,
+  CvStructuredListItem,
+} from '.';
+
+export default {
+  title: `${sbCompPrefix}/CvStructuredList`,
+  component: CvStructuredList,
+  argTypes: {
+    selectable: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Makes list items selectable (prop on cv-structured-list component)',
+    },
+    condensed: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Condense spacing of the structured list (prop on cv-structured-list component)',
+    },
+    noWrap: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Prevent text wrapping in list data (prop on cv-structured-list-data component)',
+    },
+  },
+};
+
+const DefaultListItems = [
+  {
+    id: 'item-1',
+    data: [
+      'Item_1',
+      'Item_1',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.',
+    ],
+  },
+  {
+    id: 'item-2',
+    data: [
+      'Item_2',
+      'Item_2',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.',
+    ],
+  },
+];
+
+const template = `
+<div>
+  <cv-structured-list v-bind="args">
+    <template v-slot:headings>
+      <cv-structured-list-heading>
+        Heading 1
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 2
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 3
+      </cv-structured-list-heading>
+    </template>
+
+    <template v-slot:items>
+      <cv-structured-list-item v-for="({id, data}, index) in DefaultListItems" :key="index" name="group-1" :value="id" v-model="listValue" @change="onChange">
+        <cv-structured-list-data v-for="(itemData, dataIndex) in data" :key="dataIndex" :no-wrap="args.noWrap">{{ itemData }}</cv-structured-list-data>
+      </cv-structured-list-item>
+    </template>
+  </cv-structured-list>
+
+  <div style="margin-top:1rem; background-color: #888888; padding:1rem" v-if="args.withVModel">
+    <div style="font-size: 150%">Sample interaction</div>
+    <template
+      v-for="({id}, vmodelIndex) in DefaultListItems"
+      :key="vmodelIndex"
+    >
+      <input name="listValue" :id="id" type="radio" @change="(ev) => {listValue = ev.target.id}" :checked="id === listValue" />
+      <label :for="id" style="margin-right: 16px;">{{id}}:</label>
+    </template>
+
+    <div style="margin-top: 16px;">Checked: <span style="font-weight: bold;">{{ listValue }}</span></div>
+  </div>
+</div>
+`;
+
+const Template = args => {
+  return {
+    components: {
+      CvStructuredList,
+      CvStructuredListHeading,
+      CvStructuredListData,
+      CvStructuredListItem,
+    },
+    setup: () => ({
+      args,
+      listValue: ref(DefaultListItems[0].id),
+      DefaultListItems,
+      onChange: action('change'),
+    }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  withVModel: false,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const VModel = Template.bind({});
+VModel.args = {
+  selectable: true,
+  withVModel: true,
+};
+VModel.parameters = storyParametersObject(
+  VModel.parameters,
+  template,
+  VModel.args
+);

package/src/components/CvStructuredList/CvStructuredList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--structured-list`,
+      {
+        [`${carbonPrefix}--structured-list--selection`]: selectable,
+        [`${carbonPrefix}--structured-list--condensed`]: condensed,
+      },
+    ]"
+    :data-structured-list="selectable"
+  >
+    <div :class="`${carbonPrefix}--structured-list-thead`">
+      <div
+        :class="`${carbonPrefix}--structured-list-row ${carbonPrefix}--structured-list-row--header-row`"
+      >
+        <slot name="headings"></slot>
+        <div
+          v-if="selectable"
+          :class="`${carbonPrefix}--structured-list-th`"
+        ></div>
+      </div>
+    </div>
+    <div :class="`${carbonPrefix}--structured-list-tbody`">
+      <slot name="items"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, provide } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+const props = defineProps({
+  selectable: Boolean,
+  condensed: Boolean,
+});
+
+const emit = defineEmits(['change']);
+
+provide('change', val => {
+  emit('change', val);
+});
+provide('selectable', props.selectable);
+</script>

package/src/components/CvStructuredList/CvStructuredListData.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="[
+      `cv-structured-list-data ${carbonPrefix}--structured-list-td`,
+      {
+        [`${carbonPrefix}--structured-list-content--nowrap`]: noWrap,
+      },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+defineProps({
+  noWrap: Boolean,
+});
+</script>

package/src/components/CvStructuredList/CvStructuredListHeading.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    :class="`cv-structured-list-heading ${carbonPrefix}--structured-list-th`"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvStructuredList/CvStructuredListItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <component
+    :is="tagType"
+    v-bind="$attrs"
+    class="cv-structured-list-item"
+    :value="value"
+    :modelValue="modelValue"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup>
+import { computed, inject, provide } from 'vue';
+import CvStructuredListItemStandard from './CvStructuredListItemStandard.vue';
+import CvStructuredListItemSelectable from './CvStructuredListItemSelectable.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const selectable = inject('selectable');
+const change = inject('change');
+const emit = defineEmits(['change']);
+
+provide('onRadioItemChange', clickedItemCvId => {
+  emit('change', clickedItemCvId);
+  change(clickedItemCvId); //emit to parent
+});
+
+const tagType = computed(() => {
+  return selectable
+    ? CvStructuredListItemSelectable
+    : CvStructuredListItemStandard;
+});
+</script>