@kengic/vue 0.30.1-beta.96 → 0.31.0

package/project/src/hooks/event/useEventListener.ts

@@ -1,52 +0,0 @@
-import { useDebounceFn, useThrottleFn } from '@vueuse/core';
-import type { Ref } from 'vue';
-import { ref, unref, watch } from 'vue';
-
-export type RemoveEventFn = () => void;
-export interface UseEventParams {
-    el?: Element | Ref<Element | undefined> | Window | any;
-    name: string;
-    listener: EventListener;
-    options?: boolean | AddEventListenerOptions;
-    autoRemove?: boolean;
-    isDebounce?: boolean;
-    wait?: number;
-}
-export function useEventListener({ el = window, name, listener, options, autoRemove = true, isDebounce = true, wait = 80 }: UseEventParams): {
-    removeEvent: RemoveEventFn;
-} {
-    /* eslint-disable-next-line */
-    let remove: RemoveEventFn = () => {};
-    const isAddRef = ref(false);
-
-    if (el) {
-        const element = ref(el as Element) as Ref<Element>;
-
-        const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
-        const realHandler = wait ? handler : listener;
-        const removeEventListener = (e: Element) => {
-            isAddRef.value = true;
-            e.removeEventListener(name, realHandler, options);
-        };
-        const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
-
-        const removeWatch = watch(
-            element,
-            (v, _ov, cleanUp) => {
-                if (v) {
-                    !unref(isAddRef) && addEventListener(v);
-                    cleanUp(() => {
-                        autoRemove && removeEventListener(v);
-                    });
-                }
-            },
-            { immediate: true },
-        );
-
-        remove = () => {
-            removeEventListener(element.value);
-            removeWatch();
-        };
-    }
-    return { removeEvent: remove };
-}

package/project/src/hooks/event/useIntersectionObserver.ts

@@ -1,42 +0,0 @@
-import { Ref, ref, watchEffect } from 'vue';
-
-interface IntersectionObserverProps {
-    target: Ref<Element | null | undefined>;
-    root?: Ref<any>;
-    onIntersect: IntersectionObserverCallback;
-    rootMargin?: string;
-    threshold?: number;
-}
-
-export function useIntersectionObserver({ target, root, onIntersect, rootMargin = '0px', threshold = 0.1 }: IntersectionObserverProps) {
-    let cleanup = () => {};
-    const observer: Ref<Nullable<IntersectionObserver>> = ref(null);
-    const stopEffect = watchEffect(() => {
-        cleanup();
-
-        observer.value = new IntersectionObserver(onIntersect, {
-            root: root ? root.value : null,
-            rootMargin,
-            threshold,
-        });
-
-        const current = target.value;
-
-        current && observer.value.observe(current);
-
-        cleanup = () => {
-            if (observer.value) {
-                observer.value.disconnect();
-                target.value && observer.value.unobserve(target.value);
-            }
-        };
-    });
-
-    return {
-        observer,
-        stop: () => {
-            cleanup();
-            stopEffect();
-        },
-    };
-}

package/project/src/hooks/event/useScrollTo.ts

@@ -1,59 +0,0 @@
-import { ref, unref } from 'vue';
-import { isFunction, isUnDef } from '../../utils/is';
-
-export interface ScrollToParams {
-    el: any;
-    to: number;
-    duration?: number;
-    callback?: () => any;
-}
-
-const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
-    t /= d / 2;
-    if (t < 1) {
-        return (c / 2) * t * t + b;
-    }
-    t--;
-    return (-c / 2) * (t * (t - 2) - 1) + b;
-};
-const move = (el: HTMLElement, amount: number) => {
-    el.scrollTop = amount;
-};
-
-const position = (el: HTMLElement) => {
-    return el.scrollTop;
-};
-export function useScrollTo({ el, to, duration = 500, callback }: ScrollToParams) {
-    const isActiveRef = ref(false);
-    const start = position(el);
-    const change = to - start;
-    const increment = 20;
-    let currentTime = 0;
-    duration = isUnDef(duration) ? 500 : duration;
-
-    const animateScroll = function () {
-        if (!unref(isActiveRef)) {
-            return;
-        }
-        currentTime += increment;
-        const val = easeInOutQuad(currentTime, start, change, duration);
-        move(el, val);
-        if (currentTime < duration && unref(isActiveRef)) {
-            requestAnimationFrame(animateScroll);
-        } else {
-            if (callback && isFunction(callback)) {
-                callback();
-            }
-        }
-    };
-    const run = () => {
-        isActiveRef.value = true;
-        animateScroll();
-    };
-
-    const stop = () => {
-        isActiveRef.value = false;
-    };
-
-    return { start: run, stop };
-}

