nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+import { useFormRuntimeContext } from "../../composables/use-form-runtime";
+import { useFormUi } from "../../composables/use-form-ui";
+import { resolveFormText } from "../../utils/text";
+import { mergeFormUiClass } from "../../utils/ui";
+const props = defineProps({
+  field: { type: Object, required: true },
+  path: { type: Array, required: true }
+});
+const form = useFormRuntimeContext();
+const formUi = useFormUi();
+const label = computed(() => resolveFormText(props.field.label));
+const description = computed(() => resolveFormText(props.field.description));
+const isFirst = computed(() => form.currentFields.value[0]?.key === props.field.key);
+</script>
+
+<template>
+  <div
+    :class="
+  mergeFormUiClass(
+    'flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1',
+    isFirst ? void 0 : 'mt-1 border-t border-default pt-4',
+    formUi.ui.value.section?.ui?.root
+  )
+"
+    data-form-section
+  >
+    <h3
+      :class="
+  mergeFormUiClass(
+    'text-[11px] font-semibold uppercase tracking-[0.08em] text-dimmed',
+    formUi.ui.value.section?.ui?.label
+  )
+"
+    >
+      {{ label }}
+    </h3>
+    <p
+      v-if="description"
+      :class="mergeFormUiClass('text-[13px] text-muted', formUi.ui.value.section?.ui?.description)"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>

package/dist/runtime/form/fields/section/component.vue.d.ts

@@ -0,0 +1,8 @@
+import type { FormSectionField } from '../../types/index.js';
+type __VLS_Props = {
+    field: FormSectionField;
+    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;

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

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

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

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

package/dist/runtime/form/fields/section/index.d.ts

@@ -0,0 +1,2 @@
+export { sectionFieldKind } from './config.js';
+export type { FormSectionField } from './types.js';

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

@@ -0,0 +1 @@
+export { sectionFieldKind } from "./config.js";

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

@@ -0,0 +1,10 @@
+import type { FormStatelessFieldBase } from '../../types/field-base.js';
+import type { FormText } from '../../types/utils.js';
+/**
+ * Section caption: a small uppercase title with optional supporting copy, separated from the
+ * previous fields by a hairline. Spans the full grid by default.
+ */
+export interface FormSectionField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatelessFieldBase<'section', TContext, TDeps> {
+    label: FormText;
+    description?: FormText;
+}

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

@@ -1,44 +1,86 @@
 <script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
 import USelectMenu from "@nuxt/ui/components/SelectMenu.vue";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionItemLabel from "../../components/utils/form-option-item-label.vue";
+import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { appendLoadMoreOption } from "../../utils/options";
+import { isBoolean, isNumber, isString } from "../../utils/predicate";
+import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true },
   bare: { type: Boolean, required: false }
 });
 const { t } = useUiToolsLocale();
-const { form, controlProps, disabled, handleBlur, options, placeholder } = useFieldControl(
+const {
+  fieldProps,
+  form,
+  controlProps,
+  disabled,
+  handleBlur,
+  interactionOwnerClass,
+  options,
+  placeholder,
+  validationPending
+} = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["createItem", "max", "searchable", "clearable"] }
 );
 const searchTerm = ref("");
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    if (Array.isArray(value)) return value.filter(isOptionValue);
-    if (isOptionValue(value)) return value;
+    if (Array.isArray(value)) {
+      return value.filter(isOptionValue);
+    }
+    if (isOptionValue(value)) {
+      return value;
+    }
     return null;
   },
-  set: (value) => form.setValue(props.path, value)
+  set: (value) => {
+    const exceedsMax = fieldProps.value.multiple && isNumber(fieldProps.value.max) && Array.isArray(value) && value.length > fieldProps.value.max;
+    if (exceedsMax) {
+      return;
+    }
+    form.setValue(props.path, value);
+  }
 });
-const items = computed(() => [...options.items.value]);
+const items = computed(() => [
+  ...appendLoadMoreOption(
+    options.items.value,
+    options.remote.value && (options.hasMore.value || options.loadingMore.value),
+    t("form.fields.options.loadingMore")
+  )
+]);
+const controlUi = computed(() => ({
+  ...controlProps.value.ui,
+  content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value)
+}));
 const createItem = computed(
-  () => options.creatable.value && props.field.createItem ? props.field.createItem : false
+  () => options.creatable.value && fieldProps.value.createItem ? fieldProps.value.createItem : false
 );
 const showExplicitCreate = computed(
-  () => options.creatable.value && !props.field.createItem
-);
-const showFooterActions = computed(() => options.refreshable.value || showExplicitCreate.value);
-const footerActionsClass = computed(
-  () => options.refreshable.value && showExplicitCreate.value ? "sm:grid-cols-2" : "grid-cols-1"
+  () => options.creatable.value && !fieldProps.value.createItem
 );
 const createActionLabel = computed(
   () => options.createLabel.value ?? t("form.fields.options.create")
 );
