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

package/src/components/CvMultiSelect/index.js

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

package/src/components/CvNumberInput/CvNumberInput.stories.js

@@ -0,0 +1,265 @@
+import { ref } from 'vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { StorybookGroupConst } from './StorybookGroupConst';
+import CvNumberInput from './CvNumberInput.vue';
+
+export default {
+  title: `${sbCompPrefix}/${StorybookGroupConst}/CvNumberInput`,
+  component: CvNumberInput,
+  argTypes: {
+    // attrs
+    ariaLabelForDownButton: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'attributes',
+      },
+      description: 'Aria label for down (decrease) button',
+    },
+    ariaLabelForUpButton: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'attributes',
+      },
+      description: 'Aria label for up (increase) button',
+    },
+    disabled: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'attributes',
+      },
+      description: 'Specify whether the `<input>` should be disabled',
+    },
+    max: {
+      type: 'string',
+      table: {
+        type: { summary: 'string | number' },
+        category: 'attributes',
+      },
+      description: '`max` attribute for input HTML element',
+    },
+    min: {
+      type: 'string',
+      table: {
+        type: { summary: 'string | number' },
+        category: 'attributes',
+      },
+      description: '`min` attribute for input HTML element',
+    },
+    step: {
+      type: 'string',
+      table: {
+        type: { summary: 'string | number' },
+        category: 'attributes',
+      },
+      description: '`step` attribute for input HTML element',
+    },
+    // props
+    formItem: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+        defaultValue: true,
+      },
+      description:
+        "Adds .bx--form-item class to component's wrapping HTML element",
+    },
+    helperText: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide text that is used alongside the control label for additional help',
+    },
+    invalidMessage: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide the text that is displayed when the control is in an invalid state',
+    },
+    label: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: "Input's label",
+    },
+    light: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+        defaultValue: false,
+      },
+      description:
+        "Toggles light version. For use on `$ui-01` backgrounds only. Don't use this to make tile background color same as container background color.",
+    },
+    warnText: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide the text that is displayed when the control is in warning state',
+    },
+    // slots
+    'label ': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Input label slot',
+    },
+    'helper-text': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description:
+        "Helper text slot. It isn't shown if invalid message or warn text, either props or slots, are available",
+    },
+    'invalid-message': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Invalid message slot.',
+    },
+    'warn-text': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description:
+        "Warn text slot. It isn't shown if invalid message, either prop or slot, is available",
+    },
+    // events
+    'update:modelValue': {
+      type: 'event',
+      table: {
+        type: { summary: 'event' },
+        category: 'events',
+      },
+      control: { type: null },
+      description:
+        "Triggered on textarea update. `update:modelValue` is the vue3 default 'event' for two-way data binding with v-model",
+    },
+  },
+};
+
+const template = `
+  <cv-number-input v-bind="args">
+    <template v-if="args['helper-text']" v-slot:helper-text />
+    <template v-if="args['warn-text']" v-slot:warn-text />
+    <template v-if="args['invalid-message']" v-slot:invalid-message />
+    <template v-if="args['label']" v-slot:label />
+  </cv-number-input>
+`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvNumberInput },
+    template,
+    setup: () => ({
+      args,
+    }),
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = { label: 'Number input label' };
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+const vModelHTML = `
+  <cv-number-input v-bind="args" v-model="modelValue" />
+  <div style="margin-top:1rem; background-color: #888888; padding:1rem">
+    <div style="font-size: 150%">
+      Sample interaction
+    </div>
+    <input v-model="modelValue" type="number" />
+    <div>
+      Entered value:
+      <span style="font-weight: bold;">{{modelValue}}</span>
+    </div>
+  </div>
+`;
+
+const VModelTemplate = args => {
+  return {
+    components: { CvNumberInput },
+    setup: () => ({ args, modelValue: ref(3) }),
+    template: vModelHTML,
+  };
+};
+export const vModel = VModelTemplate.bind({});
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  vModelHTML,
+  vModel.args
+);
+
+const withTypeofMessageHTML = `
+  <cv-number-input v-bind="args" v-model="modelValue" />
+  <p style="margin-top: 1rem;">Entered value: {{ modelValue }} | typeof: {{ typeof modelValue }}</p>
+`;
+const NumberTemplate = args => {
+  return {
+    components: { CvNumberInput },
+    setup: () => ({ args, modelValue: ref(3) }),
+    template: withTypeofMessageHTML,
+  };
+};
+export const NumberValue = NumberTemplate.bind({});
+NumberValue.parameters = storyParametersObject(
+  NumberValue.parameters,
+  withTypeofMessageHTML,
+  NumberValue.args
+);
+
+const StringTemplate = args => {
+  return {
+    components: { CvNumberInput },
+    setup: () => ({ args, modelValue: ref('3') }),
+    template: withTypeofMessageHTML,
+  };
+};
+export const StringValue = StringTemplate.bind({});
+StringValue.parameters = storyParametersObject(
+  StringValue.parameters,
+  withTypeofMessageHTML,
+  StringValue.args
+);
+
+export const Slots = Template.bind({});
+Slots.args = {
+  'invalid-message': 'Some invalid message from slot',
+  'warn-text': 'Some warn message from slot',
+  'helper-text': 'Some help message from slot',
+  label: 'Number input label from slot',
+};
+Slots.parameters = storyParametersObject(
+  Slots.parameters,
+  template,
+  Slots.args
+);

