@mkbabb/glass-ui 3.3.0 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{DataTable-FfkaAg2z.js → DataTable-DyKc_26a.js} +144 -106
- package/dist/{NumberFieldContent-iOTQ5rGO.js → NumberFieldContent-jO-zGOHf.js} +1 -1
- package/dist/api/index.d.ts +1 -0
- package/dist/{button-Ckn3eDfB.js → button-i8Ek5vvg.js} +1 -1
- package/dist/button.js +1 -1
- package/dist/carousel.js +1 -1
- package/dist/components/custom/deck-progress/DeckProgress.vue.d.ts +27 -0
- package/dist/components/custom/deck-progress/index.d.ts +2 -0
- package/dist/components/custom/dock/composables/useLayerTransition.d.ts +11 -0
- package/dist/components/ui/data-table/composables/useDataTableResponsive.d.ts +28 -0
- package/dist/components/ui/data-table/composables/useDataTableRowIdentity.d.ts +33 -0
- package/dist/composables/dark/useGlobalDark.d.ts +17 -6
- package/dist/composables/dom/index.d.ts +3 -0
- package/dist/composables/dom/useBreakpoint.d.ts +38 -0
- package/dist/composables/dom/useIdleReady.d.ts +63 -0
- package/dist/composables/dom/useTokenColor.d.ts +13 -0
- package/dist/composables/dom/useViewportReady.d.ts +87 -0
- package/dist/composables/glass/index.d.ts +1 -1
- package/dist/composables/glass/useGlassRenderer.d.ts +10 -3
- package/dist/composables/motion/useAnimatedNumber.d.ts +8 -2
- package/dist/composables/motion/useCountup.d.ts +8 -2
- package/dist/composables/motion/useNumericTransition.d.ts +31 -9
- package/dist/composables/motion/useViewTransition.d.ts +16 -1
- package/dist/confirm-dialog.js +1 -1
- package/dist/data-table.js +1 -1
- package/dist/dock.js +169 -158
- package/dist/dom.js +4 -4
- package/dist/glass-panel.js +14 -14
- package/dist/glass-ui.css +1 -1
- package/dist/glass-ui.js +134 -119
- package/dist/goo-blob.js +108 -89
- package/dist/index.d.ts +1 -0
- package/dist/labeled-field.js +1 -1
- package/dist/motion-core.js +1 -1
- package/dist/number-field.js +1 -1
- package/dist/search.js +1 -1
- package/dist/{slider-BOh8ycfZ.js → slider-CgNzRSh6.js} +1 -1
- package/dist/slider.js +1 -1
- package/dist/styles/components.css +1 -1
- package/dist/styles/dock.css +112 -48
- package/dist/styles/glass.css +44 -1
- package/dist/styles/instrument-chassis.css +10 -13
- package/dist/styles/instrument-rail.css +11 -12
- package/dist/styles/tokens.css +9 -7
- package/dist/styles/utilities.css +20 -0
- package/dist/styles/view-transition.css +24 -0
- package/dist/tabs.js +1 -1
- package/dist/timeline.js +1 -1
- package/dist/useViewTransition-CJnqg6wl.js +21 -0
- package/dist/useViewportReady-Dcvf0c4p.js +191 -0
- package/package.json +5 -3
- package/src/styles/dock.css +112 -48
- package/src/styles/glass.css +44 -1
- package/src/styles/instrument-chassis.css +10 -13
- package/src/styles/instrument-rail.css +11 -12
- package/src/styles/tokens.css +9 -7
- package/src/styles/utilities.css +20 -0
- package/src/styles/view-transition.css +24 -0
- package/dist/useClipboard-D8vFyRCa.js +0 -97
- package/dist/useViewTransition-D4ssvnXZ.js +0 -18
|
@@ -1,4 +1,20 @@
|
|
|
1
1
|
import type { BasicColorSchema } from "@vueuse/core";
|
|
2
|
+
import { type Ref, type WritableComputedRef } from "vue";
|
|
3
|
+
/**
|
|
4
|
+
* The `useGlobalDark` return shape (AW.W15 — named `Use<Name>Return`). The
|
|
5
|
+
* single shared dark-mode instance: the reactive `isDark` flag, a `toggleDark`
|
|
6
|
+
* that optionally suppresses transitions, and the transition-suppression switch.
|
|
7
|
+
*/
|
|
8
|
+
export interface UseGlobalDarkReturn {
|
|
9
|
+
/** Reactive dark-mode flag (vueuse `useDark` ref — writable). */
|
|
10
|
+
isDark: WritableComputedRef<boolean>;
|
|
11
|
+
/** Toggle dark mode (suppresses transitions when configured). */
|
|
12
|
+
toggleDark: () => void;
|
|
13
|
+
/** Whether transitions are suppressed during a toggle. */
|
|
14
|
+
disableTransitions: Ref<boolean>;
|
|
15
|
+
/** Configure transition suppression during the dark-mode toggle. */
|
|
16
|
+
setDisableTransitions: (value: boolean) => void;
|
|
17
|
+
}
|
|
2
18
|
export interface UseGlobalDarkOptions {
|
|
3
19
|
/**
|
|
4
20
|
* The first-paint color scheme seed, threaded to `useDark({ initialValue })`.
|
|
@@ -16,9 +32,4 @@ export interface UseGlobalDarkOptions {
|
|
|
16
32
|
* `initialValue` seed (one-shot — see `UseGlobalDarkOptions`); subsequent calls
|
|
17
33
|
* receive the already-constructed singleton and their `initialValue` is ignored.
|
|
18
34
|
*/
|
|
19
|
-
export declare function useGlobalDark(options?: UseGlobalDarkOptions):
|
|
20
|
-
isDark: import("@vueuse/core").UseDarkReturn;
|
|
21
|
-
toggleDark: () => void;
|
|
22
|
-
disableTransitions: import("vue").Ref<boolean, boolean>;
|
|
23
|
-
setDisableTransitions: (value: boolean) => void;
|
|
24
|
-
};
|
|
35
|
+
export declare function useGlobalDark(options?: UseGlobalDarkOptions): UseGlobalDarkReturn;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { type Ref } from "vue";
|
|
2
|
+
export interface UseBreakpointControls {
|
|
3
|
+
/** Live `matches` state for the given media query. */
|
|
4
|
+
readonly matches: Readonly<Ref<boolean>>;
|
|
5
|
+
/** Tear down the `matchMedia` listener. Auto-called on scope dispose. */
|
|
6
|
+
stop: () => void;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* `useBreakpoint(query)` — a reactive read of a CSS media query's `matches`
|
|
10
|
+
* state, kept live across resize / orientation / display-mode changes.
|
|
11
|
+
*
|
|
12
|
+
* Wraps `window.matchMedia(query)`, subscribes a single `change` handler,
|
|
13
|
+
* and mirrors `mql.matches` into a `Ref<boolean>`. Auto-cleans on Vue scope
|
|
14
|
+
* disposal (mirrors `useResizeObserver` / `useInterval` upstream); outside
|
|
15
|
+
* a scope callers use the returned `stop()` control.
|
|
16
|
+
*
|
|
17
|
+
* SSR-safe: when `window` is undefined the composable returns a
|
|
18
|
+
* permanently-`false` ref. Consumers should treat the initial frame as
|
|
19
|
+
* "mobile-first / narrow-default" because the matchMedia subscription only
|
|
20
|
+
* mounts client-side. This is the same shape consumers wrote by hand at the
|
|
21
|
+
* speedtest origin sites.
|
|
22
|
+
*
|
|
23
|
+
* Why this exists (speedtest origin, glass-ui promotion W6-β): the survey
|
|
24
|
+
* cockpit (`SurveyWizard.vue`) and the admin data-source toggle
|
|
25
|
+
* (`AdminDataSourceToggle.vue`) both hand-rolled the same `matchMedia`
|
|
26
|
+
* subscribe-on-mount + tear-down-on-unmount pattern. Two hand-rolls of one
|
|
27
|
+
* pattern is the `feedback_generic_components` 2-consumer trigger;
|
|
28
|
+
* absorbed publisher-side per `feedback_library_gaps`.
|
|
29
|
+
*
|
|
30
|
+
* Usage:
|
|
31
|
+
* const { matches: isDesktop } = useBreakpoint("(min-width: 720px)");
|
|
32
|
+
* const wide = isDesktop.value; // live across resize.
|
|
33
|
+
*
|
|
34
|
+
* @param query A CSS `@media` query string, e.g. `"(min-width: 720px)"`.
|
|
35
|
+
* @returns Object with `matches: Ref<boolean>` and `stop()` for manual
|
|
36
|
+
* disposal outside a Vue scope.
|
|
37
|
+
*/
|
|
38
|
+
export declare function useBreakpoint(query: string): UseBreakpointControls;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { type Ref } from "vue";
|
|
2
|
+
export interface UseIdleReadyOptions {
|
|
3
|
+
/**
|
|
4
|
+
* `requestIdleCallback` timeout, in ms. Default 2_000 — the canonical
|
|
5
|
+
* value at every speedtest hand-rolled site (App.vue + useIPInfo both
|
|
6
|
+
* pass `{ timeout: 2000 }`). Unlike useViewportReady's 10s (which fronts
|
|
7
|
+
* the budget with an IO gate), useIdleReady has no visibility stage, so
|
|
8
|
+
* the timeout is the only ceiling — 2s matches the consumer sites and
|
|
9
|
+
* keeps the deferred work inside a reasonable post-paint window.
|
|
10
|
+
*/
|
|
11
|
+
timeout?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Optional task run the moment the gate flips (the scope-aware variant —
|
|
14
|
+
* useIPInfo's `() => void refresh()`). Runs exactly once; auto-cancelled
|
|
15
|
+
* on scope dispose with the rIC handle so a short-lived consumer cannot
|
|
16
|
+
* leak a deferred write to disposed refs. Consumers that only need the
|
|
17
|
+
* `ready` ref omit it.
|
|
18
|
+
*/
|
|
19
|
+
onReady?: () => void;
|
|
20
|
+
}
|
|
21
|
+
export interface UseIdleReadyControls {
|
|
22
|
+
/** Flips `false → true` exactly once on the first idle tick (post-mount). */
|
|
23
|
+
readonly ready: Ref<boolean>;
|
|
24
|
+
/** Tear down the pending idle/timer handle. Auto-called on scope dispose. */
|
|
25
|
+
stop: () => void;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* `useIdleReady(options?)` — `requestIdleCallback` (+ `setTimeout(0)` Safari
|
|
29
|
+
* fallback) post-mount idle gate that flips a `Ref<boolean>` exactly once on
|
|
30
|
+
* the first idle tick, and optionally runs an `onReady` task at that moment.
|
|
31
|
+
*
|
|
32
|
+
* The rIC-only sibling of `useViewportReady` — same one-shot `ready` ref +
|
|
33
|
+
* `stop()` shape, same auto-dispose discipline — minus the
|
|
34
|
+
* `IntersectionObserver` visibility stage. The gate is "idle, full stop", not
|
|
35
|
+
* "visible AND idle"; reach for it when there is no element to gate on (a
|
|
36
|
+
* top-level lazy mount, a composable's first-idle data fetch).
|
|
37
|
+
*
|
|
38
|
+
* Two unified use shapes:
|
|
39
|
+
*
|
|
40
|
+
* 1. `ready`-flag — `v-if`-gate a heavy mount on the returned ref:
|
|
41
|
+
* const { ready } = useIdleReady();
|
|
42
|
+
* // <Aurora v-if="ready" />
|
|
43
|
+
* 2. scope-aware task — run a callback on first idle, cancelled on dispose:
|
|
44
|
+
* useIdleReady({ onReady: () => void refresh() });
|
|
45
|
+
* The handle is auto-cancelled on Vue scope disposal so a short-lived
|
|
46
|
+
* consumer cannot leak a deferred write to disposed refs.
|
|
47
|
+
*
|
|
48
|
+
* The composable schedules synchronously at call time (NOT inside an
|
|
49
|
+
* `onMounted`) so it works outside a component too (e.g. inside `useIPInfo`,
|
|
50
|
+
* a composable not a component). SSR / non-browser flips synchronously so
|
|
51
|
+
* consumers don't stall.
|
|
52
|
+
*
|
|
53
|
+
* Why this exists (speedtest origin, glass-ui promotion AO.W3): the gate is
|
|
54
|
+
* hand-rolled at 5 speedtest sites (App.vue, MapView.vue, DashboardMap.vue,
|
|
55
|
+
* useAutoStart.ts, useIPInfo.ts) — the ≥2-consumer substrate-promotion gate
|
|
56
|
+
* (J inv 10 / L inv 8) fires for a publisher-side absorption.
|
|
57
|
+
*
|
|
58
|
+
* @param options.timeout Default `2000` ms — forwarded to `requestIdleCallback`.
|
|
59
|
+
* @param options.onReady Optional one-shot task run on the idle flip.
|
|
60
|
+
* @returns Object with `ready: Ref<boolean>` (flips false → true once) and
|
|
61
|
+
* `stop()` for manual disposal outside a Vue scope.
|
|
62
|
+
*/
|
|
63
|
+
export declare function useIdleReady(options?: UseIdleReadyOptions): UseIdleReadyControls;
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
import { type MaybeRefOrGetter, type Ref } from "vue";
|
|
2
|
+
/**
|
|
3
|
+
* The resolver seam (AW.W15) — given a property name + the resolved element,
|
|
4
|
+
* return the property's value. Defaults to the live
|
|
5
|
+
* `getComputedStyle(el).getPropertyValue(prop)` read; an injected resolver lets
|
|
6
|
+
* SSR / tests close the DI loop without touching `document.documentElement`.
|
|
7
|
+
*/
|
|
8
|
+
export type TokenColorResolver = (prop: string, el?: HTMLElement) => string;
|
|
2
9
|
export interface UseTokenColorOptions {
|
|
3
10
|
/** Element to resolve the property against. Defaults to `<html>`. */
|
|
4
11
|
element?: MaybeRefOrGetter<HTMLElement | null | undefined>;
|
|
5
12
|
/** Fallback when the property is unset or `document` is unavailable (SSR). */
|
|
6
13
|
fallback?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Injected property resolver (AW.W15 DI seam). Defaults to the live
|
|
16
|
+
* `getComputedStyle(el).getPropertyValue(prop)` read. Pass a custom resolver
|
|
17
|
+
* for SSR / tests / a themed-context override without reaching the DOM.
|
|
18
|
+
*/
|
|
19
|
+
resolver?: TokenColorResolver;
|
|
7
20
|
}
|
|
8
21
|
export interface UseTokenColorControls {
|
|
9
22
|
/** Reactive resolved value. Trimmed; falls back to `options.fallback` when empty. */
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { type Ref } from "vue";
|
|
2
|
+
/**
|
|
3
|
+
* Structural Ref shape — accepts the consumer's `Ref<T>` regardless of which
|
|
4
|
+
* `@vue/reactivity` package the brand symbol comes from. Glass-ui may sit at
|
|
5
|
+
* a different vue minor than the consumer, and Vue 3.5's `[RefSymbol]`
|
|
6
|
+
* phantom is nominal-by-package; structural-by-`.value` is the correct
|
|
7
|
+
* contract for a consumer-facing API. Same shape `useResizeObserver` uses.
|
|
8
|
+
*/
|
|
9
|
+
type RefLike<T> = {
|
|
10
|
+
value: T;
|
|
11
|
+
};
|
|
12
|
+
export interface UseViewportReadyOptions {
|
|
13
|
+
/**
|
|
14
|
+
* IntersectionObserver `rootMargin`. Default `"200px"` so the gate flips
|
|
15
|
+
* before the host actually crosses the viewport edge — gives the
|
|
16
|
+
* consumer a quiet window for lazy-mount (`echarts`, `<canvas>` re-init,
|
|
17
|
+
* heavy widget hydration) to land off the LCP frame.
|
|
18
|
+
*/
|
|
19
|
+
rootMargin?: string;
|
|
20
|
+
/**
|
|
21
|
+
* `requestIdleCallback` timeout, in ms. Default 10_000.
|
|
22
|
+
*
|
|
23
|
+
* Why 10s and not the conventional 1–2s: a cold-loading consumer (slow
|
|
24
|
+
* throughput, weak device) may not sustainably idle inside a 1–2s
|
|
25
|
+
* window — the timeout fires inside the LCP measurement window and
|
|
26
|
+
* defeats the IO gate's "wait for viewport AND idle main thread"
|
|
27
|
+
* semantic. The IO gate fronts the budget, so the timeout only fires
|
|
28
|
+
* after intersection has already resolved; ten seconds gives the main
|
|
29
|
+
* thread room to idle naturally.
|
|
30
|
+
*/
|
|
31
|
+
idleTimeout?: number;
|
|
32
|
+
/**
|
|
33
|
+
* IntersectionObserver `threshold`. Default 0.01 (1 % visible). Mirrors
|
|
34
|
+
* the speedtest origin-site semantic — "any pixel visible counts".
|
|
35
|
+
*/
|
|
36
|
+
threshold?: number;
|
|
37
|
+
}
|
|
38
|
+
export interface UseViewportReadyControls {
|
|
39
|
+
/** Flips `false → true` exactly once when the host is visible + idle. */
|
|
40
|
+
readonly ready: Ref<boolean>;
|
|
41
|
+
/** Tear down observer + idle handle. Auto-called on scope dispose. */
|
|
42
|
+
stop: () => void;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* `useViewportReady(host)` — two-stage `IntersectionObserver` +
|
|
46
|
+
* `requestIdleCallback` gate that flips a `Ref<boolean>` exactly once when
|
|
47
|
+
* the host element has entered the viewport AND the main thread has idled.
|
|
48
|
+
*
|
|
49
|
+
* The intended use is lazy-mount of a heavy widget (echarts, leaflet,
|
|
50
|
+
* three.js, codemirror, custom canvas) that would otherwise pull its chunk
|
|
51
|
+
* into the first-paint critical path. The two-stage gate ensures:
|
|
52
|
+
*
|
|
53
|
+
* 1. Visibility-first — `IntersectionObserver` watches `host`. Until the
|
|
54
|
+
* host crosses into the viewport (+ `rootMargin`), no fetch fires.
|
|
55
|
+
* 2. Idle-second — once visible, `requestIdleCallback` schedules the flip
|
|
56
|
+
* so the chunk fetch waits for an idle main thread. Safari (no rIC)
|
|
57
|
+
* falls back to `setTimeout(fire, 16)` — one frame later — so the
|
|
58
|
+
* composition still defers past the IO callback's paint frame.
|
|
59
|
+
*
|
|
60
|
+
* The composable is one-shot: once the gate flips to `true` it disconnects
|
|
61
|
+
* its observer and clears any pending idle handle. Auto-cleans on Vue scope
|
|
62
|
+
* disposal (mirrors `useResizeObserver` / `useInterval` upstream); outside
|
|
63
|
+
* a scope callers receive the manual `stop()` control.
|
|
64
|
+
*
|
|
65
|
+
* Why this exists (speedtest origin, glass-ui promotion AJ.W6-α): both
|
|
66
|
+
* `AdminOverviewView` and `ChartsView` shipped a near-identical `chartReady`
|
|
67
|
+
* flag flipped by `requestIdleCallback` alone. The W3-R1 idiom in those
|
|
68
|
+
* sites — gate visibility first, then schedule rIC inside the IO callback —
|
|
69
|
+
* is generic across heavy-widget hydration; the speedtest 2-consumer trigger
|
|
70
|
+
* fired for a publisher-side absorption per `feedback_generic_components`.
|
|
71
|
+
*
|
|
72
|
+
* Usage:
|
|
73
|
+
* const host = ref<HTMLElement | null>(null);
|
|
74
|
+
* const { ready } = useViewportReady(host);
|
|
75
|
+
* // <Chart v-if="ready" /> — fetched lazily once host is visible + idle.
|
|
76
|
+
*
|
|
77
|
+
* @param host A `Ref<Element | null>` for the element to gate visibility on.
|
|
78
|
+
* The observer watches THIS element, not the lazy-mounted
|
|
79
|
+
* widget (which doesn't exist pre-flip).
|
|
80
|
+
* @param options.rootMargin Default `"200px"`.
|
|
81
|
+
* @param options.idleTimeout Default `10000` ms.
|
|
82
|
+
* @param options.threshold Default `0.01`.
|
|
83
|
+
* @returns Object with `ready: Ref<boolean>` (flips false → true once) and
|
|
84
|
+
* `stop()` for manual disposal outside a Vue scope.
|
|
85
|
+
*/
|
|
86
|
+
export declare function useViewportReady(host: RefLike<Element | null>, options?: UseViewportReadyOptions): UseViewportReadyControls;
|
|
87
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { useGlassRenderer, createGlassFilter, destroyGlassFilter, type GlassTier, type GlassFilterState, } from "./useGlassRenderer";
|
|
1
|
+
export { useGlassRenderer, createGlassFilter, destroyGlassFilter, type GlassTier, type GlassFilterState, type UseGlassRendererReturn, } from "./useGlassRenderer";
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
+
import { type Ref } from "vue";
|
|
1
2
|
export type GlassTier = "svg-filter" | "css" | "fallback";
|
|
3
|
+
/**
|
|
4
|
+
* The `useGlassRenderer` return shape (AW.W15 — named `Use<Name>Return`). The
|
|
5
|
+
* detected (or forced) glass rendering tier as a reactive ref.
|
|
6
|
+
*/
|
|
7
|
+
export interface UseGlassRendererReturn {
|
|
8
|
+
/** The active rendering tier — `preferredTier` if forced, else auto-detected on mount. */
|
|
9
|
+
tier: Ref<GlassTier>;
|
|
10
|
+
}
|
|
2
11
|
export interface GlassFilterState {
|
|
3
12
|
filterId: string;
|
|
4
13
|
svgEl: SVGSVGElement;
|
|
@@ -32,6 +41,4 @@ export declare function destroyGlassFilter(state: GlassFilterState): void;
|
|
|
32
41
|
*/
|
|
33
42
|
export declare function useGlassRenderer(options?: {
|
|
34
43
|
preferredTier?: GlassTier;
|
|
35
|
-
}):
|
|
36
|
-
tier: import("vue").Ref<GlassTier, GlassTier>;
|
|
37
|
-
};
|
|
44
|
+
}): UseGlassRendererReturn;
|
|
@@ -18,7 +18,11 @@ export interface UseAnimatedNumberOptions {
|
|
|
18
18
|
/** Per-frame side-effect hook. Receives the smoothed current value. */
|
|
19
19
|
onValue?: (value: number) => void;
|
|
20
20
|
}
|
|
21
|
-
|
|
21
|
+
/**
|
|
22
|
+
* The `useAnimatedNumber` return shape (AW.W15 — named `Use<Name>Return`
|
|
23
|
+
* convention). `AnimatedNumber` is the preserved alias so import sites stay put.
|
|
24
|
+
*/
|
|
25
|
+
export interface UseAnimatedNumberReturn {
|
|
22
26
|
/** Reactive smoothed value. Bind in templates. */
|
|
23
27
|
current: Readonly<Ref<number>>;
|
|
24
28
|
/** True while the rAF loop is running and not settled. */
|
|
@@ -30,6 +34,8 @@ export interface AnimatedNumber {
|
|
|
30
34
|
/** Stop the smoother and target watcher. */
|
|
31
35
|
dispose: () => void;
|
|
32
36
|
}
|
|
37
|
+
/** Preserved alias for {@link UseAnimatedNumberReturn} (AW.W15). */
|
|
38
|
+
export type AnimatedNumber = UseAnimatedNumberReturn;
|
|
33
39
|
/**
|
|
34
40
|
* Track a live numeric target with exponentially damped hysteresis.
|
|
35
41
|
*
|
|
@@ -37,4 +43,4 @@ export interface AnimatedNumber {
|
|
|
37
43
|
* composable wires Vue reactivity, reduced-motion handling, and lifecycle
|
|
38
44
|
* cleanup.
|
|
39
45
|
*/
|
|
40
|
-
export declare function useAnimatedNumber(target: MaybeRefOrGetter<number | null | undefined>, options?: UseAnimatedNumberOptions):
|
|
46
|
+
export declare function useAnimatedNumber(target: MaybeRefOrGetter<number | null | undefined>, options?: UseAnimatedNumberOptions): UseAnimatedNumberReturn;
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { type Ref } from "vue";
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* The `useCountup` return shape (AW.W15 — named `Use<Name>Return` convention).
|
|
4
|
+
* `Countup` is the preserved alias so existing import sites do not break.
|
|
5
|
+
*/
|
|
6
|
+
export interface UseCountupReturn {
|
|
3
7
|
/** Animate the count-ups inside the currently-active slide/region. */
|
|
4
8
|
runActive: () => void;
|
|
5
9
|
/** Snap EVERY `[data-countup]` in the document to its end value (still capture). */
|
|
@@ -7,6 +11,8 @@ export interface Countup {
|
|
|
7
11
|
/** Cancel every in-flight tween (also runs on scope-dispose). */
|
|
8
12
|
cancel: () => void;
|
|
9
13
|
}
|
|
14
|
+
/** Preserved alias for {@link UseCountupReturn} — keeps import sites stable (AW.W15). */
|
|
15
|
+
export type Countup = UseCountupReturn;
|
|
10
16
|
export interface UseCountupOptions {
|
|
11
17
|
/**
|
|
12
18
|
* Easing applied to tween progress — a value.js-FREE callable
|
|
@@ -26,4 +32,4 @@ export interface UseCountupOptions {
|
|
|
26
32
|
* // on slide-activate: runActive();
|
|
27
33
|
* // on still-capture: settle();
|
|
28
34
|
*/
|
|
29
|
-
export declare function useCountup(hostRef: Ref<HTMLElement | null>, opts: UseCountupOptions):
|
|
35
|
+
export declare function useCountup(hostRef: Ref<HTMLElement | null>, opts: UseCountupOptions): UseCountupReturn;
|
|
@@ -1,13 +1,40 @@
|
|
|
1
|
-
import type { TimingFunction
|
|
1
|
+
import type { TimingFunction } from "@mkbabb/keyframes.js";
|
|
2
|
+
import { type Ref } from "vue";
|
|
2
3
|
export type SpringSnapshot<K extends string> = Record<K, number>;
|
|
4
|
+
/**
|
|
5
|
+
* The `useNumericTransition` return shape (AW.W15 — named `Use<Name>Return`).
|
|
6
|
+
* The transition is driver-only: `start`/`stop` control playback, `progress`
|
|
7
|
+
* (0..1) + `playing` are reactive read-outs.
|
|
8
|
+
*/
|
|
9
|
+
export interface UseNumericTransitionReturn {
|
|
10
|
+
/** Play the transition from `from` → `to`; resolves at completion. */
|
|
11
|
+
start: () => Promise<void>;
|
|
12
|
+
/** Stop the in-flight transition. */
|
|
13
|
+
stop: () => void;
|
|
14
|
+
/** Reactive 0..1 progress derived from the first interpolated key. */
|
|
15
|
+
progress: Ref<number>;
|
|
16
|
+
/** Reactive true-while-playing flag. */
|
|
17
|
+
playing: Ref<boolean>;
|
|
18
|
+
}
|
|
3
19
|
export interface UseNumericTransitionOptions<K extends string> {
|
|
4
20
|
/** Named numeric endpoints to interpolate between. */
|
|
5
21
|
from: SpringSnapshot<K>;
|
|
6
22
|
to: SpringSnapshot<K>;
|
|
7
23
|
/** Playback duration in ms. */
|
|
8
24
|
duration: number;
|
|
9
|
-
/**
|
|
10
|
-
|
|
25
|
+
/**
|
|
26
|
+
* keyframes.js timing function — an explicit callable `(t) => number`.
|
|
27
|
+
*
|
|
28
|
+
* AW.W27: this is a CALLABLE `TimingFunction`, NOT a string easing name.
|
|
29
|
+
* keyframes 4 removed string-name acceptance from `NumericAnimationOptions`
|
|
30
|
+
* (a name now resolves only through the ASYNC `resolveEasing`, which crosses
|
|
31
|
+
* the value.js dynamic boundary the dock/motion light surface must never
|
|
32
|
+
* pull in). Narrowing glass-ui's public option to a callable decouples it
|
|
33
|
+
* from keyframes' name-resolution churn AND is assignable to every supported
|
|
34
|
+
* keyframes major (2.2 / 3 / 4). A consumer wanting a named curve passes the
|
|
35
|
+
* function directly (e.g. `(t) => 1 - Math.pow(1 - t, 3)` for easeOutCubic).
|
|
36
|
+
*/
|
|
37
|
+
timingFunction?: TimingFunction;
|
|
11
38
|
/** Per-frame consumer. Receives the same zero-allocation record each tick. */
|
|
12
39
|
onFrame?: (values: SpringSnapshot<K>) => void;
|
|
13
40
|
}
|
|
@@ -24,9 +51,4 @@ export interface UseNumericTransitionOptions<K extends string> {
|
|
|
24
51
|
*
|
|
25
52
|
* For physics-based motion (mass / stiffness / damping), use `useSpring`.
|
|
26
53
|
*/
|
|
27
|
-
export declare function useNumericTransition<K extends string>(options: UseNumericTransitionOptions<K>):
|
|
28
|
-
start: () => Promise<void>;
|
|
29
|
-
stop: () => void;
|
|
30
|
-
progress: import("vue").Ref<number, number>;
|
|
31
|
-
playing: import("vue").Ref<boolean, boolean>;
|
|
32
|
-
};
|
|
54
|
+
export declare function useNumericTransition<K extends string>(options: UseNumericTransitionOptions<K>): UseNumericTransitionReturn;
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
/** Options for `startViewTransition`. `types` (Chrome 140+, absent on Firefox
|
|
2
|
+
* 144) tag the active transition so `:active-view-transition-type(<t>)` CSS can
|
|
3
|
+
* author DIRECTION-specific curves. Feature-detected — when the engine lacks the
|
|
4
|
+
* object-with-`types` overload the call degrades to the plain-callback form
|
|
5
|
+
* (one symmetric curve), which is functionally identical (the swap still runs). */
|
|
6
|
+
export interface ViewTransitionOptions {
|
|
7
|
+
types?: string[];
|
|
8
|
+
}
|
|
1
9
|
export interface ViewTransitionResult {
|
|
2
10
|
/**
|
|
3
11
|
* Resolves when the transition's `finished` promise settles (or
|
|
@@ -21,11 +29,18 @@ export declare function supportsViewTransitions(): boolean;
|
|
|
21
29
|
* is identical regardless of support.
|
|
22
30
|
*
|
|
23
31
|
* @param mutate the synchronous DOM/state change to animate between.
|
|
32
|
+
* @param options optional `{ types }` — directional transition types tagged on
|
|
33
|
+
* the active transition for `:active-view-transition-type(<t>)` CSS curves
|
|
34
|
+
* (Chrome 140+; feature-detected, degrades to one symmetric curve elsewhere).
|
|
24
35
|
* @returns `{ finished, transitioned }` — await `finished` to route focus.
|
|
25
36
|
*
|
|
26
37
|
* @example
|
|
27
38
|
* const { finished } = startViewTransition(() => { rows.value = reranked });
|
|
28
39
|
* await finished; // animation done
|
|
29
40
|
* firstRow.value?.focus(); // consumer routes focus (the a11y MANDATORY)
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* // directional intent — snappier exit on collapse, softer entry on expand
|
|
44
|
+
* startViewTransition(() => mutate(), { types: ["dock-expand"] });
|
|
30
45
|
*/
|
|
31
|
-
export declare function startViewTransition(mutate: () => void): ViewTransitionResult;
|
|
46
|
+
export declare function startViewTransition(mutate: () => void, options?: ViewTransitionOptions): ViewTransitionResult;
|
package/dist/confirm-dialog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "./createLucideIcon-DuDoe_ra.js";
|
|
2
|
-
import { n as t } from "./button-
|
|
2
|
+
import { n as t } from "./button-i8Ek5vvg.js";
|
|
3
3
|
import { t as n } from "./_plugin-vue_export-helper-C1je1s0u.js";
|
|
4
4
|
import { Transition as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, withCtx as _, withKeys as v, withModifiers as y } from "vue";
|
|
5
5
|
var b = e("loader-circle", [["path", {
|
package/dist/data-table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "./DataTable-
|
|
1
|
+
import { n as e, t } from "./DataTable-DyKc_26a.js";
|
|
2
2
|
export { t as DataTable, e as DataTablePagination };
|