@junfuhuang/tcamp-components 1.0.1 → 1.0.3
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.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +63 -57
- package/package.json +5 -2
- package/postcss.config.js +6 -0
- package/tailwind.config.js +10 -0
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.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--td-screen-xs: 320px;--td-screen-sm: 768px;--td-screen-md: 992px;--td-screen-lg: 1200px;--td-screen-xl: 1400px;--td-screen-xxl: 1880px}@-moz-document url-prefix(){.narrow-scrollbar{scrollbar-color:var(--td-scrollbar-color) transparent;scrollbar-width:thin}}.narrow-scrollbar::-webkit-scrollbar{width:8px;height:8px}.narrow-scrollbar::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:content-box;background-color:var(--td-scrollbar-color);border-radius:15px}.narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover,.narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--td-scrollbar-hover-color)}.t-fake-arrow path{transition:d .2s;stroke:currentcolor}.t-fake-arrow--active path{d:path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425")}.t-slide-down-enter-active,.t-slide-down-leave-active{transition:height .2s cubic-bezier(.38,0,.24,1)}:root,:root[theme-mode=light]{--td-brand-color-1: #f2f3ff;--td-brand-color-2: #d9e1ff;--td-brand-color-3: #b5c7ff;--td-brand-color-4: #8eabff;--td-brand-color-5: #618dff;--td-brand-color-6: #366ef4;--td-brand-color-7: #0052d9;--td-brand-color-8: #003cab;--td-brand-color-9: #002a7c;--td-brand-color-10: #001a57;--td-warning-color-1: #fff1e9;--td-warning-color-2: #ffd9c2;--td-warning-color-3: #ffb98c;--td-warning-color-4: #fa9550;--td-warning-color-5: #e37318;--td-warning-color-6: #be5a00;--td-warning-color-7: #954500;--td-warning-color-8: #713300;--td-warning-color-9: #532300;--td-warning-color-10: #3b1700;--td-error-color-1: #fff0ed;--td-error-color-2: #ffd8d2;--td-error-color-3: #ffb9b0;--td-error-color-4: #ff9285;--td-error-color-5: #f6685d;--td-error-color-6: #d54941;--td-error-color-7: #ad352f;--td-error-color-8: #881f1c;--td-error-color-9: #68070a;--td-error-color-10: #490002;--td-success-color-1: #e3f9e9;--td-success-color-2: #c6f3d7;--td-success-color-3: #92dab2;--td-success-color-4: #56c08d;--td-success-color-5: #2ba471;--td-success-color-6: #008858;--td-success-color-7: #006c45;--td-success-color-8: #005334;--td-success-color-9: #003b23;--td-success-color-10: #002515;--td-gray-color-1: #f3f3f3;--td-gray-color-2: #eee;--td-gray-color-3: #e8e8e8;--td-gray-color-4: #ddd;--td-gray-color-5: #c6c6c6;--td-gray-color-6: #a6a6a6;--td-gray-color-7: #8b8b8b;--td-gray-color-8: #777;--td-gray-color-9: #5e5e5e;--td-gray-color-10: #4b4b4b;--td-gray-color-11: #393939;--td-gray-color-12: #2c2c2c;--td-gray-color-13: #242424;--td-gray-color-14: #181818;--td-font-white-1: #ffffff;--td-font-white-2: rgba(255, 255, 255, .55);--td-font-white-3: rgba(255, 255, 255, .35);--td-font-white-4: rgba(255, 255, 255, .22);--td-font-gray-1: rgba(0, 0, 0, .9);--td-font-gray-2: rgba(0, 0, 0, .6);--td-font-gray-3: rgba(0, 0, 0, .4);--td-font-gray-4: rgba(0, 0, 0, .26);--td-brand-color: var(--td-brand-color-7);--td-warning-color: var(--td-warning-color-5);--td-error-color: var(--td-error-color-6);--td-success-color: var(--td-success-color-5);--td-brand-color-hover: var(--td-brand-color-6);--td-brand-color-focus: var(--td-brand-color-2);--td-brand-color-active: var(--td-brand-color-8);--td-brand-color-disabled: var(--td-brand-color-3);--td-brand-color-light: var(--td-brand-color-1);--td-brand-color-light-hover: var(--td-brand-color-2);--td-warning-color-hover: var(--td-warning-color-4);--td-warning-color-focus: var(--td-warning-color-2);--td-warning-color-active: var(--td-warning-color-6);--td-warning-color-disabled: var(--td-warning-color-3);--td-warning-color-light: var(--td-warning-color-1);--td-warning-color-light-hover: var(--td-warning-color-2);--td-error-color-hover: var(--td-error-color-5);--td-error-color-focus: var(--td-error-color-2);--td-error-color-active: var(--td-error-color-7);--td-error-color-disabled: var(--td-error-color-3);--td-error-color-light: var(--td-error-color-1);--td-error-color-light-hover: var(--td-error-color-2);--td-success-color-hover: var(--td-success-color-4);--td-success-color-focus: var(--td-success-color-2);--td-success-color-active: var(--td-success-color-6);--td-success-color-disabled: var(--td-success-color-3);--td-success-color-light: var(--td-success-color-1);--td-success-color-light-hover: var(--td-success-color-2);--td-mask-active: rgba(0, 0, 0, .6);--td-mask-disabled: rgba(255, 255, 255, .6);--td-bg-color-page: var(--td-gray-color-2);--td-bg-color-container: #fff;--td-bg-color-container-hover: var(--td-gray-color-1);--td-bg-color-container-active: var(--td-gray-color-3);--td-bg-color-container-select: #fff;--td-bg-color-secondarycontainer: var(--td-gray-color-1);--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);--td-bg-color-component: var(--td-gray-color-3);--td-bg-color-component-hover: var(--td-gray-color-4);--td-bg-color-component-active: var(--td-gray-color-6);--td-bg-color-secondarycomponent: var(--td-gray-color-4);--td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);--td-bg-color-component-disabled: var(--td-gray-color-2);--td-bg-color-specialcomponent: #fff;--td-text-color-primary: var(--td-font-gray-1);--td-text-color-secondary: var(--td-font-gray-2);--td-text-color-placeholder: var(--td-font-gray-3);--td-text-color-disabled: var(--td-font-gray-4);--td-text-color-anti: #fff;--td-text-color-brand: var(--td-brand-color-7);--td-text-color-link: var(--td-brand-color-8);--td-border-level-1-color: var(--td-gray-color-3);--td-component-stroke: var(--td-gray-color-3);--td-border-level-2-color: var(--td-gray-color-4);--td-component-border: var(--td-gray-color-4);--td-shadow-1: 0 1px 10px rgba(0, 0, 0, .05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, .05), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, .05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);--td-shadow-inset-top: inset 0 .5px 0 #dcdcdc;--td-shadow-inset-right: inset .5px 0 0 #dcdcdc;--td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;--td-shadow-inset-left: inset -.5px 0 0 #dcdcdc;--td-table-shadow-color: rgba(0, 0, 0, .08);--td-scrollbar-color: rgba(0, 0, 0, .1);--td-scrollbar-hover-color: rgba(0, 0, 0, .3);--td-scroll-track-color: #fff}:root[theme-mode=dark]{--td-brand-color-1: #1b2f51;--td-brand-color-2: #173463;--td-brand-color-3: #143975;--td-brand-color-4: #103d88;--td-brand-color-5: #0d429a;--td-brand-color-6: #054bbe;--td-brand-color-7: #2667d4;--td-brand-color-8: #4582e6;--td-brand-color-9: #699ef5;--td-brand-color-10: #96bbf8;--td-warning-color-1: #4f2a1d;--td-warning-color-2: #582f21;--td-warning-color-3: #733c23;--td-warning-color-4: #a75d2b;--td-warning-color-5: #cf6e2d;--td-warning-color-6: #dc7633;--td-warning-color-7: #e8935c;--td-warning-color-8: #ecbf91;--td-warning-color-9: #eed7bf;--td-warning-color-10: #f3e9dc;--td-error-color-1: #472324;--td-error-color-2: #5e2a2d;--td-error-color-3: #703439;--td-error-color-4: #83383e;--td-error-color-5: #a03f46;--td-error-color-6: #c64751;--td-error-color-7: #de6670;--td-error-color-8: #ec888e;--td-error-color-9: #edb1b6;--td-error-color-10: #eeced0;--td-success-color-1: #193a2a;--td-success-color-2: #1a4230;--td-success-color-3: #17533d;--td-success-color-4: #0d7a55;--td-success-color-5: #059465;--td-success-color-6: #43af8a;--td-success-color-7: #46bf96;--td-success-color-8: #80d2b6;--td-success-color-9: #b4e1d3;--td-success-color-10: #deede8;--td-gray-color-1: #f3f3f3;--td-gray-color-2: #eee;--td-gray-color-3: #e8e8e8;--td-gray-color-4: #ddd;--td-gray-color-5: #c6c6c6;--td-gray-color-6: #a6a6a6;--td-gray-color-7: #8b8b8b;--td-gray-color-8: #777;--td-gray-color-9: #5e5e5e;--td-gray-color-10: #4b4b4b;--td-gray-color-11: #393939;--td-gray-color-12: #2c2c2c;--td-gray-color-13: #242424;--td-gray-color-14: #181818;--td-font-white-1: rgba(255, 255, 255, .9);--td-font-white-2: rgba(255, 255, 255, .55);--td-font-white-3: rgba(255, 255, 255, .35);--td-font-white-4: rgba(255, 255, 255, .22);--td-font-gray-1: rgba(0, 0, 0, .9);--td-font-gray-2: rgba(0, 0, 0, .6);--td-font-gray-3: rgba(0, 0, 0, .4);--td-font-gray-4: rgba(0, 0, 0, .26);--td-brand-color: var(--td-brand-color-8);--td-warning-color: var(--td-warning-color-5);--td-error-color: var(--td-error-color-6);--td-success-color: var(--td-success-color-5);--td-brand-color-hover: var(--td-brand-color-7);--td-brand-color-focus: var(--td-brand-color-2);--td-brand-color-active: var(--td-brand-color-9);--td-brand-color-disabled: var(--td-brand-color-3);--td-brand-color-light: var(--td-brand-color-1);--td-brand-color-light-hover: var(--td-brand-color-2);--td-warning-color-hover: var(--td-warning-color-4);--td-warning-color-focus: var(--td-warning-color-2);--td-warning-color-active: var(--td-warning-color-6);--td-warning-color-disabled: var(--td-warning-color-3);--td-warning-color-light: var(--td-warning-color-1);--td-warning-color-light-hover: var(--td-warning-color-2);--td-error-color-hover: var(--td-error-color-5);--td-error-color-focus: var(--td-error-color-2);--td-error-color-active: var(--td-error-color-7);--td-error-color-disabled: var(--td-error-color-3);--td-error-color-light: var(--td-error-color-1);--td-error-color-light-hover: var(--td-error-color-2);--td-success-color-hover: var(--td-success-color-4);--td-success-color-focus: var(--td-success-color-2);--td-success-color-active: var(--td-success-color-6);--td-success-color-disabled: var(--td-success-color-3);--td-success-color-light: var(--td-success-color-1);--td-success-color-light-hover: var(--td-success-color-2);--td-mask-active: rgba(0, 0, 0, .4);--td-mask-disabled: rgba(0, 0, 0, .6);--td-bg-color-page: var(--td-gray-color-14);--td-bg-color-container: var(--td-gray-color-13);--td-bg-color-container-hover: var(--td-gray-color-12);--td-bg-color-container-active: var(--td-gray-color-10);--td-bg-color-container-select: var(--td-gray-color-9);--td-bg-color-secondarycontainer: var(--td-gray-color-12);--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);--td-bg-color-component: var(--td-gray-color-11);--td-bg-color-component-hover: var(--td-gray-color-10);--td-bg-color-component-active: var(--td-gray-color-9);--td-bg-color-secondarycomponent: var(--td-gray-color-10);--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);--td-bg-color-secondarycomponent-active: var(--td-gray-color-8);--td-bg-color-component-disabled: var(--td-gray-color-12);--td-bg-color-specialcomponent: transparent;--td-text-color-primary: var(--td-font-white-1);--td-text-color-secondary: var(--td-font-white-2);--td-text-color-placeholder: var(--td-font-white-3);--td-text-color-disabled: var(--td-font-white-4);--td-text-color-anti: #fff;--td-text-color-brand: var(--td-brand-color-8);--td-text-color-link: var(--td-brand-color-8);--td-border-level-1-color: var(--td-gray-color-11);--td-component-stroke: var(--td-gray-color-11);--td-border-level-2-color: var(--td-gray-color-9);--td-component-border: var(--td-gray-color-9);--td-shadow-1: 0 4px 6px rgba(0, 0, 0, .06), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);--td-shadow-2: 0 8px 10px rgba(0, 0, 0, .12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);--td-shadow-3: 0 16px 24px rgba(0, 0, 0, .14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);--td-shadow-inset-top: inset 0 .5px 0 #5e5e5e;--td-shadow-inset-right: inset .5px 0 0 #5e5e5e;--td-shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;--td-shadow-inset-left: inset -.5px 0 0 #5e5e5e;--td-table-shadow-color: rgba(0, 0, 0, .55);--td-scrollbar-color: rgba(255, 255, 255, .1);--td-scrollbar-hover-color: rgba(255, 255, 255, .3);--td-scroll-track-color: #333}:root{--td-radius-small: 2px;--td-radius-default: 3px;--td-radius-medium: 6px;--td-radius-large: 9px;--td-radius-extraLarge: 12px;--td-radius-round: 999px;--td-radius-circle: 50%}:root{--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;--td-font-size-link-small: 12px;--td-font-size-link-medium: 14px;--td-font-size-link-large: 16px;--td-font-size-mark-small: 12px;--td-font-size-mark-medium: 14px;--td-font-size-body-small: 12px;--td-font-size-body-medium: 14px;--td-font-size-body-large: 16px;--td-font-size-title-small: 14px;--td-font-size-title-medium: 16px;--td-font-size-title-large: 20px;--td-font-size-headline-small: 24px;--td-font-size-headline-medium: 28px;--td-font-size-headline-large: 36px;--td-font-size-display-medium: 48px;--td-font-size-display-large: 64px;--td-line-height-link-small: 20px;--td-line-height-link-medium: 22px;--td-line-height-link-large: 24px;--td-line-height-mark-small: 20px;--td-line-height-mark-medium: 22px;--td-line-height-body-small: 20px;--td-line-height-body-medium: 22px;--td-line-height-body-large: 24px;--td-line-height-title-small: 22px;--td-line-height-title-medium: 24px;--td-line-height-title-large: 28px;--td-line-height-headline-small: 32px;--td-line-height-headline-medium: 36px;--td-line-height-headline-large: 44px;--td-line-height-display-medium: 56px;--td-line-height-display-large: 72px;--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family);--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family);--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family);--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family);--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family);--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family)}:root{--td-size-1: 2px;--td-size-2: 4px;--td-size-3: 6px;--td-size-4: 8px;--td-size-5: 12px;--td-size-6: 16px;--td-size-7: 20px;--td-size-8: 24px;--td-size-9: 28px;--td-size-10: 32px;--td-size-11: 36px;--td-size-12: 40px;--td-size-13: 48px;--td-size-14: 56px;--td-size-15: 64px;--td-size-16: 72px;--td-comp-size-xxxs: var(--td-size-6);--td-comp-size-xxs: var(--td-size-7);--td-comp-size-xs: var(--td-size-8);--td-comp-size-s: var(--td-size-9);--td-comp-size-m: var(--td-size-10);--td-comp-size-l: var(--td-size-11);--td-comp-size-xl: var(--td-size-12);--td-comp-size-xxl: var(--td-size-13);--td-comp-size-xxxl: var(--td-size-14);--td-comp-size-xxxxl: var(--td-size-15);--td-comp-size-xxxxxl: var(--td-size-16);--td-pop-padding-s: var(--td-size-2);--td-pop-padding-m: var(--td-size-3);--td-pop-padding-l: var(--td-size-4);--td-pop-padding-xl: var(--td-size-5);--td-pop-padding-xxl: var(--td-size-6);--td-comp-paddingLR-xxs: var(--td-size-1);--td-comp-paddingLR-xs: var(--td-size-2);--td-comp-paddingLR-s: var(--td-size-4);--td-comp-paddingLR-m: var(--td-size-5);--td-comp-paddingLR-l: var(--td-size-6);--td-comp-paddingLR-xl: var(--td-size-8);--td-comp-paddingLR-xxl: var(--td-size-10);--td-comp-paddingTB-xxs: var(--td-size-1);--td-comp-paddingTB-xs: var(--td-size-2);--td-comp-paddingTB-s: var(--td-size-4);--td-comp-paddingTB-m: var(--td-size-5);--td-comp-paddingTB-l: var(--td-size-6);--td-comp-paddingTB-xl: var(--td-size-8);--td-comp-paddingTB-xxl: var(--td-size-10);--td-comp-margin-xxs: var(--td-size-1);--td-comp-margin-xs: var(--td-size-2);--td-comp-margin-s: var(--td-size-4);--td-comp-margin-m: var(--td-size-5);--td-comp-margin-l: var(--td-size-6);--td-comp-margin-xl: var(--td-size-7);--td-comp-margin-xxl: var(--td-size-8);--td-comp-margin-xxxl: var(--td-size-10);--td-comp-margin-xxxxl: var(--td-size-12)}
|
|
1
|
+
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.left-0{left:0}.top-\[56px\]{top:56px}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-6{margin-bottom:1.5rem}.mr-4{margin-right:1rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-\[56px\]{height:56px}.h-\[calc\(100vh-51px\)\]{height:calc(100vh - 51px)}.h-full{height:100%}.w-6{width:1.5rem}.w-80{width:20rem}.w-\[76px\]{width:76px}.w-auto{width:auto}.w-full{width:100%}.max-w-7xl{max-width:80rem}.max-w-\[90vw\]{max-width:90vw}.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-\[30px\]{gap:30px}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.bg-black\/50{background-color:#00000080}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-2{padding:.5rem}.p-\[21px\]{padding:21px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-\[14px\]{font-size:14px}.font-medium{font-weight:500}.\!text-white{--tw-text-opacity: 1 !important;color:rgb(255 255 255 / var(--tw-text-opacity, 1))!important}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/90{color:#ffffffe6}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:bottom-\[-10px\]:after{content:var(--tw-content);bottom:-10px}.after\:left-0:after{content:var(--tw-content);left:0}.after\:block:after{content:var(--tw-content);display:block}.after\:h-\[2px\]:after{content:var(--tw-content);height:2px}.after\:w-0:after{content:var(--tw-content);width:0px}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:duration-300:after{content:var(--tw-content);transition-duration:.3s}.after\:content-\[\\\'\\\'\]:after{--tw-content: \'\';content:var(--tw-content)}.hover\:text-gray-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:after\:w-full:hover:after{content:var(--tw-content);width:100%}@media(min-width:768px){.md\:block{display:block}.md\:hidden{display:none}.md\:w-\[91px\]{width:91px}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:px-8{padding-left:2rem;padding-right:2rem}}@media(min-width:1024px){.lg\:hidden{display:none}.lg\:w-\[106px\]{width:106px}}:root{--td-screen-xs: 320px;--td-screen-sm: 768px;--td-screen-md: 992px;--td-screen-lg: 1200px;--td-screen-xl: 1400px;--td-screen-xxl: 1880px}@-moz-document url-prefix(){.narrow-scrollbar{scrollbar-color:var(--td-scrollbar-color) transparent;scrollbar-width:thin}}.narrow-scrollbar::-webkit-scrollbar{width:8px;height:8px}.narrow-scrollbar::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:content-box;background-color:var(--td-scrollbar-color);border-radius:15px}.narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover,.narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--td-scrollbar-hover-color)}.t-fake-arrow path{transition:d .2s;stroke:currentcolor}.t-fake-arrow--active path{d:path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425")}.t-slide-down-enter-active,.t-slide-down-leave-active{transition:height .2s cubic-bezier(.38,0,.24,1)}:root,:root[theme-mode=light]{--td-brand-color-1: #f2f3ff;--td-brand-color-2: #d9e1ff;--td-brand-color-3: #b5c7ff;--td-brand-color-4: #8eabff;--td-brand-color-5: #618dff;--td-brand-color-6: #366ef4;--td-brand-color-7: #0052d9;--td-brand-color-8: #003cab;--td-brand-color-9: #002a7c;--td-brand-color-10: #001a57;--td-warning-color-1: #fff1e9;--td-warning-color-2: #ffd9c2;--td-warning-color-3: #ffb98c;--td-warning-color-4: #fa9550;--td-warning-color-5: #e37318;--td-warning-color-6: #be5a00;--td-warning-color-7: #954500;--td-warning-color-8: #713300;--td-warning-color-9: #532300;--td-warning-color-10: #3b1700;--td-error-color-1: #fff0ed;--td-error-color-2: #ffd8d2;--td-error-color-3: #ffb9b0;--td-error-color-4: #ff9285;--td-error-color-5: #f6685d;--td-error-color-6: #d54941;--td-error-color-7: #ad352f;--td-error-color-8: #881f1c;--td-error-color-9: #68070a;--td-error-color-10: #490002;--td-success-color-1: #e3f9e9;--td-success-color-2: #c6f3d7;--td-success-color-3: #92dab2;--td-success-color-4: #56c08d;--td-success-color-5: #2ba471;--td-success-color-6: #008858;--td-success-color-7: #006c45;--td-success-color-8: #005334;--td-success-color-9: #003b23;--td-success-color-10: #002515;--td-gray-color-1: #f3f3f3;--td-gray-color-2: #eee;--td-gray-color-3: #e8e8e8;--td-gray-color-4: #ddd;--td-gray-color-5: #c6c6c6;--td-gray-color-6: #a6a6a6;--td-gray-color-7: #8b8b8b;--td-gray-color-8: #777;--td-gray-color-9: #5e5e5e;--td-gray-color-10: #4b4b4b;--td-gray-color-11: #393939;--td-gray-color-12: #2c2c2c;--td-gray-color-13: #242424;--td-gray-color-14: #181818;--td-font-white-1: #ffffff;--td-font-white-2: rgba(255, 255, 255, .55);--td-font-white-3: rgba(255, 255, 255, .35);--td-font-white-4: rgba(255, 255, 255, .22);--td-font-gray-1: rgba(0, 0, 0, .9);--td-font-gray-2: rgba(0, 0, 0, .6);--td-font-gray-3: rgba(0, 0, 0, .4);--td-font-gray-4: rgba(0, 0, 0, .26);--td-brand-color: var(--td-brand-color-7);--td-warning-color: var(--td-warning-color-5);--td-error-color: var(--td-error-color-6);--td-success-color: var(--td-success-color-5);--td-brand-color-hover: var(--td-brand-color-6);--td-brand-color-focus: var(--td-brand-color-2);--td-brand-color-active: var(--td-brand-color-8);--td-brand-color-disabled: var(--td-brand-color-3);--td-brand-color-light: var(--td-brand-color-1);--td-brand-color-light-hover: var(--td-brand-color-2);--td-warning-color-hover: var(--td-warning-color-4);--td-warning-color-focus: var(--td-warning-color-2);--td-warning-color-active: var(--td-warning-color-6);--td-warning-color-disabled: var(--td-warning-color-3);--td-warning-color-light: var(--td-warning-color-1);--td-warning-color-light-hover: var(--td-warning-color-2);--td-error-color-hover: var(--td-error-color-5);--td-error-color-focus: var(--td-error-color-2);--td-error-color-active: var(--td-error-color-7);--td-error-color-disabled: var(--td-error-color-3);--td-error-color-light: var(--td-error-color-1);--td-error-color-light-hover: var(--td-error-color-2);--td-success-color-hover: var(--td-success-color-4);--td-success-color-focus: var(--td-success-color-2);--td-success-color-active: var(--td-success-color-6);--td-success-color-disabled: var(--td-success-color-3);--td-success-color-light: var(--td-success-color-1);--td-success-color-light-hover: var(--td-success-color-2);--td-mask-active: rgba(0, 0, 0, .6);--td-mask-disabled: rgba(255, 255, 255, .6);--td-bg-color-page: var(--td-gray-color-2);--td-bg-color-container: #fff;--td-bg-color-container-hover: var(--td-gray-color-1);--td-bg-color-container-active: var(--td-gray-color-3);--td-bg-color-container-select: #fff;--td-bg-color-secondarycontainer: var(--td-gray-color-1);--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);--td-bg-color-component: var(--td-gray-color-3);--td-bg-color-component-hover: var(--td-gray-color-4);--td-bg-color-component-active: var(--td-gray-color-6);--td-bg-color-secondarycomponent: var(--td-gray-color-4);--td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);--td-bg-color-component-disabled: var(--td-gray-color-2);--td-bg-color-specialcomponent: #fff;--td-text-color-primary: var(--td-font-gray-1);--td-text-color-secondary: var(--td-font-gray-2);--td-text-color-placeholder: var(--td-font-gray-3);--td-text-color-disabled: var(--td-font-gray-4);--td-text-color-anti: #fff;--td-text-color-brand: var(--td-brand-color-7);--td-text-color-link: var(--td-brand-color-8);--td-border-level-1-color: var(--td-gray-color-3);--td-component-stroke: var(--td-gray-color-3);--td-border-level-2-color: var(--td-gray-color-4);--td-component-border: var(--td-gray-color-4);--td-shadow-1: 0 1px 10px rgba(0, 0, 0, .05), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, .05), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, .05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);--td-shadow-inset-top: inset 0 .5px 0 #dcdcdc;--td-shadow-inset-right: inset .5px 0 0 #dcdcdc;--td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc;--td-shadow-inset-left: inset -.5px 0 0 #dcdcdc;--td-table-shadow-color: rgba(0, 0, 0, .08);--td-scrollbar-color: rgba(0, 0, 0, .1);--td-scrollbar-hover-color: rgba(0, 0, 0, .3);--td-scroll-track-color: #fff}:root[theme-mode=dark]{--td-brand-color-1: #1b2f51;--td-brand-color-2: #173463;--td-brand-color-3: #143975;--td-brand-color-4: #103d88;--td-brand-color-5: #0d429a;--td-brand-color-6: #054bbe;--td-brand-color-7: #2667d4;--td-brand-color-8: #4582e6;--td-brand-color-9: #699ef5;--td-brand-color-10: #96bbf8;--td-warning-color-1: #4f2a1d;--td-warning-color-2: #582f21;--td-warning-color-3: #733c23;--td-warning-color-4: #a75d2b;--td-warning-color-5: #cf6e2d;--td-warning-color-6: #dc7633;--td-warning-color-7: #e8935c;--td-warning-color-8: #ecbf91;--td-warning-color-9: #eed7bf;--td-warning-color-10: #f3e9dc;--td-error-color-1: #472324;--td-error-color-2: #5e2a2d;--td-error-color-3: #703439;--td-error-color-4: #83383e;--td-error-color-5: #a03f46;--td-error-color-6: #c64751;--td-error-color-7: #de6670;--td-error-color-8: #ec888e;--td-error-color-9: #edb1b6;--td-error-color-10: #eeced0;--td-success-color-1: #193a2a;--td-success-color-2: #1a4230;--td-success-color-3: #17533d;--td-success-color-4: #0d7a55;--td-success-color-5: #059465;--td-success-color-6: #43af8a;--td-success-color-7: #46bf96;--td-success-color-8: #80d2b6;--td-success-color-9: #b4e1d3;--td-success-color-10: #deede8;--td-gray-color-1: #f3f3f3;--td-gray-color-2: #eee;--td-gray-color-3: #e8e8e8;--td-gray-color-4: #ddd;--td-gray-color-5: #c6c6c6;--td-gray-color-6: #a6a6a6;--td-gray-color-7: #8b8b8b;--td-gray-color-8: #777;--td-gray-color-9: #5e5e5e;--td-gray-color-10: #4b4b4b;--td-gray-color-11: #393939;--td-gray-color-12: #2c2c2c;--td-gray-color-13: #242424;--td-gray-color-14: #181818;--td-font-white-1: rgba(255, 255, 255, .9);--td-font-white-2: rgba(255, 255, 255, .55);--td-font-white-3: rgba(255, 255, 255, .35);--td-font-white-4: rgba(255, 255, 255, .22);--td-font-gray-1: rgba(0, 0, 0, .9);--td-font-gray-2: rgba(0, 0, 0, .6);--td-font-gray-3: rgba(0, 0, 0, .4);--td-font-gray-4: rgba(0, 0, 0, .26);--td-brand-color: var(--td-brand-color-8);--td-warning-color: var(--td-warning-color-5);--td-error-color: var(--td-error-color-6);--td-success-color: var(--td-success-color-5);--td-brand-color-hover: var(--td-brand-color-7);--td-brand-color-focus: var(--td-brand-color-2);--td-brand-color-active: var(--td-brand-color-9);--td-brand-color-disabled: var(--td-brand-color-3);--td-brand-color-light: var(--td-brand-color-1);--td-brand-color-light-hover: var(--td-brand-color-2);--td-warning-color-hover: var(--td-warning-color-4);--td-warning-color-focus: var(--td-warning-color-2);--td-warning-color-active: var(--td-warning-color-6);--td-warning-color-disabled: var(--td-warning-color-3);--td-warning-color-light: var(--td-warning-color-1);--td-warning-color-light-hover: var(--td-warning-color-2);--td-error-color-hover: var(--td-error-color-5);--td-error-color-focus: var(--td-error-color-2);--td-error-color-active: var(--td-error-color-7);--td-error-color-disabled: var(--td-error-color-3);--td-error-color-light: var(--td-error-color-1);--td-error-color-light-hover: var(--td-error-color-2);--td-success-color-hover: var(--td-success-color-4);--td-success-color-focus: var(--td-success-color-2);--td-success-color-active: var(--td-success-color-6);--td-success-color-disabled: var(--td-success-color-3);--td-success-color-light: var(--td-success-color-1);--td-success-color-light-hover: var(--td-success-color-2);--td-mask-active: rgba(0, 0, 0, .4);--td-mask-disabled: rgba(0, 0, 0, .6);--td-bg-color-page: var(--td-gray-color-14);--td-bg-color-container: var(--td-gray-color-13);--td-bg-color-container-hover: var(--td-gray-color-12);--td-bg-color-container-active: var(--td-gray-color-10);--td-bg-color-container-select: var(--td-gray-color-9);--td-bg-color-secondarycontainer: var(--td-gray-color-12);--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);--td-bg-color-component: var(--td-gray-color-11);--td-bg-color-component-hover: var(--td-gray-color-10);--td-bg-color-component-active: var(--td-gray-color-9);--td-bg-color-secondarycomponent: var(--td-gray-color-10);--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);--td-bg-color-secondarycomponent-active: var(--td-gray-color-8);--td-bg-color-component-disabled: var(--td-gray-color-12);--td-bg-color-specialcomponent: transparent;--td-text-color-primary: var(--td-font-white-1);--td-text-color-secondary: var(--td-font-white-2);--td-text-color-placeholder: var(--td-font-white-3);--td-text-color-disabled: var(--td-font-white-4);--td-text-color-anti: #fff;--td-text-color-brand: var(--td-brand-color-8);--td-text-color-link: var(--td-brand-color-8);--td-border-level-1-color: var(--td-gray-color-11);--td-component-stroke: var(--td-gray-color-11);--td-border-level-2-color: var(--td-gray-color-9);--td-component-border: var(--td-gray-color-9);--td-shadow-1: 0 4px 6px rgba(0, 0, 0, .06), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);--td-shadow-2: 0 8px 10px rgba(0, 0, 0, .12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);--td-shadow-3: 0 16px 24px rgba(0, 0, 0, .14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);--td-shadow-inset-top: inset 0 .5px 0 #5e5e5e;--td-shadow-inset-right: inset .5px 0 0 #5e5e5e;--td-shadow-inset-bottom: inset 0 -.5px 0 #5e5e5e;--td-shadow-inset-left: inset -.5px 0 0 #5e5e5e;--td-table-shadow-color: rgba(0, 0, 0, .55);--td-scrollbar-color: rgba(255, 255, 255, .1);--td-scrollbar-hover-color: rgba(255, 255, 255, .3);--td-scroll-track-color: #333}:root{--td-radius-small: 2px;--td-radius-default: 3px;--td-radius-medium: 6px;--td-radius-large: 9px;--td-radius-extraLarge: 12px;--td-radius-round: 999px;--td-radius-circle: 50%;--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;--td-font-size-link-small: 12px;--td-font-size-link-medium: 14px;--td-font-size-link-large: 16px;--td-font-size-mark-small: 12px;--td-font-size-mark-medium: 14px;--td-font-size-body-small: 12px;--td-font-size-body-medium: 14px;--td-font-size-body-large: 16px;--td-font-size-title-small: 14px;--td-font-size-title-medium: 16px;--td-font-size-title-large: 20px;--td-font-size-headline-small: 24px;--td-font-size-headline-medium: 28px;--td-font-size-headline-large: 36px;--td-font-size-display-medium: 48px;--td-font-size-display-large: 64px;--td-line-height-link-small: 20px;--td-line-height-link-medium: 22px;--td-line-height-link-large: 24px;--td-line-height-mark-small: 20px;--td-line-height-mark-medium: 22px;--td-line-height-body-small: 20px;--td-line-height-body-medium: 22px;--td-line-height-body-large: 24px;--td-line-height-title-small: 22px;--td-line-height-title-medium: 24px;--td-line-height-title-large: 28px;--td-line-height-headline-small: 32px;--td-line-height-headline-medium: 36px;--td-line-height-headline-large: 44px;--td-line-height-display-medium: 56px;--td-line-height-display-large: 72px;--td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);--td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);--td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);--td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);--td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);--td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);--td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);--td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);--td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);--td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family);--td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);--td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family);--td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family);--td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family);--td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family);--td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family);--td-size-1: 2px;--td-size-2: 4px;--td-size-3: 6px;--td-size-4: 8px;--td-size-5: 12px;--td-size-6: 16px;--td-size-7: 20px;--td-size-8: 24px;--td-size-9: 28px;--td-size-10: 32px;--td-size-11: 36px;--td-size-12: 40px;--td-size-13: 48px;--td-size-14: 56px;--td-size-15: 64px;--td-size-16: 72px;--td-comp-size-xxxs: var(--td-size-6);--td-comp-size-xxs: var(--td-size-7);--td-comp-size-xs: var(--td-size-8);--td-comp-size-s: var(--td-size-9);--td-comp-size-m: var(--td-size-10);--td-comp-size-l: var(--td-size-11);--td-comp-size-xl: var(--td-size-12);--td-comp-size-xxl: var(--td-size-13);--td-comp-size-xxxl: var(--td-size-14);--td-comp-size-xxxxl: var(--td-size-15);--td-comp-size-xxxxxl: var(--td-size-16);--td-pop-padding-s: var(--td-size-2);--td-pop-padding-m: var(--td-size-3);--td-pop-padding-l: var(--td-size-4);--td-pop-padding-xl: var(--td-size-5);--td-pop-padding-xxl: var(--td-size-6);--td-comp-paddingLR-xxs: var(--td-size-1);--td-comp-paddingLR-xs: var(--td-size-2);--td-comp-paddingLR-s: var(--td-size-4);--td-comp-paddingLR-m: var(--td-size-5);--td-comp-paddingLR-l: var(--td-size-6);--td-comp-paddingLR-xl: var(--td-size-8);--td-comp-paddingLR-xxl: var(--td-size-10);--td-comp-paddingTB-xxs: var(--td-size-1);--td-comp-paddingTB-xs: var(--td-size-2);--td-comp-paddingTB-s: var(--td-size-4);--td-comp-paddingTB-m: var(--td-size-5);--td-comp-paddingTB-l: var(--td-size-6);--td-comp-paddingTB-xl: var(--td-size-8);--td-comp-paddingTB-xxl: var(--td-size-10);--td-comp-margin-xxs: var(--td-size-1);--td-comp-margin-xs: var(--td-size-2);--td-comp-margin-s: var(--td-size-4);--td-comp-margin-m: var(--td-size-5);--td-comp-margin-l: var(--td-size-6);--td-comp-margin-xl: var(--td-size-7);--td-comp-margin-xxl: var(--td-size-8);--td-comp-margin-xxxl: var(--td-size-10);--td-comp-margin-xxxxl: var(--td-size-12)}
|
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.3",
|
|
5
5
|
"description": "TCamp 组件库 - 基于 Vue 3 和 TDesign 的企业级组件库",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"vue",
|
|
@@ -46,6 +46,9 @@
|
|
|
46
46
|
"vite": "^6.0.1",
|
|
47
47
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
48
48
|
"vite-plugin-dts": "^4.3.0",
|
|
49
|
-
"typescript": "^5.0.0"
|
|
49
|
+
"typescript": "^5.0.0",
|
|
50
|
+
"tailwindcss": "^3.4.17",
|
|
51
|
+
"autoprefixer": "^10.4.16",
|
|
52
|
+
"postcss": "^8.4.32"
|
|
50
53
|
}
|
|
51
54
|
}
|