Skip to content

Commit 33dd131

Browse files
danielroedanielroe
committed
refactor: drop motion-v in favour of vue transition
1 parent 950ae08 commit 33dd131

3 files changed

Lines changed: 117 additions & 117 deletions

File tree

‎app/components/diff/ViewerPanel.vue‎

Lines changed: 117 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import type { FileDiffResponse, FileChange, DiffHunk } from '#shared/types'
33
import { createDiff, insertSkipBlocks, countDiffStats } from '#shared/utils/diff'
44
import { onClickOutside } from '@vueuse/core'
5-
import { motion } from 'motion-v'
65
76
const props = defineProps<{
87
packageName: string
@@ -281,134 +280,139 @@ function getCodeUrl(version: string): string {
281280
</button>
282281

283282
<!-- Dropdown menu -->
284-
<motion.div
285-
v-if="showOptions"
286-
class="absolute inset-ie-0 top-full mt-2 z-20 p-4 bg-bg-elevated border border-border shadow-2xl overflow-auto"
287-
:style="{
288-
width: mergeModifiedLines
289-
? 'min(420px, calc(100vw - 24px))'
290-
: 'min(320px, calc(100vw - 24px))',
291-
maxWidth: 'calc(100vw - 24px)',
292-
maxHeight: '70vh',
293-
borderRadius: mergeModifiedLines ? '14px' : '20px',
294-
}"
295-
:initial="{ opacity: 0, y: -4, scale: 0.98 }"
296-
:animate="{ opacity: 1, y: 0, scale: 1 }"
297-
:transition="{ type: 'spring', stiffness: 550, damping: 45, mass: 0.7 }"
283+
<Transition
284+
enter-active-class="transition duration-150 ease-out motion-reduce:transition-none"
285+
enter-from-class="opacity-0 scale-95 motion-reduce:scale-100"
286+
enter-to-class="opacity-100 scale-100"
287+
leave-active-class="transition duration-100 ease-in motion-reduce:transition-none"
288+
leave-from-class="opacity-100 scale-100"
289+
leave-to-class="opacity-0 scale-95 motion-reduce:scale-100"
298290
>
299-
<div class="flex flex-col gap-2">
300-
<!-- Merge modified lines toggle -->
301-
<SettingsToggle label="Merge modified lines" v-model="mergeModifiedLines" />
302-
303-
<!-- Word wrap toggle -->
304-
<SettingsToggle label="Word wrap" v-model="wordWrap" />
305-
306-
<!-- Sliders -->
307-
<motion.div
308-
class="flex flex-col gap-2"
309-
:animate="{ opacity: mergeModifiedLines ? 1 : 0 }"
310-
>
311-
<!-- Change ratio slider -->
312-
<div class="sr-only">
313-
<label for="change-ratio">Change ratio</label>
314-
</div>
291+
<div
292+
v-if="showOptions"
293+
class="absolute inset-ie-0 top-full mt-2 z-20 p-4 bg-bg-elevated border border-border rounded-xl shadow-2xl overflow-auto"
294+
:style="{
295+
width: mergeModifiedLines
296+
? 'min(420px, calc(100vw - 24px))'
297+
: 'min(320px, calc(100vw - 24px))',
298+
maxWidth: 'calc(100vw - 24px)',
299+
maxHeight: '70vh',
300+
}"
301+
>
302+
<div class="flex flex-col gap-2">
303+
<!-- Merge modified lines toggle -->
304+
<SettingsToggle label="Merge modified lines" v-model="mergeModifiedLines" />
305+
306+
<!-- Word wrap toggle -->
307+
<SettingsToggle label="Word wrap" v-model="wordWrap" />
308+
309+
<!-- Sliders -->
315310
<div
316-
class="slider-shell w-full min-w-0"
317-
:class="{ 'is-disabled': !mergeModifiedLines }"
311+
class="flex flex-col gap-2 transition-opacity duration-150"
312+
:class="mergeModifiedLines ? 'opacity-100' : 'opacity-0'"
318313
>
319-
<div class="slider-labels">
320-
<span class="slider-label">Change ratio</span>
321-
<span class="slider-value tabular-nums">{{ maxChangeRatio.toFixed(2) }}</span>
314+
<!-- Change ratio slider -->
315+
<div class="sr-only">
316+
<label for="change-ratio">Change ratio</label>
322317
</div>
323-
<div class="slider-track">
324-
<div
325-
v-for="mark in changeRatioMarks"
326-
:key="`cr-${mark}`"
327-
class="slider-mark"
328-
:style="{ left: `calc(${mark}% - 11px)` }"
318+
<div
319+
class="slider-shell w-full min-w-0"
320+
:class="{ 'is-disabled': !mergeModifiedLines }"
321+
>
322+
<div class="slider-labels">
323+
<span class="slider-label">Change ratio</span>
324+
<span class="slider-value tabular-nums">{{ maxChangeRatio.toFixed(2) }}</span>
325+
</div>
326+
<div class="slider-track">
327+
<div
328+
v-for="mark in changeRatioMarks"
329+
:key="`cr-${mark}`"
330+
class="slider-mark"
331+
:style="{ left: `calc(${mark}% - 11px)` }"
332+
/>
333+
<div class="slider-range" :style="{ width: `${changeRatioPercent}%` }" />
334+
</div>
335+
<input
336+
id="change-ratio"
337+
v-model.number="maxChangeRatio"
338+
type="range"
339+
min="0"
340+
max="1"
341+
step="0.01"
342+
:disabled="!mergeModifiedLines"
343+
class="slider-input"
329344
/>
330-
<div class="slider-range" :style="{ width: `${changeRatioPercent}%` }" />
331345
</div>
332-
<input
333-
id="change-ratio"
334-
v-model.number="maxChangeRatio"
335-
type="range"
336-
min="0"
337-
max="1"
338-
step="0.01"
339-
:disabled="!mergeModifiedLines"
340-
class="slider-input"
341-
/>
342-
</div>
343346

