@ithinkdt/ui 4.0.0-10

package/src/design.d.ts

@@ -0,0 +1,234 @@
+import { Component, FunctionalComponent, VNode, VNodeChild } from 'vue'
+
+import { MaybePromise, PublicProps } from '@ithinkdt/common'
+
+export declare const AppLayout: (
+    props: PublicProps & {
+        /**
+         * 布局模式
+         * - left2right 左右布局，侧栏占据整个高度
+         * - top2bottom 上下布局，头部占据所有宽度
+         */
+        layout?: 'left2right' | 'top2bottom' | undefined
+
+        /** 最大化内容 */
+        fullContent?: boolean | undefined
+    },
+    context: {
+        slots: {
+            default?: (() => VNode) | undefined
+        }
+    },
+) => VNode
+
+export declare const AppHeader: (
+    props: PublicProps & {
+        height?: number | undefined
+    },
+    context: {
+        slots: {
+            default?: (() => VNode) | undefined
+        }
+    },
+) => VNode
+
+export declare const AppContent: (
+    props: PublicProps & {
+        scrollbar?: 'naive' | 'native' | undefined
+    },
+    context: {
+        slots: {
+            default?: (() => VNode) | undefined
+        }
+    },
+) => VNode
+
+export declare const AppSider: (
+    props: PublicProps & {
+        'collapsed'?: boolean | undefined
+        'width'?: number | undefined
+        'collapsedWidth'?: number | undefined
+        'showCollapseBtn'?: boolean | undefined
+        'hidden'?: boolean | undefined
+        'onUpdate:collapsed'?: ((collapsed: boolean) => void) | undefined
+    },
+    context: {
+        slots: {
+            default?: (() => VNode) | undefined
+        }
+    },
+) => VNode
+
+export declare const AppFooter: (
+    props: PublicProps & {},
+    context: {
+        slots: {
+            default?: (() => VNode) | undefined
+        }
+    },
+) => VNode
+
+export declare const AppLogo: (
+    props: PublicProps & {
+        src?: string | (() => MaybePromise<string | undefined>) | undefined
+        name?: string | undefined
+        center?: boolean | undefined
+        link?: boolean | undefined
+        collapsed?: boolean | undefined
+        onClick?: ((event: MouseEvent) => void) | undefined
+    },
+    context: {
+        slots: {
+            default?: (() => VNode) | undefined
+            icon?: (() => VNode) | undefined
+        }
+    },
+) => VNode
+
+/** 应用模块基础公共部分 */
+interface ModuleOptionBase {
+    /** 唯一键 */
+    key: string
+    /** 名称 */
+    name: string
+}
+/** 应用模块组 */
+export interface ModuleOptionGroup extends ModuleOptionBase {
+    type: 'group'
+    /** 图标 */
+    icon?: string
+    /** 子模块 */
+    children?: (ModuleOptionGroup | ModuleOptionView)[]
+}
+/** 应用视图模块 */
+export interface ModuleOptionView extends ModuleOptionBase {
+    type: 'view'
+    /** 路径 */
+    path: string
+    /** 图标 */
+    icon?: string
+}
+
+export type ModuleOption = ModuleOptionGroup | ModuleOptionView
+export declare const AppMenu: (
+    props: PublicProps & {
+        current?: string | undefined
+        menus?: ModuleOption[] | undefined
+        collapsed?: boolean | undefined
+        accordion?: boolean | undefined
+        getIcon?: ((key: string | undefined) => FunctionalComponent) | undefined
+        horizontal?: boolean | undefined
+        single?: boolean | undefined
+        width?: number | undefined
+        collapsedWidth?: number | undefined
+        renderLabel?: ((menu: ModuleOption) => VNodeChild) | undefined
+    },
+) => VNode
+
+export interface BreadcrumbOption {
+    /** 标题 */
+    title: string | (() => string)
+    /** 图标 */
+    icon?: string | Component | undefined
+    /** 链接地址 */
+    href?: string | undefined
+    /** 子项之间的分隔符 */
+    separator?: string | undefined
+}
+export declare const AppBreadcrumb: (
+    props: PublicProps & {
+        items?: BreadcrumbOption[] | undefined
+        getIcon?: ((key: string) => FunctionalComponent) | undefined
+    },
+) => VNode
+
+export declare const AppAccount: (
+    props: PublicProps & {
+        username?: string | undefined
+        nickname?: string | undefined
+        head?: string | undefined
+        showLogoutButton?: boolean | undefined
+        showChangePwd?: boolean | undefined
+        onChangePwd?: (() => void) | undefined
+        onLogout?: (() => void) | undefined
+    },
+    context: {
+        slots: {
+            logoutButton?: (() => VNode) | undefined
+            dropdown?: ((binding: { ChangePwd: Component, Logout: Component }) => VNode) | undefined
+            dropdownExtra?: (() => VNode) | undefined
+        }
+    },
+) => VNode
+
+export declare const AppFullscreen: (
+    props: PublicProps & {
+        onChange?: ((isFullscreen: boolean) => void) | undefined
+    },
+) => VNode
+
+export declare const AppAppearance: (
+    props: PublicProps & {
+        'mode'?: 'auto' | 'light' | 'dark' | undefined
+        'onUpdate:mode'?: ((mode: 'auto' | 'light' | 'dark') => void) | undefined
+    },
+) => VNode
+
+export declare const AppLanguage: (
+    props: PublicProps & {
+        'supports'?: ({ label: string, value: string, icon?: () => VNodeChild }[]) | undefined
+        'lang'?: string | undefined
+        'onUpdate:lang'?: ((lang: string) => void) | undefined
+    },
+) => VNode
+
+export interface MultiTabItem {
+    key: string
+    title: string
+    path: string
+    fullPath: string
+    href: string
+    reloading?: boolean | undefined
+    closable: boolean
+    close: (navigate?: boolean) => Promise<void>
+}
+
+export declare const AppMultiTabs: (
+    props: PublicProps & {
+        'showBreadcrumb'?: boolean | undefined
+        'fullTab'?: boolean | undefined
+        'tabs': MultiTabItem[]
+        'current'?: MultiTabItem | undefined
+        'dark'?: boolean | undefined
+        'onUpdate:fullTab'?: ((fullTab: boolean) => void) | undefined
+    },
+    context: {
+        slots: {
+            name?: ((binding: { isCurrent: boolean, name: string, tab: MultiTabItem }) => VNodeChild) | undefined
+        }
+    },
+) => VNode
+
+export interface NotificationProps {
+    getUnreadCount: () => Promise<number>
+    getPage: (
+        type: 'all' | 'unread',
+        page: number,
+        size: number,
+    ) => Promise<{
+        records: {
+            key: string
+            title: string
+            content: () => VNodeChild
+            date: number
+            status: 'read' | 'unread'
+            link?: string
+        }[]
+        total: number
+    }>
+    markRead: (keys: string[]) => Promise<void>
+    markDelete: (keys: string[]) => Promise<void>
+    interval?: number | undefined
+}
+
+export declare const AppNotification: (props: PublicProps & NotificationProps) => VNode

