@kengic/vue 0.30.1-beta.96 → 0.31.0

package/component/KgResizable/KgResizable.service.tsx

@@ -1,41 +0,0 @@
-import { onBeforeUnmount, onMounted, Ref, ref } from 'vue';
-
-/**
- * <p>监测父元素的尺寸, 动态计算最大高度以及最大宽度.</p>
- *
- * @param param
- */
-export function _useObserveParentSize(param: { kgResizableRef: Ref<HTMLDivElement | null> }) {
-    const { kgResizableRef } = param ?? {};
-
-    // 手柄的外边距
-    const HANDLE_MARGIN = 6;
-
-    // 组件的父元素的宽度
-    const parentWidth = ref<number>(0);
-
-    // 组件的父元素的高度
-    const parentHeight = ref<number>(0);
-
-    let resizeObserver: ResizeObserver | null = null;
-
-    onMounted(() => {
-        const parentElement = kgResizableRef.value?.parentElement;
-        if (parentElement) {
-            parentWidth.value = Math.max((parentElement.clientWidth ?? 0) - 1 - HANDLE_MARGIN, 0);
-            parentHeight.value = Math.max((parentElement.clientHeight ?? 0) - 1 - HANDLE_MARGIN, 0);
-
-            resizeObserver = new ResizeObserver(() => {
-                parentWidth.value = Math.max((parentElement.clientWidth ?? 0) - 1 - HANDLE_MARGIN, 0);
-                parentHeight.value = Math.max((parentElement.clientHeight ?? 0) - 1 - HANDLE_MARGIN, 0);
-            });
-            resizeObserver.observe(parentElement);
-        }
-    });
-
-    onBeforeUnmount(() => {
-        resizeObserver?.disconnect();
-    });
-
-    return { parentWidth: parentWidth, parentHeight: parentHeight };
-}

package/component/KgResizable/KgResizable.tsx

