From 52ae7584c1ecdef480fb72ddaa65a51de884e2e8 Mon Sep 17 00:00:00 2001
From: OlkaB <o.barecka@gmail.com>
Date: Fri, 7 Jul 2023 08:04:04 +0100
Subject: [PATCH] feat: port CvNumberInput component to Vue3

---
 .../CvNumberInput/CvNumberInput.stories.js    | 169 +++++++++++++-
 .../CvNumberInput/CvNumberInput.vue           | 219 +++++++++++++++++-
 src/use/cvInput.js                            |  40 ++++
 3 files changed, 423 insertions(+), 5 deletions(-)
 create mode 100644 src/use/cvInput.js

diff --git a/src/components/CvNumberInput/CvNumberInput.stories.js b/src/components/CvNumberInput/CvNumberInput.stories.js
index ccc6e1700..ade7dedc0 100644
--- a/src/components/CvNumberInput/CvNumberInput.stories.js
+++ b/src/components/CvNumberInput/CvNumberInput.stories.js
@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions';
 import {
   sbCompPrefix,
   storyParametersObject,
@@ -8,16 +9,178 @@ import CvNumberInput from './CvNumberInput.vue';
 export default {
   title: `${sbCompPrefix}/${StorybookGroupConst}/CvNumberInput`,
   component: CvNumberInput,
-  argTypes: {},
+  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-number-input v-bind="args"></cv-number-input>`;
+const template = `<cv-number-input @change="onChange" @input="onInput" v-bind="args"></cv-number-input>`;
 const Template = (args, { argTypes }) => {
   return {
     props: Object.keys(argTypes),
     components: { CvNumberInput },
     template,
-    setup: () => ({ args }),
+    setup: () => ({
+      args,
+      onInput: action('input'),
+      onChange: action('change'),
+    }),
   };
 };
 
diff --git a/src/components/CvNumberInput/CvNumberInput.vue b/src/components/CvNumberInput/CvNumberInput.vue
index 80117fec9..36429b67a 100644
--- a/src/components/CvNumberInput/CvNumberInput.vue
+++ b/src/components/CvNumberInput/CvNumberInput.vue
@@ -1,5 +1,220 @@
 <template>
-  <div>CvNumberInput</div>
+  <cv-wrapper
+    :tag-type="formItem ? 'div' : ''"
+    class="cv-number-input"
+    :class="`${carbonPrefix}--form-item`"
+  >
+    <div
+      :class="[
+        `${carbonPrefix}--number`,
+        {
+          [`${carbonPrefix}--number--light`]: isLight,
+          [`${carbonPrefix}--number--helpertext`]: isHelper,
+          [`cv-number-input`]: !formItem,
+        },
+      ]"
+      :data-invalid="dataInvalidAttributeValue"
+    >
+      <label v-show="label" :for="cvId" :class="`${carbonPrefix}--label`">
+        {{ label }}
+      </label>
+
+      <div
+        :class="[
+          `${carbonPrefix}--number__input-wrapper`,
+          { [`${carbonPrefix}--number__input-wrapper--warning`]: isWarn },
+        ]"
+      >
+        <input
+          ref="input"
+          v-model.number="internalValue"
+          :id="cvId"
+          :data-invalid="dataInvalidAttributeValue"
+          type="number"
+          v-bind="$attrs"
+          :disabled="disabled"
+          :step="step"
+          :min="min"
+          :max="max"
+        />
+
+        <WarningFilled16 v-if="isInvalid" :class="iconClasses" />
+
+        <WarningAltFilled16 v-if="isWarn && !isInvalid" :class="iconClasses" />
+
+        <div :class="`${carbonPrefix}--number__controls`">
+          <button
+            :class="`${carbonPrefix}--number__control-btn down-icon`"
+            type="button"
+            :aria-label="ariaLabelForDownButton"
+            :disabled="disabled"
+            aria-live="polite"
+            aria-atomic="true"
+            @click="doDown"
+          >
+            <Subtract16 class="down-icon" />
+          </button>
+
+          <div :class="`${carbonPrefix}--number__rule-divider`" />
+
+          <button
+            :class="`${carbonPrefix}--number__control-btn up-icon`"
+            type="button"
+            :aria-label="ariaLabelForUpButton"
+            :disabled="disabled"
+            aria-live="polite"
+            aria-atomic="true"
+            @click="doUp"
+          >
+            <Add16 class="up-icon" />
+          </button>
+
+          <div :class="`${carbonPrefix}--number__rule-divider`" />
+        </div>
+      </div>
+
+      <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+        <slot name="invalid-message">{{ invalidMessage }}</slot>
+      </div>
+
+      <div
+        v-if="isWarn && !isInvalid"
+        :class="`${carbonPrefix}--form-requirement`"
+      >
+        <slot name="warn-text">{{ warnText }}</slot>
+      </div>
+
+      <div
+        v-if="!(isInvalid || isWarn) && isHelper"
+        :class="`${carbonPrefix}--form__helper-text`"
+      >
+        <slot name="helper-text">{{ helperText }}</slot>
+      </div>
+    </div>
+  </cv-wrapper>
 </template>
 
-<script setup></script>
+<script setup>
+import { computed, ref } from 'vue';
+import Add16 from '@carbon/icons-vue/es/add/16';
+import Subtract16 from '@carbon/icons-vue/es/subtract/16';
+import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/es/warning--alt--filled/16';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { props as propsTheme } from '../../use/cvTheme';
+import { useCvInputHelpers } from '../../use/cvInput';
+import { carbonPrefix } from '../../global/settings';
+import CvWrapper from '../CvWrapper/CvWrapper';
+
+const props = defineProps({
+  disabled: Boolean,
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  formItem: {
+    type: Boolean,
+    default: true,
+  },
+  helperText: {
+    type: String,
+    default: undefined,
+  },
+  invalidMessage: {
+    type: String,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  ariaLabelForUpButton: {
+    type: String,
+    default: 'Increase number input',
+  },
+  ariaLabelForDownButton: {
+    type: String,
+    default: 'Decrease number input',
+  },
+  min: {
+    type: [String, Number],
+    default: undefined,
+  },
+  max: {
+    type: [String, Number],
+    default: undefined,
+  },
+  step: {
+    type: [String, Number],
+    default: undefined,
+  },
+  warnText: {
+    type: String,
+    default: undefined,
+  },
+  ...propsCvId,
+  ...propsTheme,
+});
+
+const cvId = useCvId(props);
+const { isInvalid, isWarn, isHelper, isLight } = useCvInputHelpers(props);
+const dataInvalidAttributeValue = computed(() =>
+  isInvalid ? undefined : true
+);
+
+const iconClasses = computed(() => {
+  const classes = [];
+
+  if (isInvalid || isWarn) {
+    classes.push(`${carbonPrefix}--number__invalid`);
+  }
+
+  if (isWarn && !isInvalid) {
+    classes.push(`${carbonPrefix}--number__invalid--warning`);
+  }
+
+  return classes.join(' ');
+});
+
+const emit = defineEmits(['update:modelValue']);
+const input = ref(null);
+const internalValue = computed({
+  get() {
+    const { modelValue } = props;
+    if (typeof modelValue === 'number') return modelValue;
+    const valueAsNumber = Number(modelValue);
+    return Number.isNaN(valueAsNumber) ? '' : valueAsNumber;
+  },
+  set(value) {
+    onInput(value);
+  },
+});
+
+const onInput = value => {
+  emit('update:modelValue', value);
+};
+
+const programmaticEventsToTrigger = ['input', 'change'];
+const onProgrammaticValueChanged = inputRef => {
+  programmaticEventsToTrigger.forEach(eventName => {
+    const event = new Event(eventName);
+    inputRef.value.dispatchEvent(event);
+  });
+};
+
+const doUp = () => {
+  input.value.stepUp();
+  onProgrammaticValueChanged(input);
+};
+
+const doDown = () => {
+  input.value.stepDown();
+  onProgrammaticValueChanged(input);
+};
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
diff --git a/src/use/cvInput.js b/src/use/cvInput.js
new file mode 100644
index 000000000..3894399b2
--- /dev/null
+++ b/src/use/cvInput.js
@@ -0,0 +1,40 @@
+import { onBeforeMount, onBeforeUpdate, ref, useSlots } from 'vue';
+import { useIsLight } from './cvTheme';
+
+export const useCvInputHelpers = props => {
+  const slots = useSlots();
+  const isInvalid = ref(false);
+  const isWarn = ref(false);
+  const isHelper = ref(false);
+  const isLight = useIsLight(props);
+
+  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']);
+  }
+  console.log('useCvInputHelpers: ', {
+    slots,
+    isInvalid: isInvalid.value,
+    isWarn: isWarn.value,
+    isHelper: isHelper.value,
+    isLight: isLight.value,
+  });
+  onBeforeMount(checkSlots);
+  onBeforeUpdate(checkSlots);
+
+  return {
+    slots,
+    isInvalid,
+    isWarn,
+    isHelper,
+    isLight,
+  };
+};