Responsive sizing?

[notflip]

Is your feature request related to a problem? Please describe.
This is more a discussion or question, but I'm wondering if responsive sizing is possible, so instead of a fixed "size" parameter, using percentage?

[setaman]

At the moment, unfortunately, only fixed values work. The circumference is calculated based on different parameters (e.g. thickness of the line, the size of the dot, etc.). Relative size would make this calculation much more complex.

But I don't say that I exclude it completely. Maybe in the future I will give it a try, I also think that would be a useful feature

[notflip]

@setaman That makes sense, I understand! Thanks for this plugin, I love it.

[setaman]

I'm glad it is useful

[kalnode]

Not being responsive is the primary reason I'm looking elsewhere =(.

[notflip]

@kalnode I used the following setup in Nuxt. (will work in Vue too). It's sort-of responsive, but with this composable I can set a size for each of the breakpoints in my app.

 <ve-progress
    :progress="99"
    :size="breakpoints.is === 'xs' ? 130 : 200"
>

<script>
const { breakpoints } = useBreakpoint()
</script>

The breakpoints composable is copied from somewhere

import { onMounted, reactive } from 'vue'

const screens = {
    xs: 320,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280
}

const breakpoints = reactive({ w: 0, h: 0, is: 'xs' })

const xs = (val) => val >= screens.xs && val < screens.sm
const sm = (val) => val >= screens.sm && val < screens.md
const md = (val) => val >= screens.md && val < screens.lg
const lg = (val) => val >= screens.lg && val < screens.xl
const xl = (val) => val >= screens.xl

const getBreakpoint = (w) => {
    if (xs(w)) return 'xs'
    else if (sm(w)) return 'sm'
    else if (md(w)) return 'md'
    else if (lg(w)) return 'lg'
    else if (xl(w)) return 'xl'
    else return 'all'
}

const setBreakpoint = () => {
    breakpoints.w = window.innerWidth
    breakpoints.h = window.innerHeight
    breakpoints.is = getBreakpoint(window.innerWidth)
}

const useBreakpoint = () => {
    onMounted(() => {
        setBreakpoint()
        window.addEventListener('resize', () => {
            setBreakpoint()
        })
    })

    return {
        breakpoints
    }
}

export default useBreakpoint

[setaman]

This is a good "work around" @notflip, thanks for sharing. Probably the front end framework of your choice will already have similar composable, like useDisplay from Vuetify, or you could even use useBreakpoints provided by Vueuse.

@kalnode let me know if you find something