testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: refector code by composable api

This commit is contained in:
Sagi 2022-09-15 19:46:57 +08:00
parent 95c9e682d6
commit 622d6ba831
6 changed files with 224 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/ui-vue/components/input-group/src/composables/types.ts Normal file
View File

@ -0,0 +1,27 @@
import { ComputedRef } from 'vue';
export interface UseAppendButton {
inputGroupAppendClass: ComputedRef<Record<string, boolean | undefined>>;
onClickAppendButton: ($event: Event) => void;
onMouseEnterIcon: ($event: MouseEvent) => void;
onMouseLeaveIcon: ($event: MouseEvent) => void;
}
export interface UseClear {
showClearButton: ComputedRef<boolean>;
onClearValue: ($event: Event) => void;
}
export interface UseTextBox {
isTextBoxReadonly: ComputedRef<boolean>;
textBoxClass: ComputedRef<Record<string, boolean | undefined>>;
textBoxPlaceholder: ComputedRef<string>;
textBoxTitle: ComputedRef<string>;
onBlurTextBox: ($event: Event) => void;
onClickTextBox: ($event: Event) => void;
onEnterTextBox: ($event: KeyboardEvent) => void;
onFocusTextBox: ($event: Event) => void;
onMouseDownTextBox: ($event: MouseEvent) => void;
onMouseOverTextBox: ($event: Event) => void;
onTextBoxValueChange: (value: string, emit: boolean) => void;
}

27
packages/ui-vue/components/input-group/src/composables/use-append-button.ts Normal file
View File

@ -0,0 +1,27 @@
import { computed, SetupContext } from 'vue';
import { InputGroupProps } from '../input-group.props';
export function useAppendButton(props: InputGroupProps, setupContext: SetupContext) {
const inputGroupAppendClass = computed(() => ({
'input-group-append': true,
'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable),
}));
function onMouseEnterIcon(e: MouseEvent) {
console.log('on onIconMouseEnter');
}
function onMouseLeaveIcon(e: MouseEvent) {
console.log('on onIconMouseLeave');
}
function onClickAppendButton(event: Event) {
console.log('on onClickHandle');
}
return {
inputGroupAppendClass,
onClickAppendButton,
onMouseEnterIcon,
onMouseLeaveIcon
};
}

16
packages/ui-vue/components/input-group/src/composables/use-clear.ts Normal file
View File

@ -0,0 +1,16 @@
import { computed, SetupContext } from 'vue';
import { InputGroupProps } from '../input-group.props';
import { UseClear } from './types';
export function useClear(props: InputGroupProps, setupContext: SetupContext): UseClear {
const showClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
function onClearValue($event: Event) {
console.log('on onClearValue');
}
return {
showClearButton,
onClearValue
};
}

61
packages/ui-vue/components/input-group/src/composables/use-text-box.ts Normal file
View File

@ -0,0 +1,61 @@
import { computed, SetupContext } from 'vue';
import { InputGroupProps } from '../input-group.props';
import { UseTextBox } from './types';
export function useTextBox(props: InputGroupProps, setupContext: SetupContext): UseTextBox {
const textBoxTitle = computed(() => (props.enableTitle ? '' : ''));
const textBoxPlaceholder = computed(() => ((props.disable || props.readonly) && !props.forcePlaceholder ? '' : props.placeholder));
const isTextBoxReadonly = computed(() => props.readonly || !props.editable);
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,
}));
function onBlurTextBox($event: Event) {
console.log('on blur');
}
function onClickTextBox($event: Event) {
console.log('on onInputClick');
}
function onEnterTextBox($event: KeyboardEvent) {
console.log('on onEnter');
}
function onFocusTextBox($event: Event) {
console.log('on onInputFocus');
}
function onMouseDownTextBox($event: MouseEvent) {
console.log('on onMousedown');
}
function onMouseOverTextBox($event: Event) {
console.log('on onMouseOverInExtentInfo');
}
function onTextBoxValueChange(val: string, emit = true) {
console.log('on onValueChange');
}
return {
isTextBoxReadonly,
textBoxClass,
textBoxPlaceholder,
textBoxTitle,
onBlurTextBox,
onClickTextBox,
onEnterTextBox,
onFocusTextBox,
onMouseDownTextBox,
onMouseOverTextBox,
onTextBoxValueChange
};
}

82
packages/ui-vue/components/input-group/src/input-group.component.tsx
View File

