@coffic/cosy-ui 1.0.12 → 1.0.14

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.
Files changed (6) hide show
  1. package/dist/app.css +1 -1
  2. package/dist/src/styles/prose/prose-table.css +5 -86
  3. package/dist/src-astro/products/ProductCard.astro +12 -2
  4. package/dist/src-astro/products/Products.astro +8 -0
  5. package/dist/src-vue/products/ProductCard.vue +14 -2
  6. package/package.json +1 -1
package/dist/src/styles/prose/prose-table.css CHANGED
@@ -1,9 +1,8 @@
1
1
  /* Prose 表格样式 - 现代化设计 */
2
2
 
3
3
  /* 表格 */
4
- .prose :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)),
5
4
  .cosy\:prose
6
- :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
5
+ :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
7
6
  width: 100%;
8
7
  table-layout: auto;
9
8
  text-align: left;
@@ -23,7 +22,6 @@
23
22
  background-color: #ffffff;
24
23
  }
25
24
 
26
- .prose :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)),
27
25
  .cosy\:prose
28
26
  :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
29
27
  border-bottom-width: 2px;
@@ -56,8 +54,6 @@
56
54
  border-right: none;
57
55
  }
58
56
 
59
- .prose
60
- :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose'] *)),
61
57
  .cosy\:prose
62
58
  :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
63
59
  border-bottom: 1px solid var(--tw-prose-td-borders, #e5e7eb);
@@ -76,14 +72,10 @@
76
72
  }
77
73
 
78
74
  /* Hover 效果 */
79
- .prose
75
+ .cosy\:prose
80
76
  :where(tbody tr):hover:not(
81
77
  :where([class~='not-prose'], [class~='not-prose'] *)
82
- ),
83
- .cosy\:prose
84
- :where(tbody tr):hover:not(
85
- :where([class~='not-prose'], [class~='not-prose'] *)
86
- ) {
78
+ ) {
87
79
  background-color: #f9fafb;
88
80
  transform: scale(1.01);
89
81
  box-shadow:
@@ -92,19 +84,13 @@
92
84
  }
93
85
 
94
86
  /* 斑马纹效果 */
95
- .prose
87
+ .cosy\:prose
96
88
  :where(tbody tr:nth-child(even)):not(
97
89
  :where([class~='not-prose'], [class~='not-prose'] *)
98
- ),
99
- .cosy\:prose
100
- :where(tbody tr:nth-child(even)):not(
101
- :where([class~='not-prose'], [class~='not-prose'] *)
102
- ) {
90
+ ) {
103
91
  background-color: rgba(249, 250, 251, 0.5);
104
92
  }
105
93
 
106
- .prose
107
- :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
108
94
  .cosy\:prose
109
95
  :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
110
96
  vertical-align: middle;
@@ -112,10 +98,6 @@
112
98
  border-right: 1px solid rgba(0, 0, 0, 0.03);
113
99
  }
114
100
 
115
- .prose
116
- :where(tbody td:last-child):not(
117
- :where([class~='not-prose'], [class~='not-prose'] *)
118
- ),
119
101
  .cosy\:prose
120
102
  :where(tbody td:last-child):not(
121
103
  :where([class~='not-prose'], [class~='not-prose'] *)
@@ -123,7 +105,6 @@
123
105
  border-right: none;
124
106
  }
125
107
 
126
- .prose :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)),
127
108
  .cosy\:prose
128
109
  :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
129
110
  border-top: 2px solid var(--tw-prose-th-borders, #d1d5db);
@@ -131,8 +112,6 @@
131
112
  font-weight: 600;
132
113
  }
133
114
 
134
- .prose
135
- :where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
136
115
  .cosy\:prose
137
116
  :where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
138
117
  vertical-align: middle;
@@ -140,10 +119,6 @@
140
119
  border-right: 1px solid rgba(0, 0, 0, 0.05);
141
120
  }
142
121
 
