atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

refactor(style): utilize tailwind instead of CSS

Browse Source
This commit is contained in:
Alfarish Fizikri
2025-07-24 04:29:23 +07:00
parent 82f1a6fcbd
commit 71c0503e24
1 changed files with 19 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/content/Components/Counter/Counter.vue
View File

@@ -1,29 +1,21 @@
<template> <template>
<div class="counter-container" :style="containerStyle"> <div class="relative inline-block" :style="containerStyle">
<div <div class="flex overflow-hidden" :style="counterStyles">
class="counter-counter" <div v-for="place in places" :key="place" class="relative w-[1ch] tabular-nums" :style="digitStyles">
:style="counterStyles"
>
<div
v-for="place in places"
:key="place"
class="counter-digit"
:style="digitStyles"
>
<Motion <Motion
v-for="digit in 10" v-for="digit in 10"
:key="digit - 1" :key="digit - 1"
tag="span" tag="span"
class="counter-number" class="absolute top-0 left-0 w-full h-full flex items-center justify-center"
:animate="{ y: getDigitPosition(place, digit - 1) }" :animate="{ y: getDigitPosition(place, digit - 1) }"
> >
{{ digit - 1 }} {{ digit - 1 }}
</Motion> </Motion>
</div> </div>
</div> </div>
<div class="gradient-container"> <div class="pointer-events-none absolute inset-0">
<div class="top-gradient" :style="topGradientStyle || topGradientStyles" /> <div class="absolute top-0 w-full" :style="topGradientStyle ?? topGradientStyles" />
<div class="bottom-gradient" :style="bottomGradientStyle || bottomGradientStyles" /> <div class="absolute bottom-0 w-full" :style="bottomGradientStyle ?? bottomGradientStyles" />
</div> </div>
</div> </div>
</template> </template>
@@ -90,15 +82,19 @@ const digitStyles = computed(() => ({
...props.digitStyle ...props.digitStyle
})); }));
const topGradientStyles = computed((): CSSProperties => ({ const topGradientStyles = computed(
(): CSSProperties => ({
height: `${props.gradientHeight}px`, height: `${props.gradientHeight}px`,
background: `linear-gradient(to bottom, ${props.gradientFrom}, ${props.gradientTo})` background: `linear-gradient(to bottom, ${props.gradientFrom}, ${props.gradientTo})`
})); })
);
const bottomGradientStyles = computed((): CSSProperties => ({ const bottomGradientStyles = computed(
(): CSSProperties => ({
height: `${props.gradientHeight}px`, height: `${props.gradientHeight}px`,
background: `linear-gradient(to top, ${props.gradientFrom}, ${props.gradientTo})` background: `linear-gradient(to top, ${props.gradientFrom}, ${props.gradientTo})`
})); })
);
const springValues = ref<Record<number, number>>({}); const springValues = ref<Record<number, number>>({});
@@ -163,57 +159,3 @@ const getDigitPosition = (place: number, digit: number): number => {
return position; return position;
}; };
</script> </script>
<style scoped>
.counter-container {
position: relative;
display: inline-block;
}
.counter-counter {
display: flex;
overflow: hidden;
line-height: 1;
}
.counter-digit {
position: relative;
width: 1ch;
font-variant-numeric: tabular-nums;
}
.counter-number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
.gradient-container {
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.top-gradient {
position: absolute;
top: 0;
width: 100%;
}
.bottom-gradient {
position: absolute;
bottom: 0;
width: 100%;
}
</style>