nuxt-ui-tools 0.1.0

package/dist/runtime/form/composables/use-form-focus.js

@@ -0,0 +1,47 @@
+import { nextTick, ref } from "vue";
+import {
+  focusFirstInvalidFormField,
+  focusFormField,
+  focusFormFieldElement,
+  normalizeFormFocusPath
+} from "../utils/focus.js";
+export function useFormFocus(params) {
+  const fieldElements = /* @__PURE__ */ new Map();
+  const request = ref(null);
+  let sequence = 0;
+  function registerField(path, element) {
+    const key = normalizeFormFocusPath(path);
+    fieldElements.set(key, element);
+    return () => {
+      if (fieldElements.get(key) === element) fieldElements.delete(key);
+    };
+  }
+  async function focusField(path) {
+    await nextTick();
+    const key = normalizeFormFocusPath(path);
+    request.value = { path: key, sequence: ++sequence };
+    await nextTick();
+    const focused = await focusFormFieldElement(fieldElements.get(key) ?? null) || await focusFormField(path);
+    if (focused) return true;
+    await waitForFocusRequest();
+    const element = fieldElements.get(key);
+    return Boolean(document.activeElement && element?.contains(document.activeElement));
+  }
+  async function focusFirstInvalid(errors = params.getErrors()) {
+    await nextTick();
+    for (const error of errors) {
+      const focused = await focusField(error.path);
+      if (focused) return true;
+    }
+    return focusFirstInvalidFormField(errors);
+  }
+  return {
+    request,
+    registerField,
+    focusField,
+    focusFirstInvalid
+  };
+}
+function waitForFocusRequest() {
+  return new Promise((resolve) => window.setTimeout(resolve, 160));
+}

package/dist/runtime/form/composables/use-form-layout.d.ts

@@ -0,0 +1,22 @@
+import { type ComputedRef } from 'vue';
+import type { FormContainerLayout, FormItemLayout, FormLayoutConfig } from '../types/index.js';
+export declare function useFormGridLayout(params: {
+    layout: ComputedRef<FormLayoutConfig>;
+}): {
+    columns: ComputedRef<string | null>;
+    style: ComputedRef<string>;
+};
+export declare function useFormItemLayout(params: {
+    layout: () => FormItemLayout | undefined;
+    formLayout: ComputedRef<FormLayoutConfig>;
+}): {
+    span: ComputedRef<string | null>;
+    style: ComputedRef<string>;
+};
+export declare function useFormContainerLayout(params: {
+    layout: () => FormContainerLayout | undefined;
+    formLayout: ComputedRef<FormLayoutConfig>;
+}): {
+    columns: ComputedRef<string | null>;
+    style: ComputedRef<string>;
+};

package/dist/runtime/form/composables/use-form-layout.js

@@ -0,0 +1,59 @@
+import { computed } from "vue";
+import { useResponsiveValue } from "../../shared/composables/use-responsive-value.js";
+import {
+  FORM_LAYOUT_DEFAULTS,
+  normalizeFormGridColumnSpanStyle,
+  normalizeFormGridColumnsStyle,
+  normalizeFormLayoutGap
+} from "../utils/layout.js";
+export function useFormGridLayout(params) {
+  const columns = useResponsiveValue(
+    () => String(params.layout.value.columns ?? FORM_LAYOUT_DEFAULTS.columns),
+    normalizeFormGridColumnsStyle
+  );
+  const style = computed(
+    () => [
+      "display: grid",
+      columns.value ?? normalizeFormGridColumnsStyle(String(FORM_LAYOUT_DEFAULTS.columns)),
+      `gap: ${normalizeFormLayoutGap(params.layout.value.gap)}`
+    ].join("; ")
+  );
+  return {
+    columns,
+    style
+  };
+}
+export function useFormItemLayout(params) {
+  const span = useResponsiveValue(
+    () => String(
+      params.layout()?.span ?? params.formLayout.value.fieldSpan ?? FORM_LAYOUT_DEFAULTS.fieldSpan
+    ),
+    normalizeFormGridColumnSpanStyle
+  );
+  const style = computed(
+    () => span.value ?? normalizeFormGridColumnSpanStyle(String(FORM_LAYOUT_DEFAULTS.fieldSpan))
+  );
+  return {
+    span,
+    style
+  };
+}
+export function useFormContainerLayout(params) {
+  const columns = useResponsiveValue(
+    () => String(
+      params.layout()?.columns ?? params.formLayout.value.columns ?? FORM_LAYOUT_DEFAULTS.columns
+    ),
+    normalizeFormGridColumnsStyle
+  );
+  const style = computed(
+    () => [
+      "display: grid",
+      columns.value ?? normalizeFormGridColumnsStyle(String(FORM_LAYOUT_DEFAULTS.columns)),
+      `gap: ${normalizeFormLayoutGap(FORM_LAYOUT_DEFAULTS.gap)}`
+    ].join("; ")
+  );
+  return {
+    columns,
+    style
+  };
+}

