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

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/CvProgress/CvProgress.stories.mdx

@@ -0,0 +1,202 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CvProgress, CvProgressStep } from '.';
+import { Time20 as TimeIcon } from '@carbon/icons-vue';
+// noinspection ES6PreferShortImport
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+
+<Meta title={`${sbCompPrefix}/CvProgress`} component={CvProgress} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvProgress,
+    CvProgressStep,
+    TimeIcon,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      initialStep: args.initialStep,
+      steps: args.steps,
+      vertical: args.vertical,
+      spaceEqually: args.spaceEqually,
+      step1: args.step1,
+      step2: args.step2,
+      step3: args.step3,
+      step4: args.step4,
+      step5: args.step5,
+      completeIds: args.completeIds,
+      invalidIds: args.invalidIds,
+      disabledIds: args.disabledIds,
+      onStepClicked: action('step-clicked'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+  <cv-progress
+    :initial-step="initialStep"
+    :steps="steps"
+    :vertical="vertical"
+    :space-equally="spaceEqually"
+    @step-clicked="onStepClicked">
+  </cv-progress>
+`;
+const slotTemplate = `
+  <cv-progress
+    :initial-step="initialStep"
+    :vertical="vertical"
+    :spaceEqually="spaceEqually"
+    >
+    <cv-progress-step
+      id="step-1"
+      :label="step1"
+      :complete="completeIds.includes('step-1')"
+      :invalid="invalidIds.includes('step-1')"
+      :disabled="disabledIds.includes('step-1')"
+      additionalInfo="with Meg Murry"
+      description="time icon description"
+      @step-clicked="onStepClicked"
+      >
+      <template v-slot:step-icon>
+        <time-icon :class="[{['bx--progress__warning']:invalidIds.includes('step-1')}]"/>
+      </template>
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-2"
+      :label="step2"
+      :complete="completeIds.includes('step-2')"
+      :invalid="invalidIds.includes('step-2')"
+      :disabled="disabledIds.includes('step-2')"
+      additionalInfo="save Charles Wallace"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-3"
+      :label="step3"
+      :complete="completeIds.includes('step-3')"
+      :invalid="invalidIds.includes('step-3')"
+      :disabled="disabledIds.includes('step-3')"
+      additionalInfo="save the world"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-4"
+      :label="step4"
+      :complete="completeIds.includes('step-4')"
+      :invalid="invalidIds.includes('step-4')"
+      :disabled="disabledIds.includes('step-4')"
+      additionalInfo="Twins Dennys and Sandy"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+    <cv-progress-step
+      id="step-5"
+      :label="step5"
+      :complete="completeIds.includes('step-5')"
+      :invalid="invalidIds.includes('step-5')"
+      :disabled="disabledIds.includes('step-5')"
+      additionalInfo="with Polyhymnia O'Keefe"
+      @step-clicked="onStepClicked"
+      >
+    </cv-progress-step>
+  </cv-progress>
+`;
+
+# CvProgress
+
+**Migration notes:**
+
+- The "current" icon is updated to match Carbon React
+- Added the property `spaceEqually` to match Carbon React
+- The property name `initialStep` is misleading. It is treated as the Current progress (currentIndex).
+- To override the default icons, provide an icon in the `step-icon` slot in the `cv-progress-step`
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'step-clicked'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      steps: [
+        'Planet Uriel',
+        'The Happy Medium',
+        'The Black Thing',
+        'Rescue Dr. Murry',
+        'Rescue Charles Wallace',
+        'Back to Earth',
+      ],
+    }}
+    argTypes={{
+      initialStep: {
+        control: {
+          type: 'number',
+          min: -1,
+          max: 6,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Slotted
+
+Use `cv-progress-step` for more control over the display.
+
+<Canvas>
+  <Story
+    name="slotted"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'step-clicked', 'steps'],
+      },
+      docs: { source: { code: slotTemplate } },
+    }}
+    args={{
+      template: slotTemplate,
+      step1: 'A Wrinkle in Time',
+      step2: 'A Wind in the Door',
+      step3: 'A Swiftly Tilting Planet',
+      step4: 'Many Waters',
+      step5: 'An Acceptable Time',
+      vertical: true,
+      completeIds: [],
+      invalidIds: [],
+      disabledIds: [],
+    }}
+    argTypes={{
+      initialStep: {
+        control: {
+          type: 'number',
+          min: -1,
+          max: 6,
+        },
+      },
+      disabledIds: {
+        control: 'multi-select',
+        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+      },
+      completeIds: {
+        control: 'multi-select',
+        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+      },
+      invalidIds: {
+        control: 'multi-select',
+        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvProgress/CvProgress.vue

@@ -0,0 +1,78 @@
+<template>
+  <ul
+    data-progress
+    data-progress-current
+    :class="[
+      `cv-progress ${carbonPrefix}--progress`,
+      { [`${carbonPrefix}--progress--space-equal`]: isEqual },
+      { [`${carbonPrefix}--progress--vertical`]: vertical },
+    ]"
+  >
+    <slot>
+      <cv-progress-step
+        v-for="(step, index) in steps"
+        :key="`step:${index}:${initialStep > index}`"
+        :label="step"
+        :complete="initialStep > index"
+        @step-clicked="emit('step-clicked', { ...$event, index })"
+      />
+    </slot>
+  </ul>
+</template>
+
+<script setup>
+// noinspection ES6PreferShortImport
+import { carbonPrefix } from '../../global/settings';
+import CvProgressStep from './CvProgressStep.vue';
+import { computed, onMounted, provide, ref, watch } from 'vue';
+
+const props = defineProps({
+  /**
+   * Optionally specify the current step array index
+   */
+  initialStep: { type: Number, default: 0 },
+  /**
+   * An array of labels for the steps. Use `cv-progress-step` components for more control over the step logic.
+   */
+  steps: Array,
+  /**
+   * Determines whether the ProgressIndicator should be rendered vertically.
+   */
+  vertical: { type: Boolean, default: false },
+  /**
+   * Specify whether the progress steps should be split equally in size in the div
+   */
+  spaceEqually: { type: Boolean, default: false },
+});
+const emit = defineEmits(['step-clicked']);
+
+const isEqual = computed(() => props.spaceEqually && !props.vertical);
+provide('progress-space-equally', isEqual);
+const completedSteps = ref(new Set());
+provide('progress-completed-steps', completedSteps);
+
+/**
+ * @typedef ProgressStepData
+ * @type {string} uid
+ * @type {string} label
+ */
+/**
+ * @type {Ref<UnwrapRef<Array<ProgressStepData>>>}
+ */
+const progressSteps = ref([]);
+provide('progress-steps', progressSteps);
+
+const currentStep = ref('');
+provide('progress-current-step', currentStep);
+function updateSteps() {
+  if (
+    props.initialStep > -1 &&
+    props.initialStep < progressSteps.value.length
+  ) {
+    const step = progressSteps.value[props.initialStep];
+    currentStep.value = step.uid;
+  } else currentStep.value = '';
+}
+onMounted(updateSteps);
+watch(() => props.initialStep, updateSteps);
+</script>

package/src/components/CvProgress/CvProgressStep.vue

@@ -0,0 +1,124 @@
+<!--suppress HtmlUnknownTag -->
+<template>
+  <li
+    :class="[
+      `cv-progress-step ${carbonPrefix}--progress-step`,
+      `${carbonPrefix}--progress-step--${internalState}`,
+    ]"
+    :id="uid"
+    :aria-disabled="disabled"
+  >
+    <button
+      type="button"
+      :class="[
+        `${carbonPrefix}--progress-step-button`,
+        { [`${carbonPrefix}--progress-step-button--unclickable`]: isCurrent },
+      ]"
+      tabindex="-1"
+      :title="label"
+      @click.prevent="emit('step-clicked', { uid })"
+    >
+      <span v-if="isCurrent" :class="`${carbonPrefix}--assistive-text`"
+        >Current</span
+      >
+      <slot name="step-icon">
+        <component :is="stepIcon" :class="stepClass">
+          <title>{{ description }}</title>
+        </component>
+      </slot>
+      <div
+        :class="`${carbonPrefix}--progress-text`"
+        :style="{ maxWidth: isEqual ? 'calc(100% - 1rem)' : undefined }"
+      >
+        <!-- todo: add tooltip when tooltip is implemented -->
+        <!-- <cv-tooltip v-if="tipText" ... v-else -->
+        <div :class="[`${carbonPrefix}--progress-label`]">
+          {{ label }}
+        </div>
+        <p v-if="additionalInfo" class="bx--progress-optional">
+          {{ additionalInfo }}
+        </p>
+      </div>
+      <span :class="`${carbonPrefix}--progress-line`"></span>
+    </button>
+  </li>
+</template>
+
+<script setup>
+import {
+  Incomplete16,
+  CheckmarkOutline16,
+  Warning16,
+  CircleDash16,
+} from '@carbon/icons-vue';
+// noinspection ES6PreferShortImport
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const STEP_CURRENT = 'current';
+const STEP_COMPLETE = 'complete';
+const STEP_INCOMPLETE = 'incomplete';
+const STEP_DISABLED = 'disabled';
+
+const props = defineProps({
+  additionalInfo: String,
+  description: String,
+  disabled: Boolean,
+  invalid: Boolean,
+  label: String,
+  tipText: String,
+  complete: Boolean,
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+const isEqual = inject('progress-space-equally');
+
+const emit = defineEmits(['step-clicked']);
+
+const internalState = ref(STEP_INCOMPLETE);
+/**
+ * @type {Ref<UnwrapRef<string>>}
+ */
+const currentStep = inject('progress-current-step');
+const isCurrent = computed(() => {
+  return uid.value === currentStep.value;
+});
+/**
+ * @type {Ref<UnwrapRef<Array<ProgressStepData>>>}
+ */
+const progressSteps = inject('progress-steps');
+/**
+ * @type {Ref<UnwrapRef<Set<string>>>}
+ */
+const completedSteps = inject('progress-completed-steps');
+function checkCurrentStep() {
+  if (props.disabled) internalState.value = STEP_DISABLED;
+  else if (isCurrent.value) internalState.value = STEP_CURRENT;
+  else if (props.complete) internalState.value = STEP_COMPLETE;
+  else internalState.value = STEP_INCOMPLETE;
+
+  const stepData = { uid: uid.value, state: internalState.value };
+  const index = progressSteps.value.findIndex(step => step.uid === uid.value);
+  if (index > -1) progressSteps.value.splice(index, 1, stepData);
+  else progressSteps.value.push(stepData);
+}
+onMounted(checkCurrentStep);
+watch(currentStep, checkCurrentStep);
+watch(completedSteps, checkCurrentStep);
+
+onBeforeUnmount(() => {
+  const index = progressSteps.value.findIndex(step => step.uid === uid.value);
+  if (index > -1) progressSteps.value.splice(index, 1);
+});
+const stepClass = computed(() => {
+  return props.invalid ? `${carbonPrefix}--progress__warning` : '';
+});
+
+const stepIcon = computed(() => {
+  if (props.invalid) return Warning16;
+  else if (internalState.value === STEP_CURRENT) return Incomplete16;
+  else if (internalState.value === STEP_COMPLETE) return CheckmarkOutline16;
+  else return CircleDash16;
+});
+</script>

package/src/components/CvProgress/index.js

@@ -0,0 +1,4 @@
+import CvProgress from './CvProgress.vue';
+import CvProgressStep from './CvProgressStep.vue';
+
+export { CvProgress, CvProgressStep };