vueuse icon indicating copy to clipboard operation
vueuse copied to clipboard

[Bug] breakpoints.ts is wrong

Open Jesse205 opened this issue 1 year ago • 0 comments

Describe the bug

This file: https://github.com/vueuse/vueuse/blob/main/packages/core/useBreakpoints/breakpoints.ts

I tested these breakpoints.

  • breakpointsVuetify, width 496, but got [], missing xs image
  • breakpointsVuetify, width 667, but got ["xs"], missing sm image
  • breakpointsVuetify, width 1015, but got ["xs", "sm"], missing md image

Its results are different from vuetify's table.

Deice code Type Range
Extra small xs Small to large phone < 600px
Small sm Small to medium tablet 600px > < 960px
Medium md Large tablet to laptop 960px > < 1264px*
Large lg Desktop 1264px > < 1904px*
Extra large xl 4k and ultra-wide > 1904px*

I think it should be like breakpointsBootstrapV5, where xs is set to 0 and the other numbers are moved back one code in order.

Also, I looked at the documentation, Tailwind, MasterCss are fine, AntDesign points out on another page that xs is a width less than 576, quasar have the same problem with Vuetify, and PrimeFlex's documentation points to a 404 page.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qvqxdv/?file=src%2FApp.vue,package.json

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i3-4170 CPU @ 3.70GHz
    Memory: 1.64 GB / 11.87 GB
  Binaries:
    Node: 21.2.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - D:\Program Files\nodejs\yarn.CMD
    npm: 10.2.3 - D:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.0 - D:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.19041.3636

Used Package Manager

pnpm

Validations

  • [X] Follow our Code of Conduct
  • [X] Read the Contributing Guidelines.
  • [X] Read the docs.
  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
  • [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
  • [X] The provided reproduction is a minimal reproducible example of the bug.

Jesse205 avatar Jan 08 '24 21:01 Jesse205