@xy-planning-network/trees 0.15.2-dev.0 → 0.15.3

package/src/lib-components/forms/RepeaterDisplay.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { computed, ref, useId, useTemplateRef, watch } from "vue"
+import { PlusCircleIcon, TrashIcon } from "@heroicons/vue/outline"
+import type { RepeaterRow } from "@/composables/useRepeater"
+import FormCell from "@/lib-components/forms/FormCell.vue"
+import InputError from "@/lib-components/forms/InputError.vue"
+import InputHelp from "@/lib-components/forms/InputHelp.vue"
+import InputLabel from "@/lib-components/forms/InputLabel.vue"
+
+const props = withDefaults(
+  defineProps<{
+    type: RepeaterRow["type"]
+    title?: string
+    help?: string
+    count: number
+    min?: number
+    max?: number
+    rows: RepeaterRow[]
+    addText?: string
+    addDisabled?: boolean
+    removeDisabled?: boolean
+  }>(),
+  {
+    title: "",
+    help: "",
+    min: undefined,
+    max: undefined,
+    addText: "Add",
+    addDisabled: false,
+    removeDisabled: false,
+  }
+)
+
+const emit = defineEmits<{
+  add: []
+  remove: [index: number]
+}>()
+
+const validationID = useId()
+const errorState = ref("")
+const errorInputRef = useTemplateRef<HTMLInputElement>("errorInput")
+
+const countError = computed(() => {
+  const belowMin = props.min !== undefined && props.count < props.min
+  const aboveMax = props.max !== undefined && props.count > props.max
+
+  if (props.min !== undefined && props.max !== undefined) {
+    return belowMin || aboveMax
+      ? `Please add between ${props.min} and ${props.max} items.`
+      : ""
+  }
+
+  if (belowMin) {
+    return `Please add at least ${props.min} items.`
+  }
+
+  if (aboveMax) {
+    return `Please limit this list to ${props.max} items.`
+  }
+
+  return ""
+})
+
+const setValidationError = () => {
+  errorState.value = countError.value
+  errorInputRef.value?.setCustomValidity(countError.value)
+}
+
+const isFullWidthField = (row: RepeaterRow) => {
+  const span = row.fields[0]?.input.span
+  return row.type === "field" && (!span || span === "full")
+}
+
+const isRemoveDisabled = (index: number) => {
+  const isModelRow = index < props.count
+  return props.removeDisabled || (isModelRow && props.count <= (props.min ?? 0))
+}
+
+watch(countError, (error) => {
+  if (!error) {
+    errorInputRef.value?.setCustomValidity("")
+    errorState.value = ""
+    return
+  }
+
+  if (errorState.value) {
+    errorState.value = error
+    errorInputRef.value?.setCustomValidity(error)
+  }
+})
+</script>
+
+<template>
+  <div
+    class="relative space-y-5"
+    role="group"
+    :aria-labelledby="title ? `${validationID}-label` : undefined"
+    :aria-describedby="help ? `${validationID}-help` : undefined"
+    :aria-errormessage="errorState ? `${validationID}-error` : undefined"
+  >
+    <div v-if="title || help || errorState">
+      <InputLabel :id="`${validationID}-label`" tag="div" :label="title" />
+      <InputHelp
+        :id="`${validationID}-help`"
+        :class="{ 'mt-1': title }"
+        :text="help"
+      />
+      <InputError
+        :id="`${validationID}-error`"
+        :class="{ 'mt-1': title || help }"
+        :text="errorState"
+      />
+    </div>
+
+    <div
+      v-for="(row, rowIndex) in rows"
+      :key="row.key"
+      class="relative"
+      :class="{
+        'rounded-xy border border-neutral-200 p-6': row.type === 'collection',
+      }"
+    >
+      <div
+        v-if="row.type === 'collection'"
+        class="mb-6 flex items-center justify-between gap-x-4"
+      >
+        <InputLabel v-if="row.title" tag="div" :label="row.title" />
+
+        <button
+          type="button"
+          class="xy-btn-neutral-sm ml-auto shrink-0 gap-x-1.5"
+          :disabled="isRemoveDisabled(rowIndex)"
+          :aria-label="`Remove item ${rowIndex + 1}`"
+          @click="emit('remove', rowIndex)"
+        >
+          <TrashIcon class="h-4 w-4 text-red-700" aria-hidden="true" />
+          <span>Remove</span>
+        </button>
+      </div>
+
+      <div
+        v-if="row.type === 'field'"
+        :class="
+          isFullWidthField(row)
+            ? 'flex items-center gap-x-3'
+            : 'grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 sm:grid-cols-12'
+        "
+      >
+        <template v-for="field in row.fields" :key="field.key">
+          <FormCell
+            v-if="field.input.show"
+            :class="{ 'min-w-0 flex-1': isFullWidthField(row) }"
+            :span="field.input.span || 'full'"
+            :start="field.input.start"
+          >
+            <component
+              :is="field.input.$component"
+              v-bind="field.input.$props"
+            />
+          </FormCell>
+        </template>
+
+        <button
+          type="button"
+          class="xy-btn-neutral-sm shrink-0 justify-self-start"
+          :disabled="isRemoveDisabled(rowIndex)"
+          :aria-label="`Remove item ${rowIndex + 1}`"
+          @click="emit('remove', rowIndex)"
+        >
+          <TrashIcon class="h-5 w-5 text-red-700" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div v-else>
+        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-12">
+          <template v-for="field in row.fields" :key="field.key">
+            <FormCell
+              v-if="field.input.show"
+              :span="field.input.span || 'full'"
+              :start="field.input.start"
+            >
+              <component
+                :is="field.input.$component"
+                v-bind="field.input.$props"
+              />
+            </FormCell>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="xy-btn-neutral-sm"
+      :disabled="addDisabled"
+      @click="emit('add')"
+    >
+      <PlusCircleIcon class="mr-1 h-5 w-5 text-xy-blue" aria-hidden="true" />
+      {{ addText }}
+    </button>
+
+    <!-- Participates in native form validation when the repeater is outside its limits. -->
+    <input
+      v-if="countError"
+      ref="errorInput"
+      required
+      class="sr-only top-1 left-1"
+      aria-hidden
+      :tabindex="errorState ? undefined : -1"
+      type="checkbox"
+      @invalid="setValidationError"
+    />
+  </div>
+</template>