package/project/src/hooks/event/useWindowSizeFn.ts

@@ -1,36 +0,0 @@
-import { tryOnMounted, tryOnUnmounted, useDebounceFn } from '@vueuse/core';
-
-interface WindowSizeOptions {
-    once?: boolean;
-    immediate?: boolean;
-    listenerOptions?: AddEventListenerOptions | boolean;
-}
-
-export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {
-    let handler = () => {
-        fn();
-    };
-    const handleSize = useDebounceFn(handler, wait);
-    handler = handleSize;
-
-    const start = () => {
-        if (options && options.immediate) {
-            handler();
-        }
-        window.addEventListener('resize', handler);
-    };
-
-    const stop = () => {
-        window.removeEventListener('resize', handler);
-    };
-
-    tryOnMounted(() => {
-        start();
-    });
-
-    tryOnUnmounted(() => {
-        stop();
-    });
-
-    return [start, stop];
-}

package/project/src/hooks/index.ts

@@ -1,26 +0,0 @@
-export * from './component/usePageContext';
-export * from './component/useFormItem';
-
-export * from './core/onMountedOrActivated';
-export * from './core/useAttrs';
-export * from './core/useContext';
-export * from './core/useRefs';
-export * from './core/useTimeout';
-
-export * from './event/useBreakpoint';
-export * from './event/useEventListener';
-export * from './event/useIntersectionObserver';
-export * from './event/useScrollTo';
-export * from './event/useWindowSizeFn';
-
-export * from './jeecg/useAdaptiveWidth';
-
-export * from './setting/index';
-
-export * from './web/useAppInject';
-export * from './web/useContentHeight';
-export * from './web/useCopyToClipboard';
-export * from './web/useDesign';
-export * from './web/usePage';
-export * from './web/usePagination';
-export * from './web/useWebSocket';

package/project/src/hooks/jeecg/useAdaptiveWidth.ts

@@ -1,82 +0,0 @@
-import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
-import { ref } from 'vue';
-import { useEventListener } from '../event/useEventListener';
-
-// key = js运算符+数字
-const defWidthConfig: configType = {
-    '<=565': '100%',
-    '<=1366': '800px',
-    '<=1600': '600px',
-    '<=1920': '600px',
-    '>1920': '500px',
-};
-
-type configType = Record<string, string | number>;
-
-/**
- * 自适应宽度
- *
- * @param widthConfig 宽度配置，可参考 defWidthConfig 配置
- * @param assign 是否合并默认配置
- * @param debounce 去抖毫秒数
- */
-export function useAdaptiveWidth(widthConfig = defWidthConfig, assign = true, debounce = 50) {
-    const widthConfigAssign = assign ? Object.assign({}, defWidthConfig, widthConfig) : widthConfig;
-    const configKeys = Object.keys(widthConfigAssign);
-
-    const adaptiveWidth = ref<string | number>();
-
-    /**
-     * 进行计算宽度
-     * @param innerWidth
-     */
-    function calcWidth(innerWidth: any) {
-        let width;
-        for (const key of configKeys) {
-            try {
-                // 通过js运算
-                let flag = new Function(`return ${innerWidth} ${key}`)();
-                if (flag) {
-                    width = widthConfigAssign[key];
-                    break;
-                }
-            } catch (e) {
-                console.error(e);
-            }
-        }
-        if (width) {
-            adaptiveWidth.value = width;
-        } else {
-            console.warn('没有找到匹配的自适应宽度');
-        }
-    }
-
-    // 初始计算
-    calcWidth(window.innerWidth);
-
-    // 监听 resize 事件
-    const { removeEvent } = useEventListener({
-        el: window,
-        name: 'resize',
-        listener: useDebounceFn(() => calcWidth(window.innerWidth), debounce),
-    });
-    // 卸载组件时取消监听事件
-    tryOnUnmounted(() => removeEvent());
-
-    return { adaptiveWidth };
-}
-
-/**
- * 抽屉自适应宽度
- */
-export function useDrawerAdaptiveWidth() {
-    return useAdaptiveWidth(
-        {
-            '<=620': '100%',
-            '<=1600': 600,
-            '<=1920': 650,
-            '>1920': 700,
-        },
-        false,
-    );
-}

