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

package/src/components/CvProgress/CvProgress.vue

@@ -0,0 +1,78 @@
+<template>
+  <ul
+    data-progress
+    data-progress-current
+    :class="[
+      `cv-progress ${carbonPrefix}--progress`,
+      { [`${carbonPrefix}--progress--space-equal`]: isEqual },
+      { [`${carbonPrefix}--progress--vertical`]: vertical },
+    ]"
+  >
+    <slot>
+      <cv-progress-step
+        v-for="(step, index) in steps"
+        :key="`step:${index}:${initialStep > index}`"
+        :label="step"
+        :complete="initialStep > index"
+        @step-clicked="emit('step-clicked', { ...$event, index })"
+      />
+    </slot>
+  </ul>
+</template>
+
+<script setup>
+// noinspection ES6PreferShortImport
+import { carbonPrefix } from '../../global/settings';
+import CvProgressStep from './CvProgressStep.vue';
+import { computed, onMounted, provide, ref, watch } from 'vue';
+
+const props = defineProps({
+  /**
+   * Optionally specify the current step array index
+   */
+  initialStep: { type: Number, default: 0 },
+  /**
+   * An array of labels for the steps. Use `cv-progress-step` components for more control over the step logic.
+   */
+  steps: Array,
+  /**
+   * Determines whether the ProgressIndicator should be rendered vertically.
+   */
+  vertical: { type: Boolean, default: false },
+  /**
+   * Specify whether the progress steps should be split equally in size in the div
+   */
+  spaceEqually: { type: Boolean, default: false },
+});
+const emit = defineEmits(['step-clicked']);
+
+const isEqual = computed(() => props.spaceEqually && !props.vertical);
+provide('progress-space-equally', isEqual);
+const completedSteps = ref(new Set());
+provide('progress-completed-steps', completedSteps);
+
+/**
+ * @typedef ProgressStepData
+ * @type {string} uid
+ * @type {string} label
+ */
+/**
+ * @type {Ref<UnwrapRef<Array<ProgressStepData>>>}
+ */
+const progressSteps = ref([]);
+provide('progress-steps', progressSteps);
+
+const currentStep = ref('');
+provide('progress-current-step', currentStep);
+function updateSteps() {
+  if (
+    props.initialStep > -1 &&
+    props.initialStep < progressSteps.value.length
+  ) {
+    const step = progressSteps.value[props.initialStep];
+    currentStep.value = step.uid;
+  } else currentStep.value = '';
+}
+onMounted(updateSteps);
+watch(() => props.initialStep, updateSteps);
+</script>

package/src/components/CvProgress/CvProgressStep.vue

