Removed viewport component. Added useBreakpoint composable

vuelessjs · Apr 29, 2024 · ef605dd · ef605dd
1 parent d7e5481
commit ef605dd
Show file tree

Hide file tree

Showing 12 changed files with 9,547 additions and 166 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -14,11 +14,10 @@ import "./index.pcss";
 // Common stores
 import loader from "vueless/ui.loader-rendering/store";
 import loaderTop from "vueless/ui.other-loader-top/store";
-import breakpoint from "vueless/ui.viewport/store";
 
 // Create store instance
 const store = createStore({
-  modules: { loader, loaderTop, breakpoint },
+  modules: { loader, loaderTop },
 });
 
 // Create vueless instance

diff --git a/src/composable.breakpoint/index.js b/src/composable.breakpoint/index.js
@@ -0,0 +1,93 @@
+import { onMounted, ref, watch, computed } from "vue";
+
+const BREAKPOINT_NAME = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "2xl",
+};
+
+const BREAKPOINT = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+const mobileDevices = ["xs", "sm"];
+const portableDevices = ["xs", "sm", "md"];
+
+export default function useBreakpoint() {
+  let timeout;
+
+  const windowWidth = ref(undefined);
+  const currentBreakpoint = ref(BREAKPOINT_NAME.xs);
+
+  const isMobileBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isTabletBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isLaptopBreakpoint = computed(() => {
+    return currentBreakpoint.value === BREAKPOINT_NAME.lg;
+  });
+
+  const isPortableBreakpoint = computed(() => {
+    return portableDevices.includes(currentBreakpoint.value);
+  });
+
+  const elementSize = computed(() => {
+    return isMobileBreakpoint.value ? BREAKPOINT_NAME.md : BREAKPOINT_NAME.lg;
+  });
+
+  onMounted(() => {
+    windowWidth.value = window.innerWidth;
+
+    window.addEventListener(resizeListener, { passive: true });
+  });
+
+  watch(windowWidth, setBreakpoint, { immediate: true });
+
+  function resizeListener() {
+    if (timeout) {
+      window.cancelAnimationFrame(timeout);
+    }
+
+    timeout = window.requestAnimationFrame(() => {
+      windowWidth.value = window.innerWidth;
+    });
+  }
+
+  function setBreakpoint(newWindowWidth) {
+    if (newWindowWidth === undefined) return;
+
+    currentBreakpoint.value = "xs";
+
+    if (newWindowWidth >= BREAKPOINT.sm && newWindowWidth < BREAKPOINT.smd) {
+      currentBreakpoint.value = "sm";
+    } else if (newWindowWidth >= BREAKPOINT.md && newWindowWidth < BREAKPOINT.lg) {
+      currentBreakpoint.value = "md";
+    } else if (newWindowWidth >= BREAKPOINT.lg && newWindowWidth < BREAKPOINT.xl) {
+      currentBreakpoint.value = "lg";
+    } else if (newWindowWidth >= BREAKPOINT.xl && newWindowWidth < BREAKPOINT["2xl"]) {
+      currentBreakpoint.value = "xl";
+    } else if (newWindowWidth >= BREAKPOINT["2xl"]) {
+      currentBreakpoint.value = "2xl";
+    }
+  }
+
+  return {
+    isLaptopBreakpoint,
+    isTabletBreakpoint,
+    isMobileBreakpoint,
+    isPortableBreakpoint,
+    elementSize,
+  };
+}
diff --git a/src/ui.container-card/composable/attrs.composable.js b/src/ui.container-card/composable/attrs.composable.js
@@ -4,7 +4,7 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileDevice }) {
+export function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
@@ -33,7 +33,7 @@ export function useAttrs(props, { isMobileDevice }) {
 
   const footerAttrs = computed(() => {
     const footerMobileReverseClasses =
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse;
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse;
 
     return {
       ...footerAttrsRaw.value,

diff --git a/src/ui.container-card/index.vue b/src/ui.container-card/index.vue
@@ -40,7 +40,6 @@
 
 <script setup>
 import { computed, useSlots } from "vue";
-import { useStore } from "vuex";
 
 import UIService from "../service.ui";
 import UHeader from "../ui.text-header";
@@ -49,11 +48,11 @@ import UDivider from "../ui.container-divider";
 import { UCard } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composable/attrs.composable";
+import useBreakpoint from "../composable.breakpoint";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UCard", inheritAttrs: false });
 
-const store = useStore();
 const slots = useSlots();
 
 const props = defineProps({
@@ -127,9 +126,7 @@ const isShownFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const {
   hasSlotContent,
@@ -142,5 +139,5 @@ const {
   descriptionAttrs,
   contentAttrs,
   footerAttrs,
-} = useAttrs(props, { isMobileDevice });
+} = useAttrs(props, { isMobileBreakpoint });
 </script>
diff --git a/src/ui.container-modal/composables/attrs.composable.js b/src/ui.container-modal/composables/attrs.composable.js
@@ -2,13 +2,14 @@ import useUI from "../../composable.ui";
 import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
-import { useStore } from "vuex";
 import { computed } from "vue";
 
+import useBreakpoint from "../../composable.breakpoint";
+
 export function useAttrs(props) {
-  const store = useStore();
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config, "wrapper");
   const { modal } = config.value;
+  const { isMobileBreakpoint } = useBreakpoint();
 
   const cvaModal = cva({
     base: modal.base,
@@ -44,19 +45,15 @@ export function useAttrs(props) {
     ...headerAttrsRaw.value,
     class: cx([
       headerAttrsRaw.value.class,
-      props.mobileFooterReverse &&
-        store.getters["breakpoint/isMobileDevice"] &&
-        config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 
   const footerAttrs = computed(() => ({
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse &&
-        store.getters["breakpoint/isMobileDevice"] &&
-        config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

diff --git a/src/ui.container-page/composables/attrs.composable.js b/src/ui.container-page/composables/attrs.composable.js
@@ -4,7 +4,7 @@ import { cva, cx, isMobileApp } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileDevice }) {
+export function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { wrapper, page, rightRounding } = config.value;
 
@@ -62,15 +62,15 @@ export function useAttrs(props, { isMobileDevice }) {
     ...wrapperAttrsRaw.value,
     class: cx([
       wrapperAttrsRaw.value.class,
-      isMobileDevice.value && !isMobileApp && config.value.wrapperMobile,
+      isMobileBreakpoint.value && !isMobileApp && config.value.wrapperMobile,
     ]),
   }));
 
   const footerAttrs = computed(() => ({
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

diff --git a/src/ui.container-page/index.vue b/src/ui.container-page/index.vue
@@ -66,7 +66,8 @@
 
 <script setup>
 import { computed, useSlots, onMounted } from "vue";
-import { useStore } from "vuex";
+
+import useBreakpoint from "../composable.breakpoint";
 
 import ULink from "../ui.button-link/index.vue";
 import UIcon from "../ui.image-icon/index.vue";
@@ -79,7 +80,6 @@ import { UPage } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
 
 const slots = useSlots();
-const store = useStore();
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UPage", inheritAttrs: false });
@@ -168,9 +168,7 @@ const props = defineProps({
   },
 });
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const {
   config,
@@ -190,7 +188,7 @@ const {
   footerRightAttrs,
   rightRoundingWrapperAttrs,
   hasSlotContent,
-} = useAttrs(props, { isMobileDevice });
+} = useAttrs(props, { isMobileBreakpoint });
 
 const isShownHeader = computed(() => {
   const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);

diff --git a/src/ui.form-date-picker-range/index.vue b/src/ui.form-date-picker-range/index.vue
@@ -179,7 +179,6 @@
 
 <script setup>
 import { computed, watch, ref, nextTick } from "vue";
-import { useStore } from "vuex";
 import { merge } from "lodash-es";
 
 import UIcon from "../ui.image-icon";
@@ -227,6 +226,7 @@ import {
 import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
+import useBreakpoint from "../composable.breakpoint";
 
 import defaultConfig from "./configs/default.config";
 import {
@@ -385,7 +385,6 @@ const {
   rangeInputWrapperAttrs,
   inputRangeErrorAttrs,
 } = useAttrs(props, { isShownMenu });
-const store = useStore();
 const { tm } = useLocale();
 
 const calendarValue = ref(props.modelValue);
@@ -413,7 +412,7 @@ const localValue = computed({
   },
 });
 
-const isMobileDevice = computed(() => store.getters["breakpoint/isMobileDevice"]);
+const { isMobileBreakpoint } = useBreakpoint();
 const rangeInputName = computed(() => `rangeInput-${props.id}`);
 const currentLocale = computed(() => merge(tm("UDatePickerRange"), props.config.i18n));
 
@@ -560,7 +559,7 @@ const userFormatDate = computed(() => {
     title = `${fromTitle} – ${toTitle}`;
   }
 
-  if (isMobileDevice.value && !isPeriod.value.month && isVariant.value.button) {
+  if (isMobileBreakpoint.value && !isPeriod.value.month && isVariant.value.button) {
     const startDay = String(from.getDate()).padStart(2, "0");
     const endDay = String(to?.getDate())?.padStart(2, "0");
     const startMonth = String(from.getMonth()).padStart(2, "0");

diff --git a/src/ui.form-radio-card/index.vue b/src/ui.form-radio-card/index.vue
@@ -25,7 +25,6 @@
 
 <script setup>
 import { computed } from "vue";
-import { useStore } from "vuex";
 
 import UIcon from "../ui.image-icon";
 import URadio from "../ui.form-radio";
@@ -34,12 +33,11 @@ import UIService, { getRandomId } from "../service.ui";
 import defaultConfig from "./configs/default.config";
 import { URadioCard } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
+import useBreakpoint from "../composable.breakpoint";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "URadioCard", inheritAttrs: false });
 
-const store = useStore();
-
 const props = defineProps({
   /**
    * Set radio card name.
@@ -126,9 +124,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs, itemsAttrs } = useAttrs(props);
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const selectedItem = computed({
   get: () => props.modelValue,
@@ -137,10 +133,10 @@ const selectedItem = computed({
 
 const gridColsClass = computed(() => {
   return {
-    "grid-cols-1": isMobileDevice,
-    "grid-cols-2": props.gridCols === 2 && isMobileDevice,
-    "grid-cols-3": props.gridCols === 3 && isMobileDevice,
-    "grid-cols-4": props.gridCols === 4 && isMobileDevice,
+    "grid-cols-1": isMobileBreakpoint.value,
+    "grid-cols-2": props.gridCols === 2 && isMobileBreakpoint.value,
+    "grid-cols-3": props.gridCols === 3 && isMobileBreakpoint.value,
+    "grid-cols-4": props.gridCols === 4 && isMobileBreakpoint.value,
   };
 });
 </script>