package/dist/runtime/form/composables/use-form-option-registry.d.ts

@@ -0,0 +1,7 @@
+import type { FormOptionRuntimeState } from '../types/index.js';
+export declare function useFormOptionRegistry(): {
+    register: (path: readonly string[], state: FormOptionRuntimeState) => () => void;
+    get: (path: readonly string[]) => FormOptionRuntimeState;
+    refresh: (path: string | readonly string[]) => Promise<void>;
+    refreshMany: (paths: readonly (string | readonly string[])[]) => Promise<void>;
+};

package/dist/runtime/form/composables/use-form-option-registry.js

@@ -0,0 +1,53 @@
+import { computed, shallowReactive } from "vue";
+export function useFormOptionRegistry() {
+  const states = shallowReactive({});
+  const emptyState = createEmptyOptionState();
+  function register(path, state) {
+    const key = optionStateKey(path);
+    states[key] = state;
+    return () => {
+      if (states[key] === state) delete states[key];
+    };
+  }
+  function get(path) {
+    return states[optionStateKey(path)] ?? emptyState;
+  }
+  async function refresh(path) {
+    await get(optionPathSegments(path)).refresh();
+  }
+  async function refreshMany(paths) {
+    await Promise.all(paths.map((path) => refresh(path)));
+  }
+  return {
+    register,
+    get,
+    refresh,
+    refreshMany
+  };
+}
+function createEmptyOptionState() {
+  return {
+    items: computed(() => []),
+    pending: computed(() => false),
+    fetching: computed(() => false),
+    loading: computed(() => false),
+    creating: computed(() => false),
+    creatable: computed(() => false),
+    createLabel: computed(() => void 0),
+    error: computed(() => null),
+    disableOnLoading: computed(() => false),
+    refreshable: computed(() => false),
+    selectCreatedOption: computed(() => true),
+    refresh: async () => {
+    },
+    add: () => {
+    },
+    create: async () => null
+  };
+}
+function optionStateKey(path) {
+  return path.join(".");
+}
+function optionPathSegments(path) {
+  return typeof path === "string" ? path.split(".").filter(Boolean) : path;
+}

package/dist/runtime/form/composables/use-form-overlay-controller.d.ts

@@ -0,0 +1,12 @@
+import type { FormApiRuntimeInstance, FormObject, FormSubmitHandlerResult } from '../types/index.js';
+export declare function useFormOverlayController(instance: FormApiRuntimeInstance): {
+    form: import("../types/index.js").FormController<unknown, unknown>;
+    open: import("vue").Ref<boolean, boolean>;
+    title: import("vue").ComputedRef<string | undefined>;
+    description: import("vue").ComputedRef<string>;
+    dismissible: import("vue").ComputedRef<boolean>;
+    handleOpenUpdate: (value: boolean) => void;
+    handleSubmitted: (formData: FormObject, result: FormSubmitHandlerResult<unknown>) => void;
+    handleCancelled: () => void;
+    resolveAfterClose: () => void;
+};

package/dist/runtime/form/composables/use-form-overlay-controller.js

