@dt-frames/ui 2.0.24 → 4.0.1

package/dist/es/lib/init/types/appConf.d.ts

@@ -0,0 +1,331 @@
+import type { ApiType, CAppConf } from '@dt-frames/core';
+import type { ColProps } from 'element-plus';
+import type { RouteRecordRaw } from 'vue-router';
+import type { VxeGridPropTypes } from 'vxe-table';
+import type { TableSetting } from '../../components/table';
+type RouterConf = {
+    /**
+     * 路由模式(是否启用hash模式)
+     */
+    useHashRoute?: boolean;
+    /**
+     * 是否使用权限路由(只有有权限的路由才能跳转，否则跳转到404页面)
+     */
+    useAuthRoute?: boolean;
+    /**
+     * 是否使用全量路径(如果设置成true，则children中的路径均需要写全部路径，不能继承父路由的路径)
+     */
+    strictRoute?: false;
+    /**
+     * 自动生成的路由
+     */
+    routes?: RouteRecordRaw[];
+    /**
+     * 不需要使用layout的路由
+     * @description 例如登录页面、数据大屏、锁屏等 不需要显示侧边栏及顶栏
+     */
+    noLayoutPaths?: string[];
+    /**
+     * 路由跳转后 弹框是否关闭
+     * @default true
+     */
+    closeDialogOnRouteChange?: boolean;
+    /**
+     * 路由跳转后 所有的http请求是否取消
+     * @default true
+     */
+    removeHttpPendding?: boolean;
+};
+type UiAppConf = {
+    router: RouterConf;
+    sso?: any;
+    /**
+     * ui组件的一些配置信息
+     */
+    ui?: {
+        form?: FormGlobalType;
+        modal?: ModalGlobalType;
+        table?: TableGlobalType;
+        upload?: UploadGlobalType;
+        vxeTable?: VxeTableGlobalType & {
+            components?: any[];
+            Layouts?: VxeGridPropTypes.Layouts;
+        };
+    };
+};
+/**
+ * 整个项目的一些配置
+ */
+type AppConf = CAppConf & UiAppConf;
+/**
+ * form表单的一些全局配置
+ */
+type FormGlobalType = {
+    /**
+     * 自动查询 只支持在 'filter' 模式
+     * @default true
+     */
+    autoFetch?: boolean;
+    /**
+     * 标签的宽度
+     * @default 100
+     */
+    labelWidth?: number;
+    /**
+     * label对齐方式
+     */
+    labelAlign?: 'left' | 'right';
+    /**
+     * label后面是否需要':'
+     * @default true
+     */
+    colon?: boolean;
+    /**
+     * 最小显示的条目数
+     * @default 2
+     */
+    minShowColumn?: number;
+    /**
+     * 是否显示清除按钮
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * 表单col属性
+     */
+    colspan?: Partial<ColProps>;
+    [key: string]: any;
+};
+type TableGlobalType = {
+    /**
+     * 单击一行任意位置都可以选中行
+     * @default false
+     */
+    clickToSelectRow?: boolean;
+    /**
+     * 分页数据改变是否清空选中的数据
+     * @default false
+     */
+    clearSelectOnPageChange?: boolean;
+    /**
+     * 是否支持拖拽改变列宽
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * 最小拖拽宽度
+     * @default 20
+     */
+    minResizeWidth?: number;
+    /**
+     * 最大拖拽宽度
+     * @default 700
+     */
+    maxResizeWidth?: number;
+    /**
+     * 是否显示序号列
+     * @default false
+     */
+    showIndexColumn?: boolean;
+    /**
+     * 表格是否需要边框
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * 是否为斑马纹 table
+     */
+    stripe?: boolean;
+    /**
+     * 表格设置
+     */
+    tableSetting?: TableSetting | boolean;
+    /**
+     * 为了更好的渲染效果预先多加载的行数
+     * @default 2
+     */
+    cache?: number;
+    /**
+     * Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度
+     * @default 50
+     */
+    headerHeight?: number | number[];
+    /**
+     * Footer 部分的高度，当传入值时，这部分将被计算入 table 的高度里
+     * @default 0
+     */
+    footerHeight?: number;
+    /**
+     * 每行的高度, 用于计算表的总高度
+     * @default 50
+     */
+    rowHeight?: number;
+    /**
+     * 单元格宽度是自适应还是固定
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * 树形表的水平缩进
+     * @default 12
+     */
+    indentSize?: number;
+    /**
+     * 配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。
+     * @default 6
+     */
+    hScrollbarSize?: number;
+    /**
+     * 配置表格的垂直滚动条大小，防止水平和垂直滚动条重叠。
+     * @default 6
+     */
+    vScrollbarSize?: number;
+    /**
+     * 如果开启，滚动条将一直显示，反之只会在鼠标经过时显示
+     * @default false
+     */
+    scrollbarAlwaysOn?: boolean;
+    /**
+     * 文字对齐方式
+     */
+    align?: 'center' | 'left' | 'right';
+    /**
+     * 是否展开操作按钮
+     */
+    expandActions?: boolean;
+    /**
+     * 默认展开按钮的数量
+     */
+    expandNum?: number;
+    /**
+     * 默认的分页大小
+     * @default 20
+     */
+    defaultPageSize?: number;
+    /**
+     * 默认的分页页码
+     * @default 1
+     */
+    defaultPageNum?: number;
+    /**
+     * 下拉框 可供选择的页码大小
+     */
+    pageSizeOptions?: number[];
+    /**
+     * 后台返回的数据中 列表字段的key值
+     * @default 'list'
+     */
+    listKey?: string;
+    /**
+     * 后台返回的数据中 总共条目
+     * @default 'total'
+     */
+    totalKey?: string;
+};
+type VxeTableGlobalType = {
+    /**
+     * 表格是否需要边框
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * 是否为斑马纹 table
+     */
+    stripe?: boolean;
+    /**
+     * 表格设置
+     */
+    tableSetting?: TableSetting | boolean;
+    /**
+     * 是否展开操作按钮
+     */
+    expandActions?: boolean;
+    /**
+     * 默认展开按钮的数量
+     */
+    expandNum?: number;
+    /**
+     * 默认的分页大小
+     * @default 20
+     */
+    defaultPageSize?: number;
+    /**
+     * 默认的分页页码
+     * @default 1
+     */
+    defaultPageNum?: number;
+    /**
+     * 下拉框 可供选择的页码大小
+     */
+    pageSizeOptions?: number[];
+};
+type ModalGlobalType = {
+    /**
+     * 对话框的宽度，默认值为 50%
+     */
+    width?: string | number;
+    /**
+     * 是否显示定位
+     */
+    showReposition?: boolean;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * 是否显示全屏按钮
+     * @default true
+     */
+    showFullScreenButton?: boolean;
+    /**
+     * 为 Dialog 启用可拖拽功能
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * 拖动范围可以超出可视区
+     * @default false
+     */
+    overflow?: boolean;
+    /**
+     * 是否需要遮罩层
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * 是否可以通过点击 modal 关闭 Dialog
+     * @default true
+     */
+    closeOnClickModal?: boolean;
+    /**
+     * 是否可以通过按下 ESC 关闭 Dialog
+     * @default true
+     */
+    closeOnPressEscape?: boolean;
+    /**
+     * 是否让 Dialog 的 header 和 footer 部分居中排列
+     * @default false
+     */
+    center?: boolean;
+    /**
+     * 当关闭 Dialog 时，销毁其中的元素
+     * @defafult false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 对话框动画的自定义过渡配置。 可以是一个字符串（过渡名称），也可以是一个包含 Vue 过渡属性的对象。
+     * @default 'dialog-fade'
+     */
+    transition?: string;
+    /**
+     * 表单col属性
+     */
+    colspan?: Partial<ColProps>;
+};
+type UploadGlobalType = {
+    uploadUrl?: string | ApiType;
+    downloadUrl?: string | ApiType;
+    deleteUrl?: string | ApiType;
+};
+export type { RouterConf, AppConf, UiAppConf, FormGlobalType, TableGlobalType, ModalGlobalType, VxeTableGlobalType, UploadGlobalType };