package/src/lib-components/indicators/DismissableBadge.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { BadgeKind } from "@/composables/badge"
+import { XMarkIcon } from "@heroicons/vue/solid"
+
+withDefaults(defineProps<{ label: string; kind?: BadgeKind }>(), {
+  kind: BadgeKind.Neutral,
+})
+defineEmits<{
+  dismiss: [label: string]
+}>()
+</script>
+
+<template>
+  <span
+    :class="[kind, 'flex items-center gap-x-1 group cursor-pointer']"
+    @click="$emit('dismiss', label)"
+  >
+    <span class="flex-1 truncate">{{ label }}</span>
+    <button
+      type="button"
+      class="group relative -mr-1.5 h-3.5 w-3.5 rounded-sm group-hover:bg-gray-500/10 inline-flex items-center justify-center"
+    >
+      <span class="sr-only">Remove</span>
+      <XMarkIcon
+        class="h-3 w-3 stroke-gray-500/20 group-hover:stroke-gray-500/75"
+      />
+      <!--makes the clickable target larger-->
+      <span class="absolute -inset-2" />
+    </button>
+  </span>
+</template>

package/src/lib-components/lists/DataTable.vue

@@ -34,15 +34,13 @@ const {
   bulkSelectIndeterminate,
   bulkSelectOnChange,
   hasBulkActions,
-  hasSelection,
   publicMethods,
   selectable,
   selectedOnPage,
 } = useBulkActions(
   toRef(props, "tableData"),
   toRef(props, "tableBulkActions"),
-  selected,
-  { reconcileSelections: true }
+  selected
 )
 
 const { columns, hasActions, isEmptyCellValue, rows } = useTable(
@@ -99,7 +97,7 @@ defineExpose(publicMethods)
                 />
               </tr>
 
-              <tr v-if="hasBulkActions && hasSelection">
+              <tr v-if="hasBulkActions && selected.length > 0">
                 <td colspan="100%" class="px-6 py-2.5 border-t bg-neutral-50">
                   <div class="flex items-center gap-x-3">
                     <div class="text-sm shrink-0">

package/src/lib-components/lists/DynamicTable.vue

@@ -153,7 +153,6 @@ const {
   bulkSelectOnChange,
   clearSelections,
   hasBulkActions,
-  hasSelection,
   publicMethods,
   selectable,
   selectedOnPage,
@@ -345,7 +344,7 @@ loadAndRender()
             />
           </tr>
 
-          <tr v-if="hasBulkActions && hasSelection">
+          <tr v-if="hasBulkActions && selected.length > 0">
             <td colspan="100%" class="px-6 py-2.5 border-t bg-neutral-50">
               <div class="flex items-center gap-x-3">
                 <div class="text-sm shrink-0">

package/types/composables/forms.d.ts

@@ -41,6 +41,28 @@ export interface DateRangeInput extends Input {
 export interface DateTimeInput extends Input {
     modelValue?: string | null;
 }
+/**
+ * UploadedFile is the durable value stored in a form model after a file is
+ * uploaded.
+ *
+ * NOTE(spk): Add display metadata like file size, content type, or timestamps
+ * here as upload APIs need it. The ID is the authoritative value.
+ */
+export interface UploadedFile {
+    id: number;
+    filename: string;
+    url?: string;
+}
+export type FileUploadValue = UploadedFile | UploadedFile[] | null;
+export interface FileUploadInput extends Input {
+    action: string;
+    accept?: string[];
+    multiple?: boolean;
+    fileField?: string;
+    maxFileBytes?: number;
+    maxFiles?: number;
+    modelValue?: FileUploadValue;
+}
 export interface TextLikeInput extends Input {
     modelValue?: string | number | null;
     type: TextInputType;

package/types/composables/index.d.ts

@@ -18,4 +18,5 @@ import { useSpinnerDisplay, useAppSpinner } from "./useSpinner";
 export { useSpinnerDisplay, useAppSpinner };
 export * from "./badge";
 export * from "./useFieldsSchema";
+export * from "./useRepeater";
 export * from "./useInlineMarkdown";

package/types/composables/useBulkActions.d.ts

@@ -0,0 +1,25 @@
+import { type Ref } from "vue";
+import type { DynamicTableAPI, TableBulkActions, TableRowData } from "./table";
+interface UseBulkActionsOptions {
+    refresh?: () => void;
+    reset?: () => void;
+}
+export declare const useBulkActions: <T extends TableRowData>(tableData: Ref<T[]>, tableBulkActions: Ref<TableBulkActions<T>>, selected: Ref<number[]>, options?: UseBulkActionsOptions) => {
+    bulkActions: import("vue").ComputedRef<{
+        disabled: boolean | undefined;
+        onClick: (e?: Event) => void;
+        label: string;
+        icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
+        show?: boolean | undefined;
+    }[]>;
+    bulkSelectChecked: import("vue").ComputedRef<boolean>;
+    bulkSelectIndeterminate: import("vue").ComputedRef<boolean>;
+    bulkSelectOnChange: (e: Event) => void;
+    clearSelections: () => void;
+    hasBulkActions: import("vue").ComputedRef<boolean>;
+    publicMethods: DynamicTableAPI<T>;
+    selectable: import("vue").ComputedRef<any[]>;
+    selectedData: import("vue").ComputedRef<T[]>;
+    selectedOnPage: import("vue").ComputedRef<number[]>;
+};
+export {};

package/types/composables/useFieldsSchema.d.ts

@@ -1,16 +1,24 @@
 import { Component, ComputedRef, MaybeRefOrGetter, Ref } from "vue";
-import { type BooleanInput, type DateRangeInput, type Input, type MultiChoiceInput, type OptionsInput, type TextInputType, type TextLikeInput, type TextareaInput, type DateTimeInput, type NumericInput, type NumericInputType } from "../composables/forms";
+import { type BooleanInput, type DateRangeInput, type FileUploadInput, type Input, type MultiChoiceInput, type OptionsInput, type TextInputType, type TextLikeInput, type TextareaInput, type DateTimeInput, type NumericInput, type NumericInputType } from "../composables/forms";
+import { type DisplayRepeater, type Repeater } from "../composables/useRepeater";
 /**
  * FieldsSchema supports an Array of FieldSection(s)
- * or simply an Array of FieldsSchemaInput(s)
+ * or simply an Array of SchemaField(s)
  */
-export type FieldsSchema = Array<FieldSection> | Array<FieldsSchemaInput>;
+export type FieldsSchema = Array<FieldSection> | Array<SchemaField>;
 /**
  * FieldsSchemaInput type declares the supported input components in a FieldsSchema
  */
 export type FieldsSchemaInput = InputField<BooleanInput, "checkbox" | "toggle" | "yes-no-radio"> | InputField<MultiChoiceInput, "multi-checkbox"> | InputField<MultiChoiceInput & {
     customValues?: boolean;
-}, "multi-select"> | InputField<DateRangeInput, "date-range"> | InputField<DateTimeInput, "datetime"> | InputField<NumericInput, NumericInputType> | InputField<OptionsInput, "combobox" | "radio" | "radio-cards" | "select"> | InputField<TextareaInput, "textarea"> | InputField<TextLikeInput, Exclude<TextInputType, "number">>;
+}, "multi-select"> | InputField<DateRangeInput, "date-range"> | InputField<DateTimeInput, "datetime"> | InputField<FileUploadInput, "file-upload"> | InputField<NumericInput, NumericInputType> | InputField<OptionsInput, "combobox" | "radio" | "radio-cards" | "select"> | InputField<TextareaInput, "textarea"> | InputField<TextLikeInput, Exclude<TextInputType, "number">>;
+/** An input with the component properties needed for display. */
+export type DisplayInput = FieldsSchemaInput & {
+    $component: Component;
+    $props: Record<string, any>;
+    show: boolean;
+};
+export type SchemaField = FieldsSchemaInput | Repeater;
 /**
  * isTextInputType is a user defined type guard for
  * narrowing if a FieldsSchemaInput in a FieldsSchema is a text
@@ -44,10 +52,14 @@ export declare const isInputsOnlySchema: (s: FieldsSchema) => s is FieldsSchemaI
 export interface FieldSection {
     title?: string;
     description?: string;
-    fields: Array<FieldsSchemaInput>;
+    fields: Array<SchemaField>;
 }
+export type DisplayField = DisplayInput | DisplayRepeater;
+export type DisplaySection = Omit<FieldSection, "fields"> & {
+    fields: DisplayField[];
+};
 export type InputFieldType = (typeof inputFieldTypes)[number];
-export declare const inputFieldTypes: readonly ["date", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week", "money", "number", "raw-number", "checkbox", "combobox", "date-range", "datetime", "multi-checkbox", "multi-select", "radio", "radio-cards", "select", "textarea", "toggle", "yes-no-radio"];
+export declare const inputFieldTypes: readonly ["date", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week", "money", "number", "raw-number", "checkbox", "combobox", "date-range", "datetime", "file-upload", "multi-checkbox", "multi-select", "radio", "radio-cards", "select", "textarea", "toggle", "yes-no-radio"];
 /**
  * InputField is the type used to declare an option of FieldsSchemaInput
  * The Input interface is enforced against the InputFieldType to avoid applying unsupported
@@ -68,9 +80,11 @@ export type InputField<I extends Input, T extends InputFieldType> = I & {
     maxlength?: number;
     pattern?: string;
     required?: boolean;
-    $component?: Component;
-    $props?: Record<string, any>;
 };
+/**
+ * Narrows an unsectioned schema containing ordinary inputs and/or repeaters.
+ */
+export declare const isFieldsOnlySchema: (schema: FieldsSchema) => schema is SchemaField[];
 /**
  * disableSchemaFields is a utility function for disabling all input fields
  * in a FieldSchema.  Useful for rendering forms as read-only.
@@ -80,8 +94,9 @@ export type InputField<I extends Input, T extends InputFieldType> = I & {
  */
 export declare const disableSchemaFields: (schema: FieldsSchema) => FieldsSchema;
 /**
- * extractInputs is a utility function for extracting all of the FieldsSchemaInput
- * entries (nested or not) out of a FieldSchema.
+ * extractInputs is a utility function for extracting all directly bound
+ * FieldsSchemaInput entries out of a FieldSchema. Repeater templates are
+ * skipped because their names are incomplete or relative until rendered.
  *
  * @param schema FieldsSchema
  * @returns Array<FieldsSchemaInput>
@@ -96,5 +111,5 @@ export declare const extractInputs: (schema: FieldsSchema) => Array<FieldsSchema
  * @returns { fieldSections: ComputedRef<FieldSection[]> }
  */
 export declare const useFieldsSchema: (model: Ref<Record<string, any>>, schema: MaybeRefOrGetter<FieldsSchema>) => {
-    fieldSections: ComputedRef<FieldSection[]>;
+    fieldSections: ComputedRef<DisplaySection[]>;
 };

package/types/composables/useRepeater.d.ts

@@ -0,0 +1,116 @@
+import { type Component, type Ref } from "vue";
+import type { DisplayInput, FieldsSchemaInput } from "../composables/useFieldsSchema";
+/**
+ * Removes repeater-owned properties from every supported input type while
+ * keeping required properties such as `options`.
+ */
+type RepeaterSchemaInput<T, K extends PropertyKey> = T extends unknown ? Omit<T, Extract<keyof T, K>> : never;
+/**
+ * The input repeated by a field repeater. Its name and value come from the
+ * repeater definition.
+ */
+export type RepeaterInput = RepeaterSchemaInput<FieldsSchemaInput, "name" | "modelValue">;
+/**
+ * An input inside a collection row. Names are relative to the row, and initial
+ * values come from the repeater model.
+ */
+export type RepeaterCollectionInput = RepeaterSchemaInput<FieldsSchemaInput, "modelValue">;
+export type IndexPosition = "prefix" | "suffix";
+export interface RepeaterBase<T> {
+    type: "repeater";
+    name: string;
+    modelValue?: T[];
+    title?: string;
+    help?: string;
+    /**
+     * Adds an visible index to labels at the specified position
+     * e.g. Email 1, Email 2 | 1. Contact, 2. Contact
+     */
+    indexPosition?: IndexPosition;
+    /**
+     * Limits Add/Remove actions and validates the number of items. Existing model
+     * values are shown as-is, even when they fall outside these limits.
+     */
+    min?: number;
+    max?: number;
+    addText?: string;
+    disabled?: boolean;
+    span?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    start?: boolean;
+    show?: boolean;
+}
+/**
+ * Repeats one input and stores each input's value in the resulting array.
+ *
+ * @example
+ * {
+ *   type: "repeater",
+ *   name: "phone_numbers",
+ *   title: "Phone numbers",
+ *   help: "Add each number where you can be reached.",
+ *   indexPosition: "suffix",
+ *   addText: "Add phone number",
+ *   field: { type: "tel", label: "Phone number" }
+ * }
+ */
+export interface FieldRepeater extends RepeaterBase<unknown> {
+    field: RepeaterInput;
+    fields?: never;
+}
+/**
+ * Repeats a set of named inputs and stores each row as an object. Nested
+ * repeaters are not supported.
+ *
+ * @example
+ * {
+ *   type: "repeater",
+ *   name: "household_members",
+ *   title: "Household members",
+ *   itemTitle: "Household member",
+ *   help: "Include everyone who lives in your household.",
+ *   indexPosition: "prefix",
+ *   min: 1,
+ *   fields: [
+ *     { type: "text", name: "name", label: "Name" },
+ *     { type: "number", name: "age", label: "Age" }
+ *   ]
+ * }
+ */
+export interface CollectionRepeater extends RepeaterBase<Record<string, any>> {
+    field?: never;
+    itemTitle?: string;
+    fields: RepeaterCollectionInput[];
+}
+export type Repeater = FieldRepeater | CollectionRepeater;
+/** A repeater with the component properties needed for display. */
+export type DisplayRepeater = Repeater & {
+    $component: Component;
+    $props: Record<string, any>;
+    show: boolean;
+};
+/**
+ * Returns true when a schema field repeats one input.
+ */
+export declare const isFieldRepeater: (field: any) => field is FieldRepeater;
+/**
+ * Returns true when a schema field repeats a collection of inputs.
+ */
+export declare const isCollectionRepeater: (field: any) => field is CollectionRepeater;
+export interface RowField {
+    key: string;
+    input: DisplayInput;
+}
+export interface RepeaterRow {
+    key: string;
+    type: "field" | "collection";
+    title?: string;
+    fields: RowField[];
+}
+/**
+ * Builds repeater rows for display and handles adding, updating, and removing
+ * their values. Used by useFieldsSchema.
+ */
+export declare const useRepeater: (model: Ref<Record<string, any>>, toDisplayInput: (input: FieldsSchemaInput, onUpdate?: ($val: any) => void) => DisplayInput) => {
+    toDisplayRepeater: (repeater: Repeater) => DisplayRepeater;
+};
+export {};

package/types/composables/useTable.d.ts

@@ -1,6 +1,7 @@
 import { Ref } from "vue";
 import { TableColumns, TableRowsData, TableActions, DynamicTableAPI } from "./table";
 import { ActionItemButton, ActionItemLink } from "../entry";
+export declare const tableAPIStub: DynamicTableAPI;
 export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, cols: TableColumns | Ref<TableColumns>, acts: TableActions | Ref<TableActions>, exposedAPI?: DynamicTableAPI) => {
     columns: import("vue").ComputedRef<{
         alignment: string;

package/types/entry.d.ts

@@ -4,6 +4,7 @@ import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, Trail
 import { emailPattern, looseToNumber, numericInputTypes, phonePattern, urlPattern, textInputTypes, useInputField } from "./composables/forms";
 import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
 import { throttle as throttleFn } from "./helpers/Throttle";
+import bytes from "./helpers/Bytes";
 declare const install: Exclude<Plugin["install"], undefined>;
 export default install;
 export * from "./composables/index";
@@ -12,4 +13,4 @@ export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
 export type * from "./composables/forms";
 export { emailPattern, looseToNumber, phonePattern, urlPattern, numericInputTypes, textInputTypes, useInputField, };
-export { debounceFn, debounceLeading, throttleFn };
+export { bytes, debounceFn, debounceLeading, throttleFn };

package/types/helpers/Bytes.d.ts

@@ -0,0 +1,14 @@
+/**
+ * bytes converts and formats common file sizes.
+ *
+ * @example
+ * bytes.megabytes(5) // 5242880
+ * bytes.format(5242880) // "5.0 MB"
+ */
+declare const bytes: {
+    kilobytes: (value: number) => number;
+    megabytes: (value: number) => number;
+    gigabytes: (value: number) => number;
+    format: (value: number) => string;
+};
+export default bytes;

package/types/lib-components/forms/BaseInput.vue.d.ts

@@ -11,8 +11,8 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
 }>, {
     label: string;
-    modelValue: string | number | null;
     help: string;
+    modelValue: string | number | null;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
     input: HTMLInputElement;

package/types/lib-components/forms/Checkbox.vue.d.ts

@@ -9,8 +9,8 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: boolean | null | undefined) => any) | undefined;
 }>, {
     label: string;
-    modelValue: boolean | null;
     help: string;
+    modelValue: boolean | null;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/lib-components/forms/Combobox.vue.d.ts

@@ -9,8 +9,8 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
 }>, {
     label: string;
-    modelValue: string | number | null;
     help: string;
+    modelValue: string | number | null;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/lib-components/forms/DateRangePicker.vue.d.ts

@@ -83,11 +83,11 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
     label: string;
     actions: import("../../composables/forms").DateRangeAction[];
     position: "bottom" | "bottom-start" | "bottom-end";
+    help: string;
     modelValue: {
         minDate: number;
         maxDate: number;
     };
-    help: string;
     placeholder: string;
     maxRange: number;
     maxValue: Date | null;

package/types/lib-components/forms/DateTimeInput.vue.d.ts

@@ -9,8 +9,8 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
     label: string;
-    modelValue: string | null;
     help: string;
+    modelValue: string | null;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/lib-components/forms/FileUpload.vue.d.ts

@@ -0,0 +1,19 @@
+import { type FileUploadInput } from "../../composables/forms";
+type __VLS_Props = FileUploadInput;
+type __VLS_PublicProps = {
+    modelValue?: FileUploadInput["modelValue"];
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("../../composables/forms").FileUploadValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("../../composables/forms").FileUploadValue | undefined) => any) | undefined;
+}>, {
+    label: string;
+    help: string;
+    modelValue: import("../../composables/forms").FileUploadValue;
+    placeholder: string;
+    accept: string[];
+    multiple: boolean;
+    fileField: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;