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

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

package/src/components/CvSlider/CvSlider.vue

@@ -0,0 +1,324 @@
+<template>
+  <div :class="`cv-slider ${carbonPrefix}--form-item`">
+    <label
+      v-show="label"
+      :for="cvId"
+      :class="[
+        `${carbonPrefix}--label`,
+        { [`${carbonPrefix}--label--disabled`]: disabled },
+      ]"
+      :id="labelId"
+    >
+      {{ label }}
+    </label>
+
+    <div :class="`${carbonPrefix}--slider-container`">
+      <span :class="`${carbonPrefix}--slider__range-label`">
+        {{ internalMinLabel }}
+      </span>
+
+      <div
+        :class="[
+          `${carbonPrefix}--slider`,
+          { [`${carbonPrefix}--slider--disabled`]: disabled },
+        ]"
+        data-slider
+        data-slider-input-box="#slider-input-box"
+      >
+        <div
+          :class="`${carbonPrefix}--slider__track`"
+          @click="onTrackClick"
+          ref="track"
+        ></div>
+
+        <div
+          :class="`${carbonPrefix}--slider__filled-track`"
+          :style="`width: ${percentage};`"
+        ></div>
+
+        <div
+          :class="[
+            `${carbonPrefix}--slider__thumb`,
+            {
+              [`${carbonPrefix}--slider__thumb--clicked`]: animateClick,
+            },
+          ]"
+          tabindex="0"
+          :aria-labelledby="labelId"
+          :style="`left: ${percentage};`"
+          ref="thumb"
+          @keydown.up.right.prevent="onUp"
+          @keydown.down.left.prevent="onDown"
+          @mousedown="onStartDrag"
+        ></div>
+
+        <input
+          :id="cvId"
+          :class="`${carbonPrefix}--slider__input`"
+          type="range"
+          :step="step"
+          :min="min"
+          :max="max"
+          ref="range"
+        />
+      </div>
+
+      <span :class="`${carbonPrefix}--slider__range-label`">
+        {{ internalMaxLabel }}
+      </span>
+
+      <input
+        type="string"
+        :class="[
+          `${carbonPrefix}--text-input ${carbonPrefix}--slider-text-input`,
+          { [`${carbonPrefix}--text-input--light`]: isLight },
+        ]"
+        :placeholder="min"
+        v-model="internalValue"
+        @change="onChange"
+        ref="inputBox"
+        @keydown.up.prevent="onUp"
+        @keydown.down.prevent="onDown"
+        :disabled="disabled"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, nextTick, watch } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import { useIsLight, props as propsTheme } from '../../use/cvTheme';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+  disabled: Boolean,
+  label: {
+    type: String,
+    default: undefined,
+  },
+  // NOTE: It is not safe to rely on Numbers for non-integer steps
+  min: {
+    type: String,
+    default: '0',
+  },
+  max: {
+    type: String,
+    default: '100',
+  },
+  minLabel: {
+    type: String,
+    default: undefined,
+  },
+  maxLabel: {
+    type: String,
+    default: undefined,
+  },
+  step: {
+    type: String,
+    default: '1',
+  },
+  stepMultiplier: {
+    type: String,
+    default: '4',
+    validator(val) {
+      if (val.length) {
+        let intMultiplier = parseInt(val);
+        if (isNaN(intMultiplier) || intMultiplier < 1) {
+          console.warn('cv-slider: multiplier must be >= 1');
+          return false;
+        }
+      }
+      return true;
+    },
+  },
+  ...propsTheme,
+  ...propsCvId,
+});
+
+const range = ref(null);
+const thumb = ref(null);
+const track = ref(null);
+const DefaultRangeMin = 0;
+const DefaultRangeMax = 100;
+const DefaultValue = 0;
+const StepNaNReplacement = 0;
+const StepDefaultValue = 1;
+const DefaultMultiplier = 4;
+
+const emit = defineEmits(['update:modelValue', 'change', 'update:value']);
+
+const cvId = useCvId(props, true);
+const isLight = useIsLight(props);
+const internalValue = ref('');
+const animateClick = ref(false);
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartValue = ref(0);
+const percentage = ref('0%');
+
+const labelId = computed(() => `${cvId.value}-label`);
+
+const internalMinLabel = computed(() => props.minLabel ?? getMin());
+
+const internalMaxLabel = computed(() => props.maxLabel ?? getMax());
+
+const rangePropsObserver = computed(() => ({
+  min: props.min,
+  max: props.max,
+  step: props.step,
+}));
+
+const internalMultiplier = computed(() => {
+  let intMultiplier = parseInt(props.stepMultiplier);
+  // default to 4 fro multiplier
+  return isNaN(intMultiplier) ? DefaultMultiplier : Math.max(intMultiplier, 1);
+});
+
+const getRangeAttributeValue = (
+  attributeName,
+  defaultForNaN,
+  defaultReturnValue
+) => {
+  if (range?.value) {
+    const val = parseFloat(range.value[attributeName]);
+    return isNaN(val) ? defaultForNaN : val;
+  }
+  return defaultReturnValue ?? defaultForNaN;
+};
+
+const getMin = () => {
+  return getRangeAttributeValue('min', DefaultRangeMin);
+};
+
+const getMax = () => {
+  return getRangeAttributeValue('max', DefaultRangeMax);
+};
+
+const getValue = () => {
+  const middleValue = (getMax() + getMin()) / 2;
+  return getRangeAttributeValue('value', DefaultValue, middleValue);
+};
+
+const getStep = () => {
+  return getRangeAttributeValue('step', StepNaNReplacement, StepDefaultValue);
+};
+
+const setValue = newValue => {
+  if (props.disabled) return;
+
+  range.value.value = newValue;
+  internalValue.value = range.value.value;
+
+  percentage.value = `${
+    ((internalValue.value - getMin()) * 100) / (getMax() - getMin())
+  }%`;
+
+  const { value: rangeValue } = range.value;
+  emit('update:modelValue', rangeValue);
+  emit('update:value', rangeValue);
+  emit('change', rangeValue);
+};
+
+const onChange = () => {
+  let newValue = internalValue.value.length
+    ? parseFloat(internalValue.value)
+    : getMin();
+  setValue(newValue);
+};
+
+const onStartDrag = ev => {
+  document.body.addEventListener('mousemove', onDrag);
+  document.body.addEventListener('mouseup', onStopDrag);
+
+  dragStartX.value = ev.clientX;
+  dragStartValue.value = getValue();
+  isDragging.value = true;
+};
+
+const onDrag = ev => {
+  if (isDragging.value) {
+    // percentage change
+    let newValue = (ev.clientX - dragStartX.value) / track.value.offsetWidth;
+    // uncapped new value
+    newValue = dragStartValue.value + (getMax() - getMin()) * newValue;
+    setValue(newValue);
+  }
+};
+
+const onStopDrag = () => {
+  isDragging.value = false;
+  document.body.removeEventListener('mousemove', onDrag);
+  document.body.removeEventListener('mouseup', onStopDrag);
+};
+
+const onTrackClick = ev => {
+  const afterAnimate = ev => {
+    if (ev.propertyName === 'left') {
+      animateClick.value = false;
+      thumb.value.removeEventListener('transitionend', afterAnimate);
+    }
+  };
+
+  let newValue = ev.offsetX / track.value.offsetWidth;
+  const min = getMin();
+  newValue = (getMax() - min) * newValue + min;
+  thumb.value.addEventListener('transitionend', afterAnimate);
+  animateClick.value = true;
+  setValue(newValue);
+};
+
+const onUpDown = (ev, isUp = true) => {
+  let curValue =
+    ev.target.type === 'number' ? parseFloat(ev.target.value) : getValue();
+  const step = getStep();
+  const progressValue = ev.shiftKey ? internalMultiplier.value * step : step;
+  const direction = isUp ? 1 : -1;
+  let newValue = curValue + progressValue * direction;
+  setValue(newValue);
+};
+
+const onUp = ev => {
+  onUpDown(ev);
+};
+
+const onDown = ev => {
+  onUpDown(ev, false);
+};
+
+onMounted(() => {
+  range.value.value = props.value ?? props.modelValue;
+  internalValue.value = range.value.value;
+  percentage.value = `${
+    ((internalValue.value - getMin()) * 100) / (getMax() - getMin())
+  }%`;
+});
+
+watch(
+  () => props.modelValue,
+  modelValue => {
+    setValue(modelValue);
+  }
+);
+
+watch(
+  () => props.value,
+  value => {
+    setValue(value);
+  }
+);
+
+watch(rangePropsObserver, () => {
+  nextTick(() => {
+    setValue(internalValue.value);
+  });
+});
+</script>

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

