@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvPagination/CvPagination.vue

@@ -0,0 +1,246 @@
+<template>
+  <div :class="`cv-pagination ${carbonPrefix}--pagination`" data-pagination>
+    <div :class="`${carbonPrefix}--pagination__left`">
+      <cv-select
+        :class="`${carbonPrefix}--select__item-count`"
+        :label="pageSizesLabel"
+        inline
+        ref="pageSizeSelect"
+        @change="onPageSizeChange"
+        :value="`${pageSizeValue}`"
+      >
+        <cv-select-option
+          v-for="(size, index) in pageSizes"
+          :key="index"
+          :value="`${size.value ? size.value : size}`"
+          >{{
+            size.label ? size.label : size.value ? size.value : size
+          }}</cv-select-option
+        >
+      </cv-select>
+
+      <span :class="`${carbonPrefix}--pagination__text`">
+        <span data-displayed-item-range>
+          <slot name="range-text" v-bind:scope="rangeProps">{{
+            rangeText
+          }}</slot>
+        </span>
+      </span>
+    </div>
+
+    <div :class="`${carbonPrefix}--pagination__right`">
+      <cv-select
+        :class="`${carbonPrefix}--select__page-number`"
+        :label="pageNumberLabel"
+        inline
+        hideLabel
+        ref="pageSelect"
+        @change="onPageChange"
+        :value="`${pageValue}`"
+        v-if="numberOfItems !== Infinity"
+      >
+        <cv-select-option
+          v-for="pageNumber in pages"
+          :key="pageNumber"
+          :value="`${pageNumber}`"
+          :selected="pageValue === pageNumber"
+          >{{ pageNumber }}</cv-select-option
+        >
+      </cv-select>
+      <span :class="`${carbonPrefix}--pagination__text`">
+        <slot name="of-n-pages" v-bind:scope="ofNPagesProps">{{
+          pageOfPages
+        }}</slot>
+      </span>
+
+      <button
+        type="button"
+        :class="[
+          `${carbonPrefix}--pagination__button ${carbonPrefix}--pagination__button--backward`,
+          { [`${carbonPrefix}--pagination__button--no-index`]: noWayBack },
+        ]"
+        data-page-backward
+        :aria-label="backwardText"
+        @click="onPrevPage"
+        :disabled="noWayBack"
+      >
+        <CaretLeft16 :class="`${carbonPrefix}--pagination__button-icon`" />
+      </button>
+
+      <button
+        type="button"
+        :class="[
+          `${carbonPrefix}--pagination__button ${carbonPrefix}--pagination__button--forward`,
+          { [`${carbonPrefix}--pagination__button--no-index`]: noWayForward },
+        ]"
+        data-page-forward
+        :aria-label="forwardText"
+        @click="onNextPage"
+        :disabled="noWayForward"
+      >
+        <CaretRight16 :class="`${carbonPrefix}--pagination__button-icon`" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { CaretLeft16, CaretRight16 } from '@carbon/icons-vue';
+import CvSelect from '../CvSelect';
+import CvSelectOption from '../CvSelect/CvSelectOption.vue';
+
+const emit = defineEmits(['change']);
+
+const props = defineProps({
+  backwardsButtonDisabled: { type: Boolean, default: false },
+  forwardsButtonDisabled: { type: Boolean, default: false },
+  backwardText: { type: String, default: 'Prev page' },
+  forwardText: { type: String, default: 'Next page' },
+  pageNumberLabel: { type: String, default: 'Page number:' },
+  pageSizesLabel: { type: String, default: 'Items per page:' },
+  numberOfItems: { type: Number, default: Infinity },
+  actualItemsOnPage: { type: Number, default: Infinity },
+  page: Number,
+  pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
+});
+
+const firstItem = ref(1);
+const pageValue = ref(1);
+const pageSizeValue = ref(10);
+const pageCount = ref(1);
+const pages = ref([1]);
+
+const noWayBack = computed(() => {
+  return props.backwardsButtonDisabled || pageValue.value === 1;
+});
+const noWayForward = computed(() => {
+  return props.forwardsButtonDisabled || pageValue.value === pageCount.value;
+});
+const ofNPagesProps = computed(() => {
+  return {
+    pages: pageCount.value,
+    items: props.numberOfItems,
+  };
+});
+const pageOfPages = computed(() => {
+  const { pages, items } = ofNPagesProps.value;
+  if (items !== Infinity) {
+    return `of ${pages} pages`;
+  }
+  return `Page ${pageValue.value}`;
+});
+const rangeProps = computed(() => {
+  return {
+    start: Math.min(firstItem.value, props.numberOfItems),
+    end: Math.min(
+      firstItem.value +
+        Math.min(pageSizeValue.value, props.actualItemsOnPage) -
+        1,
+      props.numberOfItems
+    ),
+    items: props.numberOfItems,
+  };
+});
+const rangeText = computed(() => {
+  const { start, end, items } = rangeProps.value;
+
+  if (items !== Infinity) {
+    return `${start}-${end} of ${items} items`;
+  } else {
+    return `${start}-${end}`;
+  }
+});
+const internalValue = computed(() => {
+  return {
+    start: firstItem.value,
+    page: pageValue.value,
+    length: pageSizeValue.value,
+  };
+});
+
+onMounted(() => {
+  pageSizeValue.value = newPageSizeValue(props.pageSizes);
+  pageCount.value = newPageCount(props.numberOfItems, pageSizeValue.value);
+  pageValue.value = newPageValue(props.page, pageCount.value);
+  pages.value = newPagesArray(pageCount.value);
+  firstItem.value = newFirstItem(pageValue.value, pageSizeValue.value);
+  // always emit on mount
+  emit('change', internalValue.value);
+});
+
+function onPageChange(newVal) {
+  pageValue.value = parseInt(newVal, 10);
+  firstItem.value = newFirstItem(pageValue.value, pageSizeValue.value);
+  emit('change', internalValue.value);
+}
+watch(
+  () => props.numberOfItems,
+  () => onPageSizeChange(pageSizeValue.value)
+);
+function onPageSizeChange(newVal) {
+  pageSizeValue.value = parseInt(newVal, 10);
+  pageCount.value = newPageCount(props.numberOfItems, pageSizeValue.value);
+  pages.value = newPagesArray(pageCount.value);
+  // what page is firstItem on
+  nextTick(() => {
+    // setting pageValue immediately seems to cause a problem - test set pageSize to 40, page to 3, set pageSize to 10
+    // this previously resulted in 1 being set on Chrome (other browsers untested)
+    pageValue.value = Math.ceil(firstItem.value / pageSizeValue.value);
+    firstItem.value = newFirstItem(pageValue.value, pageSizeValue.value);
+    emit('change', internalValue.value);
+  });
+}
+function onPrevPage() {
+  if (pageValue.value > 1) {
+    pageValue.value--;
+    firstItem.value = newFirstItem(pageValue.value, pageSizeValue.value);
+    emit('change', internalValue.value);
+  }
+}
+function onNextPage() {
+  if (pageValue.value < pageCount.value) {
+    pageValue.value++;
+    firstItem.value = newFirstItem(pageValue.value, pageSizeValue.value);
+    emit('change', internalValue.value);
+  }
+}
+function newPageValue(page, lastPage) {
+  let result = 1;
+  if (page && page > 0) {
+    if (page <= lastPage) {
+      result = page;
+    } else {
+      result = lastPage;
+    }
+  }
+  return result;
+}
+function newPageSizeValue(pageSizes) {
+  // ensure nearest value to valid page size used.
+  for (let size of pageSizes) {
+    if (size.selected) {
+      return size.value;
+    }
+  }
+
+  let firstOne = pageSizes[0];
+  return firstOne.value ? firstOne.value : firstOne;
+}
+function newPageCount(numberOfItems, pageSizeValue) {
+  if (numberOfItems === Infinity) {
+    return Infinity;
+  }
+  return Math.max(1, Math.ceil(numberOfItems / pageSizeValue));
+}
+function newPagesArray(pageCount) {
+  if (pageCount === Infinity) {
+    return [];
+  }
+  return Array.from({ length: pageCount }, (val, key) => key + 1);
+}
+function newFirstItem(pageValue, pageSizeValue) {
+  return 1 + (pageValue - 1) * pageSizeValue;
+}
+</script>