package/project/src/hooks/setting/index.ts

@@ -1,27 +0,0 @@
-import { GlobConfig } from '../../../types';
-import { getAppEnvConfig } from '../../utils/env';
-
-export const useGlobSetting = (): Readonly<GlobConfig> => {
-    const { VITE_GLOB_APP_TITLE, VITE_GLOB_API_URL, VITE_GLOB_APP_SHORT_NAME, VITE_GLOB_API_URL_PREFIX, VITE_GLOB_APP_CAS_BASE_URL, VITE_GLOB_APP_OPEN_SSO, VITE_GLOB_DOMAIN_URL, VITE_GLOB_ONLINE_VIEW_URL } = getAppEnvConfig();
-
-    if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
-        // warn(
-        //   `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
-        // );
-    }
-
-    // Take global configuration
-    const glob: Readonly<GlobConfig> = {
-        title: VITE_GLOB_APP_TITLE,
-        domainUrl: VITE_GLOB_DOMAIN_URL,
-        apiUrl: VITE_GLOB_API_URL,
-        shortName: VITE_GLOB_APP_SHORT_NAME,
-        openSso: VITE_GLOB_APP_OPEN_SSO,
-        casBaseUrl: VITE_GLOB_APP_CAS_BASE_URL,
-        urlPrefix: VITE_GLOB_API_URL_PREFIX,
-        uploadUrl: VITE_GLOB_DOMAIN_URL,
-        viewUrl: VITE_GLOB_ONLINE_VIEW_URL,
-    };
-    window._CONFIG['domianURL'] = VITE_GLOB_DOMAIN_URL;
-    return glob as Readonly<GlobConfig>;
-};

package/project/src/hooks/web/useAppInject.ts

@@ -1,10 +0,0 @@
-import { computed, unref } from 'vue';
-import { useAppProviderContext } from '../../components/Application/src/useAppContext';
-
-export function useAppInject() {
-    const values = useAppProviderContext();
-
-    return {
-        getIsMobile: computed(() => unref(values.isMobile)),
-    };
-}

package/project/src/hooks/web/useContentHeight.ts