344-
<!-- Diff distance slider -->
345-
<div class="sr-only">
346-
<label for="diff-distance">Diff distance</label>
347-
</div>
348-
<div
349-
class="slider-shell w-full min-w-0"
350-
:class="{ 'is-disabled': !mergeModifiedLines }"
351-
>
352-
<div class="slider-labels">
353-
<span class="slider-label">Diff distance</span>
354-
<span class="slider-value tabular-nums">{{ maxDiffDistance }}</span>
347+
<!-- Diff distance slider -->
348+
<div class="sr-only">
349+
<label for="diff-distance">Diff distance</label>
355350
</div>
356-
<div class="slider-track">
357-
<div
358-
v-for="mark in diffDistanceMarks"
359-
:key="`dd-${mark}`"
360-
class="slider-mark"
361-
:style="{ left: `calc(${mark}% - 11px)` }"
351+
<div
352+
class="slider-shell w-full min-w-0"
353+
:class="{ 'is-disabled': !mergeModifiedLines }"
354+
>
355+
<div class="slider-labels">
356+
<span class="slider-label">Diff distance</span>
357+
<span class="slider-value tabular-nums">{{ maxDiffDistance }}</span>
358+
</div>
359+
<div class="slider-track">
360+
<div
361+
v-for="mark in diffDistanceMarks"
362+
:key="`dd-${mark}`"
363+
class="slider-mark"
364+
:style="{ left: `calc(${mark}% - 11px)` }"
365+
/>
366+
<div class="slider-range" :style="{ width: `${diffDistancePercent}%` }" />
367+
</div>
368+
<input
369+
id="diff-distance"
370+
v-model.number="maxDiffDistance"
371+
type="range"
372+
min="1"
373+
max="60"
374+
step="1"
375+
:disabled="!mergeModifiedLines"
376+
class="slider-input"
362377
/>
363-
<div class="slider-range" :style="{ width: `${diffDistancePercent}%` }" />
364378
</div>
365-
<input
366-
id="diff-distance"
367-
v-model.number="maxDiffDistance"
368-
type="range"
369-
min="1"
370-
max="60"
371-
step="1"
372-
:disabled="!mergeModifiedLines"
373-
class="slider-input"
374-
/>
375-
</div>
376379

377-
<!-- Char edits slider -->
378-
<div class="sr-only">
379-
<label for="char-edits">Char edits</label>
380-
</div>
381-
<div
382-
class="slider-shell w-full min-w-0"
383-
:class="{ 'is-disabled': !mergeModifiedLines }"
384-
>
385-
<div class="slider-labels">
386-
<span class="slider-label">Char edits</span>
387-
<span class="slider-value tabular-nums">{{ inlineMaxCharEdits }}</span>
380+
<!-- Char edits slider -->
381+
<div class="sr-only">
382+
<label for="char-edits">Char edits</label>
388383
</div>
389-
<div class="slider-track">
390-
<div
391-
v-for="mark in charEditMarks"
392-
:key="`ce-${mark}`"
393-
class="slider-mark"
394-
:style="{ left: `calc(${mark}% - 11px)` }"
384+
<div
385+
class="slider-shell w-full min-w-0"
386+
:class="{ 'is-disabled': !mergeModifiedLines }"
387+
>
388+
<div class="slider-labels">
389+
<span class="slider-label">Char edits</span>
390+
<span class="slider-value tabular-nums">{{ inlineMaxCharEdits }}</span>
391+
</div>
392+
<div class="slider-track">
393+
<div
394+
v-for="mark in charEditMarks"
395+
:key="`ce-${mark}`"
396+
class="slider-mark"
397+
:style="{ left: `calc(${mark}% - 11px)` }"
398+
/>
399+
<div class="slider-range" :style="{ width: `${charEditPercent}%` }" />
400+
</div>
401+
<input
402+
id="char-edits"
403+
v-model.number="inlineMaxCharEdits"
404+
type="range"
405+
min="0"
406+
max="10"
407+
step="1"
408+
:disabled="!mergeModifiedLines"
409+
class="slider-input"
395410
/>
396-
<div class="slider-range" :style="{ width: `${charEditPercent}%` }" />
397411
</div>
398-
<input
399-
id="char-edits"
400-
v-model.number="inlineMaxCharEdits"
401-
type="range"
402-
min="0"
403-
max="10"
404-
step="1"
405-
:disabled="!mergeModifiedLines"
406-
class="slider-input"
407-
/>
408412
</div>
409-
</motion.div>
413+
</div>
410414
</div>
411-
</motion.div>
415+
</Transition>
412416
</div>
413417

414418
<!-- View in code browser -->

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@
9191
"gray-matter": "4.0.3",
9292
"marked": "17.0.3",
9393
"module-replacements": "2.11.0",
94-
"motion-v": "1.10.2",
9594
"nuxt": "4.3.1",
9695
"nuxt-og-image": "5.1.13",
9796
"ofetch": "1.5.1",

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)