mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-16 06:06:56 +08:00
c22d1e226b
* Add edit fetaure to item card stock field [SCI-9415] * Replace manage stock modal [SCI-9415] * Fix issue displaying item card [SCI-9415] * Minor improvements [SCI-9415] * Enable stock modal in assigned inventories [SCI-9415] * Use toggleable reminder value [SCI-9415]
73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<template>
|
|
<div class="relative" :class="fieldClass">
|
|
<label v-if="showLabel" :class="labelClass" :for="id">{{ label }}</label>
|
|
<div :class="inputClass">
|
|
<input ref="input"
|
|
:id="id"
|
|
:type="type"
|
|
:name="name"
|
|
:value="value"
|
|
:class="`${error ? 'error' : ''}`"
|
|
:placeholder="placeholder"
|
|
:required="required"
|
|
@input="updateValue"
|
|
/>
|
|
<div
|
|
class="mt-2 text-sn-delete-red whitespace-nowrap truncate text-xs font-normal absolute bottom-[-1rem] w-full"
|
|
:title="error"
|
|
:class="{ visible: error, invisible: !error}"
|
|
>
|
|
{{ error }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Input',
|
|
props: {
|
|
id: { type: String, required: false },
|
|
fieldClass: { type: String, default: '' },
|
|
inputClass: { type: String, default: '' },
|
|
labelClass: { type: String, default: '' },
|
|
type: { type: String, default: 'text' },
|
|
name: { type: String, required: true },
|
|
value: { type: [String, Number], required: false },
|
|
decimals: { type: [Number, String], default: 0 },
|
|
placeholder: { type: String, default: '' },
|
|
required: { type: Boolean, default: false },
|
|
showLabel: { type: Boolean, default: false },
|
|
label: { type: String, required: false },
|
|
autoFocus: { type: Boolean, default: false },
|
|
error: { type: String, required: false }
|
|
},
|
|
watch: {
|
|
value: function(newVal) {
|
|
this.inputValue = newVal;
|
|
}
|
|
},
|
|
methods: {
|
|
updateValue($event) {
|
|
switch (this.type) {
|
|
case 'text':
|
|
this.$emit('input', $event.target.value);
|
|
break;
|
|
case 'number':
|
|
const newValue = this.formatDecimalValue($event.target.value);
|
|
this.$emit('input', parseFloat(newValue));
|
|
break
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
formatDecimalValue(value) {
|
|
let decimalValue = value.replace(/[^-0-9.]/g, '');
|
|
if (this.decimals === 0) {
|
|
return decimalValue.split('.')[0];
|
|
}
|
|
return decimalValue.match(new RegExp(`^-?\\d*(\\.\\d{0,${this.decimals}})?`))[0];
|
|
},
|
|
}
|
|
}
|
|
</script>
|