@ithinkdt/ui 4.0.0-601 → 4.0.0-800
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-CDuTve1u.js → components-DYFd5z-C.js} +690 -660
- package/dist/components.js +1 -4
- package/dist/directives-CBQhJ3zJ.js +237 -0
- package/dist/directives.js +1 -2
- package/dist/index.js +335 -336
- package/dist/page.js +363 -332
- package/dist/{use-style-D9hLG26i.js → use-style-BGq0HdRK.js} +2 -2
- package/dist/use-style.js +1 -1
- package/esm/components.d.ts +11 -5
- package/esm/design.d.ts +1 -1
- package/esm/directives.d.ts +6 -0
- package/esm/page.d.ts +8 -3
- package/locale.d.ts +1 -0
- package/package.json +10 -10
- package/dist/directives-8VsgmCuO.js +0 -203
- /package/dist/{use-i18n-Dx7V4KrY.js → use-i18n-D-AJ8KbA.js} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useMergedClsPrefix } from "ithinkdt-ui/es/_mixins/use-config";
|
|
2
2
|
import _useStyle from "ithinkdt-ui/es/_mixins/use-style";
|
|
3
3
|
import { c, cB, cE, cM } from "ithinkdt-ui/es/_utils/cssr/index";
|
|
4
|
-
function useStyle(
|
|
5
|
-
return
|
|
4
|
+
function useStyle(t, n, r, i) {
|
|
5
|
+
return r ??= useMergedClsPrefix(), _useStyle(t, n, r, i), r;
|
|
6
6
|
}
|
|
7
7
|
const fullWidth = { width: "100%" }, fullHeight = { height: "100%" }, fullWH = {
|
|
8
8
|
...fullWidth,
|
package/dist/use-style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as flex, c as flexDirCol, d as flexJustifySB, f as fullHeight, g as useStyle, h as useMergedClsPrefix, i as cM, l as flexGap, m as fullWidth, n as cB, o as flexAlignCenter, p as fullWH, r as cE, s as flexCenter, t as c, u as flexJustifyCenter } from "./use-style-
|
|
1
|
+
import { a as flex, c as flexDirCol, d as flexJustifySB, f as fullHeight, g as useStyle, h as useMergedClsPrefix, i as cM, l as flexGap, m as fullWidth, n as cB, o as flexAlignCenter, p as fullWH, r as cE, s as flexCenter, t as c, u as flexJustifyCenter } from "./use-style-BGq0HdRK.js";
|
|
2
2
|
export { c, cB, cE, cM, useStyle as default, flex, flexAlignCenter, flexCenter, flexDirCol, flexGap, flexJustifyCenter, flexJustifySB, fullHeight, fullWH, fullWidth, useMergedClsPrefix as useClsPrefix };
|
package/esm/components.d.ts
CHANGED
|
@@ -91,7 +91,7 @@ export type DataFormActionsProps = Pick<FlexProps, 'align' | 'justify' | 'vertic
|
|
|
91
91
|
successText?: VNodeChild | undefined
|
|
92
92
|
failureText?: VNodeChild | undefined
|
|
93
93
|
onSubmit?: MaybeArray<() => void> | undefined
|
|
94
|
-
|
|
94
|
+
onReset?: MaybeArray<() => void> | undefined
|
|
95
95
|
onCancel?: MaybeArray<() => void> | undefined
|
|
96
96
|
nativeButtonType?: boolean | undefined
|
|
97
97
|
}
|
|
@@ -115,7 +115,7 @@ export declare function DataFormActions(
|
|
|
115
115
|
): GenericReturn<DataFormActionsProps, DataFormActionsEmits, DataFormActionsSlots>
|
|
116
116
|
|
|
117
117
|
export type DataFormProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules' | 'onSubmit' | 'validateMessages'>
|
|
118
|
-
& Omit<DataFormActionsProps, 'onSubmit' | 'size' | 'gap' | 'justify' | 'direction' | '
|
|
118
|
+
& Omit<DataFormActionsProps, 'onSubmit' | 'size' | 'gap' | 'justify' | 'direction' | 'submitLoading'> & {
|
|
119
119
|
items: FormItem<Data>[]
|
|
120
120
|
model: Data
|
|
121
121
|
readonly?: boolean | undefined
|
|
@@ -168,7 +168,7 @@ export type DataFilterProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules
|
|
|
168
168
|
tooltipPlacement?: 'bottom' | 'icon' | undefined
|
|
169
169
|
customizable?: boolean | undefined
|
|
170
170
|
onFilter?: MaybeArray<(model: Data) => void> | undefined
|
|
171
|
-
|
|
171
|
+
onReset?: MaybeArray<() => void> | undefined
|
|
172
172
|
onCustom?: MaybeArray<
|
|
173
173
|
((reset: true) => void)
|
|
174
174
|
| ((sort: string[]) => void)
|
|
@@ -190,7 +190,7 @@ export type DataFilterEmits<Data extends {}> = {
|
|
|
190
190
|
key: string
|
|
191
191
|
hidden?: boolean
|
|
192
192
|
}): void
|
|
193
|
-
(e: '
|
|
193
|
+
(e: 'collapse', collapsed: boolean): void
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
export type DataFilterInst = {
|
|
@@ -211,9 +211,12 @@ export type DataTableProps<Data extends {}, KeyField extends keyof Data>
|
|
|
211
211
|
keyField?: KeyField | undefined
|
|
212
212
|
selectedKeys?: Data[KeyField][] | undefined
|
|
213
213
|
highlight?: boolean | Data[KeyField] | undefined
|
|
214
|
+
highlightColor?: string | undefined
|
|
215
|
+
appear?: 'normal' | 'sticky' | undefined
|
|
214
216
|
sorter?: SortParams<Data> | undefined
|
|
215
217
|
onSort?: MaybeArray<(param: SortParams<Data>) => void> | undefined
|
|
216
218
|
onSelect?: MaybeArray<(param: NonNullable<Data[KeyField]>[]) => void> | undefined
|
|
219
|
+
|
|
217
220
|
}
|
|
218
221
|
|
|
219
222
|
export type DataTableEmits<Data extends {}, KeyField extends keyof Data> = {
|
|
@@ -253,6 +256,7 @@ export type DataPaginationProps = (PageParams | { page: PageParams }) & {
|
|
|
253
256
|
simple?: boolean | undefined
|
|
254
257
|
total: number
|
|
255
258
|
pageSizes?: number[] | undefined
|
|
259
|
+
resetPageOnSizeChange?: boolean | undefined
|
|
256
260
|
onChange?: MaybeArray<(value: PageParams) => void> | undefined
|
|
257
261
|
}
|
|
258
262
|
|
|
@@ -294,7 +298,7 @@ export type DataCustomProps<Data extends {}> = {
|
|
|
294
298
|
keyField?: keyof Data | undefined
|
|
295
299
|
showFixed?: boolean | undefined
|
|
296
300
|
disabledField?: keyof Data | undefined
|
|
297
|
-
|
|
301
|
+
visibleField?: keyof Data | undefined
|
|
298
302
|
labelTitle?: VNodeChild | undefined
|
|
299
303
|
size?: number | undefined
|
|
300
304
|
type?: 'primary' | 'default' | undefined
|
|
@@ -455,6 +459,7 @@ interface UserDeptProps<Multiple extends boolean> {
|
|
|
455
459
|
'modelValue'?: Multiple extends true ? (string[] | null | undefined) : (string | null | undefined)
|
|
456
460
|
'onUpdate:modelValue'?: MaybeArray<(value: Multiple extends true ? string[] : string) => void> | undefined
|
|
457
461
|
'onUpdateModelValue'?: MaybeArray<(value: Multiple extends true ? string[] : string) => void> | undefined
|
|
462
|
+
'renderUserInfo'?: (user: { username: string, nickname: string }) => VNodeChild | undefined
|
|
458
463
|
}
|
|
459
464
|
|
|
460
465
|
interface UserDeptEmits<Multiple extends boolean> {
|
|
@@ -476,6 +481,7 @@ interface UserRenderProps {
|
|
|
476
481
|
size?: number | undefined
|
|
477
482
|
placement?: PopoverProps['placement']
|
|
478
483
|
getUsersByUsername?: ((usernames: string[]) => Promise<{ username: string, nickname: string }[]>) | undefined
|
|
484
|
+
renderInfo?: (user: { username: string, nickname: string }) => VNodeChild
|
|
479
485
|
}
|
|
480
486
|
|
|
481
487
|
interface UserRenderEmits {
|
package/esm/design.d.ts
CHANGED
package/esm/directives.d.ts
CHANGED
|
@@ -21,12 +21,18 @@ export declare const TooltipDirectiveProvider: (props: { delay?: number }) => VN
|
|
|
21
21
|
*
|
|
22
22
|
* 支持的修饰符
|
|
23
23
|
* - 'auto' 当内容溢出来容器时自动展示,否则隐藏
|
|
24
|
+
* - 'expandable' 当内容溢出来容器时支持展开
|
|
25
|
+
* - `ell${number}` 多行省略
|
|
24
26
|
* - 'left-end'、'left'、'left-start'、'top-start'、'top'、'top-end'、'right-start'、'right'、'right-end'、'bottom-end'、'bottom'、'bottom-start' 弹出内容的位置
|
|
25
27
|
*/
|
|
26
28
|
export declare const vTooltip: Directive<
|
|
27
29
|
HTMLElement,
|
|
28
30
|
VNodeChild,
|
|
29
31
|
| 'auto'
|
|
32
|
+
| 'expandable'
|
|
33
|
+
| 'ell2'
|
|
34
|
+
| 'ell3'
|
|
35
|
+
| 'ell5'
|
|
30
36
|
| 'left-end'
|
|
31
37
|
| 'left'
|
|
32
38
|
| 'left-start'
|
package/esm/page.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ import { PublicProps } from '@ithinkdt/common'
|
|
|
10
10
|
import { DictItem, DictTypeKey } from '@ithinkdt/common/dict'
|
|
11
11
|
import { PageOptions } from '@ithinkdt/page'
|
|
12
12
|
|
|
13
|
-
import { CheckboxesProps, RadiosProps, UserDeptProps, UserGroupOption } from './components'
|
|
13
|
+
import { CheckboxesProps, RadiosProps, UserDeptProps, UserGroupOption, UserRenderProps } from './components'
|
|
14
14
|
|
|
15
15
|
type ShallowMaybeRef<T extends {}> = {
|
|
16
16
|
[Key in (keyof T)]: MaybeRef<T[Key]>
|
|
@@ -78,6 +78,7 @@ declare module '@ithinkdt/page' {
|
|
|
78
78
|
multiple?: boolean | undefined
|
|
79
79
|
max?: number | undefined
|
|
80
80
|
accept?: string | undefined
|
|
81
|
+
/** 最大文件大小(单位:KB) */
|
|
81
82
|
maxSize?: number | undefined
|
|
82
83
|
onBeforeUpload?: UploadProps['onBeforeUpload']
|
|
83
84
|
} & PublicProps>
|
|
@@ -91,8 +92,10 @@ declare module '@ithinkdt/page' {
|
|
|
91
92
|
multiple?: boolean | undefined
|
|
92
93
|
max?: number | undefined
|
|
93
94
|
accept?: string | undefined
|
|
95
|
+
/** 最大文件大小(单位:KB) */
|
|
94
96
|
maxSize?: number | undefined
|
|
95
97
|
onBeforeUpload?: UploadProps['onBeforeUpload']
|
|
98
|
+
defaultUpload?: boolean | undefined
|
|
96
99
|
} & PublicProps>
|
|
97
100
|
uploadSlots?: {
|
|
98
101
|
default?: (() => VNode[]) | undefined
|
|
@@ -101,7 +104,9 @@ declare module '@ithinkdt/page' {
|
|
|
101
104
|
|
|
102
105
|
user: {
|
|
103
106
|
userProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
|
|
104
|
-
| 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'
|
|
107
|
+
| 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept' | 'renderUserInfo'> & {
|
|
108
|
+
renderInfo: UserRenderProps['renderInfo']
|
|
109
|
+
}> & PublicProps
|
|
105
110
|
userSlots?: {}
|
|
106
111
|
}
|
|
107
112
|
}
|
|
@@ -154,7 +159,7 @@ declare module '@ithinkdt/page' {
|
|
|
154
159
|
fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined }>
|
|
155
160
|
}
|
|
156
161
|
user: {
|
|
157
|
-
fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined }>
|
|
162
|
+
fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined, renderInfo?: UserRenderProps['renderInfo'] }>
|
|
158
163
|
}
|
|
159
164
|
dept: {
|
|
160
165
|
fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined }>
|
package/locale.d.ts
CHANGED
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-800",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "iThinkDT UI",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"sortablejs": "^1.15.6",
|
|
65
65
|
"@types/sortablejs": "^1.15.9",
|
|
66
66
|
"nanoid": "^5.1.6",
|
|
67
|
-
"@ithinkdt/common": "^4.0.0-
|
|
67
|
+
"@ithinkdt/common": "^4.0.0-800"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"@ithinkdt/page": ">=4.0",
|
|
@@ -82,18 +82,18 @@
|
|
|
82
82
|
}
|
|
83
83
|
},
|
|
84
84
|
"devDependencies": {
|
|
85
|
-
"@vitejs/plugin-vue-jsx": "^5.1.
|
|
86
|
-
"ithinkdt-ui": "^1.8.
|
|
85
|
+
"@vitejs/plugin-vue-jsx": "^5.1.3",
|
|
86
|
+
"ithinkdt-ui": "^1.8.2",
|
|
87
87
|
"typescript": "~5.9.3",
|
|
88
|
-
"unocss": ">=66.
|
|
89
|
-
"vite": "
|
|
90
|
-
"vue": "^3.5.
|
|
91
|
-
"vue-router": "^
|
|
92
|
-
"@ithinkdt/page": "^4.0.0-
|
|
88
|
+
"unocss": ">=66.6.0",
|
|
89
|
+
"vite": "^8.0.0-beta.8",
|
|
90
|
+
"vue": "^3.5.27",
|
|
91
|
+
"vue-router": "^5.0.0-beta.0",
|
|
92
|
+
"@ithinkdt/page": "^4.0.0-800"
|
|
93
93
|
},
|
|
94
94
|
"scripts": {
|
|
95
95
|
"dev": "vite build --watch",
|
|
96
96
|
"build": "vite build",
|
|
97
|
-
"release": "pnpm run build && pnpm publish --no-git-checks
|
|
97
|
+
"release": "pnpm run build && pnpm publish --no-git-checks"
|
|
98
98
|
}
|
|
99
99
|
}
|
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
import { g as useStyle, i as cM, n as cB, r as cE, t as c } from "./use-style-D9hLG26i.js";
|
|
2
|
-
import { Fragment, createVNode, defineComponent, h, nextTick, reactive, ref, shallowRef, toRef, watch } from "vue";
|
|
3
|
-
import { promiseTimeout, useEventListener } from "@vueuse/core";
|
|
4
|
-
import { NTooltip } from "ithinkdt-ui";
|
|
5
|
-
import { nanoid } from "nanoid";
|
|
6
|
-
import { debounce, throttle } from "@ithinkdt/common/fn";
|
|
7
|
-
import { useElementIntersectionRect } from "@ithinkdt/common/composables";
|
|
8
|
-
import { string2dom } from "@ithinkdt/common/dom";
|
|
9
|
-
var style$1 = /* @__PURE__ */ c([c(({ props: m }) => `:where(span${m.bPrefix}tooltip-host)`, { display: "inline-block" }), c(({ props: m }) => `:where(${m.bPrefix}tooltip-host)`, {
|
|
10
|
-
maxWidth: "100%",
|
|
11
|
-
whiteSpace: "nowrap",
|
|
12
|
-
overflow: "hidden",
|
|
13
|
-
textOverflow: "ellipsis"
|
|
14
|
-
})]), Tooltip = /* @__PURE__ */ Symbol("tooltip-dir"), current = /* @__PURE__ */ shallowRef();
|
|
15
|
-
function detactOverflow(m) {
|
|
16
|
-
let F = m.firstChild;
|
|
17
|
-
if (!F) return !1;
|
|
18
|
-
let I = F instanceof Text ? {
|
|
19
|
-
width: m.scrollWidth,
|
|
20
|
-
height: m.scrollHeight
|
|
21
|
-
} : F.getBoundingClientRect?.() ?? {
|
|
22
|
-
width: F.clientWidth,
|
|
23
|
-
height: F.clientHeight
|
|
24
|
-
};
|
|
25
|
-
return I.width > m.clientWidth + 1 || I.height > m.clientHeight + 2;
|
|
26
|
-
}
|
|
27
|
-
var _update, _current, clsPrefix$1;
|
|
28
|
-
const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
|
|
29
|
-
name: "TooltipDirectiveProvider",
|
|
30
|
-
props: { delay: {
|
|
31
|
-
type: Number,
|
|
32
|
-
default: 180
|
|
33
|
-
} },
|
|
34
|
-
setup(F) {
|
|
35
|
-
clsPrefix$1 = useStyle("-tooltip-directive", style$1);
|
|
36
|
-
let I = shallowRef(), L = reactive({
|
|
37
|
-
show: !1,
|
|
38
|
-
tip: void 0,
|
|
39
|
-
placement: "top",
|
|
40
|
-
x: 0,
|
|
41
|
-
y: 0
|
|
42
|
-
});
|
|
43
|
-
_update = async () => {
|
|
44
|
-
if (!current.value) return;
|
|
45
|
-
F.delay > 0 && await promiseTimeout(F.delay);
|
|
46
|
-
let m = current.value, R = m?.[Tooltip];
|
|
47
|
-
if (!R) return;
|
|
48
|
-
let z = R.tip;
|
|
49
|
-
if (I.value = typeof z == "function" ? z : () => z || m.attributes.getNamedItem("title") || m.textContent, !R.binding.modifiers || detactOverflow(m)) {
|
|
50
|
-
L.show = !0;
|
|
51
|
-
let F = m.getBoundingClientRect();
|
|
52
|
-
switch (L.placement = Object.keys(R.binding.modifiers).find((m) => [
|
|
53
|
-
"top",
|
|
54
|
-
"right",
|
|
55
|
-
"left",
|
|
56
|
-
"bottom"
|
|
57
|
-
].find((F) => m.startsWith(F))) ?? "top", L.placement.split("-")[0]) {
|
|
58
|
-
case "top":
|
|
59
|
-
L.x = F.left + F.width / 2, L.y = F.top;
|
|
60
|
-
break;
|
|
61
|
-
case "right":
|
|
62
|
-
L.x = F.left + F.width, L.y = F.top + F.height / 2;
|
|
63
|
-
break;
|
|
64
|
-
case "left":
|
|
65
|
-
L.x = F.left, L.y = F.top + F.height / 2;
|
|
66
|
-
break;
|
|
67
|
-
case "bottom":
|
|
68
|
-
L.x = F.left + F.width / 2, L.y = F.bottom;
|
|
69
|
-
break;
|
|
70
|
-
}
|
|
71
|
-
} else L.show &&= !1;
|
|
72
|
-
};
|
|
73
|
-
let R = `ithinkdt-tooltip-${nanoid()}`, z = throttle((m) => {
|
|
74
|
-
!_current || _current.contains(m) || m.closest(`.${R}`) || (L.show = !1, current.value = void 0);
|
|
75
|
-
}, 100, { leading: !1 });
|
|
76
|
-
return useEventListener("mouseover", (m) => {
|
|
77
|
-
_current = current.value, z(m.target);
|
|
78
|
-
}, { capture: !0 }), () => createVNode(NTooltip, {
|
|
79
|
-
trigger: "manual",
|
|
80
|
-
show: !!current.value && L.show,
|
|
81
|
-
x: L.x,
|
|
82
|
-
y: L.y,
|
|
83
|
-
placement: L.placement
|
|
84
|
-
}, { default: () => [createVNode("div", { class: R }, [I.value?.()])] });
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
var _listener = (m) => {
|
|
88
|
-
_current = void 0, current.value = m.target, _update?.();
|
|
89
|
-
};
|
|
90
|
-
const vTooltip = {
|
|
91
|
-
mounted(m, F) {
|
|
92
|
-
m[Tooltip] = {
|
|
93
|
-
binding: F,
|
|
94
|
-
tip: F.value
|
|
95
|
-
}, m.addEventListener("mouseenter", _listener), F.modifiers.auto && m.classList.add(`${clsPrefix$1.value}-tooltip-host`);
|
|
96
|
-
},
|
|
97
|
-
updated(m, F) {
|
|
98
|
-
m[Tooltip].binding = F, m[Tooltip].tip = F.value, m.classList.toggle(`${clsPrefix$1.value}-tooltip-host`, F.modifiers.auto), _update();
|
|
99
|
-
},
|
|
100
|
-
beforeUnmount(m) {
|
|
101
|
-
m[Tooltip] && m.removeEventListener("mouseenter", _listener), m.classList.remove(`${clsPrefix$1.value}-tooltip-host`), current.value === m && (current.value = void 0), delete m[Tooltip];
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
var clsPrefix, isDark, style = /* @__PURE__ */ c([c(({ props: m }) => `:where(${m.bPrefix}spin-host)`, { position: "relative" }), cB("spin-directive", {
|
|
105
|
-
zIndex: "999999",
|
|
106
|
-
position: "absolute",
|
|
107
|
-
color: "var(--color-primary)",
|
|
108
|
-
display: "flex",
|
|
109
|
-
flexDirection: "column",
|
|
110
|
-
justifyContent: "center",
|
|
111
|
-
alignItems: "center",
|
|
112
|
-
gap: "4px",
|
|
113
|
-
willChange: "background-color",
|
|
114
|
-
backgroundColor: "rgb(var(--host-bg, 255 255 255) / 0)",
|
|
115
|
-
transition: "background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
116
|
-
}, [
|
|
117
|
-
cE("tip, icon", {
|
|
118
|
-
willChange: "opacity",
|
|
119
|
-
opacity: "0",
|
|
120
|
-
transition: "opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
121
|
-
}),
|
|
122
|
-
cE("tip:empty", { display: "none" }),
|
|
123
|
-
cM("spining", { backgroundColor: "rgb(var(--host-bg, 255 255 255) / 0.5)" }, [cE("tip, icon", { opacity: "1" })])
|
|
124
|
-
])]);
|
|
125
|
-
const SpinDirectiveProvider = /* @__PURE__ */ defineComponent({
|
|
126
|
-
name: "SpinDirectiveProvider",
|
|
127
|
-
props: { dark: Boolean },
|
|
128
|
-
setup(F) {
|
|
129
|
-
return clsPrefix = useStyle("-spin-directive", style), isDark = toRef(F, "dark"), () => h(Fragment);
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
var Spin = /* @__PURE__ */ Symbol("spin-dir"), updateLoading = (m, { value: F, modifiers: I }) => {
|
|
133
|
-
if (m[Spin].loading.value = !!F, !m[Spin].loading.value) return;
|
|
134
|
-
let L = I.dark || !I.light && isDark.value;
|
|
135
|
-
m[Spin].spinEl.style.setProperty("--host-bg", L ? "0 0 0" : "255 255 255");
|
|
136
|
-
};
|
|
137
|
-
const vSpin = {
|
|
138
|
-
beforeMount(m) {
|
|
139
|
-
if (m.classList.add(`${clsPrefix.value}-spin-host`), m[Spin]) return;
|
|
140
|
-
let F = ref(!1), I = string2dom(`
|
|
141
|
-
<div class="${clsPrefix.value}-spin-directive">
|
|
142
|
-
<svg class="${clsPrefix.value}-spin-directive__icon" width="32" height="32" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
143
|
-
<g>
|
|
144
|
-
<animateTransform attributeName="transform" type="rotate" values="0 100 100;270 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
|
|
145
|
-
<circle fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" cx="100" cy="100" r="92" stroke-dasharray="567" stroke-dashoffset="1848">
|
|
146
|
-
<animateTransform attributeName="transform" type="rotate" values="0 100 100;135 100 100;450 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
|
|
147
|
-
<animate attributeName="stroke-dashoffset" values="567;142;567" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animate>
|
|
148
|
-
</circle>
|
|
149
|
-
</g>
|
|
150
|
-
</svg>
|
|
151
|
-
<div class="${clsPrefix.value}-spin-directive__tip"></div>
|
|
152
|
-
</div>
|
|
153
|
-
`.trim()), L, { stop: R, update: z } = useElementIntersectionRect(m, (m) => {
|
|
154
|
-
L = m, Object.assign(I.style, {
|
|
155
|
-
left: 0,
|
|
156
|
-
top: 0,
|
|
157
|
-
width: L.width + "px",
|
|
158
|
-
height: L.height + "px"
|
|
159
|
-
});
|
|
160
|
-
}, { interval: 1e3 / 30 }), B, V = watch(F, debounce(() => {
|
|
161
|
-
if (F.value) B === void 0 && (clearTimeout(B), B = void 0), z(), m.append(I), requestAnimationFrame(() => {
|
|
162
|
-
F.value && I.classList.add(`${clsPrefix.value}-spin-directive--spining`);
|
|
163
|
-
});
|
|
164
|
-
else {
|
|
165
|
-
I.classList.remove(`${clsPrefix.value}-spin-directive--spining`);
|
|
166
|
-
let m = () => {
|
|
167
|
-
I.remove(), F && clearTimeout(F), F = null, I.removeEventListener("transitioncancel", m), I.removeEventListener("transitionend", m);
|
|
168
|
-
};
|
|
169
|
-
I.addEventListener("transitioncancel", m), I.addEventListener("transitionend", m);
|
|
170
|
-
let F = setTimeout(m, 300);
|
|
171
|
-
}
|
|
172
|
-
}, 30));
|
|
173
|
-
m[Spin] = {
|
|
174
|
-
loading: F,
|
|
175
|
-
spinEl: I,
|
|
176
|
-
updateTip: () => {
|
|
177
|
-
let F = I.querySelector(`.${clsPrefix.value}-spin-directive__tip`);
|
|
178
|
-
F.textContent = m.dataset.spinTip;
|
|
179
|
-
},
|
|
180
|
-
stop: () => {
|
|
181
|
-
R(), V();
|
|
182
|
-
}
|
|
183
|
-
};
|
|
184
|
-
},
|
|
185
|
-
mounted(m, F) {
|
|
186
|
-
updateLoading(m, F), m[Spin].updateTip(), !m[Spin].observer && nextTick().then(() => {
|
|
187
|
-
(m[Spin].observer = new MutationObserver((F) => {
|
|
188
|
-
for (let I of F) if (I.type === "attributes" && I.attributeName === "data-spin-tip") {
|
|
189
|
-
m[Spin].updateTip();
|
|
190
|
-
return;
|
|
191
|
-
}
|
|
192
|
-
})).observe(m, {
|
|
193
|
-
attributes: !0,
|
|
194
|
-
attributeFilter: ["data-spin-tip"]
|
|
195
|
-
});
|
|
196
|
-
});
|
|
197
|
-
},
|
|
198
|
-
updated: updateLoading,
|
|
199
|
-
beforeUnmount(m) {
|
|
200
|
-
m[Spin].loading.value = !1, m[Spin].stop(), m[Spin].observer?.disconnect(), delete m[Spin];
|
|
201
|
-
}
|
|
202
|
-
};
|
|
203
|
-
export { vTooltip as i, vSpin as n, TooltipDirectiveProvider as r, SpinDirectiveProvider as t };
|
|
File without changes
|