@xlui/xux-ui 0.2.0 → 0.3.0
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/LICENSE +194 -0
- package/README.md +2 -0
- package/README.zip +0 -0
- package/dist/index.css +1 -1
- package/dist/index.js +31 -31
- package/dist/index.mjs +3078 -1432
- package/package.json +4 -1
- package/src/components/Card/index.vue +44 -11
- package/src/components/DateTimePicker/index.vue +919 -0
- package/src/components/Modal/index.vue +18 -12
- package/src/components/Radio/index.vue +620 -0
- package/src/components/Score/index.vue +264 -0
- package/src/components/Switch/index.vue +234 -0
- package/src/composables/DateTime.ts +391 -0
- package/src/index.ts +9 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xlui/xux-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "VUE3 电商组件库",
|
|
5
5
|
"author": "leheya",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,6 +43,9 @@
|
|
|
43
43
|
"bugs": {
|
|
44
44
|
"url": "https://gitee.com/leheya/xux/issues"
|
|
45
45
|
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"dayjs": "^1.11.10"
|
|
48
|
+
},
|
|
46
49
|
"peerDependencies": {
|
|
47
50
|
"vue": "^3.3.0"
|
|
48
51
|
},
|
|
@@ -10,12 +10,16 @@
|
|
|
10
10
|
>
|
|
11
11
|
<div class="relative p-2">
|
|
12
12
|
<!-- 瀑布流保持自然高度 -->
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
<div class="image-container relative overflow-hidden rounded-lg bg-gray-100">
|
|
14
|
+
<img
|
|
15
|
+
:src="product.image"
|
|
16
|
+
:alt="product.name"
|
|
17
|
+
loading="lazy"
|
|
18
|
+
class="w-full h-auto object-cover transition-transform duration-300 group-hover:scale-[1.01]"
|
|
19
|
+
/>
|
|
20
|
+
<!-- 光效蒙版 -->
|
|
21
|
+
<div class="light-effect"></div>
|
|
22
|
+
</div>
|
|
19
23
|
|
|
20
24
|
<div v-if="product.label" class="absolute top-3 left-3">
|
|
21
25
|
<span class="label-badge">{{ product.label }}</span>
|
|
@@ -44,18 +48,20 @@
|
|
|
44
48
|
<div v-else :class="['grid', gridColsClass, 'gap-4 lg:gap-6']">
|
|
45
49
|
<div v-for="product in displayProducts" :key="product.id + '-grid'" class="h-full">
|
|
46
50
|
<div
|
|
47
|
-
class="group cursor-pointer product-card h-full flex flex-col"
|
|
51
|
+
class="py-2 px-2 group cursor-pointer product-card h-full flex flex-col"
|
|
48
52
|
@click="handleProductClick(product.id)"
|
|
49
53
|
>
|
|
50
54
|
<div class="relative flex-shrink-0 p-2">
|
|
51
55
|
<!-- 网格布局使用固定比例 -->
|
|
52
|
-
<div class="aspect-square bg-gray-100 rounded-lg overflow-hidden">
|
|
56
|
+
<div class="image-container aspect-square bg-gray-100 rounded-lg overflow-hidden relative">
|
|
53
57
|
<img
|
|
54
58
|
:src="product.image"
|
|
55
59
|
:alt="product.name"
|
|
56
|
-
class="w-full h-full object-cover
|
|
60
|
+
class="w-full h-full object-cover transition-transform duration-300"
|
|
57
61
|
loading="lazy"
|
|
58
62
|
/>
|
|
63
|
+
<!-- 光效蒙版 -->
|
|
64
|
+
<div class="light-effect"></div>
|
|
59
65
|
</div>
|
|
60
66
|
|
|
61
67
|
<div v-if="product.label" class="absolute top-3 left-3">
|
|
@@ -75,8 +81,8 @@
|
|
|
75
81
|
size="small"
|
|
76
82
|
class="like-button !min-w-0 !p-1"
|
|
77
83
|
>
|
|
78
|
-
<Icon v-if="!product.isWish" icon="bi:heart" class="bi bi-heart text-gray-500"></Icon>
|
|
79
|
-
<Icon v-else icon="bi:heart-fill" class="bi bi-heart-fill text-[#FE374F]"></Icon>
|
|
84
|
+
<Icon v-if="!product.isWish" icon="bi:heart" class="bi bi-heart text-gray-500 text-lg"></Icon>
|
|
85
|
+
<Icon v-else icon="bi:heart-fill" class="bi bi-heart-fill text-[#FE374F] text-lg"></Icon>
|
|
80
86
|
</XButton>
|
|
81
87
|
</div>
|
|
82
88
|
</div>
|
|
@@ -382,5 +388,32 @@ const handleLike = (product: Product) => {
|
|
|
382
388
|
break-inside: avoid;
|
|
383
389
|
page-break-inside: avoid;
|
|
384
390
|
}
|
|
391
|
+
|
|
392
|
+
/* 光效蒙版动画 */
|
|
393
|
+
.light-effect {
|
|
394
|
+
position: absolute;
|
|
395
|
+
top: 0;
|
|
396
|
+
left: 0;
|
|
397
|
+
width: 100%;
|
|
398
|
+
height: 100%;
|
|
399
|
+
background: linear-gradient(
|
|
400
|
+
135deg,
|
|
401
|
+
transparent 0%,
|
|
402
|
+
transparent 30%,
|
|
403
|
+
rgba(255, 255, 255, 0.1) 50%,
|
|
404
|
+
rgba(255, 255, 255, 0.3) 60%,
|
|
405
|
+
rgba(255, 255, 255, 0.1) 70%,
|
|
406
|
+
transparent 100%
|
|
407
|
+
);
|
|
408
|
+
transform: translateX(-100%) translateY(-100%);
|
|
409
|
+
transition: transform 0.3s ease-out;
|
|
410
|
+
pointer-events: none;
|
|
411
|
+
z-index: 1;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
/* 只在悬停图片容器时触发光效动画 */
|
|
415
|
+
.image-container:hover .light-effect {
|
|
416
|
+
transform: translateX(100%) translateY(100%);
|
|
417
|
+
}
|
|
385
418
|
</style>
|
|
386
419
|
|