@@ -0,0 +1,84 @@
+import { computed, onBeforeUnmount, ref } from "vue";
+import { getFormOverlayDescription, getFormOverlayTitle } from "../utils/overlay.js";
+import { isRecord } from "../utils/path.js";
+import { useForm } from "./use-form.js";
+import { useFormApi } from "./use-form-api.js";
+export function useFormOverlayController(instance) {
+  const formApi = useFormApi();
+  const form = useForm({
+    schema: computed(() => instance.schema),
+    input: computed(() => instance.input),
+    onSubmit: instance.onSubmit
+  });
+  const open = ref(true);
+  const pendingResolution = ref(null);
+  const title = computed(() => getFormOverlayTitle(instance.schema));
+  const description = computed(
+    () => getFormOverlayDescription(instance.schema) ?? getFormOverlayTitle(instance.schema) ?? "Form"
+  );
+  const dismissible = computed(() => !form.isSubmitting.value);
+  formApi.setController(instance.id, form);
+  const runtimeControls = {
+    close: requestCancel,
+    submit: submitOverlay
+  };
+  formApi.setRuntimeControls(instance.id, runtimeControls);
+  onBeforeUnmount(() => {
+    formApi.removeController(instance.id, form);
+    formApi.removeRuntimeControls(instance.id, runtimeControls);
+  });
+  function handleSubmitted(formData, result) {
+    requestComplete(formData, result.data);
+  }
+  function handleCancelled() {
+    requestCancel();
+  }
+  async function submitOverlay() {
+    const result = await form.submitHandler();
+    if (!result.success) return false;
+    requestComplete(resolveCurrentOutput(), result.data);
+    return true;
+  }
+  function handleOpenUpdate(value) {
+    if (value) {
+      open.value = true;
+      return;
+    }
+    requestCancel();
+  }
+  function requestComplete(formData, submitData) {
+    closeWithResolution({ type: "complete", formData, submitData });
+  }
+  function requestCancel() {
+    closeWithResolution({ type: "cancel", formData: resolveCurrentOutput() });
+  }
+  function closeWithResolution(resolution) {
+    if (pendingResolution.value) return;
+    pendingResolution.value = resolution;
+    open.value = false;
+  }
+  function resolveAfterClose() {
+    const resolution = pendingResolution.value;
+    if (!resolution) return;
+    pendingResolution.value = null;
+    if (resolution.type === "complete") {
+      instance.complete(resolution.formData, resolution.submitData);
+      return;
+    }
+    instance.cancel(resolution.formData);
+  }
+  function resolveCurrentOutput() {
+    return isRecord(form.output.value) ? form.output.value : {};
+  }
+  return {
+    form,
+    open,
+    title,
+    description,
+    dismissible,
+    handleOpenUpdate,
+    handleSubmitted,
+    handleCancelled,
+    resolveAfterClose
+  };
+}

package/dist/runtime/form/composables/use-form-overlay-layout.d.ts

@@ -0,0 +1,7 @@
+import type { FormApiDisplayMode, FormApiRuntimeInstance } from '../types/index.js';
+export declare function useFormOverlayLayout(instance: FormApiRuntimeInstance): {
+    displayMode: import("vue").ComputedRef<FormApiDisplayMode>;
+    isDrawer: import("vue").ComputedRef<boolean>;
+    isFullscreen: import("vue").ComputedRef<boolean>;
+    isModal: import("vue").ComputedRef<boolean>;
+};

package/dist/runtime/form/composables/use-form-overlay-layout.js

@@ -0,0 +1,18 @@
+import { computed } from "vue";
+import { useResponsiveValue } from "../../shared/composables/use-responsive-value.js";
+import { normalizeFormOverlayMode } from "../utils/overlay.js";
+export function useFormOverlayLayout(instance) {
+  const responsiveMode = useResponsiveValue(() => instance.mode);
+  const displayMode = computed(
+    () => normalizeFormOverlayMode(responsiveMode.value)
+  );
+  const isDrawer = computed(() => displayMode.value === "drawer");
+  const isFullscreen = computed(() => displayMode.value === "fullscreen");
+  const isModal = computed(() => displayMode.value === "modal");
+  return {
+    displayMode,
+    isDrawer,
+    isFullscreen,
+    isModal
+  };
+}

package/dist/runtime/form/composables/use-form-runtime.d.ts

@@ -0,0 +1,6 @@
+import type { FormRuntime, UseFormRuntimeParams } from '../types/index.js';
+import { childParentPath, fieldPath } from '../utils/state.js';
+export declare function provideFormRuntime(runtime: FormRuntime): void;
+export declare function useFormRuntimeContext(): FormRuntime;
+export declare function useFormRuntime(params: UseFormRuntimeParams): FormRuntime;
+export { childParentPath, fieldPath };