143
- .prose
144
- :where(tfoot td:last-child):not(
145
- :where([class~='not-prose'], [class~='not-prose'] *)
146
- ),
147
122
  .cosy\:prose
148
123
  :where(tfoot td:last-child):not(
149
124
  :where([class~='not-prose'], [class~='not-prose'] *)
@@ -155,9 +130,6 @@
155
130
 
156
131
  /* 默认主题跟随系统主题 - 当 data-theme='default' 且系统是暗黑模式时生效 */
157
132
  @media (prefers-color-scheme: dark) {
158
- [data-theme='default']
159
- .prose.dark\:prose-invert
160
- :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)),
161
133
  [data-theme='default']
162
134
  .cosy\:prose.cosy\:dark\:prose-invert
163
135
  :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -168,29 +140,18 @@
168
140
  0 1px 2px -1px rgba(0, 0, 0, 0.3);
169
141
  }
170
142
 
171
- [data-theme='default']
172
- .prose.dark\:prose-invert
173
- :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)),
174
143
  [data-theme='default']
175
144
  .cosy\:prose.cosy\:dark\:prose-invert
176
145
  :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
177
146
  background: linear-gradient(to bottom, #374151 0%, #1f2937 100%);
178
147
  }
179
148
 
180
- [data-theme='default']
181
- .prose.dark\:prose-invert
182
- :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)),
183
149
  [data-theme='default']
184
150
  .cosy\:prose.cosy\:dark\:prose-invert
185
151
  :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
186
152
  border-right: 1px solid rgba(255, 255, 255, 0.1);
187
153
  }
188
154
 
189
- [data-theme='default']
190
- .prose.dark\:prose-invert
191
- :where(tbody tr):hover:not(
192
- :where([class~='not-prose'], [class~='not-prose'] *)
193
- ),
194
155
  [data-theme='default']
195
156
  .cosy\:prose.cosy\:dark\:prose-invert
196
157
  :where(tbody tr):hover:not(
@@ -202,11 +163,6 @@
202
163
  0 4px 6px -1px rgba(0, 0, 0, 0.3);
203
164
  }
204
165
 
205
- [data-theme='default']
206
- .prose.dark\:prose-invert
207
- :where(tbody tr:nth-child(even)):not(
208
- :where([class~='not-prose'], [class~='not-prose'] *)
209
- ),
210
166
  [data-theme='default']
211
167
  .cosy\:prose.cosy\:dark\:prose-invert
212
168
  :where(tbody tr:nth-child(even)):not(
@@ -215,27 +171,18 @@
215
171
  background-color: rgba(55, 65, 81, 0.3);
216
172
  }
217
173
 
218
- [data-theme='default']
219
- .prose.dark\:prose-invert
220
- :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
221
174
  [data-theme='default']
222
175
  .cosy\:prose.cosy\:dark\:prose-invert
223
176
  :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
224
177
  border-right: 1px solid rgba(255, 255, 255, 0.05);
225
178
  }
226
179
 
227
- [data-theme='default']
228
- .prose.dark\:prose-invert
229
- :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)),
230
180
  [data-theme='default']
231
181
  .cosy\:prose.cosy\:dark\:prose-invert
232
182
  :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
233
183
  background: linear-gradient(to top, #374151 0%, #1f2937 100%);
234
184
  }
235
185
 
236
- [data-theme='default']
237
- .prose.dark\:prose-invert
238
- :where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
239
186
  [data-theme='default']
240
187
  .cosy\:prose.cosy\:dark\:prose-invert
241
188
  :where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -244,9 +191,6 @@
244
191
  }
245
192
 
246
193
  /* 所有暗色主题的通用样式 - 通过 data-theme-tone='dark' 判断 */
247
- [data-theme-tone='dark']
248
- .prose.dark\:prose-invert
249
- :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)),
250
194
  [data-theme-tone='dark']
251
195
  .cosy\:prose.cosy\:dark\:prose-invert
