@omnitend/dashboard-for-laravel 0.33.1 → 0.35.0

package/dist/composables/useAsyncOptions.d.ts

@@ -0,0 +1,20 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { FieldDefinition, FieldOption } from "../types";
+/**
+ * Async option loading for a `DXField`: runs `field.optionsLoader` on mount and
+ * (when `field.reloadOptionsOnChange` is set) whenever the model changes,
+ * exposing the loaded options. A monotonic request token guards against
+ * out-of-order responses clobbering newer ones; loader failures are swallowed
+ * so the last good options (or the static `field.options` fallback) stay put.
+ *
+ * Extracted verbatim from DXField's inline logic (#135) — behaviour unchanged.
+ * `getField` is an accessor (props aren't destructurable without losing
+ * reactivity); `effectiveModel` is the model passed to the loader.
+ */
+export interface UseAsyncOptionsReturn {
+    /** Options returned by the most recent successful load, or null if none yet. */
+    loadedOptions: Ref<FieldOption[] | null>;
+    /** Trigger a load (no-op when the field has no `optionsLoader`). */
+    loadOptions: () => Promise<void>;
+}
+export declare function useAsyncOptions(getField: () => FieldDefinition, effectiveModel: ComputedRef<any> | Ref<any>): UseAsyncOptionsReturn;

package/dist/composables/useContainerWidth.d.ts

@@ -0,0 +1,96 @@
+/**
+ * useContainerWidth — container-query-style responsiveness for Vue components.
+ *
+ * Bootstrap's breakpoints are **media** queries: they only ever see the WINDOW.
+ * A dashboard page is narrowed by the persistent sidebar (and a form inside a
+ * modal is narrower still), so a component can have very little room while the
+ * viewport is wide — and no media query ever fires. This composable closes that
+ * gap by observing an element's **own rendered width** with a `ResizeObserver`
+ * and exposing it reactively, so the template can pick a layout from the space
+ * it actually has.
+ *
+ * ```ts
+ * const { containerRef, width, isBelow, isNarrowerThan } = useContainerWidth({
+ *   threshold: 640,
+ * });
+ * // <div ref="containerRef"> … </div>
+ * ```
+ *
+ * One observer can drive several independent decisions — `isBelow` uses the
+ * configured `threshold`, and `isNarrowerThan(n)` answers for any other width:
+ *
+ * ```ts
+ * const stacked = computed(() => isNarrowerThan(576));
+ * const hideDetailColumn = computed(() => isNarrowerThan(900));
+ * ```
+ */
+import { type Ref } from "vue";
+/**
+ * What to observe: a template ref, or a getter (so the element can be resolved
+ * lazily / conditionally — e.g. `() => enabled ? el.value : null` to observe
+ * nothing at all).
+ */
+export type ContainerWidthTarget = Ref<HTMLElement | null | undefined> | (() => HTMLElement | null | undefined);
+export interface UseContainerWidthOptions {
+    /**
+     * Width (px) that `isBelow` compares against. Omit if you only need
+     * `width` / `isNarrowerThan`. Pass a getter (`() => props.threshold`) when
+     * it can change at runtime — `isBelow` re-evaluates when it does.
+     */
+    threshold?: number | (() => number | undefined);
+    /**
+     * Hysteresis band (px) applied to `isBelow` only, to stop a layout flipping
+     * back and forth at the boundary. Once `isBelow` is true it stays true
+     * until the width reaches `threshold + hysteresis`.
+     *
+     * Defaults to `0` so `isBelow` means exactly `width < threshold` unless you
+     * ask for otherwise. Opt in whenever the layout you drive from it can
+     * change the observed width — the classic loop is: narrow layout is taller
+     * → an ancestor with `overflow:auto` gains a vertical scrollbar → the
+     * container loses ~15-17px → it crosses back over the threshold → repeat.
+     * A band wider than a scrollbar (24px is comfortable) breaks that cycle.
+     * (`isNarrowerThan` is deliberately raw — it holds no per-width state.)
+     */
+    hysteresis?: number;
+    /**
+     * Width assumed before the first measurement, and permanently where there
+     * is no `ResizeObserver` (SSR, or a very old browser).
+     *
+     * Defaults to `0` — i.e. "assume the narrowest until proven otherwise", so
+     * an unmeasured render picks the STACKED layout. That is the mobile-first
+     * choice and the safe one: a stacked layout is legible at every width,
+     * whereas a wide layout guessed wrongly truncates content. It also means
+     * the server-rendered markup matches the first client render.
+     */
+    initialWidth?: number;
+    /**
+     * Which box to report. `content-box` (default) is the space actually
+     * available to children — what a layout decision usually wants.
+     * `border-box` matches `getBoundingClientRect().width`.
+     */
+    box?: "content-box" | "border-box";
+    /**
+     * Extra debounce (ms) before publishing a new width. Defaults to `0`:
+     * `ResizeObserver` already batches to one delivery per frame, and the
+     * callback reads the size the observer *hands* it (no forced layout), so
+     * there is nothing to thrash. Set it only for genuinely expensive
+     * downstream work — a timer adds a frame of visible lag.
+     */
+    debounce?: number;
+}
+export interface UseContainerWidthReturn {
+    /** Bind to the element you want measured (`<div ref="containerRef">`). */
+    containerRef: Ref<HTMLElement | null>;
+    /** The observed width in px. `initialWidth` until first measured. */
+    width: Readonly<Ref<number>>;
+    /** False until a real measurement has landed (always false without a `ResizeObserver`). */
+    hasMeasured: Readonly<Ref<boolean>>;
+    /** `width < threshold`, with `hysteresis` applied. False when no `threshold` was given. */
+    isBelow: Readonly<Ref<boolean>>;
+    /** Raw `width < px`, for driving other decisions off the same observer. */
+    isNarrowerThan: (px: number) => boolean;
+    /** Disconnect early. Called automatically when the owning scope is disposed. */
+    stop: () => void;
+}
+export declare function useContainerWidth(options?: UseContainerWidthOptions): UseContainerWidthReturn;
+export declare function useContainerWidth(target: ContainerWidthTarget, options?: UseContainerWidthOptions): UseContainerWidthReturn;

package/dist/composables/useResourceEditor.d.ts

@@ -1,4 +1,5 @@
 import { type Ref } from "vue";
+import type { FieldDefinition } from "../types";
 /**
  * The subset of `DXTable`'s props the resource editor reads. Declared
  * structurally (not imported from DXTable.vue) so the composable stays a
@@ -7,7 +8,7 @@ import { type Ref } from "vue";
  */
 export interface ResourceEditorProps<T = any> {
     /** Field definitions for the edit/create modal (enables edit-on-row-click). */
-    editFields?: any[];
+    editFields?: FieldDefinition[];
     /** Tab definitions — only their `key` is read here (DXForm consumes the rest). */
     editTabs?: Array<{
         key: string;