nuxt-ui-tools 1.11.2 → 1.13.0

package/README.md

@@ -3,15 +3,21 @@
 Nuxt module and runtime toolkit for UI-heavy Nuxt apps, with a local playground for integration testing and demos.
 
 The release-ready public runtimes are available through `nuxt-ui-tools/table`,
-`nuxt-ui-tools/form`, `nuxt-ui-tools/query-state`, `nuxt-ui-tools/shared`, and
-`nuxt-ui-tools/i18n`. Installing the Nuxt module also exposes the same domains
-through `#ui-tools/*`, auto-imports their primary functions, and registers their
+`nuxt-ui-tools/form`, `nuxt-ui-tools/query-state`, `nuxt-ui-tools/spreadsheet`,
+`nuxt-ui-tools/shared`, and `nuxt-ui-tools/i18n`. Installing the Nuxt module also exposes the
+same domains through `#ui-tools/*`, auto-imports their primary functions, and registers their
 top-level components.
 
 The shared entrypoint exports the breakpoint-aware runtime helpers
 `getResponsiveValue`, `parseResponsiveValue`, `resolveResponsiveValueAtBreakpoint`,
-and `useResponsiveValue`. The spreadsheet import engine is still internal and is
-not part of the package export map or Nuxt public surface.
+and `useResponsiveValue`.
+
+The spreadsheet import reads files with SheetJS, an optional peer. npm only serves SheetJS up to
+0.18.5, which has known vulnerabilities; install 0.20.2 or later from the SheetJS CDN:
+
+```bash
+bun add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz
+```
 
 ## Structure
 

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.11.2",
+  "version": "1.13.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -46,6 +46,44 @@ function getPublicComponents(runtimeDir, options) {
       global: options.global,
       name: `${prefix}DataList${part}`
     })),
+    // Spreadsheet
+    {
+      filePath: `${runtimeDir}/spreadsheet/components/spreadsheet-import.vue`,
+      global: options.global,
+      name: `${prefix}SpreadsheetImport`
+    },
+    {
+      filePath: `${runtimeDir}/spreadsheet/components/spreadsheet-import-root.vue`,
+      global: options.global,
+      name: `${prefix}SpreadsheetImportRoot`
+    },
+    ...[
+      "Dropzone",
+      "FileCard",
+      "SourceSettings",
+      "ExpectedColumns",
+      "TemplateButton",
+      "ColumnMapping",
+      "ValueMapping",
+      "Table",
+      "TableToolbar",
+      "RowInspector",
+      "Stats",
+      "Stat",
+      "ExportButton",
+      "SubmitButton",
+      "Summary",
+      "Progress"
+    ].map((part) => ({
+      filePath: `${runtimeDir}/spreadsheet/components/parts/spreadsheet-import-${toKebabCase(part)}.vue`,
+      global: options.global,
+      name: `${prefix}SpreadsheetImport${part}`
+    })),
+    ...["Stepper", "Step", "StepNav"].map((part) => ({
+      filePath: `${runtimeDir}/spreadsheet/components/steps/spreadsheet-import-${toKebabCase(part)}.vue`,
+      global: options.global,
+      name: `${prefix}SpreadsheetImport${part}`
+    })),
     // Dashboard
     ...[
       "Grid",
@@ -174,6 +212,13 @@ function setupImports(runtimeDir) {
       { from: "table", name: "tableSource" },
       { from: "table", name: "useTable" }
     ]),
+    // Spreadsheet
+    ...withRuntime(runtimeDir, [
+      { from: "spreadsheet", name: "defineSpreadsheetSchema" },
+      { from: "spreadsheet", name: "spreadsheetSteps" },
+      { from: "spreadsheet", name: "useSpreadsheetImport" },
+      { from: "spreadsheet", name: "useSpreadsheetSteps" }
+    ]),
     // Dashboard
     ...withRuntime(runtimeDir, [
       { from: "dashboard", name: "defineDashboardSchema" },
@@ -377,6 +422,7 @@ const publicRuntimeDomains = [
   "query-prefetch",
   "query-state",
   "shared",
+  "spreadsheet",
   "table"
 ];
 const require$1 = createRequire(import.meta.url);

package/dist/runtime/dashboard/components/dashboard-stat.d.vue.ts

@@ -1,7 +1,7 @@
 import type { LazyTextValue } from '#ui-tools/shared/types/utils';
 import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardSeriesColor, DashboardSourceLike, DashboardStatUi, DashboardStatus, DashboardValueFormat } from '../types/index.js';
 declare const __VLS_export: <TData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui" | "title" | "subtitle"> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "title" | "ui" | "subtitle"> & {
         source: DashboardSourceLike<TData>;
         /** KPI label, shown above the value. */
         label: LazyTextValue;

package/dist/runtime/dashboard/components/dashboard-stat.vue.d.ts

@@ -1,7 +1,7 @@
 import type { LazyTextValue } from '#ui-tools/shared/types/utils';
 import type { DashboardBlockBaseProps, DashboardBlockUi, DashboardSeriesColor, DashboardSourceLike, DashboardStatUi, DashboardStatus, DashboardValueFormat } from '../types/index.js';
 declare const __VLS_export: <TData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "ui" | "title" | "subtitle"> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Omit<DashboardBlockBaseProps, "title" | "ui" | "subtitle"> & {
         source: DashboardSourceLike<TData>;
         /** KPI label, shown above the value. */
         label: LazyTextValue;

package/dist/runtime/file-preview/components/shell/file-preview-stage.d.vue.ts

@@ -17,13 +17,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_64) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (details: readonly FilePreviewDetail[]) => any;
     previous: () => any;
+    ready: (details: readonly FilePreviewDetail[]) => any;
     download: () => any;
     next: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
     onPrevious?: (() => any) | undefined;
+    onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
     onDownload?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/file-preview/components/shell/file-preview-stage.vue.d.ts

@@ -17,13 +17,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_64) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (details: readonly FilePreviewDetail[]) => any;
     previous: () => any;
