nuxt-ui-tools 0.1.2 → 1.0.0

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

@@ -1,14 +1,16 @@
 <script setup>
 import UCheckboxGroup from "@nuxt/ui/components/CheckboxGroup.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 { formOptionKey } from "../../utils/options";
+import { isBoolean, isNumber, isString, isUndefined } from "../../utils/predicate";
+import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const { form, controlProps, disabled, handleBlur, options } = useFieldControl(
+const { fieldProps, form, controlProps, disabled, handleBlur, options } = useFieldControl(
   () => props.field,
   () => props.path
 );
@@ -24,15 +26,22 @@ const model = computed({
     props.path,
     value.flatMap((key) => {
       const optionValue = valueByKey.value.get(key);
-      return typeof optionValue === "undefined" ? [] : [optionValue];
+      return isUndefined(optionValue) ? [] : [optionValue];
     })
   )
 });
 const items = computed(
   () => options.items.value.map((item) => ({ ...item, value: formOptionKey(item.value) }))
 );
+const groupUi = computed(() => ({
+  ...controlProps.value.ui,
+  fieldset: mergeFormUiClass(
+    controlProps.value.ui?.fieldset,
+    fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
+  )
+}));
 function isOptionValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
@@ -45,9 +54,10 @@ function isOptionValue(value) {
       value-key="value"
       label-key="label"
       description-key="description"
-      :orientation="field.orientation"
-      :variant="field.variant === 'table' ? 'list' : field.variant ?? 'list'"
-      :indicator="field.indicator"
+      :orientation="fieldProps.orientation"
+      :ui="groupUi"
+      :variant="fieldProps.variant === 'table' ? 'list' : fieldProps.variant ?? 'list'"
+      :indicator="fieldProps.indicator"
       :disabled="disabled"
       @blur="handleBlur"
     />

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

@@ -1,17 +1,17 @@
 export declare const checkboxGroupFieldKind: {
-    readonly type: "checkbox-group";
-    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: "checkbox-group";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
+    readonly validation: true;
 };

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

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

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

@@ -1,10 +1,12 @@
 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 FormCheckboxGroupField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-group', readonly TValue[] | null, TContext, TDeps> {
-    options: FormOptionConfig<TOption, TContext, TDeps, readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, readonly TValue[] | null>;
+export interface FormCheckboxGroupProps {
     variant?: 'table' | 'list' | 'card';
     orientation?: 'horizontal' | 'vertical';
     indicator?: 'start' | 'end' | 'hidden';
 }
+export interface FormCheckboxGroupField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-group', readonly TValue[] | null, TContext, TDeps, FormCheckboxGroupProps> {
+    options: FormOptionConfig<TOption, TContext, TDeps, readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, readonly TValue[] | null>;
+}
 export type CheckboxGroupFieldOutput<TField> = readonly FieldOptionValue<TField>[] | NullableValue;

package/dist/runtime/form/fields/color-picker/component.vue

@@ -5,31 +5,45 @@ import UInput from "@nuxt/ui/components/Input.vue";
 import UPopover from "@nuxt/ui/components/Popover.vue";
 import { computed, ref } 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 { useFieldControl } from "../../composables/use-field-control";
-import { resolveFormText } from "../../utils/text";
+import { isString } from "../../utils/predicate";
 const props = defineProps({
-  field: { type: Object, required: true },
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
 const { t } = useUiToolsLocale();
-const { form, controlProps, disabled } = useFieldControl(
+const {
+  fieldProps,
+  form,
+  controlProps,
+  controlSize,
+  disabled,
+  interactionOwnerClass,
+  placeholder: controlPlaceholder
+} = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["display", "clearable"] }
 );
 const open = ref(false);
-const display = computed(() => props.field.display ?? "popover");
-const placeholder = computed(() => resolveFormText(props.field.placeholder) ?? "#000000");
+const display = computed(() => fieldProps.value.display ?? "popover");
+const placeholder = computed(
+  () => props.field.placeholder === void 0 ? "#000000" : controlPlaceholder.value
+);
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    return typeof value === "string" ? value : void 0;
+    return isString(value) ? value : void 0;
   },
   set: (value) => form.setValue(props.path, value ?? null)
 });
 function clearColor() {
   model.value = void 0;
 }
+function preventPopoverAutoFocus(event) {
+  event.preventDefault();
+}
 </script>
 
 <template>