@@ -1,175 +0,0 @@
-import { ComputedRef, isRef, nextTick, Ref, ref, unref, watch } from 'vue';
-import { useLayoutHeight } from '../../layouts/default/content/useContentViewHeight';
-import { isNumber, isString } from '../../utils';
-import { getViewportOffset } from '../../utils/domUtils';
-import { onMountedOrActivated } from '../core/onMountedOrActivated';
-import { useWindowSizeFn } from '../event/useWindowSizeFn';
-
-export interface CompensationHeight {
-    // 使用 layout Footer 高度作为判断补偿高度的条件
-    useLayoutFooter: boolean;
-    // refs HTMLElement
-    elements?: Ref[];
-}
-
-type Upward = number | string | null | undefined;
-
-/**
- * 动态计算内容高度，根据锚点dom最下坐标到屏幕最下坐标，根据传入dom的高度、padding、margin等值进行动态计算
- * 最终获取合适的内容高度
- *
- * @param flag 用于开启计算的响应式标识
- * @param anchorRef 锚点组件 Ref<ElRef | ComponentRef>
- * @param subtractHeightRefs 待减去高度的组件列表 Ref<ElRef | ComponentRef>
- * @param substractSpaceRefs 待减去空闲空间(margins/paddings)的组件列表 Ref<ElRef | ComponentRef>
- * @param offsetHeightRef 计算偏移的响应式高度，计算高度时将直接减去此值
- * @param upwardSpace 向上递归减去空闲空间的 层级 或 直到指定class为止 数值为2代表向上递归两次|数值为ant-layout表示向上递归直到碰见.ant-layout为止
- * @returns 响应式高度
- */
-export function useContentHeight(flag: ComputedRef<Boolean>, anchorRef: Ref, subtractHeightRefs: Ref[], substractSpaceRefs: Ref[], upwardSpace: Ref<Upward> | ComputedRef<Upward> | Upward = 0, offsetHeightRef: Ref<number> = ref(0)) {
-    const contentHeight: Ref<Nullable<number>> = ref(null);
-    const { footerHeightRef: layoutFooterHeightRef } = useLayoutHeight();
-    let compensationHeight: CompensationHeight = {
-        useLayoutFooter: true,
-    };
-
-    const setCompensation = (params: CompensationHeight) => {
-        compensationHeight = params;
-    };
-
-    function redoHeight() {
-        nextTick(() => {
-            calcContentHeight();
-        });
-    }
-
-    function calcSubtractSpace(element: Element | null | undefined, direction: 'all' | 'top' | 'bottom' = 'all'): number {
-        function numberPx(px: string) {
-            return Number(px.replace(/[^\d]/g, ''));
-        }
-        let subtractHeight = 0;
-        const ZERO_PX = '0px';
-        if (element) {
-            const cssStyle = getComputedStyle(element);
-            const marginTop = numberPx(cssStyle?.marginTop ?? ZERO_PX);
-            const marginBottom = numberPx(cssStyle?.marginBottom ?? ZERO_PX);
-            const paddingTop = numberPx(cssStyle?.paddingTop ?? ZERO_PX);
-            const paddingBottom = numberPx(cssStyle?.paddingBottom ?? ZERO_PX);
-            if (direction === 'all') {
-                subtractHeight += marginTop;
-                subtractHeight += marginBottom;
-                subtractHeight += paddingTop;
-                subtractHeight += paddingBottom;
-            } else if (direction === 'top') {
-                subtractHeight += marginTop;
-                subtractHeight += paddingTop;
-            } else {
-                subtractHeight += marginBottom;
-                subtractHeight += paddingBottom;
-            }
-        }
-        return subtractHeight;
-    }
-
-    function getEl(element: any): Nullable<HTMLDivElement> {
-        if (element == null) {
-            return null;
-        }
-        return (element instanceof HTMLDivElement ? element : element.$el) as HTMLDivElement;
-    }
-
-    async function calcContentHeight() {
-        if (!flag.value) {
-            return;
-        }
-        // Add a delay to get the correct height
-        await nextTick();
-
-        const anchorEl = getEl(unref(anchorRef));
-        if (!anchorEl) {
-            return;
-        }
-        const { bottomIncludeBody } = getViewportOffset(anchorEl);
-
-        // substract elements height
-        let substractHeight = 0;
-        subtractHeightRefs.forEach((item) => {
-            substractHeight += getEl(unref(item))?.offsetHeight ?? 0;
-        });
-
-        // subtract margins / paddings
-        let substractSpaceHeight = calcSubtractSpace(anchorEl) ?? 0;
-        substractSpaceRefs.forEach((item) => {
-            substractSpaceHeight += calcSubtractSpace(getEl(unref(item)));
-        });
-
-        // upwardSpace
-        let upwardSpaceHeight = 0;
-        function upward(element: Element | null, upwardLvlOrClass: number | string | null | undefined) {
-            if (element && upwardLvlOrClass) {
-                const parent = element.parentElement;
-                if (parent) {
-                    if (isString(upwardLvlOrClass)) {
-                        if (!parent.classList.contains(upwardLvlOrClass)) {
-                            upwardSpaceHeight += calcSubtractSpace(parent, 'bottom');
-                            upward(parent, upwardLvlOrClass);
-                        } else {
-                            upwardSpaceHeight += calcSubtractSpace(parent, 'bottom');
-                        }
-                    } else if (isNumber(upwardLvlOrClass)) {
-                        if (upwardLvlOrClass > 0) {
-                            upwardSpaceHeight += calcSubtractSpace(parent, 'bottom');
-                            upward(parent, --upwardLvlOrClass);
-                        }
-                    }
-                }
-            }
-        }
-        if (isRef(upwardSpace)) {
-            upward(anchorEl, unref(upwardSpace));
-        } else {
-            upward(anchorEl, upwardSpace);
-        }
-
-        let height = bottomIncludeBody - unref(layoutFooterHeightRef) - unref(offsetHeightRef) - substractHeight - substractSpaceHeight - upwardSpaceHeight;
-
-        // compensation height
-        const calcCompensationHeight = () => {
-            compensationHeight.elements?.forEach((item) => {
-                height += getEl(unref(item))?.offsetHeight ?? 0;
-            });
-        };
-        if (compensationHeight.useLayoutFooter && unref(layoutFooterHeightRef) > 0) {
-            calcCompensationHeight();
-        } else {
-            calcCompensationHeight();
-        }
-
-        contentHeight.value = height;
-    }
-
-    onMountedOrActivated(() => {
-        nextTick(() => {
-            calcContentHeight();
-        });
-    });
-    useWindowSizeFn(
-        (() => {
-            calcContentHeight();
-        }) as any,
-        50,
-        { immediate: true },
-    );
-    watch(
-        () => [layoutFooterHeightRef.value],
-        () => {
-            calcContentHeight();
-        },
-        {
-            flush: 'post',
-            immediate: true,
-        },
-    );
-
-    return { redoHeight, setCompensation, contentHeight };
-}

