nuxt-ui-tools 0.1.3 → 1.0.0

package/dist/runtime/form/fields/index.js

@@ -1,4 +1,6 @@
+import { arrayCollapseFieldKind } from "./array-collapse/config.js";
 import { arrayListFieldKind } from "./array-list/config.js";
+import { arrayPrimitiveFieldKind } from "./array-primitive/config.js";
 import { arrayTableFieldKind } from "./array-table/config.js";
 import { arrayTabsFieldKind } from "./array-tabs/config.js";
 import { arrayVariantFieldKind } from "./array-variant/config.js";
@@ -33,10 +35,12 @@ import { phoneNumberFieldKind } from "./phone-number/config.js";
 import { radioCardFieldKind } from "./radio-card/config.js";
 import { radioFieldKind } from "./radio/config.js";
 import { ratingFieldKind } from "./rating/config.js";
+import { sectionFieldKind } from "./section/config.js";
 import { selectFieldKind } from "./select/config.js";
 import { sliderFieldKind } from "./slider/config.js";
 import { switchGroupFieldKind } from "./switch-group/config.js";
 import { switchFieldKind } from "./switch/config.js";
+import { tabsFieldKind } from "./tabs/config.js";
 import { tagFieldKind } from "./tag/config.js";
 import { textFieldKind } from "./text/config.js";
 import { textareaFieldKind } from "./textarea/config.js";
@@ -45,6 +49,7 @@ import { treeSelectFieldKind } from "./tree-select/config.js";
 import { treeFieldKind } from "./tree/config.js";
 import { uploadFieldKind } from "./upload/config.js";
 import { yearFieldKind } from "./year/config.js";
