nuxt-ui-tools 0.1.3 → 1.0.0

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

@@ -1,30 +1,58 @@
 <script setup>
 import UFileUpload from "@nuxt/ui/components/FileUpload.vue";
-import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormFilePreview from "../../components/utils/form-file-preview.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { isDefined } from "../../utils/predicate";
+import { resolveFormText } from "../../utils/text";
 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 { t } = useUiToolsLocale();
+const { fieldProps, form, controlProps, disabled, handleBlur } = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["dropzoneLabel", "dropzoneDescription"] }
 );
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    if (props.field.multiple) return Array.isArray(value) ? value.filter(isFile) : [];
+    if (fieldProps.value.multiple) {
+      return Array.isArray(value) ? value.filter(isFile) : [];
+    }
     return isFile(value) ? value : null;
   },
-  set: (value) => form.setValue(props.path, props.field.multiple ? normalizeFiles(value) : value ?? null)
+  set: (value) => form.setValue(props.path, fieldProps.value.multiple ? normalizeFiles(value) : value ?? null)
 });
+const openDialog = ref(null);
+const hasSingleFile = computed(() => {
+  const { value } = model;
+  return !fieldProps.value.multiple && value !== null && !Array.isArray(value);
+});
+const dropzoneUi = computed(() => ({
+  ...controlProps.value.ui,
+  base: hasSingleFile.value ? "hidden" : controlProps.value.ui?.base,
+  file: hasSingleFile.value ? "relative inset-auto p-0" : controlProps.value.ui?.file,
+  files: hasSingleFile.value ? "w-full" : "mb-2 gap-2"
+}));
+function captureOpen(open) {
+  openDialog.value = open;
+  return "";
+}
+function replaceFile() {
+  openDialog.value?.();
+}
 function normalizeFiles(value) {
-  if (Array.isArray(value)) return value;
+  if (Array.isArray(value)) {
+    return value;
+  }
   return value ? [value] : [];
 }
 function isFile(value) {
-  return typeof File !== "undefined" && value instanceof File;
+  return import.meta.client && isDefined(globalThis.File) && value instanceof globalThis.File;
 }
 </script>
 
@@ -34,10 +62,33 @@ function isFile(value) {
       v-model="model"
       v-bind="controlProps"
       class="w-full"
-      :accept="field.accept"
-      :multiple="field.multiple"
+      :accept="fieldProps.accept"
+      :multiple="fieldProps.multiple"
       :disabled="disabled"
+      :label="resolveFormText(fieldProps.dropzoneLabel) ?? t('form.fields.file.drop')"
+      :description="resolveFormText(fieldProps.dropzoneDescription)"
+      :icon="fieldProps.icon"
+      :variant="fieldProps.variant"
+      :layout="fieldProps.layout"
+      :dropzone="fieldProps.dropzone"
+      :preview="fieldProps.preview"
+      :interactive="fieldProps.interactive"
+      position="outside"
+      :ui="dropzoneUi"
       @change="handleBlur"
-    />
+    >
+      <template #files-top="{ open }">
+        <span hidden>{{ captureOpen(open) }}</span>
+      </template>
+      <template #file="{ file, index, removeFile }">
+        <FormFilePreview
+          :file="file"
+          :index="index"
+          :disabled="disabled"
+          :remove-file="removeFile"
+          :replace="fieldProps.multiple ? void 0 : replaceFile"
+        />
+      </template>
+    </UFileUpload>
   </FormFieldShell>
 </template>

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

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

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

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

@@ -1,10 +1,20 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
-import type { NullableValue } from '../../types/field-output-utils.js';
-export interface FormFileField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'file', File | readonly File[] | null, TContext, TDeps> {
+import type { FieldProps, NullableValue } from '../../types/field-output-utils.js';
+import type { FormText } from '../../types/utils.js';
+export interface FormFileProps {
     accept?: string;
     multiple?: boolean;
     directory?: boolean;
+    dropzoneLabel?: FormText;
+    dropzoneDescription?: FormText;
+    icon?: string | false;
+    variant?: 'area' | 'button';
+    layout?: 'list' | 'grid';
+    dropzone?: boolean;
+    preview?: boolean;
+    interactive?: boolean;
 }
-export type FileFieldOutput<TField> = TField extends {
+export type FormFileField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = FormStatefulFieldBase<'file', File | readonly File[] | null, TContext, TDeps, FormFileProps>;
+export type FileFieldOutput<TField> = FieldProps<TField> extends {
     multiple: true;
 } ? readonly File[] : File | NullableValue;

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

@@ -1,7 +1,7 @@
 <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 { useFormUi } from "../../composables/use-form-ui";
 import { mergeFormUiClass } from "../../utils/ui";
 defineProps({
@@ -17,7 +17,11 @@ const formUi = useFormUi();
     <UFieldGroup
       :size="formUi.controlSize.value"
       :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

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

@@ -1,12 +1,12 @@
 export declare const groupFieldKind: {
-    readonly type: "group";
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
     readonly state: "passthrough";
+    readonly type: "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/group/config.js

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

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

@@ -1,4 +1,4 @@
 import type { FormContainerFieldBase } from '../../types/field-base.js';
-export interface FormGroupField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'group', TContext, TDeps> {
+export interface FormGroupField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormContainerFieldBase<'group', TContext, TDeps> {
 }
 export type GroupFieldOutput<TChildren> = TChildren;

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

@@ -1,8 +1,13 @@
 <script setup>
-defineProps({
-  field: { type: Object, required: true },
+import { useFieldControl } from "../../composables/use-field-control";
+const props = defineProps({
+  field: { type: null, required: true },
   path: { type: Array, required: true }
 });
+useFieldControl(
+  () => props.field,
+  () => props.path
+);
 </script>
 
 <template>

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

@@ -1,6 +1,6 @@
 export declare const hiddenFieldKind: {
-    readonly type: "hidden";
     readonly state: "stateful";
-    readonly validation: true;
     readonly transform: true;
+    readonly type: "hidden";
+    readonly validation: true;
 };

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

@@ -1,7 +1,7 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const hiddenFieldKind = defineFormFieldKind({
-  type: "hidden",
   state: "stateful",
-  validation: true,
-  transform: true
+  transform: true,
+  type: "hidden",
+  validation: true
 });

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

@@ -1,5 +1,5 @@
+import type { FormValue } from '../../types/index.js';
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldDefaultValue, FallbackNever } from '../../types/field-output-utils.js';
-export interface FormHiddenField<TContext = {}, TDeps = {}> extends Pick<FormStatefulFieldBase<'hidden', unknown, TContext, TDeps>, 'key' | 'type' | 'default' | 'dependencies' | 'condition' | 'validation' | 'transform' | 'submit' | 'ignore'> {
-}
-export type HiddenFieldOutput<TField> = FallbackNever<FieldDefaultValue<TField>, unknown>;
+export type FormHiddenField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> = Pick<FormStatefulFieldBase<'hidden', FormValue, TContext, TDeps>, 'key' | 'type' | 'default' | 'dependencies' | 'condition' | 'validation' | 'transform' | 'submit' | 'ignore' | 'watch' | 'watchOptions' | 'onDependencyChange' | 'onRendered' | 'stateEffect'>;
+export type HiddenFieldOutput<TField> = FallbackNever<FieldDefaultValue<TField>, FormValue>;