package/project/src/hooks/web/useCopyToClipboard.ts

@@ -1,70 +0,0 @@
-import { ref, watch } from 'vue';
-import { isDef } from '../../utils/is';
-
-interface Options {
-    target?: HTMLElement;
-}
-
-export function useCopyToClipboard(initial?: string) {
-    const clipboardRef = ref(initial || '');
-    const isSuccessRef = ref(false);
-    const copiedRef = ref(false);
-
-    watch(
-        clipboardRef,
-        (str?: string) => {
-            if (isDef(str)) {
-                copiedRef.value = true;
-                isSuccessRef.value = copyTextToClipboard(str);
-            }
-        },
-        { immediate: !!initial, flush: 'sync' },
-    );
-
-    return { clipboardRef, isSuccessRef, copiedRef };
-}
-
-export function copyTextToClipboard(input: string, { target = document.body }: Options = {}) {
-    const element = document.createElement('textarea');
-    const previouslyFocusedElement = document.activeElement;
-
-    element.value = input;
-
-    element.setAttribute('readonly', '');
-
-    (element.style as any).contain = 'strict';
-    element.style.position = 'absolute';
-    element.style.left = '-9999px';
-    element.style.fontSize = '12pt';
-
-    const selection = document.getSelection();
-    let originalRange;
-    if (selection && selection.rangeCount > 0) {
-        originalRange = selection.getRangeAt(0);
-    }
-
-    target.append(element);
-    element.select();
-
-    element.selectionStart = 0;
-    element.selectionEnd = input.length;
-
-    let isSuccess = false;
-    try {
-        isSuccess = document.execCommand('copy');
-    } catch (e: any) {
-        throw new Error(e);
-    }
-
-    element.remove();
-
-    if (originalRange && selection) {
-        selection.removeAllRanges();
-        selection.addRange(originalRange);
-    }
-
-    if (previouslyFocusedElement) {
-        (previouslyFocusedElement as HTMLElement).focus();
-    }
-    return isSuccess;
-}

