@energysage/es-ds-components 5.1.0 → 5.3.0

package/app/composables/breakpoints.ts

@@ -0,0 +1,75 @@
+import type { Ref } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import sassBreakpoints from '@energysage/es-ds-styles/scss/modules/breakpoints.module.scss';
+
+interface Breakpoints {
+    [key: string]: string;
+}
+
+const BREAKPOINTS: Breakpoints = {
+    xs: sassBreakpoints.xs!,
+    sm: sassBreakpoints.sm!,
+    md: sassBreakpoints.md!,
+    lg: sassBreakpoints.lg!,
+    xl: sassBreakpoints.xl!,
+    xxl: sassBreakpoints.xxl!,
+};
+
+/**
+ * This composable provides reactive properties for each breakpoint, as well as device categories.
+ * It should only be used for functional purposes, and not for styling or layout.
+ * Meaning, don't use it to show/hide elements, or to change the layout of elements.
+ */
+export function useBreakpointChecks() {
+    const breakpointMediaQueries: { [key in keyof Breakpoints]?: MediaQueryList } = {};
+    const breakpointChangeListeners: { [key: string]: () => void } = {};
+    const breakpointMatches: { [key: string]: Ref<boolean> } = {};
+
+    if (import.meta.client) {
+        // Set up media queries, reactive references and event listeners for each breakpoint
+        Object.entries(BREAKPOINTS).forEach(([key, value]) => {
+            const mediaQueryList = window.matchMedia(`(min-width: ${value})`) as MediaQueryList;
+            breakpointMediaQueries[key] = mediaQueryList;
+            breakpointMatches[key] = ref<boolean>(mediaQueryList?.matches || false);
+            breakpointChangeListeners[key] = () => {
+                breakpointMatches[key]!.value = mediaQueryList?.matches || false;
+            };
+        });
+    }
+
+    // On component mount, add change event listeners for each breakpoint
+    onMounted(() => {
+        Object.keys(breakpointMatches).forEach((key) => {
+            breakpointMediaQueries[key]?.addEventListener('change', breakpointChangeListeners[key]!);
+        });
+    });
+
+    // On component unmount, remove the event listeners
+    onUnmounted(() => {
+        Object.keys(breakpointMatches).forEach((key) => {
+            breakpointMediaQueries[key]?.removeEventListener('change', breakpointChangeListeners[key]!);
+        });
+    });
+
+    // Individual breakpoint computed properties
+    const isXS = computed(() => breakpointMatches.xs?.value || false);
+    const isSM = computed(() => breakpointMatches.sm?.value || false);
+    const isMD = computed(() => breakpointMatches.md?.value || false);
+    const isLG = computed(() => breakpointMatches.lg?.value || false);
+    const isXL = computed(() => breakpointMatches.xl?.value || false);
+    const isXXL = computed(() => breakpointMatches.xxl?.value || false);
+
+    // Compute values for device categories
+    const isDesktop = computed(() => breakpointMatches.lg?.value || false);
+    const isTablet = computed(() => (breakpointMatches.md?.value && !breakpointMatches.lg?.value) || false);
+    const isMobile = computed(
+        () =>
+            ((breakpointMatches.xs?.value || breakpointMatches.sm?.value) &&
+                !breakpointMatches.lg?.value &&
+                !breakpointMatches.md?.value) ||
+            false,
+    );
+
+    // TODO: Be nice to namespace this but it ends up being a cyclic dependency somehow
+    return { isXS, isSM, isMD, isLG, isXL, isXXL, isDesktop, isTablet, isMobile };
+}

package/nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
 
     // prevents "Cannot read properties of null (reading 'ce')" in SSR/SSG with reka-ui
     build: {
-        transpile: ['reka-ui'],
+        transpile: ['@phosphor-icons', 'reka-ui'],
     },
 
     // https://nuxt.com/docs/getting-started/styling#the-css-property

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.1.0",
+    "version": "5.3.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,8 +17,9 @@
     "author": "EnergySage",
     "license": "MIT",
     "dependencies": {
-        "@energysage/es-ds-styles": "^3.3.4",
+        "@energysage/es-ds-styles": "^3.4.0",
         "@nuxtjs/google-fonts": "^3.2.0",
+        "@phosphor-icons/vue": "^2.2.1",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^13.9.0",

package/app/components/icon/arrow.vue

@@ -1,68 +0,0 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconArrow',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        orientation: {
-            type: String,
-            default: 'top',
-            required: false,
-        },
-    },
-    computed: {
-        classFromOrientation() {
-            return `orientation-${this.orientation}`;
-        },
-    },
-};
-</script>
-<template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        :class="classFromOrientation"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a1 1 0 0 1 1 1v13.586l5.293-5.293a1 1 0 0 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 1 1 1.414-1.414L11 17.586V4a1 1 0 0 1 1-1Z" />
-    </svg>
-</template>
-
-<style lang="scss" scoped>
-.orientation-down {
-    transform: rotate(0deg);
-}
-
-.orientation-left {
-    transform: rotate(90deg);
-}
-
-.orientation-top {
-    transform: rotate(180deg);
-}
-
-.orientation-right {
-    transform: rotate(270deg);
-}
-</style>