@ithinkdt/ui 4.0.0-11 → 4.0.0-110
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/dist/components-BdbuJNhZ.js +1650 -0
- package/dist/components.js +5 -0
- package/dist/directives-DUuJW647.js +183 -0
- package/dist/directives.js +3 -0
- package/dist/index.js +1224 -0
- package/dist/page.js +519 -0
- package/dist/use-i18n-Dx7V4KrY.js +6 -0
- package/dist/use-style-DcT-1dj4.js +29 -0
- package/dist/use-style.js +2 -0
- package/{src → esm}/components.d.ts +16 -3
- package/esm/components.js +1 -0
- package/{src → esm}/design.d.ts +9 -0
- package/esm/directives.js +1 -0
- package/esm/index.js +1 -0
- package/{src → esm}/page.d.ts +43 -26
- package/esm/page.js +1 -0
- package/esm/use-style.js +1 -0
- package/locale.d.ts +4 -0
- package/package.json +30 -27
- package/{unocss.js → unocss-preset.js} +0 -1
- package/src/components/Checkboxes.jsx +0 -128
- package/src/components/DataActions.jsx +0 -107
- package/src/components/DataCustom.jsx +0 -172
- package/src/components/DataFilter.jsx +0 -113
- package/src/components/DataForm.jsx +0 -264
- package/src/components/DataLocaleInput.jsx +0 -121
- package/src/components/DataPagination.jsx +0 -62
- package/src/components/DataSelection.jsx +0 -57
- package/src/components/DataTable.jsx +0 -243
- package/src/components/Radios.jsx +0 -120
- package/src/components/UserDept.jsx +0 -643
- package/src/components/assets.jsx +0 -274
- package/src/components/index.js +0 -11
- package/src/design/Account.jsx +0 -152
- package/src/design/Appearance.jsx +0 -89
- package/src/design/Breadcrumb.jsx +0 -67
- package/src/design/Fullscreen.jsx +0 -65
- package/src/design/Language.jsx +0 -45
- package/src/design/Layout.jsx +0 -241
- package/src/design/Logo.jsx +0 -91
- package/src/design/Menu.jsx +0 -133
- package/src/design/MultiTabs.jsx +0 -501
- package/src/design/Notification.jsx +0 -322
- package/src/design/common.jsx +0 -19
- package/src/design/index.js +0 -10
- package/src/directives/index.js +0 -2
- package/src/directives/spin.js +0 -181
- package/src/directives/tooltip.jsx +0 -121
- package/src/index.js +0 -18
- package/src/page.jsx +0 -626
- package/src/use-i18n.js +0 -8
- package/src/use-style.js +0 -58
- package/src/utils.js +0 -20
- /package/{src → esm}/directives.d.ts +0 -0
- /package/{src → esm}/index.d.ts +0 -0
- /package/{src → esm}/use-style.d.ts +0 -0
- /package/{unocss.d.ts → unocss-preset.d.ts} +0 -0
package/{src → esm}/page.d.ts
RENAMED
|
@@ -1,44 +1,46 @@
|
|
|
1
1
|
import {
|
|
2
|
-
CheckboxProps,
|
|
2
|
+
CheckboxProps,
|
|
3
|
+
DatePickerProps, DatePickerSlots,
|
|
3
4
|
DrawerContentProps, DrawerProps,
|
|
4
5
|
InputNumberProps, InputNumberSlots, InputProps, InputSlots,
|
|
5
6
|
ModalOptions,
|
|
6
7
|
SelectGroupOption, SelectOption, SelectProps, SelectSlots,
|
|
7
|
-
UploadFileInfo,
|
|
8
|
+
UploadFileInfo, UploadProps,
|
|
8
9
|
} from 'ithinkdt-ui'
|
|
9
|
-
import { MaybeRef, VNode
|
|
10
|
+
import { MaybeRef, VNode } from 'vue'
|
|
10
11
|
|
|
12
|
+
import { PublicProps } from '@ithinkdt/common'
|
|
11
13
|
import { DictItem, DictTypeKey } from '@ithinkdt/common/dict'
|
|
12
14
|
import { PageOptions } from '@ithinkdt/page'
|
|
13
15
|
|
|
14
16
|
import { CheckboxesProps, RadiosProps, UserDeptProps, UserGroupOption } from './components'
|
|
15
17
|
|
|
16
|
-
type
|
|
18
|
+
type ShallowMaybeRef<T extends {}> = {
|
|
17
19
|
[Key in (keyof T)]: MaybeRef<T[Key]>
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
declare module '@ithinkdt/page' {
|
|
21
23
|
interface FormComponentPresets {
|
|
22
24
|
input: {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
inputProps?: ShallowMaybeRef<Omit<InputProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
|
|
26
|
+
inputSlots?: InputSlots
|
|
25
27
|
}
|
|
26
28
|
number: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
numberProps?: ShallowMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
|
|
30
|
+
numberSlots?: InputNumberSlots
|
|
29
31
|
}
|
|
30
32
|
select: {
|
|
31
|
-
|
|
33
|
+
selectProps?: ShallowMaybeRef<Omit<SelectProps, 'options' | 'value' | 'onUpdate:value' | 'disabled'> & PublicProps
|
|
32
34
|
& {
|
|
33
35
|
dictType?: DictTypeKey | undefined
|
|
34
36
|
options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
|
|
35
37
|
}>
|
|
36
|
-
|
|
38
|
+
selectSlots?: SelectSlots
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
checkbox: {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
checkboxProps?: ShallowMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & PublicProps
|
|
43
|
+
checkboxSlots?: {
|
|
42
44
|
default?: (() => VNode[]) | undefined
|
|
43
45
|
checked?: (() => VNode[]) | undefined
|
|
44
46
|
unchecked?: (() => VNode[]) | undefined
|
|
@@ -46,45 +48,59 @@ declare module '@ithinkdt/page' {
|
|
|
46
48
|
}
|
|
47
49
|
|
|
48
50
|
checkboxes: {
|
|
49
|
-
|
|
51
|
+
checkboxesProps?: ShallowMaybeRef<Omit<CheckboxesProps, 'disabled'> & PublicProps
|
|
50
52
|
& {
|
|
51
53
|
dictType?: DictTypeKey | undefined
|
|
52
54
|
options?: DictItem[] | undefined
|
|
53
55
|
}>
|
|
54
|
-
|
|
56
|
+
checkboxesSlots?: { }
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
radios: {
|
|
58
|
-
|
|
60
|
+
radiosProps?: ShallowMaybeRef<Omit<RadiosProps, 'disabled'> & PublicProps
|
|
59
61
|
& {
|
|
60
62
|
dictType?: DictTypeKey | undefined
|
|
61
63
|
options?: DictItem[] | undefined
|
|
62
64
|
}>
|
|
63
|
-
|
|
65
|
+
radiosSlots?: { }
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
datepicker: {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
datepickerProps?: ShallowMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
|
|
70
|
+
datepickerSlots?: DatePickerSlots
|
|
69
71
|
}
|
|
70
72
|
|
|
71
73
|
file: {
|
|
72
|
-
|
|
74
|
+
fileProps?: ShallowMaybeRef<{
|
|
73
75
|
type?: 'file' | 'image' | undefined
|
|
74
76
|
multiple?: boolean | undefined
|
|
75
77
|
max?: number | undefined
|
|
76
78
|
accept?: string | undefined
|
|
77
79
|
maxSize?: number | undefined
|
|
78
|
-
|
|
79
|
-
|
|
80
|
+
onBeforeUpload?: UploadProps['onBeforeUpload']
|
|
81
|
+
} & PublicProps>
|
|
82
|
+
fileSlots?: {
|
|
83
|
+
default?: (() => VNode[]) | undefined
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
upload: {
|
|
87
|
+
uploadProps?: ShallowMaybeRef<{
|
|
88
|
+
type?: 'file' | 'image' | undefined
|
|
89
|
+
multiple?: boolean | undefined
|
|
90
|
+
max?: number | undefined
|
|
91
|
+
accept?: string | undefined
|
|
92
|
+
maxSize?: number | undefined
|
|
93
|
+
onBeforeUpload?: UploadProps['onBeforeUpload']
|
|
94
|
+
} & PublicProps>
|
|
95
|
+
uploadSlots?: {
|
|
80
96
|
default?: (() => VNode[]) | undefined
|
|
81
97
|
}
|
|
82
98
|
}
|
|
83
99
|
|
|
84
100
|
user: {
|
|
85
|
-
|
|
86
|
-
| 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> &
|
|
87
|
-
|
|
101
|
+
userProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
|
|
102
|
+
| 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & PublicProps
|
|
103
|
+
userSlots?: {}
|
|
88
104
|
}
|
|
89
105
|
}
|
|
90
106
|
|
|
@@ -128,9 +144,9 @@ declare module '@ithinkdt/page' {
|
|
|
128
144
|
}
|
|
129
145
|
|
|
130
146
|
type ModalOptionsKey = 'type' | keyof import('@ithinkdt/page').ModalOptions
|
|
131
|
-
interface ModalDrawerOptions extends
|
|
147
|
+
interface ModalDrawerOptions extends ShallowMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, ShallowMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
|
|
132
148
|
|
|
133
|
-
interface ModalDialogOptions extends
|
|
149
|
+
interface ModalDialogOptions extends ShallowMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
|
|
134
150
|
}
|
|
135
151
|
|
|
136
152
|
export declare function createPageFormHelper(options?: {
|
|
@@ -142,6 +158,7 @@ export declare function createPageFormHelper(options?: {
|
|
|
142
158
|
uploadFile?: (file: File, options?: {
|
|
143
159
|
onProgress?: ((percent: number) => void) | undefined
|
|
144
160
|
}) => Promise<string>
|
|
161
|
+
getFileInfos?: (files: string[]) => Promise<UploadFileInfo[]>
|
|
145
162
|
}): PageOptions['getFormItemRenderer']
|
|
146
163
|
export declare function createPageTableHelper(options?: {
|
|
147
164
|
getUsersByUsername?: (usernames: string[]) => Promise<{ username: string, nickname: string }[]>
|
package/esm/page.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../dist/page.js'
|
package/esm/use-style.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { c, cB, cE, cM, default, useClsPrefix } from '../dist/use-style.js'
|
package/locale.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ export interface UILocale {
|
|
|
29
29
|
account: {
|
|
30
30
|
logout: string
|
|
31
31
|
changePwd: string
|
|
32
|
+
changeTenant: string
|
|
32
33
|
}
|
|
33
34
|
notification: {
|
|
34
35
|
tip: (params: { count?: number | null }) => string
|
|
@@ -61,6 +62,9 @@ export interface UILocale {
|
|
|
61
62
|
resetText: string
|
|
62
63
|
cancelText: string
|
|
63
64
|
selectFileText: string
|
|
65
|
+
validate: {
|
|
66
|
+
fileErrorMessage: string
|
|
67
|
+
}
|
|
64
68
|
}
|
|
65
69
|
filter: {
|
|
66
70
|
submitText: string
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ithinkdt/ui",
|
|
3
|
-
"version": "4.0.0-
|
|
3
|
+
"version": "4.0.0-110",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "iThinkDT UI",
|
|
@@ -10,34 +10,35 @@
|
|
|
10
10
|
"ui"
|
|
11
11
|
],
|
|
12
12
|
"files": [
|
|
13
|
-
"
|
|
13
|
+
"dist",
|
|
14
|
+
"esm",
|
|
14
15
|
"auto-imports.*",
|
|
15
16
|
"locale.*",
|
|
16
|
-
"unocss
|
|
17
|
+
"unocss*"
|
|
17
18
|
],
|
|
18
|
-
"main": "./
|
|
19
|
-
"module": "./
|
|
20
|
-
"types": "./
|
|
19
|
+
"main": "./esm/index.js",
|
|
20
|
+
"module": "./esm/index.js",
|
|
21
|
+
"types": "./esm/index.d.ts",
|
|
21
22
|
"exports": {
|
|
22
23
|
".": {
|
|
23
|
-
"types": "./
|
|
24
|
-
"default": "./
|
|
24
|
+
"types": "./esm/index.d.ts",
|
|
25
|
+
"default": "./esm/index.js"
|
|
25
26
|
},
|
|
26
27
|
"./directives": {
|
|
27
|
-
"types": "./
|
|
28
|
-
"default": "./
|
|
28
|
+
"types": "./esm/directives.d.ts",
|
|
29
|
+
"default": "./esm/directives.js"
|
|
29
30
|
},
|
|
30
31
|
"./components": {
|
|
31
|
-
"types": "./
|
|
32
|
-
"default": "./
|
|
32
|
+
"types": "./esm/components.d.ts",
|
|
33
|
+
"default": "./esm/components.js"
|
|
33
34
|
},
|
|
34
35
|
"./use-style": {
|
|
35
|
-
"types": "./
|
|
36
|
-
"default": "./
|
|
36
|
+
"types": "./esm/use-style.d.ts",
|
|
37
|
+
"default": "./esm/use-style.js"
|
|
37
38
|
},
|
|
38
39
|
"./page": {
|
|
39
|
-
"types": "./
|
|
40
|
-
"default": "./
|
|
40
|
+
"types": "./esm/page.d.ts",
|
|
41
|
+
"default": "./esm/page.js"
|
|
41
42
|
},
|
|
42
43
|
"./package.json": {
|
|
43
44
|
"default": "./package.json"
|
|
@@ -47,8 +48,8 @@
|
|
|
47
48
|
"default": "./auto-imports.js"
|
|
48
49
|
},
|
|
49
50
|
"./unocss": {
|
|
50
|
-
"types": "./unocss.d.ts",
|
|
51
|
-
"default": "./unocss.js"
|
|
51
|
+
"types": "./unocss-preset.d.ts",
|
|
52
|
+
"default": "./unocss-preset.js"
|
|
52
53
|
}
|
|
53
54
|
},
|
|
54
55
|
"publishConfig": {
|
|
@@ -57,13 +58,13 @@
|
|
|
57
58
|
},
|
|
58
59
|
"sideEffects": false,
|
|
59
60
|
"dependencies": {
|
|
60
|
-
"@vueuse/core": "^
|
|
61
|
+
"@vueuse/core": "^14.0.0",
|
|
61
62
|
"date-fns": "^4.1.0",
|
|
62
63
|
"vueuc": "^0.4.65",
|
|
63
64
|
"sortablejs": "^1.15.6",
|
|
64
|
-
"@types/sortablejs": "^1.15.
|
|
65
|
+
"@types/sortablejs": "^1.15.9",
|
|
65
66
|
"nanoid": "^5.1.6",
|
|
66
|
-
"@ithinkdt/common": "^4.0.0-
|
|
67
|
+
"@ithinkdt/common": "^4.0.0-50"
|
|
67
68
|
},
|
|
68
69
|
"peerDependencies": {
|
|
69
70
|
"@ithinkdt/page": ">=4.0",
|
|
@@ -82,15 +83,17 @@
|
|
|
82
83
|
},
|
|
83
84
|
"devDependencies": {
|
|
84
85
|
"@vitejs/plugin-vue-jsx": "^5.1.1",
|
|
85
|
-
"ithinkdt-ui": "^1.
|
|
86
|
+
"ithinkdt-ui": "^1.8.0",
|
|
86
87
|
"typescript": "~5.9.3",
|
|
87
|
-
"unocss": ">=66.5.
|
|
88
|
-
"vite": "npm:rolldown-vite@^7.1.
|
|
88
|
+
"unocss": ">=66.5.4",
|
|
89
|
+
"vite": "npm:rolldown-vite@^7.1.20",
|
|
89
90
|
"vue": "^3.5.22",
|
|
90
|
-
"vue-router": "^4.
|
|
91
|
-
"@ithinkdt/page": "^4.0.0-
|
|
91
|
+
"vue-router": "^4.6.3",
|
|
92
|
+
"@ithinkdt/page": "^4.0.0-50"
|
|
92
93
|
},
|
|
93
94
|
"scripts": {
|
|
94
|
-
"
|
|
95
|
+
"dev": "vite build --watch",
|
|
96
|
+
"build": "vite build",
|
|
97
|
+
"release": "pnpm run build && pnpm publish --no-git-checks"
|
|
95
98
|
}
|
|
96
99
|
}
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import { NCheckbox, NCheckboxGroup, NFlex } from 'ithinkdt-ui'
|
|
2
|
-
import { computed, defineComponent, ref, watch } from 'vue'
|
|
3
|
-
|
|
4
|
-
import { useI18n } from '../use-i18n.js'
|
|
5
|
-
|
|
6
|
-
export const NCheckboxes = defineComponent({
|
|
7
|
-
name: 'Checkboxes',
|
|
8
|
-
inheritAttrs: false,
|
|
9
|
-
props: {
|
|
10
|
-
options: {
|
|
11
|
-
type: Array,
|
|
12
|
-
default: () => [],
|
|
13
|
-
},
|
|
14
|
-
vertical: {
|
|
15
|
-
type: Boolean,
|
|
16
|
-
default: false,
|
|
17
|
-
},
|
|
18
|
-
default: {
|
|
19
|
-
type: [Boolean, String, Object],
|
|
20
|
-
default: false,
|
|
21
|
-
},
|
|
22
|
-
gap: {
|
|
23
|
-
type: [Number, String, Array],
|
|
24
|
-
default: undefined,
|
|
25
|
-
},
|
|
26
|
-
value: {
|
|
27
|
-
type: Array,
|
|
28
|
-
default: undefined,
|
|
29
|
-
},
|
|
30
|
-
labelPadding: {
|
|
31
|
-
type: String,
|
|
32
|
-
default: undefined,
|
|
33
|
-
},
|
|
34
|
-
labelField: {
|
|
35
|
-
type: String,
|
|
36
|
-
default: 'label',
|
|
37
|
-
},
|
|
38
|
-
valueField: {
|
|
39
|
-
type: String,
|
|
40
|
-
default: 'value',
|
|
41
|
-
},
|
|
42
|
-
disabledField: {
|
|
43
|
-
type: String,
|
|
44
|
-
default: 'disabled',
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
emits: {
|
|
48
|
-
'update:value': () => true,
|
|
49
|
-
},
|
|
50
|
-
|
|
51
|
-
setup(props, { emit, attrs }) {
|
|
52
|
-
const { t } = useI18n()
|
|
53
|
-
const defaultLabel = computed(() => {
|
|
54
|
-
if (!props.default) return ''
|
|
55
|
-
if (props.default === true) return t('common.all')
|
|
56
|
-
if (typeof props.default === 'string') return props.default
|
|
57
|
-
return props.default?.[props.labelField] ?? t('common.all')
|
|
58
|
-
})
|
|
59
|
-
const checked = ref([])
|
|
60
|
-
|
|
61
|
-
watch(
|
|
62
|
-
() => props.value,
|
|
63
|
-
v => (checked.value = v),
|
|
64
|
-
{ immediate: true },
|
|
65
|
-
)
|
|
66
|
-
|
|
67
|
-
const emitValue = (v) => {
|
|
68
|
-
emit('update:value', v)
|
|
69
|
-
}
|
|
70
|
-
const onAll = () => {
|
|
71
|
-
emitValue(
|
|
72
|
-
checked.value?.length === props.options.length ? [] : props.options.map(it => it[props.valueField]),
|
|
73
|
-
)
|
|
74
|
-
}
|
|
75
|
-
const indeterminate = computed(() => props.options.length > checked.value?.length && checked.value?.length > 0)
|
|
76
|
-
|
|
77
|
-
const style = computed(() => {
|
|
78
|
-
return {
|
|
79
|
-
'--n-label-padding': props.labelPadding,
|
|
80
|
-
}
|
|
81
|
-
})
|
|
82
|
-
return () => {
|
|
83
|
-
const group = (
|
|
84
|
-
<NCheckboxGroup {...attrs} value={checked.value} onUpdateValue={emitValue}>
|
|
85
|
-
<NFlex
|
|
86
|
-
size={props.gap ?? (props.vertical ? undefined : 'small')}
|
|
87
|
-
vertical={props.vertical}
|
|
88
|
-
style={!props.default && props.vertical ? { padding: '6px 0 0' } : {}}
|
|
89
|
-
>
|
|
90
|
-
{props.options?.map(op => (
|
|
91
|
-
<NCheckbox
|
|
92
|
-
value={op[props.valueField]}
|
|
93
|
-
disabled={op[props.disabledField]}
|
|
94
|
-
style={style.value}
|
|
95
|
-
>
|
|
96
|
-
{op[props.labelField]}
|
|
97
|
-
</NCheckbox>
|
|
98
|
-
))}
|
|
99
|
-
</NFlex>
|
|
100
|
-
</NCheckboxGroup>
|
|
101
|
-
)
|
|
102
|
-
|
|
103
|
-
return props.default
|
|
104
|
-
? (
|
|
105
|
-
<NFlex
|
|
106
|
-
size={props.gap ?? (props.vertical ? undefined : 'small')}
|
|
107
|
-
vertical={props.vertical}
|
|
108
|
-
style={props.vertical ? { padding: '6px 0 0' } : {}}
|
|
109
|
-
>
|
|
110
|
-
<span>
|
|
111
|
-
<NCheckbox
|
|
112
|
-
indeterminate={indeterminate.value}
|
|
113
|
-
checked={checked.value?.length > 0}
|
|
114
|
-
onUpdateChecked={onAll}
|
|
115
|
-
style={style.value}
|
|
116
|
-
>
|
|
117
|
-
{defaultLabel.value}
|
|
118
|
-
</NCheckbox>
|
|
119
|
-
</span>
|
|
120
|
-
{group}
|
|
121
|
-
</NFlex>
|
|
122
|
-
)
|
|
123
|
-
: (
|
|
124
|
-
group
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
})
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { NButton, NDropdown } from 'ithinkdt-ui'
|
|
2
|
-
import { computed, defineComponent } from 'vue'
|
|
3
|
-
import { VOverflow, VResizeObserver } from 'vueuc'
|
|
4
|
-
|
|
5
|
-
import { IMore } from './assets.jsx'
|
|
6
|
-
|
|
7
|
-
export const DataActions = /* @__PURE__ */ defineComponent({
|
|
8
|
-
name: 'DataActions',
|
|
9
|
-
props: {
|
|
10
|
-
options: {
|
|
11
|
-
type: Array,
|
|
12
|
-
default: () => [],
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
setup(props) {
|
|
16
|
-
const ofRef = ref()
|
|
17
|
-
let isFirstResize = true
|
|
18
|
-
const onResize = () => {
|
|
19
|
-
if (isFirstResize) {
|
|
20
|
-
isFirstResize = false
|
|
21
|
-
} else {
|
|
22
|
-
ofRef.value?.sync({
|
|
23
|
-
showAllItemsBeforeCalculate: true,
|
|
24
|
-
})
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
const counter = ref()
|
|
28
|
-
const getCounter = () => {
|
|
29
|
-
return counter.value
|
|
30
|
-
}
|
|
31
|
-
const ellipsisFromIndexRef = ref(-1)
|
|
32
|
-
const onUpdateCount = (count) => {
|
|
33
|
-
ellipsisFromIndexRef.value = props.options.length - count
|
|
34
|
-
}
|
|
35
|
-
const onUpdateOverflow = (overflow) => {
|
|
36
|
-
if (!overflow) {
|
|
37
|
-
ellipsisFromIndexRef.value = -1
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
const updateCounter = () => {}
|
|
41
|
-
const moreOptions = computed(() => {
|
|
42
|
-
if (ellipsisFromIndexRef.value === -1) return []
|
|
43
|
-
return props.options.slice(ellipsisFromIndexRef.value).map((act) => {
|
|
44
|
-
return {
|
|
45
|
-
...act,
|
|
46
|
-
key: act.text,
|
|
47
|
-
}
|
|
48
|
-
})
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
const renderLabel = (act) => {
|
|
52
|
-
const color = act.color === 'danger'
|
|
53
|
-
? 'error'
|
|
54
|
-
: ['default', 'tertiary', 'primary', 'info', 'success', 'warning', 'error'].includes(act.color)
|
|
55
|
-
? act.color
|
|
56
|
-
: 'primary'
|
|
57
|
-
return (
|
|
58
|
-
<NButton type={color} text>
|
|
59
|
-
{act.text}
|
|
60
|
-
</NButton>
|
|
61
|
-
)
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
const onSelect = (key, act) => {
|
|
65
|
-
act.onClick?.()
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
return () => {
|
|
69
|
-
return (
|
|
70
|
-
<VResizeObserver onResize={onResize}>
|
|
71
|
-
<VOverflow
|
|
72
|
-
ref={ofRef}
|
|
73
|
-
getCounter={getCounter}
|
|
74
|
-
onUpdateCount={onUpdateCount}
|
|
75
|
-
onUpdateOverflow={onUpdateOverflow}
|
|
76
|
-
updateCounter={updateCounter}
|
|
77
|
-
style="width: 100%; display: flex; overflow: hidden; align-items: center; line-height: 1.25;"
|
|
78
|
-
>
|
|
79
|
-
{ {
|
|
80
|
-
default: () => props.options.map((act) => {
|
|
81
|
-
const color = act.color === 'danger'
|
|
82
|
-
? 'error'
|
|
83
|
-
: ['default', 'tertiary', 'primary', 'info', 'success', 'warning', 'error'].includes(act.color)
|
|
84
|
-
? act.color
|
|
85
|
-
: 'primary'
|
|
86
|
-
return (
|
|
87
|
-
<span>
|
|
88
|
-
<NButton quaternary type={color} size="small" onClick={act.onClick}>
|
|
89
|
-
{act.text}
|
|
90
|
-
</NButton>
|
|
91
|
-
</span>
|
|
92
|
-
)
|
|
93
|
-
}),
|
|
94
|
-
counter: () => (
|
|
95
|
-
<span ref={counter}>
|
|
96
|
-
<NDropdown options={moreOptions.value} renderLabel={renderLabel} onSelect={onSelect}>
|
|
97
|
-
<NButton quaternary size="small"><IMore style="font-size: 14px; color: #888" /></NButton>
|
|
98
|
-
</NDropdown>
|
|
99
|
-
</span>
|
|
100
|
-
),
|
|
101
|
-
}}
|
|
102
|
-
</VOverflow>
|
|
103
|
-
</VResizeObserver>
|
|
104
|
-
)
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
})
|