@junfuhuang/tcamp-components 1.0.0 → 1.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.
- package/README.md +21 -6
- package/dist/index.d.ts +1 -0
- package/dist/index.js +63 -57
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -14,22 +14,37 @@ yarn add tcamp-components
|
|
|
14
14
|
|
|
15
15
|
## 使用
|
|
16
16
|
|
|
17
|
-
###
|
|
17
|
+
### 方式1：完整引入（推荐）
|
|
18
18
|
|
|
19
19
|
```typescript
|
|
20
20
|
import { createApp } from 'vue'
|
|
21
|
-
import TCampComponents from 'tcamp-components'
|
|
22
|
-
import 'tcamp-components/
|
|
21
|
+
import TCampComponents from '@junfuhuang/tcamp-components'
|
|
22
|
+
import '@junfuhuang/tcamp-components/dist/index.css'
|
|
23
23
|
|
|
24
24
|
const app = createApp(App)
|
|
25
25
|
app.use(TCampComponents)
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
###
|
|
28
|
+
### 方式2：按需引入
|
|
29
29
|
|
|
30
30
|
```typescript
|
|
31
|
-
import { NavigationBar } from 'tcamp-components'
|
|
32
|
-
import 'tcamp-components/
|
|
31
|
+
import { NavigationBar } from '@junfuhuang/tcamp-components'
|
|
32
|
+
import '@junfuhuang/tcamp-components/dist/index.css'
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### 方式3：动态加载样式
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
import { NavigationBar, importStyles } from '@junfuhuang/tcamp-components'
|
|
39
|
+
|
|
40
|
+
// 动态加载样式
|
|
41
|
+
importStyles()
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 方式4：在 HTML 中直接引入样式
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<link rel="stylesheet" href="https://unpkg.com/@junfuhuang/tcamp-components/dist/index.css">
|
|
33
48
|
```
|
|
34
49
|
|
|
35
50
|
## 组件
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as Q, ref as V, computed as f, onMounted as T, onUnmounted as U, createElementBlock as n, openBlock as t, createElementVNode as
|
|
1
|
+
import { defineComponent as Q, ref as V, computed as f, onMounted as T, onUnmounted as U, createElementBlock as n, openBlock as t, createElementVNode as c, createCommentVNode as d, withModifiers as B, normalizeClass as p, normalizeStyle as N, renderSlot as C, unref as s, Fragment as z, renderList as D, toDisplayString as w, createBlock as G, withCtx as m, createVNode as O, createTextVNode as I } from "vue";
|
|
2
2
|
import { Dropdown as j, Space as Y, Button as R, Icon as K } from "tdesign-vue-next";
|
|
3
|
-
var v = /* @__PURE__ */ ((
|
|
3
|
+
var v = /* @__PURE__ */ ((l) => (l.Logout = "logout", l.Account = "account", l.Certificates = "certificates", l.MyCamp = "myCamp", l))(v || {});
|
|
4
4
|
const M = [
|
|
5
5
|
{
|
|
6
6
|
content: "我的营地",
|
|
@@ -84,15 +84,15 @@ const M = [
|
|
|
84
84
|
userName: {}
|
|
85
85
|
},
|
|
86
86
|
emits: ["logo-click", "menu-click", "login-click", "user-dropdown-click", "logout"],
|
|
87
|
-
setup(
|
|
88
|
-
const o =
|
|
89
|
-
() =>
|
|
90
|
-
), F = f(() => o.transparent && !o.scrolled ? q : b),
|
|
87
|
+
setup(l, { emit: S }) {
|
|
88
|
+
const o = l, Z = S, r = V(!1), y = V(-1), E = f(
|
|
89
|
+
() => r.value ? "translate-x-0" : "-translate-x-full"
|
|
90
|
+
), F = f(() => o.transparent && !o.scrolled ? q : b), g = f(() => o.transparent && !o.scrolled ? "!text-white" : `!text-[${o.primaryColor}]`), H = f(() => o.transparent && !o.scrolled ? "text-white/90 hover:text-white transition-colors duration-200" : `text-[${o.primaryColor}]/90 hover:text-[${o.primaryColor}] transition-colors duration-200`), x = f(() => o.transparent && !o.scrolled ? "after:bg-white" : `after:bg-[${o.primaryColor}]`);
|
|
91
91
|
function W() {
|
|
92
|
-
console.log("toggleMobileMenu - before:",
|
|
92
|
+
console.log("toggleMobileMenu - before:", r.value), r.value = !r.value, console.log("toggleMobileMenu - after:", r.value);
|
|
93
93
|
}
|
|
94
94
|
function X() {
|
|
95
|
-
|
|
95
|
+
r.value = !1;
|
|
96
96
|
}
|
|
97
97
|
function L() {
|
|
98
98
|
window.location.href = `${import.meta.env.VITE_API_DOMAIN}`;
|
|
@@ -102,86 +102,86 @@ const M = [
|
|
|
102
102
|
}
|
|
103
103
|
function h() {
|
|
104
104
|
try {
|
|
105
|
-
const A = new URL("auth", import.meta.env.VITE_API_DOMAIN),
|
|
106
|
-
A.searchParams.set("redirect",
|
|
105
|
+
const A = new URL("auth", import.meta.env.VITE_API_DOMAIN), a = window.location.href;
|
|
106
|
+
A.searchParams.set("redirect", a), window.location.href = A.toString();
|
|
107
107
|
} catch (A) {
|
|
108
108
|
console.log(A);
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
function J(A,
|
|
111
|
+
function J(A, a) {
|
|
112
112
|
const e = A;
|
|
113
|
-
e.value === v.Logout ?
|
|
113
|
+
e.value === v.Logout ? Z("logout") : e.value === v.Account ? window.location.href = `${import.meta.env.VITE_API_DOMAIN}personal` : e.value === v.Certificates ? window.location.href = `${import.meta.env.VITE_API_DOMAIN}personal/certificates` : e.value === v.MyCamp ? window.location.href = `${import.meta.env.VITE_API_DOMAIN}personal/my-camps` : console.error("未知选项");
|
|
114
114
|
}
|
|
115
115
|
return T(() => {
|
|
116
|
-
const A = (
|
|
117
|
-
const e =
|
|
118
|
-
|
|
116
|
+
const A = (a) => {
|
|
117
|
+
const e = a.target, i = e.closest(".mobile-menu-container"), u = e.closest('button[aria-label="菜单"]');
|
|
118
|
+
r.value && !i && !u && (console.log("handleClickOutside - closing menu"), X());
|
|
119
119
|
};
|
|
120
120
|
document.addEventListener("click", A), U(() => {
|
|
121
121
|
document.removeEventListener("click", A);
|
|
122
122
|
});
|
|
123
|
-
}), (A,
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
123
|
+
}), (A, a) => (t(), n("div", _, [
|
|
124
|
+
c("div", $, [
|
|
125
|
+
c("div", AA, [
|
|
126
|
+
c("button", {
|
|
127
127
|
class: "md:hidden text-gray-700 hover:text-gray-900 p-2 relative z-50",
|
|
128
128
|
onClick: B(W, ["stop"]),
|
|
129
129
|
"aria-label": "菜单",
|
|
130
130
|
type: "button"
|
|
131
131
|
}, [
|
|
132
132
|
(t(), n("svg", {
|
|
133
|
-
class: p(["w-6 h-6 transition-all duration-300", [{ "rotate-180":
|
|
133
|
+
class: p(["w-6 h-6 transition-all duration-300", [{ "rotate-180": r.value }, H.value]]),
|
|
134
134
|
fill: "none",
|
|
135
135
|
stroke: "currentColor",
|
|
136
136
|
viewBox: "0 0 24 24"
|
|
137
137
|
}, [
|
|
138
|
-
|
|
138
|
+
r.value ? (t(), n("path", eA)) : (t(), n("path", tA))
|
|
139
139
|
], 2))
|
|
140
140
|
]),
|
|
141
|
-
|
|
141
|
+
r.value ? (t(), n("div", {
|
|
142
142
|
key: 0,
|
|
143
143
|
class: "fixed inset-0 bg-black/50 backdrop-blur-sm z-40 lg:hidden top-[56px]",
|
|
144
144
|
style: N({ width: `calc(100vw - ${A.scrollbarWidth}px)` }),
|
|
145
145
|
onClick: B(X, ["stop"])
|
|
146
146
|
}, null, 4)) : d("", !0),
|
|
147
|
-
|
|
147
|
+
c("div", {
|
|
148
148
|
class: p(["fixed top-[56px] left-0 w-80 max-w-[90vw] h-[calc(100vh-51px)] bg-white transform transition-transform duration-300 z-40 md:hidden mobile-menu-container", E.value])
|
|
149
149
|
}, [
|
|
150
|
-
|
|
151
|
-
|
|
150
|
+
c("div", nA, [
|
|
151
|
+
c("div", {
|
|
152
152
|
class: "flex justify-start px-4 mb-6 cursor-pointer",
|
|
153
153
|
onClick: L
|
|
154
154
|
}, [
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
C(A.$slots, "mobile-logo", {}, () => [
|
|
156
|
+
s(b) ? (t(), n("img", {
|
|
157
157
|
key: 0,
|
|
158
|
-
src:
|
|
158
|
+
src: s(b),
|
|
159
159
|
alt: A.logoAlt,
|
|
160
160
|
class: "h-7 w-auto"
|
|
161
161
|
}, null, 8, oA)) : d("", !0)
|
|
162
162
|
])
|
|
163
163
|
]),
|
|
164
|
-
|
|
165
|
-
(t(!0), n(z, null, D(
|
|
164
|
+
c("nav", lA, [
|
|
165
|
+
(t(!0), n(z, null, D(s(k), (e, i) => (t(), n("a", {
|
|
166
166
|
href: "#",
|
|
167
|
-
key: (e == null ? void 0 : e.value) ||
|
|
167
|
+
key: (e == null ? void 0 : e.value) || i,
|
|
168
168
|
class: "flex items-center px-4 py-3 rounded-lg transition-colors duration-200",
|
|
169
|
-
style: N(
|
|
170
|
-
onMouseenter: (u) =>
|
|
171
|
-
onMouseleave:
|
|
169
|
+
style: N(y.value === i ? { color: A.activeColor } : {}),
|
|
170
|
+
onMouseenter: (u) => y.value = i,
|
|
171
|
+
onMouseleave: a[0] || (a[0] = (u) => y.value = -1),
|
|
172
172
|
onClick: B((u) => P(e), ["prevent"])
|
|
173
173
|
}, [
|
|
174
|
-
|
|
174
|
+
c("span", aA, w(e.title), 1)
|
|
175
175
|
], 44, rA))), 128))
|
|
176
176
|
])
|
|
177
177
|
])
|
|
178
178
|
], 2),
|
|
179
|
-
|
|
179
|
+
c("div", {
|
|
180
180
|
class: "cursor-pointer",
|
|
181
|
-
style: N({ display:
|
|
181
|
+
style: N({ display: r.value ? "none" : "block" }),
|
|
182
182
|
onClick: L
|
|
183
183
|
}, [
|
|
184
|
-
|
|
184
|
+
C(A.$slots, "logo", {}, () => [
|
|
185
185
|
F.value ? (t(), n("img", {
|
|
186
186
|
key: 0,
|
|
187
187
|
src: F.value,
|
|
@@ -190,54 +190,54 @@ const M = [
|
|
|
190
190
|
}, null, 8, sA)) : d("", !0)
|
|
191
191
|
])
|
|
192
192
|
], 4),
|
|
193
|
-
A.showNavigation &&
|
|
194
|
-
(t(!0), n(z, null, D(
|
|
193
|
+
A.showNavigation && s(k).length > 0 ? (t(), n("div", iA, [
|
|
194
|
+
(t(!0), n(z, null, D(s(k), (e, i) => (t(), n("span", {
|
|
195
195
|
class: p([
|
|
196
196
|
"px-3 md:px-4 text-[14px] relative after:content-[''] after:block after:absolute after:left-0 after:bottom-[-10px] after:h-[2px] after:w-0 after:transition-all after:duration-300 hover:after:w-full",
|
|
197
197
|
H.value,
|
|
198
198
|
x.value
|
|
199
199
|
]),
|
|
200
|
-
key: e.title ||
|
|
200
|
+
key: e.title || i,
|
|
201
201
|
onClick: (u) => P(e)
|
|
202
202
|
}, w(e.title), 11, cA))), 128))
|
|
203
203
|
])) : d("", !0)
|
|
204
204
|
]),
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
loginBtnClass:
|
|
205
|
+
c("div", uA, [
|
|
206
|
+
C(A.$slots, "user-area", {
|
|
207
|
+
loginBtnClass: g.value,
|
|
208
208
|
handleLogin: h
|
|
209
209
|
}, () => [
|
|
210
|
-
A.userInfo &&
|
|
210
|
+
A.userInfo && s(M).length > 0 ? (t(), G(s(j), {
|
|
211
211
|
key: 0,
|
|
212
212
|
placement: "bottom-right",
|
|
213
213
|
trigger: "hover",
|
|
214
|
-
options:
|
|
214
|
+
options: s(M),
|
|
215
215
|
onClick: J
|
|
216
216
|
}, {
|
|
217
217
|
default: m(() => [
|
|
218
|
-
|
|
218
|
+
O(s(Y), null, {
|
|
219
219
|
default: m(() => [
|
|
220
|
-
|
|
220
|
+
O(s(R), {
|
|
221
221
|
variant: "text",
|
|
222
|
-
class: p(
|
|
222
|
+
class: p(g.value),
|
|
223
223
|
style: {
|
|
224
224
|
border: "0px !important",
|
|
225
225
|
backgroundColor: "transparent !important",
|
|
226
226
|
boxShadow: "none"
|
|
227
227
|
},
|
|
228
|
-
onMouseenter:
|
|
229
|
-
onMouseleave:
|
|
228
|
+
onMouseenter: a[1] || (a[1] = (e) => e.target.style.backgroundColor = "transparent !important"),
|
|
229
|
+
onMouseleave: a[2] || (a[2] = (e) => e.target.style.backgroundColor = "transparent !important")
|
|
230
230
|
}, {
|
|
231
231
|
suffix: m(() => [
|
|
232
|
-
|
|
232
|
+
O(s(K), {
|
|
233
233
|
name: "chevron-down",
|
|
234
234
|
size: "16"
|
|
235
235
|
})
|
|
236
236
|
]),
|
|
237
237
|
default: m(() => {
|
|
238
|
-
var e,
|
|
238
|
+
var e, i;
|
|
239
239
|
return [
|
|
240
|
-
I(w(((e = A.userInfo) == null ? void 0 : e.name) || ((
|
|
240
|
+
I(w(((e = A.userInfo) == null ? void 0 : e.name) || ((i = A.userInfo) == null ? void 0 : i.Name) || "我的账号") + " ", 1)
|
|
241
241
|
];
|
|
242
242
|
}),
|
|
243
243
|
_: 1
|
|
@@ -249,7 +249,7 @@ const M = [
|
|
|
249
249
|
_: 1
|
|
250
250
|
}, 8, ["options"])) : A.showLogin ? (t(), n("span", {
|
|
251
251
|
key: 1,
|
|
252
|
-
class: p(["cursor-pointer",
|
|
252
|
+
class: p(["cursor-pointer", g.value]),
|
|
253
253
|
onClick: h
|
|
254
254
|
}, w(A.loginText), 3)) : d("", !0)
|
|
255
255
|
])
|
|
@@ -257,7 +257,13 @@ const M = [
|
|
|
257
257
|
])
|
|
258
258
|
]));
|
|
259
259
|
}
|
|
260
|
-
})
|
|
260
|
+
}), vA = () => {
|
|
261
|
+
if (typeof document < "u") {
|
|
262
|
+
const l = document.createElement("link");
|
|
263
|
+
l.rel = "stylesheet", l.href = "https://unpkg.com/@junfuhuang/tcamp-components/dist/index.css", document.head.appendChild(l);
|
|
264
|
+
}
|
|
265
|
+
};
|
|
261
266
|
export {
|
|
262
|
-
pA as NavigationBar
|
|
267
|
+
pA as NavigationBar,
|
|
268
|
+
vA as importStyles
|
|
263
269
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@junfuhuang/tcamp-components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"description": "TCamp 组件库 - 基于 Vue 3 和 TDesign 的企业级组件库",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"vue",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"build": "vite build"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
|
-
"vue": "^3.
|
|
42
|
-
"tailwindcss": "^3.
|
|
43
|
-
"tdesign-vue-next": "^1.10.
|
|
41
|
+
"vue": "^3.0.0",
|
|
42
|
+
"tailwindcss": "^3.0.0",
|
|
43
|
+
"tdesign-vue-next": "^1.10.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"vite": "^6.0.1",
|