@kengic/vue 0.30.1-beta.93 → 0.30.1-beta.95

package/project/src/enums/DateTypeEnum.ts

@@ -0,0 +1,8 @@
+/**
+ * 日期类型
+ */
+export enum DateTypeEnum {
+    Date = 'date',
+    Datetime = 'datetime',
+    Time = 'time',
+}

package/project/src/enums/appEnum.ts

@@ -0,0 +1,58 @@
+export const SIDE_BAR_MINI_WIDTH = 48;
+export const SIDE_BAR_SHOW_TIT_MINI_WIDTH = 80;
+
+// 标签页样式
+export enum TabsThemeEnum {
+    // 圆滑
+    SMOOTH = 'smooth',
+    // 卡片
+    CARD = 'card',
+    // 极简
+    SIMPLE = 'simple',
+}
+
+export enum ContentEnum {
+    // auto width
+    FULL = 'full',
+    // fixed width
+    FIXED = 'fixed',
+}
+
+// menu theme enum
+export enum ThemeEnum {
+    DARK = 'dark',
+    LIGHT = 'light',
+}
+
+export enum SettingButtonPositionEnum {
+    AUTO = 'auto',
+    HEADER = 'header',
+    FIXED = 'fixed',
+}
+
+export enum SessionTimeoutProcessingEnum {
+    ROUTE_JUMP,
+    PAGE_COVERAGE,
+}
+
+/**
+ * 权限模式
+ */
+export enum PermissionModeEnum {
+    // role
+    ROLE = 'ROLE',
+    // 后台
+    BACK = 'BACK',
+    // route mapping
+    ROUTE_MAPPING = 'ROUTE_MAPPING',
+}
+
+//  Route switching animation
+export enum RouterTransitionEnum {
+    ZOOM_FADE = 'zoom-fade',
+    ZOOM_OUT = 'zoom-out',
+    FADE_SIDE = 'fade-slide',
+    FADE = 'fade',
+    FADE_BOTTOM = 'fade-bottom',
+    FADE_SCALE = 'fade-scale',
+}

package/project/src/enums/breakpointEnum.ts

@@ -0,0 +1,28 @@
+export enum sizeEnum {
+    XS = 'XS',
+    SM = 'SM',
+    MD = 'MD',
+    LG = 'LG',
+    XL = 'XL',
+    XXL = 'XXL',
+}
+
+export enum screenEnum {
+    XS = 480,
+    SM = 576,
+    MD = 768,
+    LG = 992,
+    XL = 1200,
+    XXL = 1600,
+}
+
+const screenMap = new Map<sizeEnum, number>();
+
+screenMap.set(sizeEnum.XS, screenEnum.XS);
+screenMap.set(sizeEnum.SM, screenEnum.SM);
+screenMap.set(sizeEnum.MD, screenEnum.MD);
+screenMap.set(sizeEnum.LG, screenEnum.LG);
+screenMap.set(sizeEnum.XL, screenEnum.XL);
+screenMap.set(sizeEnum.XXL, screenEnum.XXL);
+
+export { screenMap };

package/project/src/enums/cacheEnum.ts

@@ -0,0 +1,39 @@
+// token key
+export const TOKEN_KEY = 'TOKEN__';
+
+// user info key
+export const USER_INFO_KEY = 'USER__INFO__';
+
+export const LOCALE_KEY = 'LOCALE__';
+
+// role info key
+export const ROLES_KEY = 'ROLES__KEY__';
+export const USER_WAREHOUSE_KEY = 'USER_WAREHOUSE__KEY__';
+
+// dict info key
+export const DB_DICT_DATA_KEY = 'UI_CACHE_DB_DICT_DATA';
+
+// project config key
+export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__';
+
+// lock info
+export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__';
+
+export const MULTIPLE_TABS_KEY = 'MULTIPLE_TABS__KEY__';
+
+export const APP_DARK_MODE_KEY_ = '__APP__DARK__MODE__';
+
+// base global local key
+export const APP_LOCAL_CACHE_KEY = 'COMMON__LOCAL__KEY__';
+
+// base global session key
+export const APP_SESSION_CACHE_KEY = 'COMMON__SESSION__KEY__';
+// 租户 key
+export const TENANT_ID = 'TENANT_ID';
+// login info key
+export const LOGIN_INFO_KEY = 'LOGIN__INFO__';
+
+export enum CacheTypeEnum {
+    SESSION,
+    LOCAL,
+}