package/src/directives.d.ts

@@ -0,0 +1,42 @@
+import { Directive, VNode, VNodeChild } from 'vue'
+
+export declare const SpinDirectiveProvider: (props: { dark?: boolean }) => VNode
+
+/**
+ * directive 加载效果
+ *
+ * 支持 dom dataset 参数 'data-spin-tip'
+ *
+ * 将在容器最后 append 元素，如果容器的 position 是 static，将修改为 relative。如出现样式问题请注意排查
+ *
+ * 支持的修饰符
+ * - 'light' | 'dark' | 'auto' 暗色｜亮色｜自动模式
+ */
+export declare const vSpin: Directive<HTMLElement, void | undefined | string | boolean | number, 'light' | 'dark'>
+
+export declare const TooltipDirectiveProvider: (props: { delay?: number }) => VNode
+
+/**
+ * directive 弹出提示
+ *
+ * 支持的修饰符
+ * - 'auto' 当内容溢出来容器时自动展示，否则隐藏
+ * - 'left-end'、'left'、'left-start'、'top-start'、'top'、'top-end'、'right-start'、'right'、'right-end'、'bottom-end'、'bottom'、'bottom-start' 弹出内容的位置
+ */
+export declare const vTooltip: Directive<
+    HTMLElement,
+    VNodeChild,
+    | 'auto'
+    | 'left-end'
+    | 'left'
+    | 'left-start'
+    | 'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-end'
+    | 'bottom'
+    | 'bottom-start'
+>

package/src/index.d.ts

@@ -0,0 +1,19 @@
+import { VNode } from 'vue'
+
+import { I18nComposable, ParseMessage } from '@ithinkdt/common/i18n'
+
+import { UILocale } from '../locale.js'
+
+import '../shims.js'
+
+export * from './directives.js'
+export * from './design.js'
+
+export { UILocale }
+
+/** Props for {@link UIProvider} */
+export interface UIProviderProps {
+    i18n?: I18nComposable<ParseMessage<UILocale, 'common'>>
+}
+
+export declare const UIProvider: (props: UIProviderProps) => VNode