vueless 0.0.437 → 0.0.439

package/constants.js

@@ -5,7 +5,8 @@ export const COOL_COLOR = "cool";
 export const GRAYSCALE_COLOR = "grayscale";
 
 /* Vueless dark mode */
-export const DARK_MODE_SELECTOR = "vl-dark-mode";
+export const DARK_MODE_SELECTOR = "vl-dark";
+export const LIGHT_MODE_SELECTOR = "vl-light";
 
 /* Vueless defaults */
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.437",
+  "version": "0.0.439",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -54,7 +54,7 @@
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vueless/plugin-vite": "^0.0.74",
-    "@vueless/storybook": "^0.0.35",
+    "@vueless/storybook": "^0.0.37",
     "@vueless/web-types": "^0.0.17",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",

package/preset.tailwind.js

@@ -57,7 +57,7 @@ const brandColors = getPalette(BRAND_COLOR);
 const grayColors = getPalette(GRAY_COLOR);
 
 export const vuelessTailwindConfig = {
-  darkMode: DARK_MODE_SELECTOR,
+  darkMode: ["selector", `[class="${DARK_MODE_SELECTOR}"]`],
   content: [...vuelessContent, ...vuelessContentVue, ...vuelessContentNuxt],
   theme: {
     extend: {

package/ui.button-link/storybook/stories.js

@@ -17,7 +17,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(ULink.__name),
-    route: { control: { type: "text" } },
   },
 };
 
@@ -85,7 +84,7 @@ export const Href = DefaultTemplate.bind({});
 Href.args = { href: "https://storybook.js.org/docs/react/get-started/introduction" };
 
 export const Route = DefaultTemplate.bind({});
-Route.args = { name: "SomeRouterRouteName" };
+Route.args = { name: "routerName" };
 
 export const TargetBlank = DefaultTemplate.bind({});
 TargetBlank.args = {

package/ui.data-table/UTableRow.vue

@@ -32,7 +32,7 @@
         v-bind="bodyCellNestedAttrs"
       >
         <UIcon
-          v-if="row.row || (row.nestedData && hasSlotContent($slots['nested-content']))"
+          v-if="isShownToggleIcon"
           size="xs"
           internal
           interactive
@@ -147,7 +147,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, useSlots } from "vue";
 import { cx } from "../utils/utilUI.js";
 import useUI from "../composables/useUI.js";
 
@@ -208,6 +208,7 @@ const emit = defineEmits(["toggleRowVisibility", "click", "click-cell"]);
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
 const cellRef = ref([]);
+const slots = useSlots();
 
 useMutationObserver(cellRef, setCellTitle, { childList: true });
 
@@ -231,6 +232,25 @@ const shift = computed(() => (props.row.row ? 1.5 : 2));
 
 const isSingleNestedRow = computed(() => !Array.isArray(props.row.row));
 
+const isNestedRowEmpty = computed(() => {
+  if (!props.row.row) return true;
+
+  if (Array.isArray(props.row.row)) {
+    return props.row.row.some(
+      (nestedRow) => !Object.keys(getFilteredRow(nestedRow, props.columns)).length,
+    );
+  }
+
+  return !Object.keys(getFilteredRow(props.row.row, props.columns)).length;
+});
+
+const isShownToggleIcon = computed(() => {
+  return (
+    (props.row.row && !isNestedRowEmpty.value) ||
+    (props.row.nestedData && hasSlotContent(slots["nested-content"]))
+  );
+});
+
 const getToggleIconName = computed(() => (row) => {
   const isHiddenNestedRow = Array.isArray(row.row)
     ? row.row.some((nestedRow) => nestedRow.isHidden)

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.437",
+  "version": "0.0.439",
   "contributions": {
     "html": {
       "description-markup": "markdown",