package/project/src/enums/exceptionEnum.ts

@@ -0,0 +1,27 @@
+/**
+ * @description: Exception related enumeration
+ */
+export enum ExceptionEnum {
+    // page not access
+    PAGE_NOT_ACCESS = 403,
+
+    // page not found
+    PAGE_NOT_FOUND = 404,
+
+    // error
+    ERROR = 500,
+
+    // net work error
+    NET_WORK_ERROR = 10000,
+
+    // No data on the page. In fact, it is not an exception page
+    PAGE_NOT_DATA = 10100,
+}
+
+export enum ErrorTypeEnum {
+    VUE = 'vue',
+    SCRIPT = 'script',
+    RESOURCE = 'resource',
+    AJAX = 'ajax',
+    PROMISE = 'promise',
+}

package/project/src/enums/httpEnum.ts

@@ -0,0 +1,50 @@
+/**
+ * @description: Request result set
+ */
+export enum ResultEnum {
+    SUCCESS = 0,
+    ERROR = 1,
+    TIMEOUT = 401,
+    TYPE = 'success',
+}
+
+/**
+ * @description: request method
+ */
+export enum RequestEnum {
+    GET = 'GET',
+    POST = 'POST',
+    PUT = 'PUT',
+    DELETE = 'DELETE',
+}
+
+/**
+ * @description:  contentTyp
+ */
+export enum ContentTypeEnum {
+    // json
+    JSON = 'application/json;charset=UTF-8',
+    // form-data qs
+    FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
+    // form-data  upload
+    FORM_DATA = 'multipart/form-data;charset=UTF-8',
+}
+
+/**
+ * 请求header
+ * @description:  contentTyp
+ */
+export enum ConfigEnum {
+    // TOKEN
+    TOKEN = 'X-Access-Token',
+    // TIMESTAMP
+    TIMESTAMP = 'X-TIMESTAMP',
+    // Sign
+    Sign = 'X-Sign',
+    // 租户id
+    TENANT_ID = 'tenant-id',
+    // 版本
+    VERSION = 'X-Version',
+    // 低代码应用ID
+    X_LOW_APP_ID = 'X-Low-App-ID',
+}

package/project/src/enums/jeecgEnum.ts

@@ -0,0 +1,23 @@
+/**
+ * JInput组件类型
+ */
+export enum JInputTypeEnum {
+    //模糊
+    JINPUT_QUERY_LIKE = 'like',
+    //非
+    JINPUT_QUERY_NE = 'ne',
+    //大于等于
+    JINPUT_QUERY_GE = 'ge',
+    //小于等于
+    JINPUT_QUERY_LE = 'le',
+}
+
+/**
+ * 面板设计器需要的常量定义
+ */
+export enum JDragConfigEnum {
+    //baseURL
+    DRAG_BASE_URL = 'drag-base-url',
+    //拖拽缓存前缀
+    DRAG_CACHE_PREFIX = 'drag-cache:',
+}

package/project/src/enums/menuEnum.ts

@@ -0,0 +1,50 @@
+/**
+ * @description: menu type
+ */
+export enum MenuTypeEnum {
+    // left menu
+    SIDEBAR = 'sidebar',
+
+    MIX_SIDEBAR = 'mix-sidebar',
+    // mixin menu
+    MIX = 'mix',
+    // top menu
+    TOP_MENU = 'top-menu',
+}
+
+// 折叠触发器位置
+export enum TriggerEnum {
+    // 不显示
+    NONE = 'NONE',
+    // 菜单底部
+    FOOTER = 'FOOTER',
+    // 头部
+    HEADER = 'HEADER',
+}
+
+export type Mode = 'vertical' | 'vertical-right' | 'horizontal' | 'inline';
+
+// menu mode
+export enum MenuModeEnum {
+    VERTICAL = 'vertical',
+    HORIZONTAL = 'horizontal',
+    VERTICAL_RIGHT = 'vertical-right',
+    INLINE = 'inline',
+}
+
+export enum MenuSplitTyeEnum {
+    NONE,
+    TOP,
+    LEFT,
+}
+
+export enum TopMenuAlignEnum {
+    CENTER = 'center',
+    START = 'start',
+    END = 'end',
+}
+
+export enum MixSidebarTriggerEnum {
+    HOVER = 'hover',
+    CLICK = 'click',
+}