package/src/components/CvNumberInput/CvNumberInput.vue

@@ -0,0 +1,227 @@
+<template>
+  <cv-wrapper
+    :tag-type="formItem ? 'div' : ''"
+    class="cv-number-input"
+    :class="`${carbonPrefix}--form-item`"
+  >
+    <div
+      :class="[
+        `${carbonPrefix}--number`,
+        {
+          [`${carbonPrefix}--number--light`]: isLight,
+          [`${carbonPrefix}--number--helpertext`]: isHelper,
+          [`cv-number-input`]: !formItem,
+        },
+      ]"
+      :data-invalid="dataInvalidAttributeValue"
+    >
+      <label
+        v-show="label || slots['label']"
+        :for="cvId"
+        :class="`${carbonPrefix}--label`"
+      >
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </label>
+
+      <div
+        :class="[
+          `${carbonPrefix}--number__input-wrapper`,
+          { [`${carbonPrefix}--number__input-wrapper--warning`]: isWarn },
+        ]"
+      >
+        <input
+          ref="input"
+          v-model="internalValue"
+          :id="cvId"
+          :data-invalid="dataInvalidAttributeValue"
+          type="number"
+          v-bind="$attrs"
+          :disabled="disabled"
+          :step="step"
+          :min="min"
+          :max="max"
+        />
+
+        <WarningFilled16 v-if="isInvalid" :class="iconClasses" />
+
+        <WarningAltFilled16 v-if="isWarn && !isInvalid" :class="iconClasses" />
+
+        <div :class="`${carbonPrefix}--number__controls`">
+          <button
+            :class="`${carbonPrefix}--number__control-btn down-icon`"
+            type="button"
+            :aria-label="ariaLabelForDownButton"
+            :disabled="disabled"
+            aria-live="polite"
+            aria-atomic="true"
+            @click="doDown"
+          >
+            <Subtract16 class="down-icon" />
+          </button>
+
+          <div :class="`${carbonPrefix}--number__rule-divider`" />
+
+          <button
+            :class="`${carbonPrefix}--number__control-btn up-icon`"
+            type="button"
+            :aria-label="ariaLabelForUpButton"
+            :disabled="disabled"
+            aria-live="polite"
+            aria-atomic="true"
+            @click="doUp"
+          >
+            <Add16 class="up-icon" />
+          </button>
+
+          <div :class="`${carbonPrefix}--number__rule-divider`" />
+        </div>
+      </div>
+
+      <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+        <slot name="invalid-message">{{ invalidMessage }}</slot>
+      </div>
+
+      <div v-else-if="isWarn" :class="`${carbonPrefix}--form-requirement`">
+        <slot name="warn-text">{{ warnText }}</slot>
+      </div>
+
+      <div v-if="isHelper" :class="`${carbonPrefix}--form__helper-text`">
+        <slot name="helper-text">{{ helperText }}</slot>
+      </div>
+    </div>
+  </cv-wrapper>
+</template>
+
+<script setup>
+import { computed, ref, useSlots } from 'vue';
+import Add16 from '@carbon/icons-vue/es/add/16';
+import Subtract16 from '@carbon/icons-vue/es/subtract/16';
+import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/es/warning--alt--filled/16';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { props as propsTheme } from '../../use/cvTheme';
+import { useCvInputHelpers } from '../../use/cvInput';
+import { carbonPrefix } from '../../global/settings';
+import CvWrapper from '../CvWrapper/CvWrapper';
+
+const props = defineProps({
+  disabled: Boolean,
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  formItem: {
+    type: Boolean,
+    default: true,
+  },
+  helperText: {
+    type: String,
+    default: undefined,
+  },
+  invalidMessage: {
+    type: String,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  ariaLabelForUpButton: {
+    type: String,
+    default: 'Increase number input',
+  },
+  ariaLabelForDownButton: {
+    type: String,
+    default: 'Decrease number input',
+  },
+  min: {
+    type: [String, Number],
+    default: undefined,
+  },
+  max: {
+    type: [String, Number],
+    default: undefined,
+  },
+  step: {
+    type: [String, Number],
+    default: undefined,
+  },
+  warnText: {
+    type: String,
+    default: undefined,
+  },
+  ...propsCvId,
+  ...propsTheme,
+});
+
+const emit = defineEmits(['update:modelValue']);
+const cvId = useCvId(props);
+const { isInvalid, isWarn, isHelper, isLight } = useCvInputHelpers(props);
+const dataInvalidAttributeValue = computed(() =>
+  isInvalid.value ? true : undefined
+);
+
+const iconClasses = computed(() => {
+  const classes = [];
+  if (isInvalid.value || isWarn.value) {
+    classes.push(`${carbonPrefix}--number__invalid`);
+  }
+  if (isWarn.value && !isInvalid.value) {
+    classes.push(`${carbonPrefix}--number__invalid--warning`);
+  }
+
+  return classes.join(' ');
+});
+
+const input = ref(null);
+const modelValueType = typeof props.modelValue;
+const valuesToNaN = ['', null, undefined];
+
+const formatInputValueType = value => {
+  if (modelValueType === 'string') return value.toString();
+  // According to Vue2 component if there is no value NaN is emitted
+  return valuesToNaN.includes(value) ? NaN : Number(value);
+};
+
+const internalValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    const valueFormatted = formatInputValueType(value);
+    onInput(valueFormatted);
+  },
+});
+
+const onInput = value => {
+  emit('update:modelValue', value);
+};
+
+const programmaticEventsToTrigger = ['input', 'change'];
+const onProgrammaticValueChanged = inputRef => {
+  programmaticEventsToTrigger.forEach(eventName => {
+    const event = new Event(eventName);
+    inputRef.value.dispatchEvent(event);
+  });
+};
+
+const doUp = () => {
+  input.value.stepUp();
+  onProgrammaticValueChanged(input);
+};
+
+const doDown = () => {
+  input.value.stepDown();
+  onProgrammaticValueChanged(input);
+};
+
+const slots = useSlots();
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/CvNumberInput/CvNumberInputSkeleton.stories.js