package/dist/es/lib/init/vxeTable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 启动vxetable
+ * ui库 使用 element-plus的
+ */
+import type { App } from 'vue';
+/**
+ * 注册vxe-table
+ */
+export declare function setupVxeTable(app: App, components: any[]): void;

package/dist/es/lib/layout/index.d.ts

@@ -0,0 +1,11 @@
+import type { SFCWithInstall } from '~utils/withInstall';
+import Layout from './src/index.vue';
+import { DEFAULT_NAMESPACE } from './src/const/constants';
+import type { MenuRecordRaw } from './src/types/menu.type';
+import { useTheme } from './src/hooks/useTheme';
+import IconButton from './src/components/header/IconButton.vue';
+import type { Preferences } from './src/types/perferences.type';
+declare const DtTheme: SFCWithInstall<typeof Layout>;
+declare const DtIconButton: SFCWithInstall<typeof IconButton>;
+export { DEFAULT_NAMESPACE, useTheme, DtTheme, DtTheme as default, DtIconButton };
+export type { MenuRecordRaw, Preferences };

package/dist/es/lib/layout/src/components/header/perferences/icons/index.d.ts

@@ -0,0 +1,10 @@
+import HeaderNav from './header-nav.vue';
+export { default as ContentCompact } from './content-compact.vue';
+export { default as FullContent } from './full-content.vue';
+export { default as HeaderMixedNav } from './header-mixed-nav.vue';
+export { default as HeaderSidebarNav } from './header-sidebar-nav.vue';
+export { default as MixedNav } from './mixed-nav.vue';
+export { default as SidebarMixedNav } from './sidebar-mixed-nav.vue';
+export { default as SidebarNav } from './sidebar-nav.vue';
+declare const ContentWide: any;
+export { ContentWide, HeaderNav };