package/project/src/enums/pageEnum.ts

@@ -0,0 +1,19 @@
+export enum PageEnum {
+    // basic login path
+    BASE_LOGIN = '/login',
+    // basic home path
+    BASE_HOME = '/home',
+    // error page path
+    ERROR_PAGE = '/exception',
+    // error log page path
+    ERROR_LOG_PAGE = '/error-log/list',
+    // auth2登录路由路径
+    OAUTH2_LOGIN_PAGE_PATH = '/oauth2-app/login',
+    LABEL = '/wms/business-manager/print-manager/label',
+    /** 打印模板:物料标签. */
+    PRINT_TEMPLATE_ITEM = '/wms/print-template/item',
+    /** 打印模板:备料标签. */
+    PRINT_TEMPLATE_SPARE = '/wms/print-template/spare',
+    /** 打印模板:出库订单. */
+    PRINT_TEMPLATE_ORDER = '/wms/print-template/order',
+}

package/project/src/enums/roleEnum.ts

@@ -0,0 +1,7 @@
+export enum RoleEnum {
+    // super admin
+    SUPER = 'super',
+
+    // tester
+    TEST = 'test',
+}

package/project/src/enums/sizeEnum.ts

@@ -0,0 +1,27 @@
+export enum SizeEnum {
+    DEFAULT = 'default',
+    SMALL = 'small',
+    LARGE = 'large',
+}
+
+export enum SizeNumberEnum {
+    DEFAULT = 48,
+    SMALL = 16,
+    LARGE = 64,
+}
+
+export enum ScreenSizeEnum {
+    XS = 480,
+    SM = 576,
+    MD = 768,
+    LG = 992,
+    XL = 1200,
+}
+
+export const sizeMap: Map<SizeEnum, SizeNumberEnum> = (() => {
+    const map = new Map<SizeEnum, SizeNumberEnum>();
+    map.set(SizeEnum.DEFAULT, SizeNumberEnum.DEFAULT);
+    map.set(SizeEnum.SMALL, SizeNumberEnum.SMALL);
+    map.set(SizeEnum.LARGE, SizeNumberEnum.LARGE);
+    return map;
+})();

package/project/src/hooks/component/useFormItem.ts

@@ -0,0 +1,44 @@
+import { Form } from 'ant-design-vue';
+import { isEqual } from 'lodash-es';
+import type { Ref, UnwrapRef } from 'vue';
+import { computed, getCurrentInstance, nextTick, reactive, readonly, toRaw, unref, watchEffect } from 'vue';
+
+export function useRuleFormItem<T extends Recordable>(props: T, key: keyof T = 'value', changeEvent: string = 'change', emitData?: Ref<any[]>) {
+    const instance = getCurrentInstance();
+    const emit = instance?.emit;
+    const formItemContext = Form.useInjectFormItemContext();
+
+    const innerState = reactive({
+        value: props[key],
+    });
+
+    const defaultState = readonly(innerState);
+
+    const setState = (val: UnwrapRef<T[keyof T]>): void => {
+        innerState.value = val as T[keyof T];
+    };
+
+    watchEffect(() => {
+        innerState.value = props[key];
+    });
+
+    const state: any = computed({
+        get() {
+            //修复多选时空值显示问题（兼容值为0的情况）
+            return innerState.value == null || innerState.value === '' ? [] : innerState.value;
+        },
+        set(value) {
+            if (isEqual(value, defaultState.value)) return;
+
+            innerState.value = value as T[keyof T];
+            nextTick(() => {
+                emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []));
+                // https://antdv.com/docs/vue/migration-v3-cn
+                // antDv3升级后需要调用这个方法更新校验的值
+                nextTick(() => formItemContext.onFieldChange());
+            });
+        },
+    });
+
+    return [state, setState, defaultState, formItemContext];
+}

