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

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.15.1-dev-1",
+  "version": "0.15.2-dev.0",
   "description": "",
   "license": "MIT",
-  "repository": "github:xy-planning-network/trees",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xy-planning-network/trees.git"
+  },
   "files": [
     "config/*",
     "dist/*",

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useTable } from "@/composables/useTable"
+import { useBulkActions } from "@/composables/useBulkActions"
 import type {
   TableActions,
+  TableBulkActions,
   TableColumns,
   TableRowsData,
 } from "@/composables/table"
@@ -11,19 +13,46 @@ import { toRef } from "vue"
 const props = withDefaults(
   defineProps<{
     tableActions?: TableActions<any>
+    tableBulkActions?: TableBulkActions<any>
     tableColumns: TableColumns<any>
     tableData: TableRowsData
   }>(),
   {
     tableActions: () => ({ type: "dropdown", actions: [] }),
+    tableBulkActions: () => ({ actions: [] }),
   }
 )
 
+const selected = defineModel<number[]>("selected", {
+  required: false,
+  default: [],
+})
+
+const {
+  bulkActions,
+  bulkSelectChecked,
+  bulkSelectIndeterminate,
+  bulkSelectOnChange,
+  hasBulkActions,
+  hasSelection,
+  publicMethods,
+  selectable,
+  selectedOnPage,
+} = useBulkActions(
+  toRef(props, "tableData"),
+  toRef(props, "tableBulkActions"),
+  selected,
+  { reconcileSelections: true }
+)
+
 const { columns, hasActions, isEmptyCellValue, rows } = useTable(
   toRef(props, "tableData"),
   toRef(props, "tableColumns"),
-  toRef(props, "tableActions")
+  toRef(props, "tableActions"),
+  publicMethods
 )
+
+defineExpose(publicMethods)
 </script>
 <template>
   <div class="flex flex-col">
@@ -35,6 +64,25 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-100">
               <tr>
+                <th
+                  v-if="hasBulkActions"
+                  scope="col"
+                  class="pl-6 w-4 leading-none"
+                >
+                  <input
+                    :class="[
+                      'h-4 w-4 rounded cursor-pointer',
+                      'disabled:bg-gray-100 disabled:border-gray-200 disabled:cursor-not-allowed disabled:opacity-100',
+                      'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
+                      'border-gray-300 focus:ring-xy-blue-500',
+                    ]"
+                    :checked="bulkSelectChecked"
+                    :indeterminate="bulkSelectIndeterminate"
+                    type="checkbox"
+                    @change="bulkSelectOnChange"
+                  />
+                </th>
+
                 <th
                   v-for="(col, idx) in columns"
                   :key="idx"
@@ -50,6 +98,23 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
                   class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
                 />
               </tr>
+
+              <tr v-if="hasBulkActions && hasSelection">
+                <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">
+                      Selected
+                      <span class="font-medium">{{
+                        selectedOnPage.length
+                      }}</span>
+                      of
+                      <span class="font-medium">{{ selectable.length }}</span>
+                    </div>
+
+                    <ActionsButtonGroup :actions="bulkActions" />
+                  </div>
+                </td>
+              </tr>
             </thead>
             <tbody class="bg-white">
               <tr
@@ -57,6 +122,21 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
                 :key="rowIdx"
                 class="even:bg-gray-50"
               >
+                <td v-if="hasBulkActions" class="pl-6 w-4 leading-none">
+                  <input
+                    v-model="selected"
+                    :class="[
+                      'h-4 w-4 rounded cursor-pointer',
+                      'disabled:bg-gray-100 disabled:border-gray-200 disabled:cursor-not-allowed disabled:opacity-100',
+                      'checked:disabled:bg-xy-blue checked:disabled:border-xy-blue checked:disabled:opacity-50',
+                      'border-gray-300 focus:ring-xy-blue-500',
+                    ]"
+                    :disabled="!selectable.includes(row.rowData?.id)"
+                    type="checkbox"
+                    :value="row.rowData?.id"
+                  />
+                </td>
+
                 <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
                   <component
                     :is="'td'"
