Add splitRoutePath and getMonthName functions to utils/numbers.ts and texts.ts

src/components/Form/InputWithSuffix.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
   placeholder: {
@@ -14,35 +14,42 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  value: {
-    type: Number,
-    default: ''
+  defaultValue: {
+    type: String,
+    default: '1 Menit'
   }
+ 
 })
 const emit = defineEmits(['update:menitValue'])
-const menitValue = ref(1)
+const menitValue = ref<any>(props.defaultValue)
 watch(menitValue, (newValue) => {
   console.log('newValue', newValue)
   emit('update:menitValue', newValue)
 })
+
+watch(() => props.defaultValue, (newValue) => {
+  menitValue.value = newValue
+})
 </script>
 
 <template>
-  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+  <div 
+ 
+  class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
       v-model="menitValue"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
-      :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      defaultValue="1"
+      :disabled="disabled"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onblur="this.value = this.value ? this.value + ' Menit' : ''"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
-      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0
+      "
     />
   </div>
 </template>