@volverjs/ui-vue 0.0.10-beta.58 → 0.0.10-beta.59

package/src/composables/usePersistence.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { StorageType } from '@/constants'
-import { computed, isRef, ref, unref, watch } from 'vue'
+import { isRef, ref, unref, watch } from 'vue'
 
 export function usePersistence<T>(storageKey: Ref<string | undefined> | undefined,	storageType: Ref<`${StorageType}`> | `${StorageType}` = StorageType.local,	defaultValue?: T) {
     const localValue: Ref<T | undefined> = ref()
@@ -26,6 +26,9 @@ export function usePersistence<T>(storageKey: Ref<string | undefined> | undefine
                             storageValue?.value ?? localValue.value,
                             storage,
                         )
+                        if (storageValue.value) {
+                            localValue.value = storageValue.value
+                        }
                         return
                     }
                     storageValue = undefined
@@ -61,16 +64,14 @@ export function usePersistence<T>(storageKey: Ref<string | undefined> | undefine
         }
     })
 
-    return computed<T | undefined>({
-        get: () => {
-            return storageValue?.value ?? localValue.value
-        },
-        set: (value) => {
-            if (storageValue) {
-                storageValue.value = value
-                return
-            }
-            localValue.value = value
-        },
+    watch(localValue, (newValue) => {
+        if (storageValue) {
+            storageValue.value = newValue
+        }
+    }, {
+        deep: true,
+        immediate: true,
     })
+
+    return localValue
 }

package/src/utils/DateUtilities.ts

@@ -1,7 +1,18 @@
+/**
+ * Pads a number with leading zero if less than 10
+ * @param num - Number to pad
+ * @returns Padded number as string
+ * @example
+ * padTwoDigits(5) // '05'
+ */
+const padTwoDigits = (num: number) => num.toString().padStart(2, '0')
+
 /**
  * Checks if a string is a valid ISO date string
  * @param dateString
  * @returns True if valid ISO date string
+ * @example
+ * isDateIsoString('2021-12-31T23:59:59') // true
  */
 export function isDateIsoString(dateString: unknown) {
     if (typeof dateString !== 'string') {
@@ -21,6 +32,10 @@ export function isDateIsoString(dateString: unknown) {
  * @param typeOfInput - Type of HTML input element
  * @param withSeconds - Include seconds in time value
  * @returns String value for input element
+ * @example
+ * getInputValueFromDate(new Date(), 'date') // '2021-12-31'
+ * getInputValueFromDate(new Date(), 'time') // '23:59'
+ * getInputValueFromDate(new Date(), 'datetime-local') // '2021-12-31T23:59'
  */
 export function getInputValueFromDate(date: Date | string, typeOfInput: 'date' | 'time' | 'month' | 'datetime-local' = 'date', withSeconds?: boolean) {
     if (typeof date === 'string') {
@@ -32,18 +47,17 @@ export function getInputValueFromDate(date: Date | string, typeOfInput: 'date' |
     if (Number.isNaN(currentDate.getTime())) {
         return ''
     }
-    const span = (num: number) => num.toString().padStart(2, '0')
-    let toReturn = `${currentDate.getFullYear()}-${span(currentDate.getMonth() + 1)}`
+    let toReturn = `${currentDate.getFullYear()}-${padTwoDigits(currentDate.getMonth() + 1)}`
     if (typeOfInput === 'month') {
         return toReturn
     }
-    toReturn += `-${span(currentDate.getDate())}`
+    toReturn += `-${padTwoDigits(currentDate.getDate())}`
     if (typeOfInput === 'date') {
         return toReturn
     }
     const time = withSeconds
-        ? `${span(currentDate.getHours())}:${span(currentDate.getMinutes())}:${span(currentDate.getSeconds())}`
-        : `${span(currentDate.getHours())}:${span(currentDate.getMinutes())}`
+        ? `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}:${padTwoDigits(currentDate.getSeconds())}`
+        : `${padTwoDigits(currentDate.getHours())}:${padTwoDigits(currentDate.getMinutes())}`
     if (typeOfInput === 'time') {
         return time
     }
@@ -56,6 +70,9 @@ export function getInputValueFromDate(date: Date | string, typeOfInput: 'date' |
  * @param typeOfInput - Type of HTML input element
  * @returns Date object or null if invalid
  * @throws Error for invalid input format
+ * @example
+ * getDateFromInputValue('2021-12-31', 'date') // Date('2021-12-31T00:00:00')
+ * getDateFromInputValue('23:59', 'time') // Date('2021-12-31T23:59:00')
  */
 export function getDateFromInputValue(value: string, typeOfInput: 'date' | 'time' | 'month' | 'datetime-local' = 'date') {
     if (!value?.trim()) {
@@ -84,9 +101,9 @@ export function getDateFromInputValue(value: string, typeOfInput: 'date' | 'time
             throw new Error('Invalid time format. Expected: HH:mm or HH:mm:ss')
         }
         if (value.length === 8) {
-            return new Date(`${currentYear}-${currentMonth + 1}-${currentDate}T${value}`)
+            return new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}`)
         }
-        return new Date(`${currentYear}-${currentMonth + 1}-${currentDate}T${value}:00`)
+        return new Date(`${currentYear}-${padTwoDigits(currentMonth + 1)}-${padTwoDigits(currentDate)}T${value}:00`)
     }
     if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2})?$/.test(value)) {
         throw new Error('Invalid datetime format. Expected: YYYY-MM-DDThh:mm or YYYY-MM-DDThh:mm:ss')