@@ -1,239 +0,0 @@
-import { ____ERROR____ } from '@kengic/core.core';
-import { computed, CSSProperties, defineComponent, ExtractPropTypes, onUnmounted, PropType, ref } from 'vue';
-import './KgResizable.less';
-import { _useObserveParentSize } from './KgResizable.service';
-
-export const getProps = () => ({
-    /** 样式. */
-    kgClass: String as PropType<string>,
-
-    /** 是否禁用. */
-    kgDisabled: Boolean as PropType<boolean>,
-
-    /**
-     * 是否显示拖拽手柄.
-     *
-     * @default true
-     */
-    kgResizeHandleVisible: { type: Boolean as PropType<boolean>, default: true },
-
-    /** 当前高度. */
-    kgHeight: { type: Number as PropType<number>, default: 0 },
-
-    /** 最大高度. */
-    kgMaxHeight: { type: Number as PropType<number>, default: undefined },
-
-    /** 最小高度. */
-    kgMinHeight: { type: Number as PropType<number>, default: 0 },
-
-    /** 拖拽条的位置. */
-    kgType: { type: String as PropType<'top' | 'bottom' | 'left' | 'right'>, default: 'bottom' },
-
-    'onUpdate:kgHeight': Function as PropType<(value: number) => void>,
-});
-
-export type IKgResizableProps = Partial<ExtractPropTypes<ReturnType<typeof getProps>>>;
-
-// 拖动缩放尺寸
-export default defineComponent({
-    name: 'KgResizable',
-    props: getProps(),
-    emits: ['update:kgHeight'],
-    setup(props, { emit, slots }) {
-        if (props.kgMaxHeight && props.kgMaxHeight < props.kgMinHeight) {
-            ____ERROR____('KgResizable | kgMaxHeight 不能小于 kgMinHeight.', { kgMaxHeight: props.kgMaxHeight, kgMinHeight: props.kgMinHeight });
-        }
-
-        //region DATA
-        //----------------------------------------------------------------------------------------------------
-        const kgResizableRef = ref<HTMLDivElement | null>(null);
-
-        const { parentWidth, parentHeight } = _useObserveParentSize({ kgResizableRef: kgResizableRef });
-
-        /** 开始拖拽时的宽度. */
-        let fromWidth: number = 0;
-        /** 开始拖拽时的高度. */
-        let fromHeight: number = 0;
-        /** 开始拖拽时鼠标的横向位置. */
-        let fromPageX: number = 0;
-        /** 开始拖拽时鼠标的纵向位置. */
-        let fromPageY: number = 0;
-
-        let mouseupEventListener = {
-            remove: () => {},
-        };
-
-        let mousemoveEventListener = {
-            remove: () => {},
-        };
-
-        const style$$ = computed<CSSProperties>(() => {
-            switch (props.kgType) {
-                case 'top':
-                case 'bottom':
-                    return { height: Math.min(maxHeight$$.value, Math.max(minHeight$$.value, props.kgHeight)) + 'px' };
-
-                case 'left':
-                case 'right':
-                    return { width: Math.min(maxHeight$$.value, Math.max(minHeight$$.value, props.kgHeight)) + 'px' };
-            }
-        });
-
-        const class$$ = computed(() => {
-            let _class = '';
-
-            if (props.kgClass) {
-                _class += `${props.kgClass} `;
-            }
-
-            _class += 'kg-resizable';
-
-            if (props.kgDisabled) {
-                _class += ' kg-resizable--disabled';
-            }
-
-            if (!props.kgResizeHandleVisible) {
-                _class += ' kg-resizable--resize-handle-hide';
-            }
-
-            switch (props.kgType) {
-                case 'left':
-                    _class += ' kg-resizable--left';
-                    break;
-
-                case 'right':
-                    _class += ' kg-resizable--right';
-                    break;
-
-                case 'top':
-                    _class += ' kg-resizable--top';
-                    break;
-
-                case 'bottom':
-                    _class += ' kg-resizable--bottom';
-                    break;
-            }
-
-            return _class;
-        });
-
-        /**
-         * 最大高度.
-         */
-        const maxHeight$$ = computed<number>(() => {
-            switch (props.kgType) {
-                case 'top':
-                case 'bottom':
-                    return Math.min(parentHeight.value, props.kgMaxHeight ?? Number.MAX_VALUE);
-
-                case 'left':
-                case 'right':
-                    return Math.min(parentWidth.value, props.kgMaxHeight ?? Number.MAX_VALUE);
-            }
-        });
-
-        /**
-         * 最小高度.
-         */
-        const minHeight$$ = computed<number>(() => Math.min(maxHeight$$.value, props.kgMinHeight ?? 0));
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region FUNCTION
-        //----------------------------------------------------------------------------------------------------
-        function removeEventListeners() {
-            mouseupEventListener.remove();
-            mousemoveEventListener.remove();
-        }
-
-        const update = (event: MouseEvent) => {
-            switch (props.kgType) {
-                case 'top':
-                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromHeight - (event.pageY - fromPageY))));
-                    break;
-
-                case 'bottom':
-                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromHeight + (event.pageY - fromPageY))));
-                    break;
-
-                case 'left':
-                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromWidth - (event.pageX - fromPageX))));
-                    break;
-
-                case 'right':
-                    emit('update:kgHeight', Math.min(maxHeight$$.value, Math.max(minHeight$$.value, fromWidth + (event.pageX - fromPageX))));
-                    break;
-            }
-        };
-
-        function onMouseMove(event: MouseEvent) {
-            update(event);
-        }
-
-        function onMouseUp(event: MouseEvent) {
-            update(event);
-            removeEventListeners();
-        }
-
-        function onMouseDown(event: MouseEvent) {
-            event.stopPropagation();
-            event.preventDefault();
-
-            removeEventListeners();
-
-            if (event instanceof MouseEvent && event.which !== 1) {
-                return;
-            }
-
-            fromPageX = event.pageX;
-            fromPageY = event.pageY;
-
-            fromWidth = props.kgHeight;
-            fromHeight = props.kgHeight;
-
-            mouseupEventListener = addEventListener(document.documentElement, 'mouseup', onMouseUp);
-            mousemoveEventListener = addEventListener(document.documentElement, 'mousemove', onMouseMove);
-        }
-
-        function addEventListener<K extends keyof HTMLElementEventMap>(target: HTMLElement, event: K, listener: (this: HTMLElement, event: HTMLElementEventMap[K]) => any): { remove: () => void } {
-            target.addEventListener(event, listener);
-
-            return {
-                remove: () => target.removeEventListener(event, listener),
-            };
-        }
-
-        function onClick(event: MouseEvent) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        //region LIFECYCLE
-        //----------------------------------------------------------------------------------------------------
-        onUnmounted(() => {
-            removeEventListeners();
-        });
-        //----------------------------------------------------------------------------------------------------
-        //endregion
-
-        return () => (
-            <div
-                ref={kgResizableRef}
-                class={class$$.value}
-                style={style$$.value}
-            >
-                <div
-                    class="kg-resizable-handle"
-                    onClick={onClick}
-                    onMousedown={onMouseDown}
-                >
-                    <div class="kg-resizable-handle-line"></div>
-                </div>
-
-                {slots.default?.()}
-            </div>
-        );
-    },
-});

