102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
|
|
import { defineComponent, computed } from "vue";
|
|
import { InputGroupProps, props } from './input-group.props';
|
|
|
|
export default defineComponent({
|
|
name: 'input-group3',
|
|
props,
|
|
setup(props: InputGroupProps) {
|
|
const textBoxTitle = computed(() => (props.enableTitle ? props.value : ''));
|
|
|
|
const textBoxPlaceholder = computed(() => ((props.disable || props.readonly) && !props.forcePlaceholder ? '' : props.placeholder));
|
|
|
|
const isTextBoxReadonly = computed(() => {
|
|
return props.readonly || !props.editable;
|
|
});
|
|
|
|
const inputGroupClass = computed(() => ({
|
|
'input-group': true,
|
|
'f-state-disable': props.disable,
|
|
'f-state-editable': props.editable && !props.disable && !props.readonly,
|
|
'f-state-readonly': props.readonly && !props.disable
|
|
}));
|
|
|
|
const textBoxClass = computed(() => ({
|
|
'text-left': props.textAlign === 'left',
|
|
'text-center': props.textAlign === 'center',
|
|
'text-right': props.textAlign === 'right',
|
|
'form-control': true,
|
|
'f-utils-fill': true
|
|
}));
|
|
|
|
const inputGroupAppendClass = computed(() => ({
|
|
'input-group-append': true,
|
|
'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable)
|
|
|
|
}));
|
|
|
|
const showClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
|
|
|
|
function onBlur($event: Event) {
|
|
console.log('on blur');
|
|
}
|
|
function onClearValue($event: Event) {
|
|
console.log('on onClearValue');
|
|
}
|
|
function onEnter($event: KeyboardEvent) {
|
|
console.log('on onEnter');
|
|
}
|
|
function onClickHandle(event: Event) {
|
|
console.log('on onClickHandle');
|
|
}
|
|
function onIconMouseEnter(e: MouseEvent) {
|
|
console.log('on onIconMouseEnter');
|
|
}
|
|
function onIconMouseLeave(e: MouseEvent) {
|
|
console.log('on onIconMouseLeave');
|
|
}
|
|
function onInputClick($event: Event) {
|
|
console.log('on onInputClick');
|
|
}
|
|
function onInputFocus($event: Event) {
|
|
console.log('on onInputFocus');
|
|
}
|
|
function onMouseDown($event: MouseEvent) {
|
|
console.log('on onMousedown');
|
|
}
|
|
function onMouseOverInExtentInfo($event: Event) {
|
|
console.log('on onMouseOverInExtentInfo');
|
|
}
|
|
function onValueChange(val: string, emit = true) {
|
|
console.log('on onValueChange');
|
|
}
|
|
|
|
return () => {
|
|
return (
|
|
<div class="f-cmp-inputgroup" id={props.id}>
|
|
<div class={[props.customClass, inputGroupClass.value]}>
|
|
<input name="input-group-value" autocomplete={'' + props.autoComplete} class={textBoxClass.value} disabled={props.disable}
|
|
maxlength={props.maxLength} minlength={props.minLength} placeholder={textBoxPlaceholder.value}
|
|
readonly={isTextBoxReadonly.value} tabindex={props.tabIndex} title={textBoxTitle.value} type={props.inputType}
|
|
onBlur={onBlur} onClick={onInputClick} onFocus={onInputFocus} onKeydown={onEnter}
|
|
onMousedown={onMouseDown} />
|
|
<div class={inputGroupAppendClass.value}>
|
|
{
|
|
showClearButton.value &&
|
|
<span class="input-group-text input-group-clear">
|
|
<i class="f-icon modal_close"></i>
|
|
</span>
|
|
}
|
|
{
|
|
props.groupText &&
|
|
<span class="input-group-text" v-html={props.groupText}>
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
})
|