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

package/src/components/CvTextInput/CvTextInput.vue

@@ -0,0 +1,217 @@
+<template>
+  <div
+    :class="[
+      'cv-text-input',
+      `${carbonPrefix}--form-item`,
+      `${carbonPrefix}--text-input-wrapper`,
+      { [`${carbonPrefix}--password-input-wrapper`]: isPassword },
+    ]"
+  >
+    <label
+      :for="cvId"
+      :class="[
+        `${carbonPrefix}--label`,
+        {
+          [`${carbonPrefix}--label--disabled`]: $attrs.disabled,
+          [`${carbonPrefix}--visually-hidden`]: hideLabel,
+        },
+      ]"
+    >
+      {{ label }}
+    </label>
+    <div
+      :class="[
+        `${carbonPrefix}--text-input__field-wrapper`,
+        { [`${carbonPrefix}--text-input__field-wrapper--warning`]: isWarn },
+      ]"
+      :data-invalid="isInvalid"
+    >
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--text-input__invalid-icon`"
+      />
+      <WarningAltFilled16
+        v-if="isWarn"
+        :class="`${carbonPrefix}--text-input__invalid-icon ${carbonPrefix}--text-input__invalid-icon--warning`"
+      />
+      <input
+        ref="input"
+        :id="cvId"
+        :class="[
+          `${carbonPrefix}--text-input`,
+          {
+            [`${carbonPrefix}--text-input--invalid`]: isInvalid,
+            [`${carbonPrefix}--text-input--light`]: isLight,
+            [`${carbonPrefix}--text-input--warning`]: isWarn,
+            [`${carbonPrefix}--password-input`]: isPassword,
+          },
+        ]"
+        v-bind="$attrs"
+        :type="dataType"
+        :value="modelValue"
+        :data-toggle-password-visibility="isPassword"
+        @input="$event => $emit('update:modelValue', $event.target.value)"
+      />
+      <button
+        v-if="isPassword"
+        :class="[
+          `${carbonPrefix}--btn`,
+          `${carbonPrefix}--btn--icon-only`,
+          `${carbonPrefix}--text-input--password__visibility__toggle`,
+          `${carbonPrefix}--tooltip__trigger`,
+          `${carbonPrefix}--tooltip--a11y`,
+          `${carbonPrefix}--tooltip--bottom`,
+          `${carbonPrefix}--tooltip--align-center`,
+          { [`${carbonPrefix}--btn--disabled`]: $attrs.disabled },
+        ]"
+        @click="togglePasswordVisibility"
+        type="button"
+        :disabled="$attrs.disabled"
+      >
+        <span :class="`${carbonPrefix}--assistive-text`">
+          {{ passwordHideShowLabel }}
+        </span>
+        <ViewOff16
+          v-if="isPasswordVisible"
+          :class="`${carbonPrefix}--icon-visibility-off`"
+        />
+        <View16 v-else :class="`${carbonPrefix}--icon-visibility-on`" />
+      </button>
+    </div>
+    <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+    <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
+      <slot name="warn-text">{{ warnText }}</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 {
+  onBeforeMount,
+  onBeforeUpdate,
+  ref,
+  useSlots,
+  computed,
+  watch,
+  nextTick,
+} from 'vue';
+import {
+  WarningFilled16,
+  WarningAltFilled16,
+  ViewOff16,
+  View16,
+} 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';
+import { inputTypes } from './const';
+
+const props = defineProps({
+  helperText: { type: String, default: undefined },
+  hideLabel: { type: Boolean, default: false },
+  invalidMessage: { type: String, default: undefined },
+  label: String,
+  modelValue: String,
+  passwordHideLabel: { type: String, default: 'Hide password' },
+  passwordShowLabel: { type: String, default: 'Show password' },
+  passwordVisible: { type: Boolean, default: undefined },
+  type: {
+    type: String,
+    default: 'text',
+    validator: value => inputTypes.has(value),
+  },
+  warnText: { type: String, default: undefined },
+  ...propsCvId,
+  ...propsTheme,
+});
+
+const cvId = useCvId(props);
+
+// DOM Elements
+const input = ref();
+const slots = useSlots();
+
+// Data
+const isInvalid = ref(false);
+const isWarn = ref(false);
+const isHelper = ref(false);
+const isLight = useIsLight(props);
+const dataType = ref(props.type);
+const dataPasswordVisible = ref(false);
+
+// Computed Values
+const isPassword = computed(() => props.type === 'password');
+const isPasswordVisible = computed(
+  () => isPassword.value && dataPasswordVisible.value
+);
+const passwordHideShowLabel = computed(() =>
+  isPasswordVisible.value ? props.passwordHideLabel : props.passwordShowLabel
+);
+
+// Watchers
+watch(
+  () => props.passwordVisible,
+  newValue => {
+    if (newValue !== dataPasswordVisible.value) {
+      togglePasswordVisibility();
+    }
+  }
+);
+watch(
+  () => props.type,
+  newValue => {
+    dataType.value = newValue;
+  }
+);
+
+// Methods
+function togglePasswordVisibility() {
+  const currentValue = input.value.value;
+  dataPasswordVisible.value = !dataPasswordVisible.value;
+  dataType.value = dataPasswordVisible.value ? 'text' : 'password';
+  nextTick(() => {
+    input.value.value = currentValue;
+  });
+}
+
+function checkSlots() {
+  // NOTE: slots is not reactive so needs to be managed on updated
+  isInvalid.value = !!(
+    props.invalidMessage?.length || slots['invalid-message']
+  );
+  isWarn.value =
+    !isInvalid.value && !!(props.warnText?.length || slots['warn-text']);
+  isHelper.value =
+    !isInvalid.value &&
+    !isWarn.value &&
+    !!(props.helperText?.length || slots['helper-text']);
+}
+
+// Lifecycle Hooks
+onBeforeMount(() => {
+  checkSlots();
+  // update initial state for dataPasswordVisible & dataType
+  if (isPassword.value && props.passwordVisible) {
+    dataPasswordVisible.value = true;
+    dataType.value = 'text';
+  }
+});
+onBeforeUpdate(checkSlots);
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/CvTextInput/const.js

@@ -0,0 +1,2 @@
+// Currently available types for CvTextInput
+export const inputTypes = new Set(['password', 'text']);

package/src/components/CvTextInput/index.js

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

package/src/components/CvTile/CvTile.stories.mdx

@@ -0,0 +1,156 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import CvTile from './CvTile.vue';
+import CvTileStandard from './CvTileStandard.vue';
+import CvTileClickable from './CvTileClickable.vue';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+
+<Meta title={`${sbCompPrefix}/CvTile`} component={CvTile} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvTile,
+    CvTileStandard,
+    CvTileClickable,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      args: {
+        light: args.light,
+        kind: args.kind,
+        disabled: args.disabled,
+        expanded: args.expanded,
+        tileCollapsedLabel: args.tileCollapsedLabel,
+        tileExpandedLabel: args.tileExpandedLabel,
+      },
+      onChange: action('change'),
+      onExpanded: action('expanded'),
+      onClick: action('click'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `<cv-tile v-bind='args'>Hello!</cv-tile>`;
+const defaultCode = defaultTemplate.replace("v-bind='args'", '');
+const expandableTemplate = `<cv-tile v-bind='args' kind="expandable" @expanded="onExpanded">Hello expandable!<template #below><h1>More Content</h1><p>Expanded</p></template></cv-tile>`;
+const expandableCode = expandableTemplate.replace("v-bind='args'", '');
+const clickableTemplate = `<cv-tile v-bind='args' kind="clickable" @click="onClick" to="{name: 'something'}">Hello clickable!</cv-tile>`;
+const clickableCode = clickableTemplate.replace("v-bind='args'", '');
+const selectableTemplate = `<cv-tile v-bind='args' kind="selectable" value="my-selection" @change="onChange">Hello selectable! </cv-tile>`;
+const selectableCode = selectableTemplate.replace("v-bind='args'", '');
+
+# CvTile
+
+**Migration notes:**
+
+- The `light` and '`theme` options continue to be supported but the boolean `light` is preferred.
+- The expandable tile now emits a `expanded` event with a Boolean value.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: defaultCode } },
+    }}
+    args={{
+      kind: '',
+      light: false,
+      disabled: false,
+      template: defaultTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Expandable"
+    parameters={{
+      controls: {
+        exclude: ['default', 'selected', 'template', 'data', 'kind', 'slots'],
+      },
+      docs: { source: { code: expandableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: expandableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Clickable"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'slots',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: clickableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: clickableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Selectable"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'slots',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: selectableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: selectableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvTile/CvTile.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    :is="tagType"
+    :checked="checkProp('checked', selected)"
+    :expanded="checkProp('expanded', expanded)"
+    :tileCollapsedLabel="checkProp('tileCollapsedLabel', tileCollapsedLabel)"
+    :tileExpandedLabel="checkProp('tileCollapsedLabel', tileExpandedLabel)"
+    :class="[
+      `cv-tile ${carbonPrefix}--tile`,
+      { [`${carbonPrefix}--tile--light`]: isLight },
+    ]"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData"
+      ><slot :name="name" v-bind="slotData"
+    /></template>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { props as propsTheme, useIsLight } from '../../use/cvTheme';
+import CvTileStandard from './CvTileStandard.vue';
+import CvTileClickable from './CvTileClickable.vue';
+import CvTileSelectable from './CvTileSelectable.vue';
+import CvTileExpandable from './CvTileExpandable.vue';
+
+const props = defineProps({
+  expanded: Boolean,
+  selected: Boolean,
+  tileCollapsedLabel: { type: String, default: 'Tile collapsed' },
+  tileExpandedLabel: { type: String, default: 'Tile expanded' },
+  kind: {
+    type: String,
+    default: '',
+    validator: value =>
+      ['clickable', 'expandable', 'selectable', 'standard', ''].includes(value),
+  },
+  ...propsTheme,
+});
+
+const tagType = computed(() => {
+  switch (props.kind) {
+    case 'clickable':
+      return CvTileClickable;
+    case 'selectable':
+      return CvTileSelectable;
+    case 'expandable':
+      return CvTileExpandable;
+    default:
+      return CvTileStandard;
+  }
+});
+const isLight = useIsLight(props);
+
+/**
+ * If the prop is defined on the tagType pass it along otherwise, discard it.
+ * @param {string} prop
+ * @param {any} value
+ * @returns {*|undefined}
+ */
+function checkProp(prop, value) {
+  return prop in (tagType.value.props || {}) ? value : undefined;
+}
+</script>
+
+<style scoped></style>

package/src/components/CvTile/CvTileClickable.vue

@@ -0,0 +1,23 @@
+<template>
+  <component
+    :is="tagType"
+    ref="target"
+    data-tile="clickable"
+    :class="`cv-tile-clickable ${carbonPrefix}--tile--clickable`"
+    v-bind="{ ...$attrs, ...linkProps }"
+    tabindex="0"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsLink, useLinkProps, useTagType } from '../../use/cvLink';
+
+const props = defineProps({
+  ...propsLink,
+});
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+</script>

package/src/components/CvTile/CvTileExpandable.vue

@@ -0,0 +1,103 @@
+<template>
+  <button
+    type="button"
+    :style="data.styleObject"
+    @click="toggle"
+    :class="[
+      `cv-tile-expandable ${carbonPrefix}--tile--expandable`,
+      { [`${carbonPrefix}--tile--is-expanded`]: data.internalExpanded },
+    ]"
+    ref="el"
+  >
+    <div :class="`${carbonPrefix}--tile-content`">
+      <span
+        data-tile-atf
+        :class="`${carbonPrefix}--tile-content__above-the-fold`"
+        ref="aboveFold"
+      >
+        <slot>
+          <!-- Above the fold content here -->
+        </slot>
+      </span>
+      <div :class="`${carbonPrefix}--tile__chevron`">
+        <span>{{ chevronLabel }}</span>
+        <ChevronDown16 />
+      </div>
+      <span
+        :class="`${carbonPrefix}--tile-content__below-the-fold`"
+        ref="belowFold"
+        v-show="data.internalExpanded || data.initialized"
+      >
+        <slot name="below">
+          <!-- Rest of the content here -->
+        </slot>
+      </span>
+    </div>
+  </button>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+
+const props = defineProps({
+  expanded: Boolean,
+  tileCollapsedLabel: String,
+  tileExpandedLabel: String,
+});
+const data = reactive({
+  styleObject: {
+    maxHeight: 'initial',
+  },
+  initialized: false,
+  internalExpanded: props.expanded,
+});
+
+watch(
+  () => props.expanded,
+  val => {
+    if (val !== data.internalExpanded) {
+      toggle(val);
+    }
+  }
+);
+
+const chevronLabel = computed(() => {
+  return data.internalExpanded
+    ? props.tileExpandedLabel
+    : props.tileCollapsedLabel;
+});
+
+const el = ref(null);
+const belowFold = ref(null);
+function toggle(force) {
+  let currentHeight = el?.value.getBoundingClientRect().height;
+  if (!data.initialized) {
+    data.styleObject.maxHeight = `${currentHeight}px`;
+    data.initialized = true;
+  }
+
+  nextTick(() => {
+    const forceType = typeof force;
+    data.internalExpanded =
+      forceType === 'boolean' ? force : !data.internalExpanded;
+
+    const belowFoldHeight = belowFold?.value.getBoundingClientRect().height;
+
+    if (data.internalExpanded) {
+      currentHeight += belowFoldHeight;
+    } else {
+      currentHeight -= belowFoldHeight;
+    }
+    data.styleObject.maxHeight = `${currentHeight}px`;
+  });
+}
+const emit = defineEmits(['expanded']);
+watch(
+  () => data.internalExpanded,
+  val => {
+    emit('expanded', val);
+  }
+);
+</script>

package/src/components/CvTile/CvTileSelectable.vue

@@ -0,0 +1,52 @@
+<template>
+  <label
+    :for="uid"
+    :aria-label="ariaLabel"
+    :class="[
+      `cv-tile-selectable ${carbonPrefix}--tile--selectable`,
+      { [`${carbonPrefix}--tile--is-selected`]: isChecked },
+    ]"
+    data-tile="selectable"
+    tabindex="0"
+    :data-contained-checkbox-state="isChecked"
+  >
+    <input
+      tabindex="-1"
+      data-tile-input
+      :id="uid"
+      type="checkbox"
+      :checked="isChecked === true"
+      :aria-checked="`${isChecked}`"
+      :class="`${carbonPrefix}--tile-input`"
+      v-bind="$attrs"
+      @change="onChange"
+    />
+    <div :class="`${carbonPrefix}--tile__checkmark`">
+      <CheckmarkFilled16 />
+    </div>
+    <div :class="`${carbonPrefix}--tile-content`">
+      <slot>
+        <!-- Tile content here -->
+      </slot>
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvCheck, useCheck } from '../../use/cvCheck';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
+import { toRefs } from 'vue';
+
+const props = defineProps({
+  ariaLabel: { type: String, default: 'tile' },
+  ...propsCvCheck,
+  ...propsCvId,
+});
+
+const uid = useCvId(props, true);
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const { onChange, isChecked } = useCheck(toRefs(props), emit);
+</script>

package/src/components/CvTile/CvTileStandard.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="cv-tile-standard">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup></script>

package/src/components/CvTile/index.js

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