number props accept strings

packages/ui/src/components/va-counter/VaCounter.vue

@@ -153,9 +153,9 @@ const props = defineProps({
     // input
   modelValue: { type: [String, Number], default: 0 },
   manualInput: { type: Boolean, default: false },
-  min: { type: Number },
-  max: { type: Number },
-  step: { type: Number, default: 1 },
+  min: { type: [Number, String] },
+  max: { type: [Number, String] },
+  step: { type: [Number, String], default: 1 },
   color: { type: String, default: 'primary' },
     // icons & buttons
   increaseIcon: { type: String, default: 'va-plus' },
@@ -213,23 +213,23 @@ const setCountChange = ({ target }: Event) => {
 }
 
 const getRoundDownWithStep = (value: number) => {
-  if (typeof min.value === 'undefined' || !step.value) { return value }
+  if (typeof Number(min.value) === 'undefined' || !Number(step.value)) { return value }
 
   // If the user enters a value manually, then we must round it to the nearest valid value,
   // taking into account the initial value (`props.min`) and the step size (`props.step`)
-  return min.value + step.value * Math.floor((value - min.value) / step.value)
+  return Number(min.value) + Number(step.value) * Math.floor((value - Number(min.value)) / Number(step.value))
 }
 
 const calculateCounterValue = (counterValue: number) => {
-  if (typeof min.value !== 'undefined' && counterValue < min.value) {
-    valueComputed.value = min.value
+  if (typeof min.value !== 'undefined' && counterValue < Number(min.value)) {
+    valueComputed.value = Number(min.value)
     return
   }
 
-  if (max.value && (counterValue > max.value)) {
+  if (Number(max.value) && (counterValue > Number(max.value))) {
     // since the `props.step` may not be a multiple of `(props.max - props.min)`,
     // we must round the result taking into account the allowable value
-    valueComputed.value = getRoundDownWithStep(max.value)
+    valueComputed.value = getRoundDownWithStep(Number(max.value))
     return
   }
 
@@ -239,15 +239,15 @@ const calculateCounterValue = (counterValue: number) => {
 const isMinReached = computed(() => {
   if (isNil(min.value)) { return false }
 
-  return Number(valueComputed.value) <= min.value
+  return Number(valueComputed.value) <= Number(min.value)
 })
 
 const isMaxReached = computed(() => {
   if (isNil(max.value)) { return false }
 
   return step.value
-    ? Number(valueComputed.value) > (max.value - step.value)
-    : Number(valueComputed.value) >= max.value
+    ? Number(valueComputed.value) > (Number(max.value) - Number(step.value))
+    : Number(valueComputed.value) >= Number(max.value)
 })
 
 const tabIndexComputed = computed(() => props.disabled ? -1 : 0)
@@ -262,12 +262,12 @@ const isIncreaseActionDisabled = computed(() => (
 
 const decreaseCount = () => {
   if (isDecreaseActionDisabled.value) { return }
-  calculateCounterValue(Number(valueComputed.value) - step.value)
+  calculateCounterValue(Number(valueComputed.value) - Number(step.value))
 }
 
 const increaseCount = () => {
   if (isIncreaseActionDisabled.value) { return }
-  calculateCounterValue(Number(valueComputed.value) + step.value)
+  calculateCounterValue(Number(valueComputed.value) + Number(step.value))
 }
 
 useLongPress(useTemplateRef('decreaseButtonRef'), {
@@ -348,8 +348,8 @@ const slots = useSlots()
 const inputAttributesComputed = computed(() => (({
   tabindex: tabIndexComputed.value,
   'aria-label': tp(props.ariaLabel),
-  'aria-valuemin': min.value,
-  'aria-valuemax': max.value,
+  'aria-valuemin': Number(min.value),
+  'aria-valuemax': Number(max.value),
   ...omit(attrs, ['class', 'style']),
   ...pick(props, ['disabled', 'min', 'max', 'step']),
   readonly: props.readonly || !props.manualInput,

packages/ui/src/components/va-counter/hooks/useCounterPropsValidation.ts

@@ -4,34 +4,37 @@ import { warn } from '../../../utils/console'
 
 interface useCounterPropsValidationProps {
   modelValue: string | number,
-  min?: number | undefined,
-  max?: number | undefined,
-  step: number,
+  min?: number | string | undefined,
+  max?: number | string | undefined,
+  step: number | string,
 }
 
 export default function useCounterPropsValidation (props: useCounterPropsValidationProps) {
   const validateCounterProps = () => {
     const val = Number(props.modelValue)
+    const max = Number(props.max)
+    const min = Number(props.min)
+    const step = Number(props.step)
 
     if (Number.isNaN(val)) {
       warn('The value is not a number or cannot be reduced to a number.')
       return
     }
 
-    if (props.min && props.max && props.min > props.max) {
-      warn(`The maximum value (${props.max}) can not be less than the minimum value (${props.min}).`)
+    if (min && max && min > max) {
+      warn(`The maximum value (${max}) can not be less than the minimum value (${min}).`)
     }
 
-    if (props.min && val < props.min) {
-      warn(`The value of the counter (${val}) can not be less than the minimum value (${props.min}).`)
+    if (min && val < min) {
+      warn(`The value of the counter (${val}) can not be less than the minimum value (${min}).`)
     }
 
-    if (props.max && val > props.max) {
-      warn(`The value of the counter (${val}) can not be greater than the maximum value (${props.max}).`)
+    if (max && val > max) {
+      warn(`The value of the counter (${val}) can not be greater than the maximum value (${max}).`)
     }
 
-    if (props.min && props.max && props.step > (props.max - props.min)) {
-      warn(`The value of the step (${props.step}) can not be greater than the difference (${props.max - props.min}) between maximum value (${props.max}) and minimum value (${props.min}).`)
+    if (min && max && step > (max - min)) {
+      warn(`The value of the step (${step}) can not be greater than the difference (${max - min}) between maximum value (${max}) and minimum value (${min}).`)
     }
   }
 

packages/ui/src/components/va-data-table/VaDataTable.vue

@@ -278,7 +278,7 @@ const props = defineProps({
   virtualScroller: { type: Boolean, default: false },
   virtualTrackBy: { type: [String, Number] as PropType<string | number>, default: 'initialIndex' },
   grid: { type: Boolean, default: false },
-  gridColumns: { type: Number, default: 0 },
+  gridColumns: { type: [Number, String], default: 0 },
   wrapperSize: { type: [Number, String] as PropType<number | string | 'auto'>, default: 'auto' },
 
   ariaSelectRowLabel: { type: String, default: '$t:selectRowByIndex' },

packages/ui/src/components/va-progress-bar/VaProgressBar.vue

@@ -53,19 +53,19 @@ defineOptions({
 
 const props = defineProps({
   ...useComponentPresetProp,
-  modelValue: { type: Number, default: 0 },
+  modelValue: { type: [Number, String], default: 0 },
   indeterminate: { type: Boolean, default: false },
   color: { type: String, default: 'primary' },
   size: {
     type: [Number, String] as PropType<number | 'medium' | 'large' | 'small' | string>,
     default: 'medium',
   },
-  buffer: { type: Number, default: 100 },
+  buffer: { type: [Number, String], default: 100 },
   rounded: { type: Boolean, default: true },
   reverse: { type: Boolean, default: false },
   contentInside: { type: Boolean, default: false },
   showPercent: { type: Boolean, default: false },
-  max: { type: Number, default: 100 },
+  max: { type: [Number, String], default: 100 },
   ariaLabel: { type: String, default: '$t:progressState' },
 })
 
@@ -84,7 +84,7 @@ const getCSSHeight = () => {
 
 const { tp } = useTranslation()
 
-const progressBarValue = computed(() => 100 / props.max * props.modelValue)
+const progressBarValue = computed(() => 100 / Number(props.max) * Number(props.modelValue))
 
 const rootClass = computed(() => ({
   'va-progress-bar--square': !props.rounded,
@@ -101,7 +101,7 @@ const wrapperStyle = computed(() => ({
 }))
 
 const bufferStyle = computed(() => ({
-  width: `${props.indeterminate ? 100 : clamp(props.buffer, 0, 100)}%`,
+  width: `${props.indeterminate ? 100 : clamp(Number(props.buffer), 0, 100)}%`,
   color: textColorComputed.value,
   [props.reverse ? 'right' : 'left']: 0,
 }))

packages/ui/src/components/va-progress-circle/VaProgressCircle.vue

@@ -44,7 +44,7 @@ defineOptions({
 const props = defineProps({
   ...useSizeProps,
   ...useComponentPresetProp,
-  modelValue: { type: Number, default: 0 },
+  modelValue: { type: [Number, String], default: 0 },
   indeterminate: { type: Boolean, default: false },
   thickness: { type: [Number, String], default: 0.06 },
   color: { type: String, default: 'primary' },
@@ -58,7 +58,7 @@ const cappedThickness = computed(() => clamp(Number(props.thickness), 0, 1) / 2
 
 const radius = computed(() => 20 - (20 * cappedThickness.value / 100))
 const dasharray = computed(() => 2 * Math.PI * radius.value)
-const dashoffset = computed(() => dasharray.value * (1 - clamp(props.modelValue, 0, 100) / 100))
+const dashoffset = computed(() => dasharray.value * (1 - clamp(Number(props.modelValue), 0, 100) / 100))
 const colorComputed = computed(() => getColor(props.color, undefined, true))
 
 const { tp } = useTranslation()

packages/ui/src/components/va-rating/VaRating.vue

@@ -12,7 +12,7 @@
       @mouseleave="onMouseLeave"
     >
       <va-rating-item
-        v-for="itemNumber in $props.max"
+        v-for="itemNumber in Number($props.max)"
         :key="itemNumber"
         class="va-rating__item"
         v-bind="VaRatingItemProps"
@@ -78,7 +78,7 @@ const props = defineProps({
   modelValue: { type: Number, default: 0 },
   numbers: { type: Boolean, default: false },
   halves: { type: Boolean, default: false },
-  max: { type: Number, default: 5 },
+  max: { type: [Number, String], default: 5 },
   texts: { type: Array as PropType<string[]>, default: () => [] },
 
   ariaLabel: { type: String, default: '$t:currentRating' },
@@ -102,15 +102,16 @@ const {
 const isInteractionsEnabled = computed(() => !props.disabled && !props.readonly)
 
 const onArrowKeyPress = (direction: 1 | -1) => {
+  const max = Number(props.max)
   const step = props.halves ? RatingValue.HALF : RatingValue.FULL
   const nextStep = visibleValue.value + step * direction
   const min = props.clearable ? 0 : step
-  if (nextStep >= min && nextStep <= props.max) {
+  if (nextStep >= min && nextStep <= max) {
     onItemValueUpdate(visibleValue.value, step * direction)
   } else if (nextStep < min) {
     onItemValueUpdate(min, 0)
   } else {
-    onItemValueUpdate(props.max, direction === -1 ? step * direction : 0)
+    onItemValueUpdate(max, direction === -1 ? step * direction : 0)
   }
 }
 

packages/ui/src/components/va-scrollbar/VaScrollbar.vue

@@ -39,7 +39,7 @@ export default {
   props: {
     ...useComponentPresetProp,
     speed: {
-      type: Number,
+      type: [Number, String],
       default: 20,
     },
   },
@@ -109,7 +109,7 @@ export default {
       this.isDragging = false
     },
     scroll (e) {
-      let delta = (e.deltaY * 0.01 * this.speed)
+      let delta = (e.deltaY * 0.01 * Number(this.speed))
       if (navigator?.userAgent?.toLowerCase().includes('firefox')) {
         delta *= 10
       }

packages/ui/src/components/va-stepper/VaStepperControls.vue

@@ -2,7 +2,7 @@
   <div class="va-stepper__default-controls">
     <va-button
       preset="primary"
-      :disabled="$props.modelValue <= 0"
+      :disabled="Number($props.modelValue) <= 0"
       @click="$props.stepControls.prevStep()"
     >
       {{ t('back') }}
@@ -33,7 +33,7 @@ defineOptions({
 })
 
 const props = defineProps({
-  modelValue: { type: Number, required: true },
+  modelValue: { type: [Number, String], required: true },
   steps: {
     type: Array as PropType<Step[]>,
     required: true,
@@ -47,7 +47,7 @@ const { t } = useTranslation()
 
 const isLastStep = computed(() => {
   const lastEnabledStepIndex = props.steps.length - 1
-  return props.modelValue >= lastEnabledStepIndex
+  return Number(props.modelValue) >= lastEnabledStepIndex
 })
 </script>