@duxweb/dvha-core 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/dist/cjs/components/common/logo.cjs +1 -0
  2. package/dist/cjs/components/overlay/overlay.cjs +1 -0
  3. package/dist/cjs/hooks/auth.cjs +1 -0
  4. package/dist/cjs/hooks/config.cjs +1 -0
  5. package/dist/cjs/hooks/data.cjs +1 -0
  6. package/dist/cjs/hooks/manage.cjs +1 -0
  7. package/dist/cjs/hooks/menu.cjs +1 -0
  8. package/dist/cjs/hooks/overlay.cjs +1 -0
  9. package/dist/cjs/hooks/theme.cjs +1 -0
  10. package/dist/cjs/index.cjs +1 -0
  11. package/dist/cjs/main.cjs +1 -0
  12. package/dist/cjs/provider/app.cjs +1 -0
  13. package/dist/cjs/provider/tab.cjs +1 -0
  14. package/dist/cjs/router/route.cjs +1 -0
  15. package/dist/cjs/simple/authProvider.cjs +1 -0
  16. package/dist/cjs/simple/dataProvider.cjs +1 -0
  17. package/dist/cjs/stores/auth.cjs +1 -0
  18. package/dist/cjs/stores/route.cjs +1 -0
  19. package/dist/cjs/stores/tab.cjs +1 -0
  20. package/dist/cjs/utils/tree.cjs +1 -0
  21. package/dist/esm/components/common/logo.js +50 -0
  22. package/dist/esm/components/overlay/overlay.js +72 -0
  23. package/dist/esm/hooks/auth.js +125 -0
  24. package/dist/esm/hooks/config.js +10 -0
  25. package/dist/esm/hooks/data.js +369 -0
  26. package/dist/esm/hooks/manage.js +24 -0
  27. package/dist/esm/hooks/menu.js +75 -0
  28. package/dist/esm/hooks/overlay.js +14 -0
  29. package/dist/esm/hooks/theme.js +31 -0
  30. package/dist/esm/index.js +67 -0
  31. package/dist/esm/main.js +22 -0
  32. package/dist/esm/provider/app.js +127 -0
  33. package/dist/esm/provider/tab.js +64 -0
  34. package/dist/esm/router/route.js +49 -0
  35. package/dist/esm/simple/authProvider.js +90 -0
  36. package/dist/esm/simple/dataProvider.js +99 -0
  37. package/dist/esm/stores/auth.js +50 -0
  38. package/dist/esm/stores/route.js +65 -0
  39. package/dist/esm/stores/tab.js +70 -0
  40. package/dist/esm/utils/tree.js +41 -0
  41. package/dist/types/components/common/index.d.ts +1 -0
  42. package/dist/types/components/common/logo.d.ts +22 -0
  43. package/dist/types/components/index.d.ts +3 -0
  44. package/dist/types/components/loader/iframe.d.ts +2 -0
  45. package/dist/types/components/loader/index.d.ts +1 -0
  46. package/dist/types/components/overlay/index.d.ts +1 -0
  47. package/dist/types/components/overlay/overlay.d.ts +44 -0
  48. package/dist/types/hooks/auth.d.ts +109 -0
  49. package/dist/types/hooks/config.d.ts +7 -0
  50. package/dist/types/hooks/data.d.ts +1487 -0
  51. package/dist/types/hooks/index.d.ts +7 -0
  52. package/dist/types/hooks/manage.d.ts +13 -0
  53. package/dist/types/hooks/menu.d.ts +16 -0
  54. package/dist/types/hooks/overlay.d.ts +7 -0
  55. package/dist/types/hooks/theme.d.ts +12 -0
  56. package/dist/types/index.d.ts +9 -0
  57. package/dist/types/main.d.ts +5 -0
  58. package/dist/types/provider/app.d.ts +1 -0
  59. package/dist/types/provider/index.d.ts +2 -0
  60. package/dist/types/provider/tab.d.ts +1 -0
  61. package/dist/types/router/index.d.ts +1 -0
  62. package/dist/types/router/route.d.ts +2 -0
  63. package/dist/types/simple/authProvider.d.ts +2 -0
  64. package/dist/types/simple/dataProvider.d.ts +2 -0
  65. package/dist/types/simple/index.d.ts +2 -0
  66. package/dist/types/stores/auth.d.ts +31 -0
  67. package/dist/types/stores/index.d.ts +3 -0
  68. package/dist/types/stores/route.d.ts +4040 -0
  69. package/dist/types/stores/tab.d.ts +1660 -0
  70. package/dist/types/types/auth.d.ts +36 -0
  71. package/dist/types/types/config.d.ts +32 -0
  72. package/dist/types/types/data.d.ts +84 -0
  73. package/dist/types/types/index.d.ts +6 -0
  74. package/dist/types/types/manage.d.ts +29 -0
  75. package/dist/types/types/menu.d.ts +13 -0
  76. package/dist/types/types/theme.d.ts +10 -0
  77. package/dist/types/utils/index.d.ts +1 -0
  78. package/dist/types/utils/tree.d.ts +13 -0
  79. package/package.json +38 -12
  80. package/CHANGELOG.md +0 -25
  81. package/src/components/common/index.ts +0 -1
  82. package/src/components/common/logo.tsx +0 -62
  83. package/src/components/index.ts +0 -3
  84. package/src/components/loader/iframe.tsx +0 -12
  85. package/src/components/loader/index.ts +0 -1
  86. package/src/components/overlay/index.ts +0 -1
  87. package/src/components/overlay/overlay.tsx +0 -84
  88. package/src/hooks/auth.ts +0 -261
  89. package/src/hooks/config.ts +0 -16
  90. package/src/hooks/data.ts +0 -648
  91. package/src/hooks/index.ts +0 -7
  92. package/src/hooks/manage.ts +0 -71
  93. package/src/hooks/menu.ts +0 -146
  94. package/src/hooks/overlay.ts +0 -21
  95. package/src/hooks/theme.ts +0 -49
  96. package/src/index.ts +0 -9
  97. package/src/main.ts +0 -28
  98. package/src/provider/app.tsx +0 -200
  99. package/src/provider/index.ts +0 -2
  100. package/src/provider/tab.tsx +0 -76
  101. package/src/router/index.ts +0 -1
  102. package/src/router/route.ts +0 -47
  103. package/src/simple/authProvider.ts +0 -99
  104. package/src/simple/dataProvider.ts +0 -153
  105. package/src/simple/index.ts +0 -2
  106. package/src/stores/auth.ts +0 -73
  107. package/src/stores/index.ts +0 -3
  108. package/src/stores/route.ts +0 -159
  109. package/src/stores/tab.ts +0 -120
  110. package/src/types/auth.ts +0 -44
  111. package/src/types/config.ts +0 -51
  112. package/src/types/data.ts +0 -108
  113. package/src/types/index.ts +0 -6
  114. package/src/types/manage.ts +0 -40
  115. package/src/types/menu.ts +0 -24
  116. package/src/types/theme.ts +0 -12
  117. package/src/utils/index.ts +0 -1
  118. package/src/utils/tree.ts +0 -63
  119. package/tsconfig.json +0 -41
  120. package/typings.d.ts +0 -10