252
196
  :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
@@ -257,29 +201,18 @@
257
201
  0 1px 2px -1px rgba(0, 0, 0, 0.3);
258
202
  }
259
203
 
260
- [data-theme-tone='dark']
261
- .prose.dark\:prose-invert
262
- :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)),
263
204
  [data-theme-tone='dark']
264
205
  .cosy\:prose.cosy\:dark\:prose-invert
265
206
  :where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
266
207
  background: linear-gradient(to bottom, #374151 0%, #1f2937 100%);
267
208
  }
268
209
 
269
- [data-theme-tone='dark']
270
- .prose.dark\:prose-invert
271
- :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)),
272
210
  [data-theme-tone='dark']
273
211
  .cosy\:prose.cosy\:dark\:prose-invert
274
212
  :where(thead th):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
275
213
  border-right: 1px solid rgba(255, 255, 255, 0.1);
276
214
  }
277
215
 
278
- [data-theme-tone='dark']
279
- .prose.dark\:prose-invert
280
- :where(tbody tr):hover:not(
281
- :where([class~='not-prose'], [class~='not-prose'] *)
282
- ),
283
216
  [data-theme-tone='dark']
284
217
  .cosy\:prose.cosy\:dark\:prose-invert
285
218
  :where(tbody tr):hover:not(
@@ -291,11 +224,6 @@
291
224
  0 4px 6px -1px rgba(0, 0, 0, 0.3);
292
225
  }
293
226
 
294
- [data-theme-tone='dark']
295
- .prose.dark\:prose-invert
296
- :where(tbody tr:nth-child(even)):not(
297
- :where([class~='not-prose'], [class~='not-prose'] *)
298
- ),
299
227
  [data-theme-tone='dark']
300
228
  .cosy\:prose.cosy\:dark\:prose-invert
301
229
  :where(tbody tr:nth-child(even)):not(
@@ -304,27 +232,18 @@
304
232
  background-color: rgba(55, 65, 81, 0.3);
305
233
  }
306
234
 
307
- [data-theme-tone='dark']
308
- .prose.dark\:prose-invert
309
- :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
310
235
  [data-theme-tone='dark']
311
236
  .cosy\:prose.cosy\:dark\:prose-invert
312
237
  :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
313
238
  border-right: 1px solid rgba(255, 255, 255, 0.05);
314
239
  }
315
240
 
316
- [data-theme-tone='dark']
317
- .prose.dark\:prose-invert
318
- :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)),
319
241
  [data-theme-tone='dark']
320
242
  .cosy\:prose.cosy\:dark\:prose-invert
321
243
  :where(tfoot):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
322
244
  background: linear-gradient(to top, #374151 0%, #1f2937 100%);
323
245
  }
324
246
 
325
- [data-theme-tone='dark']
326
- .prose.dark\:prose-invert
327
- :where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)),
328
247
  [data-theme-tone='dark']
329
248
  .cosy\:prose.cosy\:dark\:prose-invert
