@fy-/fws-vue 2.2.47 → 2.2.48
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/components/ui/DefaultGallery.vue +30 -18
- package/package.json +1 -1
|
@@ -754,7 +754,7 @@ onUnmounted(() => {
|
|
|
754
754
|
<button
|
|
755
755
|
v-if="images.length > 1 && scale <= 1"
|
|
756
756
|
aria-label="Previous image"
|
|
757
|
-
class="rounded-full p-3 bg-black/50 backdrop-blur-sm
|
|
757
|
+
class="rounded-full p-3 bg-black/50 backdrop-blur-sm"
|
|
758
758
|
@click="goPrevImage"
|
|
759
759
|
>
|
|
760
760
|
<ArrowLeftCircleIcon class="w-6 h-6" />
|
|
@@ -764,7 +764,7 @@ onUnmounted(() => {
|
|
|
764
764
|
<button
|
|
765
765
|
v-if="scale > 1"
|
|
766
766
|
aria-label="Reset zoom"
|
|
767
|
-
class="rounded-full p-2 bg-black/50 backdrop-blur-sm
|
|
767
|
+
class="rounded-full p-2 bg-black/50 backdrop-blur-sm"
|
|
768
768
|
@click="scale = 1; panPosition.x = 0; panPosition.y = 0"
|
|
769
769
|
>
|
|
770
770
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
@@ -775,7 +775,7 @@ onUnmounted(() => {
|
|
|
775
775
|
<button
|
|
776
776
|
v-if="images.length > 1 && scale <= 1"
|
|
777
777
|
aria-label="Next image"
|
|
778
|
-
class="rounded-full p-3 bg-black/50 backdrop-blur-sm
|
|
778
|
+
class="rounded-full p-3 bg-black/50 backdrop-blur-sm"
|
|
779
779
|
@click="goNextImage"
|
|
780
780
|
>
|
|
781
781
|
<ArrowRightCircleIcon class="w-6 h-6" />
|
|
@@ -862,8 +862,8 @@ onUnmounted(() => {
|
|
|
862
862
|
<template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
|
|
863
863
|
<div class="group overflow-hidden rounded-lg relative">
|
|
864
864
|
<!-- Visual feedback for the tap action on mobile -->
|
|
865
|
-
<div class="absolute inset-0 bg-black/30 opacity-0
|
|
866
|
-
<div class="bg-black/60 rounded-full p-2 transform scale-0 group-hover
|
|
865
|
+
<div class="absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center z-[1] group-hover-opacity-100 group-active-opacity-100">
|
|
866
|
+
<div class="bg-black/60 rounded-full p-2 transform scale-0 transition-transform duration-300 group-hover-scale-100 group-active-scale-100">
|
|
867
867
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
868
868
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
|
|
869
869
|
</svg>
|
|
@@ -872,7 +872,7 @@ onUnmounted(() => {
|
|
|
872
872
|
|
|
873
873
|
<img
|
|
874
874
|
v-if="i + j - 2 < images.length && imageComponent === 'img'"
|
|
875
|
-
class="h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover
|
|
875
|
+
class="h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102"
|
|
876
876
|
:src="getThumbnailUrl(images[i + j - 2])"
|
|
877
877
|
:alt="`Gallery image ${i + j - 1}`"
|
|
878
878
|
@click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
|
|
@@ -883,7 +883,7 @@ onUnmounted(() => {
|
|
|
883
883
|
:image="getThumbnailUrl(images[i + j - 2]).image"
|
|
884
884
|
:variant="getThumbnailUrl(images[i + j - 2]).variant"
|
|
885
885
|
:alt="getThumbnailUrl(images[i + j - 2]).alt"
|
|
886
|
-
:class="`h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover
|
|
886
|
+
:class="`h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102 ${getBorderColor(images[i + j - 2])}`"
|
|
887
887
|
:likes="getThumbnailUrl(images[i + j - 2]).likes"
|
|
888
888
|
:show-likes="getThumbnailUrl(images[i + j - 2]).showLikes"
|
|
889
889
|
:is-author="getThumbnailUrl(images[i + j - 2]).isAuthor"
|
|
@@ -900,8 +900,8 @@ onUnmounted(() => {
|
|
|
900
900
|
</div>
|
|
901
901
|
|
|
902
902
|
<!-- Visual overlay on hover with touch feedback -->
|
|
903
|
-
<div class="absolute inset-0 bg-black/30 opacity-0
|
|
904
|
-
<div class="bg-black/60 rounded-full p-2 transform scale-0 group-hover
|
|
903
|
+
<div class="absolute inset-0 bg-black/30 opacity-0 transition-opacity duration-300 flex items-center justify-center z-[1] group-hover-opacity-100 group-active-opacity-100">
|
|
904
|
+
<div class="bg-black/60 rounded-full p-2 transform scale-0 transition-transform duration-300 group-hover-scale-100 group-active-scale-100">
|
|
905
905
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
906
906
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
|
|
907
907
|
</svg>
|
|
@@ -910,7 +910,7 @@ onUnmounted(() => {
|
|
|
910
910
|
|
|
911
911
|
<img
|
|
912
912
|
v-if="imageComponent === 'img'"
|
|
913
|
-
class="h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover
|
|
913
|
+
class="h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102"
|
|
914
914
|
:src="getThumbnailUrl(images[i - 1])"
|
|
915
915
|
:alt="`Gallery image ${i}`"
|
|
916
916
|
@click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
|
|
@@ -921,7 +921,7 @@ onUnmounted(() => {
|
|
|
921
921
|
:image="getThumbnailUrl(images[i - 1]).image"
|
|
922
922
|
:variant="getThumbnailUrl(images[i - 1]).variant"
|
|
923
923
|
:alt="getThumbnailUrl(images[i - 1]).alt"
|
|
924
|
-
:class="`h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover
|
|
924
|
+
:class="`h-auto max-w-full rounded-lg cursor-pointer transform transition-transform duration-300 group-hover-scale-105 group-active-scale-102 ${getBorderColor(images[i - 1])}`"
|
|
925
925
|
:likes="getThumbnailUrl(images[i - 1]).likes"
|
|
926
926
|
:show-likes="getThumbnailUrl(images[i - 1]).showLikes"
|
|
927
927
|
:is-author="getThumbnailUrl(images[i - 1]).isAuthor"
|
|
@@ -1063,17 +1063,29 @@ onUnmounted(() => {
|
|
|
1063
1063
|
display: none; /* Chrome, Safari, Opera */
|
|
1064
1064
|
}
|
|
1065
1065
|
|
|
1066
|
-
/*
|
|
1067
|
-
.group-
|
|
1068
|
-
|
|
1066
|
+
/* Use direct CSS for hover/active states - avoid @apply for these */
|
|
1067
|
+
.group:hover .group-hover-opacity-100 {
|
|
1068
|
+
opacity: 1;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.group:hover .group-hover-scale-100 {
|
|
1072
|
+
transform: scale(1);
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
.group:hover .group-hover-scale-105 {
|
|
1076
|
+
transform: scale(1.05);
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.group:active .group-active-opacity-100 {
|
|
1080
|
+
opacity: 1;
|
|
1069
1081
|
}
|
|
1070
1082
|
|
|
1071
|
-
.group-active
|
|
1072
|
-
|
|
1083
|
+
.group:active .group-active-scale-100 {
|
|
1084
|
+
transform: scale(1);
|
|
1073
1085
|
}
|
|
1074
1086
|
|
|
1075
|
-
.group-active
|
|
1076
|
-
|
|
1087
|
+
.group:active .group-active-scale-102 {
|
|
1088
|
+
transform: scale(1.02);
|
|
1077
1089
|
}
|
|
1078
1090
|
|
|
1079
1091
|
/* Fullscreen mode */
|