Farris UI Vue 组件开发规范

input-group
├── test                               // 单元测试
|  └── input-group.spec.tsx
├── src                                // 组件源码
|  ├── components                      // 子组件
|  |  └── input-group-sub.component.tsx
|  ├── composition                     // 组件的可复用逻辑
|  |  ├── types.ts                     // 组合式Api返利值接口类型
|  |  ├── use-append-button.ts         // 实现组件特性1的组合式Api
|  |  └── use-clear.ts                 // 实现组件特性2的组合式Api
|  ├── input-group.component.tsx       // 组件代码
|  └── input-group.props.ts            // 定义组件Api
└── index.ts                           // 组件入口文件

import type { App } from 'vue';
import InputGroup from './src/input-group.component';

export * from './src/input-group.props';

export { InputGroup };

export default {
  install(app: App): void {
    app.component(InputGroup.name, InputGroup);
  }
};

import { PropType, ExtractPropTypes } from 'vue';

export const inputGroupProps = {
    /** 是否自动完成 */
    autocomplete: { Type: String, default: 'off' },
    /** 自定义CLASS */
    customClass: { Type: String, default: '' },
    /** 禁用 */
    disable: { Type: Boolean, default: false },
    /** 允许编辑 */
    editable: { Type: Boolean, default: true },
    /** 启用清除按钮 */
    enableClear: { Type: Boolean, default: true },
    /** 启用提示文本 */
    enableTitle: { Type: Boolean, default: true },
    /** 启用密码 */
    enableViewPassword: { Type: Boolean, default: true },
    /** 扩展信息 */
    extendInfo: { Type: String, default: '' },
    /** 始终显示占位符文本 */
    forcePlaceholder: { Type: Boolean, default: false },
    /** 扩展按钮 */
    groupText: { Type: String, default: '' },
    /** 扩展按钮模版 */
    groupTextTemplate: { Type: templateRef<any>, default: ref<HTMLElement | null>(null) },
    /** 密码模式 */
    isPassword: { Type: Boolean, default: false },
    /** 最大长度 */
    maxLength: { Type: Number || undefined, default: undefined },
    /** 最小长度 */
    minLength: { Type: Number || undefined, default: undefined },
    /** 组件值 */
    modelValue: { Type: String || Boolean, default: '' },
    /** 隐藏边线 */
    noborder: { Type: Boolean, default: false },
    /** 启用提示信息 */
    placeholder: { Type: String, default: '' },
    /** 只读 */
    readonly: { Type: Boolean, default: false },
    /** 当组件禁用或只读时显示后边的按钮 */
    showButtonWhenDisabled: { Type: Boolean, default: false },
    /** tab索引 */
    tabIndex: { Type: Number || undefined, default: undefined },
    /** 文本在输入框中的对齐方式 */
    textAlign: { Type: String, default: 'left' },
    /** 扩展信息；在输入框前面 显示 ① 图标鼠标滑过后显示 */
    useExtendInfo: { Type: Boolean, default: false },
    /** 输入值 */
    value: { Type: String, default: '' },

} as Record<string, any>;

export type InputGroupProps = ExtractPropTypes<typeof inputGroupProps>;

import { defineComponent, ref, SetupContext } from 'vue';
import { InputGroupProps, inputGroupProps } from './input-group.props';
import { useAppendedButton } from './composition/use-appended-button';
import { usePassword } from './composition/use-password';
import { TextBoxProps, useClear, useTextBox } from '../../common';
import getEditorRender from './components/text-edit.component';
import getAppendedButtonRender from './components/appended-button.component';

import './input-group.scss';