package/src/components/CvPagination/index.js

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

package/src/components/CvSelect/CvSelect.stories.mdx

@@ -0,0 +1,227 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { CvSelect } from '.';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+import CvSelectOption from './CvSelectOption.vue';
+import CvSelectOptgroup from './CvSelectOptgroup.vue';
+import { PiggyBankSlot20 as PiggyBankSlot, TropicalWarning20 as TropicalWarning, FaceDizzy20 as FaceDizzy  } from '@carbon/icons-vue'
+import { ref } from "vue";
+const modelValue = ref('cv-select-option3');
+
+<Meta title={`${sbCompPrefix}/CvSelect`} component={CvSelect} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvSelect,
+    CvSelectOption,
+    CvSelectOptgroup,
+    PiggyBankSlot,
+    TropicalWarning,
+    FaceDizzy,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+      onChange: action('change'),
+      modelValue
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+<div>
+  <cv-select
+      @change="onChange"
+      :label="label"
+      :size="size"
+      :inline="inline"
+      :invalidMessage="invalidMessage"
+      :warningMessage="warningMessage"
+      :helperText="helperText"
+      :hideLabel="hideLabel"
+      :light="light"
+      :disabled="disabled"
+      >
+      <cv-select-option disabled selected hidden value="placeholder-item">Choose an option</cv-select-option>
+      <cv-select-option value="so-long">A much longer cv-select-option that is worth having around to check how text flows</cv-select-option>
+      <cv-select-optgroup label="Category 1">
+        <cv-select-option value="cv-select-option1">cv-select-option 1</cv-select-option>
+        <cv-select-option value="cv-select-option2">cv-select-option 2</cv-select-option>
+      </cv-select-optgroup>
+      <cv-select-optgroup label="Category 2">
+        <cv-select-option value="cv-select-option3">cv-select-option 3</cv-select-option>
+        <cv-select-option value="cv-select-option4">cv-select-option 4</cv-select-option>
+      </cv-select-optgroup>
+  </cv-select>
+</div>
+`;
+const defaultCode = defaultTemplate.replace("v-bind='args'", '');
+const slotsTemplate = `
+  <div>
+    <cv-select :label="label" :size="size" :light="light">
+    <template v-if="slotHelperText" v-slot:helper-text><piggy-bank-slot/> {{slotHelperText}}</template>
+    <template v-if="slotWarningText" v-slot:warning-message><tropical-warning/>{{slotWarningText}}</template>
+    <template v-if="slotInvalidText" v-slot:invalid-message><face-dizzy/>{{slotInvalidText}}</template>
+    <cv-select-option disabled="true" selected="true" hidden="true" value="placeholder-item">Choose an option</cv-select-option>
+    <cv-select-option value="good">Good</cv-select-option>
+    <cv-select-option value="bad">Bad</cv-select-option>
+    <cv-select-option value="ugly">Ugly</cv-select-option>
+    </cv-select>
+  </div>
+`;
+const vModelTemplate =  (defaultTemplate + `
+  <span>V-Model value</span>
+  <select v-model="modelValue">
+    <option value="cv-select-option1">cv-select-option 1</option>
+    <option value="cv-select-option2">cv-select-option 2</option>
+    <option value="cv-select-option3">cv-select-option 3</option>
+    <option value="cv-select-option4">cv-select-option 4</option>
+  </select>
+`).replace("<cv-select", `<cv-select v-model="modelValue"`)
+const vModelCode = defaultCode.replace("<cv-select", `<cv-select v-model="modelValue"`)
+
+# CvSelect
+
+**Migration notes:**
+
+- The `warningText` was not available in v2 but is added here to match what is currently shown in the react storybook.
+- The `size` property is also new and also added to match what is currently shown in the react storybook.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'invalid-message',
+          'helper-text',
+          'warning-message',
+          'data',
+          'change',
+          'input',
+          'multiple',
+        ],
+      },
+      docs: { source: { code: defaultCode } },
+    }}
+    args={{
+      data: {},
+      template: defaultTemplate,
+      label: 'Select label',
+      size: 'md',
+      inline: false,
+      invalidMessage: '',
+      warningMessage: '',
+      helperText: 'Optional helper text',
+      hideLabel: false,
+      light: false,
+      disabled: false,
+    }}
+    argTypes={{
+      light: { table: { category: 'props' } },
+      disabled: { table: { category: 'props' } },
+      size: { control: 'select', default: 'md', options: ['sm', 'md', 'lg'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+Use slots for help, invalid, and warning for more control over the display.
+
+<Canvas>
+  <Story
+    name="Slots"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'invalid-message',
+          'helper-text',
+          'warning-message',
+          'data',
+          'change',
+          'input',
+          'multiple',
+          'invalidMessage',
+          'warningMessage',
+          'helperText',
+          'formItem',
+          'inline',
+          'hideLabel',
+        ],
+      },
+      docs: { source: { code: slotsTemplate } },
+    }}
+    args={{
+      data: {},
+      template: slotsTemplate,
+      label: 'Select label',
+      size: 'md',
+      light: false,
+      slotHelperText: 'Slot helper text',
+      slotWarningText: '',
+      slotInvalidText: '',
+    }}
+    argTypes={{
+      slotHelperText: { table: { category: 'slots' } },
+      slotWarningText: { table: { category: 'slots' } },
+      slotInvalidText: { table: { category: 'slots' } },
+      light: { table: { category: 'props' } },
+      size: { control: 'select', default: 'md', options: ['sm', 'md', 'lg'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+Create a two-way binding on CvSelect with v-model.
+
+<Canvas>
+  <Story
+    name="v-model"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'invalid-message',
+          'helper-text',
+          'warning-message',
+          'data',
+          'change',
+          'input',
+          'multiple',
+        ],
+      },
+      docs: { source: { code: vModelCode } },
+    }}
+    args={{
+      data: {},
+      template: vModelTemplate,
+      label: 'Select label',
+      size: 'md',
+      inline: false,
+      invalidMessage: '',
+      warningMessage: '',
+      helperText: 'Optional helper text',
+      hideLabel: false,
+      light: false,
+      disabled: false,
+    }}
+    argTypes={{
+      light: { table: { category: 'props' } },
+      disabled: { table: { category: 'props' } },
+      size: { control: 'select', default: 'md', options: ['sm', 'md', 'lg'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvSelect/CvSelect.vue

@@ -0,0 +1,224 @@
+<template>
+  <cv-wrapper
+    :tag-type="formItem ? 'div' : ''"
+    :class="`cv-select ${carbonPrefix}--form-item`"
+    ref="el"
+  >
+    <div
+      :data-test="value"
+      :class="[
+        `${carbonPrefix}--select`,
+        {
+          'cv-select': !formItem,
+          [`${carbonPrefix}--select--inline`]: inline,
+          [`${carbonPrefix}--select--light`]: isLight,
+          [`${carbonPrefix}--select--invalid`]: isInvalid,
+          [`${carbonPrefix}--select--disabled`]: $attrs.disabled,
+          [`${carbonPrefix}--select--warning`]: !isInvalid && isWarning,
+        },
+      ]"
+    >
+      <label
+        :for="cvId"
+        :class="[
+          `${carbonPrefix}--label`,
+          {
+            [`${carbonPrefix}--visually-hidden`]: hideLabel,
+            [`${carbonPrefix}--label--disabled`]: $attrs.disabled,
+          },
+        ]"
+        >{{ label }}</label
+      >
+
+      <cv-wrapper
+        :tag-type="inline ? 'div' : ''"
+        :class="`${carbonPrefix}--select-input--inline__wrapper`"
+      >
+        <div
+          :class="`${carbonPrefix}--select-input__wrapper`"
+          :data-invalid="isInvalid ? true : undefined"
+        >
+          <select
+            v-bind="$attrs"
+            :id="cvId"
+            :class="[
+              `${carbonPrefix}--select-input`,
+              {
+                [`${carbonPrefix}--select-input--${size || 'md'}`]:
+                  size || 'md',
+              },
+            ]"
+            @change="onChange"
+            ref="select"
+            :value="internalValue"
+          >
+            <slot></slot>
+          </select>
+          <chevron-down :class="`${carbonPrefix}--select__arrow`" />
+          <warning-filled
+            v-if="isInvalid"
+            :class="`${carbonPrefix}--select__invalid-icon`"
+          />
+          <warning-alt-filled
+            v-else-if="isWarning"
+            :class="`${carbonPrefix}--select__invalid-icon ${carbonPrefix}--select__invalid-icon--warning`"
+          />
+        </div>
+
+        <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+          <slot name="invalid-message">{{ invalidMessage }}</slot>
+        </div>
+        <div v-else-if="isWarning" :class="`${carbonPrefix}--form-requirement`">
+          <slot name="warning-message">{{ warningMessage }}</slot>
+        </div>
+        <div
+          v-else-if="!inline && isHelper"
+          :class="`${carbonPrefix}--form__helper-text`"
+        >
+          <slot name="helper-text">{{ helperText }}</slot>
+        </div>
+
+        <!-- cv-wrapper div ${carbonPrefix}--select-input--inline__wrapper -->
+      </cv-wrapper>
+    </div>
+    <!-- cv-wrapper div ${carbonPrefix}--form-item -->
+  </cv-wrapper>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { computed, onMounted, onUpdated, ref, useSlots, watch } from 'vue';
+import {
+  WarningFilled16 as WarningFilled,
+  ChevronDown16 as ChevronDown,
+  WarningAltFilled16 as WarningAltFilled,
+} from '@carbon/icons-vue';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import CvWrapper from '../CvWrapper/CvWrapper';
+import { useIsLight, props as propsTheme } from '../../use/cvTheme';
+
+const slots = useSlots();
+const props = defineProps({
+  inline: { type: Boolean, default: false },
+  invalidMessage: { type: String, default: undefined },
+  warningMessage: { type: String, default: undefined },
+  helperText: { type: String, default: undefined },
+  formItem: { type: Boolean, default: true },
+  hideLabel: { type: Boolean, default: false },
+  label: { type: String, required: true },
+  // *********************
+  // declare here to prevent the following from being added to the select
+  // *********************
+  // multiple does not work with styling from carbon-components 9.20
+  multiple: {
+    type: String,
+    validator: () => {
+      console.warn('property multiple not supported in CvSelect');
+      return false;
+    },
+  },
+  value: { type: String, default: undefined },
+  size: {
+    type: String,
+    default: 'md',
+    validator: val => ['sm', 'md', 'lg'].includes(val),
+  },
+  modelValue: { type: String },
+  ...propsTheme,
+  ...propsCvId,
+});
+const cvId = useCvId(props, true);
+const isLight = useIsLight(props);
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const el = ref(null);
+const dataValue = ref(props.modelValue || props.value);
+onMounted(() => {
+  // this is needed to ensure selected for an option when no value is supplied
+  // There is a race condition here between the select tag `:value="internalValue"` and the
+  // calculation here of the desired value. Therefore, `cv-select-option` sets the `data-initial-selected`
+  // value for options that include the selected attribute. By the time we get here the  `selected` has
+  // already been unset by internalValue
+
+  dataValue.value = props.modelValue || props.value;
+  if (dataValue.value === undefined) {
+    const dom = el.value?.$el;
+    let options = dom?.querySelectorAll('option');
+    for (let i = 0; i < options.length; i++) {
+      const initialSelection = Boolean(
+        options[i].attributes['data-initial-selected']
+      );
+      if (options[i].attributes.selected || initialSelection) {
+        dataValue.value = options[i].value;
+      }
+    }
+  }
+});
+watch(
+  () => props.value,
+  () => {
+    // this is needed to ensure selected for an option when no value is supplied
+    if (props.value === undefined) {
+      const dom = el.value?.$el;
+      let options = dom?.querySelectorAll('option');
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].attributes.selected) {
+          dataValue.value = options[i].value;
+        }
+      }
+    }
+  }
+);
+watch(
+  () => props.modelValue,
+  () => {
+    dataValue.value = props.modelValue;
+  }
+);
+watch(
+  () => props.value,
+  () => {
+    dataValue.value = props.value;
+  }
+);
+const internalValue = computed(() => {
+  return dataValue.value ? dataValue.value : props.value;
+});
+function onChange(evt) {
+  emit('change', evt?.target?.value);
+  emit('update:modelValue', evt?.target?.value);
+}
+
+const isHelper = ref(false);
+function updateHelper() {
+  isHelper.value = !!(
+    slots['helper-text'] ||
+    (props.helperText && props.helperText.length)
+  );
+}
+onMounted(updateHelper);
+onUpdated(updateHelper);
+
+// NOTE: slots are not reactive so needs to be managed on updated.
+// It seems like a deep watch on the slots array may work but would still need to set the initial state so
+// this pattern seem best.
+const isInvalid = ref(false);
+function updateInvalid() {
+  isInvalid.value = !!(
+    slots['invalid-message'] ||
+    (props.invalidMessage && props.invalidMessage.length)
+  );
+}
+onMounted(updateInvalid);
+onUpdated(updateInvalid);
+
+const isWarning = ref(false);
+function updateWarning() {
+  isWarning.value = !!(
+    slots['warning-message'] ||
+    (props.warningMessage && props.warningMessage.length)
+  );
+}
+onMounted(updateWarning);
+onUpdated(updateWarning);
+</script>