+export { arrayListFieldKind } from "./array-list/config.js";
 export const formFieldKinds = [
   textFieldKind,
   passwordFieldKind,
@@ -58,8 +63,10 @@ export const formFieldKinds = [
   hiddenFieldKind,
   infoFieldKind,
   dividerFieldKind,
+  sectionFieldKind,
   inputGroupFieldKind,
   objectFieldKind,
+  tabsFieldKind,
   customComponentFieldKind,
   dateTimeFieldKind,
   dateRangeFieldKind,
@@ -78,6 +85,8 @@ export const formFieldKinds = [
   arrayTableFieldKind,
   arrayTabsFieldKind,
   arrayVariantFieldKind,
+  arrayCollapseFieldKind,
+  arrayPrimitiveFieldKind,
   sliderFieldKind,
   tagFieldKind,
   buttonFieldKind,
@@ -94,52 +103,3 @@ export const formFieldKinds = [
   cardFieldKind,
   columnFieldKind
 ];
-export {
-  arrayListFieldKind,
-  arrayTableFieldKind,
-  arrayTabsFieldKind,
-  arrayVariantFieldKind,
-  autoCompleteFieldKind,
-  buttonFieldKind,
-  cardFieldKind,
-  checkboxCardFieldKind,
-  checkboxGroupFieldKind,
-  checkboxFieldKind,
-  colorPickerFieldKind,
-  cascaderFieldKind,
-  columnFieldKind,
-  customComponentFieldKind,
-  dateFieldKind,
-  dateRangeFieldKind,
-  dateTimeFieldKind,
-  dateTimeRangeFieldKind,
-  dividerFieldKind,
-  fileFieldKind,
-  hiddenFieldKind,
-  groupFieldKind,
-  infoFieldKind,
-  inputGroupFieldKind,
-  matrixFieldKind,
-  monthFieldKind,
-  monthRangeFieldKind,
-  numberFieldKind,
-  oneTimeCodeFieldKind,
-  objectFieldKind,
-  passwordFieldKind,
-  phoneNumberFieldKind,
-  radioCardFieldKind,
-  radioFieldKind,
-  ratingFieldKind,
-  selectFieldKind,
-  sliderFieldKind,
-  switchGroupFieldKind,
-  switchFieldKind,
-  tagFieldKind,
-  textareaFieldKind,
-  textFieldKind,
-  timeFieldKind,
-  treeFieldKind,
-  treeSelectFieldKind,
-  uploadFieldKind,
-  yearFieldKind
-};

package/dist/runtime/form/fields/info/component.vue

@@ -2,27 +2,29 @@
 import UAlert from "@nuxt/ui/components/Alert.vue";
 import { computed } from "vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { invokeFormFunction, isNumber, isString } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const { params } = useFieldControl(
+const { fieldProps, params } = useFieldControl(
   () => props.field,
   () => props.path
 );
 const description = computed(() => {
-  const content = props.field.content;
-  if (typeof content === "function") {
-    const value = content(params.value);
-    return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
-  }
-  if (typeof content === "string" || typeof content === "number" || typeof content === "function")
-    return resolveFormText(content);
-  return void 0;
+  const { content } = props.field;
+  const resolved = invokeFormFunction(content, [params.value]) ?? content;
+  return isString(resolved) || isNumber(resolved) ? String(resolved) : void 0;
 });
 </script>
 
 <template>
-  <UAlert color="neutral" variant="soft" icon="i-lucide-info" :description="description" />
+  <UAlert
+    :color="fieldProps.color ?? 'neutral'"
+    :variant="fieldProps.variant ?? 'soft'"
+    :icon="fieldProps.icon === false ? void 0 : fieldProps.icon ?? 'i-lucide-info'"
+    :title="resolveFormText(fieldProps.title)"
+    :description="description"
+  />
 </template>

package/dist/runtime/form/fields/info/config.d.ts

@@ -1,7 +1,7 @@
 export declare const infoFieldKind: {
-    readonly type: "info";
-    readonly state: "stateless";
     readonly layout: {
         readonly item: true;
     };
+    readonly state: "stateless";
+    readonly type: "info";
 };

package/dist/runtime/form/fields/info/config.js

@@ -1,6 +1,6 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const infoFieldKind = defineFormFieldKind({
-  type: "info",
+  layout: { item: true },
   state: "stateless",
-  layout: { item: true }
+  type: "info"
 });

package/dist/runtime/form/fields/info/types.d.ts

@@ -1,6 +1,12 @@
 import type { FormFieldCallback } from '../../types/callbacks.js';
 import type { FormStatelessFieldBase } from '../../types/field-base.js';
-import type { FormRenderable } from '../../types/utils.js';
-export interface FormInfoField<TContext = {}, TDeps = {}> extends FormStatelessFieldBase<'info', TContext, TDeps> {
+import type { FormRenderable, FormText } from '../../types/utils.js';
+export interface FormInfoProps {
+    title?: FormText;
+    icon?: string | false;
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+}
+export interface FormInfoField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatelessFieldBase<'info', TContext, TDeps, FormInfoProps> {
     content: FormRenderable | FormFieldCallback<FormRenderable, TContext, TDeps>;
 }

package/dist/runtime/form/fields/input-group/component.vue

@@ -1,23 +1,68 @@
 <script setup>
 import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
-import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import { useResolvedFieldProps } from "../../composables/use-field-control";
 import { useFormUi } from "../../composables/use-form-ui";
+import { isNumber } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true },
   parentPath: { type: Array, required: true }
 });
+const fieldProps = useResolvedFieldProps(
+  () => props.field,
+  () => props.path
+);
 const formUi = useFormUi();
+function controlAttrs(field) {
+  const span = "layout" in field ? field.layout?.span : void 0;
+  const weight = isNumber(span) && Number.isFinite(span) && span > 0 ? span : 1;
+  return {
+    class: `min-w-0 ${resolveFlexClass(weight)}`
+  };
+}
+function resolveFlexClass(weight) {
+  if (weight >= 12) {
+    return "flex-[12_1_0%]";
+  }
+  if (weight >= 10) {
+    return "flex-[10_1_0%]";
+  }
+  if (weight >= 8) {
+    return "flex-[8_1_0%]";
+  }
+  if (weight >= 6) {
+    return "flex-[6_1_0%]";
+  }
+  if (weight >= 5) {
+    return "flex-[5_1_0%]";
+  }
+  if (weight >= 4) {
+    return "flex-[4_1_0%]";
+  }
+  if (weight >= 3) {
+    return "flex-[3_1_0%]";
+  }
+  if (weight >= 2) {
+    return "flex-[2_1_0%]";
+  }
+  return "flex-[1_1_0%]";
+}
 </script>
 
 <template>
   <FormFieldShell :field="field" :path="path">
     <UFieldGroup
       :size="formUi.controlSize.value"
+      :orientation="fieldProps.orientation ?? 'horizontal'"
       :class="
-  mergeFormUiClass('w-full', formUi.ui.value.group?.ui?.root, formUi.ui.value.group?.ui?.base)
+  mergeFormUiClass(
+    'w-full [&>button:has(+input[data-hidden]:last-child)]:rounded-e-md',
+    formUi.ui.value.group?.ui?.root,
+    formUi.ui.value.group?.ui?.base
+  )
 "
     >
       <FormFieldRenderer
@@ -25,6 +70,7 @@ const formUi = useFormUi();
         :key="child.key"
         :field="child"
         :parent-path="parentPath"
+        :control-attrs="controlAttrs(child)"
         bare
       />
     </UFieldGroup>

package/dist/runtime/form/fields/input-group/config.d.ts

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

package/dist/runtime/form/fields/input-group/config.js

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

package/dist/runtime/form/fields/input-group/types.d.ts

@@ -1,3 +1,5 @@
 import type { FormContainerFieldBase } from '../../types/field-base.js';
-export interface FormInputGroupField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'input-group', TContext, TDeps> {
+export interface FormInputGroupProps {
+    orientation?: 'horizontal' | 'vertical';
 }
+export type FormInputGroupField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormContainerFieldBase<'input-group', TContext, TDeps, FormInputGroupProps>;

package/dist/runtime/form/fields/matrix/component.vue

@@ -1,14 +1,20 @@
 <script setup>
 import { computed, useId } from "vue";
-import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import { useResolvedFieldProps } from "../../composables/use-field-control";
 import { useFormUi } from "../../composables/use-form-ui";
+import { isNumber } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
+const fieldProps = useResolvedFieldProps(
+  () => props.field,
+  () => props.path
+);
 const formUi = useFormUi();
 const matrixInstanceId = useId();
 const visibleFields = computed(
@@ -16,8 +22,15 @@ const visibleFields = computed(
 );
 const matrixId = computed(() => `${matrixInstanceId}-${props.path.join("-")}`);
 const minWidth = computed(
-  () => typeof props.field.minWidth === "number" ? `${props.field.minWidth}px` : props.field.minWidth ?? "40rem"
+  () => isNumber(fieldProps.value.minWidth) ? `${fieldProps.value.minWidth}px` : fieldProps.value.minWidth ?? "40rem"
+);
+const rowHeaderWidth = computed(
+  () => isNumber(fieldProps.value.rowHeaderWidth) ? `${fieldProps.value.rowHeaderWidth}px` : fieldProps.value.rowHeaderWidth ?? "13rem"
 );
+const bordered = computed(() => fieldProps.value.bordered !== false);
+const hoverable = computed(() => fieldProps.value.hoverable !== false);
+const rowPadding = computed(() => fieldProps.value.compact ? "px-3 py-2" : "px-4 py-3");
+const cellPadding = computed(() => fieldProps.value.compact ? "px-2 py-1.5" : "px-3 py-2.5");
 function rowPath(row) {
   return [...props.path, row.key];
 }
@@ -44,7 +57,7 @@ function controlClass(field) {
     <div
       :class="
   mergeFormUiClass(
-    'w-full overflow-x-auto rounded-lg border border-default bg-default',
+    bordered ? 'w-full overflow-x-auto rounded-lg border border-default bg-default' : 'w-full overflow-x-auto bg-default',
     formUi.ui.value.matrix?.ui?.root
   )
 "
@@ -63,10 +76,14 @@ function controlClass(field) {
               scope="col"
               :class="
   mergeFormUiClass(
-    'w-52 border-b border-r border-default px-4 py-3',
+    [
+      rowPadding,
+      bordered ? 'border-b border-r border-default' : 'border-b border-default'
+    ].join(' '),
     formUi.ui.value.matrix?.ui?.corner
   )
 "
+              :style="{ width: rowHeaderWidth, minWidth: rowHeaderWidth }"
             />
             <th
               v-for="column in visibleFields"
@@ -75,7 +92,11 @@ function controlClass(field) {
               scope="col"
               :class="
   mergeFormUiClass(
-    'border-b border-r border-default px-4 py-3 text-center font-medium last:border-r-0',
+    [
+      rowPadding,
+      'border-b border-default text-center font-medium',
+      bordered ? 'border-r last:border-r-0' : ''
+    ].join(' '),
     formUi.ui.value.matrix?.ui?.columnHeader
   )
 "
@@ -90,7 +111,12 @@ function controlClass(field) {
             :key="row.key"
             :class="
   mergeFormUiClass(
-    'align-middle transition-colors hover:bg-elevated/35 [&>*]:border-b [&>*]:border-default [&:last-child>*]:border-b-0',
+    [
+      'align-middle transition-colors',
+      hoverable ? 'hover:bg-elevated/35' : '',
+      fieldProps.striped ? 'even:bg-elevated/20' : '',
+      '[&>*]:border-b [&>*]:border-default [&:last-child>*]:border-b-0'
+    ].join(' '),
     formUi.ui.value.matrix?.ui?.row
   )
 "
@@ -100,10 +126,15 @@ function controlClass(field) {
               scope="row"
               :class="
   mergeFormUiClass(
-    'border-r border-default bg-elevated/35 px-4 py-3 text-left font-medium text-highlighted',
+    [
+      rowPadding,
+      'bg-elevated/35 text-left font-medium text-highlighted',
+      bordered ? 'border-r border-default' : ''
+    ].join(' '),
     formUi.ui.value.matrix?.ui?.rowHeader
   )
 "
+              :style="{ width: rowHeaderWidth, minWidth: rowHeaderWidth }"
             >
               {{ resolveFormText(row.label) ?? row.key }}
             </th>
@@ -113,7 +144,11 @@ function controlClass(field) {
               :headers="`${rowLabelId(row)} ${columnLabelId(column)}`"
               :class="
   mergeFormUiClass(
-    'border-r border-default px-3 py-2.5 text-center last:border-r-0',
+    [
+      cellPadding,
+      'text-center',
+      bordered ? 'border-r border-default last:border-r-0' : ''
+    ].join(' '),
     formUi.ui.value.matrix?.ui?.cell
   )
 "

package/dist/runtime/form/fields/matrix/config.d.ts

@@ -1,15 +1,15 @@
 export declare const matrixFieldKind: {
-    readonly type: "matrix";
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "matrix";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
-        readonly container: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/matrix/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const matrixFieldKind = defineFormFieldKind({
-  type: "matrix",
+  layout: { container: true, item: true },
   state: "stateful",
-  ui: { label: true, description: true, hint: true },
-  layout: { item: true, container: true },
-  validation: true,
-  transform: true
+  transform: true,
+  type: "matrix",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/matrix/types.d.ts

@@ -5,10 +5,17 @@ export interface FormMatrixRow<TKey extends string = string> {
     key: TKey;
     label: FormText;
 }
-export interface FormMatrixField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'matrix', object, TContext, TDeps> {
+export interface FormMatrixProps {
+    minWidth?: number | string;
+    rowHeaderWidth?: number | string;
+    bordered?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+}
+export interface FormMatrixField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatefulFieldBase<'matrix', object, TContext, TDeps, FormMatrixProps> {
     rows: readonly FormMatrixRow[];
     fields: readonly FormField<TContext, TDeps>[];
-    minWidth?: number | string;
 }
 export type MatrixFieldOutput<TRows extends readonly FormMatrixRow[], TChildren> = {
     [TRow in TRows[number] as TRow['key']]: TChildren;

package/dist/runtime/form/fields/month/config.d.ts

@@ -1,14 +1,14 @@
 export declare const monthFieldKind: {
-    readonly type: "month";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "month";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/month/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const monthFieldKind = defineFormFieldKind({
-  type: "month",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "month",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/month-range/config.d.ts

@@ -1,14 +1,14 @@
 export declare const monthRangeFieldKind: {
-    readonly type: "monthrange";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "monthrange";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/month-range/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const monthRangeFieldKind = defineFormFieldKind({
-  type: "monthrange",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "monthrange",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });