Refactor #3965 - For InputNumber
Tuğçe Küçükoğlu
parent
9b0c76ea1e
commit
3f7bf2ce14
|
|
@ -0,0 +1,290 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-inputnumber {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-inputnumber-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
|
||||
order: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
|
||||
order: 1;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-inputnumber-input {
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputnumber-input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber .p-inputnumber-input {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-inputnumber p-component p-inputwrapper',
|
||||
{
|
||||
'p-inputwrapper-filled': instance.filled,
|
||||
'p-inputwrapper-focus': instance.focused,
|
||||
'p-inputnumber-buttons-stacked': props.showButtons && props.buttonLayout === 'stacked',
|
||||
'p-inputnumber-buttons-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
|
||||
'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical'
|
||||
}
|
||||
],
|
||||
input: 'p-inputnumber-input',
|
||||
buttonGroup: 'p-inputnumber-button-group',
|
||||
incrementButton: ({ instance, props }) => [
|
||||
'p-inputnumber-button p-inputnumber-button-up',
|
||||
{
|
||||
'p-disabled': props.showButtons && props.max !== null && instance.maxBoundry()
|
||||
}
|
||||
],
|
||||
decrementButton: ({ instance, props }) => [
|
||||
'p-inputnumber-button p-inputnumber-button-down',
|
||||
{
|
||||
'p-disabled': props.showButtons && props.min !== null && instance.minBoundry()
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseInputNumber',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
format: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showButtons: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
buttonLayout: {
|
||||
type: String,
|
||||
default: 'stacked'
|
||||
},
|
||||
incrementButtonClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
decrementButtonClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
incrementButtonIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
decrementButtonIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
locale: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
localeMatcher: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'decimal'
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
currencyDisplay: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
useGrouping: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
minFractionDigits: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
maxFractionDigits: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
allowEmpty: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
highlightOnFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
incrementButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
decrementButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -267,6 +267,11 @@ export interface InputNumberProps {
|
|||
* @type {InputNumberPassThroughOptions}
|
||||
*/
|
||||
pt?: InputNumberPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
<template>
|
||||
<span :class="containerClass" v-bind="ptm('root')">
|
||||
<span :class="cx('root')" v-bind="ptm('root')">
|
||||
<INInputText
|
||||
ref="input"
|
||||
:id="inputId"
|
||||
class="p-inputnumber-input"
|
||||
role="spinbutton"
|
||||
:class="inputClass"
|
||||
:class="[cx('input'), inputClass]"
|
||||
:style="inputStyle"
|
||||
:value="formattedValue"
|
||||
:aria-valuemin="min"
|
||||
|
|
@ -24,16 +23,33 @@
|
|||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
v-bind="{ ...inputProps, ...ptm('input') }"
|
||||
data-pc-section="input"
|
||||
/>
|
||||
<span v-if="showButtons && buttonLayout === 'stacked'" class="p-inputnumber-button-group" v-bind="ptm('buttonGroup')">
|
||||
<INButton :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }">
|
||||
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
|
||||
<INButton
|
||||
:class="[cx('incrementButton'), incrementButtonClass]"
|
||||
v-on="upButtonListeners"
|
||||
:disabled="disabled"
|
||||
:tabindex="-1"
|
||||
aria-hidden="true"
|
||||
v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
|
||||
data-pc-section="incrementbutton"
|
||||
>
|
||||
<template #icon>
|
||||
<slot name="incrementbuttonicon">
|
||||
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</INButton>
|
||||
<INButton :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }">
|
||||
<INButton
|
||||
:class="[cx('decrementButton'), decrementButtonClass]"
|
||||
v-on="downButtonListeners"
|
||||
:disabled="disabled"
|
||||
:tabindex="-1"
|
||||
aria-hidden="true"
|
||||
v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
|
||||
data-pc-section="decrementbutton"
|
||||
>
|
||||
<template #icon>
|
||||
<slot name="decrementbuttonicon">
|
||||
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" />
|
||||
|
|
@ -41,14 +57,32 @@
|
|||
</template>
|
||||
</INButton>
|
||||
</span>
|
||||
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="upButtonClass" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }">
|
||||
<INButton
|
||||
v-if="showButtons && buttonLayout !== 'stacked'"
|
||||
:class="[cx('incrementButton'), incrementButtonClass]"
|
||||
v-on="upButtonListeners"
|
||||
:disabled="disabled"
|
||||
:tabindex="-1"
|
||||
aria-hidden="true"
|
||||
v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
|
||||
data-pc-section="incrementbutton"
|
||||
>
|
||||
<template #icon>
|
||||
<slot name="incrementbuttonicon">
|
||||
<component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</INButton>
|
||||
<INButton v-if="showButtons && buttonLayout !== 'stacked'" :class="downButtonClass" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }">
|
||||
<INButton
|
||||
v-if="showButtons && buttonLayout !== 'stacked'"
|
||||
:class="[cx('decrementButton'), decrementButtonClass]"
|
||||
v-on="downButtonListeners"
|
||||
:disabled="disabled"
|
||||
:tabindex="-1"
|
||||
aria-hidden="true"
|
||||
v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
|
||||
data-pc-section="decrementbutton"
|
||||
>
|
||||
<template #icon>
|
||||
<slot name="decrementbuttonicon">
|
||||
<component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" />
|
||||
|
|
@ -59,155 +93,17 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Button from 'primevue/button';
|
||||
import AngleDownIcon from 'primevue/icons/angledown';
|
||||
import AngleUpIcon from 'primevue/icons/angleup';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import { DomHandler } from 'primevue/utils';
|
||||
import BaseInputNumber from './BaseInputNumber.vue';
|
||||
|
||||
export default {
|
||||
name: 'InputNumber',
|
||||
extends: BaseComponent,
|
||||
extends: BaseInputNumber,
|
||||
emits: ['update:modelValue', 'input', 'focus', 'blur'],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
format: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showButtons: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
buttonLayout: {
|
||||
type: String,
|
||||
default: 'stacked'
|
||||
},
|
||||
incrementButtonClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
decrementButtonClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
incrementButtonIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
decrementButtonIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
locale: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
localeMatcher: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'decimal'
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
currencyDisplay: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
useGrouping: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
minFractionDigits: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
maxFractionDigits: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
allowEmpty: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
highlightOnFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: null
|
||||
},
|
||||
inputStyle: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
inputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
incrementButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
decrementButtonProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
numberFormat: null,
|
||||
_numeral: null,
|
||||
_decimal: null,
|
||||
|
|
@ -1062,37 +958,6 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-inputnumber p-component p-inputwrapper',
|
||||
{
|
||||
'p-inputwrapper-filled': this.filled,
|
||||
'p-inputwrapper-focus': this.focused,
|
||||
'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
|
||||
'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
|
||||
'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
upButtonClass() {
|
||||
return [
|
||||
'p-inputnumber-button p-inputnumber-button-up',
|
||||
this.incrementButtonClass,
|
||||
{
|
||||
'p-disabled': this.showButtons && this.max !== null && this.maxBoundry()
|
||||
}
|
||||
];
|
||||
},
|
||||
downButtonClass() {
|
||||
return [
|
||||
'p-inputnumber-button p-inputnumber-button-down',
|
||||
this.decrementButtonClass,
|
||||
{
|
||||
'p-disabled': this.showButtons && this.min !== null && this.minBoundry()
|
||||
}
|
||||
];
|
||||
},
|
||||
filled() {
|
||||
return this.modelValue != null && this.modelValue.toString().length > 0;
|
||||
},
|
||||
|
|
@ -1131,106 +996,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-inputnumber {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-inputnumber-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
|
||||
order: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
|
||||
order: 1;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-inputnumber-input {
|
||||
order: 2;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
|
||||
order: 3;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-inputnumber-input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber .p-inputnumber-input {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue