@carbon/vue 2.45.0 → 3.0.4-alpha.0

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

@@ -0,0 +1,119 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CvOverflowMenu } from '.';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+import CvOverflowMenuItem from './CvOverflowMenuItem.vue';
+import { Meter20 as MeterIcon  } from '@carbon/icons-vue'
+
+<Meta title={`${sbCompPrefix}/CvOverflowMenu`} component={CvOverflowMenu} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvOverflowMenu,
+    CvOverflowMenuItem,
+    MeterIcon,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+      onChange: action('change', {clearOnStoryChange:true}),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="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>
+`;
+const slotsTemplate = `
+<cv-overflow-menu
+  :flip-menu="flipMenu"
+  :up="up"
+  :offset="offset"
+  :label="label"
+  :tip-position="tipPosition"
+  :tip-alignment="tipAlignment"
+  @change=onChange>
+  <template v-slot:trigger><meter-icon/></template>
+  <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>
+`;
+
+
+# CvOverflowMenu
+
+**Migration notes:**
+
+- The component now emits the "change" event when an item in the menu is clicked
+- The `flipMenu` parameter is supported but does not appear to work in Vue 2 or here
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      label: 'Overflow menu',
+      flipMenu: undefined,
+      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>
+
+Use slots for more control over the display.
+
+<Canvas>
+  <Story
+    name="Slots"
+    parameters={{
+      controls: {
+        exclude: ['default', 'template', 'trigger', 'change'],
+      },
+      docs: { source: { code: slotsTemplate } },
+    }}
+    args={{
+      template: slotsTemplate,
+      label: 'Overflow menu',
+      flipMenu: undefined,
+      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>

package/src/components/CvOverflowMenu/CvOverflowMenu.vue

@@ -0,0 +1,283 @@
+<template>
+  <div
+    data-overflow-menu
+    :class="`cv-overflow-menu ${carbonPrefix}--overflow-menu`"
+    :id="uid"
+    ref="el"
+  >
+    <button
+      :class="[
+        `${carbonPrefix}--overflow-menu__trigger ${carbonPrefix}--tooltip__trigger`,
+        `${carbonPrefix}--tooltip--a11y`,
+        {
+          [`${carbonPrefix}--tooltip--${tipPosition}`]: label,
+          [`${carbonPrefix}--tooltip--align-${tipAlignment}`]: label,
+          [`${carbonPrefix}--overflow-menu--open`]: open,
+        },
+      ]"
+      aria-haspopup="true"
+      type="button"
+      :aria-expanded="open ? 'true' : 'false'"
+      :aria-controls="`${uid}-menu`"
+      :aria-labelledby="`${uid}`"
+      :id="`${uid}-trigger`"
+      ref="trigger"
+      @click="doToggle"
+      @keydown.space.prevent
+      @keyup.space.prevent="doToggle"
+      @keydown.enter.prevent="doToggle"
+      @keydown.tab="onOverflowMenuTab"
+    >
+      <span :class="`${carbonPrefix}--assistive-text`" v-if="label">{{
+        label
+      }}</span>
+
+      <slot name="trigger">
+        <OverflowMenuVertical16
+          :class="`${carbonPrefix}--overflow-menu__icon`"
+        />
+      </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"
+    >
+      <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>
+  </div>
+</template>
+
+<script setup>
+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';
+const props = defineProps({
+  /**
+   * assistive text shown as a tooltip
+   */
+  label: String,
+  /**
+   * moves caret from right to left of popup menu
+   */
+  flipMenu: { type: Boolean, default: false },
+  /**
+   * The menu will open upwards instead of the default
+   */
+  up: { type: Boolean, default: false },
+  /**
+   * optional offset setting for left and top position.
+   * e.g. { left: 0, top: 200 }
+   */
+  offset: {
+    type: Object,
+    validator(value) {
+      return value && value.left !== undefined && value.top !== undefined;
+      // value.hasOwnProperty('left') && value.hasOwnProperty('top');
+    },
+  },
+  /**
+   * top, left, right(default) or bottom
+   */
+  tipPosition: {
+    type: String,
+    default: 'right',
+    validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
+  },
+  /**
+   * start, center(default) or end
+   */
+  tipAlignment: {
+    type: String,
+    default: 'center',
+    validator: val => ['start', 'center', 'end'].includes(val),
+  },
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+const open = ref(false);
+const left = ref(-9999); // offscreen,
+const top = ref(0);
+
+const offsetLeft = computed(() => {
+  return props.offset ? props.offset.left : 0;
+});
+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);
+});
+
+const trigger = ref(null);
+const popup = ref(null);
+function checkFocusOut(ev) {
+  if (open.value) {
+    if (
+      ev.relatedTarget === null ||
+      !(
+        trigger.value === ev.relatedTarget ||
+        popup.value.contains(ev.relatedTarget)
+      )
+    ) {
+      open.value = false;
+      positionListen(false);
+
+      // DO NOT FOCUS if relatedTarget is not null, as focus is going somewhere
+      if (!ev.relatedTarget) {
+        nextTick(() => {
+          doFocus();
+        });
+      }
+    }
+  }
+}
+
+const emit = defineEmits(['change']);
+function menuItemClick(value) {
+  emit('change', `${value}`);
+  open.value = false;
+  positionListen(false);
+  nextTick(() => {
+    doFocus();
+  });
+}
+function doClose() {
+  open.value = false;
+  positionListen(false);
+}
+function positionListen(on) {
+  if (on) {
+    window.addEventListener('scroll', positionMenu);
+    window.addEventListener('resize', positionMenu);
+  } else {
+    window.removeEventListener('scroll', positionMenu);
+    window.removeEventListener('resize', positionMenu);
+  }
+}
+
+const el = ref(null);
+async function positionMenu() {
+  if (open.value) {
+    const menuPosition = el.value.getBoundingClientRect();
+    return nextTick(() => {
+      const pixelsScrolledX = window.scrollX || window.pageXOffset;
+      const pixelsScrolledY = window.scrollY || window.pageYOffset;
+      if (props.flipMenu) {
+        left.value =
+          menuPosition.left +
+          offsetLeft.value -
+          popup.value.offsetWidth +
+          el.value.offsetWidth +
+          pixelsScrolledX;
+      } else {
+        left.value = menuPosition.left + offsetLeft.value + pixelsScrolledX;
+      }
+      if (props.up) {
+        top.value =
+          menuPosition.top +
+          offsetTop.value -
+          popup.value.offsetHeight +
+          pixelsScrolledY;
+      } else {
+        top.value = menuPosition.left + offsetLeft.value + pixelsScrolledX;
+      }
+    });
+  }
+}
+function doFocus() {
+  let focusOn;
+  if (open.value) {
+    // set focus somewhere sensible, first focusable item or leave on overflow
+    let focusOnList = popup.value.querySelectorAll(
+      `.${carbonPrefix}--overflow-menu-options__btn, button, link, input, textarea, [contentEditable="true"], [tabindex]`
+    );
+    for (let tryOn of focusOnList) {
+      if (
+        // don't focus on before after or something that can't be tabbed to
+        !(
+          tryOn.classList.contains('cv-overflow-menu__before-content') ||
+          tryOn.classList.contains('cv-overflow-menu__after-content') ||
+          tryOn.tabindex < 0
+        )
+      ) {
+        focusOn = tryOn;
+        break;
+      }
+    }
+    if (!focusOn) {
+      focusOn = el.value;
+    }
+  } else {
+    focusOn = el.value;
+  }
+  focusOn.focus();
+}
+async function doToggle() {
+  open.value = !open.value;
+
+  // await positionMenu otherwise it can race doFocus.
+  // On initial open the menu is positioned 0,0 causing a jump
+  await positionMenu();
+  positionListen(open.value);
+  await nextTick(() => {
+    doFocus();
+  });
+}
+const beforeContent = ref(null);
+function onOverflowMenuTab(ev) {
+  if (!ev.shiftKey) {
+    // move focus before content tab press
+    beforeContent.value.focus();
+  }
+}
+function focusBeforeContent(ev) {
+  if (popup.value.contains(ev.relatedTarget)) {
+    trigger.value.focus();
+    open.value = false;
+  }
+}
+function focusAfterContent() {
+  trigger.value.focus();
+  open.value = false;
+}
+function preventFocusOut() {
+  // This is here to prevent focus being lost if the user clicks on the contents of the interactive tool tip
+}
+</script>

package/src/components/{cv-overflow-menu/cv-overflow-menu-item.vue → CvOverflowMenu/CvOverflowMenuItem.vue}

@@ -8,13 +8,13 @@
       },
     ]"
     @keydown.esc.prevent="onEsc"
+    ref="el"
   >
     <button
       type="button"
       :class="`${carbonPrefix}--overflow-menu-options__btn`"
       :data-floating-menu-primary-focus="primaryFocus"
       :disabled="disabled"
-      v-on="$listeners"
       @click="onClick"
     >
       <span :class="`${carbonPrefix}--overflow-menu-options__option-content`">
@@ -24,23 +24,29 @@
   </li>
 </template>
 
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvOverflowMenuItem',
-  mixins: [carbonPrefixMixin],
-  props: {
-    primaryFocus: Boolean,
-    disabled: Boolean,
-    danger: Boolean,
-  },
-  methods: {
-    onClick() {
-      this.$parent.$emit('cv:click');
-    },
-    onEsc() {
-      this.$parent.$emit('cv:close');
-    },
-  },
-};
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { onMounted, ref, useAttrs } from 'vue';
+import { getBus } from '../../global/component-utils/event-bus';
+
+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 attrs = useAttrs();
+function onClick() {
+  bus?.emit('cv:click', attrs.value);
+}
+function onEsc() {
+  bus?.emit('cv:close');
+}
 </script>

package/src/components/CvOverflowMenu/index.js

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

package/src/components/CvPagination/CvPagination.stories.mdx

@@ -0,0 +1,160 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CvPagination } from '.';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+
+<Meta title={`${sbCompPrefix}/CvPagination`} component={CvPagination} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvPagination,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+      onChange: action('change'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+  <cv-pagination
+    @change="onChange"
+    :backward-text="backwardText"
+    :forward-text="forwardText"
+    :page-number-label="pageNumberLabel"
+    :page-sizes-label="pageSizesLabel"
+    :number-of-items="numberOfItems"
+    :actual-items-on-page="actualItemsOnPage"
+    :page="page"
+    :page-sizes="pageSizes"
+    :backwards-button-disabled="backwardsButtonDisabled"
+    :forwards-button-disabled="forwardsButtonDisabled">
+  </cv-pagination>
+`;
+const slotsTemplate = `
+<cv-pagination
+  @change="onChange"
+  :backward-text="backwardText"
+  :forward-text="forwardText"
+  :page-number-label="pageNumberLabel"
+  :page-sizes-label="pageSizesLabel"
+  :number-of-items="numberOfItems"
+  :actual-items-on-page="actualItemsOnPage"
+  :page="page"
+  :page-sizes="pageSizes"
+  :backwards-button-disabled="backwardsButtonDisabled"
+  :forwards-button-disabled="forwardsButtonDisabled">
+  <template v-slot:range-text="{scope}">
+    <span v-if="locale === 'en'">From {{scope.start}} to {{scope.end}} out of {{scope.items}}</span>
+    <span v-else>Del {{scope.start}} al {{scope.end}} de {{scope.items}}</span>
+  </template>
+  <template v-slot:of-n-pages="{scope}">
+    <span v-if="locale === 'en'"> out of {{scope.pages}} pages</span>
+    <span v-else> von {{scope.pages}} Seiten</span>
+  </template>
+  </cv-pagination>
+`;
+
+# CvPagination
+
+Migration notes:
+- If you specify `pageNumberLabel` a trailing colon (:) is no longer automatically appended to the text
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'data',
+          'range-text',
+          'change',
+          'of-n-pages',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      data: {},
+      template: defaultTemplate,
+      backwardText: undefined,
+      forwardText: undefined,
+      pageNumberLabel: undefined,
+      pageSizesLabel: undefined,
+      numberOfItems: 103,
+      page: 2,
+      pageSizes: [
+        10,
+        {
+          value: 20,
+          selected: true,
+        },
+        30,
+        40,
+        50,
+      ],
+      backwardsButtonDisabled: false,
+      forwardsButtonDisabled: false,
+      actualItemsOnPage: Infinity,
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+Use slots to set the range text and "of n pages" text. A good use case for this is internationalization.
+
+<Canvas>
+  <Story
+    name="Slots"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'data',
+          'change',
+          'of-n-pages',
+        ],
+      },
+      docs: { source: { code: slotsTemplate } },
+    }}
+    args={{
+      data: {},
+      template: slotsTemplate,
+      backwardText: undefined,
+      forwardText: undefined,
+      pageNumberLabel: undefined,
+      pageSizesLabel: undefined,
+      numberOfItems: 103,
+      page: 2,
+      pageSizes: [
+        10,
+        {
+          value: 20,
+          selected: true,
+        },
+        30,
+        40,
+        50,
+      ],
+      backwardsButtonDisabled: false,
+      forwardsButtonDisabled: false,
+      actualItemsOnPage: Infinity,
+      locale: 'en'
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>