@carbon/vue 2.45.1 → 3.0.5-alpha.0

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;

package/src/components/CvTextInput/CvTextInput.stories.js

@@ -0,0 +1,245 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import CvTextInput from '.';
+import { ref } from 'vue';
+
+export default {
+  title: `${sbCompPrefix}/CvTextInput`,
+  component: CvTextInput,
+  argTypes: {
+    // attrs
+    disabled: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'attributes',
+      },
+      description: 'Specify whether the `<input>` should be disabled',
+    },
+    placeholder: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'attributes',
+      },
+      description: 'Specify the placeholder attribute for the `<input>`',
+    },
+    // 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",
+    },
+    passwordHideLabel: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: '"Hide password" tooltip text on password visibility toggle',
+    },
+    passwordShowLabel: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: '"Show password" tooltip text on password visibility toggle',
+    },
+    passwordVisible: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description: 'Toggle password visibility.',
+    },
+    type: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+        defaultValue: { summary: 'text' },
+      },
+      options: ['text', 'password'],
+      control: {
+        type: 'select',
+      },
+      description: 'Input type, only `text` and `password` are available',
+    },
+    warnText: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide the text that is displayed when the control is in warning state',
+    },
+    // slots
+    '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-text-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 />
+  </cv-text-input>
+`;
+const Template = args => {
+  return {
+    components: { CvTextInput },
+    setup: () => ({ args }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  helperText: 'Same helper text',
+  label: 'Text input label',
+  placeholder: 'Sample placeholder',
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Slots = Template.bind({});
+Slots.args = {
+  'invalid-message': 'Same invalid message',
+  'warn-text': 'Same warn message',
+  'helper-text': 'Same help message',
+  label: 'Text input label',
+  placeholder: 'Sample placeholder',
+};
+Slots.parameters = storyParametersObject(
+  Slots.parameters,
+  template,
+  Slots.args
+);
+
+const vModelTemplate = `
+  <cv-text-input v-bind="args" v-model="value" />
+  <p style="margin-top: 1rem;">Value passed to v-model: {{ value }}</p>
+`;
+const VModelTemplate = args => {
+  return {
+    components: { CvTextInput },
+    setup: () => ({ args, value: ref('') }),
+    template: vModelTemplate,
+  };
+};
+export const vModel = VModelTemplate.bind({});
+vModel.args = {
+  label: 'Text input label',
+  placeholder: 'Sample placeholder',
+};
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  vModelTemplate,
+  vModel.args
+);
+
+export const Password = Template.bind({});
+Password.args = {
+  label: 'Password input label',
+  type: 'password',
+};
+Password.parameters = storyParametersObject(
+  Password.parameters,
+  template,
+  Password.args
+);

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;