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

package/src/components/CvTabs/CvTabs.stories.mdx

@@ -0,0 +1,175 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import CvTabs from './CvTabs.vue';
+import CvTab from './CvTab.vue';
+import CvTabsSkeleton from './CvTabsSkeleton.vue';
+import SbContainer from './_SbContainer.vue';
+import { action } from '@storybook/addon-actions';
+
+<Meta
+  title={`${sbCompPrefix}/CvTabs`}
+  component={CvTabs}
+  decorators={[
+    () => ({
+      components: { SbContainer, Story },
+      template: `<SbContainer><story/></SbContainer>`,
+    }),
+  ]}
+/>
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvTabs,
+    CvTab,
+    CvTabsSkeleton,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      container: args.container,
+      noDefaultToFirst: args.noDefaultToFirst,
+      selectedId: args.selectedId,
+      disabledIds: args.disabledIds,
+      onTabSelected: action('tab-selected'),
+      onTabSelectedId: action('tab-selected-id'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+<cv-tabs
+  :container="container"
+  :no-default-to-first="noDefaultToFirst"
+  @tab-selected="onTabSelected"
+  @tab-selected-id="onTabSelectedId"
+  aria-label="navigation tab label">
+    <cv-tab id="tab-1" label="House" :selected="selectedId === 'tab-1'" :disabled="disabledIds.includes('tab-1')">
+      <p>
+        29 Arlington Avenue is a house in Islington, London. Douglas Adams shared the house for a time
+        with Jonny Brock and Clare Gorst. It is mentioned in the dedication of The Hitchhiker's Guide to
+        the Galaxy, which is dedicated to the "Arlingtonians for tea, sympathy, and a sofa."
+      </p>
+    </cv-tab>
+    <cv-tab id="tab-2" label="Bar" :selected="selectedId === 'tab-2'" :disabled="disabledIds.includes('tab-2')">
+      <p>
+        The Old Pink Dog Bar was the bar in Han Dold City that Ford Prefect was in when he discovered
+        that his Guide had his full entry on Earth on it.
+      </p>
+    </cv-tab>
+    <cv-tab id="tab-3" label="Reach" :selected="selectedId === 'tab-3'" :disabled="disabledIds.includes('tab-3')">
+      <p>
+        The Third Reach of the Unknown is what might be loosely described as a "place" which exists only
+        under high improbability conditions and was created on the starship Heart of Gold due to the
+        Infinite Improbability Drive. During Arthur Dent and Ford Prefect's first trip on board the Heart
+        of Gold they witnessed many strange things happening.
+      </p>
+    </cv-tab>
+    <cv-tab id="tab-4" label="Zone" :selected="selectedId === 'tab-4'" :disabled="disabledIds.includes('tab-4')">
+      <p>Plural Zones are instabilities in space-time.
+        The effects of the Plural Zones on the beings and objects that inhabit and originate from them,
+        for the most part, remain largely unnoticed.
+      </p>
+    </cv-tab>
+    <cv-tab id="tab-5" label="Planet" :selected="selectedId === 'tab-5'" :disabled="disabledIds.includes('tab-5')">
+      <p>
+        Ursa Minor Beta is a rich and sunny planet and one of the most popular holiday destinations in
+        the Universe. It is always Saturday afternoon on this planet, just before the beach bars close -
+        except for the few places where it is eternally Saturday evening. This is why the locals always
+        invite visitors to "Have a nice diurnal anomaly!"
+        <a target='_blank' href='https://hitchhikers.fandom.com/wiki/Main_Page'>credits</a>
+      </p>
+    </cv-tab>
+</cv-tabs>
+`;
+const skeletonTemplate = `<cv-tabs-skeleton></cv-tabs-skeleton>`;
+
+# CvTabs
+
+Migration notes:
+
+- The property `leftOverflowIconButtonProps` is deprecated. It does not seem to be used at all in Vue 2 and thus does
+  nothing when specified.
+- The property `rightOverflowIconButtonProps` is deprecated. It does not seem to be used at all in Vue 2 and thus does
+  nothing when specified.
+- The property `scrollIntoView` is deprecated. It does not seem to be used at all in Vue 2 and thus does nothing when
+  specified.
+- The `container` property in Vue 2 acts differently as compared to the React story book. Here the class/styles are
+  applied as is shown in the React storybook. Also note that the background color applied when this property is
+  specified is not from Carbon. The selector `.bx--tabs--container ~ div` can be used to set the background color and
+  other properties but that is up to the user.
+- A new event emits `tab-selected-id` with the selected tab's id attribute.
+
+## Mobile
+
+In my opinion, this component is not suitable for mobile formats. The navigation of the tabs becomes awkward on smaller
+screens, and so I suggest using a different component for mobile cases.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'leftOverflowIconButtonProps',
+          'rightOverflowIconButtonProps',
+          'scrollIntoView',
+          'tab-selected',
+          'tab-selected-id',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      selectedId: '',
+      disabledIds: [],
+    }}
+    argTypes={{
+      selectedId: {
+        control: 'select',
+        default: '',
+        options: ['', 'tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+      disabledIds: {
+        control: 'multi-select',
+        options: ['tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# Skeleton
+
+<Canvas>
+  <Story
+    name="skeleton"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'leftOverflowIconButtonProps',
+          'rightOverflowIconButtonProps',
+          'scrollIntoView',
+          'tab-selected',
+          'tab-selected-id',
+          'container',
+          'noDefaultToFirst',
+        ],
+      },
+      docs: { source: { code: skeletonTemplate } },
+    }}
+    args={{
+      template: skeletonTemplate,
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvTabs/CvTabs.vue

@@ -0,0 +1,406 @@
+<!--suppress ES6PreferShortImport -->
+<template>
+  <div class="cv-tabs" style="width: 100%">
+    <div
+      data-tabs
+      :class="[
+        `cv-tab ${carbonPrefix}--tabs--scrollable`,
+        {
+          [`${carbonPrefix}--tabs--container`]: container,
+          [`${carbonPrefix}--tabs--scrollable--container`]: container,
+        },
+      ]"
+      role="navigation"
+      v-bind="$attrs"
+      @keydown.right.prevent.stop="onRight"
+      @keydown.left.prevent.stop="onLeft"
+    >
+      <button
+        aria-hidden="true"
+        aria-label="scroll left"
+        :class="[
+          {
+            [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
+            [`${carbonPrefix}--tab--overflow-nav-button--hidden`]:
+              leftOverflowNavButtonHidden,
+          },
+        ]"
+        @click.stop.prevent="e => onOverflowClick(e, { direction: -1 })"
+        @mousedown.stop.prevent="e => onOverflowMouseDown(e, { direction: -1 })"
+        @mouseup.stop.prevent="onOverflowMouseUp"
+        tabIndex="-1"
+        type="button"
+        ref="elLeftOverflow"
+      >
+        <ChevronLeft16 />
+      </button>
+      <div
+        v-if="!leftOverflowNavButtonHidden"
+        :class="`${carbonPrefix}--tabs__overflow-indicator--left`"
+      />
+
+      <ul
+        :class="`${carbonPrefix}--tabs--scrollable__nav`"
+        role="tablist"
+        ref="elTabList"
+      >
+        <li
+          v-for="tab in tabs"
+          :key="tab.uid"
+          :class="[
+            `cv-tabs-button  ${carbonPrefix}--tabs--scrollable__nav-item`,
+            {
+              [`${carbonPrefix}--tabs__nav-item--selected`]:
+                selectedId === tab.uid,
+              [`${carbonPrefix}--tabs__nav-item--disabled`]: disabledTabs.has(
+                tab.uid
+              ),
+              // TODO: remove scrollable in next major release
+              [`${carbonPrefix}--tabs--scrollable__nav-item--disabled`]:
+                disabledTabs.has(tab.uid),
+              [`${carbonPrefix}--tabs--scrollable__nav-item--selected`]:
+                selectedId === tab.uid,
+            },
+          ]"
+          role="presentation"
+        >
+          <button
+            :class="`${carbonPrefix}--tabs--scrollable__nav-link`"
+            role="tab"
+            :aria-controls="tab.uid"
+            :aria-disabled="disabledTabs.has(tab.uid)"
+            :aria-selected="selectedId === tab.uid"
+            :id="`${tab.uid}-link`"
+            @click="onTabClick(tab.uid)"
+            ref="elLink"
+            :tabindex="selectedId === tab.uid ? 0 : -1"
+            type="button"
+          >
+            {{ tab.label }}
+          </button>
+        </li>
+      </ul>
+
+      <div
+        v-if="!rightOverflowNavButtonHidden"
+        :class="`${carbonPrefix}--tabs__overflow-indicator--right`"
+      />
+      <button
+        aria-hidden="true"
+        aria-label="scroll right"
+        :class="[
+          {
+            [`${carbonPrefix}--tab--overflow-nav-button`]: horizontalOverflow,
+            [`${carbonPrefix}--tab--overflow-nav-button--hidden`]:
+              rightOverflowNavButtonHidden,
+          },
+        ]"
+        @click="e => onOverflowClick(e, { direction: 1 })"
+        @mousedown="e => onOverflowMouseDown(e, { direction: 1 })"
+        @mouseup="onOverflowMouseUp"
+        tabIndex="-1"
+        type="button"
+        ref="elRightOverflow"
+      >
+        <ChevronRight16 />
+      </button>
+    </div>
+    <div class="cv-tabs__panels">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { ChevronLeft16, ChevronRight16 } from '@carbon/icons-vue';
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  provide,
+  ref,
+  watch,
+} from 'vue';
+
+const OVERFLOW_BUTTON_OFFSET = 40;
+
+const props = defineProps({
+  /**
+   * Changes the look of the tabs themselves. Does NOT change the styles of the tab content.
+   */
+  container: { type: Boolean, default: false },
+  /**
+   * @deprecated not used in component
+   */
+  leftOverflowIconButtonProps: Object,
+  /**
+   * This is an edge use case. By default, if no tab is explicitly selected, the first non-disabled tab is selected.
+   */
+  noDefaultToFirst: { type: Boolean, default: false },
+  /**
+   * @deprecated not used in component
+   */
+  rightOverflowIconButtonProps: Object,
+  /**
+   * @deprecated not used in component
+   */
+  scrollIntoView: { type: Boolean, default: true },
+});
+const emit = defineEmits(['tab-selected', 'tab-selected-id']);
+
+const selectedId = ref('');
+provide('tab-selected', selectedId);
+/**
+ * @typedef TabData
+ * @type {string} uid
+ * @type {string} label
+ */
+
+/**
+ * @type {Ref<UnwrapRef<Array<TabData>>>}
+ */
+const tabs = ref([]);
+provide('tab-data', tabs);
+const disabledTabs = ref(new Set());
+provide('tab-disabled-ids', disabledTabs);
+const horizontalOverflow = ref(false);
+const leftOverflowNavButtonHidden = ref(false);
+const rightOverflowNavButtonHidden = ref(false);
+
+function maybeSelectFirstTab() {
+  // Maybe user does not want something selected by default? Seems like this is an odd use case.
+  if (props.noDefaultToFirst) return;
+
+  // is something selected?
+  if (tabs.value.find(tab => tab.uid === selectedId.value)) return;
+
+  // Find the first not-disabled tab
+  const index = tabs.value?.findIndex(
+    tabData => !disabledTabs.value?.has(tabData.uid)
+  );
+
+  // if there is a non-disabled tab set that one as selected
+  if (index > -1) selectedId.value = tabs.value[index].uid;
+}
+onMounted(maybeSelectFirstTab);
+watch(tabs, maybeSelectFirstTab);
+watch(selectedId, () => {
+  nextTick(() => {
+    doTabClick(selectedId.value);
+  });
+});
+const elTabList = ref(null);
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+  elTabList.value?.addEventListener('scroll', checkScroll);
+  checkScroll();
+});
+
+onUpdated(() => {
+  checkScroll();
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  elTabList.value?.removeEventListener('scroll', checkScroll);
+});
+
+const skipScroll = ref(false);
+const elLink = ref(null);
+function checkScroll() {
+  if (!skipScroll.value) {
+    if (elTabList.value) {
+      horizontalOverflow.value =
+        elTabList.value?.scrollWidth > elTabList.value?.clientWidth;
+
+      if (elLink.value && elLink.value.length > 0) {
+        leftOverflowNavButtonHidden.value = elTabList.value?.scrollLeft <= 0;
+        rightOverflowNavButtonHidden.value =
+          elTabList.value?.scrollLeft + elTabList.value?.clientWidth >=
+          elTabList.value?.scrollWidth;
+      }
+    }
+  }
+}
+function handleResize() {
+  checkScroll();
+}
+
+function doScrollIntoView(index) {
+  const tab = elLink.value[index];
+  /**
+   * HTMLElement
+   * @type {HTMLElement|null}
+   */
+  const scrollContainer =
+    tab && tab.parentNode ? tab.parentNode.parentNode : null;
+  let newScrollLeft;
+
+  if (tab && scrollContainer) {
+    const scrollLeft = scrollContainer.scrollLeft;
+    const tabLeft = tab.offsetLeft - scrollContainer.offsetLeft;
+
+    if (index === 0) {
+      newScrollLeft = 0;
+    } else if (index === elLink.value.length - 1) {
+      newScrollLeft = scrollContainer.scrollWidth - scrollContainer.offsetWidth;
+    } else if (tabLeft < scrollLeft) {
+      newScrollLeft = tabLeft;
+    } else {
+      const rightOfTab =
+        tab.offsetLeft - scrollContainer.offsetLeft + tab.offsetWidth;
+      if (rightOfTab > scrollContainer.offsetWidth + scrollLeft) {
+        newScrollLeft = rightOfTab - scrollContainer.offsetWidth;
+
+        if (!rightOverflowNavButtonHidden.value) {
+          newScrollLeft += OVERFLOW_BUTTON_OFFSET;
+        }
+      }
+    }
+  }
+
+  if (newScrollLeft !== undefined) {
+    skipScroll.value = true;
+    leftOverflowNavButtonHidden.value = newScrollLeft <= 0;
+    rightOverflowNavButtonHidden.value =
+      newScrollLeft + elTabList.value?.clientWidth >=
+      elTabList.value?.scrollWidth;
+
+    nextTick(() => {
+      // allow left and right nav hide to propagate before setting scroll
+      scrollContainer.scrollLeft = newScrollLeft;
+      skipScroll.value = false;
+    });
+  }
+}
+function doTabClick(id, setFocus = false) {
+  if (!disabledTabs.value.has(id)) {
+    if (selectedId.value !== id) {
+      let newIndex = -1;
+
+      selectedId.value = id;
+
+      for (let i = 0; i < tabs.value.length; i++) {
+        if (tabs.value[i].uid === id) {
+          doScrollIntoView(i, setFocus);
+          if (setFocus) {
+            nextTick(() => {
+              elLink.value[i].focus();
+            });
+          }
+          newIndex = i;
+        }
+      }
+
+      emit('tab-selected', newIndex);
+      emit('tab-selected-id', tabs.value[newIndex].uid);
+    }
+  }
+}
+function onTabClick(id) {
+  doTabClick(id);
+}
+function isAllTabsDisabled() {
+  return disabledTabs.value.size === tabs.value.length;
+}
+function onLeft() {
+  if (isAllTabsDisabled()) {
+    return;
+  }
+
+  const curIndex = move(selectedId.value, false);
+  const newId = tabs.value[curIndex].uid;
+
+  doTabClick(newId, true);
+}
+function move(id, next) {
+  let newIndex;
+  let newId;
+
+  newIndex = tabs.value.findIndex(tab => tab.uid === id);
+
+  if (newIndex > -1) {
+    newIndex = next ? newIndex + 1 : newIndex - 1;
+  }
+  if (newIndex < 0 || newIndex >= tabs.value.length) {
+    newIndex = next ? 0 : tabs.value.length - 1;
+  }
+
+  newId = tabs.value[newIndex].uid;
+  while (newId === selectedId.value || disabledTabs.value.has(newId)) {
+    if (newIndex > -1) {
+      newIndex = next ? newIndex + 1 : newIndex - 1;
+    }
+    if (newIndex < 0 || newIndex >= tabs.value.length) {
+      newIndex = next ? 0 : tabs.value.length - 1;
+    }
+    newId = tabs.value[newIndex].uid;
+  }
+
+  return newIndex;
+}
+function onRight() {
+  if (isAllTabsDisabled()) {
+    return;
+  }
+
+  const curIndex = move(selectedId.value, true);
+  const newId = tabs.value[curIndex].uid;
+
+  doTabClick(newId, true);
+}
+const elRightOverflow = ref(null);
+const elLeftOverflow = ref(null);
+function onOverflowClick(e, { direction, multiplier = 10 }) {
+  const scrollLeft = elTabList.value?.scrollLeft;
+
+  // account for overflow button appearing and causing tablist width change
+  if (elTabList.value && direction === 1 && !scrollLeft) {
+    elTabList.value.scrollLeft += OVERFLOW_BUTTON_OFFSET;
+  }
+
+  if (elTabList.value) elTabList.value.scrollLeft += direction * multiplier;
+
+  if (elTabList.value && leftEdgeReached(direction)) {
+    elTabList.value.scrollLeft = 0;
+  }
+
+  // account for reaching left edge
+  if (leftEdgeReached(direction)) {
+    elRightOverflow.value?.focus();
+  }
+  if (rightEdgeReached(direction)) {
+    elLeftOverflow.value?.focus();
+  }
+}
+let overflowNavInterval;
+function onOverflowMouseDown(e, { direction }) {
+  // disregard mouse buttons aside from LMB
+  if (e.buttons !== 1) {
+    return;
+  }
+
+  if (overflowNavInterval) clearInterval(overflowNavInterval);
+  overflowNavInterval = setInterval(() => {
+    if (leftEdgeReached(direction) || rightEdgeReached(direction)) {
+      clearInterval(overflowNavInterval);
+    }
+
+    onOverflowClick(e, { direction });
+  });
+}
+function onOverflowMouseUp() {
+  clearInterval(overflowNavInterval);
+}
+function leftEdgeReached(direction) {
+  const scrollLeft = elTabList.value?.scrollLeft || Number.MIN_VALUE;
+
+  return direction === -1 && scrollLeft <= OVERFLOW_BUTTON_OFFSET;
+}
+function rightEdgeReached(direction) {
+  if (!elTabList.value) return false;
+  const { clientWidth, scrollLeft, scrollWidth } = elTabList.value;
+  return direction === 1 && scrollLeft + clientWidth >= scrollWidth;
+}
+</script>

package/src/components/CvTabs/CvTabsSkeleton.vue

@@ -0,0 +1,24 @@
+<!--suppress ALL -->
+<template>
+  <div
+    :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton ${carbonPrefix}--tabs--scrollable`"
+  >
+    <ul :class="`${carbonPrefix}--tabs--scrollable__nav`">
+      <li
+        v-for="index in tabCount"
+        :key="index"
+        :class="`${carbonPrefix}--tabs--scrollable__nav-item`"
+      >
+        <div :class="`${carbonPrefix}--tabs__nav-link`"><span></span></div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+
+defineProps({
+  tabCount: { type: Number, default: 5 },
+});
+</script>

package/src/components/CvTabs/_SbContainer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="sb-tabs-container">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup></script>
+
+<style>
+.bx--tabs--container ~ div {
+  min-height: 320px;
+  background-color: #e8daff;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.bx--tabs--container ~ .cv-tabs__panels:after {
+  content: 'Container style is not from carbon. This example uses ".bx--tabs--container ~ div" selector to add the "#e8daff" background color.';
+  opacity: 0.3;
+  font-size: 30pt;
+  z-index: -10;
+}
+</style>

package/src/components/CvTabs/index.js

@@ -0,0 +1,5 @@
+import CvTabs from './CvTabs.vue';
+import CvTab from './CvTab.vue';
+import CvTabsSkeleton from './CvTabsSkeleton.vue';
+
+export { CvTab, CvTabs, CvTabsSkeleton };

package/src/components/CvToggle/CvToggle-Skeleton.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :class="`cv-toggle ${carbonPrefix}--form-item`" :id="cvId">
+    <label
+      :class="`${carbonPrefix}--toggle__label ${carbonPrefix}--skeleton`"
+      :for="cvId"
+      :aria-label="label ? 'Toggle is loading' : label"
+    >
+      <span :class="`${carbonPrefix}--toggle__label-text`" />
+      <span :class="`${carbonPrefix}--toggle__text--left`" />
+      <span :class="`${carbonPrefix}--toggle__appearance`" />
+      <span :class="`${carbonPrefix}--toggle__text--right`" />
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: 'Toggle is loading',
+    ...propsCvId,
+  },
+});
+
+const cvId = useCvId(props);
+</script>