package/project/src/hooks/web/useDesign.ts

@@ -1,10 +0,0 @@
-import { useAppProviderContext } from '../../components/Application/src/useAppContext';
-
-export function useDesign(scope: string) {
-    const values = useAppProviderContext();
-
-    return {
-        prefixCls: `${values.prefixCls}-${scope}`,
-        prefixVar: values.prefixCls,
-    };
-}

package/project/src/hooks/web/usePage.ts

@@ -1,87 +0,0 @@
-import { unref } from 'vue';
-import type { RouteLocationRaw, Router } from 'vue-router';
-import { useKg } from '../../../../config';
-import { PageEnum } from '../../enums/pageEnum';
-import { REDIRECT_NAME } from '../../router/constant2';
-import { isString } from '../../utils';
-
-export type RouteLocationRawEx = Omit<RouteLocationRaw, 'path'> & { path: PageEnum };
-
-function handleError(e: Error) {
-    console.error(e);
-}
-
-// page switch
-export function useGo(_router?: Router) {
-    function go(opt: PageEnum | RouteLocationRawEx | string = PageEnum.BASE_HOME, isReplace = false) {
-        if (!opt) {
-            return;
-        }
-
-        const kg = useKg();
-        const { push, replace } = _router || kg.router!;
-
-        if (isString(opt)) {
-            isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
-        } else {
-            const o = opt as RouteLocationRaw;
-            isReplace ? replace(o).catch(handleError) : push(o).catch(handleError);
-        }
-    }
-    return go;
-}
-
-/**
- * @description: redo current page
- */
-export const useRedo = (_router?: Router) => {
-    function redo(): Promise<boolean> {
-        const kg = useKg();
-        const { push, currentRoute } = _router || kg.router!;
-        const { query, params = {}, name, fullPath } = unref(currentRoute.value);
-
-        return new Promise((resolve) => {
-            if (name === REDIRECT_NAME) {
-                resolve(false);
-                return;
-            }
-            if (name && Object.keys(params).length > 0) {
-                //update-begin-author:taoyan date:2022-10-19 for: VUEN-2356 【vue3】online表单、表单设计器 功能测试 右键刷新时 404
-                if (isDynamicRoute(params, name)) {
-                    params['_redirect_type'] = 'path';
-                    params['path'] = fullPath;
-                } else {
-                    params['_redirect_type'] = 'name';
-                    params['path'] = String(name);
-                }
-                //update-end-author:taoyan date:2022-10-19 for: VUEN-2356 【vue3】online表单、表单设计器 功能测试 右键刷新时 404
-            } else {
-                params['_redirect_type'] = 'path';
-                params['path'] = fullPath;
-            }
-            push({ name: REDIRECT_NAME, params, query }).then(() => resolve(true));
-        });
-    }
-    return redo;
-};
-
-/**
- * 判断是不是动态路由的跳转
- * @param params
- * @param name
- */
-function isDynamicRoute(params: any, name: any) {
-    if (name.endsWith('/dda/index')) {
-        return true;
-    }
-    let arr = Object.keys(params);
-    let flag = false;
-    for (let i = 0; i < arr.length; i++) {
-        let key = '@' + arr[i];
-        if ((name as string).indexOf(key) > 0) {
-            flag = true;
-            break;
-        }
-    }
-    return flag;
-}