nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/form/fields/array-list/config.d.ts

@@ -1,12 +1,12 @@
 export declare const arrayListFieldKind: {
-    readonly type: "array-list";
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
     readonly state: "passthrough";
+    readonly type: "array-list";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
-    };
-    readonly layout: {
-        readonly item: true;
-        readonly container: true;
+        readonly label: true;
     };
 };

package/dist/runtime/form/fields/array-list/config.js

@@ -1,7 +1,7 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const arrayListFieldKind = defineFormFieldKind({
-  type: "array-list",
+  layout: { container: true, item: true },
   state: "passthrough",
-  ui: { label: true, description: true },
-  layout: { item: true, container: true }
+  type: "array-list",
+  ui: { description: true, label: true }
 });

package/dist/runtime/form/fields/array-list/types.d.ts

@@ -1,38 +1,46 @@
+import type { FormValue } from '../../types/index.js';
 import type { FormContainerFieldBase } from '../../types/field-base.js';
 import type { FormMaybePromise, FormObject, FormText } from '../../types/utils.js';
 export interface FormArrayVirtualFields {
-    [key: string]: (index: number) => unknown;
+    [key: string]: (index: number) => FormValue;
 }
-export interface FormArrayActionParams<TContext = {}, TDeps = {}> {
+export interface FormArrayActionParams<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> {
     index: number;
     item: FormObject;
     items: readonly FormObject[];
     ctx: TContext;
     deps: TDeps;
-    getValue: (key: string) => unknown;
-    setValue: (key: string, value: unknown) => void;
-    getOptions: (key: string) => readonly unknown[];
+    getValue: (key: string) => FormValue;
+    setValue: (key: string, value: FormValue) => void;
+    getOptions: (key: string) => readonly FormValue[];
 }
-export interface FormArrayCustomAction<TContext = {}, TDeps = {}> {
+export interface FormArrayCustomAction<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> {
     label: FormText;
     icon?: string;
     condition?: (params: FormArrayActionParams<TContext, TDeps>) => boolean;
     action: (params: FormArrayActionParams<TContext, TDeps>) => FormMaybePromise<void>;
 }
-export type FormArrayActionCondition<TContext = {}, TDeps = {}> = boolean | ((params: FormArrayActionParams<TContext, TDeps>) => boolean);
-export interface FormArrayFieldActions<TContext = {}, TDeps = {}> {
-    addItem?: FormArrayActionCondition<TContext, TDeps>;
-    deleteItem?: FormArrayActionCondition<TContext, TDeps>;
-    moveUp?: FormArrayActionCondition<TContext, TDeps>;
-    moveDown?: FormArrayActionCondition<TContext, TDeps>;
+export type FormArrayActionCondition<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = boolean | ((params: FormArrayActionParams<TContext, TDeps>) => boolean);
+export interface FormArrayBaseAction<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> {
+    label?: FormText;
+    icon?: string;
+    condition?: FormArrayActionCondition<TContext, TDeps>;
+}
+export type FormArrayAction<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormArrayActionCondition<TContext, TDeps> | FormArrayBaseAction<TContext, TDeps>;
+export interface FormArrayFieldActions<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> {
+    addItem?: FormArrayAction<TContext, TDeps>;
+    deleteItem?: FormArrayAction<TContext, TDeps>;
     custom?: readonly FormArrayCustomAction<TContext, TDeps>[];
 }
-export interface FormArrayListField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'array-list', TContext, TDeps> {
+export interface FormArrayListProps {
+    compact?: boolean;
+    /** Enables drag-to-reorder. Defaults to `true`. */
+    draggable?: boolean;
+}
+export interface FormArrayListField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormContainerFieldBase<'array-list', TContext, TDeps, FormArrayListProps> {
     addItemLabel?: FormText;
     emptyLabel?: FormText;
     itemLabel?: FormText;
-    compact?: boolean;
-    draggable?: boolean;
     confirmDelete?: boolean | FormText;
     headerTemplate?: (item: FormObject, index: number, deps: TDeps) => FormText;
     transformOnCreate?: (item: FormObject, index: number, deps: TDeps) => FormObject;

package/dist/runtime/form/fields/array-list/use-array-items.d.ts

@@ -0,0 +1,56 @@
+import type { FormValue, FormArrayCollapseField, FormArrayListField, FormArrayTableField, FormArrayTabsField, FormArrayVariantField, FormField } from '../../types/index.js';
+import type { FormObject } from '../../types/utils.js';
+import type { FormArrayAction, FormArrayBaseAction } from './types.js';
+export type FormArrayItemsField = FormArrayListField | FormArrayTableField | FormArrayTabsField | FormArrayVariantField | FormArrayCollapseField;
+export declare function isFormObject(value: FormValue): value is FormObject;
+export declare function isArrayActionConfig(action: FormArrayAction | undefined): action is FormArrayBaseAction;
+export declare function useFormArrayItems(field: () => FormArrayItemsField, path: () => readonly string[]): {
+    actionParams: (index: number) => {
+        ctx: {};
+        deps: {};
+        getOptions: (key: string) => readonly unknown[];
+        getValue: (key: string) => unknown;
+        index: number;
+        item: import("../../../shared/index.js").GenericObject;
+        items: readonly import("../../../shared/index.js").GenericObject[];
+        setValue: (key: string, value: FormValue) => void;
+    };
+    addItem: (variantKey?: string | number) => number;
+    addItemIcon: import("vue").ComputedRef<string>;
+    addItemLabel: import("vue").ComputedRef<string>;
+    applyVirtualFields: (item: FormObject, index: number) => import("../../../shared/index.js").GenericObject;
+    canAdd: import("vue").ComputedRef<boolean>;
+    canDelete: (index: number) => (import("./types.js").FormArrayActionCondition<{}, {}> | undefined) & boolean;
+    customActionVisible: (index: number, actionIndex: number) => boolean;
+    description: import("vue").ComputedRef<string | undefined>;
+    emptyLabel: import("vue").ComputedRef<string>;
+    fieldProps: import("vue").ComputedRef<Partial<import("./types.js").FormArrayListProps & import("../../../shared/index.js").GenericObject> | Partial<import("../array-table/types.js").FormArrayTableProps & import("../../../shared/index.js").GenericObject> | Partial<import("../array-variant/types.js").FormArrayVariantProps & import("../../../shared/index.js").GenericObject> | Partial<import("../array-collapse/types.js").FormArrayCollapseProps & import("../../../shared/index.js").GenericObject>>;
+    fieldsForItem: (item: FormObject) => readonly FormField[];
+    form: import("../../types/index.js").FormRuntime;
+    formUi: {
+        controlSize: import("vue").ComputedRef<import("../../types/index.js").FormControlSize>;
+        density: import("vue").ComputedRef<import("../../types/index.js").FormDensity>;
+        ui: import("vue").ComputedRef<import("../../types/index.js").FormUiConfig>;
+    };
+    hasCustomActions: (index: number) => boolean;
+    isDraggable: import("vue").ComputedRef<boolean>;
+    itemHasError: (index: number) => boolean;
+    itemHeading: (item: FormObject, index: number) => string;
+    itemKey: (item: FormObject) => string;
+    itemLabel: import("vue").ComputedRef<string>;
+    itemPath: (index: number) => string[];
+    itemRenderKey: (item: FormObject, index: number) => string;
+    items: import("vue").ComputedRef<readonly import("../../../shared/index.js").GenericObject[]>;
+    removeItem: (index: number) => boolean;
+    resolveAction: (action: FormArrayAction | undefined, index: number) => (import("./types.js").FormArrayActionCondition<{}, {}> | undefined) & boolean;
+    runCustomAction: (index: number, actionIndex: number) => Promise<void>;
+    t: import("../../../i18n/index.js").UiToolsTranslator;
+    title: import("vue").ComputedRef<string | undefined>;
+    updateItems: (value: readonly FormObject[]) => void;
+    updateVariant: (index: number, value: string | number) => void;
+    variantItems: import("vue").ComputedRef<{
+        label: string;
+        value: string | number;
+    }[]>;
+    variantValue: (item: FormObject | undefined) => string | number | undefined;
+};

package/dist/runtime/form/fields/array-list/use-array-items.js

@@ -0,0 +1,263 @@
+import { computed } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale.js";
+import { useResolvedFieldProps } from "../../composables/use-field-control.js";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime.js";
+import { useFormUi } from "../../composables/use-form-ui.js";
+import { syncFormArrayItems } from "../../utils/array.js";
+import { isBoolean, isFunction, isNumber, isObject, isString } from "../../utils/predicate.js";
+import { buildInitialFormFieldsState } from "../../utils/state.js";
+import { resolveFormBoundaryText, resolveFormText } from "../../utils/text.js";
+export function isFormObject(value) {
+  return isObject(value) && value !== null && !Array.isArray(value);
+}
+export function isArrayActionConfig(action) {
+  return isObject(action) && !isFunction(action);
+}
+export function useFormArrayItems(field, path) {
+  const form = useFormRuntimeContext();
+  const formUi = useFormUi();
+  const fieldProps = useResolvedFieldProps(field, path);
+  const { t } = useUiToolsLocale();
+  const itemKeys = /* @__PURE__ */ new WeakMap();
+  let nextItemKey = 0;
+  const items = computed(() => {
+    const value = form.getValue(path());
+    return Array.isArray(value) ? value.filter(isFormObject) : [];
+  });
+  const title = computed(() => resolveFormText(field().label));
+  const description = computed(() => resolveFormText(field().description));
+  const addItemLabel = computed(
+    () => resolveArrayActionLabel(
+      field().actions?.addItem,
+      resolveFormText(field().addItemLabel) ?? t("form.fields.array.addItem")
+    )
+  );
+  const addItemIcon = computed(
+    () => resolveArrayActionIcon(field().actions?.addItem, "i-lucide-plus")
+  );
+  const emptyLabel = computed(
+    () => resolveFormText(field().emptyLabel) ?? t("form.fields.array.empty")
+  );
+  const itemLabel = computed(
+    () => resolveFormText(field().itemLabel) ?? t("form.fields.array.item")
+  );
+  const canAdd = computed(() => resolveAction(field().actions?.addItem, -1));
+  const isDraggable = computed(() => fieldProps.value.draggable !== false);
+  const variantItems = computed(() => {
+    const current = field();
+    return current.type === "array-variant" ? current.variants.map((variant) => ({
+      label: resolveFormText(variant.label) ?? String(variant.key),
+      value: variant.key
+    })) : [];
+  });
+  function createItem(index, variantKey) {
+    const current = field();
+    const variant = current.type === "array-variant" ? current.variants.find((candidate) => candidate.key === variantKey) ?? current.variants[0] : void 0;
+    const fields = variant?.fields ?? fieldsForItem({});
+    let item = buildInitialFormFieldsState(fields, form.context);
+    if (variant && current.type === "array-variant") {
+      item[current.variantKey] = variant.key;
+    }
+    item = applyVirtualFields(item, index);
+    if (current.transformOnCreate) {
+      item = current.transformOnCreate(item, index, actionParams(index).deps);
+    }
+    return item;
+  }
+  function addItem(variantKey) {
+    const index = items.value.length;
+    updateItems([...items.value, createItem(index, variantKey)]);
+    return index;
+  }
+  function confirmRemoval() {
+    const current = field();
+    if (!current.confirmDelete) {
+      return true;
+    }
+    const message = resolveFormBoundaryText(current.confirmDelete) ?? t("form.fields.array.confirmDelete");
+    return window.confirm(message);
+  }
+  function removeItem(index) {
+    if (!confirmRemoval()) {
+      return false;
+    }
+    updateItems(items.value.filter((_, itemIndex) => itemIndex !== index));
+    return true;
+  }
+  function fieldsForItem(item) {
+    const current = field();
+    if (current.type !== "array-variant") {
+      return current.fields;
+    }
+    const variant = current.variants.find((candidate) => candidate.key === item[current.variantKey]);
+    return variant?.fields ?? [];
+  }
+  function applyVirtualFields(item, index) {
+    const current = field();
+    const fields = current.type === "array-variant" ? current.variants.find((variant) => variant.key === item[current.variantKey])?.virtualFields : current.virtualFields;
+    if (!fields) {
+      return item;
+    }
+    for (const [key, resolver] of Object.entries(fields)) {
+      item[key] = resolver(index);
+    }
+    return item;
+  }
+  function itemHeading(item, index) {
+    return resolveFormText(field().headerTemplate?.(item, index, actionParams(index).deps)) ?? `${itemLabel.value} ${index + 1}`;
+  }
+  function resolveAction(action, index) {
+    const condition = isArrayActionConfig(action) ? action.condition : action;
+    if (isBoolean(condition)) {
+      return condition;
+    }
+    if (!isFunction(condition)) {
+      return true;
+    }
+    return condition(actionParams(index));
+  }
+  function canDelete(index) {
+    return resolveAction(field().actions?.deleteItem, index);
+  }
+  function updateVariant(index, value) {
+    const current = field();
+    if (current.type !== "array-variant") {
+      return;
+    }
+    if (!current.variants.some((candidate) => candidate.key === value)) {
+      return;
+    }
+    const nextItems = [...items.value];
+    nextItems[index] = createItem(index, value);
+    updateItems(nextItems);
+  }
+  function variantValue(item) {
+    const current = field();
+    if (current.type !== "array-variant" || !item) {
+      return;
+    }
+    const value = item[current.variantKey];
+    return isString(value) || isNumber(value) ? value : void 0;
+  }
+  async function runCustomAction(index, actionIndex) {
+    const action = field().actions?.custom?.[actionIndex];
+    const item = items.value[index];
+    if (!action || !item) {
+      return;
+    }
+    await action.action(actionParams(index));
+  }
+  function customActionVisible(index, actionIndex) {
+    const action = field().actions?.custom?.[actionIndex];
+    const item = items.value[index];
+    if (!action || !item) {
+      return false;
+    }
+    return action.condition?.(actionParams(index)) ?? true;
+  }
+  function hasCustomActions(index) {
+    return Boolean(
+      field().actions?.custom?.some(
+        (_action, actionIndex) => customActionVisible(index, actionIndex)
+      )
+    );
+  }
+  function updateItems(value) {
+    const current = form.getValue(path());
+    if (!syncFormArrayItems(current, value)) {
+      form.setValue(
+        path(),
+        value.map((item, index) => applyVirtualFields(item, index))
+      );
+      return;
+    }
+    if (!Array.isArray(current)) {
+      return;
+    }
+    for (const [index, item] of current.entries()) {
+      if (isFormObject(item)) {
+        applyVirtualFields(item, index);
+      }
+    }
+  }
+  function itemPath(index) {
+    return [...path(), String(index)];
+  }
+  function itemKey(item) {
+    const existing = itemKeys.get(item);
+    if (existing) {
+      return existing;
+    }
+    nextItemKey += 1;
+    const key = `array-item-${nextItemKey}`;
+    itemKeys.set(item, key);
+    return key;
+  }
+  function itemRenderKey(item, index) {
+    return `${itemKey(item)}:${index}`;
+  }
+  function itemHasError(index) {
+    const prefix = `${itemPath(index).join(".")}.`;
+    return form.errors.value.some((error) => error.path.startsWith(prefix));
+  }
+  function actionParams(index) {
+    const item = items.value[index] ?? {};
+    const callback = form.getFieldCallbackParams(path(), field());
+    return {
+      ctx: callback.ctx,
+      deps: callback.deps,
+      getOptions: (key) => form.getFieldApi([...itemPath(index), ...key.split(".")]).options.get(),
+      getValue: (key) => form.getValue([...itemPath(index), ...key.split(".")]),
+      index,
+      item,
+      items: items.value,
+      setValue: (key, value) => form.setValue([...itemPath(index), ...key.split(".")], value)
+    };
+  }
+  return {
+    actionParams,
+    addItem,
+    addItemIcon,
+    addItemLabel,
+    applyVirtualFields,
+    canAdd,
+    canDelete,
+    customActionVisible,
+    description,
+    emptyLabel,
+    fieldProps,
+    fieldsForItem,
+    form,
+    formUi,
+    hasCustomActions,
+    isDraggable,
+    itemHasError,
+    itemHeading,
+    itemKey,
+    itemLabel,
+    itemPath,
+    itemRenderKey,
+    items,
+    removeItem,
+    resolveAction,
+    runCustomAction,
+    t,
+    title,
+    updateItems,
+    updateVariant,
+    variantItems,
+    variantValue
+  };
+}
+function resolveArrayActionLabel(action, fallback) {
+  if (!isArrayActionConfig(action)) {
+    return fallback;
+  }
+  return resolveFormText(action.label) ?? fallback;
+}
+function resolveArrayActionIcon(action, fallback) {
+  if (!isArrayActionConfig(action) || !isString(action.icon)) {
+    return fallback;
+  }
+  return action.icon;
+}

package/dist/runtime/form/fields/array-primitive/component.d.vue.ts

@@ -0,0 +1,8 @@
+import type { FormArrayPrimitiveField } from './types.js';
+type __VLS_Props = {
+    field: FormArrayPrimitiveField;
+    path: readonly string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;