compote-ui 0.19.0 → 0.19.1
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.
|
@@ -74,22 +74,23 @@
|
|
|
74
74
|
|
|
75
75
|
<ImageCropper.RootProvider value={imageCropper}>
|
|
76
76
|
<ImageCropper.Viewport
|
|
77
|
-
class="relative overflow-hidden rounded-lg bg-surface-2"
|
|
77
|
+
class="relative overflow-hidden rounded-lg bg-surface-2 max-h-[60vh]"
|
|
78
78
|
style={imageAspectRatio ? `aspect-ratio: ${imageAspectRatio}` : 'aspect-ratio: 1'}
|
|
79
79
|
>
|
|
80
80
|
<ImageCropper.Image
|
|
81
81
|
{src}
|
|
82
82
|
{alt}
|
|
83
83
|
crossorigin="anonymous"
|
|
84
|
-
class="pointer-events-none absolute inset-0 h-full w-full object-
|
|
84
|
+
class="pointer-events-none absolute inset-0 h-full w-full object-contain select-none"
|
|
85
85
|
/>
|
|
86
86
|
<ImageCropper.Selection
|
|
87
87
|
class="cursor-move border-2 border-white/50 [box-shadow:0_0_0_9999px_rgb(0_0_0/0.5)] outline-none focus-visible:border-primary data-dragging:cursor-grabbing data-dragging:border-white/80"
|
|
88
88
|
>
|
|
89
89
|
{#each ImageCropper.handles as position (position)}
|
|
90
|
+
{@const isCorner = ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(position)}
|
|
90
91
|
<ImageCropper.Handle
|
|
91
92
|
{position}
|
|
92
|
-
class="absolute flex touch-none items-center justify-center
|
|
93
|
+
class="group absolute flex size-5 touch-none items-center justify-center
|
|
93
94
|
data-[position=bottom]:cursor-ns-resize
|
|
94
95
|
data-[position=bottom-left]:cursor-nesw-resize
|
|
95
96
|
data-[position=bottom-right]:cursor-nwse-resize
|
|
@@ -99,7 +100,20 @@
|
|
|
99
100
|
data-[position=top-left]:cursor-nwse-resize
|
|
100
101
|
data-[position=top-right]:cursor-nesw-resize"
|
|
101
102
|
>
|
|
102
|
-
|
|
103
|
+
{#if isCorner}
|
|
104
|
+
<div
|
|
105
|
+
class="size-2 shadow-sm transition-transform group-hover:scale-110
|
|
106
|
+
group-data-[position=top-left]:border-l-2 group-data-[position=top-left]:border-t-2
|
|
107
|
+
group-data-[position=top-right]:border-r-2 group-data-[position=top-right]:border-t-2
|
|
108
|
+
group-data-[position=bottom-right]:border-r-2 group-data-[position=bottom-right]:border-b-2
|
|
109
|
+
group-data-[position=bottom-left]:border-l-2 group-data-[position=bottom-left]:border-b-2
|
|
110
|
+
border-white"
|
|
111
|
+
></div>
|
|
112
|
+
{:else}
|
|
113
|
+
<div
|
|
114
|
+
class="size-1.5 rounded-full bg-white opacity-0 shadow-sm transition-opacity group-hover:opacity-100"
|
|
115
|
+
></div>
|
|
116
|
+
{/if}
|
|
103
117
|
</ImageCropper.Handle>
|
|
104
118
|
{/each}
|
|
105
119
|
<ImageCropper.Grid
|