package/component/KgSearch/KgSearch.event.ts

@@ -1,78 +0,0 @@
-import { IKgEventListener, kgEmit } from '@kengic/core.core';
-import { values } from 'lodash-es';
-import { IKgTableRequestParameter } from '../KgTable';
-import { useKgVar } from '../KgVar';
-
-/**
- * 事件类型.
- */
-export type IKgSearchEvent =
-    // 查询字段初始完成, 组件渲染完成, 查询表单对象已经有值
-    | 'onReady'
-
-    // 点击查询按钮, 并且表单验证通过
-    | 'onSearch'
-
-    // 点击重置按钮
-    | 'onReset';
-
-//region 事件 onReady
-//----------------------------------------------------------------------------------------------------
-export type IKgSearch$EventListenerParameter$onReady = {};
-export type IKgSearch$EventListener$onReady = ((param: IKgSearch$EventListenerParameter$onReady) => Promise<boolean>) & IKgEventListener;
-//endregion
-
-//region 事件 onSearch
-//----------------------------------------------------------------------------------------------------
-export type IKgSearch$EventListenerParameter$onSearch = {} & IKgTableRequestParameter;
-export type IKgSearch$EventListener$onSearch = ((param: IKgSearch$EventListenerParameter$onSearch) => Promise<boolean>) & IKgEventListener;
-//endregion
-
-//region 事件 onReset
-//----------------------------------------------------------------------------------------------------
-export type IKgSearch$EventListenerParameter$onReset = {};
-export type IKgSearch$EventListener$onReset = ((param: IKgSearch$EventListenerParameter$onReset) => Promise<boolean>) & IKgEventListener;
-//endregion
-
-export type IKgSearch$EventListenerParameter = IKgSearch$EventListenerParameter$onReady | IKgSearch$EventListenerParameter$onSearch | IKgSearch$EventListenerParameter$onReset;
-export type IKgSearch$EventListener = IKgSearch$EventListener$onReady | IKgSearch$EventListener$onSearch | IKgSearch$EventListener$onReset;
-
-export const eventListeners: Record<
-    string,
-    {
-        onReady: Array<IKgSearch$EventListener$onReady>;
-        onReset: Array<IKgSearch$EventListener$onReset>;
-        onSearch: Array<IKgSearch$EventListener$onSearch>;
-    }
-> = {};
-
-/**
- * 触发事件.
- *
- * @param param.event 事件名称.
- * @param param.id 唯一标识.
- * @param param.parameter 事件参数.
- */
-export async function emit<P extends IKgSearch$EventListenerParameter>(param: { event: IKgSearchEvent; id?: string | undefined; parameter: P }): Promise<boolean> {
-    const { event, id = '', parameter } = param ?? {};
-
-    // 其他页面可能使用了该页面的查询条件, 找出这些其他页面的界面标识,
-    const kgVar = useKgVar(id);
-    const childFidList = [...values(kgVar.store.getVarGridConfigMap)]
-        .filter((i) => i?.prf_frm_id === id)
-        .map((i) => i?.frm_id)
-        .filter((i) => !!i) as Array<string>;
-
-    await Promise.all(
-        [id, ...childFidList].map((i) =>
-            kgEmit<IKgSearchEvent, P, IKgSearch$EventListener>({
-                event: event,
-                eventListeners: eventListeners,
-                id: i,
-                parameter: parameter,
-            }),
-        ),
-    );
-
-    return Promise.resolve(true);
-}

