@coreui/vue-pro 4.9.0-beta.0 → 4.9.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.9.0-beta.0",
+  "version": "4.9.0-beta.2",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",

package/src/components/sidebar/CSidebar.ts

@@ -3,8 +3,13 @@ import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 
-const isOnMobile = (element: HTMLDivElement) =>
-  Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
+const isOnMobile = (element: HTMLDivElement) => {
+  if (!element) {
+    return
+  }
+
+  return Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
+}
 
 const CSidebar = defineComponent({
   name: 'CSidebar',

package/src/composables/useColorModes.ts

@@ -1,10 +1,15 @@
 import { onBeforeMount, ref, watch } from 'vue'
 
-const getStoredTheme = (localStorageItemName: string) => localStorage.getItem(localStorageItemName)
+const getStoredTheme = (localStorageItemName: string) =>
+  typeof window !== 'undefined' && localStorage.getItem(localStorageItemName)
 const setStoredTheme = (localStorageItemName: string, colorMode: string) =>
   localStorage.setItem(localStorageItemName, colorMode)
 
 const getPreferredColorScheme = (localStorageItemName: string) => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
   const storedTheme = getStoredTheme(localStorageItemName)
 
   if (storedTheme) {
@@ -28,27 +33,28 @@ export const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme')
   const colorMode = ref(getPreferredColorScheme(localStorageItemName))
 
   watch(colorMode, () => {
-    setStoredTheme(localStorageItemName, colorMode.value)
-    setTheme(colorMode.value)
+    if (colorMode.value) {
+      setStoredTheme(localStorageItemName, colorMode.value)
+      setTheme(colorMode.value)
+    }
   })
 
   onBeforeMount(() => {
-    if (typeof getStoredTheme(localStorageItemName) === 'string') {
+    if (typeof getStoredTheme(localStorageItemName) === 'string' && colorMode.value) {
       setTheme(colorMode.value)
     }
 
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
       const storedTheme = getStoredTheme(localStorageItemName)
-      if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode.value) {
         setTheme(colorMode.value)
       }
     })
-
-    watch(colorMode, () => setTheme(colorMode.value))
   })
 
   return {
     getColorMode: () => colorMode.value,
+    isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
     setColorMode: (mode: string) => {
       colorMode.value = mode
     },

package/src/directives/v-c-tooltip.ts

@@ -40,6 +40,7 @@ const toggleTooltipElement = (tooltip: HTMLDivElement, el: HTMLElement, popperOp
 }
 
 export default {
+  name: 'c-tooltip',
   mounted(el: HTMLElement, binding: DirectiveBinding): void {
     const value = binding.value
     const content = typeof value === 'string' ? value : value.content ?? ''

package/src/index.ts

@@ -9,7 +9,7 @@ const CoreuiVue = {
     }
 
     for (const key in Directives) {
-      app.directive(key, Directives[key])
+      app.directive(Directives[key]['name'], Directives[key])
     }
   },
 }