vueless 0.0.50 → 0.0.51

package/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,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/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,

package/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>

package/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,9 +45,7 @@ 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,
     ]),
   }));
 
@@ -54,9 +53,7 @@ export function useAttrs(props) {
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse &&
-        store.getters["breakpoint/isMobileDevice"] &&
-        config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

package/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,7 +62,7 @@ export function useAttrs(props, { isMobileDevice }) {
     ...wrapperAttrsRaw.value,
     class: cx([
       wrapperAttrsRaw.value.class,
-      isMobileDevice.value && !isMobileApp && config.value.wrapperMobile,
+      isMobileBreakpoint.value && !isMobileApp && config.value.wrapperMobile,
     ]),
   }));
 
@@ -70,7 +70,7 @@ export function useAttrs(props, { isMobileDevice }) {
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

package/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"]);

package/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");

package/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>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -6993,19 +6993,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "UViewport",
-          "description": "",
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "vueless/ui.viewport/index.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "YearView",
           "description": "",

package/ui.viewport/index.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <slot :breakpoint="breakpoint" />
-  </div>
-</template>
-
-<script>
-import { mapMutations } from "vuex";
-
-export default {
-  name: "UViewport",
-
-  data() {
-    return {
-      windowWidth: 0,
-      breakpoint: "",
-    };
-  },
-
-  watch: {
-    windowWidth: {
-      immediate: true,
-      handler: "setBreakpoint",
-    },
-  },
-
-  mounted() {
-    this.setWindowWidth();
-    this.setListener();
-  },
-
-  methods: {
-    ...mapMutations("breakpoint", ["SET_BREAKPOINT"]),
-
-    setWindowWidth() {
-      this.windowWidth = window.innerWidth;
-    },
-
-    setListener() {
-      let timeout;
-
-      window.addEventListener(
-        "resize",
-        () => {
-          if (timeout) {
-            window.cancelAnimationFrame(timeout);
-          }
-
-          timeout = window.requestAnimationFrame(() => {
-            this.setWindowWidth();
-          });
-        },
-        { passive: true },
-      );
-    },
-
-    setBreakpoint(windowWidth) {
-      if (!windowWidth) return;
-
-      this.breakpoint = "xs";
-
-      if (windowWidth >= 640 && windowWidth < 768) {
-        this.breakpoint = "sm";
-      } else if (windowWidth >= 768 && windowWidth < 1024) {
-        this.breakpoint = "md";
-      } else if (windowWidth >= 1024 && windowWidth < 1280) {
-        this.breakpoint = "lg";
-      } else if (windowWidth >= 1280 && windowWidth < 1536) {
-        this.breakpoint = "xl";
-      } else if (windowWidth >= 1536) {
-        this.breakpoint = "2xl";
-      }
-
-      this.SET_BREAKPOINT(this.breakpoint);
-    },
-  },
-};
-</script>

package/ui.viewport/store/index.js

@@ -1,47 +0,0 @@
-export default {
-  namespaced: true,
-
-  state: {
-    breakpoint: "",
-    mobileDevices: ["xs", "sm"],
-    portableDevices: ["xs", "sm", "md"],
-  },
-
-  getters: {
-    isLaptopDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "lg";
-    },
-
-    isTabletDevice(state) {
-      const { breakpoint } = state;
-
-      return breakpoint === "md";
-    },
-
-    isMobileDevice(state) {
-      const { breakpoint, mobileDevices } = state;
-
-      return mobileDevices.includes(breakpoint);
-    },
-
-    isPortableDevice(state) {
-      const { breakpoint, portableDevices } = state;
-
-      return portableDevices.includes(breakpoint);
-    },
-
-    elementSize(state, getters) {
-      const { isMobileDevice } = getters;
-
-      return isMobileDevice ? "md" : "lg";
-    },
-  },
-
-  mutations: {
-    SET_BREAKPOINT(state, breakpoint) {
-      state.breakpoint = breakpoint;
-    },
-  },
-};