330
249
  :where(tfoot td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
package/dist/src-astro/products/ProductCard.astro CHANGED
@@ -155,6 +155,12 @@ export interface Props {
155
155
  * GitHub按钮文本
156
156
  */
157
157
  githubButtonText?: string;
158
+ /**
159
+ * 语言设置，影响默认按钮文本
160
+ * - zh-cn: 中文默认（访问官网）
161
+ * - en: 英文默认（Visit Website）
162
+ */
163
+ lang?: string;
158
164
  /**
159
165
  * 按钮布局方向
160
166
  * - row: 水平布局（默认）
@@ -203,7 +209,7 @@ const {
203
209
  productUrl,
204
210
  githubUrl,
205
211
  size = 'md',
206
- primaryButtonText = '访问官网',
212
+ primaryButtonText,
207
213
  secondaryButtonText = 'App Store',
208
214
  githubButtonText = 'GitHub',
209
215
  buttonLayout = 'row',
@@ -213,8 +219,12 @@ const {
213
219
  shadow = 'md',
214
220
  background,
215
221
  muted = false,
222
+ lang,
216
223
  } = Astro.props;
217
224
 
225
+ const effectivePrimaryButtonText =
226
+ primaryButtonText ?? (lang === 'en' ? 'Visit Website' : '访问官网');
227
+
218
228
  // 尺寸样式映射
219
229
  const sizeStyles = {
220
230
  xs: {
@@ -401,7 +411,7 @@ const buttonsContainerClass =
401
411
  <span slot="icon-left">
402
412
  <LinkIcon size="22px" />
403
413
  </span>
404
- {primaryButtonText}
414
+ {effectivePrimaryButtonText}
405
415
  </Button>
406
416
  )
407
417
  }
package/dist/src-astro/products/Products.astro CHANGED
@@ -164,6 +164,12 @@ export interface Props {
164
164
  * 控制网格布局中所有卡片是否居中显示
165
165
  */
166
166
  centerItems?: boolean;
167
+ /**
168
+ * 语言设置，传递给 ProductCard 用于默认按钮文本
169
+ * - zh-cn: 中文（访问官网）
170
+ * - en: 英文（Visit Website）
171
+ */
172
+ lang?: string;
167
173
  /**
168
174
  * 自定义类名
169
175
  */
@@ -181,6 +187,7 @@ const {
181
187
  showBorder = false,
182
188
  margin = 'md',
183
189
  centerItems = true,
190
+ lang,
184
191
  class: className = '',
185
192
  } = Astro.props;
186
193
 
@@ -255,6 +262,7 @@ const containerClasses = [
255
262
  size={cardSize}
256
263
  equalHeight={equalHeight}
257
264
  descriptionLines={descriptionLines}
265
+ lang={lang ?? product.lang}
258
266
  />
259
267
  ))
260
268
  }
package/dist/src-vue/products/ProductCard.vue CHANGED
@@ -61,6 +61,12 @@ interface Props {
61
61
  * GitHub按钮文本
62
62
  */
63
63
  githubButtonText?: string;
64
+ /**
65
+ * 语言设置，影响默认按钮文本
66
+ * - zh-cn: 中文默认（访问官网）
67
+ * - en: 英文默认（Visit Website）
68
+ */
69
+ lang?: string;
64
70
  /**
65
71
  * 按钮布局方向
66
72
  * - row: 水平布局（默认）
@@ -103,7 +109,7 @@ interface Props {
103
109
 
104
110
  const props = withDefaults(defineProps<Props>(), {
105
111
  size: "md",
106
- primaryButtonText: "访问官网",
112
+ primaryButtonText: undefined,
107
113
  secondaryButtonText: "App Store",
108
114
  githubButtonText: "GitHub",
109
115
  buttonLayout: "row",
@@ -118,6 +124,12 @@ const props = withDefaults(defineProps<Props>(), {
118
124
  githubUrl: undefined,
119
125
  });
120
126
 
127
+ const effectivePrimaryButtonText = computed(
128
+ () =>
129
+ props.primaryButtonText ??
130
+ (props.lang === "en" ? "Visit Website" : "访问官网"),
131
+ );
132
+
121
133
  // 尺寸样式映射
122
134
  const sizeStyles = {
123
135
  xs: {
@@ -320,7 +332,7 @@ const description = computed(() => props.description);
320
332
  ">
321
333
  <LinkIcon class="cosy:w-4 cosy:h-4" />
322
334
  <a :href="productUrl" target="_blank" rel="noopener noreferrer">
323
- {{ primaryButtonText }}
335
+ {{ effectivePrimaryButtonText }}
324
336
  </a>
325
337
  </Button>
326
338
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coffic/cosy-ui",
3
- "version": "1.0.12",
3
+ "version": "1.0.14",
4
4
  "description": "An astro component library",
5
5
  "author": {
6
6
  "name": "nookery",