vue-responsiveness/dist/vue-responsiveness.js

A tiny, performant, and intuitive Vue 3 plugin for working with responsive breakpoints and media queries at runtime.

import { reactive as p, computed as i } from "vue";
const g = {
  Ant_Design: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1600
  },
  Bootstrap_3: {
    xs: 0,
    sm: 576,
    lg: 992
  },
  Bootstrap_4: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  },
  Bootstrap_5: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
    xxl: 1400
  },
  Bulma: {
    mobile: 0,
    tablet: 769,
    desktop: 1024,
    widescreen: 1216,
    fullhd: 1408
  },
  Chakra: {
    xs: 0,
    sm: 480,
    md: 768,
    lg: 992,
    xl: 1280,
    "2xl": 1472
  },
  Foundation: {
    small: 0,
    medium: 640,
    large: 1024,
    xlarge: 1200,
    xxlarge: 1440
  },
  Ionic: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  },
  Master_CSS: {
    "3xs": 360,
    "2xs": 480,
    xs: 600,
    sm: 768,
    md: 1024,
    lg: 1280,
    xl: 1440,
    "2xl": 1600,
    "3xl": 1920,
    "4xl": 2560
  },
  Material_Design: {
    xs: 0,
    sm_8: 600,
    sm_12: 905,
    md: 1240,
    lg: 1440
  },
  Materialize: {
    s: 0,
    m: 600,
    l: 992,
    xl: 1200
  },
  Material_UI: {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1260,
    xl: 1920
  },
  Quasar: {
    xs: 0,
    sm: 600,
    md: 1024,
    lg: 1440,
    xl: 1920
  },
  Semantic_UI: {
    mobile: 0,
    tablet: 768,
    small_monitor: 992,
    large_monitor: 1200
  },
  Skeleton: {
    mobile: 0,
    phablet: 400,
    tablet: 550,
    desktop: 750,
    desktop_hd: 1e3,
    desktop_hd_lg: 1200
  },
  Tailwind_CSS: {
    xs: 0,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    "2xl": 1536
  },
  Vuetify: {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1280,
    xl: 1920
  },
  Windi_CSS: {
    xs: 0,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    "2xl": 1536
  }
};
let t;
const u = {
  install(h, f = g.Bootstrap_5) {
    const m = Object.entries(f).sort(([, s], [, e]) => Number(s) - Number(e)).reduce(
      (s, [e, a], r, o) => {
        var n;
        return s[e] = {
          min: a ? `(min-width: ${a}px)` : "",
          max: (n = o[r + 1]) != null && n[1] ? `(max-width: ${o[r + 1][1] - 0.1}px)` : ""
        }, s;
      },
      {}
    );
    t = p({
      isMin: i(() => (s) => {
        var e;
        return ((e = t[s]) == null ? void 0 : e.min) || !1;
      }),
      isMax: i(() => (s) => {
        var e;
        return ((e = t[s]) == null ? void 0 : e.max) || !1;
      }),
      isOnly: i(() => (s) => {
        var e;
        return ((e = t[s]) == null ? void 0 : e.only) || !1;
      }),
      current: i(
        () => Object.keys(m).find((s) => t[s].only) || ""
      ),
      hover: "hover",
      orientation: "landscape",
      prefers: {
        colorScheme: "light",
        contrast: "no-preference",
        reducedMotion: "no-preference"
      },
      ...Object.keys(m).reduce((s, e) => (s[e] = { min: !1, max: !1, only: !1 }, s), {})
    }), typeof window < "u" && (Object.entries(m).forEach(([e, a]) => {
      const r = {
        min: window.matchMedia(a.min),
        max: window.matchMedia(a.max)
      };
      Object.entries(r).forEach(([o, n]) => {
        const l = ({
          matches: c
        }) => {
          const { min: d, max: x } = {
            ...t[e],
            [o]: c
          };
          t[e] = { min: d, max: x, only: d && x };
        };
        n.addEventListener("change", l), l(n);
      });
    }), [
      ["orientation", ["portrait", "landscape"]],
      ["hover", ["none", "hover"]],
      ["prefers-color-scheme", ["dark", "light"], "colorScheme"],
      [
        "prefers-contrast",
        ["more", "less", "custom", "no-preference"],
        "contrast"
      ],
      ["prefers-reduced-motion", ["reduce", "no-preference"], "reducedMotion"]
    ].forEach(([e, a, r]) => {
      a.forEach((o) => {
        const n = window.matchMedia(`(${e}: ${o})`), l = (c) => {
          if (c.matches)
            switch (e) {
              case "orientation": {
                t[e] = o;
                break;
              }
              case "hover": {
                t[e] = o;
                break;
              }
              default:
                switch (r) {
                  case "colorScheme":
                    t.prefers[r] = o;
                    break;
                  case "contrast":
                    t.prefers[r] = o;
                    break;
                  case "reducedMotion":
                    t.prefers[r] = o;
                    break;
                }
            }
        };
        n.addEventListener("change", l), l(n);
      });
    })), h.config.globalProperties.$matches = t;
  }
}, _ = () => t;
export {
  g as Presets,
  u as VueResponsiveness,
  _ as useMatches
};