Fixes to client case show

resources/js/Components/CurrencyInput.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { watch, onMounted } from 'vue'
+import { useCurrencyInput } from 'vue-currency-input'
+
+const props = defineProps({
+  modelValue: { type: [Number, String, null], default: null },
+  id: String,
+  name: String,
+  placeholder: { type: String, default: '0,00' },
+  disabled: Boolean,
+  required: Boolean,
+  currency: { type: String, default: 'EUR' },
+  locale: { type: String, default: 'sl-SI' },
+  precision: { type: [Number, Object], default: 2 },
+  allowNegative: { type: Boolean, default: false },
+  useGrouping: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { inputRef, numberValue, setValue, setOptions } = useCurrencyInput({
+  currency: props.currency,
+  locale: props.locale,
+  precision: props.precision,
+  useGrouping: props.useGrouping,
+  valueRange: props.allowNegative ? {} : { min: 0 },
+})
+
+watch(() => props.modelValue, (val) => {
+  const numeric = typeof val === 'string' ? parseFloat(val) : val
+  if (numeric !== numberValue.value) {
+    setValue(isNaN(numeric) ? null : numeric)
+  }
+}, { immediate: true })
+
+watch(numberValue, (val) => {
+  emit('update:modelValue', val)
+})
+
+watch(() => [props.currency, props.locale, props.precision, props.useGrouping, props.allowNegative], () => {
+  setOptions({
+    currency: props.currency,
+    locale: props.locale,
+    precision: props.precision,
+    useGrouping: props.useGrouping,
+    valueRange: props.allowNegative ? {} : { min: 0 },
+  })
+})
+
+onMounted(() => {
+  if (props.modelValue != null) {
+    const numeric = typeof props.modelValue === 'string' ? parseFloat(props.modelValue) : props.modelValue
+    setValue(isNaN(numeric) ? null : numeric)
+  }
+})
+</script>
+
+<template>
+  <input
+    ref="inputRef"
+    :id="id"
+    :name="name"
+    type="text"
+    inputmode="decimal"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :required="required"
+    class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-600"
+    autocomplete="off"
+  />
+</template>

resources/js/Components/TextInput.vue

@@ -1,28 +1,31 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from "vue";
 
 defineProps({
-    modelValue: String,
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
 });
 
-defineEmits(['update:modelValue']);
+defineEmits(["update:modelValue"]);
 
 const input = ref(null);
 
 onMounted(() => {
-    if (input.value.hasAttribute('autofocus')) {
-        input.value.focus();
-    }
+  if (input.value.hasAttribute("autofocus")) {
+    input.value.focus();
+  }
 });
 
 defineExpose({ focus: () => input.value.focus() });
 </script>
 
 <template>
-    <input
-        ref="input"
-        class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)"
-    >
+  <input
+    ref="input"
+    class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
 </template>