package/project/src/hooks/component/usePageContext.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import { createContext, useContext } from '../core/useContext';
+
+export interface PageContextProps {
+    contentHeight: ComputedRef<number>;
+    pageHeight: Ref<number>;
+    setPageHeight: (height: number) => Promise<void>;
+}
+
+const key: InjectionKey<PageContextProps> = Symbol();
+
+export function createPageContext(context: PageContextProps) {
+    return createContext<PageContextProps>(context, key, { native: true });
+}
+
+export function usePageContext() {
+    return useContext<PageContextProps>(key);
+}

package/project/src/hooks/core/onMountedOrActivated.ts

@@ -0,0 +1,18 @@
+import { nextTick, onActivated, onMounted } from 'vue';
+
+export function onMountedOrActivated(hook: Fn) {
+    let mounted: boolean;
+
+    onMounted(() => {
+        hook();
+        nextTick(() => {
+            mounted = true;
+        });
+    });
+
+    onActivated(() => {
+        if (mounted) {
+            hook();
+        }
+    });
+}

package/project/src/hooks/core/useAttrs.ts

@@ -0,0 +1,41 @@
+import type { Ref } from 'vue';
+import { getCurrentInstance, reactive, shallowRef, watchEffect } from 'vue';
+
+interface Params {
+    excludeListeners?: boolean;
+    excludeKeys?: string[];
+    excludeDefaultKeys?: boolean;
+}
+
+const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
+const LISTENER_PREFIX = /^on[A-Z]/;
+
+export function entries<T>(obj: Recordable<T>): [string, T][] {
+    return Object.keys(obj).map((key: string) => [key, obj[key]]);
+}
+
+export function useAttrs(params: Params = {}): Ref<Recordable> | {} {
+    const instance = getCurrentInstance();
+    if (!instance) return {};
+
+    const { excludeListeners = false, excludeKeys = [], excludeDefaultKeys = true } = params;
+    const attrs = shallowRef({});
+    const allExcludeKeys = excludeKeys.concat(excludeDefaultKeys ? DEFAULT_EXCLUDE_KEYS : []);
+
+    // Since attrs are not reactive, make it reactive instead of doing in `onUpdated` hook for better performance
+    instance.attrs = reactive(instance.attrs);
+
+    watchEffect(() => {
+        const res = entries(instance.attrs).reduce((acm, [key, val]) => {
+            if (!allExcludeKeys.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))) {
+                acm[key] = val;
+            }
+
+            return acm;
+        }, {} as Recordable);
+
+        attrs.value = res;
+    });
+
+    return attrs;
+}

package/project/src/hooks/core/useContext.ts

@@ -0,0 +1,30 @@
+import { inject, InjectionKey, provide, reactive, readonly as defineReadonly, UnwrapRef } from 'vue';
+
+export interface CreateContextOptions {
+    readonly?: boolean;
+    createProvider?: boolean;
+    native?: boolean;
+}
+
+type ShallowUnwrap<T> = {
+    [P in keyof T]: UnwrapRef<T[P]>;
+};
+
+export function createContext<T>(context: any, key: InjectionKey<T> = Symbol(), options: CreateContextOptions = {}) {
+    const { readonly = true, createProvider = false, native = false } = options;
+
+    const state = reactive(context);
+    const provideData = readonly ? defineReadonly(state) : state;
+    !createProvider && provide(key, native ? context : provideData);
+
+    return {
+        state,
+    };
+}
+
+export function useContext<T>(key: InjectionKey<T>, native?: boolean): T;
+export function useContext<T>(key: InjectionKey<T>, defaultValue?: any, native?: boolean): T;
+
+export function useContext<T>(key: InjectionKey<T> = Symbol(), defaultValue?: any): ShallowUnwrap<T> {
+    return inject(key, defaultValue || {});
+}

package/project/src/hooks/core/useRefs.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue';
+import { onBeforeUpdate, ref } from 'vue';
+
+export function useRefs(): [Ref<HTMLElement[]>, (index: number) => (el: HTMLElement) => void] {
+    const refs = ref([]) as Ref<HTMLElement[]>;
+
+    onBeforeUpdate(() => {
+        refs.value = [];
+    });
+
+    const setRefs = (index: number) => (el: HTMLElement) => {
+        refs.value[index] = el;
+    };
+
+    return [refs, setRefs];
+}

