nuxt-ui-tools 1.8.1 → 1.9.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.8.1",
+  "version": "1.9.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/dashboard/components/dashboard-stat.vue

@@ -6,6 +6,7 @@ import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isNumber, isString } from "#ui-tools/shared/utils/predicate";
 import { resolveTextValue } from "#ui-tools/shared/utils/render";
 import { DASHBOARD_MISSING_VALUE, useDashboardFormat } from "../composables/use-dashboard-format";
+import { countedFigure, tweenTarget, useDashboardTween } from "../composables/use-dashboard-tween";
 import { useDashboardUi } from "../composables/use-dashboard-ui";
 import { resolveDashboardColor } from "../utils/charts";
 import { resolveDashboardSparkBars, resolveDashboardSparkline } from "../utils/sparkline";
@@ -73,11 +74,12 @@ const ready = computed(() => {
 });
 const resolved = computed(() => ready.value ? value(ready.value.data) : void 0);
 const formatValue = computed(() => formats.resolve(format));
+const counted = useDashboardTween(() => [tweenTarget(resolved.value)]);
 const display = computed(() => {
   if (!ready.value) return "";
   const shown = resolved.value;
   if (shown === null || shown === void 0) return DASHBOARD_MISSING_VALUE;
-  return isNumber(shown) ? formatValue.value(shown) : resolveTextValue(shown);
+  return isNumber(shown) ? formatValue.value(countedFigure(shown, counted.value[0])) : resolveTextValue(shown);
 });
 const previous = computed(() => {
   if (!ready.value || !compare) return null;
@@ -201,7 +203,7 @@ const extra = computed(() => trend ? "trend" : goal ? "goal" : void 0);
     </template>
 
     <template v-if="ready">
-      <div :class="classes.value">
+      <div :class="classes.value" data-stat-value>
         <slot name="value" :data="ready.data" :value="display">{{ display }}</slot>
       </div>
       <div v-if="change || captionText || $slots.caption" :class="classes.meta">

package/dist/runtime/dashboard/components/dashboard-stats.vue

@@ -6,6 +6,7 @@ import { useResponsiveValue } from "#ui-tools/shared/composables/use-responsive-
 import { isNumber, isString } from "#ui-tools/shared/utils/predicate";
 import { resolveTextValue } from "#ui-tools/shared/utils/render";
 import { useDashboardFormat } from "../composables/use-dashboard-format";
+import { countedFigure, tweenTarget, useDashboardTween } from "../composables/use-dashboard-tween";
 import { useDashboardUi } from "../composables/use-dashboard-ui";
 import { resolveDashboardColor } from "../utils/charts";
 import { toDashboardCell } from "../utils/export";
@@ -100,6 +101,14 @@ const entries = computed(() => {
     };
   });
 });
