nuxt-ui-tools 1.22.1 → 1.23.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/shared/styles/scrollbars.css

@@ -1 +1 @@
-@layer theme, base, components, utilities;@layer base{:root{--nut-scrollbar-size:11px;--nut-scrollbar-gap:3px;--nut-scrollbar-thumb:color-mix(in srgb,var(--ui-text,#1f1d1a) 18%,transparent);--nut-scrollbar-thumb-hover:color-mix(in srgb,var(--ui-text,#1f1d1a) 32%,transparent);--nut-scrollbar-thumb-active:color-mix(in srgb,var(--ui-text,#1f1d1a) 44%,transparent)}@supports (scrollbar-width:thin){*{scrollbar-color:transparent transparent;scrollbar-width:thin;transition:scrollbar-color .2s ease}:hover{scrollbar-color:var(--nut-scrollbar-thumb) transparent}}@supports not (scrollbar-width:thin){::-webkit-scrollbar{background:transparent;height:var(--nut-scrollbar-size);width:var(--nut-scrollbar-size)}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:transparent;border:var(--nut-scrollbar-gap) solid transparent;border-radius:999px}:hover::-webkit-scrollbar-thumb{background-color:var(--nut-scrollbar-thumb)}::-webkit-scrollbar-thumb:hover{background-color:var(--nut-scrollbar-thumb-hover)}::-webkit-scrollbar-thumb:active{background-color:var(--nut-scrollbar-thumb-active)}}}
+@layer theme, base, components, utilities;@layer base{:root{--nut-scrollbar-size:11px;--nut-scrollbar-gap:3px;--nut-table-scrollbar-size:5px;--nut-table-scrollbar-idle-opacity:0;--nut-table-scrollbar-idle-pointer-events:none;--nut-scrollbar-thumb:color-mix(in srgb,var(--ui-text,#1f1d1a) 18%,transparent);--nut-scrollbar-thumb-hover:color-mix(in srgb,var(--ui-text,#1f1d1a) 32%,transparent);--nut-scrollbar-thumb-active:color-mix(in srgb,var(--ui-text,#1f1d1a) 44%,transparent)}@supports (scrollbar-width:thin){*{scrollbar-color:transparent transparent;scrollbar-width:thin;transition:scrollbar-color .2s ease}:hover{scrollbar-color:var(--nut-scrollbar-thumb) transparent}}@supports not (scrollbar-width:thin){::-webkit-scrollbar{background:transparent;height:var(--nut-scrollbar-size);width:var(--nut-scrollbar-size)}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:transparent;border:var(--nut-scrollbar-gap) solid transparent;border-radius:999px}:hover::-webkit-scrollbar-thumb{background-color:var(--nut-scrollbar-thumb)}::-webkit-scrollbar-thumb:hover{background-color:var(--nut-scrollbar-thumb-hover)}::-webkit-scrollbar-thumb:active{background-color:var(--nut-scrollbar-thumb-active)}}}

package/dist/runtime/table/components/table/table-overlay-scrollbars.vue

@@ -149,8 +149,8 @@ defineExpose({ measure: schedule });
 <template>
   <div
     v-if="hasVertical"
-    class="nut-dl-sb pointer-events-none absolute top-1 right-[3px] bottom-2 z-[6] w-[5px] opacity-0 transition-opacity duration-200 ease-out motion-reduce:transition-none"
-    :class="{ 'pointer-events-auto opacity-100': visible }"
+    class="nut-dl-sb [pointer-events:var(--nut-table-scrollbar-idle-pointer-events)] absolute top-1 right-[3px] bottom-2 z-[6] w-(--nut-table-scrollbar-size) opacity-(--nut-table-scrollbar-idle-opacity) transition-opacity duration-200 ease-out motion-reduce:transition-none"
+    :class="{ 'pointer-events-auto! opacity-100': visible }"
   >
     <span
       class="absolute top-0 left-0 w-full rounded-full bg-(--nut-scrollbar-thumb) transition-colors duration-150 will-change-transform hover:bg-(--nut-scrollbar-thumb-hover)"
@@ -164,8 +164,8 @@ defineExpose({ measure: schedule });
   </div>
   <div
     v-if="hasHorizontal"
-    class="nut-dl-sb pointer-events-none absolute right-2 bottom-[3px] left-1 z-[6] h-[5px] opacity-0 transition-opacity duration-200 ease-out motion-reduce:transition-none"
-    :class="{ 'pointer-events-auto opacity-100': visible }"
+    class="nut-dl-sb [pointer-events:var(--nut-table-scrollbar-idle-pointer-events)] absolute right-2 bottom-[3px] left-1 z-[6] h-(--nut-table-scrollbar-size) opacity-(--nut-table-scrollbar-idle-opacity) transition-opacity duration-200 ease-out motion-reduce:transition-none"
+    :class="{ 'pointer-events-auto! opacity-100': visible }"
   >
     <span
       class="absolute top-0 left-0 h-full rounded-full bg-(--nut-scrollbar-thumb) transition-colors duration-150 will-change-transform hover:bg-(--nut-scrollbar-thumb-hover)"

package/dist/runtime/table/composables/use-table-data.js

@@ -1,4 +1,10 @@
-import { keepPreviousData, useInfiniteQuery, useQueries, useQuery } from "@tanstack/vue-query";
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useQueries,
+  useQuery,
+  useQueryClient
+} from "@tanstack/vue-query";
 import { computed, readonly, ref, shallowRef, watch } from "vue";
 import { isArray, isFunction, isNumber, isObject, isString } from "../../shared/utils/predicate.js";
 import { QUERY_DEFAULTS } from "../constants/query-state.js";
@@ -95,22 +101,35 @@ export function useTableData(params) {
   const searchParams = requestContext;
   const dataStaleTime = computed(() => QUERY_DEFAULTS.staleTime.data);
   const isCursorPagination = computed(() => requestPagination.value.mode === "cursor");
+  const sourceDefinition = computed(
+    () => resolveSourceDefinition({
+      context: contextData.value,
+      request: requestContext.value,
+      sourceRequest: sourceRequest.value,
+      source: params.schema.value.source
+    })
+  );
+  const cachedSourceKey = isCursorPagination.value ? createTableCursorQueryKey(
+    sourceDefinition.value.queryKey,
+    params.state.queryState.paginationRevision.value
+  ) : sourceDefinition.value.queryKey;
+  if (isQueryDefinitionEnabled(sourceDefinition.value) && useQueryClient().getQueryData(cachedSourceKey) !== void 0) {
+    params.startup.start();
+  }
   const query = useQuery(
     computed(() => {
-      const definition = resolveSourceDefinition({
-        context: contextData.value,
-        request: requestContext.value,
-        sourceRequest: sourceRequest.value,
-        source: params.schema.value.source
-      });
       if (isCursorPagination.value) {
         return disabledQueryDefinition("cursor");
       }
-      return withEnabled(definition, params.startup.isActive.value && isContextReady.value, {
-        placeholderData: keepPreviousData,
-        refetchOnWindowFocus: QUERY_DEFAULTS.refetchOnWindowFocus,
-        staleTime: dataStaleTime.value
-      });
+      return withEnabled(
+        sourceDefinition.value,
+        params.startup.isActive.value && isContextReady.value,
+        {
+          placeholderData: keepPreviousData,
+          refetchOnWindowFocus: QUERY_DEFAULTS.refetchOnWindowFocus,
+          staleTime: dataStaleTime.value
+        }
+      );
     })
   );
   const infiniteQuery = useInfiniteQuery(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",