@@ -89,7 +169,11 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
 
               <tr v-if="rows.length === 0">
                 <td
-                  :colspan="columns.length + (hasActions ? 1 : 0)"
+                  :colspan="
+                    columns.length +
+                    (hasActions ? 1 : 0) +
+                    (hasBulkActions ? 1 : 0)
+                  "
                   class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
                 >
                   No items were found!

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

@@ -8,7 +8,6 @@ import {
 import DateRangePicker from "../forms/DateRangePicker.vue"
 import BaseAPI from "../../api/base"
 import type {
-  DynamicTableAPI,
   DynamicTableOptions,
   TableActions,
   TableBulkActions,
@@ -19,6 +18,7 @@ import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
 import { DateRange, DateRangeProps } from "@/composables/date"
 import { useTable } from "@/composables/useTable"
+import { useBulkActions } from "@/composables/useBulkActions"
 
 const props = withDefaults(
   defineProps<{
@@ -141,100 +141,26 @@ const hasContent = computed((): boolean => {
   return rows.value.length ? true : false
 })
 
-const clearSelections = () => {
-  selected.value = []
-}
-
 const selected = defineModel<number[]>("selected", {
   required: false,
   default: [],
 })
 
-const selectedData = computed((): TableRowData[] => {
-  return tableData.value.filter((data) => {
-    return selected.value.includes(data?.id)
-  })
-})
-
-const selectedOnPage = computed(() => {
-  return selected.value.filter((id) => {
-    return selectable.value.includes(id)
-  })
-})
-
-const bulkActions = computed(() => {
-  return props.tableBulkActions.actions
-    .filter((action) => {
-      return action.show ?? true
-    })
-    .map((action) => {
-      return {
-        ...action,
-        disabled: selected.value.length === 0 || action.disabled,
-        onClick: (e?: Event) =>
-          action.onClick.apply(undefined, [
-            selected.value,
-            selectedData.value,
-            publicMethods,
-            e,
-          ]),
-      }
-    })
-})
-
-const hasBulkActions = computed(() => bulkActions.value.length > 0)
-
-const selectable = computed(() => {
-  return tableData.value
-    .filter((row) => {
-      // NOTE(spk): table data must have an "id" key for bulk actions.
-      if (row.id === undefined) {
-        return false
-      }
-
-      if (props.tableBulkActions.isSelectable === undefined) {
-        return true
-      }
-
-      if (props.tableBulkActions.isSelectable(row)) {
-        return true
-      }
-
-      return false
-    })
-    .map((d) => d["id"])
-})
-
-const bulkSelectChecked = computed(
-  () =>
-    selectedOnPage.value.length > 0 &&
-    selectedOnPage.value.length === selectable.value.length
-)
-
-const bulkSelectIndeterminate = computed(
-  () =>
-    selectedOnPage.value.length > 0 &&
-    selectedOnPage.value.length < selectable.value.length
-)
-
-const bulkSelectOnChange = (e: Event) => {
-  const isChecked = (e.target as HTMLInputElement).checked
-
-  // set all records on current page to selection
-  if (isChecked) {
-    selected.value = selectable.value.map((id) => id)
-    return
-  }
-
-  clearSelections()
-}
-
-const publicMethods: DynamicTableAPI = {
-  clearSelection: clearSelections,
-  selectedData: selectedData,
+const {
+  bulkActions,
+  bulkSelectChecked,
+  bulkSelectIndeterminate,
+  bulkSelectOnChange,
+  clearSelections,
+  hasBulkActions,
+  hasSelection,
+  publicMethods,
+  selectable,
+  selectedOnPage,
+} = useBulkActions(tableData, toRef(props, "tableBulkActions"), selected, {
   refresh: loadAndRender,
   reset: reloadTable,
-}
+})
 
 const { columns, hasActions, isEmptyCellValue, rows } = useTable(
   tableData,
@@ -419,7 +345,7 @@ loadAndRender()
             />
           </tr>
 
-          <tr v-if="hasBulkActions && selected.length > 0">
+          <tr v-if="hasBulkActions && hasSelection">
             <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">
@@ -489,7 +415,9 @@ loadAndRender()
 
           <tr v-if="!hasContent">
             <td
-              :colspan="columns.length + (hasActions ? 1 : 0)"
+              :colspan="
+                columns.length + (hasActions ? 1 : 0) + (hasBulkActions ? 1 : 0)
+              "
               class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
             >
               No items were found!

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/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,6 @@ 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 "./useInlineMarkdown";

package/types/composables/useFieldsSchema.d.ts

@@ -0,0 +1,100 @@
+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";
+/**
+ * FieldsSchema supports an Array of FieldSection(s)
+ * or simply an Array of FieldsSchemaInput(s)
+ */
+export type FieldsSchema = Array<FieldSection> | Array<FieldsSchemaInput>;
+/**
+ * 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">>;
+/**
+ * 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<FieldsSchemaInput>;
+}
+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"];
+/**
+ * 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;
+    $component?: Component;
+    $props?: Record<string, any>;
+};
+/**
+ * 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 of the FieldsSchemaInput
+ * entries (nested or not) out of a FieldSchema.
+ *
+ * @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<FieldSection[]>;
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Safely gets a deeply nested value using dot notation
+ */
+export declare const get: <TDefault = unknown, TReturn = any>(obj: any, path: string, defaultValue?: TDefault) => TReturn | TDefault;
+/**
+ * Safely sets a deeply nested value using dot notation (blocks Prototype Pollution)
+ */
+export declare const set: <T>(obj: T, path: string, value: any) => T;

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/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;
+    modelValue: string | number | null;
+    help: string;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -34,10 +34,10 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
         } | undefined) => any;
     }, import("vue").PublicProps, {
         actions: import("../../composables/forms").DateRangeAction[];
-        borderless: boolean;
         maxRange: number;
         maxValue: Date | null;
         minValue: Date;
+        borderless: boolean;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -63,10 +63,10 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
         } | undefined) => any) | undefined;
     }>, {}, {}, {}, {}, {
         actions: import("../../composables/forms").DateRangeAction[];
-        borderless: boolean;
         maxRange: number;
         maxValue: Date | null;
         minValue: Date;
+        borderless: boolean;
     }> | null>>;
     input: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    start?: boolean;
+    span: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    start: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,30 @@
+import type { ReqMethod } from "../../api/client";
+import { type FieldsSchema } from "../../composables/useFieldsSchema";
+type __VLS_Props = {
+    action: string;
+    btnText?: string;
+    btnDisabled?: boolean;
+    columns: 1 | 2;
+    flashError?: boolean;
+    flashSuccess?: boolean;
+    method: ReqMethod;
+    schema: FieldsSchema;
+};
+type __VLS_PublicProps = {
+    modelValue?: Record<string, any>;
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: any) => any;
+    success: (result: any) => any;
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: ((error: any) => any) | undefined;
+    onSuccess?: ((result: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {
+    btnText: string;
+    btnDisabled: boolean;
+    flashError: boolean;
+    flashSuccess: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    as?: string;
+    btnText?: string;
+    btnDisabled?: boolean;
+    columns: 1 | 2;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string;
+    btnText: string;
+    btnDisabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    description?: string;
+    title?: string;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,14 @@
+import { type FieldsSchema } from "../../composables/useFieldsSchema";
+type __VLS_Props = {
+    columns: 1 | 2;
+    schema: FieldsSchema;
+};
+type __VLS_PublicProps = {
+    modelValue: Record<string, any>;
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;