@carbon/vue 3.0.4-alpha.0 → 3.0.6-alpha.0

package/src/components/CvModal/CvModal.vue

@@ -0,0 +1,403 @@
+<template>
+  <Teleport to="body" :disabled="disableTeleport">
+    <div
+      ref="el"
+      data-modal
+      :id="uid"
+      :class="[
+        `cv-modal ${carbonPrefix}--modal`,
+        {
+          'is-visible': dataVisible,
+          [`${carbonPrefix}--modal--danger`]: kind === 'danger',
+        },
+      ]"
+      tabindex="-1"
+      @keydown.esc.prevent="onEsc"
+      @click.self="onExternalClick"
+      v-bind="$attrs"
+    >
+      <div
+        :class="[
+          `${carbonPrefix}--modal-container`,
+          {
+            [`${carbonPrefix}--modal-container--${internalSize}`]: internalSize,
+          },
+        ]"
+        v-bind="dialogAttrs"
+        :aria-label="ariaLabel"
+        ref="modalDialog"
+      >
+        <div
+          class="cv-modal__before-content"
+          ref="beforeContent"
+          tabindex="0"
+          style="position: absolute; height: 1px; width: 1px; left: -9999px"
+          role="separator"
+          aria-valuenow="0"
+          @focus="focusBeforeContent"
+        />
+        <div :class="`${carbonPrefix}--modal-header`">
+          <p :class="`${carbonPrefix}--modal-header__label`">
+            <slot name="label"></slot>
+          </p>
+          <p :class="`${carbonPrefix}--modal-header__heading`">
+            <slot name="title">Modal Title</slot>
+          </p>
+          <button
+            :class="`${carbonPrefix}--modal-close`"
+            type="button"
+            @click="onClose"
+            ref="closeBtn"
+            :aria-label="closeAriaLabel"
+          >
+            <Close16 :class="`${carbonPrefix}--modal-close__icon`" />
+          </button>
+        </div>
+
+        <div
+          :class="[
+            `${carbonPrefix}--modal-content`,
+            { [`${carbonPrefix}--modal-content--with-form`]: hasFormContent },
+          ]"
+          ref="content"
+          :tabindex="data.scrollable ? 0 : undefined"
+        >
+          <slot name="content"></slot>
+        </div>
+
+        <cv-button-set
+          :class="[
+            `${carbonPrefix}--modal-footer`,
+            {
+              [`${carbonPrefix}--modal-footer--three-button`]:
+                data.hasPrimary && data.hasSecondary && data.hasOtherBtn,
+            },
+          ]"
+          v-if="data.hasFooter"
+        >
+          <cv-button
+            type="button"
+            kind="secondary"
+            @click="onOtherBtnClick"
+            v-if="data.hasOtherBtn"
+            ref="otherBtn"
+          >
+            <slot name="other-button">Other button</slot>
+          </cv-button>
+          <cv-button
+            type="button"
+            kind="secondary"
+            @click="onSecondaryClick"
+            v-if="data.hasSecondary"
+            ref="secondaryBtn"
+          >
+            <slot name="secondary-button">Secondary button</slot>
+          </cv-button>
+          <cv-button
+            :disabled="primaryButtonDisabled"
+            type="button"
+            :kind="primaryKind"
+            @click="onPrimaryClick"
+            v-if="data.hasPrimary"
+            ref="primary"
+          >
+            <slot name="primary-button">Primary button</slot>
+          </cv-button>
+        </cv-button-set>
+        <div
+          class="cv-modal__after-content"
+          ref="afterContent"
+          tabindex="0"
+          style="position: absolute; height: 1px; width: 1px; left: -9999px"
+          role="separator"
+          aria-valuenow="1"
+          @focus="focusAfterContent"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import CvButton from '../CvButton/CvButton.vue';
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import Close16 from '@carbon/icons-vue/es/close/16';
+import CvButtonSet from '../CvButton/CvButtonSet.vue';
+import {
+  computed,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onMounted,
+  reactive,
+  ref,
+  useSlots,
+  watch,
+} from 'vue';
+
+const props = defineProps({
+  /**
+   * When set to true, the aria role will be either "alert" or "alertdialog"
+   */
+  alert: { type: Boolean, default: false },
+  /**
+   * optional label for close button, default 'Close modal'
+   */
+  closeAriaLabel: { type: String, default: 'Close modal' },
+  /**
+   * aria label for the dialog, default 'Information modal'
+   */
+  ariaLabel: { type: String, default: 'Information modal' },
+  /**
+   * 'danger' otherwise default modal.
+   */
+  kind: {
+    type: String,
+    default: '',
+    validator: val => ['', 'danger'].includes(val),
+  },
+  /**
+   * boolean value if true the component user is expected to close the modal via visible property.
+   */
+  autoHideOff: { type: Boolean, default: false },
+  /**
+   * visibility of modal dialog - available as v-model
+   */
+  visible: { type: Boolean, default: false },
+  /**
+   * @deprecated - use v-model:visible
+   */
+  modelValue: {
+    type: Boolean,
+    validator: val => {
+      console.warn(
+        `v-model for modal is deprecated. Specify "v-model:visible" instead [${val}]`
+      );
+      return true;
+    },
+    default: undefined,
+  },
+  /**
+   * boolean value used to enable/disable the primary button
+   */
+  primaryButtonDisabled: { type: Boolean, default: false },
+  /**
+   * default size is "medium"
+   */
+  size: {
+    type: String,
+    validator: val =>
+      ['', 'xs', 'sm', 'small', 'md', 'large', 'lg'].includes(val),
+    default: '',
+  },
+  /**
+   * Adds styling specific to modals with form content
+   */
+  hasFormContent: { type: Boolean, default: false },
+  /**
+   * Do not move the modal to the document body
+   */
+  disableTeleport: { type: Boolean, default: false },
+
+  // Listeners
+  onPrimaryClick: { type: Function },
+  onSecondaryClick: { type: Function },
+  onOtherBtnClick: { type: Function },
+
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+
+const dataVisible = ref(false);
+const data = reactive({
+  scrollable: false,
+  hasFooter: false,
+  hasHeaderLabel: false,
+  hasPrimary: false,
+  hasSecondary: false,
+  hasOtherBtn: false,
+});
+
+const slots = useSlots();
+function checkSlots() {
+  // NOTE: $slots is not reactive so needs to be managed on updated
+  data.hasFooter = !!(
+    slots['primary-button'] ||
+    slots['secondary-button'] ||
+    slots['other-button']
+  );
+  data.hasHeaderLabel = !!slots['label'];
+  data.hasPrimary = !!slots['primary-button'];
+  data.hasSecondary = !!slots['secondary-button'];
+  data.hasOtherBtn = !!slots['other-button'];
+}
+const emit = defineEmits([
+  'modal-shown',
+  'modal-hidden',
+  'after-modal-hidden',
+  'modal-hide-request',
+  'primary-click',
+  'secondary-click',
+  'other-btn-click',
+  'update:modelValue',
+  'update:visible',
+]);
+onBeforeMount(checkSlots);
+onBeforeUpdate(checkSlots);
+
+const el = ref(null);
+function show() {
+  // prevent body scrolling
+  document.body.classList.add(`${carbonPrefix}--body--with-modal-open`);
+
+  el.value?.addEventListener('transitionend', onShown);
+  dataVisible.value = true;
+}
+const content = ref(null);
+function onShown() {
+  const focusEl = content.value?.querySelector('[data-modal-primary-focus]');
+  if (focusEl) {
+    focusEl.focus();
+  } else {
+    focusBeforeContent();
+  }
+  emit('modal-shown');
+
+  // check to see if content scrollable
+  data.scrollable = content.value?.scrollHeight > content.value?.clientHeight;
+
+  el.value?.removeEventListener('transitionend', onShown);
+}
+const secondaryBtn = ref(null);
+const otherBtn = ref(null);
+const closeBtn = ref(null);
+function focusBeforeContent() {
+  if (slots['primary-button']) {
+    el.value?.focus();
+  } else if (slots['secondary-button']) {
+    secondaryBtn.value?.$el.focus();
+  } else if (slots['other-button']) {
+    otherBtn.value?.$el.focus();
+  } else {
+    closeBtn.value?.focus();
+  }
+}
+
+onMounted(() => {
+  if (props.visible) show();
+  else if (props.modelValue) show();
+});
+watch(
+  () => props.visible,
+  val => {
+    if (val) show();
+    else hide();
+  }
+);
+watch(dataVisible, val => {
+  emit('update:modelValue', val);
+  emit('update:visible', val);
+});
+
+function hide() {
+  //restore any previous scroll
+  document.body.classList.remove(`${carbonPrefix}--body--with-modal-open`);
+
+  if (dataVisible.value) {
+    el.value?.addEventListener('transitionend', afterHide);
+  }
+
+  dataVisible.value = false;
+  emit('modal-hidden');
+}
+function afterHide(event) {
+  if (event.propertyName === 'opacity') {
+    emit('after-modal-hidden');
+    el.value?.removeEventListener('transitionend', afterHide);
+  }
+}
+
+const dialogAttrs = computed(() => {
+  const passive = !data.hasFooter;
+  const attrs = {};
+  if (props.alert) {
+    if (passive) {
+      attrs.role = 'alert';
+    } else {
+      attrs.role = 'alertdialog';
+    }
+  } else {
+    attrs.role = 'dialog';
+  }
+  return attrs;
+});
+const primaryKind = computed(() => {
+  if (props.kind === 'danger') {
+    return 'danger';
+  } else {
+    return 'primary';
+  }
+});
+const internalSize = computed(() => {
+  switch (props.size) {
+    case 'xs':
+      return 'xs';
+    case 'sm':
+    case 'small':
+      return 'sm';
+    case 'lg':
+    case 'large':
+      return 'lg';
+    default:
+      return '';
+  }
+});
+
+function focusAfterContent() {
+  closeBtn.value?.focus();
+}
+
+function onExternalClick(ev) {
+  if (ev.target === el.value) {
+    _maybeHide(ev, 'external-click');
+  }
+}
+function onEsc(ev) {
+  _maybeHide(ev, 'escape-press');
+}
+function onClose(ev) {
+  _maybeHide(ev, 'close-click');
+}
+
+function _maybeHide(event, reason) {
+  if (!props.autoHideOff) {
+    hide();
+  } else {
+    emit('modal-hide-request', { 'cv:reason': reason });
+  }
+}
+function onFooterButtonClick(buttonId, ev) {
+  emit(buttonId);
+  if (buttonId === 'primary-click' && !props.onPrimaryClick)
+    _maybeHide(ev, buttonId);
+  if (buttonId === 'secondary-click' && !props.onSecondaryClick)
+    _maybeHide(ev, buttonId);
+  if (buttonId === 'other-btn-click' && !props.onOtherBtnClick)
+    _maybeHide(ev, buttonId);
+}
+function onPrimaryClick(ev) {
+  onFooterButtonClick('primary-click', ev);
+}
+function onSecondaryClick(ev) {
+  onFooterButtonClick('secondary-click', ev);
+}
+function onOtherBtnClick(ev) {
+  onFooterButtonClick('other-btn-click', ev);
+}
+onBeforeUnmount(() => {
+  if (dataVisible.value) {
+    emit('after-modal-hidden');
+  }
+});
+</script>

package/src/components/CvModal/index.js

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

package/src/components/CvTextArea/CvTextArea.stories.js

@@ -0,0 +1,174 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import CvTextArea from '.';
+import { ref } from 'vue';
+
+export default {
+  title: `${sbCompPrefix}/CvTextArea`,
+  component: CvTextArea,
+  argTypes: {
+    // attrs
+    disabled: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'attributes',
+      },
+      description: 'Specify whether the textarea should be disabled',
+    },
+    placeholder: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'attributes',
+      },
+      description: 'Specify the placeholder attribute for the textarea',
+    },
+    // props
+    helperText: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide text that is used alongside the control label for additional help',
+    },
+    hideLabel: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+        defaultValue: false,
+      },
+      description:
+        'Specify whether you want the underlying label to be visually hidden',
+    },
+    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.",
+    },
+    modelValue: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        "Input's value, modelValue is the vue3 default 'prop' for two-way data binding with v-model",
+    },
+    // slots
+    'helper-text': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description:
+        "Helper text slot. It isn't shown if invalid message, either prop or slot, is available",
+    },
+    'invalid-message': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Invalid message slot.',
+    },
+    // events
+    'update:modelValue': {
+      type: 'event',
+      table: {
+        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-text-area v-bind="args">
+    <template v-if="args['helper-text']" v-slot:helper-text />
+    <template v-if="args['invalid-message']" v-slot:invalid-message />
+  </cv-text-area>
+`;
+const Template = args => {
+  return {
+    components: { CvTextArea },
+    setup: () => ({ args }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Text area label',
+  placeholder: 'Sample placeholder',
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Slots = Template.bind({});
+Slots.args = {
+  ['invalid-message']: 'Invalid text area message',
+  label: 'Text area label',
+  placeholder: 'Sample placeholder',
+};
+Slots.parameters = storyParametersObject(
+  Slots.parameters,
+  template,
+  Slots.args
+);
+
+const vModelTemplate = `
+  <cv-text-area v-bind="args" v-model="value" />
+  <p style="margin-top: 1rem;">Value passed to v-model: {{ value }}</p>
+`;
+const VModelTemplate = args => {
+  return {
+    components: { CvTextArea },
+    setup: () => ({ args, value: ref('') }),
+    template: vModelTemplate,
+  };
+};
+export const vModel = VModelTemplate.bind({});
+vModel.args = {
+  label: 'Text area label',
+  placeholder: 'Sample placeholder',
+};
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  vModelTemplate,
+  vModel.args
+);

package/src/components/CvTextArea/CvTextArea.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="`cv-text-area ${carbonPrefix}--form-item`">
+    <label
+      :for="cvId"
+      :class="[
+        `${carbonPrefix}--label`,
+        {
+          [`${carbonPrefix}--label--disabled`]: $attrs.disabled,
+          [`${carbonPrefix}--visually-hidden`]: hideLabel,
+        },
+      ]"
+    >
+      {{ label }}
+    </label>
+    <div
+      :class="`${carbonPrefix}--text-area__wrapper`"
+      :data-invalid="isInvalid"
+    >
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--text-area__invalid-icon`"
+      />
+      <textarea
+        :aria-invalid="isInvalid"
+        :aria-describedby="isInvalid ? errorId : undefined"
+        :id="cvId"
+        :class="[
+          `${carbonPrefix}--text-area`,
+          {
+            [`${carbonPrefix}--text-area--invalid`]: isInvalid,
+            [`${carbonPrefix}--text-area--light`]: isLight,
+          },
+        ]"
+        v-bind="$attrs"
+        :value="modelValue"
+        @input="$event => $emit('update:modelValue', $event.target.value)"
+      ></textarea>
+    </div>
+    <div
+      v-if="isInvalid"
+      :id="errorId"
+      :class="`${carbonPrefix}--form-requirement`"
+    >
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+    <div
+      v-if="isHelper"
+      :class="[
+        `${carbonPrefix}--form__helper-text`,
+        { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
+      ]"
+    >
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useSlots, onBeforeMount, onBeforeUpdate } from 'vue';
+import { WarningFilled16 } from '@carbon/icons-vue';
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { useIsLight, props as propsTheme } from '../../use/cvTheme';
+
+const props = defineProps({
+  helperText: { type: String, default: undefined },
+  hideLabel: { type: Boolean, default: false },
+  invalidMessage: { type: String, default: undefined },
+  label: String,
+  modelValue: String,
+  ...propsCvId,
+  ...propsTheme,
+});
+
+const cvId = useCvId(props);
+
+// DOM
+const slots = useSlots();
+
+// Data
+const isHelper = ref(false);
+const isInvalid = ref(false);
+const isLight = useIsLight(props);
+
+// Computed
+const errorId = computed(() => `error-${cvId.value}`);
+
+// Methods
+function checkSlots() {
+  // NOTE: this.$slots is not reactive so needs to be managed on updated
+  isInvalid.value = !!(
+    props.invalidMessage?.length || slots['invalid-message']
+  );
+  isHelper.value =
+    !isInvalid.value && !!(props.helperText?.length || slots['helper-text']);
+}
+
+// Life Hooks
+onBeforeMount(checkSlots);
+onBeforeUpdate(checkSlots);
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/CvTextArea/index.js

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