+const counted = useDashboardTween(
+  () => items.map((_item, index) => tweenTarget(entries.value[index]?.raw))
+);
+const shown = computed(
+  () => entries.value.map(
+    (entry, index) => isNumber(entry.raw) ? formats.resolve(items[index]?.format)(countedFigure(entry.raw, counted.value[index])) : entry.value
+  )
+);
 function tabulate() {
   const hasDelta = items.some((item) => item.delta);
   return {
@@ -142,7 +151,7 @@ function tabulate() {
     </template>
 
     <div :class="classes.grid" :style="gridColumns ?? void 0" :data-variant="variant">
-      <div v-for="entry in entries" :key="entry.key" :class="classes.item" data-stats-item>
+      <div v-for="(entry, index) in entries" :key="entry.key" :class="classes.item" data-stats-item>
         <div class="flex min-w-0 items-center gap-2">
           <span
             v-if="entry.icon"
@@ -157,7 +166,7 @@ function tabulate() {
           <span :class="classes.label">{{ entry.label }}</span>
         </div>
         <div :class="classes.value">
-          <span class="truncate">{{ entry.value }}</span>
+          <span class="truncate">{{ shown[index] }}</span>
           <span
             v-if="entry.status"
             :class="classes.status"

package/dist/runtime/dashboard/composables/use-dashboard-tween.d.ts

@@ -0,0 +1,16 @@
+import type { MaybeRefOrGetter } from 'vue';
+/** How long a figure takes to count toward a new value. */
+export declare const DASHBOARD_TWEEN_DURATION = 700;
+/**
+ * Counts figures toward their new values instead of jumping to them: on the first load, a filter
+ * change, or a refresh. Keep the list the same length between updates, since each position counts
+ * from its previous value. Figures change at once when the user prefers reduced motion.
+ */
+export declare function useDashboardTween(figures: MaybeRefOrGetter<number[]>): import("vue").ComputedRef<number[]>;
+/**
+ * The figure to show while counting toward `target`. Whole numbers count through whole numbers, so
+ * a count never reads "12.3" on its way to 21; values that cannot be counted show as they are.
+ */
+export declare function countedFigure(target: number, current: number | undefined): number;
+/** A figure a tween can count toward: finite numbers, and zero for anything else. */
+export declare function tweenTarget(value: unknown): number;

package/dist/runtime/dashboard/composables/use-dashboard-tween.js

@@ -0,0 +1,20 @@
+import { TransitionPresets, usePreferredReducedMotion, useTransition } from "@vueuse/core";
+import { computed } from "vue";
+import { isNumber } from "../../shared/utils/predicate.js";
+export const DASHBOARD_TWEEN_DURATION = 700;
+export function useDashboardTween(figures) {
+  const reducedMotion = usePreferredReducedMotion();
+  return useTransition(figures, {
+    disabled: computed(() => reducedMotion.value === "reduce"),
+    duration: DASHBOARD_TWEEN_DURATION,
+    transition: TransitionPresets.easeOutCubic
+  });
+}
+export function countedFigure(target, current) {
+  if (!Number.isFinite(target)) return target;
+  const shown = current !== void 0 && Number.isFinite(current) ? current : target;
+  return Number.isInteger(target) ? Math.round(shown) : shown;
+}
+export function tweenTarget(value) {
+  return isNumber(value) && Number.isFinite(value) ? value : 0;
+}

package/dist/runtime/form/composables/use-field-options.js

@@ -64,6 +64,9 @@ export function useFieldOptions(params) {
     () => contextResources.value.find((resource) => resource.error !== null)?.error ?? null
   );
   const optionConfig = computed(() => resolveOptionConfig(params.field()));
+  const declaresOptions = computed(
+    () => createFormFieldInstance(params.field()).capability.has("options") && !isUndefined(Object.getOwnPropertyDescriptor(params.field(), "options")?.value)
+  );
   const querySource = computed(() => {
     const source = resolvedSource.value;
     return isRuntimeQueryOptions(source) ? source : null;
@@ -303,13 +306,10 @@ export function useFieldOptions(params) {
     params.api.value.value.set([...selected, value]);
   }
   function clearInvalidValue(options) {
-    if (!optionConfig.value || remoteConfig.value) {
-      return;
-    }
-    if (pending.value) {
+    if (remoteConfig.value || pending.value || error.value !== null) {
       return;
     }
-    if (optionConfig.value?.clearOnInvalid === false) {
+    if (!declaresOptions.value || optionConfig.value?.clearOnInvalid === false) {
       return;
     }
     const current = params.api.value.value.get();

package/dist/runtime/form/types/options.d.ts

@@ -62,7 +62,11 @@ export interface FormOptionConfig<TOption, TContext = NonNullable<unknown>, TDep
     create?: FormCreateOption<TOption, TContext, TDeps, TValue>;
     /** Enables the field-level refresh affordance. Matches shared-ui `allowOptionsRefresh`. */
     allowOptionsRefresh?: boolean;
-    /** Clears current values that no longer exist in resolved options. Defaults to `true`. */
+    /**
+     * Clears current values that no longer exist in resolved options. Defaults to `true`, which
+     * shorthand sources (arrays, functions, promises, query options) always use. Values are kept
+     * while the source is pending or failed.
+     */
     clearOnInvalid?: boolean;
     /** Runs when resolved source options change, excluding locally-created options. */
     onOptionsChange?: (options: readonly TOption[], params: FormOptionsChangeParams<TContext, TDeps, TValue, TOption>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.8.1",
+  "version": "1.9.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",