@ -1,17 +1,14 @@
import { defineComponent, computed } from 'vue';
import type { SetupContext } from 'vue';
import { InputGroupProps, inputGroupProps } from './input-group.props';
import { useAppendButton } from './composables/use-append-button';
import { useClear } from './composables/use-clear';
import { useTextBox } from './composables/use-text-box';
export default defineComponent({
name: 'FInputGroup',
props: inputGroupProps,
setup(props: InputGroupProps, context: SetupContext) {
const textBoxTitle = computed(() => (props.enableTitle ? props.value : ''));
const textBoxPlaceholder = computed(() => ((props.disable || props.readonly) && !props.forcePlaceholder ? '' : props.placeholder));
const isTextBoxReadonly = computed(() => props.readonly || !props.editable);
const inputGroupClass = computed(() => ({
'input-group': true,
'f-state-disable': props.disable,
@ -19,54 +16,23 @@ export default defineComponent({
'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, onClickAppendButton, onMouseEnterIcon, onMouseLeaveIcon } = useAppendButton(props, context);
const inputGroupAppendClass = computed(() => ({
'input-group-append': true,
'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable),
}));
const { showClearButton, onClearValue } = useClear(props, context);
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');
}
const {
isTextBoxReadonly,
textBoxClass,
textBoxPlaceholder,
textBoxTitle,
onBlurTextBox,
onClickTextBox,
onEnterTextBox,
onFocusTextBox,
onMouseDownTextBox,
onMouseOverTextBox,
onTextBoxValueChange,
} = useTextBox(props, context);
return () => {
return (
@ -84,11 +50,11 @@ export default defineComponent({
tabindex={props.tabIndex}
title={textBoxTitle.value}
type={props.inputType}
onBlur={onBlur}
onClick={onInputClick}
onFocus={onInputFocus}
onKeydown={onEnter}
onMousedown={onMouseDown}
onBlur={onBlurTextBox}
onClick={onClickTextBox}
onFocus={onFocusTextBox}
onKeydown={onEnterTextBox}
onMousedown={onMouseDownTextBox}
/>
<div class={inputGroupAppendClass.value}>
{showClearButton.value && (
@ -96,7 +62,7 @@ export default defineComponent({
<i class="f-icon modal_close"></i>
</span>
)}
{props.groupText && <span class="input-group-text" v-html={props.groupText}></span>}
{props.appendButtonContent && <span class="input-group-text" v-html={props.appendButtonContent}></span>}
</div>
</div>
</div>

84
packages/ui-vue/components/input-group/src/input-group.props.ts
View File

@ -1,24 +1,78 @@
import { ExtractPropTypes } from 'vue';
import { ExtractPropTypes, PropType } from 'vue';
type TextAlignment = 'left' | 'center' | 'right';
export const inputGroupProps = {
/**
* 组件标识
*/
id: String,
customClass: { type: String, default: '' },
disable: { type: Boolean, default: false },
editable: { type: Boolean, default: true },
readonly: { type: Boolean, default: false },
textAlign: { type: String, default: 'left' },
showButtonWhenDisabled: { type: Boolean, default: false },
enableClear: { type: Boolean, default: false },
groupText: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
enableTitle: { type: Boolean, default: false },
inputType: { type: String, default: 'text' },
forcePlaceholder: { type: Boolean, default: false },
placeholder: { type: String, default: '' },
/**
* 扩展按钮显示内容，这是一段现在扩展按钮中的html标签
*/
appendButtonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
/**
* 启用输入框自动完成功能
*/
autoComplete: { type: Boolean, default: false },
value: { type: String, default: '' },
/**
* 组件自定义样式
*/
customClass: { type: String, default: '' },
/**
* 禁用组件，既不允许在输入框中录入，也不允许点击扩展按钮。
*/
disable: { type: Boolean, default: false },
/**
* 允许在输入框中录入文本。
*/
editable: { type: Boolean, default: true },
/**
* 显示清空文本按钮
*/
enableClear: { type: Boolean, default: false },
/**
* 将组件设置为只读，既不允许在输入框中录入，也不允许点击扩展按钮，但是允许复制输入框中的内容。
*/
readonly: { type: Boolean, default: false },
/**
* 文本对齐方式
*/
textAlign: { type: String as PropType<TextAlignment>, default: 'left' },
/**
* 禁用组件时，是否显示扩展按钮
*/
showButtonWhenDisabled: { type: Boolean, default: false },
/**
* 显示输入框的标签
*/
enableTitle: { type: Boolean, default: false },
/**
* 输入框类型
*/
inputType: { type: String, default: 'text' },
/**
* 显示输入框提示信息
*/
forcePlaceholder: { type: Boolean, default: false },
/**
* 输入框提示文本
*/
placeholder: { type: String, default: '' },
/**
* 输入框最小长度
*/
minLength: Number,
/**
* 输入框最大长度
*/
maxLength: Number,
tabIndex: Number
/**
* 输入框Tab键索引
*/
tabIndex: Number,
};
export type InputGroupProps = ExtractPropTypes<typeof inputGroupProps>;