vueless 0.0.663 → 0.0.665

package/composables/useUI.ts

@@ -142,7 +142,9 @@ export default function useUI<T>(
     /* Delete value key to prevent v-model overwrite. */
     delete commonAttrs.value;
 
-    watch([config, props, classes], updateVuelessAttrs, { immediate: true });
+    const reactiveProps = computed(() => ({ ...props }));
+
+    watch([config, reactiveProps, classes], updateVuelessAttrs, { immediate: true });
 
     /**
      * Updating Vueless attributes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.663",
+  "version": "0.0.665",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -34,7 +34,7 @@ const index = ref(0);
 const isChecked = ref(false);
 
 const selected = computed<UCheckboxOption>(() => {
-  return props.options[index.value];
+  return props.options[index.value] || {};
 });
 
 watchEffect(setIndex);
@@ -50,7 +50,7 @@ function setIndex() {
 }
 
 function setChecked() {
-  setTimeout(() => (isChecked.value = !!props?.options[index.value].icon), 0);
+  setTimeout(() => (isChecked.value = !!props?.options[index.value]?.icon), 0);
 }
 
 function onClickCheckbox() {

package/ui.text-notify/utilNotify.ts

@@ -1,5 +1,5 @@
 import { vuelessConfig } from "../utils/ui.ts";
-import { getRandomId } from "../utils/helper.ts";
+import { getRandomId, isSSR } from "../utils/helper.ts";
 import {
   LOCAL_STORAGE_ID,
   DELAY_BETWEEN_CLONES,
@@ -130,10 +130,14 @@ export function clearNotifications(): void {
 }
 
 export function setDelayedNotify(settings: NotifyConfig): void {
+  if (isSSR) return;
+
   localStorage.setItem(LOCAL_STORAGE_ID, JSON.stringify(settings));
 }
 
 export function getDelayedNotify(): void {
+  if (isSSR) return;
+
   const notifyData: NotifyConfig | null = JSON.parse(
     localStorage.getItem(LOCAL_STORAGE_ID) || "null",
   );

package/utils/theme.ts

@@ -50,7 +50,7 @@ export function themeInit() {
 }
 
 export function setColorMode(colorMode: `${ColorMode}`) {
-  const cashedColorMode = localStorage.getItem(COLOR_MODE_KEY) as ColorMode | null;
+  const cashedColorMode = isCSR ? (localStorage.getItem(COLOR_MODE_KEY) as ColorMode | null) : null;
 
   const isDark = colorMode === ColorMode.Dark;
   const isLight = colorMode === ColorMode.Light;
@@ -103,7 +103,7 @@ export function setTheme(config: Config = {}) {
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
   const roundingSm = config?.roundingSm ?? vuelessConfig.roundingSm ?? rounding / 2;
   const roundingLg = config?.roundingLg ?? vuelessConfig.roundingLg ?? rounding * 2;
-  const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
+  const isDarkMode = isCSR && document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
   let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
     config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;