Handle null value

Author: kla

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kla/digits",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "repository": "https://github.com/kla/digits",
   "type": "module",
   "main": "./dist/digits.umd.mjs",

src/Digits.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :class="classes" :title="number.value.toString()">
+  <span :class="classes" :title="value ? value.toString() : ''">
     <span v-if="value != null && value != undefined">{{ formatted }}</span>
     <span v-if="number.unitAbbreviation" :class="`fm-abbrev fm-${number.unit}`">{{ number.unitAbbreviation }}</span>
   </span>
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
 const classes = computed(() => {
   const classes = [ 'fm' ]
 
-  if (parseFloat(props.value.toString()) < 0) classes.push('fm-negative')
+  if (props.value && parseFloat(props.value.toString()) < 0) classes.push('fm-negative')
   if (props.colored && number.value.number != '-0.00' && number.value.number != '0.00') classes.push('fm-colored')
   return classes.join(' ')
 })

src/test/Digits.test.js

@@ -31,7 +31,7 @@ describe('Digits', () => {
   it('accepts a showSymbol option', () => render(Digits, { props: { value: 1_500_000, showSymbol: false } }).getByText('1,500,000.00'))
   it('accepts a subscriptDecimals option', () => render(Digits, { props: { value: 0.000001, maxDecimals: 6, subscriptmaxDecimals: 2 } }).getByText('$0.0₅1'))
   it('handles -0.00', () => render(Digits, { props: { value: '-0.00' } }).getByText('$0.00'))
-  it('handles 0', () => {
-    render(Digits, { props: { value: 0 } }).getByText('$0.00')
-  })
+  it('handles 0', () => render(Digits, { props: { value: 0 } }).getByText('$0.00'))
+  it('handles null value', () => render(Digits, { props: { value: null } }))
+  it('handles undefined value', () => render(Digits, { props: { } }))
 })