@@ -0,0 +1,36 @@
1
+ import type { IManageHook } from '../hooks';
2
+ import type { IUserState } from '../stores/auth';
3
+ /**
4
+ * 认证提供者
5
+ * 为全局或管理端提供自定义认证服务
6
+ */
7
+ export interface IAuthProvider {
8
+ login: (params: any, manage: IManageHook) => Promise<IAuthLoginResponse>;
9
+ check: (params?: any, manage?: IManageHook) => Promise<IAuthCheckResponse>;
10
+ logout: (params?: any, manage?: IManageHook) => Promise<IAuthLogoutResponse>;
11
+ register: (params: any, manage?: IManageHook) => Promise<IAuthLoginResponse>;
12
+ forgotPassword: (params: any, manage?: IManageHook) => Promise<IAuthActionResponse>;
13
+ updatePassword: (params: any, manage?: IManageHook) => Promise<IAuthActionResponse>;
14
+ onError: (error?: any) => Promise<IAuthErrorResponse>;
15
+ }
16
+ export interface IAuthActionResponse {
17
+ success: boolean;
18
+ message?: string;
19
+ redirectTo?: string;
20
+ [key: string]: unknown;
21
+ }
22
+ export interface IAuthLoginResponse extends IAuthActionResponse {
23
+ data?: IUserState;
24
+ }
25
+ export interface IAuthCheckResponse extends IAuthActionResponse {
26
+ data?: IUserState;
27
+ logout?: boolean;
28
+ }
29
+ export interface IAuthLogoutResponse extends IAuthActionResponse {
30
+ logout?: boolean;
31
+ }
32
+ export interface IAuthErrorResponse {
33
+ logout?: boolean;
34
+ redirectTo?: string;
35
+ error?: any;
36
+ }
@@ -0,0 +1,32 @@
1
+ import type { RouteComponent, RouteRecordRaw } from 'vue-router';
2
+ import type { IAuthProvider } from './auth';
3
+ import type { IDataProvider } from './data';
4
+ import type { IManage } from './manage';
5
+ import type { IConfigTheme } from './theme';
6
+ /**
7
+ * 全局配置
8
+ */
9
+ export interface IConfig {
10
+ title?: string;
11
+ copyright?: string;
12
+ description?: string;
13
+ apiUrl?: string;
14
+ lang?: string;
15
+ extends?: Record<string, any>;
16
+ defaultManage?: string;
17
+ manages: IManage[];
18
+ authProvider?: IAuthProvider;
19
+ dataProvider?: IDataProvider;
20
+ components?: IConfigComponent;
21
+ routes?: RouteRecordRaw[];
22
+ theme?: IConfigTheme;
23
+ [key: string]: any;
24
+ }
25
+ export interface IConfigComponent {
26
+ authLayout?: RouteComponent;
27
+ noAuthLayout?: RouteComponent;
28
+ notFound?: RouteComponent;
29
+ notAuthorized?: RouteComponent;
30
+ error?: RouteComponent;
31
+ iframe?: RouteComponent;
32
+ }
@@ -0,0 +1,84 @@
1
+ import type { IManageHook } from 'src/hooks';
2
+ import type { IUserState } from 'src/stores';
3
+ /**
4
+ * 数据提供者
5
+ * 为全局或管理端提供自定义数据源处理服务
6
+ */
7
+ export interface IDataProvider {
8
+ getList: (options: IDataProviderListOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
9
+ create: (options: IDataProviderCreateOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
10
+ update: (options: IDataProviderUpdateOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
11
+ deleteOne: (options: IDataProviderDeleteOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
12
+ getOne: (options: IDataProviderGetOneOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
13
+ getMany: (options: IDataProviderGetManyOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
14
+ createMany: (options: IDataProviderCreateManyOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
15
+ updateMany: (options: IDataProviderUpdateManyOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
16
+ deleteMany: (options: IDataProviderDeleteManyOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
17
+ custom: (options: IDataProviderCustomOptions, manage?: IManageHook, auth?: IUserState) => Promise<IDataProviderResponse>;
18
+ }
19
+ export interface IDataProviderResponse {
20
+ message?: string;
21
+ data?: any;
22
+ meta?: Record<string, any>;
23
+ [key: string]: any;
24
+ }
25
+ export interface IDataProviderListOptions {
26
+ path: string;
27
+ pagination?: {
28
+ page: number;
29
+ limit: number;
30
+ pageSize: number;
31
+ } | boolean;
32
+ sorters?: Record<string, 'asc' | 'desc'>;
33
+ filters?: Record<string, any>;
34
+ meta?: Record<string, any>;
35
+ }
36
+ export interface IDataProviderCreateOptions {
37
+ path?: string;
38
+ data: any;
39
+ meta?: Record<string, any>;
40
+ }
41
+ export interface IDataProviderUpdateOptions extends IDataProviderCreateOptions {
42
+ id?: string | number;
43
+ }
44
+ export interface IDataProviderGetOneOptions {
45
+ path: string;
46
+ id: string | number;
47
+ meta?: Record<string, any>;
48
+ }
49
+ export interface IDataProviderGetManyOptions {
50
+ path: string;
51
+ ids: string[] | number[];
52
+ meta?: Record<string, any>;
53
+ }
54
+ export interface IDataProviderCreateManyOptions {
55
+ path?: string;
56
+ data?: any[];
57
+ meta?: Record<string, any>;
58
+ }
59
+ export interface IDataProviderUpdateManyOptions {
60
+ path?: string;
61
+ data?: any;
62
+ meta?: Record<string, any>;
63
+ ids: string[] | number[];
64
+ }
65
+ export interface IDataProviderDeleteManyOptions {
66
+ path?: string;
67
+ meta?: Record<string, any>;
68
+ ids: string[] | number[];
69
+ }
70
+ export interface IDataProviderDeleteOptions {
71
+ path?: string;
72
+ meta?: Record<string, any>;
73
+ id: string | number;
74
+ }
75
+ export interface IDataProviderCustomOptions {
76
+ path?: string;
77
+ method?: string;
78
+ sorters?: Record<string, 'asc' | 'desc'>;
79
+ filters?: Record<string, any>;
80
+ query?: Record<string, any>;
81
+ headers?: Record<string, string>;
82
+ meta?: Record<string, any>;
83
+ payload?: any;
84
+ }
@@ -0,0 +1,6 @@
1
+ export * from './config';
2
+ export * from './manage';
3
+ export * from './theme';
4
+ export * from './auth';
5
+ export * from './data';
6
+ export * from './menu';
@@ -0,0 +1,29 @@
1
+ import type { RouteRecordRaw } from 'vue-router';
2
+ import type { IAuthProvider } from './auth';
3
+ import type { IConfigComponent } from './config';
4
+ import type { IDataProvider } from './data';
5
+ import type { IMenu } from './menu';
6
+ import type { IConfigTheme } from './theme';
7
+ /**
8
+ * 管理配置
9
+ * 为管理端提供自定义管理服务
10
+ */
11
+ export interface IManage {
12
+ name: string;
13
+ title: string;
14
+ copyright?: string;
15
+ description?: string;
16
+ register?: boolean;
17
+ forgotPassword?: boolean;
18
+ updatePassword?: boolean;
19
+ apiUrl?: string;
20
+ apiRoutePath?: string;
21
+ authProvider?: IAuthProvider;
22
+ dataProvider?: IDataProvider;
23
+ routePrefix?: string;
24
+ routes?: RouteRecordRaw[];
25
+ menus?: IMenu[];
26
+ components?: IConfigComponent;
27
+ theme?: IConfigTheme;
28
+ [key: string]: any;
29
+ }
@@ -0,0 +1,13 @@
1
+ import type { RouteComponent } from 'vue-router';
2
+ export interface IMenu {
3
+ label?: string;
4
+ name: string;
5
+ path?: string;
6
+ icon?: string;
7
+ sort?: number;
8
+ parent?: string;
9
+ hidden?: boolean;
10
+ loader?: string;
11
+ component?: RouteComponent;
12
+ meta?: Record<string, any>;
13
+ }
@@ -0,0 +1,10 @@
1
+ export interface IConfigTheme {
2
+ logo?: string;
3
+ darkLogo?: string;
4
+ banner?: string;
5
+ darkBanner?: string;
6
+ }
7
+ export interface ITheme {
8
+ logo?: string;
9
+ banner?: string;
10
+ }
@@ -0,0 +1 @@
1
+ export * from './tree';
@@ -0,0 +1,13 @@
1
+ interface TreeNode {
2
+ [key: string]: any;
3
+ }
4
+ interface TreeOptions {
5
+ idKey: string;
6
+ parentKey: string;
7
+ sortKey: string;
8
+ childrenKey: string;
9
+ }
10
+ export declare function arrayToTree(data: Record<string, any>[], options: TreeOptions, key?: any): TreeNode[];
11
+ export declare function searchTree(tree: TreeNode[], func: (item: TreeNode) => boolean, findArr?: TreeNode[]): any;
12
+ export declare function treeToArr<T>(tree: TreeNode[], idKey: string | number, childrenKey: string): T[];
13
+ export {};
package/package.json CHANGED
@@ -1,27 +1,53 @@
1
1
  {
2
2
  "name": "@duxweb/dvha-core",
3
3
  "type": "module",
4
- "version": "0.0.5",
4
+ "version": "0.0.7",
5
5
  "author": "DuxWeb",
6
6
  "license": "LGPL-3.0",
7
7
  "repository": {
8
8
  "type": "git",
9
9
  "url": "https://github.com/duxweb/dvha.git"
10
10
  },
11
- "main": "src/index.ts",
11
+ "exports": {
12
+ ".": {
13
+ "dvha:development": {
14
+ "types": "./src/index.ts",
15
+ "import": "./src/index.ts"
16
+ },
17
+ "types": "./dist/types/index.d.ts",
18
+ "import": "./dist/esm/index.js",
19
+ "require": "./dist/cjs/index.cjs"
20
+ }
21
+ },
22
+ "main": "dist/cjs/index.cjs",
23
+ "module": "dist/esm/index.js",
24
+ "types": "dist/types/index.d.ts",
25
+ "files": [
26
+ "LICENSE",
27
+ "README.md",
28
+ "dist"
29
+ ],
30
+ "scripts": {
31
+ "clean": "rimraf dist",
32
+ "build": "bun run clean && vue-tsc --noEmit && vite build && bun run build:types",
33
+ "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
34
+ "prepublishOnly": "bun run build",
35
+ "lint": "eslint .",
36
+ "lint:fix": "eslint . --fix"
37
+ },
38
+ "peerDependencies": {},
12
39
  "dependencies": {
13
40
  "@overlastic/vue": "^0.8.1",
14
- "@tanstack/react-query": "^5.76.1",
15
- "@vueuse/core": "^13.2.0",
16
- "@vueuse/integrations": "^13.2.0",
41
+ "@tanstack/vue-query": "^5.76.2",
42
+ "@vueuse/core": "^13.0.0",
43
+ "@vueuse/integrations": "^13.0.0",
17
44
  "axios": "^1.9.0",
45
+ "clsx": "^2.1.1",
18
46
  "lodash-es": "^4.17.21",
19
- "pinia": "^3.0.2",
20
- "pinia-plugin-persistedstate": "^4.3.0",
21
- "vue": "^3.5.14",
22
- "vue-router": "4"
47
+ "pinia": "^3.0.0",
48
+ "pinia-plugin-persistedstate": "^4.0.0",
49
+ "vue": "^3.5.0",
50
+ "vue-router": "^4.0.0"
23
51
  },
24
- "devDependencies": {
25
- "clsx": "^2.1.1"
26
- }
52
+ "devDependencies": {}
27
53
  }
package/CHANGELOG.md DELETED
@@ -1,25 +0,0 @@
1
- # @duxweb/dvha-core
2
-
3
- ## 0.0.5
4
-
5
- ### Patch Changes
6
-
7
- - 增加 loader 加载器类型
8
-
9
- ## 0.0.4
10
-
11
- ### Patch Changes
12
-
13
- - update base releases
14
-
15
- ## 0.0.3
16
-
17
- ### Patch Changes
18
-
19
- - fix: 更新内部依赖
20
-
21
- ## 0.0.2
22
-
23
- ### Patch Changes
24
-
25
- - init
@@ -1 +0,0 @@
1
- export * from './logo'
@@ -1,62 +0,0 @@
1
- import clsx from 'clsx'
2
- import { defineComponent } from 'vue'
3
-
4
- export const DuxLogo = defineComponent({
5
- name: 'DuxLogo',
6
- props: {
7
- dark: { type: Boolean, default: false },
8
- highlight: { type: String, default: 'fill-primary' },
9
- },
10
- setup(props) {
11
- return () => (
12
- <svg
13
- class="w-auto h-full"
14
- viewBox="0 0 400.893 121.787"
15
- version="1.1"
16
- xmlns="http://www.w3.org/2000/svg"
17
- >
18
- <g
19
- transform="translate(-6545.000000, -3038.106602) translate(6345.000000, 2899.000000) translate(200.000000, 132.393398)"
20
- fill-rule="nonzero"
21
- stroke="none"
22
- stroke-width="1"
23
- fill="none"
24
- >
25
- <path
26
- d="M0 62.607v50c0 8.284 6.716 15 15 15s15-6.716 15-15v-50c0-8.285-6.716-15-15-15s-15 6.715-15 15z"
27
- class={clsx([
28
- props.dark ? 'fill-white/90' : 'fill-black dark:fill-white/90',
29
- ])}
30
- />
31
- <path
32
- d="M60 7.607c33.137 0 60 26.863 60 60s-26.863 60-60 60h-5c-8.284 0-15-6.716-15-15 0-8.285 6.716-15 15-15h5c16.57 0 30-13.432 30-30 0-16.57-13.43-30-30-30H15c-8.284 0-15-6.716-15-15 0-8.285 6.716-15 15-15h45z"
33
- class={clsx([
34
- props.dark ? 'fill-white/90' : 'fill-black dark:fill-white/90',
35
- ])}
36
- />
37
- <path
38
- d="M201 7.607c33.137 0 60 26.863 60 60s-26.863 60-60 60h-46c-8.284 0-15-6.716-15-15 0-8.285 6.716-15 15-15h46c16.57 0 30-13.432 30-30 0-16.57-13.43-30-30-30h-45.5c-8.284 0-15-6.716-15-15 0-8.285 6.716-15 15-15H201z"
39
- class={clsx([
40
- props.dark ? 'fill-white/90' : 'fill-black dark:fill-white/90',
41
- ])}
42
- transform="translate(200.500000, 67.606602) rotate(90.000000) translate(-200.500000, -67.606602) "
43
- />
44
- <g transform="translate(279.106602, 6.713203)">
45
- <path
46
- d="M25.607 4.393 52.893 31.68c5.858 5.858 5.858 15.356 0 21.213-5.857 5.858-15.355 5.858-21.213 0L4.393 25.607c-5.857-5.858-5.857-15.356 0-21.214 5.858-5.857 15.356-5.857 21.214 0zm91.786 0c5.858 5.858 5.858 15.356 0 21.214L90.107 52.893c-5.858 5.858-15.356 5.858-21.214 0-5.857-5.857-5.857-15.355 0-21.213L96.18 4.393c5.858-5.857 15.356-5.857 21.213 0zm-64.5 64.5c5.858 5.858 5.858 15.356 0 21.214l-27.286 27.286c-5.858 5.858-15.356 5.858-21.214 0-5.857-5.857-5.857-15.355 0-21.213L31.68 68.893c5.858-5.857 15.356-5.857 21.213 0z"
47
- class={clsx([
48
- props.dark ? 'fill-white/90' : 'fill-black dark:fill-white/90',
49
- ])}
50
- />
51
- <path
52
- d="m90.107 68.893 27.286 27.287c5.858 5.858 5.858 15.356 0 21.213-5.857 5.858-15.355 5.858-21.213 0L68.893 90.107c-5.857-5.858-5.857-15.356 0-21.214 5.858-5.857 15.356-5.857 21.214 0z"
53
- class={clsx([
54
- props.highlight,
55
- ])}
56
- />
57
- </g>
58
- </g>
59
- </svg>
60
- )
61
- },
62
- })
@@ -1,3 +0,0 @@
1
- export * from './common'
2
- export * from './loader'
3
- export * from './overlay'
@@ -1,12 +0,0 @@
1
- import { defineComponent } from 'vue'
2
- import { useRoute } from 'vue-router'
3
-
4
- export default defineComponent({
5
- name: 'DuxIframe',
6
- setup(_props) {
7
- const route = useRoute()
8
- return () => (
9
- <iframe src={route.meta?.src as string} class="h-full w-full"></iframe>
10
- )
11
- },
12
- })
@@ -1 +0,0 @@
1
- export * from './iframe'
@@ -1 +0,0 @@
1
- export * from './overlay'
@@ -1,84 +0,0 @@
1
- import { useExtendOverlay } from '@overlastic/vue'
2
- import { defineAsyncComponent, defineComponent, Transition } from 'vue'
3
-
4
- export const DuxOverlay = defineComponent({
5
- name: 'DuxOverlay',
6
- props: {
7
- component: Function,
8
- componentProps: Object,
9
- mask: {
10
- type: Boolean,
11
- default: true,
12
- },
13
- maskClosable: {
14
- type: Boolean,
15
- default: true,
16
- },
17
- duration: {
18
- type: Number,
19
- default: 300,
20
- },
21
- zIndex: {
22
- type: Number,
23
- default: 1000,
24
- },
25
- },
26
- setup(props) {
27
- const { visible, resolve, reject } = useExtendOverlay({
28
- duration: props.duration,
29
- })
30
-
31
- const params = props?.componentProps || {}
32
- params.onConfirm = resolve
33
- params.onClose = reject
34
-
35
- const Modal = defineAsyncComponent(props.component as () => Promise<any>)
36
-
37
- const handleMaskClick = () => {
38
- if (props.maskClosable) {
39
- reject()
40
- }
41
- }
42
- return () => (
43
- <div
44
- class='fixed inset-0 flex items-center justify-center overflow-auto'
45
- style={{
46
- zIndex: props.zIndex,
47
- }}
48
- >
49
- <Transition
50
- enterActiveClass="transition-opacity"
51
- enterFromClass="opacity-0"
52
- enterToClass="opacity-100"
53
- leaveActiveClass="transition-opacity"
54
- leaveFromClass="opacity-100"
55
- leaveToClass="opacity-0"
56
- >
57
- {visible.value && props.mask && (
58
- <div
59
- class="fixed inset-0 bg-black bg-opacity-30"
60
- style={{
61
- transitionDuration: `${props.duration}ms`,
62
- }}
63
- onClick={handleMaskClick}
64
- aria-hidden="true"
65
- ></div>
66
- )}
67
- </Transition>
68
-
69
- <Transition
70
- enterActiveClass="transition-all"
71
- enterFromClass="opacity-0 scale-95"
72
- enterToClass="opacity-100 scale-100"
73
- leaveActiveClass="transition-all"
74
- leaveFromClass="opacity-100 scale-100"
75
- leaveToClass="opacity-0 scale-95"
76
- >
77
- {visible.value && (
78
- <Modal {...params} />
79
- )}
80
- </Transition>
81
- </div>
82
- )
83
- },
84
- })