package/project/src/hooks/core/useTimeout.ts

@@ -0,0 +1,45 @@
+import { tryOnUnmounted } from '@vueuse/core';
+import { ref, watch } from 'vue';
+import { isFunction } from '../../utils/is';
+
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
+    if (!isFunction(handle)) {
+        throw new Error('handle is not Function!');
+    }
+
+    const { readyRef, stop, start } = useTimeoutRef(wait);
+    if (native) {
+        handle();
+    } else {
+        watch(
+            readyRef,
+            (maturity) => {
+                maturity && handle();
+            },
+            { immediate: false },
+        );
+    }
+    return { readyRef, stop, start };
+}
+
+export function useTimeoutRef(wait: number) {
+    const readyRef = ref(false);
+
+    let timer: number;
+    function stop(): void {
+        readyRef.value = false;
+        timer && window.clearTimeout(timer);
+    }
+    function start(): void {
+        stop();
+        timer = window.setTimeout(() => {
+            readyRef.value = true;
+        }, wait);
+    }
+
+    start();
+
+    tryOnUnmounted(stop);
+
+    return { readyRef, stop, start };
+}

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

@@ -0,0 +1,89 @@
+import { computed, ComputedRef, ref, unref } from 'vue';
+import { screenEnum, screenMap, sizeEnum } from '../../enums';
+import { useEventListener } from './useEventListener';
+
+let globalScreenRef: ComputedRef<sizeEnum | undefined>;
+let globalWidthRef: ComputedRef<number>;
+let globalRealWidthRef: ComputedRef<number>;
+
+export interface CreateCallbackParams {
+    screen: ComputedRef<sizeEnum | undefined>;
+    width: ComputedRef<number>;
+    realWidth: ComputedRef<number>;
+    screenEnum: typeof screenEnum;
+    screenMap: Map<sizeEnum, number>;
+    sizeEnum: typeof sizeEnum;
+}
+
+export function useBreakpoint() {
+    return {
+        screenRef: computed(() => unref(globalScreenRef)),
+        widthRef: globalWidthRef,
+        screenEnum,
+        realWidthRef: globalRealWidthRef,
+    };
+}
+
+// Just call it once
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void) {
+    const screenRef = ref<sizeEnum>(sizeEnum.XL);
+    const realWidthRef = ref(window.innerWidth);
+
+    function getWindowWidth() {
+        const width = document.body.clientWidth;
+        const xs = screenMap.get(sizeEnum.XS)!;
+        const sm = screenMap.get(sizeEnum.SM)!;
+        const md = screenMap.get(sizeEnum.MD)!;
+        const lg = screenMap.get(sizeEnum.LG)!;
+        const xl = screenMap.get(sizeEnum.XL)!;
+        if (width < xs) {
+            screenRef.value = sizeEnum.XS;
+        } else if (width < sm) {
+            screenRef.value = sizeEnum.SM;
+        } else if (width < md) {
+            screenRef.value = sizeEnum.MD;
+        } else if (width < lg) {
+            screenRef.value = sizeEnum.LG;
+        } else if (width < xl) {
+            screenRef.value = sizeEnum.XL;
+        } else {
+            screenRef.value = sizeEnum.XXL;
+        }
+        realWidthRef.value = width;
+    }
+
+    useEventListener({
+        el: window,
+        name: 'resize',
+
+        listener: () => {
+            getWindowWidth();
+            resizeFn();
+        },
+        // wait: 100,
+    });
+
+    getWindowWidth();
+    globalScreenRef = computed(() => unref(screenRef));
+    globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!);
+    globalRealWidthRef = computed((): number => unref(realWidthRef));
+
+    function resizeFn() {
+        fn?.({
+            screen: globalScreenRef,
+            width: globalWidthRef,
+            realWidth: globalRealWidthRef,
+            screenEnum: screenEnum,
+            screenMap: screenMap,
+            sizeEnum: sizeEnum,
+        });
+    }
+
+    resizeFn();
+    return {
+        screenRef: globalScreenRef,
+        screenEnum,
+        widthRef: globalWidthRef,
+        realWidthRef: globalRealWidthRef,
+    };
+}