@xy-planning-network/trees 0.15.2 → 0.15.4

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/types/composables/badge.d.ts

@@ -0,0 +1,8 @@
+export declare enum BadgeKind {
+    Neutral = "xy-badge",
+    Blue = "xy-badge-blue",
+    Green = "xy-badge-green",
+    Yellow = "xy-badge-yellow",
+    Red = "xy-badge-red"
+}
+export declare const isBadgeKind: (kind: string) => kind is BadgeKind;

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/http.d.ts

@@ -0,0 +1,8 @@
+export declare const HTTP_BAD_REQUEST = 400;
+export declare const HTTP_CONFLICT = 409;
+export declare const HTTP_NOT_FOUND = 404;
+export declare const HTTP_NOT_IMPLEMENTED = 501;
+export declare const HTTP_UNPROCESSABLE_ENTITY = 422;
+export declare const HTTP_TOO_MANY_REQUESTS = 429;
+export declare const HTTP_INTERNAL_SERVER_ERROR = 500;
+export declare const statusMessages: Record<number, string>;

package/types/composables/index.d.ts

@@ -16,3 +16,7 @@ import { isActionItemButton, isActionItemLink, useUrlSearchParams, useTabHistory
 export { isActionItemButton, isActionItemLink, useUrlSearchParams, useTabHistory, };
 import { useSpinnerDisplay, useAppSpinner } from "./useSpinner";
 export { useSpinnerDisplay, useAppSpinner };
+export * from "./badge";
+export * from "./useFieldsSchema";
+export * from "./useRepeater";
+export * from "./useInlineMarkdown";

package/types/composables/useFieldsSchema.d.ts

@@ -0,0 +1,115 @@
+import { Component, ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+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 SchemaField(s)
+ */
+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<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
+ * like type, ex: input type="text | date | url..."
+ *
+ * @param type string
+ * @returns boolean
+ */
+export declare const isTextInputType: (type: string) => type is "number" | "url" | "search" | "time" | "text" | "date" | "email" | "month" | "password" | "tel" | "week";
+/**
+ * isNumericInputType is a user defined type guard for
+ * narrowing if a FieldsSchemaInput in a FieldsSchema is a numeric
+ * like type, ex: input type="money | number..."
+ *
+ * @param type string
+ * @returns boolean
+ */
+export declare const isNumericInputType: (type: string) => type is "number" | "money" | "raw-number";
+/**
+ * isInputsOnlySchema is a user defined type guard for narrowing that
+ * a FieldsSchema is only made up of FieldsSchemaInputs
+ *
+ * @param s FieldsSchema
+ * @returns boolean
+ */
+export declare const isInputsOnlySchema: (s: FieldsSchema) => s is FieldsSchemaInput[];
+/**
+ * A FieldSection maps a grouping of inputs in a FieldsSchema
+ * to a FormSection in the FormGrid component.
+ */
+export interface FieldSection {
+    title?: string;
+    description?: string;
+    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", "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
+ * modelValues on the input as well as ensure required props are available for the InputFieldType.
+ */
+export type InputField<I extends Input, T extends InputFieldType> = I & {
+    type: T;
+    name: string;
+    columns?: 2 | 3;
+    span?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    start?: boolean;
+    show?: boolean;
+    disabled?: boolean;
+    autocomplete?: string;
+    min?: number | string;
+    max?: number | string;
+    minlength?: number;
+    maxlength?: number;
+    pattern?: string;
+    required?: boolean;
+};
+/**
+ * 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.
+ *
+ * @param schema FieldsSchema
+ * @returns FieldsSchema
+ */
+export declare const disableSchemaFields: (schema: FieldsSchema) => FieldsSchema;
+/**
+ * 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>
+ */
+export declare const extractInputs: (schema: FieldsSchema) => Array<FieldsSchemaInput>;
+/**
+ * useFieldsSchema computes the FieldSections of a FieldSchema and tracks
+ * input values on the model passed as the first argument.  This encapsulates
+ * the necessary logic for maintaining input reactivity for use in form
+ * @param model Ref<Record<string, any>
+ * @param schema MaybeRefOrGetter<FieldsSchema>
+ * @returns { fieldSections: ComputedRef<FieldSection[]> }
+ */
+export declare const useFieldsSchema: (model: Ref<Record<string, any>>, schema: MaybeRefOrGetter<FieldsSchema>) => {
+    fieldSections: ComputedRef<DisplaySection[]>;
+};

package/types/composables/useInlineMarkdown.d.ts

@@ -0,0 +1,20 @@
+import { type VNode, type VNodeArrayChildren, type MaybeRefOrGetter, type ComputedRef } from "vue";
+export type MarkdownNode = VNode | string | VNodeArrayChildren;
+export interface InlineMarkdownConfig {
+    graphs: boolean;
+}
+export type UseInlineMarkdown = ComputedRef<(() => null) | (() => MarkdownNode | MarkdownNode[])>;
+/**
+ * Creates a Vue render function for a subset of Markdown.
+ *
+ * `marked` is used only to tokenize the source. We parse those
+ * tokens and map supported syntax to VNodes instead of rendering and
+ * injecting HTML - this allows Vue to continue to do the sanitizing.
+ *
+ * Unsupported tokens, including raw HTML, remain plain text and
+ * are escaped by Vue.
+ *
+ * Enable `graphs` to preserve paragraph wrappers; otherwise
+ * all contents are rendered inline.
+ */
+export declare function useInlineMarkdown(markdown: MaybeRefOrGetter<string>, conf?: InlineMarkdownConfig): UseInlineMarkdown;

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/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/helpers/GetProperty.d.ts

@@ -0,0 +1,21 @@
+/**
+ * getProperty reads a nested property from an object using a dot-separated path.
+ * Numeric path segments can be used to access array elements, such as
+ * `items.0.name`.
+ *
+ * `defaultValue` is returned when the path cannot be fully traversed or when the
+ * resolved value is `undefined`.
+ *
+ * Type safety is intentionally limited because `path` is a dynamic string.
+ * TypeScript does not verify that the path exists on `O` or that its value is
+ * `T`; supplying `T` is a caller assertion and does not perform runtime
+ * validation. Omit `T` to receive `any | undefined` when no default is
+ * provided.
+ *
+ * @example
+ * getProperty<User, string>(user, "profile.name") // string | undefined
+ * getProperty<User, string>(user, "profile.name", "Unknown") // string
+ */
+declare function getProperty<O extends Record<string, any> = Record<string, any>, T = any>(obj: O, path: string): T | undefined;
+declare function getProperty<O extends Record<string, any> = Record<string, any>, T = any>(obj: O, path: string, defaultValue: T): T;
+export default getProperty;

package/types/helpers/SetProperty.d.ts

@@ -0,0 +1,18 @@
+/**
+ * setProperty assigns a value on an object using a dot-separated path. It
+ * returns a new object without mutating `obj`. Each container along the path
+ * is cloned, while containers outside the path retain their references.
+ *
+ * Numeric path segments create arrays when a container is missing, so
+ * `items.0.name` creates an object within an `items` array. Other missing
+ * containers are created as objects.
+ *
+ * Paths containing `__proto__`, `constructor`, or `prototype` are ignored to
+ * avoid modifying object prototypes.
+ *
+ * @example
+ * setProperty(user, "profile.name", "Ada")
+ * setProperty(form, "items.0.name", "First item")
+ */
+declare function setProperty<O extends Record<string, any>>(obj: O, path: string, value: unknown): O;
+export default setProperty;

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

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