nuxt-ui-tools 1.16.6 → 1.16.7

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.16.6",
+  "version": "1.16.7",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -61,7 +61,7 @@ function isOptionValue(value) {
       description-key="description"
       :orientation="fieldProps.orientation"
       :ui="groupUi"
-      :variant="fieldProps.variant === 'table' ? 'list' : fieldProps.variant ?? 'list'"
+      :variant="fieldProps.variant ?? 'list'"
       :indicator="fieldProps.indicator"
       :disabled="disabled"
       @blur="handleBlur"

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

@@ -2,6 +2,10 @@ import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
 import type { FormOptionConfig, FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
 export interface FormCheckboxGroupProps {
+    /**
+     * `list` (the default) lines up bare checkboxes, `card` frames each option on its own, and
+     * `table` joins the options into one framed list with a divider between rows.
+     */
     variant?: 'table' | 'list' | 'card';
     orientation?: 'horizontal' | 'vertical';
     indicator?: 'start' | 'end' | 'hidden';

package/dist/runtime/form/fields/custom-component/component.vue

@@ -6,17 +6,28 @@ const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const { params } = useFieldControl(
+const { disabled, fieldProps, form, handleBlur, params } = useFieldControl(
   () => props.field,
   () => props.path
 );
+const model = computed({
+  get: () => form.getValue(props.path),
+  set: (value) => form.setValue(props.path, value)
+});
 const rendered = computed(() => props.field.render?.(params.value));
 const Rendered = () => rendered.value;
 </script>
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <component :is="field.component" v-if="field.component" />
+    <component
+      :is="field.component"
+      v-if="field.component"
+      v-bind="fieldProps"
+      v-model="model"
+      :disabled="disabled"
+      @blur="handleBlur"
+    />
     <Rendered v-else-if="rendered" />
   </FormFieldShell>
 </template>

package/dist/runtime/form/fields/custom-component/types.d.ts

@@ -5,7 +5,12 @@ import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldDefaultValue, FallbackNever } from '../../types/field-output-utils.js';
 import type { FormRenderable } from '../../types/utils.js';
 export interface FormCustomComponentField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatefulFieldBase<'custom-component', FormValue, TContext, TDeps> {
+    /**
+     * Renders the field as a control: the component receives the field value as `modelValue`, its
+     * resolved `props`, and `disabled`, and sets the value by emitting `update:modelValue`.
+     */
     component?: Component;
+    /** Renders free content from the field callback params, `{ ctx, deps, api }`. */
     render?: FormFieldCallback<FormRenderable, TContext, TDeps>;
 }
 export type CustomComponentFieldOutput<TField> = FallbackNever<FieldDefaultValue<TField>, FormValue>;

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

@@ -44,7 +44,7 @@ const groupUi = computed(() => ({
       description-key="description"
       :items="items"
       :ui="groupUi"
-      :variant="fieldProps.variant === 'table' ? 'list' : fieldProps.variant ?? 'list'"
+      :variant="fieldProps.variant ?? 'list'"
       :orientation="fieldProps.orientation"
       :indicator="fieldProps.indicator"
       :disabled="disabled"

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

@@ -2,6 +2,11 @@ import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
 import type { FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
 export interface FormRadioProps {
+    /**
+     * `list` (the default) lines up bare radios, `card` frames each option on its own, and `table`
+     * joins the options into one framed list with a divider between rows and the selected row
+     * tinted, a good fit for a choice of roles with a description each.
+     */
     variant?: 'list' | 'card' | 'table';
     orientation?: 'horizontal' | 'vertical';
     indicator?: 'start' | 'end' | 'hidden';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.16.6",
+  "version": "1.16.7",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",