export default defineComponent({
    name: 'FInputGroup',
    props: inputGroupProps,
    emits: [
        'clear',
        'change',
        'blur',
        'click',
        'clickHandle',
        'focus',
        'input',
        'keydown',
        'keyup',
        'iconMouseEnter',
        'iconMouseLeave',
        'update:modelValue'
    ] as (string[] & ThisType<void>) | undefined,
    setup(props: InputGroupProps, context: SetupContext) {
        const modelValue = ref(props.modelValue);
        const displayText = ref(props.modelValue);
        const useTextBoxComposition = useTextBox(props as TextBoxProps, context, modelValue, displayText);
        const { inputGroupClass, inputType } = useTextBoxComposition;
        const useAppendedButtonComposition = useAppendedButton(props, context);
        const { shouldShowAppendedButton } = useAppendedButtonComposition;
        const useClearComposition = useClear(props as TextBoxProps, context, useTextBoxComposition);
        const { onMouseEnter, onMouseLeave } = useClearComposition;
        const usePasswordComposition = usePassword(props, context, inputType, useAppendedButtonComposition);

        const renderEditor = getEditorRender(props, context, usePasswordComposition, useTextBoxComposition);
        const renderAppendedButton = getAppendedButtonRender(
            props,
            context,
            useAppendedButtonComposition,
            useClearComposition,
            usePasswordComposition
        );

        return () => {
            return (
                <div id="inputGroup" class={inputGroupClass.value} onMouseenter={onMouseEnter} onMouseleave={onMouseLeave}>
                    {renderEditor()}
                    {shouldShowAppendedButton.value && renderAppendedButton()}
                </div>
            );
        };
    }
});

import { computed, SetupContext } from 'vue';
import { InputGroupProps } from '../input-group.props';
import { UseClear } from './types';

export function useClear(
    props: InputGroupProps,
    context: SetupContext,
    useTextBoxComposition: UseTextBox
): UseClear {
    const hasShownClearButton = ref(false);
    const shouldShowClearButton = computed(() => props.enableClear && !props.readonly && !props.disabled);
    const { changeTextBoxValue, isEmpty } = useTextBoxComposition;

    const clearButtonClass = computed(() => ({
        'input-group-text': true,
        'input-group-clear': true
    }));

    const clearButtonStyle = computed(() => {
        const styleObject = {
            width: '24px',
            display: hasShownClearButton.value ? 'flex' : 'none'
        } as Record<string, any>;
        return styleObject;
    });

    /** 清空输入框中的值 */
    function onClearValue($event: MouseEvent) {
        $event.stopPropagation();
        if (shouldShowClearButton.value) {
            changeTextBoxValue('');
            hasShownClearButton.value = false;
            context.emit('clear');
        }
    }

    function onMouseEnter(event: MouseEvent) {
        if (shouldShowClearButton.value && !isEmpty.value) {
            hasShownClearButton.value = true;
        }
    }

    function onMouseLeave(event: MouseEvent) {
        if (shouldShowClearButton.value) {
            hasShownClearButton.value = false;
        }
    }

    return { clearButtonClass, clearButtonStyle, hasShownClearButton, onClearValue, onMouseEnter, onMouseLeave, shouldShowClearButton };
}

    const buttonEditClass = computed(() => {
        const classObject = {
            'f-button-edit': true,
            'f-cmp-inputgroup': true,
            'f-button-edit-nowrap': !props.wrapText
        } as Record<string, boolean>;
        if (customClass.value) {
            customClass.value.split(' ').reduce<Record<string, boolean>>((result: Record<string, boolean>, className: string) => {
                result[className] = true;
                return result;
            }, classObject);
        }
        return classObject;
    });

import { mount } from '@vue/test-utils'
import { InputGroup } from '..'

describe('f-input-group', () => {
    it('variant', () => {
        const wrapper = mount({
            setup() {
                return () => {
                    return <InputGroup editable={false}></InputGroup>
                }
            }
        })

        expect(wrapper.find('.f-cmp-inputgroup').exists()).toBeTruthy()
        expect(wrapper.find('div').find('div').find('input').find('[readlony]').exists).toBeTruthy()
    })
})

  function generateDictTree(visibleTreeNodes: VisualTreeNode[]) {
      const childrenMap = generateChildrenMap(visibleTreeNodes);
      const dictTree = generateDictTreeItems(visibleTreeNodes, childrenMap);
      traversingAndRecordAncestor(dictTree);
      traversingAndRecordDescendant(dictTree);
      reorderDescendant(dictTree);
      calculateDescendantsLineLength(dictTree);
      return dictTree;
  }

  function traversingAndRecordAncestor(treeItems: DictTreeItem[]) {
      treeItems.forEach((treeItem: DictTreeItem) => {
          const currentId = treeItem.id;
          treeItem.descendants.map((treeNodeId: number) => treeItems[treeNodeId])
              .forEach((descendant: DictTreeItem) => {
                  descendant.ancestors = [...treeItem.ancestors, currentId];
              });
      });
  }