package/dist/es/lib/layout/src/components/lockscreen/lockscreen.store.d.ts

@@ -0,0 +1,9 @@
+import { type StoreDefinition } from 'pinia';
+export declare const LOCKSCREEN = "LOCKSCREEN_";
+type StoreType = StoreDefinition<'lockscreen', {
+    isLock: boolean;
+}, {}, {
+    setLock: (payload: boolean, pwd?: string) => void;
+}>;
+export declare const useLockscreenStore: StoreType;
+export {};

package/{es/theme/src/components/header/components/lock → dist/es/lib/layout/src/components/lockscreen}/useBattery.d.ts

@@ -7,5 +7,10 @@ export declare function useBattery(): {
         chargingTime: number;
         dischargingTime: number;
         level: number;
+    }, {
+        charging: boolean;
+        chargingTime: number;
+        dischargingTime: number;
+        level: number;
     }>;
 };

package/dist/es/lib/layout/src/components/lockscreen/useTime.d.ts

@@ -0,0 +1,3 @@
+export declare function useTime(): {
+    [x: string]: import("vue").Ref<any, any>;
+};

package/dist/es/lib/layout/src/components/menu/basic-menu/index.d.ts

@@ -0,0 +1,2 @@
+import Menu from './Menu.vue';
+export { Menu };

package/dist/es/lib/layout/src/components/menu/basic-menu/type.d.ts

@@ -0,0 +1,127 @@
+import type { Ref } from 'vue';
+import type { MenuRecordBadgeRaw, MenuRecordRaw, IconType } from '../../../types/menu.type';
+import type { ThemeModeType } from '../../../types/perferences.type';
+type MenuProps = {
+    /**
+     * @zh_CN 是否开启手风琴模式
+     * @default true
+     */
+    accordion?: boolean;
+    /**
+     * @zh_CN 菜单是否折叠
+     * @default false
+     */
+    collapse?: boolean;
+    /**
+     * @zh_CN 菜单折叠时是否显示菜单名称
+     * @default false
+     */
+    collapseShowTitle?: boolean;
+    /**
+     * 默认激活的菜单
+     */
+    defaultActive?: string;
+    /**
+     * 默认展开的菜单
+     */
+    defaultOpeneds?: string[];
+    /**
+     * 菜单模式
+     */
+    mode?: 'horizontal' | 'vertical';
+    /**
+     * 是否圆润风格
+     */
+    rounded?: boolean;
+    /**
+     * 是否自动滚动到激活的菜单项
+     */
+    scrollToActive?: boolean;
+    /**
+     * 菜单主题
+     */
+    theme?: ThemeModeType;
+    /**
+     * 菜单
+     */
+    menus?: MenuRecordRaw[];
+};
+type SubMenuProps = MenuRecordBadgeRaw & {
+    /**
+     * 激活图标
+     */
+    activeIcon?: string;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 图标
+     */
+    icon?: string;
+    /**
+     * 图标类型
+     */
+    iconType?: IconType;
+    /**
+     * submenu 名称
+     */
+    path: string;
+    isSubMenuMore?: boolean;
+};
+interface MenuItemProps extends MenuRecordBadgeRaw {
+    /**
+     * 图标
+     */
+    activeIcon?: string;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 图标
+     */
+    icon?: string;
+    /**
+     * 图标类型
+     */
+    iconType?: IconType;
+    /**
+     * 名称
+     */
+    path: string;
+}
+type MenuItemRegistered = {
+    active: boolean;
+    parentPaths: string[];
+    path: string;
+};
+type MenuItemClicked = {
+    parentPaths: string[];
+    path: string;
+};
+type MenuProvider = {
+    activePath?: string;
+    addMenuItem: (item: MenuItemRegistered) => void;
+    addSubMenu: (item: MenuItemRegistered) => void;
+    closeMenu: (path: string, parentLinks: string[]) => void;
+    handleMenuItemClick: (item: MenuItemClicked) => void;
+    handleSubMenuClick: (subMenu: MenuItemRegistered) => void;
+    isMenuPopup: boolean;
+    items: Record<string, MenuItemRegistered>;
+    openedMenus: string[];
+    openMenu: (path: string, parentLinks: string[]) => void;
+    props: MenuProps;
+    removeMenuItem: (item: MenuItemRegistered) => void;
+    removeSubMenu: (item: MenuItemRegistered) => void;
+    subMenus: Record<string, MenuItemRegistered>;
+    theme: string;
+};
+interface SubMenuProvider {
+    addSubMenu: (item: MenuItemRegistered) => void;
+    handleMouseleave?: (deepDispatch: boolean) => void;
+    level: number;
+    mouseInChild: Ref<boolean>;
+    removeSubMenu: (item: MenuItemRegistered) => void;
+}
+export type { MenuProps, MenuProvider, MenuItemRegistered, MenuItemClicked, SubMenuProvider, SubMenuProps, MenuItemProps };