@@ -0,0 +1,124 @@
+<!--suppress HtmlUnknownTag -->
+<template>
+  <li
+    :class="[
+      `cv-progress-step ${carbonPrefix}--progress-step`,
+      `${carbonPrefix}--progress-step--${internalState}`,
+    ]"
+    :id="uid"
+    :aria-disabled="disabled"
+  >
+    <button
+      type="button"
+      :class="[
+        `${carbonPrefix}--progress-step-button`,
+        { [`${carbonPrefix}--progress-step-button--unclickable`]: isCurrent },
+      ]"
+      tabindex="-1"
+      :title="label"
+      @click.prevent="emit('step-clicked', { uid })"
+    >
+      <span v-if="isCurrent" :class="`${carbonPrefix}--assistive-text`"
+        >Current</span
+      >
+      <slot name="step-icon">
+        <component :is="stepIcon" :class="stepClass">
+          <title>{{ description }}</title>
+        </component>
+      </slot>
+      <div
+        :class="`${carbonPrefix}--progress-text`"
+        :style="{ maxWidth: isEqual ? 'calc(100% - 1rem)' : undefined }"
+      >
+        <!-- todo: add tooltip when tooltip is implemented -->
+        <!-- <cv-tooltip v-if="tipText" ... v-else -->
+        <div :class="[`${carbonPrefix}--progress-label`]">
+          {{ label }}
+        </div>
+        <p v-if="additionalInfo" class="bx--progress-optional">
+          {{ additionalInfo }}
+        </p>
+      </div>
+      <span :class="`${carbonPrefix}--progress-line`"></span>
+    </button>
+  </li>
+</template>
+
+<script setup>
+import {
+  Incomplete16,
+  CheckmarkOutline16,
+  Warning16,
+  CircleDash16,
+} from '@carbon/icons-vue';
+// noinspection ES6PreferShortImport
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const STEP_CURRENT = 'current';
+const STEP_COMPLETE = 'complete';
+const STEP_INCOMPLETE = 'incomplete';
+const STEP_DISABLED = 'disabled';
+
+const props = defineProps({
+  additionalInfo: String,
+  description: String,
+  disabled: Boolean,
+  invalid: Boolean,
+  label: String,
+  tipText: String,
+  complete: Boolean,
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+const isEqual = inject('progress-space-equally');
+
+const emit = defineEmits(['step-clicked']);
+
+const internalState = ref(STEP_INCOMPLETE);
+/**
+ * @type {Ref<UnwrapRef<string>>}
+ */
+const currentStep = inject('progress-current-step');
+const isCurrent = computed(() => {
+  return uid.value === currentStep.value;
+});
+/**
+ * @type {Ref<UnwrapRef<Array<ProgressStepData>>>}
+ */
+const progressSteps = inject('progress-steps');
+/**
+ * @type {Ref<UnwrapRef<Set<string>>>}
+ */
+const completedSteps = inject('progress-completed-steps');
+function checkCurrentStep() {
+  if (props.disabled) internalState.value = STEP_DISABLED;
+  else if (isCurrent.value) internalState.value = STEP_CURRENT;
+  else if (props.complete) internalState.value = STEP_COMPLETE;
+  else internalState.value = STEP_INCOMPLETE;
+
+  const stepData = { uid: uid.value, state: internalState.value };
+  const index = progressSteps.value.findIndex(step => step.uid === uid.value);
+  if (index > -1) progressSteps.value.splice(index, 1, stepData);
+  else progressSteps.value.push(stepData);
+}
+onMounted(checkCurrentStep);
+watch(currentStep, checkCurrentStep);
+watch(completedSteps, checkCurrentStep);
+
+onBeforeUnmount(() => {
+  const index = progressSteps.value.findIndex(step => step.uid === uid.value);
+  if (index > -1) progressSteps.value.splice(index, 1);
+});
+const stepClass = computed(() => {
+  return props.invalid ? `${carbonPrefix}--progress__warning` : '';
+});
+
+const stepIcon = computed(() => {
+  if (props.invalid) return Warning16;
+  else if (internalState.value === STEP_CURRENT) return Incomplete16;
+  else if (internalState.value === STEP_COMPLETE) return CheckmarkOutline16;
+  else return CircleDash16;
+});
+</script>

package/src/components/CvProgress/index.js

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

package/src/components/CvRadioButton/CvRadioButton.stories.js

@@ -0,0 +1,166 @@
+import { action } from '@storybook/addon-actions';
+import { CvRadioButton, CvRadioGroup } from '.';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { ref } from 'vue';
+
+export default {
+  title: `${sbCompPrefix}/CvRadioButton`,
+  component: CvRadioButton,
+  argTypes: {
+    checked: {
+      type: 'boolean',
+      control: false,
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+    },
+    label: {
+      description: 'radio-button label',
+      control: false,
+    },
+    hideLabel: {
+      description:
+        'makes the label visually hidden but still labels the radio input',
+    },
+    labelLeft: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description: 'position label on left',
+    },
+    vertical: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Property of CvRadioGroup component - stacks inside radio components vertically',
+    },
+  },
+};
+
+const DefaultRadioItems = [
+  {
+    label: 'radio-1',
+    id: 'value-1',
+    checked: true,
+  },
+  {
+    label: 'radio-2',
+    id: 'value-2',
+    disabled: true,
+  },
+  {
+    label: 'radio-3',
+    id: 'value-3',
+  },
+];
+
+const DefaultStoryParameters = {
+  controls: {
+    exclude: ['change', 'update:modelValue', 'modelValue'],
+  },
+};
+
+const defaultTemplate = `
+  <cv-radio-group v-bind="args" @change="onChange">
+    <cv-radio-button
+      v-for="({id, label, checked, disabled}, index) in DefaultRadioItems"
+      :key="index"
+      name="group-1"
+      :label="label"
+      :value="id"
+      :checked="checked"
+      :disabled="disabled"
+      :hide-label="hideLabel"
+      :label-left='labelLeft'
+    />
+  </cv-radio-group>
+`;
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvRadioButton, CvRadioGroup },
+    template: defaultTemplate,
+    setup() {
+      return {
+        args,
+        hideLabel: args.hideLabel,
+        labelLeft: args.labelLeft,
+        onChange: action('change'),
+        DefaultRadioItems,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  vertical: false,
+};
+Default.parameters = storyParametersObject(
+  DefaultStoryParameters,
+  defaultTemplate,
+  Default.args
+);
+
+const vModelTemplate = `
+  <cv-radio-group v-bind="args" @change="onChange">
+    <cv-radio-button
+      v-for="({id, label, checked, disabled}, index) in DefaultRadioItems"
+      v-model="modelValue"
+      :key="index"
+      name="group-1"
+      :label="label"
+      :value="id"
+      :disabled="disabled"
+      :hide-label="hideLabel"
+      :label-left='labelLeft'
+    />
+  </cv-radio-group>
+
+  <div style="margin-top:1rem; background-color: #888888;  padding:1rem">
+    V-model:
+    <template
+      v-for="({id, label}, index) in DefaultRadioItems"
+      :key="index"
+    >
+      <input name="modelValue" :id="id" type="radio" @change="(ev) => {modelValue = ev.target.id}" :checked="id === modelValue" />
+      <label :for="id" style="margin-right: 16px;">{{label}}:</label>
+    </template>
+
+    <div style="margin-top: 16px;">Checked: <span style="font-weight: bold;">{{modelValue}}</span></div>
+  </div>
+`;
+
+const VModelTemplate = args => {
+  return {
+    components: { CvRadioButton, CvRadioGroup },
+    template: vModelTemplate,
+    setup() {
+      return {
+        args,
+        hideLabel: args.hideLabel,
+        labelLeft: args.labelLeft,
+        modelValue: ref(DefaultRadioItems[0].id),
+        onChange: action('change'),
+        DefaultRadioItems,
+      };
+    },
+  };
+};
+
+export const VModel = VModelTemplate.bind({});
+VModel.parameters = storyParametersObject(
+  DefaultStoryParameters,
+  vModelTemplate,
+  VModel.args
+);

package/src/components/CvRadioButton/CvRadioButton.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    :class="[
+      `cv-radio-button ${carbonPrefix}--radio-button-wrapper`,
+      { [`${carbonPrefix}--radio-button-wrapper--label-left`]: labelLeft },
+    ]"
+  >
+    <input
+      v-bind="$attrs"
+      :id="cvId"
+      :checked="isChecked"
+      :class="`${carbonPrefix}--radio-button`"
+      ref="input"
+      type="radio"
+      :value="value"
+      @change="onChange"
+    />
+    <!-- symbol causes problem in codepen? -->
+    <label :for="cvId" :class="`${carbonPrefix}--radio-button__label`">
+      <span :class="`${carbonPrefix}--radio-button__appearance`"></span>
+      <span
+        v-if="label"
+        :class="{ [`${carbonPrefix}--visually-hidden`]: hideLabel }"
+      >
+        {{ label }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, propsCvId, useMethods, useRadio } from '../../use';
+
+const props = defineProps({
+  modelValue: String,
+  checked: Boolean,
+  label: String,
+  value: { type: String, required: true },
+  hideLabel: Boolean,
+  labelLeft: Boolean,
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+useMethods({ input: ['blur', 'focus'] });
+const { isChecked, onChange } = useRadio(props, emit);
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/CvRadioButton/CvRadioGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="`cv-radio-group ${carbonPrefix}--form-item`">
+    <div
+      :class="[
+        `${carbonPrefix}--radio-button-group`,
+        { [`${carbonPrefix}--radio-button-group--vertical`]: vertical },
+      ]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { provide } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+defineProps({
+  vertical: Boolean,
+});
+
+const emit = defineEmits(['change']);
+
+provide('onRadioItemChange', clickedItemCvId => {
+  emit('change', clickedItemCvId);
+});
+</script>

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvRadioButton matches render when checked 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" class="bx--radio-button" type="radio" value=""><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;
+
+exports[`CvRadioButton matches render when modelValue is equal to value 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" class="bx--radio-button" type="radio" value="test value"><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;
+
+exports[`CvRadioButton matches render when modelValue is not equal to value 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" class="bx--radio-button" type="radio" value="test value"><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">test label</span></label></div>`;
+
+exports[`CvRadioButton matches render with left label 1`] = `<div class="cv-radio-button bx--radio-button-wrapper bx--radio-button-wrapper--label-left"><input id="1" class="bx--radio-button" type="radio" value=""><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">left label</span></label></div>`;
+
+exports[`CvRadioButton matches render with right label 1`] = `<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" class="bx--radio-button" type="radio" value=""><!-- symbol causes problem in codepen? --><label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span><span class="">right label</span></label></div>`;
+
+exports[`CvRadioGroup matches render when horizontal 1`] = `
+<div class="cv-radio-group bx--form-item">
+  <div class="bx--radio-button-group">
+    <div class="cv-radio-button-stub">RadioButtonStub</div>
+  </div>
+</div>
+`;
+
+exports[`CvRadioGroup matches render when vertical 1`] = `
+<div class="cv-radio-group bx--form-item">
+  <div class="bx--radio-button-group bx--radio-button-group--vertical">
+    <div class="cv-radio-button-stub">RadioButtonStub</div>
+  </div>
+</div>
+`;

package/src/components/CvRadioButton/index.js

@@ -0,0 +1,6 @@
+import CvRadioButton from './CvRadioButton.vue';
+import CvRadioGroup from './CvRadioGroup.vue';
+
+export { CvRadioButton, CvRadioGroup };
+
+export default CvRadioButton;

package/src/components/CvSearch/CvSearch.stories.mdx

@@ -0,0 +1,168 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import CvSearch from './CvSearch.vue';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { SEARCH_SIZES } from './index';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+const myValue = ref('searching galaxies');
+
+<Meta title={`${sbCompPrefix}/CvSearch`} component={CvSearch} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvSearch,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      light: args.light,
+      label: args.label,
+      placeholder: args.placeholder,
+      disabled: args.disabled,
+      size: args.size,
+      ariaLabel: args.ariaLabel,
+      clearAriaLabel: args.clearAriaLabel,
+      formItem: args.formItem,
+      expandable: args.expandable,
+      value: args.value,
+      myValue: myValue,
+      onInput: action('input'),
+    };
+  },
+  template: args.template,
+});
+const defaultTemplate = `
+<cv-search
+  :light="light"
+  :label="label"
+  :placeholder="placeholder"
+  :disabled="disabled"
+  :size="size"
+  :expandable="expandable"
+  :value="value"
+  :form-item="formItem"
+  :aria-label="ariaLabel"
+  :clear-aria-label="clearAriaLabel"
+  @input="onInput"
+  >
+</cv-search>
+`;
+const vModelTemplate = `
+<div>
+  <cv-search
+    v-model:value="myValue"
+    :light="light"
+    :label="label"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :size="size"
+    :expandable="expandable"
+    :form-item="formItem"
+    :aria-label="ariaLabel"
+    :clear-aria-label="clearAriaLabel"
+    >
+  </cv-search>
+  <div style="margin-top:1rem; background-color: #888888;  padding:1rem">
+    <div style="padding:1rem">v-model value: {{ myValue }}</div>
+    <input type="search" v-model="myValue"/>
+  </div>
+</div>
+`;
+
+# CvSearch
+
+Migration notes:
+
+- The `v-model` is different in Vue 3 than Vue 2. If you specify it you will see an error deprecation message in the log.
+  Please use `v-model:value=something` instead.
+- The "toolbar" mode is removed in this version. Please use the `expandable` mode instead.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'input',
+          'modelValue',
+          'template',
+          'update:modelValue',
+          'update:value',
+          'large',
+          'small',
+          'toolbarAriaLabel',
+          'kind',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      light: false,
+      disabled: false,
+      placeholder: 'JWST: search for light from the first stars',
+    }}
+    argTypes={{
+      light: {
+        description: '`true` to use the light version.',
+        table: { category: 'props', defaultValue: { summary: false } },
+      },
+      size: {
+        control: 'select',
+        default: 'xl',
+        options: SEARCH_SIZES,
+        table: { defaultValue: { summary: 'xl' } },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# v-model
+
+- The `v-model` is different in Vue 3 than Vue 2.If you specify it you will see an error deprecation message in the log.
+  Please use `v-model:value=something` instead.
+
+<Canvas>
+  <Story
+    name="v-model"
+    parameters={{
+      controls: {
+        exclude: [
+          'input',
+          'modelValue',
+          'template',
+          'update:modelValue',
+          'update:value',
+          'large',
+          'small',
+          'toolbarAriaLabel',
+          'kind',
+        ],
+      },
+      docs: { source: { code: vModelTemplate } },
+    }}
+    args={{
+      template: vModelTemplate,
+      light: false,
+      disabled: false,
+      placeholder: 'JWST: search for light from the first stars',
+    }}
+    argTypes={{
+      light: {
+        description: '`true` to use the light version.',
+        table: { category: 'props', defaultValue: { summary: false } },
+      },
+      size: {
+        control: 'select',
+        default: 'xl',
+        options: SEARCH_SIZES,
+        table: { defaultValue: { summary: 'xl' } },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>