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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.4-alpha.0",
+  "version": "3.0.5-alpha.0",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",
@@ -202,5 +202,5 @@
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
   "sideEffects": true,
-  "gitHead": "de2206c3b902917df58415daeda57ee823b126db"
+  "gitHead": "797d1eaacec0dcb8802ff5fea1fb08947955c9aa"
 }

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -69,5 +69,3 @@ const cvId = useCvId(props);
 const emit = defineEmits(['update:modelValue', 'change']);
 const { onChange, isChecked } = useCheck(toRefs(props), emit);
 </script>
-
-<style scoped></style>

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;

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
+);