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

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.9.0-beta.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.9.0-beta.2.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue-pro.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue-pro`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue-pro`

package/dist/composables/useColorModes.d.ts

@@ -1,4 +1,5 @@
 export declare const useColorModes: (localStorageItemName?: string) => {
-    getColorMode: () => string;
+    getColorMode: () => string | undefined;
+    isColorModeSet: () => boolean;
     setColorMode: (mode: string) => void;
 };

package/dist/directives/v-c-tooltip.d.ts

@@ -1,5 +1,6 @@
 import { DirectiveBinding } from 'vue';
 declare const _default: {
+    name: string;
     mounted(el: HTMLElement, binding: DirectiveBinding): void;
     beforeUnmount(_el: HTMLElement, binding: DirectiveBinding): void;
 };

package/dist/index.es.js

@@ -12877,7 +12877,12 @@ const CPopoverPlugin = {
     },
 };
 
-const isOnMobile = (element) => Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
+const isOnMobile = (element) => {
+    if (!element) {
+        return;
+    }
+    return Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
+};
 const CSidebar = defineComponent({
     name: 'CSidebar',
     props: {
@@ -16348,6 +16353,7 @@ const toggleTooltipElement = (tooltip, el, popperOptions) => {
     addTooltipElement(tooltip, el, popperOptions);
 };
 var vCTooltip = {
+    name: 'c-tooltip',
     mounted(el, binding) {
         const value = binding.value;
         const content = typeof value === 'string' ? value : value.content ?? '';
@@ -16403,9 +16409,12 @@ var Directives = /*#__PURE__*/Object.freeze({
     vctooltip: vCTooltip
 });
 
-const getStoredTheme = (localStorageItemName) => localStorage.getItem(localStorageItemName);
+const getStoredTheme = (localStorageItemName) => typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
 const setStoredTheme = (localStorageItemName, colorMode) => localStorage.setItem(localStorageItemName, colorMode);
 const getPreferredColorScheme = (localStorageItemName) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
     const storedTheme = getStoredTheme(localStorageItemName);
     if (storedTheme) {
         return storedTheme;
@@ -16423,23 +16432,25 @@ const setTheme = (colorMode) => {
 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) => {
             colorMode.value = mode;
         },
@@ -16452,7 +16463,7 @@ const CoreuiVue = {
             app.component(key, Components[key]);
         }
         for (const key in Directives) {
-            app.directive(key, Directives[key]);
+            app.directive(Directives[key]['name'], Directives[key]);
         }
     },
 };