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

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>

package/src/components/CvSearch/CvSearch.vue

@@ -0,0 +1,250 @@
+<template>
+  <component
+    :is="formItem ? 'div' : CvEmpty"
+    :class="`cv-search ${carbonPrefix}--form-item`"
+  >
+    <div
+      :aria-label="internalAriaLabel"
+      :aria-labelledby="internalAriaLabelBy"
+      :class="[
+        `${carbonPrefix}--search`,
+        `${carbonPrefix}--search--${size}`,
+        {
+          [`${carbonPrefix}--search--expandable`]: expandable,
+          [`${carbonPrefix}--search--expanded`]: isExpanded,
+          [`${carbonPrefix}--search--disabled`]: disabled,
+          [`${carbonPrefix}--search--light`]: isLight,
+          'cv-search': !formItem,
+        },
+      ]"
+      role="search"
+      ref="elSearch"
+    >
+      <div
+        :class="`${carbonPrefix}--search-magnifier`"
+        @click="toggleActive(true)"
+        @blur="checkFocus"
+      >
+        <search-icon :class="`${carbonPrefix}--search-magnifier-icon`" />
+      </div>
+
+      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{
+        label
+      }}</label>
+
+      <input
+        role="searchbox"
+        :id="uid"
+        :class="`${carbonPrefix}--search-input`"
+        v-bind="$attrs"
+        v-model="internalSearchText"
+        @input="onInput"
+        type="text"
+        ref="elInput"
+        :placeholder="placeholder"
+        :aria-labelledby="uid"
+        @blur="checkFocus"
+        @click="toggleActive"
+        @keydown.esc="onClearClick"
+        :disabled="disabled ? 'true' : undefined"
+      />
+
+      <button
+        type="button"
+        :class="[
+          `${carbonPrefix}--search-close`,
+          { [`${carbonPrefix}--search-close--hidden`]: !clearVisible },
+        ]"
+        :title="clearAriaLabel"
+        :aria-label="clearAriaLabel"
+        @click="onClearClick"
+      >
+        <close-icon />
+      </button>
+    </div>
+  </component>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useIsLight, props as propsTheme } from '../../use/cvTheme';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import SearchIcon from '@carbon/icons-vue/es/search/16';
+import CloseIcon from '@carbon/icons-vue/es/close/16';
+import { computed, ref, watch } from 'vue';
+import { SEARCH_SIZES } from '.';
+import CvEmpty from '../CvEmpty/_CvEmpty.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  ariaLabel: { type: String, default: 'search input' },
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  clearAriaLabel: { type: String, default: 'Clear search input' },
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: { type: Boolean, default: false },
+  /**
+   * Do no show full control until it has focus. Similar to deprecated toolbar search.
+   */
+  expandable: { type: Boolean, default: false },
+  /**
+   * Wrap search in `<div>` if part of a form
+   */
+  formItem: { type: Boolean, default: true },
+  /**
+   * @deprecated use expandable
+   */
+  kind: {
+    type: String,
+    default: undefined,
+    validator: () => {
+      console.warn('Deprecated: probably you want expandable=true');
+      return true;
+    },
+  },
+  /**
+   * Provide the label text for the Search icon
+   */
+  label: String,
+  /**
+   * Specify the search size ('sm', 'md', 'lg', 'xl')
+   */
+  size: {
+    type: String,
+    default: 'xl',
+    validator: val => SEARCH_SIZES.includes(val),
+  },
+  /**
+   * @deprecated use size
+   */
+  small: {
+    type: Boolean,
+    default: undefined,
+    validator: val => {
+      if (val !== undefined) {
+        console.error('Error: Use size property: sm, lg or xl (default)');
+        return false;
+      }
+      return true;
+    },
+  },
+  /**
+   * @deprecated use size
+   */
+  large: {
+    type: Boolean,
+    default: undefined,
+    validator: val => {
+      if (val !== undefined) {
+        console.error('Error: Use size property: sm, lg or xl (default)');
+        return false;
+      }
+      return true;
+    },
+  },
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  value: String,
+  /**
+   * @deprecated use value
+   */
+  modelValue: {
+    type: String,
+    default: undefined,
+    validator: () => {
+      console.warn('Deprecated: use v-model:value instead');
+      return true;
+    },
+  },
+  /**
+   * Provide an optional placeholder text for the Search. Note: if the label and placeholder differ, VoiceOver on Mac will read both
+   */
+  placeholder: { type: String, default: 'Search' },
+  /**
+   * @deprecated
+   */
+  toolbarAriaLabel: {
+    type: String,
+    validator: () => {
+      console.warn('Deprecated: probably you want expandable=true');
+      return true;
+    },
+  },
+  ...propsTheme,
+  ...propsCvId,
+});
+const uid = useCvId(props, true);
+const isLight = useIsLight(props);
+
+const clearVisible = ref(props.value ? props.value.length : false);
+const internalSearchText = ref(props.value || props.modelValue);
+const searchActive = ref(false);
+watch(
+  () => props.value,
+  () => {
+    clearVisible.value = props.value ? props.value.length : false;
+    internalSearchText.value = props.value;
+  }
+);
+
+const internalAriaLabel = computed(() => {
+  if (!props.label) return props.ariaLabel;
+  else return undefined;
+});
+const internalAriaLabelBy = computed(() => {
+  if (props.label) return uid.value;
+  else return undefined;
+});
+
+const emit = defineEmits(['input', 'update:value', 'update:modelValue']);
+watch(internalSearchText, () => {
+  emit('input', internalSearchText.value);
+  emit('update:value', internalSearchText.value);
+  if (props.modelValue) {
+    console.warn('Deprecated: use v-model:value instead');
+    emit('update:modelValue', internalSearchText.value);
+  }
+});
+function onClearClick() {
+  internalSearchText.value = '';
+  clearVisible.value = false;
+  if (props.expandable) {
+    elInput.value?.focus();
+  }
+  checkFocus();
+}
+function onInput() {
+  clearVisible.value = internalSearchText.value.length > 0;
+}
+const elInput = ref(null);
+const isExpanded = computed(() => {
+  return props.expandable && searchActive.value;
+});
+function toggleActive(force) {
+  if (props.disabled) return;
+
+  if (typeof force === 'boolean') searchActive.value = force;
+  else if (internalSearchText.value?.length > 0) searchActive.value = true;
+  else searchActive.value = !searchActive.value;
+
+  if (searchActive.value) {
+    elInput.value?.focus();
+  }
+}
+const elSearch = ref(null);
+function checkFocus() {
+  if (props.disabled) return;
+
+  if (props.expandable) {
+    if (elInput.value !== document.activeElement)
+      searchActive.value = internalSearchText.value?.length > 0;
+  }
+}
+</script>

