|
@ -36,7 +36,7 @@ with increment/decrement buttons and validation. * * @author Matthew Raymer */ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
import { Component, Prop, Vue, Watch, Emit } from "vue-facing-decorator"; |
|
|
import { Component, Prop, Vue, Watch } from "vue-facing-decorator"; |
|
|
import { logger } from "@/utils/logger"; |
|
|
import { logger } from "@/utils/logger"; |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
@ -47,7 +47,8 @@ import { logger } from "@/utils/logger"; |
|
|
* - Configurable min/max values and step size |
|
|
* - Configurable min/max values and step size |
|
|
* - Input validation and formatting |
|
|
* - Input validation and formatting |
|
|
* - Disabled state handling for boundary values |
|
|
* - Disabled state handling for boundary values |
|
|
* - Emits update events for v-model compatibility |
|
|
* - Function props for parent control over validation and updates |
|
|
|
|
|
* - Maintains v-model compatibility through onUpdateValue function prop |
|
|
*/ |
|
|
*/ |
|
|
@Component |
|
|
@Component |
|
|
export default class AmountInput extends Vue { |
|
|
export default class AmountInput extends Vue { |
|
@ -71,6 +72,13 @@ export default class AmountInput extends Vue { |
|
|
@Prop({ default: "amount-input" }) |
|
|
@Prop({ default: "amount-input" }) |
|
|
inputId!: string; |
|
|
inputId!: string; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Function prop for handling value updates |
|
|
|
|
|
* Called when the value changes, allowing parent to control validation and update behavior |
|
|
|
|
|
*/ |
|
|
|
|
|
@Prop({ type: Function, default: () => {} }) |
|
|
|
|
|
onUpdateValue!: (value: number) => void | Promise<void>; |
|
|
|
|
|
|
|
|
/** Internal display value for input field */ |
|
|
/** Internal display value for input field */ |
|
|
private displayValue: string = "0"; |
|
|
private displayValue: string = "0"; |
|
|
|
|
|
|
|
@ -173,7 +181,8 @@ export default class AmountInput extends Vue { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Update the value and emit change event |
|
|
* Update the value and call parent function prop |
|
|
|
|
|
* Allows parent to control validation and update behavior |
|
|
*/ |
|
|
*/ |
|
|
private updateValue(newValue: number): void { |
|
|
private updateValue(newValue: number): void { |
|
|
logger.debug("[AmountInput] updateValue() called", { |
|
|
logger.debug("[AmountInput] updateValue() called", { |
|
@ -182,27 +191,16 @@ export default class AmountInput extends Vue { |
|
|
}); |
|
|
}); |
|
|
if (newValue !== this.value) { |
|
|
if (newValue !== this.value) { |
|
|
logger.debug( |
|
|
logger.debug( |
|
|
"[AmountInput] updateValue() - values different, updating and emitting", |
|
|
"[AmountInput] updateValue() - values different, updating and calling parent handler", |
|
|
); |
|
|
); |
|
|
this.displayValue = newValue.toString(); |
|
|
this.displayValue = newValue.toString(); |
|
|
this.emitUpdateValue(newValue); |
|
|
this.onUpdateValue(newValue); |
|
|
} else { |
|
|
} else { |
|
|
logger.debug( |
|
|
logger.debug( |
|
|
"[AmountInput] updateValue() - values same, skipping update", |
|
|
"[AmountInput] updateValue() - values same, skipping update", |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Emit update:value event |
|
|
|
|
|
*/ |
|
|
|
|
|
@Emit("update:value") |
|
|
|
|
|
emitUpdateValue(value: number): number { |
|
|
|
|
|
logger.debug("[AmountInput] emitUpdateValue() - emitting value", { |
|
|
|
|
|
value, |
|
|
|
|
|
}); |
|
|
|
|
|
return value; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|