vueless 0.0.664 → 0.0.666

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.664",
+  "version": "0.0.666",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.data-table/UTableRow.vue

@@ -46,7 +46,9 @@ const toggleIconConfig = computed(() => {
   const nestedRow = props.row?.row;
   let isShown = false;
 
-  if (Array.isArray(nestedRow)) {
+  if (props.row.nestedData) {
+    isShown = Boolean(props.row.nestedData.isShown);
+  } else if (Array.isArray(nestedRow)) {
     isShown = nestedRow.some((row) => row.isShown);
   } else {
     isShown = Boolean(nestedRow?.isShown);
@@ -76,10 +78,16 @@ const isNestedRowEmpty = computed(() => {
   return !Object.keys(mapRowColumns(props.row.row, props.columns)).length;
 });
 
+const isNestedDataEmpty = computed(() => {
+  if (!props.row.nestedData) return true;
+
+  return !props.row.nestedData.rows || !props.row.nestedData.rows.length;
+});
+
 const isShownToggleIcon = computed(() => {
   return (
     (props.row.row && !isNestedRowEmpty.value) ||
-    (props.row.nestedData && hasSlotContent(slots["nested-content"]))
+    (props.row.nestedData && !isNestedDataEmpty.value && hasSlotContent(slots["nested-content"]))
   );
 });
 

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/utils/theme.ts

@@ -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;