package/src/components/CvSearch/index.js

@@ -0,0 +1,3 @@
+import CvSearch from './CvSearch.vue';
+const SEARCH_SIZES = ['sm', 'lg', 'xl'];
+export { CvSearch, SEARCH_SIZES };

package/src/components/CvSelect/CvSelect.vue

@@ -1,13 +1,14 @@
 <template>
   <cv-wrapper
+    ref="el"
     :tag-type="formItem ? 'div' : ''"
     :class="`cv-select ${carbonPrefix}--form-item`"
-    ref="el"
   >
     <div
       :data-test="value"
       :class="[
         `${carbonPrefix}--select`,
+        `${carbonClasses}`,
         {
           'cv-select': !formItem,
           [`${carbonPrefix}--select--inline`]: inline,
@@ -48,9 +49,8 @@
                   size || 'md',
               },
             ]"
-            @change="onChange"
-            ref="select"
             :value="internalValue"
+            @change="onChange"
           >
             <slot></slot>
           </select>
@@ -77,7 +77,6 @@
         >
           <slot name="helper-text">{{ helperText }}</slot>
         </div>
-
         <!-- cv-wrapper div ${carbonPrefix}--select-input--inline__wrapper -->
       </cv-wrapper>
     </div>
@@ -87,7 +86,15 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
-import { computed, onMounted, onUpdated, ref, useSlots, watch } from 'vue';
+import {
+  computed,
+  onMounted,
+  onUpdated,
+  ref,
+  useAttrs,
+  useSlots,
+  watch,
+} from 'vue';
 import {
   WarningFilled16 as WarningFilled,
   ChevronDown16 as ChevronDown,
@@ -112,6 +119,7 @@ const props = defineProps({
   // multiple does not work with styling from carbon-components 9.20
   multiple: {
     type: String,
+    default: undefined,
     validator: () => {
       console.warn('property multiple not supported in CvSelect');
       return false;
@@ -123,7 +131,7 @@ const props = defineProps({
     default: 'md',
     validator: val => ['sm', 'md', 'lg'].includes(val),
   },
-  modelValue: { type: String },
+  modelValue: { type: String, default: undefined },
   ...propsTheme,
   ...propsCvId,
 });
@@ -221,4 +229,17 @@ function updateWarning() {
 }
 onMounted(updateWarning);
 onUpdated(updateWarning);
+
+// There is an oddity here with Vue2 vs Vue3. The Vue2 component uses CvWrapper to determine if this component
+// is wrapped in a div or not. Either way the class attributes are applied in Vue2. In Vue3 the attributes are
+// not applied. The CvTimePicker consumes this component and needs to apply styles in both the wrapped and
+// unwrapped case. Here we apply any carbon styles to the outer div.
+const attrs = useAttrs();
+const carbonClasses = computed(() => {
+  if (props.formItem || !attrs.class) return '';
+  return attrs.class
+    ?.split(' ')
+    .filter(c => c.startsWith(`${carbonPrefix}--`))
+    .join(' ');
+});
 </script>

package/src/components/CvSlider/CvSlider.stories.js

@@ -0,0 +1,166 @@
+import { ref } from 'vue';
+import { action } from '@storybook/addon-actions';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbSliderPrefix } from './sbSliderPrefix';
+import { CvSlider } from '.';
+
+export default {
+  title: `${sbCompPrefix}/${sbSliderPrefix}/CvSlider`,
+  component: CvSlider,
+  argTypes: {
+    disabled: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'attributes',
+      },
+    },
+    value: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+    },
+    label: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'Slider top label',
+    },
+    light: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+    },
+    min: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'Slider input min value',
+    },
+    max: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'Slider input max value',
+    },
+    minLabel: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'Label for min side of slider, otherwise min value used',
+    },
+    maxLabel: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'Label for max side of slider, otherwise max value used',
+    },
+    step: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'Slider input step value',
+    },
+    stepMultiplier: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'multiplier > 1',
+    },
+  },
+
+  // events
+  change: {
+    type: 'event',
+    table: {
+      type: { summary: 'event' },
+      category: 'events',
+    },
+    control: { type: null },
+  },
+  'update:modelValue': {
+    type: 'event',
+    table: {
+      type: { summary: 'event' },
+      category: 'events',
+    },
+    control: { type: null },
+  },
+};
+
+const template = `<cv-slider v-bind="args" @change="onChange"/>`;
+const Template = args => {
+  return {
+    components: { CvSlider },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+const vModelTemplate = `
+  <cv-slider v-bind="args" v-model="modelValue" />
+
+  <div style="margin-top:1rem; background-color: #888888; padding:1rem">
+    <div style="font-size: 150%">
+      Sample interaction
+    </div>
+
+    <input v-model="modelValue" type="string" />
+    <div>
+      Entered value:
+      <span style="font-weight: bold;">{{modelValue}}</span>
+    </div>
+  </div>
+`;
+
+const VModelTemplate = args => {
+  return {
+    components: { CvSlider },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+      modelValue: ref('15'),
+    }),
+    template: vModelTemplate,
+  };
+};
+
+export const vModel = VModelTemplate.bind({});
+vModel.args = {};
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  vModelTemplate,
+  vModel.args
+);