feat(useBreakpoint): tailwind breakpoint composable

.eslintrc-auto-import.json

@@ -338,6 +338,7 @@
     "useStickyTableHeader": true,
     "TableSymbol": true,
     "createTableDefaults": true,
-    "useTable": true
+    "useTable": true,
+    "useBreakpoint": true
   }
 }

example/src/App.vue

@@ -28,6 +28,15 @@ const navigation = ref([
       { to: { name: 'badges' }, title: 'Badges' },
     ],
   },
+  {
+    title: 'Components',
+    links: [
+      {
+        to: { name: 'breakpoint' },
+        title: 'Breakpoint',
+      },
+    ],
+  },
 ]);
 
 const css = useCssModule();

example/src/router/index.ts

@@ -110,6 +110,11 @@ const router = new VueRouter({
       name: 'badges',
       component: () => import('@/views/BadgeView.vue'),
     },
+    {
+      path: '/breakpoint',
+      name: 'breakpoint',
+      component: () => import('@/views/BreakpointView.vue'),
+    },
   ],
 });
 

example/src/views/BreakpointView.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { RuiChip, useBreakpoint } from '@rotki/ui-library-compat';
+import { computed } from 'vue';
+import { get } from '@vueuse/shared';
+
+const {
+  name,
+  width,
+  isXs,
+  isSm,
+  isMd,
+  isLg,
+  isXl,
+  is2xl,
+  isXsAndUp,
+  isSmAndUp,
+  isMdAndUp,
+  isLgAndUp,
+  isXlAndUp,
+  is2xlAndUp,
+  isXsAndDown,
+  isSmAndDown,
+  isMdAndDown,
+  isLgAndDown,
+  isXlAndDown,
+  is2xlAndDown,
+} = useBreakpoint();
+
+const groups = computed(() => [
+  [
+    { name: 'Name', value: get(name) },
+    { name: 'Width', value: get(width) },
+  ],
+  [
+    { name: 'isXs', value: get(isXs) },
+    { name: 'isSm', value: get(isSm) },
+    { name: 'isMd', value: get(isMd) },
+    { name: 'isLg', value: get(isLg) },
+    { name: 'isXl', value: get(isXl) },
+    { name: 'is2xl', value: get(is2xl) },
+  ],
+  [
+    { name: 'isXsAndUp', value: get(isXsAndUp) },
+    { name: 'isSmAndUp', value: get(isSmAndUp) },
+    { name: 'isMdAndUp', value: get(isMdAndUp) },
+    { name: 'isLgAndUp', value: get(isLgAndUp) },
+    { name: 'isXlAndUp', value: get(isXlAndUp) },
+    { name: 'is2xlAndUp', value: get(is2xlAndUp) },
+  ],
+  [
+    { name: 'isXsAndDown', value: get(isXsAndDown) },
+    { name: 'isSmAndDown', value: get(isSmAndDown) },
+    { name: 'isMdAndDown', value: get(isMdAndDown) },
+    { name: 'isLgAndDown', value: get(isLgAndDown) },
+    { name: 'isXlAndDown', value: get(isXlAndDown) },
+    { name: 'is2xlAndDown', value: get(is2xlAndDown) },
+  ],
+]);
+</script>
+
+<template>
+  <div>
+    <h2 class="text-h4 mb-2" data-cy="breakpoint">Breakpoint</h2>
+    <h5 class="text-h5 mb-8 text-rui-text-secondary">
+      Resize the browser window!
+    </h5>
+    <div>
+      <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div v-for="(group, i) in groups" :key="i" class="flex flex-col gap-1">
+          <div
+            v-for="(item, j) in group"
+            :key="j"
+            class="flex gap-4 items-center"
+          >
+            <span class="text-subtitle-2 font-bold">{{ item.name }}:</span>
+            <RuiChip
+              tile
+              size="sm"
+              :color="item.value === true ? 'primary' : undefined"
+            >
+              {{ item.value }}
+            </RuiChip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/composables/breakpoint.ts

@@ -0,0 +1,54 @@
+import { breakpointsTailwind } from '@vueuse/core';
+import { camelCase } from 'scule';
+import { type Ref } from 'vue';
+
+export const useBreakpoint = () => {
+  const { width } = useWindowSize();
+
+  const breakpointList = {
+    xs: 0,
+    ...breakpointsTailwind,
+  } as const;
+
+  type Breakpoint = keyof typeof breakpointList;
+
+  const breakpoints = useBreakpoints(breakpointList);
+
+  const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;
+
+  const list = getKeys(breakpointList);
+
+  const rawSizes: [Breakpoint, Ref<boolean>][] = list.map(
+    (breakpoint, index) => [
+      breakpoint,
+      index < list.length - 1
+        ? breakpoints.between(breakpoint, list[index + 1])
+        : breakpoints[breakpoint],
+    ],
+  );
+
+  const sizes = rawSizes.map(([breakpoint, value]) => [
+    camelCase(`is_${breakpoint}`),
+    value,
+  ]);
+
+  const sizesUp = list.map((breakpoint) => [
+    camelCase(`is_${breakpoint}_and_up`),
+    breakpoints.greaterOrEqual(breakpoint),
+  ]);
+
+  const sizesDown = list.map((breakpoint) => [
+    camelCase(`is_${breakpoint}_and_down`),
+    breakpoints.smaller(breakpoint),
+  ]);
+
+  const name = computed(() => rawSizes.find((item) => get(item[1]))?.[0] || '');
+
+  return {
+    ...Object.fromEntries(sizes),
+    ...Object.fromEntries(sizesUp),
+    ...Object.fromEntries(sizesDown),
+    width,
+    name,
+  };
+};

src/composables/index.ts

@@ -1,3 +1,5 @@
 export { useIcons } from '@/composables/icons';
 
 export { useRotkiTheme } from '@/composables/theme';
+
+export { useBreakpoint } from '@/composables/breakpoint';