@@ -0,0 +1,26 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbSliderPrefix } from './sbSliderPrefix';
+import { CvSliderSkeleton } from '.';
+
+export default {
+  title: `${sbCompPrefix}/${sbSliderPrefix}/CvSliderSkeleton`,
+  component: CvSliderSkeleton,
+};
+
+const template = `<cv-slider-skeleton />`;
+const Template = () => {
+  return {
+    components: { CvSliderSkeleton },
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvSlider/CvSliderSkeleton.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :class="`cv-slider ${carbonPrefix}--form-item`">
+    <label :class="`${carbonPrefix}--label ${carbonPrefix}--skeleton`"></label>
+    <div :class="`${carbonPrefix}--slider-container ${carbonPrefix}--skeleton`">
+      <span :class="`${carbonPrefix}--slider__range-label`"></span>
+      <div :class="`${carbonPrefix}--slider`">
+        <div :class="`${carbonPrefix}--slider__track`"></div>
+        <div :class="`${carbonPrefix}--slider__filled-track`"></div>
+        <div :class="`${carbonPrefix}--slider__thumb`"></div>
+      </div>
+      <span :class="`${carbonPrefix}--slider__range-label`"></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvSlider should match snapshot 1`] = `
+<div class="cv-slider bx--form-item"><label for="abc" class="bx--label" id="abc-label" style="display: none;"></label>
+  <div class="bx--slider-container"><span class="bx--slider__range-label">0</span>
+    <div class="bx--slider" data-slider="" data-slider-input-box="#slider-input-box">
+      <div class="bx--slider__track"></div>
+      <div class="bx--slider__filled-track" style="width: 0%;"></div>
+      <div class="bx--slider__thumb" tabindex="0" aria-labelledby="abc-label" style="left: 0%;"></div><input id="abc" class="bx--slider__input" type="range" step="1" min="0" max="100">
+    </div><span class="bx--slider__range-label">100</span><input type="string" class="bx--text-input bx--slider-text-input" placeholder="0">
+  </div>
+</div>
+`;

package/src/components/CvSlider/__tests__/__snapshots__/CvSliderSkeleton.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvSliderSkeleton should match snapshot 1`] = `
+<div class="cv-slider bx--form-item"><label class="bx--label bx--skeleton"></label>
+  <div class="bx--slider-container bx--skeleton"><span class="bx--slider__range-label"></span>
+    <div class="bx--slider">
+      <div class="bx--slider__track"></div>
+      <div class="bx--slider__filled-track"></div>
+      <div class="bx--slider__thumb"></div>
+    </div><span class="bx--slider__range-label"></span>
+  </div>
+</div>
+`;

package/src/components/CvSlider/index.js

@@ -0,0 +1,5 @@
+import { default as CvSlider } from './CvSlider.vue';
+import { default as CvSliderSkeleton } from './CvSliderSkeleton.vue';
+
+export { CvSlider, CvSliderSkeleton };
+export default CvSlider;

package/src/components/CvSlider/sbSliderPrefix.js

@@ -0,0 +1,2 @@
+/* istanbul ignore next */
+export const sbSliderPrefix = 'CvSlider';