package/component/KgSearch/KgSearch.hooks.ts

@@ -1,160 +0,0 @@
-import { ____ERROR____, ____WARN_____, IRemoveEventListener } from '@kengic/core.core';
-import { computed, ComputedRef, watch } from 'vue';
-import { VarProfileDetail, VarProfileMasterDTO } from '../../api/WMS/models';
-import { pinia } from '../../config';
-import { kgOnEventFactory } from '../../util';
-import { IKgTableRequestParameter } from '../KgTable';
-import { useKgVar } from '../KgVar';
-import { eventListeners, IKgSearch$EventListener$onReady, IKgSearch$EventListener$onReset, IKgSearch$EventListener$onSearch, IKgSearchEvent } from './KgSearch.event';
-import { buildKgSearchStore, useKgSearchStore } from './KgSearch.store';
-
-export type IUseKgSearch = {
-    /**
-     * 当前查询字段列表.
-     */
-    currentVarProfileDetails: ComputedRef<Array<VarProfileDetail>>;
-
-    /**
-     * 当前查询字段列表(可见的).
-     */
-    currentVarProfileDetailsForVisible: ComputedRef<Array<VarProfileDetail>>;
-
-    currentVarProfileMaster: ComputedRef<VarProfileMasterDTO | null>;
-
-    /**
-     * 高级查询的操作符表单数据对象.
-     */
-    dynamicQueryOperatorModel: ComputedRef<Record<string, string>>;
-
-    /**
-     * 所有事件监听函数.
-     */
-    eventListeners: typeof eventListeners;
-
-    /**
-     * 界面标识.
-     */
-    formID: string;
-
-    /**
-     * 表单数据对象.
-     */
-    formModel: ComputedRef<Record<string, any> | null>;
-
-    /** 是否就绪: 查询字段初始完成, 组件渲染完成. */
-    isReady: ComputedRef<boolean>;
-
-    /** @deprecated 请使用 {@link formModel} */
-    model: ComputedRef<Record<string, any> | null>;
-
-    /**
-     * 监听事件: 查询字段初始完成, 组件渲染完成, 查询表单对象已经有值.
-     *
-     * @param listener 事件监听函数.
-     * @param isOnce 是否只会触发一次. 默认为 undefined.
-     */
-    onReady(listener: IKgSearch$EventListener$onReady, isOnce?: boolean): IRemoveEventListener;
-
-    /**
-     * 监听事件: reset, 点击重置按钮.
-     * @param listener 事件监听函数.
-     * @param isOnce 是否只会触发一次. 默认为 undefined.
-     */
-    onReset(listener: IKgSearch$EventListener$onReset, isOnce?: boolean): IRemoveEventListener;
-
-    /**
-     * 监听事件: search, 点击查询按钮, 并且表单验证通过.
-     * @param listener 事件监听函数.
-     * @param isOnce 是否只会触发一次. 默认为 undefined.
-     */
-    onSearch(listener: IKgSearch$EventListener$onSearch, isOnce?: boolean): IRemoveEventListener;
-
-    /**
-     * 重置.
-     */
-    reset(): void;
-
-    /**
-     * 查询.
-     */
-    search(param?: boolean | IKgTableRequestParameter): void;
-
-    // TODO LT 废弃移除
-    /**
-     * 状态数据.
-     */
-    store: ReturnType<typeof useKgSearchStore>;
-};
-
-/**
- * @param fid 界面标识.
- */
-export function useKgSearch(fid?: string | null): IUseKgSearch {
-    const kgVar = useKgVar(fid);
-
-    const store = buildKgSearchStore(fid)(pinia);
-    // TODO LT 废弃移除
-    const storeOld = useKgSearchStore(pinia);
-
-    return new Proxy(
-        {
-            currentVarProfileDetails: computed(() => storeOld.getCurrentVarProfileMaster(kgVar.fid)?.varProfileDetails ?? []),
-            currentVarProfileDetailsForVisible: computed(
-                () =>
-                    storeOld.getCurrentVarProfileMaster(kgVar.fid)?.varProfileDetails?.filter((i) => {
-                        const varSubmitDetail = kgVar.kgSubmit.getVarSubmitDetailByVarProfileDetail({ varProfileDetail: i });
-                        return varSubmitDetail?.visible_flag !== 0;
-                    }) ?? [],
-            ),
-            currentVarProfileMaster: computed(() => storeOld.getCurrentVarProfileMaster(kgVar.fid)),
-            dynamicQueryOperatorModel: computed(() => storeOld.getDynamicQueryOperatorModel(kgVar.fid)),
-            eventListeners: eventListeners,
-            formID: kgVar.fid,
-            formModel: computed(() => storeOld.getFormModel(kgVar.fid)),
-            isReady: computed(() => storeOld.getIsReady(kgVar.fid)),
-            model: computed(() => storeOld.getFormModel(kgVar.fid)),
-            onReady: kgOnEventFactory<IKgSearchEvent, IKgSearch$EventListener$onReady>({ eventListeners: eventListeners, event: 'onReady', id: kgVar.fid }),
-            onReset: kgOnEventFactory<IKgSearchEvent, IKgSearch$EventListener$onReset>({ eventListeners: eventListeners, event: 'onReset', id: kgVar.fid }),
-            onSearch: kgOnEventFactory<IKgSearchEvent, IKgSearch$EventListener$onSearch>({ eventListeners: eventListeners, event: 'onSearch', id: kgVar.fid }),
-            reset() {
-                return storeOld.getResetFn(kgVar.fid)?.();
-            },
-            search(args?: boolean | IKgTableRequestParameter) {
-                const stopWatch = watch(
-                    () => storeOld.getIsReady(kgVar.fid),
-                    async (isReady) => {
-                        if (isReady) {
-                            setTimeout(() => stopWatch());
-
-                            const fn = storeOld.getSearchFn(kgVar.fid);
-                            if (!fn) {
-                                ____ERROR____(`${kgVar.fid} | useKgSearch | search() | 查询函数为空.`);
-                                return;
-                            }
-
-                            if (typeof args === 'boolean') {
-                                ____WARN_____(`${kgVar.fid} | useKgSearch | search() | 旧的参数格式已弃用, 请使用新的参数格式.`);
-                                fn({ isSearchFirstPage: args });
-                            } else {
-                                fn(args);
-                            }
-                        }
-                    },
-                    { immediate: true },
-                );
-            },
-            // TODO LT 废弃移除
-            store: storeOld,
-        } as IUseKgSearch,
-        {
-            get(target, p): any {
-                // 将部分属性直接代理给状态管理对象(store), 这样就可以直接访问 store 上的所有属性和方法,
-                if (!(p in target) && p in store) {
-                    return Reflect.get(store, p);
-                }
-
-                return Reflect.get(target, p);
-            },
-        },
-    );
-}