@ithinkdt/ui 4.0.0 → 4.0.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.
@@ -0,0 +1,6 @@
1
+ import { inject as e } from "vue";
2
+ const t = "__UI_I18N__";
3
+ function n() {
4
+ return e(t).value();
5
+ }
6
+ export { n, t };
package/dist/use-style.js CHANGED
@@ -1,2 +1,29 @@
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
- export { c, cB, cE, cM, useStyle as default, flex, flexAlignCenter, flexCenter, flexDirCol, flexGap, flexJustifyCenter, flexJustifySB, fullHeight, fullWH, fullWidth, useMergedClsPrefix as useClsPrefix };
1
+ import { useMergedClsPrefix as e } from "ithinkdt-ui/es/_mixins/use-config";
2
+ import t from "ithinkdt-ui/es/_mixins/use-style";
3
+ import { c as n, cB as r, cE as i, cM as a } from "ithinkdt-ui/es/_utils/cssr/index";
4
+ function o(n, r, i, a) {
5
+ return i ??= e(), t(n, r, i, a), i;
6
+ }
7
+ const s = { width: "100%" }, c = { height: "100%" }, l = {
8
+ ...s,
9
+ ...c
10
+ }, u = { display: "flex" }, d = {
11
+ ...u,
12
+ flexDirection: "column"
13
+ }, f = {
14
+ ...u,
15
+ alignItems: "center"
16
+ }, p = {
17
+ ...u,
18
+ justifyContent: "center"
19
+ }, m = {
20
+ ...u,
21
+ justifyContent: "space-between"
22
+ }, h = {
23
+ ...f,
24
+ ...p
25
+ }, g = (e) => ({
26
+ ...u,
27
+ gap: e
28
+ });
29
+ export { n as c, r as cB, i as cE, a as cM, o as default, u as flex, f as flexAlignCenter, h as flexCenter, d as flexDirCol, g as flexGap, p as flexJustifyCenter, m as flexJustifySB, c as fullHeight, l as fullWH, s as fullWidth, e as useClsPrefix };
package/esm/design.d.ts CHANGED
@@ -96,9 +96,9 @@ interface ModuleOptionBase {
96
96
  export interface ModuleOptionGroup extends ModuleOptionBase {
97
97
  type: 'group'
98
98
  /** 图标 */
99
- icon?: string
99
+ icon?: string | Component | undefined
100
100
  /** 子模块 */
101
- children?: (ModuleOptionGroup | ModuleOptionView)[]
101
+ children?: (ModuleOptionGroup | ModuleOptionView)[] | undefined
102
102
  }
103
103
  /** 应用视图模块 */
104
104
  export interface ModuleOptionView extends ModuleOptionBase {
@@ -106,7 +106,7 @@ export interface ModuleOptionView extends ModuleOptionBase {
106
106
  /** 路径 */
107
107
  path: string
108
108
  /** 图标 */
109
- icon?: string
109
+ icon?: string | Component | undefined
110
110
  }
111
111
 
112
112
  export type ModuleOption = ModuleOptionGroup | ModuleOptionView
@@ -116,7 +116,7 @@ export declare const AppMenu: (
116
116
  menus?: ModuleOption[] | undefined
117
117
  collapsed?: boolean | undefined
118
118
  accordion?: boolean | undefined
119
- getIcon?: ((key: string | undefined) => FunctionalComponent) | undefined
119
+ getIcon?: ((key: string | undefined, menu: ModuleOption) => FunctionalComponent) | undefined
120
120
  horizontal?: boolean | undefined
121
121
  single?: boolean | undefined
122
122
  width?: number | undefined
package/esm/page.d.ts CHANGED
@@ -119,6 +119,8 @@ declare module '@ithinkdt/page' {
119
119
  formatText?: ((value: string) => VNodeChild) | undefined
120
120
  copyable?: boolean | undefined
121
121
  onCopy?: (value: string) => void | undefined
122
+ drawerWidth?: MaybeRef<number | string | undefined>
123
+ drawerFooter?: (value: string, record: unknown) => VNodeChild
122
124
  }
123
125
  }
124
126
  number: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ithinkdt/ui",
3
- "version": "4.0.0",
3
+ "version": "4.0.2",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "description": "iThinkDT UI",
@@ -58,13 +58,13 @@
58
58
  },
59
59
  "sideEffects": false,
60
60
  "dependencies": {
61
- "@vueuse/core": "^14.2.0",
61
+ "@vueuse/core": "^14.2.1",
62
62
  "date-fns": "^4.1.0",
63
63
  "vueuc": "^0.4.65",
64
- "sortablejs": "^1.15.6",
64
+ "sortablejs": "^1.15.7",
65
65
  "@types/sortablejs": "^1.15.9",
66
66
  "nanoid": "^5.1.6",
67
- "@ithinkdt/common": "^4.0.0"
67
+ "@ithinkdt/common": "^4.0.2"
68
68
  },
69
69
  "peerDependencies": {
70
70
  "@ithinkdt/page": ">=4.0",
@@ -83,13 +83,13 @@
83
83
  },
84
84
  "devDependencies": {
85
85
  "@vitejs/plugin-vue-jsx": "^5.1.4",
86
- "ithinkdt-ui": "^1.8.3",
86
+ "ithinkdt-ui": "^1.8.5",
87
87
  "typescript": "~5.9.3",
88
88
  "unocss": ">=66.6.0",
89
- "vite": "^8.0.0-beta.11",
90
- "vue": "^3.5.27",
91
- "vue-router": "^5.0.2",
92
- "@ithinkdt/page": "^4.0.0"
89
+ "vite": "^8.0.0-beta.15",
90
+ "vue": "^3.5.29",
91
+ "vue-router": "^5.0.3",
92
+ "@ithinkdt/page": "^4.0.3"
93
93
  },
94
94
  "scripts": {
95
95
  "dev": "vite build --watch",
@@ -1,240 +0,0 @@
1
- import { g as useStyle, i as cM, n as cB, r as cE, t as c } from "./use-style-BGq0HdRK.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 SUPPORT_LINE_CLAMP = [
10
- 2,
11
- 3,
12
- 5
13
- ], style$1 = /* @__PURE__ */ c([
14
- c(({ props: e }) => `:where(span${e.bPrefix}tooltip-host)`, { display: "inline-block" }),
15
- c(({ props: e }) => `:where(${e.bPrefix}tooltip-host)`, {
16
- maxWidth: "100%",
17
- whiteSpace: "nowrap",
18
- overflow: "hidden",
19
- textOverflow: "ellipsis"
20
- }),
21
- ...SUPPORT_LINE_CLAMP.map((e) => c(({ props: t }) => `:where(${t.bPrefix}tooltip-ell${e}:not(${t.bPrefix}tooltip-expanded))`, {
22
- display: "-webkit-box",
23
- WebkitLineClamp: e,
24
- WebkitBoxOrient: "vertical",
25
- whiteSpace: "normal"
26
- })),
27
- c(({ props: e }) => `:where(${e.bPrefix}tooltip-expandable)`, { cursor: "pointer" }),
28
- c(({ props: e }) => `:where(${e.bPrefix}tooltip-expanded)`, {
29
- cursor: "pointer",
30
- whiteSpace: "normal",
31
- lineHeight: "1.25"
32
- })
33
- ]), Tooltip = /* @__PURE__ */ Symbol("tooltip-dir"), current = /* @__PURE__ */ shallowRef();
34
- function detectOverflow(e) {
35
- let t = e.firstChild;
36
- if (!t) return !1;
37
- let n = t instanceof Text ? {
38
- width: e.scrollWidth,
39
- height: e.scrollHeight
40
- } : t.getBoundingClientRect?.() ?? {
41
- width: t.clientWidth,
42
- height: t.clientHeight
43
- };
44
- return n.width >= e.clientWidth + 1 || n.height >= e.clientHeight + 2;
45
- }
46
- var _update, _current, clsPrefix$1;
47
- const TooltipDirectiveProvider = /* @__PURE__ */ defineComponent({
48
- name: "TooltipDirectiveProvider",
49
- props: { delay: {
50
- type: Number,
51
- default: 180
52
- } },
53
- setup(t) {
54
- clsPrefix$1 = useStyle("-tooltip-directive", style$1);
55
- let n = shallowRef(), r = reactive({
56
- show: !1,
57
- tip: void 0,
58
- placement: "top",
59
- x: 0,
60
- y: 0
61
- });
62
- _update = async () => {
63
- if (!current.value) return;
64
- t.delay > 0 && await promiseTimeout(t.delay);
65
- let e = current.value;
66
- if (e?.classList.contains(`${clsPrefix$1.value}-tooltip-expanded`)) {
67
- r.show = !1;
68
- return;
69
- }
70
- let i = e?.[Tooltip];
71
- if (!i) return;
72
- i.binding.modifiers.expandable && e.classList.remove(`${clsPrefix$1.value}-tooltip-expandable`);
73
- let a = i.tip;
74
- if (n.value = typeof a == "function" ? a : () => a || e.attributes.getNamedItem("title") || e.textContent, !i.binding.modifiers?.auto || detectOverflow(e)) {
75
- r.show = !0, i.binding.modifiers.expandable && e.classList.add(`${clsPrefix$1.value}-tooltip-expandable`);
76
- let t = e.getBoundingClientRect();
77
- switch (r.placement = Object.keys(i.binding.modifiers).find((e) => [
78
- "top",
79
- "right",
80
- "left",
81
- "bottom"
82
- ].find((t) => e.startsWith(t))) ?? "top", r.placement.split("-")[0]) {
83
- case "top":
84
- r.x = t.left + t.width / 2, r.y = t.top;
85
- break;
86
- case "right":
87
- r.x = t.left + t.width, r.y = t.top + t.height / 2;
88
- break;
89
- case "left":
90
- r.x = t.left, r.y = t.top + t.height / 2;
91
- break;
92
- case "bottom":
93
- r.x = t.left + t.width / 2, r.y = t.bottom;
94
- break;
95
- }
96
- } else r.show &&= !1;
97
- };
98
- let i = `ithinkdt-tooltip-${nanoid()}`, a = throttle((e) => {
99
- !_current || _current.contains(e) || e.closest(`.${i}`) || (r.show = !1, current.value = void 0);
100
- }, 100, { leading: !1 });
101
- return useEventListener("mouseover", (e) => {
102
- _current = current.value, a(e.target);
103
- }, { capture: !0 }), () => createVNode(NTooltip, {
104
- trigger: "manual",
105
- show: !!current.value && r.show,
106
- scrollable: !0,
107
- flip: !1,
108
- x: r.x,
109
- y: r.y,
110
- placement: r.placement,
111
- style: "max-width: 61.8vw; max-height: 61.8vh"
112
- }, { default: () => [createVNode("div", { class: i }, [n.value?.()])] });
113
- }
114
- });
115
- var _mouseenter = (e) => {
116
- _current = void 0, current.value = e.target, _update?.();
117
- }, _click = (e) => {
118
- e.target.classList.contains(`${clsPrefix$1.value}-tooltip-expandable`) ? (e.target.classList.remove(`${clsPrefix$1.value}-tooltip-expandable`), e.target.classList.add(`${clsPrefix$1.value}-tooltip-expanded`), _update()) : e.target.classList.contains(`${clsPrefix$1.value}-tooltip-expanded`) && (e.target.classList.remove(`${clsPrefix$1.value}-tooltip-expanded`), e.target.classList.add(`${clsPrefix$1.value}-tooltip-expandable`), _update());
119
- };
120
- const vTooltip = {
121
- mounted(e, t) {
122
- e[Tooltip] = {
123
- binding: t,
124
- tip: t.value
125
- }, e.addEventListener("mouseenter", _mouseenter), t.modifiers.auto && e.classList.add(`${clsPrefix$1.value}-tooltip-host`), t.modifiers.expandable && (e.bindClick = !0, e.addEventListener("click", _click));
126
- for (let n of SUPPORT_LINE_CLAMP) t.modifiers[`ell${n}`] && e.classList.add(`${clsPrefix$1.value}-tooltip-ell${n}`);
127
- },
128
- updated(e, t) {
129
- if (e[Tooltip]) {
130
- e[Tooltip].binding = t, e[Tooltip].tip = t.value, e.classList.toggle(`${clsPrefix$1.value}-tooltip-host`, t.modifiers.auto || !1);
131
- for (let n of SUPPORT_LINE_CLAMP) e.classList.toggle(`${clsPrefix$1.value}-tooltip-ell${n}`, t.modifiers[`ell${n}`] || !1);
132
- t.modifiers.expandable && !e.bindClick ? (e.bindClick = !0, e.addEventListener("click", _click)) : e.bindClick && (e.bindClick = !1, e.removeEventListener("click", _click)), current.value === e && _update();
133
- }
134
- },
135
- beforeUnmount(e) {
136
- current.value === e && (current.value = void 0), e[Tooltip] && (e.removeEventListener("mouseenter", _mouseenter), e.bindClick = !1, e.removeEventListener("click", _click), e.classList.remove(`${clsPrefix$1.value}-tooltip-host`, `${clsPrefix$1.value}-tooltip-expandable`, `${clsPrefix$1.value}-tooltip-expanded`, ...SUPPORT_LINE_CLAMP.map((e) => `${clsPrefix$1.value}-tooltip-ell${e}`)), delete e[Tooltip]);
137
- }
138
- };
139
- var clsPrefix, isDark, style = /* @__PURE__ */ c([c(({ props: e }) => `:where(${e.bPrefix}spin-host)`, { position: "relative" }), cB("spin-directive", {
140
- zIndex: "999999",
141
- position: "absolute",
142
- color: "var(--color-primary)",
143
- display: "flex",
144
- flexDirection: "column",
145
- justifyContent: "center",
146
- alignItems: "center",
147
- gap: "4px",
148
- willChange: "background-color",
149
- backgroundColor: "rgb(var(--host-bg, 255 255 255) / 0)",
150
- transition: "background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
151
- }, [
152
- cE("tip, icon", {
153
- willChange: "opacity",
154
- opacity: "0",
155
- transition: "opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
156
- }),
157
- cE("tip:empty", { display: "none" }),
158
- cM("spining", { backgroundColor: "rgb(var(--host-bg, 255 255 255) / 0.5)" }, [cE("tip, icon", { opacity: "1" })])
159
- ])]);
160
- const SpinDirectiveProvider = /* @__PURE__ */ defineComponent({
161
- name: "SpinDirectiveProvider",
162
- props: { dark: Boolean },
163
- setup(t) {
164
- return clsPrefix = useStyle("-spin-directive", style), isDark = toRef(t, "dark"), () => h(Fragment);
165
- }
166
- });
167
- var Spin = /* @__PURE__ */ Symbol("spin-dir"), updateLoading = (e, { value: t, modifiers: n }) => {
168
- if (e[Spin].loading.value = !!t, !e[Spin].loading.value) return;
169
- let r = n.dark || !n.light && isDark.value;
170
- e[Spin].spinEl.style.setProperty("--host-bg", r ? "0 0 0" : "255 255 255");
171
- };
172
- const vSpin = {
173
- beforeMount(e) {
174
- if (e.classList.add(`${clsPrefix.value}-spin-host`), e[Spin]) return;
175
- let t = ref(!1), n = string2dom(`
176
- <div class="${clsPrefix.value}-spin-directive">
177
- <svg class="${clsPrefix.value}-spin-directive__icon" width="32" height="32" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
178
- <g>
179
- <animateTransform attributeName="transform" type="rotate" values="0 100 100;270 100 100" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animateTransform>
180
- <circle fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" cx="100" cy="100" r="92" stroke-dasharray="567" stroke-dashoffset="1848">
181
- <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>
182
- <animate attributeName="stroke-dashoffset" values="567;142;567" begin="0s" dur="1.6s" fill="freeze" repeatCount="indefinite"></animate>
183
- </circle>
184
- </g>
185
- </svg>
186
- <div class="${clsPrefix.value}-spin-directive__tip"></div>
187
- </div>
188
- `.trim()), r, { stop: i, update: a } = useElementIntersectionRect(e, (e) => {
189
- r = e, Object.assign(n.style, {
190
- left: 0,
191
- top: 0,
192
- width: r.width + "px",
193
- height: r.height + "px"
194
- });
195
- }, { interval: 1e3 / 30 }), o, s = watch(t, debounce(() => {
196
- if (t.value) o === void 0 && (clearTimeout(o), o = void 0), a(), e.append(n), requestAnimationFrame(() => {
197
- t.value && n.classList.add(`${clsPrefix.value}-spin-directive--spining`);
198
- });
199
- else {
200
- n.classList.remove(`${clsPrefix.value}-spin-directive--spining`);
201
- let e = () => {
202
- n.remove(), t && clearTimeout(t), t = null, n.removeEventListener("transitioncancel", e), n.removeEventListener("transitionend", e);
203
- };
204
- n.addEventListener("transitioncancel", e), n.addEventListener("transitionend", e);
205
- let t = setTimeout(e, 300);
206
- }
207
- }, 30));
208
- e[Spin] = {
209
- loading: t,
210
- spinEl: n,
211
- updateTip: () => {
212
- let t = n.querySelector(`.${clsPrefix.value}-spin-directive__tip`);
213
- t.textContent = e.dataset.spinTip;
214
- },
215
- stop: () => {
216
- i(), s();
217
- }
218
- };
219
- },
220
- mounted(e, t) {
221
- e[Spin] && (updateLoading(e, t), e[Spin].updateTip(), !e[Spin].observer && nextTick().then(() => {
222
- (e[Spin].observer = new MutationObserver((t) => {
223
- for (let n of t) if (n.type === "attributes" && n.attributeName === "data-spin-tip") {
224
- e[Spin].updateTip();
225
- return;
226
- }
227
- })).observe(e, {
228
- attributes: !0,
229
- attributeFilter: ["data-spin-tip"]
230
- });
231
- }));
232
- },
233
- updated(e, t) {
234
- e[Spin] && updateLoading(e, t);
235
- },
236
- beforeUnmount(e) {
237
- e[Spin] && (e[Spin].loading.value = !1, e[Spin].stop(), e[Spin].observer?.disconnect(), delete e[Spin]);
238
- }
239
- };
240
- export { vTooltip as i, vSpin as n, TooltipDirectiveProvider as r, SpinDirectiveProvider as t };
@@ -1,6 +0,0 @@
1
- import { inject } from "vue";
2
- const UI_I18N_INJECTION = "__UI_I18N__";
3
- function useI18n() {
4
- return inject(UI_I18N_INJECTION).value();
5
- }
6
- export { useI18n as n, UI_I18N_INJECTION as t };
@@ -1,29 +0,0 @@
1
- import { useMergedClsPrefix } from "ithinkdt-ui/es/_mixins/use-config";
2
- import _useStyle from "ithinkdt-ui/es/_mixins/use-style";
3
- import { c, cB, cE, cM } from "ithinkdt-ui/es/_utils/cssr/index";
4
- function useStyle(t, n, r, i) {
5
- return r ??= useMergedClsPrefix(), _useStyle(t, n, r, i), r;
6
- }
7
- const fullWidth = { width: "100%" }, fullHeight = { height: "100%" }, fullWH = {
8
- ...fullWidth,
9
- ...fullHeight
10
- }, flex = { display: "flex" }, flexDirCol = {
11
- ...flex,
12
- flexDirection: "column"
13
- }, flexAlignCenter = {
14
- ...flex,
15
- alignItems: "center"
16
- }, flexJustifyCenter = {
17
- ...flex,
18
- justifyContent: "center"
19
- }, flexJustifySB = {
20
- ...flex,
21
- justifyContent: "space-between"
22
- }, flexCenter = {
23
- ...flexAlignCenter,
24
- ...flexJustifyCenter
25
- }, flexGap = (e) => ({
26
- ...flex,
27
- gap: e
28
- });
29
- export { flex as a, flexDirCol as c, flexJustifySB as d, fullHeight as f, useStyle as g, useMergedClsPrefix as h, cM as i, flexGap as l, fullWidth as m, cB as n, flexAlignCenter as o, fullWH as p, cE as r, flexCenter as s, c as t, flexJustifyCenter as u };