package/dist/es/lib/layout/src/components/menu/hooks/useMenu.d.ts

@@ -0,0 +1,9 @@
+import type { SubMenuProvider } from '../basic-menu/type';
+declare function useMenu(): {
+    parentPaths: import("vue").ComputedRef<string[]>;
+    parentMenu: import("vue").ComputedRef<import("vue").ComponentInternalInstance | null>;
+};
+declare function useMenuStyle(menu?: SubMenuProvider): import("vue").ComputedRef<{
+    '--menu-level': number;
+}>;
+export { useMenu, useMenuStyle };

package/dist/es/lib/layout/src/components/menu/hooks/useMenuScroll.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+interface UseMenuScrollOptions {
+    delay?: number;
+    enable?: boolean | Ref<boolean>;
+}
+export declare function useMenuScroll(activePath: Ref<string | undefined>, options?: UseMenuScrollOptions): {
+    scrollToActiveItem: () => void;
+};
+export {};

package/dist/es/lib/layout/src/components/tabbar/hooks/useTab.d.ts

@@ -0,0 +1,25 @@
+import type { RouteLocationNormalized } from 'vue-router';
+import type { ComputedRef } from 'vue';
+export declare function useTabs(): {
+    closeAllTabs: () => Promise<void>;
+    closeCurrentTab: (tab?: RouteLocationNormalized) => Promise<void>;
+    closeLeftTabs: (tab?: RouteLocationNormalized) => Promise<void>;
+    closeOtherTabs: (tab?: RouteLocationNormalized) => Promise<void>;
+    closeRightTabs: (tab?: RouteLocationNormalized) => Promise<void>;
+    closeTabByKey: (key: string) => Promise<void>;
+    getTabDisableState: (tab?: RouteLocationNormalized) => {
+        disabledCloseAll: boolean;
+        disabledCloseCurrent: boolean;
+        disabledCloseLeft: boolean;
+        disabledCloseOther: boolean;
+        disabledCloseRight: boolean;
+        disabledRefresh: boolean;
+    };
+    openTabInNewWindow: (tab?: RouteLocationNormalized) => Promise<void>;
+    pinTab: (tab?: RouteLocationNormalized) => Promise<void>;
+    refreshTab: (name?: string) => Promise<void>;
+    resetTabTitle: () => Promise<void>;
+    setTabTitle: (title: ComputedRef<string> | string) => Promise<void>;
+    toggleTabPin: (tab?: RouteLocationNormalized) => Promise<void>;
+    unpinTab: (tab?: RouteLocationNormalized) => Promise<void>;
+};

package/dist/es/lib/layout/src/components/tabbar/hooks/useTabbar.d.ts