+const searchable = computed(() => fieldProps.value.searchable ?? options.remote.value);
+watch(searchTerm, (term) => {
+  if (options.remote.value) {
+    options.setSearch(term);
+  }
+});
+function handleOpen(open) {
+  if (open) {
+    options.activate();
+  }
+}
 async function handleCreate(label) {
   await options.create(label);
 }
@@ -47,14 +89,16 @@ async function handleCreateAction() {
 }
 async function handleNativeCreate(label) {
   const normalizedLabel = label.trim();
-  if (!normalizedLabel) return;
+  if (!normalizedLabel) {
+    return;
+  }
   await handleCreate(normalizedLabel);
 }
 async function refreshOptions() {
   await options.refresh();
 }
 function isOptionValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
@@ -68,48 +112,34 @@ function isOptionValue(value) {
     value-key="value"
     label-key="label"
     :items="items"
-    :multiple="field.multiple"
+    :multiple="fieldProps.multiple"
     :placeholder="placeholder"
     :disabled="disabled"
-    :loading="options.loading.value || options.creating.value"
-    :search-input="field.searchable ?? false"
-    :clear="field.clearable === true"
+    :loading="
+  validationPending || options.loading.value || options.fetching.value || options.creating.value
+"
+    :trailing="true"
+    :search-input="searchable"
+    :ignore-filter="options.remote.value"
+    :clear="fieldProps.clearable === true"
     :create-item="createItem"
+    :ui="controlUi"
+    @update:open="handleOpen"
     @create="handleNativeCreate"
     @blur="handleBlur"
   >
+    <template #item-label="{ item }">
+      <FormOptionItemLabel :item="item" />
+    </template>
+
     <template #content-bottom>
-      <div
-        v-if="showFooterActions"
-        class="grid gap-1 border-t border-default p-1"
-        :class="footerActionsClass"
-      >
-        <UButton
-          v-if="options.refreshable.value"
-          block
-          size="xs"
-          variant="ghost"
-          color="neutral"
-          icon="i-lucide-refresh-cw"
-          :loading="options.pending.value || options.fetching.value"
-          @click.stop="refreshOptions"
-        >
-          {{ t("form.fields.options.refresh") }}
-        </UButton>
-        <UButton
-          v-if="showExplicitCreate"
-          block
-          size="xs"
-          variant="ghost"
-          color="primary"
-          icon="i-lucide-plus"
-          :loading="options.creating.value"
-          :disabled="disabled || options.creating.value"
-          @click.stop="handleCreateAction"
-        >
-          {{ createActionLabel }}
-        </UButton>
-      </div>
+      <FormOptionMenuFooter
+        :options="options"
+        :disabled="disabled"
+        :show-create="showExplicitCreate"
+        :create-label="createActionLabel"
+        @create="handleCreateAction"
+      />
     </template>
 
     <template #create-item-label="{ item }">
@@ -127,48 +157,34 @@ function isOptionValue(value) {
       value-key="value"
       label-key="label"
       :items="items"
-      :multiple="field.multiple"
+      :multiple="fieldProps.multiple"
       :placeholder="placeholder"
       :disabled="disabled"
-      :loading="options.loading.value || options.creating.value"
-      :search-input="field.searchable ?? false"
-      :clear="field.clearable === true"
+      :loading="
+  validationPending || options.loading.value || options.fetching.value || options.creating.value
+"
+      :trailing="true"
+      :search-input="searchable"
+      :ignore-filter="options.remote.value"
+      :clear="fieldProps.clearable === true"
       :create-item="createItem"
+      :ui="controlUi"
+      @update:open="handleOpen"
       @create="handleNativeCreate"
       @blur="handleBlur"
     >
+      <template #item-label="{ item }">
+        <FormOptionItemLabel :item="item" />
+      </template>
+
       <template #content-bottom>
-        <div
-          v-if="showFooterActions"
-          class="grid gap-1 border-t border-default p-1"
-          :class="footerActionsClass"
-        >
-          <UButton
-            v-if="options.refreshable.value"
-            block
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-refresh-cw"
-            :loading="options.pending.value || options.fetching.value"
-            @click.stop="refreshOptions"
-          >
-            {{ t("form.fields.options.refresh") }}
-          </UButton>
-          <UButton
-            v-if="showExplicitCreate"
-            block
-            size="xs"
-            variant="ghost"
-            color="primary"
-            icon="i-lucide-plus"
-            :loading="options.creating.value"
-            :disabled="disabled || options.creating.value"
-            @click.stop="handleCreateAction"
-          >
-            {{ createActionLabel }}
-          </UButton>
-        </div>
+        <FormOptionMenuFooter
+          :options="options"
+          :disabled="disabled"
+          :show-create="showExplicitCreate"
+          :create-label="createActionLabel"
+          @create="handleCreateAction"
+        />
       </template>
 
       <template #create-item-label="{ item }">

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

@@ -1,17 +1,17 @@
 export declare const selectFieldKind: {
-    readonly type: "select";
-    readonly state: "stateful";
-    readonly ui: {
-        readonly label: true;
-        readonly description: true;
-        readonly hint: true;
-    };
     readonly layout: {
         readonly item: true;
     };
     readonly options: {
         readonly enabled: true;
     };
-    readonly validation: true;
+    readonly state: "stateful";
     readonly transform: true;
+    readonly type: "select";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
+    readonly validation: true;
 };

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

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

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

@@ -1,21 +1,24 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
-import type { FieldOptionValue, FallbackNever, NullableValue } from '../../types/field-output-utils.js';
-import type { FormOptionConfig, FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+import type { FieldOptionValue, FieldProps, FallbackNever, NullableValue } from '../../types/field-output-utils.js';
+import type { FormAnyOptionConfig, FormOptionItem, FormOptionValue } from '../../types/options.js';
 export type FormSelectCreateItem = boolean | 'always' | {
     position?: 'top' | 'bottom';
     when?: 'always' | 'empty';
 };
-export interface FormSelectField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'select', TValue | readonly TValue[] | null, TContext, TDeps> {
-    options: FormOptionConfig<TOption, TContext, TDeps, TValue | readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, TValue | readonly TValue[] | null>;
+export interface FormSelectProps {
     multiple?: boolean;
     searchable?: boolean;
     clearable?: boolean;
     createItem?: FormSelectCreateItem;
+    max?: number;
 }
-type SelectFieldValue<TField> = TField extends {
+export interface FormSelectField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'select', TValue | readonly TValue[] | null, TContext, TDeps, FormSelectProps> {
+    options: FormAnyOptionConfig<TOption, TContext, TDeps, TValue | readonly TValue[] | null>;
+}
+type SelectFieldValue<TField> = FieldProps<TField> extends {
     multiple: true;
 } ? readonly FieldOptionValue<TField>[] | NullableValue : FieldOptionValue<TField> | NullableValue;
-type SelectFieldFallback<TField> = FallbackNever<SelectFieldValue<TField>, TField extends {
+type SelectFieldFallback<TField> = FallbackNever<SelectFieldValue<TField>, FieldProps<TField> extends {
     multiple: true;
 } ? readonly FormOptionValue[] | NullableValue : FormOptionValue | NullableValue>;
 export type SelectFieldOutput<TField> = SelectFieldFallback<TField>;

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

@@ -1,24 +1,29 @@
 <script setup>
 import USlider from "@nuxt/ui/components/Slider.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isNumber } from "../../utils/predicate";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
-const { form, controlProps, disabled, handleBlur } = useFieldControl(
+const { fieldProps, form, controlProps, disabled, handleBlur } = useFieldControl(
   () => props.field,
   () => props.path
 );
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    if (typeof value === "number") return value;
-    if (Array.isArray(value) && value.every((item) => typeof item === "number")) return value;
-    return props.field.multiple ? [] : void 0;
+    if (isNumber(value)) {
+      return value;
+    }
+    if (Array.isArray(value) && value.every((item) => isNumber(item))) {
+      return value;
+    }
+    return fieldProps.value.multiple ? [] : void 0;
   },
-  set: (value) => form.setValue(props.path, value ?? (props.field.multiple ? [] : null))
+  set: (value) => form.setValue(props.path, value ?? (fieldProps.value.multiple ? [] : null))
 });
 </script>
 
@@ -28,10 +33,10 @@ const model = computed({
       v-model="model"
       v-bind="controlProps"
       :disabled="disabled"
-      :min="field.min"
-      :max="field.max"
-      :step="field.step"
-      :tooltip="field.tooltip ?? true"
+      :min="fieldProps.min"
+      :max="fieldProps.max"
+      :step="fieldProps.step"
+      :tooltip="fieldProps.tooltip ?? true"
       @change="handleBlur"
     />
   </FormFieldShell>

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

@@ -1,14 +1,14 @@
 export declare const sliderFieldKind: {
-    readonly type: "slider";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "slider";
     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/slider/config.js

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

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

@@ -1,12 +1,14 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { FieldProps } from '../../types/field-output-utils.js';
 import type { FormObject } from '../../types/utils.js';
-export interface FormSliderField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'slider', number | readonly number[], TContext, TDeps> {
+export interface FormSliderProps {
     min?: number;
     max?: number;
     step?: number;
     multiple?: boolean;
     tooltip?: boolean | FormObject;
 }
-export type SliderFieldOutput<TField> = TField extends {
+export type FormSliderField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'slider', number | readonly number[], TContext, TDeps, FormSliderProps>;
+export type SliderFieldOutput<TField> = FieldProps<TField> extends {
     multiple: true;
 } ? readonly number[] : number | readonly number[];

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

@@ -1,26 +1,27 @@
 <script setup>
 import USwitch from "@nuxt/ui/components/Switch.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useFormFieldBare } from "../../composables/use-form-field-chrome";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
 const bare = useFormFieldBare();
-const { form, controlProps, disabled, handleBlur } = useFieldControl(
+const { fieldProps, form, controlProps, disabled, handleBlur, validationPending } = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["trueValue", "falseValue"] }
 );
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return value === (props.field.trueValue ?? true);
+    return value === (fieldProps.value.trueValue ?? true);
   },
   set: (value) => form.setValue(
     props.path,
-    value ? props.field.trueValue ?? true : props.field.falseValue ?? false
+    value ? fieldProps.value.trueValue ?? true : fieldProps.value.falseValue ?? false
   )
 });
 </script>
@@ -39,9 +40,9 @@ const model = computed({
       :description="bare ? void 0 : description"
       :required="required"
       :disabled="disabled"
-      :checked-icon="field.checkedIcon"
-      :unchecked-icon="field.uncheckedIcon"
-      :loading="field.loading"
+      :checked-icon="fieldProps.checkedIcon"
+      :unchecked-icon="fieldProps.uncheckedIcon"
+      :loading="validationPending || fieldProps.loading"
       @change="handleBlur"
     />
   </FormFieldShell>

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

@@ -1,14 +1,14 @@
 export declare const switchFieldKind: {
-    readonly type: "switch";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "switch";
     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/switch/config.js

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

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

@@ -1,22 +1,19 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { FieldProps } from '../../types/field-output-utils.js';
 import type { FormOptionValue } from '../../types/options.js';
-export interface FormSwitchField<TContext = {}, TDeps = {}, TTrue extends FormOptionValue = true, TFalse extends FormOptionValue = false> extends FormStatefulFieldBase<'switch', TTrue | TFalse, TContext, TDeps> {
-    /** Value written when the switch is enabled. Defaults to `true`. */
+export interface FormSwitchProps<TTrue extends FormOptionValue = true, TFalse extends FormOptionValue = false> {
     trueValue?: TTrue;
-    /** Value written when the switch is disabled. Defaults to `false`. */
     falseValue?: TFalse;
-    /** Icon displayed by Nuxt UI when the switch is enabled. */
     checkedIcon?: string;
-    /** Icon displayed by Nuxt UI when the switch is disabled. */
     uncheckedIcon?: string;
-    /** Displays the Nuxt UI loading state on the control. */
     loading?: boolean;
 }
-export type SwitchFieldOutput<TField> = TField extends {
+export type FormSwitchField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TTrue extends FormOptionValue = true, TFalse extends FormOptionValue = false> = FormStatefulFieldBase<'switch', TTrue | TFalse, TContext, TDeps, FormSwitchProps<TTrue, TFalse>>;
+export type SwitchFieldOutput<TField> = FieldProps<TField> extends {
     trueValue: infer TTrue;
     falseValue: infer TFalse;
-} ? TTrue | TFalse : TField extends {
+} ? TTrue | TFalse : FieldProps<TField> extends {
     trueValue: infer TTrue;
-} ? TTrue | false : TField extends {
+} ? TTrue | false : FieldProps<TField> extends {
     falseValue: infer TFalse;
 } ? true | TFalse : boolean;