vueless 0.0.523 → 0.0.525

package/package.json

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

package/ui.data-table/UTable.vue

@@ -422,82 +422,120 @@ defineExpose({
 <template>
   <div v-bind="wrapperAttrs" :data-test="dataTest">
     <div
-      v-show="isHeaderSticky || isShownActionsHeader"
+      v-show="isHeaderSticky && !isShownActionsHeader"
       ref="sticky-header-row"
       :style="tableRowWidthStyle"
       v-bind="stickyHeaderAttrs"
     >
-      <template v-if="isShownActionsHeader">
-        <div v-bind="stickyHeaderCellAttrs">
-          <UCheckbox
-            v-if="selectable"
-            v-model="selectAll"
-            size="md"
-            :partial="!isSelectedAllRows"
-            v-bind="stickyHeaderActionsCheckboxAttrs"
-            :data-test="`${dataTest}-select-all`"
-          />
-        </div>
+      <div v-bind="stickyHeaderCellAttrs">
+        <UCheckbox
+          v-if="selectable"
+          v-model="selectAll"
+          size="md"
+          :partial="!isSelectedAllRows"
+          v-bind="stickyHeaderCheckboxAttrs"
+          :data-test="`${dataTest}-select-all`"
+        />
 
         <div
           v-if="selectedRows.length"
-          v-bind="stickyHeaderActionsCounterAttrs"
+          v-bind="stickyHeaderCounterAttrs"
           v-text="selectedRows.length"
         />
-
-        <!--
-          @slot Use it to add action buttons within the actions header, which appear when rows are selected.
-          @binding {array} selected-rows
-        -->
-        <slot name="header-actions" :selected-rows="selectedRows" />
-      </template>
-
-      <template v-else>
-        <div v-bind="stickyHeaderCellAttrs">
-          <UCheckbox
-            v-if="selectable"
-            v-model="selectAll"
-            size="md"
-            :partial="!isSelectedAllRows"
-            v-bind="stickyHeaderCheckboxAttrs"
-            :data-test="`${dataTest}-select-all`"
-          />
-
-          <div
-            v-if="selectedRows.length"
-            v-bind="stickyHeaderCounterAttrs"
-            v-text="selectedRows.length"
-          />
-        </div>
-
-        <!-- TODO: Remove any when key attrs are typed-->
-        <div
-          v-for="(column, index) in normalizedColumns"
-          :key="index"
-          v-bind="stickyHeaderCellAttrs"
-          :class="cx([(stickyHeaderCellAttrs as any).class, column.thClass])"
-        >
-          <template v-if="hasSlotContent($slots[`header-${column.key}`])">
-            <!--
+      </div>
+
+      <!-- TODO: Remove any when key attrs are typed-->
+      <div
+        v-for="(column, index) in normalizedColumns"
+        :key="index"
+        v-bind="stickyHeaderCellAttrs"
+        :class="cx([(stickyHeaderCellAttrs as any).class, column.thClass])"
+      >
+        <template v-if="hasSlotContent($slots[`header-${column.key}`])">
+          <!--
               @slot Use it to customise needed header cell.
               @binding {object} column
               @binding {number} index
             -->
-            <slot :name="`header-${column.key}`" :column="column" :index="index" />
-          </template>
+          <slot :name="`header-${column.key}`" :column="column" :index="index" />
+        </template>
 
-          <template v-else>
-            {{ column.label }}
-          </template>
+        <template v-else>
+          {{ column.label }}
+        </template>
 
-          <!--
+        <!--
             @slot Use it to add something after the needed header cell.
             @binding {object} column
             @binding {number} index
           -->
-          <slot :name="`header-${column.key}-after`" :column="column" :index="index" />
-        </div>
-      </template>
+        <slot :name="`header-${column.key}-after`" :column="column" :index="index" />
+      </div>
+
+      <ULoaderProgress v-if="isHeaderSticky" :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+    </div>
+
+    <div
+      v-show="isShownActionsHeader && isHeaderSticky"
+      ref="sticky-header-row"
+      :style="tableRowWidthStyle"
+      v-bind="stickyHeaderAttrs"
+    >
+      <div v-bind="stickyHeaderCellAttrs">
+        <UCheckbox
+          v-if="selectable"
+          v-model="selectAll"
+          size="md"
+          :partial="!isSelectedAllRows"
+          v-bind="stickyHeaderActionsCheckboxAttrs"
+          :data-test="`${dataTest}-select-all`"
+        />
+      </div>
+
+      <div
+        v-if="selectedRows.length"
+        v-bind="stickyHeaderActionsCounterAttrs"
+        v-text="selectedRows.length"
+      />
+
+      <!--
+          @slot Use it to add action buttons within the actions header, which appear when rows are selected.
+          @binding {array} selected-rows
+        -->
+      <slot name="header-actions" :selected-rows="selectedRows" />
+
+      <ULoaderProgress v-if="isHeaderSticky" :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+    </div>
+
+    <div
+      v-show="isShownActionsHeader && !isHeaderSticky"
+      ref="sticky-header-row"
+      :style="tableRowWidthStyle"
+      v-bind="stickyHeaderAttrs"
+      class="absolute"
+    >
+      <div v-bind="stickyHeaderCellAttrs">
+        <UCheckbox
+          v-if="selectable"
+          v-model="selectAll"
+          size="md"
+          :partial="!isSelectedAllRows"
+          v-bind="stickyHeaderActionsCheckboxAttrs"
+          :data-test="`${dataTest}-select-all`"
+        />
+      </div>
+
+      <div
+        v-if="selectedRows.length"
+        v-bind="stickyHeaderActionsCounterAttrs"
+        v-text="selectedRows.length"
+      />
+
+      <!--
+          @slot Use it to add action buttons within the actions header, which appear when rows are selected.
+          @binding {array} selected-rows
+        -->
+      <slot name="header-actions" :selected-rows="selectedRows" />
 
       <ULoaderProgress v-if="isHeaderSticky" :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
     </div>

package/utils/theme.ts

@@ -38,23 +38,12 @@ type DefaultColors = typeof tailwindColors;
 export function themeInit() {
   if (isSSR) return;
 
-  const themeSettings = {
-    colorMode: vuelessConfig.colorMode,
-    ringOffsetColorLight: vuelessConfig.ringOffsetColorLight,
-    ringOffsetColorDark: vuelessConfig.ringOffsetColorDark,
-    ringOffset: vuelessConfig.ringOffset,
-    ring: vuelessConfig.ring,
-    gray: vuelessConfig.gray,
-    brand: vuelessConfig.brand,
-    rounding: vuelessConfig.rounding,
-  } as Config;
-
-  setTheme(themeSettings);
+  setTheme();
 
   const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
   prefersColorSchemeDark.addEventListener("change", (event) =>
-    setTheme({ ...themeSettings, colorMode: event.matches ? ColorMode.Dark : ColorMode.Light }),
+    setTheme({ colorMode: event.matches ? ColorMode.Dark : ColorMode.Light }),
   );
 }
 
@@ -73,6 +62,10 @@ export function setColorMode(colorMode: `${ColorMode}`) {
     newColorMode = isSystemDark ? ColorMode.Dark : ColorMode.Light;
   }
 
+  if (cashedColorMode !== null) {
+    newColorMode = cashedColorMode;
+  }
+
   if (isLight) {
     newColorMode = ColorMode.Light;
   }
@@ -81,9 +74,11 @@ export function setColorMode(colorMode: `${ColorMode}`) {
     newColorMode = ColorMode.Dark;
   }
 
-  if (cashedColorMode !== null) {
-    newColorMode = cashedColorMode;
-  }
+  const darkModeChangeEvent = new CustomEvent("darkModeChange", {
+    detail: newColorMode === ColorMode.Dark,
+  });
+
+  if (isSSR) return;
 
   if (newColorMode === ColorMode.Dark) {
     document.documentElement.classList.remove(LIGHT_MODE_SELECTOR);
@@ -93,13 +88,15 @@ export function setColorMode(colorMode: `${ColorMode}`) {
     document.documentElement.classList.add(LIGHT_MODE_SELECTOR);
   }
 
-  isAuto
-    ? localStorage.removeItem(COLOR_MODE_KEY)
-    : localStorage.setItem(COLOR_MODE_KEY, newColorMode);
+  window.dispatchEvent(darkModeChangeEvent);
+
+  if (!isAuto) {
+    localStorage.setItem(COLOR_MODE_KEY, newColorMode);
+  }
 }
 
 export function setTheme(config: Config = {}) {
-  setColorMode(config.colorMode || ColorMode.Auto);
+  setColorMode(config?.colorMode || vuelessConfig?.colorMode || ColorMode.Auto);
 
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
   const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.523",
+  "version": "0.0.525",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -10373,17 +10373,6 @@
             }
           ],
           "slots": [
-            {
-              "name": "header-actions",
-              "scoped": true,
-              "description": "Use it to add action buttons within the actions header, which appear when rows are selected.",
-              "bindings": [
-                {
-                  "type": "array",
-                  "name": "selected-rows"
-                }
-              ]
-            },
             {
               "name": "`header-${column.key}`",
               "scoped": true,
@@ -10420,6 +10409,17 @@
                 }
               ]
             },
+            {
+              "name": "header-actions",
+              "scoped": true,
+              "description": "Use it to add action buttons within the actions header, which appear when rows are selected.",
+              "bindings": [
+                {
+                  "type": "array",
+                  "name": "selected-rows"
+                }
+              ]
+            },
             {
               "name": "before-header",
               "scoped": true,