base6-ui 1.1.1 → 1.1.2
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.
- package/package.json +6 -1
- package/CHANGELOG.md +0 -13
- package/build/plugins.ts +0 -31
- package/build/unPlugin.ts +0 -37
- package/eslint.config.js +0 -114
- package/src/components/AppProvider/index.ts +0 -1
- package/src/components/AppProvider/index.vue +0 -38
- package/src/components/BaseButton/index.ts +0 -1
- package/src/components/BaseButton/index.vue +0 -21
- package/src/components/BaseDataTable/index.ts +0 -1
- package/src/components/BaseDataTable/index.vue +0 -120
- package/src/components/BaseDialog/index.ts +0 -2
- package/src/components/BaseDialog/index.vue +0 -104
- package/src/components/BaseDialog/options.ts +0 -25
- package/src/components/BaseDialog/type.ts +0 -30
- package/src/components/BaseInputNumber/index.ts +0 -1
- package/src/components/BaseInputNumber/index.vue +0 -188
- package/src/components/BaseLayout/ASide/index.vue +0 -104
- package/src/components/BaseLayout/ASide/type.ts +0 -11
- package/src/components/BaseLayout/index.ts +0 -1
- package/src/components/BaseProgress/index.ts +0 -99
- package/src/components/BaseRadio/index.ts +0 -1
- package/src/components/BaseRadio/index.vue +0 -45
- package/src/components/BaseSelect/index.ts +0 -1
- package/src/components/BaseSelect/index.vue +0 -59
- package/src/components/BaseSlider/index.ts +0 -1
- package/src/components/BaseSlider/index.vue +0 -114
- package/src/components/BaseSwitch/index.ts +0 -1
- package/src/components/BaseSwitch/index.vue +0 -69
- package/src/components/index.ts +0 -11
- package/src/components/types/themes/extendThemes.ts +0 -50
- package/src/config/index.ts +0 -1
- package/src/config/themes/color/dark.ts +0 -60
- package/src/config/themes/color/index.ts +0 -2
- package/src/config/themes/color/light.ts +0 -59
- package/src/config/themes/common.ts +0 -50
- package/src/config/themes/components/alert/common.ts +0 -13
- package/src/config/themes/components/alert/dark.ts +0 -23
- package/src/config/themes/components/alert/light.ts +0 -18
- package/src/config/themes/components/baseComponent/dark.ts +0 -189
- package/src/config/themes/components/baseComponent/light.ts +0 -297
- package/src/config/themes/components/button/common.ts +0 -20
- package/src/config/themes/components/button/dark.ts +0 -127
- package/src/config/themes/components/button/light.ts +0 -102
- package/src/config/themes/components/card/dark.ts +0 -13
- package/src/config/themes/components/card/light.ts +0 -13
- package/src/config/themes/components/charts/dark.ts +0 -425
- package/src/config/themes/components/charts/light.ts +0 -424
- package/src/config/themes/components/checkbox/common.ts +0 -7
- package/src/config/themes/components/checkbox/dark.ts +0 -23
- package/src/config/themes/components/checkbox/light.ts +0 -22
- package/src/config/themes/components/dataTable/dark.ts +0 -14
- package/src/config/themes/components/dataTable/light.ts +0 -14
- package/src/config/themes/components/datePicker/dark.ts +0 -10
- package/src/config/themes/components/datePicker/light.ts +0 -10
- package/src/config/themes/components/dialog/common.ts +0 -8
- package/src/config/themes/components/dialog/dark.ts +0 -14
- package/src/config/themes/components/dialog/light.ts +0 -13
- package/src/config/themes/components/dropdown/dark.ts +0 -7
- package/src/config/themes/components/dropdown/light.ts +0 -7
- package/src/config/themes/components/form/dark.ts +0 -7
- package/src/config/themes/components/form/light.ts +0 -7
- package/src/config/themes/components/input/common.ts +0 -13
- package/src/config/themes/components/input/dark.ts +0 -25
- package/src/config/themes/components/input/light.ts +0 -24
- package/src/config/themes/components/inputNumber/common.ts +0 -14
- package/src/config/themes/components/inputNumber/dark.ts +0 -24
- package/src/config/themes/components/inputNumber/light.ts +0 -20
- package/src/config/themes/components/layout/dark.ts +0 -8
- package/src/config/themes/components/layout/light.ts +0 -9
- package/src/config/themes/components/menu/dark.ts +0 -18
- package/src/config/themes/components/menu/light.ts +0 -17
- package/src/config/themes/components/progress/dark.ts +0 -25
- package/src/config/themes/components/progress/light.ts +0 -25
- package/src/config/themes/components/radio/dark.ts +0 -20
- package/src/config/themes/components/radio/light.ts +0 -21
- package/src/config/themes/components/select/dark.ts +0 -42
- package/src/config/themes/components/select/light.ts +0 -38
- package/src/config/themes/components/slider/dark.ts +0 -16
- package/src/config/themes/components/slider/light.ts +0 -16
- package/src/config/themes/components/switch/common.ts +0 -17
- package/src/config/themes/components/switch/dark.ts +0 -17
- package/src/config/themes/components/switch/light.ts +0 -17
- package/src/config/themes/components/tag/dark.ts +0 -40
- package/src/config/themes/components/tag/light.ts +0 -39
- package/src/config/themes/components/transfer/dark.ts +0 -8
- package/src/config/themes/components/transfer/light.ts +0 -8
- package/src/config/themes/dark.ts +0 -61
- package/src/config/themes/index.ts +0 -12
- package/src/config/themes/light.ts +0 -61
- package/src/config/themes/token/dark.ts +0 -32
- package/src/config/themes/token/index.ts +0 -2
- package/src/config/themes/token/light.ts +0 -11
- package/src/globalMethods/index.ts +0 -8
- package/src/globalMethods/modules/confirmTip.ts +0 -49
- package/src/globalMethods/modules/message.ts +0 -20
- package/src/hooks/useNaiveConfigProvideContext.ts +0 -10
- package/src/index.ts +0 -8
- package/src/style/index.scss +0 -63
- package/src/svg-icons/add.svg +0 -1
- package/src/svg-icons/arrow/down.svg +0 -1
- package/src/svg-icons/arrow/top.svg +0 -1
- package/src/svg-icons/logo.svg +0 -4
- package/src/svg-icons/operate/add.svg +0 -1
- package/src/svg-icons/operate/close.svg +0 -1
- package/src/svg-icons/operate/minus.svg +0 -1
- package/src/svg-icons/progress-default.svg +0 -3
- package/src/types/themes/extendThemes.ts +0 -50
- package/tsconfig.json +0 -38
- package/typing/components.d.ts +0 -38
- package/typing/global.d.ts +0 -19
- package/vite.config.ts +0 -61
package/package.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "base6-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.mjs",
|
|
7
7
|
"types": "es/index.d.ts",
|
|
8
8
|
"type": "module",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"es",
|
|
12
|
+
"lib"
|
|
13
|
+
],
|
|
9
14
|
"keywords": [],
|
|
10
15
|
"author": "",
|
|
11
16
|
"license": "ISC",
|
package/CHANGELOG.md
DELETED
package/build/plugins.ts
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import vue from '@vitejs/plugin-vue'
|
|
2
|
-
import vueJsx from '@vitejs/plugin-vue-jsx'
|
|
3
|
-
import eslintPlugin from 'vite-plugin-eslint'
|
|
4
|
-
import dts from 'vite-plugin-dts'
|
|
5
|
-
import { setupUnPlugin } from './unPlugin'
|
|
6
|
-
import tailwindcss from '@tailwindcss/vite'
|
|
7
|
-
import svgLoader from 'vite-svg-loader'
|
|
8
|
-
|
|
9
|
-
export function setupVitePlugins() {
|
|
10
|
-
const plugins = [
|
|
11
|
-
vue(),
|
|
12
|
-
vueJsx(),
|
|
13
|
-
setupUnPlugin(),
|
|
14
|
-
tailwindcss(),
|
|
15
|
-
svgLoader(),
|
|
16
|
-
dts({
|
|
17
|
-
// 生成 .d.ts 类型声明文件 // 输出目录
|
|
18
|
-
outDir: ['dist', 'es', 'lib'],
|
|
19
|
-
exclude: ['build/**', 'vite.config.ts']
|
|
20
|
-
// rollupTypes: true
|
|
21
|
-
}),
|
|
22
|
-
eslintPlugin({
|
|
23
|
-
include: ['src/**/*.ts', 'src/**/*.vue', 'src/**/*.js'],
|
|
24
|
-
exclude: ['node_modules/**', 'dist/**'],
|
|
25
|
-
fix: true, // 自动修复
|
|
26
|
-
cache: false // 禁用缓存
|
|
27
|
-
})
|
|
28
|
-
]
|
|
29
|
-
|
|
30
|
-
return plugins
|
|
31
|
-
}
|
package/build/unPlugin.ts
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import type { PluginOption } from 'vite'
|
|
3
|
-
import Components from 'unplugin-vue-components/vite'
|
|
4
|
-
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
|
|
5
|
-
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
|
6
|
-
|
|
7
|
-
import path from 'node:path'
|
|
8
|
-
|
|
9
|
-
export function setupUnPlugin() {
|
|
10
|
-
const localIconPath = path.join(process.cwd(), 'src/svg-icons')
|
|
11
|
-
|
|
12
|
-
const plugins: PluginOption[] = [
|
|
13
|
-
Components({
|
|
14
|
-
dts: 'typing/components.d.ts',
|
|
15
|
-
dirs: ['src'],
|
|
16
|
-
types: [{ from: 'lib-materials', names: ['LayoutMaterial', 'SvgIcon']}],
|
|
17
|
-
resolvers: [
|
|
18
|
-
NaiveUiResolver()
|
|
19
|
-
// (name) => {
|
|
20
|
-
// // Convert a-button -> AButton, a-input -> AInput, etc.
|
|
21
|
-
// if (name.startsWith("Base6") && /[A-Z]/.test(name.charAt(5))) {
|
|
22
|
-
// const componentName = name;
|
|
23
|
-
// return { name: componentName, from: "base6-ui" };
|
|
24
|
-
// }
|
|
25
|
-
// },
|
|
26
|
-
]
|
|
27
|
-
}),
|
|
28
|
-
createSvgIconsPlugin({
|
|
29
|
-
iconDirs: [localIconPath],
|
|
30
|
-
symbolId: 'icon-[dir]-[name]',
|
|
31
|
-
inject: 'body-last',
|
|
32
|
-
customDomId: '__BASE6_UI_SVG_ICON_LOCAL__'
|
|
33
|
-
})
|
|
34
|
-
]
|
|
35
|
-
|
|
36
|
-
return plugins
|
|
37
|
-
}
|
package/eslint.config.js
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import pluginVue from 'eslint-plugin-vue'
|
|
2
|
-
import typescriptEslint from '@typescript-eslint/eslint-plugin'
|
|
3
|
-
import vueEslintParser from 'vue-eslint-parser'
|
|
4
|
-
import tsEslintParser from '@typescript-eslint/parser'
|
|
5
|
-
import tseslint from 'typescript-eslint'
|
|
6
|
-
|
|
7
|
-
export default [
|
|
8
|
-
...tseslint.configs.recommended,
|
|
9
|
-
{
|
|
10
|
-
files: ['**/*.{ts,tsx,vue,js,jsx}'] // 指定文件类型
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
languageOptions: {
|
|
14
|
-
parser: vueEslintParser,
|
|
15
|
-
parserOptions: {
|
|
16
|
-
parser: tsEslintParser,
|
|
17
|
-
ecmaVersion: 'latest',
|
|
18
|
-
sourceType: 'module',
|
|
19
|
-
ecmaFeatures: {
|
|
20
|
-
jsx: true // 启用 JSX 支持
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
plugins: {
|
|
27
|
-
vue: pluginVue,
|
|
28
|
-
'@typescript-eslint': typescriptEslint
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
rules: {
|
|
33
|
-
// 代码风格规则
|
|
34
|
-
'semi': [2, 'never'], // 不使用分号
|
|
35
|
-
'indent': [
|
|
36
|
-
2,
|
|
37
|
-
2,
|
|
38
|
-
{ SwitchCase: 1 } // switch 语句中的 case 分支使用 1 个空格缩进
|
|
39
|
-
],
|
|
40
|
-
'no-multi-spaces': 2, // 不允许多个连续的空格
|
|
41
|
-
'space-unary-ops': [2, { words: true, nonwords: false }], // 一元运算符后必须有空格
|
|
42
|
-
'space-infix-ops': 2, // 中缀操作符周围必须有空格
|
|
43
|
-
'space-before-blocks': [2, 'always'], // 代码块前必须有空格
|
|
44
|
-
'no-mixed-spaces-and-tabs': 2, // 不允许混合使用空格和制表符
|
|
45
|
-
'no-multiple-empty-lines': [2, { max: 1 }], // 连续空行不超过 1 行
|
|
46
|
-
'no-trailing-spaces': 2, // 行尾不允许有空格
|
|
47
|
-
'no-whitespace-before-property': 2, // 属性名和点运算符之间不能有空格
|
|
48
|
-
'no-irregular-whitespace': 2, // 不允许出现不规则的空白字符
|
|
49
|
-
'space-in-parens': [2, 'never'], // 圆括号内不能有空格
|
|
50
|
-
'comma-dangle': [2, 'never'], // 逗号不允许有拖尾
|
|
51
|
-
'array-bracket-spacing': [2, 'never'], // 数组括号内不允许有空格
|
|
52
|
-
'object-curly-spacing': 0, // 对象括号内不允许有空格
|
|
53
|
-
'max-len': ['off', { code: 240 }], // 行宽最大为 240 字符
|
|
54
|
-
'operator-linebreak': [2, 'before'], // 运算符换行时,运算符在行首
|
|
55
|
-
'comma-style': [2, 'last'], // 逗号风格:换行时在行尾
|
|
56
|
-
'no-extra-semi': 2, // 不允许出现多余的分号
|
|
57
|
-
'curly': 0, // 使用大括号包裹所有控制结构
|
|
58
|
-
'key-spacing': [2, { beforeColon: false, afterColon: true }], // 属性名与冒号之间不能有空格,冒号后必须有空格
|
|
59
|
-
'comma-spacing': [2, { before: false, after: true }], // 逗号后必须有空格
|
|
60
|
-
'semi-spacing': [2, { before: false, after: true }], // 分号后必须有空格
|
|
61
|
-
'camelcase': [1, { properties: 'always' }], // 强制使用驼峰命名法
|
|
62
|
-
'new-cap': ['error', { newIsCap: true, capIsNew: false }], // 构造函数首字母必须大写
|
|
63
|
-
'spaced-comment': [2, 'always'], // 注释后必须有空格
|
|
64
|
-
'no-inline-comments': 0, // 不允许行内注释
|
|
65
|
-
'eqeqeq': [2, 'always', { null: 'ignore' }], // 强制使用全等 (===) 运算符
|
|
66
|
-
'no-else-return': [1, { allowElseIf: false }], // 禁止 else 语句,如果 if 语句中已返回值
|
|
67
|
-
'no-loop-func': 2, // 禁止在循环中定义函数
|
|
68
|
-
'max-lines-per-function': 0,
|
|
69
|
-
'no-restricted-syntax': [
|
|
70
|
-
1,
|
|
71
|
-
{
|
|
72
|
-
selector: 'BinaryExpression[operator=\'typeof\']',
|
|
73
|
-
message: 'Use \'typeof\' for type detection.' // 不建议使用 typeof 来检测类型
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
selector: 'CallExpression[callee.name=\'parseInt\']',
|
|
77
|
-
message: 'Use Math.floor, Math.round, or Math.ceil instead of parseInt to remove decimal points.' // 不建议使用 parseInt 来移除小数点
|
|
78
|
-
}
|
|
79
|
-
],
|
|
80
|
-
'no-implicit-coercion': [1, { allow: ['!!'] }], // 禁止隐式类型转换
|
|
81
|
-
'radix': [2, 'always'], // parseInt 函数必须指定进制
|
|
82
|
-
'quotes': [2, 'single'], // 强制使用单引号
|
|
83
|
-
'no-array-constructor': 2, // 不允许使用 Array 构造函数
|
|
84
|
-
'max-lines-per-function': [
|
|
85
|
-
1,
|
|
86
|
-
{
|
|
87
|
-
max: 50, // 函数最大行数为 50 行
|
|
88
|
-
skipComments: true, // 跳过注释行
|
|
89
|
-
skipBlankLines: true, // 跳过空行
|
|
90
|
-
IIFEs: true // 对立即调用的函数表达式 (IIFE) 应用规则
|
|
91
|
-
}
|
|
92
|
-
],
|
|
93
|
-
'max-params': [1, 6], // 函数参数最大数量为 6
|
|
94
|
-
'no-eval': 2, // 禁止使用 eval
|
|
95
|
-
'prefer-const': 1, // 建议使用 const 声明不变的变量
|
|
96
|
-
'no-var': 1, // 建议使用 let/const 替代 var
|
|
97
|
-
'prefer-destructuring': [
|
|
98
|
-
0,
|
|
99
|
-
{ object: true, array: false } // 建议使用解构赋值
|
|
100
|
-
],
|
|
101
|
-
'prefer-template': 1, // 建议使用模板字符串
|
|
102
|
-
'template-curly-spacing': [2, 'never'], // 模板字符串中的花括号内不允许有空格
|
|
103
|
-
'no-duplicate-imports': 2, // 禁止重复导入
|
|
104
|
-
'import/order': 0, // 引入顺序eslint
|
|
105
|
-
// TypeScript 特定规则
|
|
106
|
-
'no-console': 0, // 是否允许console.log
|
|
107
|
-
'no-unused-vars': 'error',
|
|
108
|
-
'typescript-eslint/explicit-module-boundary-types': 'off', // 允许省略函数的返回类型
|
|
109
|
-
'vue/no-multiple-template-root': 0, // 根元素只能有一个
|
|
110
|
-
'vue/multi-word-component-names': 0 // 组件命名需要驼峰
|
|
111
|
-
}
|
|
112
|
-
},
|
|
113
|
-
{ ignores: ['verify-commit.js', 'node_modules'] }
|
|
114
|
-
]
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as AppProvider } from './index.vue'
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { createTextVNode, defineComponent } from 'vue'
|
|
3
|
-
import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui'
|
|
4
|
-
|
|
5
|
-
defineOptions({
|
|
6
|
-
name: 'AppProvider'
|
|
7
|
-
})
|
|
8
|
-
|
|
9
|
-
const ContextHolder = defineComponent({
|
|
10
|
-
name: 'ContextHolder',
|
|
11
|
-
setup() {
|
|
12
|
-
function register() {
|
|
13
|
-
window.$loadingBar = useLoadingBar()
|
|
14
|
-
window.$dialog = useDialog()
|
|
15
|
-
window.$message = useMessage()
|
|
16
|
-
window.$notification = useNotification()
|
|
17
|
-
}
|
|
18
|
-
register()
|
|
19
|
-
|
|
20
|
-
return () => createTextVNode()
|
|
21
|
-
}
|
|
22
|
-
})
|
|
23
|
-
</script>
|
|
24
|
-
|
|
25
|
-
<template>
|
|
26
|
-
<NLoadingBarProvider>
|
|
27
|
-
<NDialogProvider>
|
|
28
|
-
<NNotificationProvider>
|
|
29
|
-
<NMessageProvider>
|
|
30
|
-
<ContextHolder />
|
|
31
|
-
<slot></slot>
|
|
32
|
-
</NMessageProvider>
|
|
33
|
-
</NNotificationProvider>
|
|
34
|
-
</NDialogProvider>
|
|
35
|
-
</NLoadingBarProvider>
|
|
36
|
-
</template>
|
|
37
|
-
|
|
38
|
-
<style scoped></style>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as BaseButton } from './index.vue'
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<n-button v-bind="$attrs">
|
|
3
|
-
<template v-if="$slots.icon || icon" #icon>
|
|
4
|
-
<slot v-if="$slots.icon" name="icon" />
|
|
5
|
-
<svg-icon v-else :icon="icon" />
|
|
6
|
-
</template>
|
|
7
|
-
<template v-if="$slots.default || content" #default>
|
|
8
|
-
<slot v-if="$slots.default" />
|
|
9
|
-
<span v-else>{{ content }}</span>
|
|
10
|
-
</template>
|
|
11
|
-
</n-button>
|
|
12
|
-
</template>
|
|
13
|
-
|
|
14
|
-
<script setup lang="ts">
|
|
15
|
-
type PropsType = {
|
|
16
|
-
icon?: string;
|
|
17
|
-
content?: string;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
withDefaults(defineProps<PropsType>(), { icon: '' })
|
|
21
|
-
</script>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as BaseDataTable } from './index.vue'
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<n-card class="base-data-table" size="small" :bordered="false">
|
|
3
|
-
<div ref="dataTableWrapRef" class="w-full" :class="dataTableWrapClass">
|
|
4
|
-
<n-data-table
|
|
5
|
-
class="base-data-table"
|
|
6
|
-
v-bind="$attrs"
|
|
7
|
-
:bordered="bordered"
|
|
8
|
-
:columns="columns"
|
|
9
|
-
:data="data"
|
|
10
|
-
:max-height="maxHeight"
|
|
11
|
-
:min-height="minHeight"
|
|
12
|
-
:pagination="pagination"
|
|
13
|
-
:single-column="singleColumn"
|
|
14
|
-
:striped="striped"
|
|
15
|
-
table-layout="fixed"
|
|
16
|
-
/>
|
|
17
|
-
</div>
|
|
18
|
-
</n-card>
|
|
19
|
-
</template>
|
|
20
|
-
<script lang="ts" setup>
|
|
21
|
-
import {
|
|
22
|
-
computed,
|
|
23
|
-
nextTick,
|
|
24
|
-
onMounted,
|
|
25
|
-
onUnmounted,
|
|
26
|
-
ref,
|
|
27
|
-
useTemplateRef
|
|
28
|
-
} from 'vue'
|
|
29
|
-
import { DataTableProps } from 'naive-ui'
|
|
30
|
-
|
|
31
|
-
type PropsType = {
|
|
32
|
-
columns: DataTableProps['columns']
|
|
33
|
-
data: DataTableProps['data']
|
|
34
|
-
tableScroll?: boolean
|
|
35
|
-
pagination: DataTableProps['pagination']
|
|
36
|
-
bordered: DataTableProps['bordered']
|
|
37
|
-
singleColumn: DataTableProps['singleColumn'],
|
|
38
|
-
striped: DataTableProps['striped']
|
|
39
|
-
}
|
|
40
|
-
defineOptions({
|
|
41
|
-
inheritAttrs: false
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
const maxHeight = ref<number | undefined>(0)
|
|
45
|
-
const minHeight = ref<number | undefined>(0)
|
|
46
|
-
const dataTableWrapRef = useTemplateRef('dataTableWrapRef')
|
|
47
|
-
|
|
48
|
-
const props = withDefaults(defineProps<PropsType>(), {
|
|
49
|
-
bordered: true,
|
|
50
|
-
tableScroll: true,
|
|
51
|
-
columns: undefined,
|
|
52
|
-
data: undefined,
|
|
53
|
-
pagination: false,
|
|
54
|
-
singleColumn: false,
|
|
55
|
-
striped: false
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
const dataTableWrapClass = computed(() => {
|
|
59
|
-
const classList: Array<string> = []
|
|
60
|
-
if (props.tableScroll) classList.push('h-full overflow-hidden table-scroll')
|
|
61
|
-
return classList
|
|
62
|
-
})
|
|
63
|
-
|
|
64
|
-
const calcMaxHeight = () => {
|
|
65
|
-
if (!dataTableWrapRef.value) return
|
|
66
|
-
if (!props.tableScroll) {
|
|
67
|
-
maxHeight.value = undefined
|
|
68
|
-
minHeight.value = undefined
|
|
69
|
-
}
|
|
70
|
-
else {
|
|
71
|
-
const headerDom = document.getElementsByClassName('n-data-table-base-table-header')[0] as HTMLDivElement
|
|
72
|
-
const paginationDom = document.getElementsByClassName('n-data-table__pagination')[0] as HTMLDivElement
|
|
73
|
-
let otherHeight = 0
|
|
74
|
-
console.log(dataTableWrapRef.value.offsetHeight, 'headerDom')
|
|
75
|
-
if (headerDom) otherHeight += headerDom.offsetHeight
|
|
76
|
-
if (paginationDom) otherHeight += paginationDom.offsetHeight + 12
|
|
77
|
-
const wrapHeight = dataTableWrapRef.value.offsetHeight - otherHeight
|
|
78
|
-
maxHeight.value = wrapHeight
|
|
79
|
-
minHeight.value = wrapHeight
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
const handleWindowResize = async () => {
|
|
84
|
-
maxHeight.value = 0
|
|
85
|
-
minHeight.value = 0
|
|
86
|
-
await nextTick()
|
|
87
|
-
calcMaxHeight()
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
onMounted(() => {
|
|
91
|
-
calcMaxHeight()
|
|
92
|
-
window.addEventListener('resize', handleWindowResize)
|
|
93
|
-
})
|
|
94
|
-
|
|
95
|
-
onUnmounted(() => {
|
|
96
|
-
window.removeEventListener('resize', handleWindowResize)
|
|
97
|
-
})
|
|
98
|
-
</script>
|
|
99
|
-
<style lang="scss" scoped>
|
|
100
|
-
.base-data-table {
|
|
101
|
-
display: flex;
|
|
102
|
-
flex: 1;
|
|
103
|
-
&-content.n-data-table {
|
|
104
|
-
:deep(.n-data-table-th) {
|
|
105
|
-
.n-data-table-th__title-wrapper .n-data-table-th__title {
|
|
106
|
-
flex: none;
|
|
107
|
-
}
|
|
108
|
-
&.n-data-table-th--filterable {
|
|
109
|
-
display: flex;
|
|
110
|
-
}
|
|
111
|
-
.n-data-table-filter {
|
|
112
|
-
position: relative;
|
|
113
|
-
width: auto;
|
|
114
|
-
margin-left: 4px;
|
|
115
|
-
background-color: transparent;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
</style>
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<n-modal
|
|
3
|
-
v-model:show="showModel"
|
|
4
|
-
:maskClosable="maskClosable"
|
|
5
|
-
:closeOnEsc="closeOnEsc"
|
|
6
|
-
v-bind="$attrs"
|
|
7
|
-
>
|
|
8
|
-
<n-card
|
|
9
|
-
:header-style="cardHeadStyle"
|
|
10
|
-
:style="cardStyle"
|
|
11
|
-
:size="cardSize"
|
|
12
|
-
:closable="closable"
|
|
13
|
-
:segmented="{ content: true }"
|
|
14
|
-
v-bind="$attrs"
|
|
15
|
-
>
|
|
16
|
-
<template v-if="$slots.header || title" #header>
|
|
17
|
-
<slot v-if="$slots.header" name="header" />
|
|
18
|
-
<span style="margin: 0 auto;" v-else>{{ title }}</span>
|
|
19
|
-
</template>
|
|
20
|
-
<template v-if="$slots['header-extra'] || showHeaderExtra" #header-extra>
|
|
21
|
-
<slot v-if="$slots['header-extra']" name="header-extra" />
|
|
22
|
-
<svg-icon v-else icon="operate-close" class="cursor-pointer active:scale-[0.95] text-[18px]" @click="handleCancel" />
|
|
23
|
-
</template>
|
|
24
|
-
<slot />
|
|
25
|
-
<template v-if="$slots.footer || showFooter" #footer>
|
|
26
|
-
<slot v-if="$slots.footer" name="footer" />
|
|
27
|
-
<div v-else class="gap-[30px]" :class="footerClass">
|
|
28
|
-
<BaseButton
|
|
29
|
-
:icon="cancelIcon"
|
|
30
|
-
:icon-placement="cancelIconPlacement"
|
|
31
|
-
:color="cancelColor"
|
|
32
|
-
:text-color="cancelTextColor"
|
|
33
|
-
:content="cancelBtnText"
|
|
34
|
-
:round="btnRound"
|
|
35
|
-
:size="btnSize"
|
|
36
|
-
:type="cancelType"
|
|
37
|
-
@click="handleCancel"
|
|
38
|
-
/>
|
|
39
|
-
<BaseButton
|
|
40
|
-
:icon="confirmIcon"
|
|
41
|
-
:icon-placement="confirmIconPlacement"
|
|
42
|
-
:color="confirmColor"
|
|
43
|
-
:text-color="confirmTextColor"
|
|
44
|
-
:content="confirmBtnText"
|
|
45
|
-
:round="btnRound"
|
|
46
|
-
:size="btnSize"
|
|
47
|
-
:type="confirmType"
|
|
48
|
-
@click="handleConfirm"
|
|
49
|
-
/>
|
|
50
|
-
</div>
|
|
51
|
-
</template>
|
|
52
|
-
</n-card>
|
|
53
|
-
</n-modal>
|
|
54
|
-
</template>
|
|
55
|
-
|
|
56
|
-
<script setup lang="ts">
|
|
57
|
-
import { computed, CSSProperties } from 'vue'
|
|
58
|
-
import { defaultProps } from './options'
|
|
59
|
-
import { BaseDialogPropsType } from './type'
|
|
60
|
-
import { BaseButton } from '../BaseButton'
|
|
61
|
-
|
|
62
|
-
type PropsType = BaseDialogPropsType
|
|
63
|
-
const emits = defineEmits(['update:visible', 'cancel', 'confirm'])
|
|
64
|
-
const props = withDefaults(defineProps<PropsType>(), defaultProps)
|
|
65
|
-
const cardStyle = computed<CSSProperties>(() => {
|
|
66
|
-
return {
|
|
67
|
-
width: `${props.width}`,
|
|
68
|
-
position: 'fixed',
|
|
69
|
-
left: '50%',
|
|
70
|
-
top: `${props.top}`,
|
|
71
|
-
transform: 'translateX(-50%)'
|
|
72
|
-
}
|
|
73
|
-
})
|
|
74
|
-
|
|
75
|
-
const cardHeadStyle = computed<CSSProperties>(() => ({
|
|
76
|
-
lineHeight: '28px',
|
|
77
|
-
textAlign: `${props.center ? 'center' : 'left'}`
|
|
78
|
-
}))
|
|
79
|
-
|
|
80
|
-
const footerClass = computed(() => {
|
|
81
|
-
if (props.btnPlacement === 'center') return 'flex-c'
|
|
82
|
-
return 'flex justify-end'
|
|
83
|
-
})
|
|
84
|
-
|
|
85
|
-
const showModel = computed({
|
|
86
|
-
get: () => props.visible,
|
|
87
|
-
set: (value: boolean) => {
|
|
88
|
-
emits('update:visible', value)
|
|
89
|
-
}
|
|
90
|
-
})
|
|
91
|
-
|
|
92
|
-
const handleCancel = () => {
|
|
93
|
-
showModel.value = false
|
|
94
|
-
emits('cancel')
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
const handleConfirm = () => {
|
|
98
|
-
emits('confirm')
|
|
99
|
-
}
|
|
100
|
-
</script>
|
|
101
|
-
|
|
102
|
-
<style scoped>
|
|
103
|
-
|
|
104
|
-
</style>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { BaseDialogPropsType } from './type'
|
|
2
|
-
export const defaultProps: BaseDialogPropsType = {
|
|
3
|
-
visible: false,
|
|
4
|
-
width: '1000px',
|
|
5
|
-
title: undefined,
|
|
6
|
-
top: '10vh',
|
|
7
|
-
cardSize: 'medium',
|
|
8
|
-
center: true,
|
|
9
|
-
closable: false,
|
|
10
|
-
showHeaderExtra: true,
|
|
11
|
-
showFooter: true,
|
|
12
|
-
closeOnEsc: false,
|
|
13
|
-
maskClosable: false,
|
|
14
|
-
cancelBtnText: 'Cancel',
|
|
15
|
-
confirmBtnText: 'Confirm',
|
|
16
|
-
cancelIcon: '',
|
|
17
|
-
confirmIcon: '',
|
|
18
|
-
cancelIconPlacement: 'left',
|
|
19
|
-
confirmIconPlacement: 'left',
|
|
20
|
-
cancelType: 'default',
|
|
21
|
-
confirmType: 'primary',
|
|
22
|
-
btnPlacement: 'center',
|
|
23
|
-
btnRound: true,
|
|
24
|
-
btnSize: 'small'
|
|
25
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { ModalProps, CardProps, ButtonProps } from 'naive-ui'
|
|
2
|
-
|
|
3
|
-
export type BaseDialogPropsType = {
|
|
4
|
-
visible: boolean
|
|
5
|
-
width?: string
|
|
6
|
-
top?: string
|
|
7
|
-
title?: CardProps['title']
|
|
8
|
-
cardSize?: CardProps['size']
|
|
9
|
-
center?: boolean;
|
|
10
|
-
closable?: CardProps['closable']
|
|
11
|
-
showHeaderExtra?: boolean
|
|
12
|
-
showFooter?: boolean
|
|
13
|
-
maskClosable?: ModalProps['maskClosable']
|
|
14
|
-
closeOnEsc?: ModalProps['closeOnEsc']
|
|
15
|
-
cancelBtnText?: string;
|
|
16
|
-
confirmBtnText?: string;
|
|
17
|
-
cancelColor?: ButtonProps['color'];
|
|
18
|
-
confirmColor?: ButtonProps['color'];
|
|
19
|
-
cancelTextColor?: ButtonProps['textColor'];
|
|
20
|
-
confirmTextColor?: ButtonProps['textColor'];
|
|
21
|
-
cancelIcon?: string;
|
|
22
|
-
confirmIcon?: string;
|
|
23
|
-
cancelIconPlacement?: ButtonProps['iconPlacement'];
|
|
24
|
-
confirmIconPlacement?: ButtonProps['iconPlacement'];
|
|
25
|
-
cancelType?: ButtonProps['type'],
|
|
26
|
-
confirmType?: ButtonProps['type'],
|
|
27
|
-
btnPlacement?: 'center' | 'right';
|
|
28
|
-
btnRound?: boolean;
|
|
29
|
-
btnSize?: ButtonProps['size'];
|
|
30
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as BaseInputNumber } from './index.vue'
|