@@ -0,0 +1,15 @@
+import type { IContextMenuItem, TabDefinition } from '../tabsView/types';
+/**
+ * 主体区域最大化
+ */
+export declare function useContentMaximize(): {
+    contentIsMaximize: import("vue").ComputedRef<boolean | undefined>;
+    toggleMaximize: () => void;
+};
+export declare function useTabbar(): {
+    createContextMenus: (tab: TabDefinition) => IContextMenuItem[];
+    currentActive: import("vue").ComputedRef<string>;
+    currentTabs: import("vue").Ref<TabDefinition[] | undefined, TabDefinition[] | undefined>;
+    handleClick: (key: string) => void;
+    handleClose: (key: string) => Promise<void>;
+};

package/dist/es/lib/layout/src/components/tabbar/hooks/useTabsDrag.d.ts

@@ -0,0 +1,8 @@
+import type { TabsProps } from '../tabsView/types';
+import type Sortable from 'sortablejs';
+declare function useSortable<T extends HTMLElement>(sortableContainer: T, options?: SortableOptions): {
+    initializeSortable: () => Promise<Sortable>;
+};
+export { useSortable };
+export type { Sortable };
+export declare function useTabsDrag(props: Partial<TabsProps>, emit: any): void;

package/dist/es/lib/layout/src/components/tabbar/hooks/useTabsViewScroll.d.ts

@@ -0,0 +1,11 @@
+import type { TabsProps } from '../tabsView/types';
+export declare function useTabsViewScroll(props: TabsProps): {
+    handleScrollAt: import("@vueuse/core").UseDebounceFnReturn<({ left, right }: any) => void>;
+    handleWheel: ({ deltaY }: WheelEvent) => void;
+    initScrollbar: () => Promise<void>;
+    scrollbarRef: import("vue").Ref<any, any>;
+    scrollDirection: (direction: "left" | "right", distance?: number) => void;
+    scrollIsAtLeft: import("vue").Ref<boolean, boolean>;
+    scrollIsAtRight: import("vue").Ref<boolean, boolean>;
+    showScrollButton: import("vue").Ref<boolean, boolean>;
+};

package/dist/es/lib/layout/src/components/tabbar/tabsView/types.d.ts

@@ -0,0 +1,68 @@
+import type { RouteLocationNormalized } from 'vue-router';
+import type { TabsStyleType } from '../../../types/perferences.type';
+import type { RouteMeta } from '../../../types/route.type';
+export type EmitType = (name: string, ...args: any[]) => void;
+export interface TabDefinition extends RouteLocationNormalized {
+    key?: string;
+    meta: RouteMeta;
+}
+export type TabsEmits = {
+    close: [string];
+    sortTabs: [number, number];
+    unpin: [TabDefinition];
+};
+export type IContextMenuItem = {
+    disabled?: boolean;
+    handler: () => void;
+    icon?: string | object;
+    inset?: boolean;
+    key: string;
+    separator?: boolean;
+    shortcut?: string;
+    text: string;
+};
+export type TabsProps = {
+    active?: string;
+    contentClass?: string;
+    contextMenus?: (data: any) => IContextMenuItem[];
+    draggable?: boolean;
+    gap?: number;
+    maxWidth?: number;
+    middleClickToClose?: boolean;
+    minWidth?: number;
+    showIcon?: boolean;
+    styleType?: TabsStyleType;
+    tabs?: TabDefinition[];
+    wheelable?: boolean;
+};
+export interface TabConfig extends TabDefinition {
+    affixTab: boolean;
+    closable: boolean;
+    icon: string;
+    key: string;
+    title: string;
+}
+export type DropdownMenuItem = {
+    disabled?: boolean;
+    /**
+     * 点击事件处理
+     * @param data
+     */
+    handler: (data: any) => void;
+    /**
+     * 图标
+     */
+    icon?: string | object;
+    /**
+     * 标题
+     */
+    label: string;
+    /**
+     * 是否是分割线
+     */
+    separator?: boolean;
+    /**
+     * 唯一标识
+     */
+    value: string;
+};

package/dist/es/lib/layout/src/const/constants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 内容区域的组件ID
+ */
+export declare const ELEMENT_ID_MAIN_CONTENT = "__dt_main_content";
+/** layout content 组件的高度 */
+export declare const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = "--dt-content-height";
+/** layout content 组件的宽度 */
+export declare const CSS_VARIABLE_LAYOUT_CONTENT_WIDTH = "--dt-content-width";
+/** layout header 组件的高度 */
+export declare const CSS_VARIABLE_LAYOUT_HEADER_HEIGHT = "--dt-header-height";
+/** layout footer 组件的高度 */
+export declare const CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT = "--dt-footer-height";
+export declare const DEFAULT_NAMESPACE = "dt";