+    ready: (details: readonly FilePreviewDetail[]) => any;
     download: () => any;
     next: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
     onPrevious?: (() => any) | undefined;
+    onReady?: ((details: readonly FilePreviewDetail[]) => any) | undefined;
     onDownload?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -41,6 +41,7 @@ const {
   itemPath,
   itemRenderKey,
   items,
+  removeItemLabel,
   runCustomAction,
   t,
   title,
@@ -229,7 +230,7 @@ function bodyId(index) {
                 variant="ghost"
                 size="xs"
                 :class="ui?.action"
-                :aria-label="t('form.fields.array.removeItem')"
+                :aria-label="removeItemLabel(item, index)"
                 @click="removeItem(index)"
               />
               <UButton

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

@@ -43,6 +43,7 @@ const {
   itemPath,
   itemRenderKey,
   items,
+  removeItemLabel,
   runCustomAction,
   t,
   title,
@@ -230,7 +231,7 @@ function updateDraggedItems(value) {
                   variant="ghost"
                   size="xs"
                   :class="ui?.action"
-                  :aria-label="t('form.fields.array.removeItem')"
+                  :aria-label="removeItemLabel(item, index)"
                   @click.stop="removeItem(index)"
                 />
               </div>
@@ -291,76 +292,84 @@ function updateDraggedItems(value) {
       handle=".array-drag-handle"
       :animation="150"
     >
-      <div
-        v-for="(item, index) in items"
-        :key="itemRenderKey(item, index)"
-        :class="[
+      <TransitionGroup
+        enter-active-class="transition duration-200 ease-out motion-reduce:transition-none"
+        enter-from-class="translate-y-1 opacity-0"
+        leave-active-class="transition duration-150 ease-in motion-reduce:transition-none"
+        leave-to-class="scale-[0.98] opacity-0"
+      >
+        <div
+          v-for="(item, index) in items"
+          :key="itemRenderKey(item, index)"
+          :class="[
   mergeFormUiClass('grid rounded-lg border border-default bg-default', ui?.item),
   fieldProps.compact ? 'gap-3 p-3' : 'gap-4 p-4'
 ]"
-      >
-        <div :class="mergeFormUiClass('flex items-center justify-between gap-3', ui?.itemHeader)">
-          <span
-            :class="mergeFormUiClass('text-sm font-medium text-highlighted', ui?.itemTitle)"
-            :data-form-array-heading="index"
-          >
-            {{ itemHeading(items[index] ?? {}, index) }}
-          </span>
-          <div :class="mergeFormUiClass('flex items-center gap-1', ui?.itemActions)">
-            <UButton
-              v-if="isDraggable"
-              icon="i-lucide-grip-vertical"
-              color="neutral"
-              variant="ghost"
-              size="xs"
-              :class="mergeFormUiClass('array-drag-handle cursor-grab', ui?.action)"
-              :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)"
+          :data-form-array-item="index"
+        >
+          <div :class="mergeFormUiClass('flex items-center justify-between gap-3', ui?.itemHeader)">
+            <span
+              :class="mergeFormUiClass('text-sm font-medium text-highlighted', ui?.itemTitle)"
+              :data-form-array-heading="index"
             >
-              {{ resolveFormText(action.label) }}
-            </UButton>
+              {{ itemHeading(items[index] ?? {}, index) }}
+            </span>
+            <div :class="mergeFormUiClass('flex items-center gap-1', ui?.itemActions)">
+              <UButton
+                v-if="isDraggable"
+                icon="i-lucide-grip-vertical"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                :class="mergeFormUiClass('array-drag-handle cursor-grab', ui?.action)"
+                :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="removeItemLabel(items[index] ?? {}, index)"
+                @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>
+            </div>
           </div>
-        </div>
-
-        <USelect
-          v-if="field.type === 'array-variant'"
-          :model-value="variantValue(items[index])"
-          :items="variantItems"
-          value-key="value"
-          :size="formUi.controlSize.value"
-          :class="mergeFormUiClass('w-full max-w-xs', ui?.variant)"
-          @update:model-value="updateVariant(index, $event)"
-        />
 
-        <div :class="mergeFormUiClass('grid', ui?.fields)" :style="containerLayout.style.value">
-          <FormFieldRenderer
-            v-for="child in fieldsForItem(items[index] ?? {})"
-            :key="child.key"
-            :field="child"
-            :parent-path="itemPath(index)"
+          <USelect
+            v-if="field.type === 'array-variant'"
+            :model-value="variantValue(items[index])"
+            :items="variantItems"
+            value-key="value"
+            :size="formUi.controlSize.value"
+            :class="mergeFormUiClass('w-full max-w-xs', ui?.variant)"
+            @update:model-value="updateVariant(index, $event)"
           />
+
+          <div :class="mergeFormUiClass('grid', ui?.fields)" :style="containerLayout.style.value">
+            <FormFieldRenderer
+              v-for="child in fieldsForItem(items[index] ?? {})"
+              :key="child.key"
+              :field="child"
+              :parent-path="itemPath(index)"
+            />
+          </div>
         </div>
-      </div>
+      </TransitionGroup>
     </component>
 
     <UButton

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

@@ -42,6 +42,7 @@ export declare function useFormArrayItems(field: () => FormArrayItemsField, path
     itemRenderKey: (item: FormObject, index: number) => string;
     items: import("vue").ComputedRef<readonly import("../../../shared/index.js").GenericObject[]>;
     removeItem: (index: number) => boolean;
+    removeItemLabel: (item: FormObject, index: number) => string;
     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;

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

@@ -106,6 +106,9 @@ export function useFormArrayItems(field, path) {
   function itemHeading(item, index) {
     return resolveFormText(field().headerTemplate?.(item, index, actionParams(index).deps)) ?? `${itemLabel.value} ${index + 1}`;
   }
+  function removeItemLabel(item, index) {
+    return t("form.fields.array.removeNamedItem", { item: itemHeading(item, index) });
+  }
   function resolveAction(action, index) {
     const condition = isArrayActionConfig(action) ? action.condition : action;
     if (isBoolean(condition)) {
@@ -239,6 +242,7 @@ export function useFormArrayItems(field, path) {
     itemRenderKey,
     items,
     removeItem,
+    removeItemLabel,
     resolveAction,
     runCustomAction,
     t,

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

@@ -41,6 +41,7 @@ const {
   itemRenderKey,
   items,
   removeItem,
+  removeItemLabel,
   runCustomAction,
   t,
   title,
@@ -208,7 +209,7 @@ function fieldLabel(field) {
                   variant="ghost"
                   size="xs"
                   :class="ui?.action"
-                  :aria-label="t('form.fields.array.removeItem')"
+                  :aria-label="removeItemLabel(item, index)"
                   @click="removeItem(index)"
                 />
                 <UButton

package/dist/runtime/form/types/api.d.ts

@@ -1,4 +1,4 @@
-import type { NestedPaths } from '../../shared/types/utils.js';
+import type { DecrementDepth } from '../../shared/types/utils.js';
 import type { FormValue } from './/index.js';
 import type { FormContextData } from './context.js';
 import type { FormMaybePromise, FormObject } from './utils.js';
@@ -170,10 +170,17 @@ export interface FormFieldApi<TValue = FormValue, TOption = FormValue, TContext
     /** Focuses the mounted control for this field when it has a focusable input. */
     focus: () => Promise<boolean>;
 }
+/**
+ * Dot path into submitted output. Array items are addressed by index (`contacts.0.email`); the
+ * unindexed form (`contacts.email`) stays accepted.
+ */
+type FormOutputPath<T, MaxDepth extends number = 10> = [MaxDepth] extends [0] ? never : T extends readonly (infer TItem)[] ? `${number}` | `${number}.${FormOutputPath<TItem, DecrementDepth<MaxDepth>>}` | FormOutputPath<TItem, DecrementDepth<MaxDepth>> : T extends object ? {
+    [K in keyof T & string]: `${K}` | `${K}.${FormOutputPath<T[K], DecrementDepth<MaxDepth>>}`;
+}[keyof T & string] : never;
 /**
  * Public form API available from form-level callbacks.
  */
-export type FormFieldPath<TOutput = FormObject> = TOutput extends FormObject ? FormObject extends TOutput ? string : NestedPaths<TOutput> : string;
+export type FormFieldPath<TOutput = FormObject> = TOutput extends FormObject ? FormObject extends TOutput ? string : FormOutputPath<TOutput> : string;
 export interface FormApi<TOutput = FormObject> {
     /** Reads an internal form value by raw path. */
     get: (path: string) => FormValue;
@@ -212,3 +219,4 @@ export interface FormSubmitHandlerResult<TSubmitData = FormValue> {
     success: boolean;
     data?: TSubmitData;
 }
+export {};