nuxt-ui-tools 0.1.3 → 1.0.0

package/dist/runtime/form/fields/array-table/component.vue

@@ -1,142 +1,80 @@
 <script setup>
 import UButton from "@nuxt/ui/components/Button.vue";
-import { computed, defineAsyncComponent } from "vue";
-import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
-import { useFormRuntimeContext } from "../../composables/use-form-runtime";
-import { useFormUi } from "../../composables/use-form-ui";
-import { syncFormArrayItems } from "../../utils/array";
-import { buildInitialFormFieldsState } from "../../utils/state";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useScrollShadow } from "@nuxt/ui/composables/useScrollShadow";
+import { computed, defineAsyncComponent, ref } from "vue";
+import FormFieldError from "../../components/renderer/form-field-error.vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
+import { useResolvedFieldProps } from "../../composables/use-field-control";
+import { isRecord } from "../../utils/path";
+import { isNumber, isString } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
+import { useFormArrayItems } from "../array-list/use-array-items";
+const DEFAULT_COLUMN_MIN_WIDTH = "140px";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const VueDraggable = defineAsyncComponent(
-  () => import("vue-draggable-plus").then(({ VueDraggable: draggableComponent }) => draggableComponent)
+const fieldProps = useResolvedFieldProps(
+  () => props.field,
+  () => props.path
 );
-const form = useFormRuntimeContext();
-const formUi = useFormUi();
-const itemKeys = /* @__PURE__ */ new WeakMap();
-let nextItemKey = 0;
-const items = computed(() => {
-  const value = form.getValue(props.path);
-  return Array.isArray(value) ? value.filter(isFormObject) : [];
+const VueDraggable = defineAsyncComponent(async () => {
+  const { VueDraggable: draggableComponent } = await import("vue-draggable-plus");
+  return draggableComponent;
 });
+const {
+  addItem,
+  addItemLabel,
+  canAdd,
+  canDelete,
+  customActionVisible,
+  description,
+  emptyLabel,
+  formUi,
+  hasCustomActions,
+  isDraggable,
+  itemPath,
+  itemRenderKey,
+  items,
+  removeItem,
+  runCustomAction,
+  t,
+  title,
+  updateItems
+} = useFormArrayItems(
+  () => props.field,
+  () => props.path
+);
+const viewportRef = ref(null);
+const viewportShadow = useScrollShadow(viewportRef, { orientation: "horizontal", size: 20 });
+const ui = computed(() => formUi.ui.value.arrayTable?.ui);
 const columns = computed(
   () => props.field.fields.filter((field) => field.type !== "hidden" && field.ignore !== true)
 );
 const minWidth = computed(
-  () => typeof props.field.minWidth === "number" ? `${props.field.minWidth}px` : props.field.minWidth
+  () => isNumber(fieldProps.value.minWidth) ? `${fieldProps.value.minWidth}px` : fieldProps.value.minWidth
 );
-const canAdd = computed(() => resolveAction(props.field.actions?.addItem, -1));
-const isDraggable = computed(() => props.field.draggable === true);
 const dragItems = computed({
   get: () => [...items.value],
   set: updateItems
 });
-function addItem() {
-  const index = items.value.length;
-  let item = buildInitialFormFieldsState(props.field.fields, form.context);
-  item = applyVirtualFields(item, index);
-  if (props.field.transformOnCreate)
-    item = props.field.transformOnCreate(item, index, actionParams(index).deps);
-  updateItems([...items.value, item]);
-}
-function removeItem(index) {
-  const message = typeof props.field.confirmDelete === "string" || typeof props.field.confirmDelete === "function" ? resolveFormText(props.field.confirmDelete) : "Remove this row?";
-  if (props.field.confirmDelete && !window.confirm(message)) return;
-  updateItems(items.value.filter((_, itemIndex) => itemIndex !== index));
-}
-function moveItem(index, direction) {
-  const target = index + direction;
-  if (target < 0 || target >= items.value.length) return;
-  const current = items.value[index];
-  const next = items.value[target];
-  if (!current || !next) return;
-  const values = [...items.value];
-  values[index] = next;
-  values[target] = current;
-  updateItems(values);
-}
-function updateItems(value) {
-  const current = form.getValue(props.path);
-  if (!syncFormArrayItems(current, value)) {
-    form.setValue(
-      props.path,
-      value.map((item, index) => applyVirtualFields(item, index))
-    );
-    return;
-  }
-  if (Array.isArray(current))
-    current.forEach((item, index) => {
-      if (isFormObject(item)) applyVirtualFields(item, index);
-    });
-}
-function applyVirtualFields(item, index) {
-  if (!props.field.virtualFields) return item;
-  for (const [key, resolver] of Object.entries(props.field.virtualFields))
-    item[key] = resolver(index);
-  return item;
-}
-function resolveAction(condition, index) {
-  if (typeof condition === "boolean") return condition;
-  if (typeof condition !== "function") return true;
-  const item = items.value[index] ?? {};
-  return condition(actionParams(index));
-}
-async function runCustomAction(index, actionIndex) {
-  const action = props.field.actions?.custom?.[actionIndex];
-  const item = items.value[index];
-  if (!action || !item) return;
-  await action.action(actionParams(index));
-}
-function customActionVisible(index, actionIndex) {
-  const action = props.field.actions?.custom?.[actionIndex];
-  const item = items.value[index];
-  if (!action || !item) return false;
-  return action.condition?.(actionParams(index)) ?? true;
-}
-function hasRowActions(index) {
-  return isDraggable.value || resolveAction(props.field.actions?.deleteItem, index) || resolveAction(props.field.actions?.moveUp, index) || resolveAction(props.field.actions?.moveDown, index) || Boolean(
-    props.field.actions?.custom?.some(
-      (_action, actionIndex) => customActionVisible(index, actionIndex)
-    )
-  );
-}
 const showActionsColumn = computed(
-  () => items.value.some((_item, index) => hasRowActions(index))
+  () => items.value.some(
+    (_item, index) => isDraggable.value || canDelete(index) || hasCustomActions(index)
+  )
 );
-function rowPath(index) {
-  return [...props.path, String(index)];
-}
-function itemKey(item) {
-  const existing = itemKeys.get(item);
-  if (existing) return existing;
-  nextItemKey += 1;
-  const key = `array-table-item-${nextItemKey}`;
-  itemKeys.set(item, key);
-  return key;
-}
-function itemRenderKey(item, index) {
-  return `${itemKey(item)}:${index}`;
-}
-function actionParams(index) {
-  const item = items.value[index] ?? {};
-  const callback = form.getFieldCallbackParams(props.path, props.field);
-  return {
-    index,
-    item,
-    items: items.value,
-    ctx: callback.ctx,
-    deps: callback.deps,
-    getValue: (key) => form.getValue([...rowPath(index), ...key.split(".")]),
-    setValue: (key, value) => form.setValue([...rowPath(index), ...key.split(".")], value),
-    getOptions: (key) => form.getFieldApi([...rowPath(index), ...key.split(".")]).options.get()
-  };
-}
-function isFormObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+function columnStyle(field) {
+  const layout = Object.getOwnPropertyDescriptor(field, "layout")?.value;
+  const width = isRecord(layout) ? layout.width : void 0;
+  let resolved;
+  if (isNumber(width)) {
+    resolved = `${width}px`;
+  } else if (isString(width)) {
+    resolved = width;
+  }
+  return { minWidth: resolved ?? DEFAULT_COLUMN_MIN_WIDTH, width: resolved };
 }
 function fieldLabel(field) {
   return "label" in field ? resolveFormText(field.label) ?? field.key : field.key;
@@ -144,192 +82,175 @@ function fieldLabel(field) {
 </script>
 
 <template>
-  <section :class="mergeFormUiClass('grid gap-3', formUi.ui.value.arrayTable?.ui?.root)">
+  <section :class="mergeFormUiClass('grid gap-3', ui?.root)">
+    <div v-if="title || description" :class="mergeFormUiClass('grid gap-1', ui?.header)">
+      <h3 v-if="title" :class="mergeFormUiClass('text-sm font-medium text-highlighted', ui?.title)">
+        {{ title }}
+      </h3>
+      <p v-if="description" :class="mergeFormUiClass('text-sm text-muted', ui?.description)">
+        {{ description }}
+      </p>
+    </div>
     <div
       :class="
   mergeFormUiClass(
-    'w-full overflow-x-auto rounded-lg border border-default bg-default',
-    formUi.ui.value.arrayTable?.ui?.viewport
+    'w-full overflow-hidden rounded-lg border border-default bg-default',
+    ui?.frame
   )
 "
     >
-      <table
-        :class="
-  mergeFormUiClass(
-    'w-full table-fixed border-collapse text-sm',
-    formUi.ui.value.arrayTable?.ui?.table
-  )
-"
-        :style="{ minWidth }"
+      <div
+        ref="viewportRef"
+        :class="mergeFormUiClass('w-full overflow-x-auto', ui?.viewport)"
+        :style="viewportShadow.style.value"
       >
-        <thead
-          :class="
-  mergeFormUiClass(
-    'bg-elevated/70 text-left text-muted',
-    formUi.ui.value.arrayTable?.ui?.head
-  )
-"
+        <table
+          :class="mergeFormUiClass('w-full table-auto border-collapse text-sm', ui?.table)"
+          :style="{ minWidth }"
         >
-          <tr :class="formUi.ui.value.arrayTable?.ui?.headerRow">
-            <th
-              v-for="column in columns"
-              :key="column.key"
-              scope="col"
-              :class="
-  mergeFormUiClass(
-    'border-b border-r border-default px-3 py-2.5 font-medium last:border-r-0',
-    formUi.ui.value.arrayTable?.ui?.headerCell
-  )
-"
-            >
-              {{ fieldLabel(column) }}
-            </th>
-            <th
-              v-if="showActionsColumn"
-              scope="col"
-              :class="
+          <thead :class="mergeFormUiClass('bg-elevated/70 text-left text-muted', ui?.head)">
+            <tr :class="ui?.headerRow">
+              <th
+                v-for="column in columns"
+                :key="column.key"
+                scope="col"
+                :style="columnStyle(column)"
+                :class="
   mergeFormUiClass(
-    'w-36 border-b border-default px-2 py-2',
-    formUi.ui.value.arrayTable?.ui?.actionsHeader
+    'border-b border-r border-default px-4 py-2 font-medium last:border-r-0',
+    ui?.headerCell
   )
 "
-            />
-          </tr>
-        </thead>
-        <component
-          :is="isDraggable ? VueDraggable : 'tbody'"
-          v-model="dragItems"
-          :tag="isDraggable ? 'tbody' : void 0"
-          :class="formUi.ui.value.arrayTable?.ui?.body"
-          handle=".array-table-drag-handle"
-          :animation="150"
-        >
-          <tr
-            v-for="(item, index) in items"
-            :key="itemRenderKey(item, index)"
-            :class="
+              >
+                {{ fieldLabel(column) }}
+              </th>
+              <th
+                v-if="showActionsColumn"
+                scope="col"
+                :class="
   mergeFormUiClass(
-    'align-middle transition-colors hover:bg-elevated/35 [&>*]:border-b [&>*]:border-default [&:last-child>*]:border-b-0',
-    formUi.ui.value.arrayTable?.ui?.row
+    'sticky right-0 w-px border-b border-l border-default bg-elevated px-1.5 py-2 shadow-[-8px_0_12px_-10px_rgba(0,0,0,0.45)]',
+    ui?.actionsHeader
   )
 "
+              />
+            </tr>
+          </thead>
+          <component
+            :is="isDraggable ? VueDraggable : 'tbody'"
+            v-model="dragItems"
+            :tag="isDraggable ? 'tbody' : void 0"
+            :class="ui?.body"
+            handle=".array-table-drag-handle"
+            :animation="150"
           >
-            <td
-              v-for="column in columns"
-              :key="column.key"
+            <tr
+              v-for="(item, index) in items"
+              :key="itemRenderKey(item, index)"
               :class="
   mergeFormUiClass(
-    'border-r border-default px-3 py-2 last:border-r-0',
-    formUi.ui.value.arrayTable?.ui?.cell
+    'align-middle transition-colors hover:bg-elevated/35 [&>*]:border-b [&>*]:border-default [&:last-child>*]:border-b-0',
+    ui?.row
   )
 "
             >
-              <div
+              <td
+                v-for="column in columns"
+                :key="column.key"
+                :class="mergeFormUiClass('border-r border-default p-1.5 last:border-r-0', ui?.cell)"
+              >
+                <div
+                  :class="mergeFormUiClass('flex w-full items-center [&>*]:w-full', ui?.control)"
+                >
+                  <FormFieldRenderer :field="column" :parent-path="itemPath(index)" bare />
+                </div>
+                <FormFieldError
+                  :path="[...itemPath(index), column.key]"
+                  :class="mergeFormUiClass('mt-1 px-2.5 text-xs text-error', ui?.error)"
+                />
+              </td>
+              <td
+                v-if="showActionsColumn"
                 :class="
   mergeFormUiClass(
-    'flex min-h-9 w-full items-center',
-    formUi.ui.value.arrayTable?.ui?.control
+    'sticky right-0 whitespace-nowrap border-l border-default bg-default px-1.5 py-1.5 text-right shadow-[-8px_0_12px_-10px_rgba(0,0,0,0.45)]',
+    ui?.actionsCell
   )
 "
               >
-                <FormFieldRenderer :field="column" :parent-path="rowPath(index)" bare />
-              </div>
-            </td>
-            <td
-              v-if="showActionsColumn"
-              :class="
-  mergeFormUiClass(
-    'whitespace-nowrap px-2 py-2 text-right',
-    formUi.ui.value.arrayTable?.ui?.actionsCell
-  )
-"
-            >
-              <UButton
-                v-if="isDraggable"
-                icon="i-lucide-grip-vertical"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                :class="
+                <UButton
+                  v-if="isDraggable"
+                  icon="i-lucide-grip-vertical"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :class="
   mergeFormUiClass(
     'array-table-drag-handle cursor-grab active:cursor-grabbing',
-    formUi.ui.value.arrayTable?.ui?.action
+    ui?.action
   )
 "
-                aria-label="Drag row"
-              />
-              <UButton
-                v-if="resolveAction(field.actions?.moveUp, index)"
-                icon="i-lucide-arrow-up"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                :class="formUi.ui.value.arrayTable?.ui?.action"
-                :disabled="index === 0"
-                aria-label="Move row up"
-                @click="moveItem(index, -1)"
-              />
-              <UButton
-                v-if="resolveAction(field.actions?.moveDown, index)"
-                icon="i-lucide-arrow-down"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                :class="formUi.ui.value.arrayTable?.ui?.action"
-                :disabled="index === items.length - 1"
-                aria-label="Move row down"
-                @click="moveItem(index, 1)"
-              />
-              <UButton
-                v-if="resolveAction(field.actions?.deleteItem, index)"
-                icon="i-lucide-trash-2"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                :class="formUi.ui.value.arrayTable?.ui?.action"
-                aria-label="Remove row"
-                @click="removeItem(index)"
-              />
-              <UButton
-                v-for="(action, actionIndex) in field.actions?.custom ?? []"
-                v-show="customActionVisible(index, actionIndex)"
-                :key="actionIndex"
-                :icon="action.icon"
-                color="neutral"
-                variant="ghost"
-                size="xs"
-                :class="formUi.ui.value.arrayTable?.ui?.action"
-                @click="runCustomAction(index, actionIndex)"
+                  :aria-label="t('form.fields.array.dragItem')"
+                />
+                <UButton
+                  v-if="canDelete(index)"
+                  icon="i-lucide-trash-2"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :class="ui?.action"
+                  :aria-label="t('form.fields.array.removeItem')"
+                  @click="removeItem(index)"
+                />
+                <UButton
+                  v-for="(action, actionIndex) in field.actions?.custom ?? []"
+                  v-show="customActionVisible(index, actionIndex)"
+                  :key="actionIndex"
+                  :icon="action.icon"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :class="ui?.action"
+                  @click="runCustomAction(index, actionIndex)"
+                >
+                  {{ resolveFormText(action.label) }}
+                </UButton>
+              </td>
+            </tr>
+            <tr v-if="items.length === 0">
+              <td
+                :colspan="columns.length + (showActionsColumn ? 1 : 0)"
+                :class="mergeFormUiClass('px-3 py-10 text-center text-muted', ui?.empty)"
               >
-                {{ resolveFormText(action.label) }}
-              </UButton>
-            </td>
-          </tr>
-          <tr v-if="items.length === 0">
-            <td
-              :colspan="columns.length + (showActionsColumn ? 1 : 0)"
-              :class="
+                {{ emptyLabel }}
+              </td>
+            </tr>
+          </component>
+          <tfoot v-if="canAdd">
+            <tr>
+              <td
+                :colspan="columns.length + (showActionsColumn ? 1 : 0)"
+                :class="mergeFormUiClass('border-t border-default p-1.5', ui?.addCell)"
+              >
+                <button
+                  type="button"
+                  :class="
   mergeFormUiClass(
-    'px-3 py-10 text-center text-muted',
-    formUi.ui.value.arrayTable?.ui?.empty
+    'flex w-full items-center justify-center gap-2 rounded-md border border-dashed border-default px-3 py-2 text-sm text-muted transition-colors hover:border-inverted/40 hover:bg-elevated/50 hover:text-default focus-visible:outline-2 focus-visible:outline-primary',
+    ui?.add
   )
 "
-            >
-              {{ resolveFormText(field.emptyLabel) ?? "No items yet" }}
-            </td>
-          </tr>
-        </component>
-      </table>
+                  :data-form-array-add="path.join('.')"
+                  @click="addItem()"
+                >
+                  <UIcon name="i-lucide-plus" class="size-4" aria-hidden="true" />
+                  <span>{{ addItemLabel }}</span>
+                </button>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
     </div>
-    <UButton
-      v-if="canAdd"
-      icon="i-lucide-plus"
-      variant="soft"
-      :size="formUi.controlSize.value"
-      :class="mergeFormUiClass('justify-self-start', formUi.ui.value.arrayTable?.ui?.add)"
-      @click="addItem"
-    >
-      {{ resolveFormText(field.addItemLabel) ?? "Add row" }}
-    </UButton>
   </section>
 </template>

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

@@ -1,12 +1,12 @@
 export declare const arrayTableFieldKind: {
-    readonly type: "array-table";
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
     readonly state: "passthrough";
+    readonly type: "array-table";
     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-table/config.js

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

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

@@ -1,6 +1,8 @@
-import type { FormArrayListField } from '../array-list/types.js';
-export interface FormArrayTableField<TContext = {}, TDeps = {}> extends Omit<FormArrayListField<TContext, TDeps>, 'type'> {
-    type: 'array-table';
+import type { FormContainerFieldBase } from '../../types/field-base.js';
+import type { FormArrayListField, FormArrayListProps } from '../array-list/types.js';
+export interface FormArrayTableProps extends FormArrayListProps {
     minWidth?: number | string;
 }
+export interface FormArrayTableField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends Omit<FormArrayListField<TContext, TDeps>, 'type' | 'props'>, Pick<FormContainerFieldBase<'array-table', TContext, TDeps, FormArrayTableProps>, 'type' | 'props'> {
+}
 export type ArrayTableFieldOutput<TChildren> = readonly TChildren[];

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

@@ -1,12 +1,12 @@
 export declare const arrayTabsFieldKind: {
-    readonly type: "array-tabs";
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
     readonly state: "passthrough";
+    readonly type: "array-tabs";
     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-tabs/config.js

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

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

@@ -1,14 +1,16 @@
 import type { FormContainerFieldBase } from '../../types/field-base.js';
-import type { FormText } from '../../types/utils.js';
-import type { FormObject } from '../../types/utils.js';
-import type { FormArrayFieldActions, FormArrayVirtualFields } from '../array-list/types.js';
-export interface FormArrayTabsField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'array-tabs', TContext, TDeps> {
+import type { FormRenderable, FormText, FormObject } from '../../types/utils.js';
+import type { FormArrayActionParams, FormArrayFieldActions, FormArrayListProps, FormArrayVirtualFields } from '../array-list/types.js';
+export interface FormArrayTabActionParams<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormArrayActionParams<TContext, TDeps> {
+    setActiveTab: (index: number) => void;
+}
+export interface FormArrayTabsField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormContainerFieldBase<'array-tabs', TContext, TDeps, FormArrayListProps> {
     addItemLabel?: FormText;
     emptyLabel?: FormText;
     itemLabel?: FormText;
-    compact?: boolean;
     confirmDelete?: boolean | FormText;
     headerTemplate?: (item: FormObject, index: number, deps: TDeps) => FormText;
+    tabAction?: (item: FormObject, index: number, params: FormArrayTabActionParams<TContext, TDeps>) => FormRenderable;
     transformOnCreate?: (item: FormObject, index: number, deps: TDeps) => FormObject;
     virtualFields?: FormArrayVirtualFields;
     extraProperties?: boolean;

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

@@ -1,12 +1,12 @@
 export declare const arrayVariantFieldKind: {
-    readonly type: "array-variant";
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
     readonly state: "passthrough";
+    readonly type: "array-variant";
     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-variant/config.js

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