@@ -0,0 +1,30 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { StorybookGroupConst } from './StorybookGroupConst';
+import CvNumberInputSkeleton from './CvNumberInputSkeleton.vue';
+
+export default {
+  title: `${sbCompPrefix}/${StorybookGroupConst}/CvNumberInputSkeleton`,
+  component: CvNumberInputSkeleton,
+};
+
+const template = `<cv-number-input-skeleton></cv-number-input-skeleton>`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvNumberInputSkeleton },
+    template,
+    setup() {
+      return { args };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvNumberInput/CvNumberInputSkeleton.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="cv-number-input" :class="`${carbonPrefix}--form-item`">
+    <label :class="`${carbonPrefix}--label ${carbonPrefix}--skeleton`" />
+    <div :class="`${carbonPrefix}--number ${carbonPrefix}--skeleton`" />
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvNumberInput/StorybookGroupConst.js

@@ -0,0 +1 @@
+export const StorybookGroupConst = 'CvNumberInput';

package/src/components/CvNumberInput/__tests__/__snapshots__/CvNumberInput.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvNumberInput should match snapshot when all props are default 1`] = `<cv-wrapper-stub tagtype="div" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot when all props are provided 1`] = `<cv-wrapper-stub tagtype="" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot when helper-text slot is provided 1`] = `<cv-wrapper-stub tagtype="div" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot when invalid-message slot is provided 1`] = `<cv-wrapper-stub tagtype="div" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot when it is not a formItem 1`] = `<cv-wrapper-stub tagtype="" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot when light theme 1`] = `<cv-wrapper-stub tagtype="" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot when value is Number 1`] = `<cv-wrapper-stub tagtype="" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot when value is String 1`] = `<cv-wrapper-stub tagtype="" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot with min, max and step as Strings 1`] = `<cv-wrapper-stub tagtype="" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;
+
+exports[`CvNumberInput should match snapshot with optional min, max and step as numbers 1`] = `<cv-wrapper-stub tagtype="" class="cv-number-input bx--form-item"></cv-wrapper-stub>`;

package/src/components/CvNumberInput/index.js

@@ -0,0 +1,5 @@
+import CvNumberInput from './CvNumberInput.vue';
+import CvNumberInputSkeleton from './CvNumberInputSkeleton.vue';
+
+export { CvNumberInput, CvNumberInputSkeleton };
+export default CvNumberInput;

package/src/components/CvTabs/CvTab.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    :class="`cv-tab ${carbonPrefix}--tab-content`"
+    :id="uid"
+    role="tabpanel"
+    :aria-labelledby="`${uid}-link`"
+    :aria-hidden="!dataSelected ? 'true' : 'false'"
+    :hidden="!dataSelected"
+  >
+    <slot>
+      <!-- Content for tab goes here. -->
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const props = defineProps({
+  selected: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  label: { type: String, required: true },
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+
+/**
+ * Is this tab selected?
+ * @type {Ref<UnwrapRef<string>>}
+ */
+const tabSelected = inject('tab-selected');
+const dataSelected = ref(props.selected);
+onMounted(() => {
+  if (props.selected) tabSelected.value = uid.value;
+});
+watch(
+  () => props.selected,
+  () => {
+    if (props.selected) tabSelected.value = uid.value;
+  }
+);
+watch(tabSelected, () => {
+  dataSelected.value = tabSelected.value === uid.value;
+});
+
+/**
+ * Is this tab disabled?
+ * @type {Ref<UnwrapRef<Set>>}
+ */
+const tabDisabledIds = inject('tab-disabled-ids');
+function updateTabDisabled() {
+  if (props.disabled) tabDisabledIds.value?.add(uid.value);
+  else tabDisabledIds.value?.delete(uid.value);
+}
+onMounted(updateTabDisabled);
+watch(() => props.disabled, updateTabDisabled);
+
+/**
+ * Keep this tab's data up to date
+ * @type {Ref<UnwrapRef<Array<TabData>>>}
+ */
+const tabData = inject('tab-data');
+function updateTabData() {
+  const index = tabData.value?.findIndex(tab => tab.uid === uid.value);
+  if (index > -1)
+    tabData.value.splice(index, 1, { uid: uid.value, label: props.label });
+  else tabData.value.push({ uid: uid.value, label: props.label });
+}
+onMounted(updateTabData);
+watch(() => props.label, updateTabData);
+onBeforeUnmount(() => {
+  const index = tabData.value?.findIndex(tab => tab.uid === uid.value);
+  if (index > -1) tabData.value.splice(index, 1);
+});
+</script>