@@ -39,13 +53,21 @@ function clearColor() {
       v-model="model"
       v-bind="controlProps"
       :disabled="disabled"
-      :format="field.format ?? 'hex'"
-      :throttle="field.throttle"
+      :format="fieldProps.format ?? 'hex'"
+      :throttle="fieldProps.throttle"
     />
     <UPopover
       v-else
       v-model:open="open"
-      :content="{ side: 'bottom', sideOffset: 8, collisionPadding: 12, avoidCollisions: true }"
+      :content="{
+  side: 'bottom',
+  align: 'start',
+  sideOffset: 8,
+  collisionPadding: 12,
+  avoidCollisions: true,
+  onOpenAutoFocus: preventPopoverAutoFocus
+}"
+      :ui="{ content: interactionOwnerClass }"
       :class="display === 'swatch' ? 'w-fit' : 'w-full'"
     >
       <template #anchor>
@@ -54,8 +76,10 @@ function clearColor() {
           type="button"
           color="neutral"
           variant="outline"
+          :size="controlSize"
           :disabled="disabled"
           :aria-label="t('form.fields.color.open')"
+          @click="open = true"
         >
           <span
             class="size-5 rounded-sm border border-default"
@@ -81,7 +105,7 @@ function clearColor() {
           <template #trailing>
             <div class="flex items-center gap-0.5">
               <UButton
-                v-if="field.clearable === true && model"
+                v-if="fieldProps.clearable === true && model"
                 icon="i-lucide-x"
                 color="neutral"
                 variant="ghost"
@@ -89,7 +113,7 @@ function clearColor() {
                 :disabled="disabled"
                 :aria-label="t('form.fields.color.clear')"
                 @mousedown.prevent
-                @click="clearColor"
+                @click.stop="clearColor"
               />
             </div>
           </template>
@@ -97,12 +121,13 @@ function clearColor() {
       </template>
 
       <template #content>
-        <div class="p-1">
+        <div class="p-2">
           <UColorPicker
             v-model="model"
+            :size="controlSize"
             :disabled="disabled"
-            :format="field.format ?? 'hex'"
-            :throttle="field.throttle"
+            :format="fieldProps.format ?? 'hex'"
+            :throttle="fieldProps.throttle"
           />
         </div>
       </template>

package/dist/runtime/form/fields/color-picker/config.d.ts

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

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

package/dist/runtime/form/fields/color-picker/types.d.ts

@@ -1,9 +1,10 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormColorPickerField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'color-picker', string | null, TContext, TDeps> {
+export interface FormColorPickerProps {
     display?: 'popover' | 'inline' | 'swatch';
     format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
     throttle?: number;
     clearable?: boolean;
 }
+export type FormColorPickerField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'color-picker', string | null, TContext, TDeps, FormColorPickerProps>;
 export type ColorPickerFieldOutput = string | NullableValue;

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

@@ -1,5 +1,5 @@
 <script setup>
-import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
 defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true },

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

@@ -1,8 +1,8 @@
 export declare const columnFieldKind: {
-    readonly type: "column";
-    readonly state: "passthrough";
     readonly layout: {
-        readonly item: true;
         readonly container: true;
+        readonly item: true;
     };
+    readonly state: "passthrough";
+    readonly type: "column";
 };

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

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

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

@@ -1,3 +1,3 @@
 import type { FormContainerFieldBase } from '../../types/field-base.js';
-export interface FormColumnField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'column', TContext, TDeps> {
+export interface FormColumnField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormContainerFieldBase<'column', TContext, TDeps> {
 }

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

@@ -1,6 +1,6 @@
 <script setup>
 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";
 const props = defineProps({
   field: { type: Object, required: true },

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

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

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

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

@@ -1,10 +1,11 @@
 import type { Component } from 'vue';
+import type { FormValue } from '../../types/index.js';
 import type { FormFieldCallback } from '../../types/callbacks.js';
 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 = {}, TDeps = {}> extends FormStatefulFieldBase<'custom-component', unknown, TContext, TDeps> {
+export interface FormCustomComponentField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatefulFieldBase<'custom-component', FormValue, TContext, TDeps> {
     component?: Component;
     render?: FormFieldCallback<FormRenderable, TContext, TDeps>;
 }
-export type CustomComponentFieldOutput<TField> = FallbackNever<FieldDefaultValue<TField>, unknown>;
+export type CustomComponentFieldOutput<TField> = FallbackNever<FieldDefaultValue<TField>, FormValue>;

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

@@ -1,4 +1,4 @@
-import type { FormDateField } from '../../types/index.js';
+import type { FormDateField } from './types.js';
 type __VLS_Props = {
     field: FormDateField;
     path: readonly string[];