@delta-comic/ui 3.0.0-next.5 → 3.0.0-next.7
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/index.css +1 -1
- package/dist/index.d.ts +70 -41
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2633 -2583
- package/dist/index.js.map +1 -1
- package/package.json +16 -5
- package/tailwind/index.ts +227 -0
- package/tailwind/safe-area.d.ts +4 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@delta-comic/ui",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.7",
|
|
4
4
|
"description": "空阙虱楼",
|
|
5
5
|
"homepage": "https://github.com/delta-comic/delta-comic",
|
|
6
6
|
"license": "AGPL-3.0-only",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
16
|
"dist",
|
|
17
|
-
"dist-vite"
|
|
17
|
+
"dist-vite",
|
|
18
|
+
"tailwind"
|
|
18
19
|
],
|
|
19
20
|
"type": "module",
|
|
20
21
|
"main": "./dist/index.js",
|
|
@@ -29,6 +30,10 @@
|
|
|
29
30
|
"types": "./dist-vite/index.d.mts",
|
|
30
31
|
"import": "./dist-vite/index.mjs"
|
|
31
32
|
},
|
|
33
|
+
"./tailwind": {
|
|
34
|
+
"types": "./tailwind/index.ts",
|
|
35
|
+
"import": "./tailwind/index.ts"
|
|
36
|
+
},
|
|
32
37
|
"./style.css": "./dist/index.css"
|
|
33
38
|
},
|
|
34
39
|
"publishConfig": {
|
|
@@ -49,7 +54,7 @@
|
|
|
49
54
|
"tailwind-merge": "^3.6.0",
|
|
50
55
|
"tailwindcss-safe-area-capacitor": "^0.5.1",
|
|
51
56
|
"tlds": "^1.261.0",
|
|
52
|
-
"@delta-comic/logger": "3.0.0-next.
|
|
57
|
+
"@delta-comic/logger": "3.0.0-next.7"
|
|
53
58
|
},
|
|
54
59
|
"devDependencies": {
|
|
55
60
|
"@tailwindcss/vite": "^4.3.0",
|
|
@@ -72,10 +77,16 @@
|
|
|
72
77
|
"@pinia/colada": "^1.3.1",
|
|
73
78
|
"naive-ui": "^2.44.1",
|
|
74
79
|
"pinia": "^3.0.4",
|
|
80
|
+
"tailwindcss": "^4.3.0",
|
|
75
81
|
"vue": "^3.5.40",
|
|
76
82
|
"vue-router": "^5.1.0",
|
|
77
|
-
"@delta-comic/model": "3.0.0-next.
|
|
78
|
-
"@delta-comic/utils": "3.0.0-next.
|
|
83
|
+
"@delta-comic/model": "3.0.0-next.7",
|
|
84
|
+
"@delta-comic/utils": "3.0.0-next.7"
|
|
85
|
+
},
|
|
86
|
+
"peerDependenciesMeta": {
|
|
87
|
+
"tailwindcss": {
|
|
88
|
+
"optional": true
|
|
89
|
+
}
|
|
79
90
|
},
|
|
80
91
|
"scripts": {
|
|
81
92
|
"build": "vp build && vp pack",
|
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
import safeArea from 'tailwindcss-safe-area-capacitor'
|
|
2
|
+
import plugin, { type PluginWithConfig } from 'tailwindcss/plugin'
|
|
3
|
+
|
|
4
|
+
const interactiveUtility = {
|
|
5
|
+
'cursor': 'pointer',
|
|
6
|
+
'WebkitTapHighlightColor': 'transparent',
|
|
7
|
+
'&:active': { opacity: '0.72' },
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const hairlineAfter = {
|
|
11
|
+
pointerEvents: 'none',
|
|
12
|
+
position: 'absolute',
|
|
13
|
+
boxSizing: 'border-box',
|
|
14
|
+
borderColor: 'var(--dc-color-border)',
|
|
15
|
+
borderStyle: 'solid',
|
|
16
|
+
content: '""',
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export const DeltaComicTailwindPlugin: PluginWithConfig = plugin(
|
|
20
|
+
({ addBase, addUtilities }) => {
|
|
21
|
+
addBase({
|
|
22
|
+
':root, :host, body': {
|
|
23
|
+
'--safe-area-inset-top': '0px',
|
|
24
|
+
'--safe-area-inset-right': '0px',
|
|
25
|
+
'--safe-area-inset-bottom': '0px',
|
|
26
|
+
'--safe-area-inset-left': '0px',
|
|
27
|
+
'--dc-background': 'var(--nui-body-color, #f7f8fa)',
|
|
28
|
+
'--dc-surface': 'var(--nui-card-color, #ffffff)',
|
|
29
|
+
'--dc-text': 'var(--nui-text-color-1, #323233)',
|
|
30
|
+
'--dc-text-secondary': 'var(--nui-text-color-2, #969799)',
|
|
31
|
+
'--dc-text-tertiary': 'var(--nui-text-color-3, #c8c9cc)',
|
|
32
|
+
'--dc-border': 'var(--nui-divider-color, #ebedf0)',
|
|
33
|
+
'--dc-overlay': 'rgb(0 0 0 / 48%)',
|
|
34
|
+
'--dc-error': 'var(--nui-error-color, #ee0a24)',
|
|
35
|
+
'--dc-gray-1': 'var(--nui-hover-color, #f2f3f5)',
|
|
36
|
+
'--dc-gray-6': '#969799',
|
|
37
|
+
'--dc-gray-7': '#646566',
|
|
38
|
+
'--dc-navigation-height': '72px',
|
|
39
|
+
'--dc-desktop-navigation-width': '88px',
|
|
40
|
+
'--dc-page-header-height': '52px',
|
|
41
|
+
'--dc-tabs-height': '44px',
|
|
42
|
+
'--dc-tabs-padding-bottom': '10px',
|
|
43
|
+
'--dc-content-padding': '16px',
|
|
44
|
+
'--bili-blue': '#00aeec',
|
|
45
|
+
'--dc-color-page': 'var(--dc-background)',
|
|
46
|
+
'--dc-color-surface': 'var(--dc-surface)',
|
|
47
|
+
'--dc-color-text': 'var(--dc-text)',
|
|
48
|
+
'--dc-color-text-secondary': 'var(--dc-text-secondary)',
|
|
49
|
+
'--dc-color-text-tertiary': 'var(--dc-text-tertiary)',
|
|
50
|
+
'--dc-color-border': 'var(--dc-border)',
|
|
51
|
+
'--dc-color-active': 'var(--dc-gray-1)',
|
|
52
|
+
'--dc-color-overlay': 'var(--dc-overlay)',
|
|
53
|
+
'--dc-color-danger': 'var(--dc-error)',
|
|
54
|
+
'--dc-color-primary': 'var(--p-color, var(--nui-primary-color, #1989fa))',
|
|
55
|
+
'--dc-color-icon': 'var(--dc-text-tertiary)',
|
|
56
|
+
'--dc-font-size-sm': '12px',
|
|
57
|
+
'--dc-font-size-md': '14px',
|
|
58
|
+
'--dc-font-size-lg': '16px',
|
|
59
|
+
'--dc-line-height-sm': '18px',
|
|
60
|
+
'--dc-line-height-md': '24px',
|
|
61
|
+
'--dc-space-1': '4px',
|
|
62
|
+
'--dc-space-2': '8px',
|
|
63
|
+
'--dc-space-3': '12px',
|
|
64
|
+
'--dc-space-4': '16px',
|
|
65
|
+
'--dc-radius-lg': '8px',
|
|
66
|
+
'--dc-duration-fast': '200ms',
|
|
67
|
+
'--dc-duration-base': '300ms',
|
|
68
|
+
|
|
69
|
+
// Transitional aliases for plugin-authored styles.
|
|
70
|
+
'--dc-background-2': 'var(--dc-surface)',
|
|
71
|
+
'--dc-black': 'var(--dc-overlay)',
|
|
72
|
+
'--dc-text-color': 'var(--dc-text)',
|
|
73
|
+
'--dc-text-color-2': 'var(--dc-text-secondary)',
|
|
74
|
+
'--dc-text-color-3': 'var(--dc-text-tertiary)',
|
|
75
|
+
'--dc-danger-color': 'var(--dc-error)',
|
|
76
|
+
'--dc-tabs-line-height': 'var(--dc-tabs-height)',
|
|
77
|
+
'--dc-cell-group-inset-padding': 'var(--dc-content-padding)',
|
|
78
|
+
},
|
|
79
|
+
":root[data-theme='light'], :root[data-theme='light'] body": {
|
|
80
|
+
'--dc-background': '#f5f5f7',
|
|
81
|
+
'--dc-surface': '#ffffff',
|
|
82
|
+
'--dc-text': '#1f2329',
|
|
83
|
+
'--dc-text-secondary': '#646a73',
|
|
84
|
+
'--dc-text-tertiary': '#8f959e',
|
|
85
|
+
'--dc-border': 'rgb(31 35 41 / 10%)',
|
|
86
|
+
'--dc-overlay': 'rgb(0 0 0 / 48%)',
|
|
87
|
+
'--dc-error': '#d03050',
|
|
88
|
+
'--dc-gray-1': '#f7f8fa',
|
|
89
|
+
'--dc-gray-6': '#969799',
|
|
90
|
+
'--dc-gray-7': '#646566',
|
|
91
|
+
'--p-color': '#fb7299',
|
|
92
|
+
},
|
|
93
|
+
":root[data-theme='dark'], :root[data-theme='dark'] body": {
|
|
94
|
+
'--dc-background': '#101113',
|
|
95
|
+
'--dc-surface': '#17181a',
|
|
96
|
+
'--dc-text': '#f2f3f5',
|
|
97
|
+
'--dc-text-secondary': '#b7bbc2',
|
|
98
|
+
'--dc-text-tertiary': '#8c9199',
|
|
99
|
+
'--dc-border': 'rgb(255 255 255 / 10%)',
|
|
100
|
+
'--dc-overlay': 'rgb(0 0 0 / 64%)',
|
|
101
|
+
'--dc-gray-1': '#202226',
|
|
102
|
+
'--dc-gray-6': '#a1a5ac',
|
|
103
|
+
'--dc-gray-7': '#c2c5ca',
|
|
104
|
+
'--dc-error': '#d03050',
|
|
105
|
+
'--p-color': '#fb7299',
|
|
106
|
+
},
|
|
107
|
+
'*': { boxSizing: 'border-box', userSelect: 'none', WebkitUserSelect: 'none' },
|
|
108
|
+
'html, body': { overflow: 'hidden !important' },
|
|
109
|
+
'body': {
|
|
110
|
+
margin: '0',
|
|
111
|
+
background: 'var(--dc-background)',
|
|
112
|
+
color: 'var(--dc-text)',
|
|
113
|
+
fontFamily: 'var(--nui-font-family, system-ui, sans-serif)',
|
|
114
|
+
WebkitFontSmoothing: 'antialiased',
|
|
115
|
+
MozOsxFontSmoothing: 'grayscale',
|
|
116
|
+
},
|
|
117
|
+
'input::-webkit-search-cancel-button': { display: 'none' },
|
|
118
|
+
'@media (min-width: 60rem)': { ':root, :host, body': { '--dc-content-padding': '24px' } },
|
|
119
|
+
'.v-binder-follower-container': { zIndex: '1000000 !important' },
|
|
120
|
+
'#messages': {
|
|
121
|
+
'position': 'fixed',
|
|
122
|
+
'zIndex': '2147483647',
|
|
123
|
+
'inset': '0',
|
|
124
|
+
'width': '100vw',
|
|
125
|
+
'height': '100vh',
|
|
126
|
+
'pointerEvents': 'none',
|
|
127
|
+
'*': { pointerEvents: 'all' },
|
|
128
|
+
},
|
|
129
|
+
'* .n-progress-graph-line-indicator': { display: 'none !important' },
|
|
130
|
+
'.list-move, .list-enter-active, .list-leave-active': {
|
|
131
|
+
transition: 'transform 420ms cubic-bezier(0.22, 1.5, 0.5, 1), opacity 240ms ease-out',
|
|
132
|
+
willChange: 'transform, opacity',
|
|
133
|
+
},
|
|
134
|
+
'.list-enter-from, .list-leave-to': { opacity: '0', transform: 'translateY(30px)' },
|
|
135
|
+
'.list-leave-active': { position: 'absolute' },
|
|
136
|
+
})
|
|
137
|
+
|
|
138
|
+
addUtilities({
|
|
139
|
+
'.dc-interactive': interactiveUtility,
|
|
140
|
+
'.dc-haptics-feedback': interactiveUtility,
|
|
141
|
+
'.dc-ellipsis': { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
|
|
142
|
+
'.dc-clamp-2': {
|
|
143
|
+
display: '-webkit-box',
|
|
144
|
+
overflow: 'hidden',
|
|
145
|
+
WebkitBoxOrient: 'vertical',
|
|
146
|
+
WebkitLineClamp: '2',
|
|
147
|
+
},
|
|
148
|
+
'.dc-scrollbar-hidden': {
|
|
149
|
+
'scrollbarWidth': 'none',
|
|
150
|
+
'&::-webkit-scrollbar': { display: 'none' },
|
|
151
|
+
},
|
|
152
|
+
'.dc-hairline': {
|
|
153
|
+
'position': 'relative',
|
|
154
|
+
'&::after': { ...hairlineAfter, inset: '-50%', scale: '0.5', borderWidth: '1px' },
|
|
155
|
+
},
|
|
156
|
+
'.dc-hairline-surround': {
|
|
157
|
+
'position': 'relative',
|
|
158
|
+
'&::after': { ...hairlineAfter, inset: '-50%', scale: '0.5', borderWidth: '1px' },
|
|
159
|
+
},
|
|
160
|
+
'.dc-hairline-top': {
|
|
161
|
+
'position': 'relative',
|
|
162
|
+
'&::after': {
|
|
163
|
+
...hairlineAfter,
|
|
164
|
+
inset: '0 0 auto',
|
|
165
|
+
scale: '1 0.5',
|
|
166
|
+
transformOrigin: 'top',
|
|
167
|
+
borderWidth: '1px 0 0',
|
|
168
|
+
},
|
|
169
|
+
},
|
|
170
|
+
'.dc-hairline-bottom': {
|
|
171
|
+
'position': 'relative',
|
|
172
|
+
'&::after': {
|
|
173
|
+
...hairlineAfter,
|
|
174
|
+
inset: 'auto 0 0',
|
|
175
|
+
scale: '1 0.5',
|
|
176
|
+
transformOrigin: 'bottom',
|
|
177
|
+
borderWidth: '0 0 1px',
|
|
178
|
+
},
|
|
179
|
+
},
|
|
180
|
+
'.dc-hairline-left': {
|
|
181
|
+
'position': 'relative',
|
|
182
|
+
'&::after': {
|
|
183
|
+
...hairlineAfter,
|
|
184
|
+
inset: '0 auto 0 0',
|
|
185
|
+
scale: '0.5 1',
|
|
186
|
+
transformOrigin: 'left',
|
|
187
|
+
borderWidth: '0 0 0 1px',
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
'.dc-hairline-right': {
|
|
191
|
+
'position': 'relative',
|
|
192
|
+
'&::after': {
|
|
193
|
+
...hairlineAfter,
|
|
194
|
+
inset: '0 0 0 auto',
|
|
195
|
+
scale: '0.5 1',
|
|
196
|
+
transformOrigin: 'right',
|
|
197
|
+
borderWidth: '0 1px 0 0',
|
|
198
|
+
},
|
|
199
|
+
},
|
|
200
|
+
'.dc-hairline-top-bottom': {
|
|
201
|
+
'position': 'relative',
|
|
202
|
+
'&::after': { ...hairlineAfter, inset: '-50% 0', scale: '1 0.5', borderWidth: '1px 0' },
|
|
203
|
+
},
|
|
204
|
+
})
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
plugins: [safeArea],
|
|
208
|
+
theme: {
|
|
209
|
+
extend: {
|
|
210
|
+
colors: {
|
|
211
|
+
'dc-page': 'var(--dc-color-page)',
|
|
212
|
+
'dc-surface': 'var(--dc-color-surface)',
|
|
213
|
+
'dc-text': 'var(--dc-color-text)',
|
|
214
|
+
'dc-text-secondary': 'var(--dc-color-text-secondary)',
|
|
215
|
+
'dc-text-tertiary': 'var(--dc-color-text-tertiary)',
|
|
216
|
+
'dc-border': 'var(--dc-color-border)',
|
|
217
|
+
'dc-overlay': 'var(--dc-color-overlay)',
|
|
218
|
+
'dc-danger': 'var(--dc-color-danger)',
|
|
219
|
+
'dc-primary': 'var(--dc-color-primary)',
|
|
220
|
+
},
|
|
221
|
+
screens: { desktop: '60rem' },
|
|
222
|
+
},
|
|
223
|
+
},
|
|
224
|
+
},
|
|
225
|
+
)
|
|
226
|
+
|
|
227
|
+
export default DeltaComicTailwindPlugin
|