@omnitend/dashboard-for-laravel 0.4.14 → 0.6.0

package/docs/public/llms.txt

@@ -2,7 +2,7 @@
 
 > Vue 3 dashboard components for Laravel with Bootstrap Vue Next
 >
-> A dual-package library (NPM + Composer) providing 61 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 62 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -19,7 +19,7 @@
 - [Theming](/guide/theming): Customize appearance with CSS variables
 - [TypeScript](/guide/typescript): TypeScript types and best practices
 
-## Base Components (55 components)
+## Base Components (54 components)
 
 Lightweight type-safe wrappers around Bootstrap Vue Next components providing API stability and consistent theming.
 
@@ -33,8 +33,6 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DButtonGroup](/components/base/dbuttongroup): Bootstrap Vue Next ButtonGroup wrapper
 - [DButtonToolbar](/components/base/dbuttontoolbar): Bootstrap Vue Next ButtonToolbar wrapper
 - [DCard](/components/base/dcard): Bootstrap Vue Next Card wrapper
-- [DCarousel](/components/base/dcarousel): Bootstrap Vue Next Carousel wrapper
-- [DCarouselSlide](/components/base/dcarouselslide): Bootstrap Vue Next CarouselSlide wrapper
 - [DCol](/components/base/dcol): Bootstrap Vue Next Col wrapper
 - [DCollapse](/components/base/dcollapse): Bootstrap Vue Next Collapse wrapper
 - [DContainer](/components/base/dcontainer): Bootstrap Vue Next Container wrapper
@@ -47,6 +45,7 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DFormInput](/components/base/dforminput): Bootstrap Vue Next FormInput wrapper
 - [DFormInvalidFeedback](/components/base/dforminvalidfeedback): Bootstrap Vue Next FormInvalidFeedback wrapper
 - [DFormRadio](/components/base/dformradio): Bootstrap Vue Next FormRadio wrapper
+- [DFormRadioGroup](/components/base/dformradiogroup): Bootstrap Vue Next FormRadioGroup wrapper
 - [DFormSelect](/components/base/dformselect): Bootstrap Vue Next FormSelect wrapper
 - [DFormSpinbutton](/components/base/dformspinbutton): Bootstrap Vue Next FormSpinbutton wrapper
 - [DFormTags](/components/base/dformtags): Bootstrap Vue Next FormTags wrapper
@@ -79,15 +78,17 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
 - [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
 
-## Extended Components (6 components)
+## Extended Components (8 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
-- [DXBasicForm](/components/extended/dxbasicform): Auto-generated forms from field definitions
+- [DXBasicForm](/components/extended/dxbasicform): Extended dashboard component
 - [DXDashboard](/components/extended/dxdashboard): Complete dashboard layout with sidebar and navbar
 - [DXDashboardNavbar](/components/extended/dxdashboardnavbar): Top navbar with user dropdown
 - [DXDashboardSidebar](/components/extended/dxdashboardsidebar): Collapsible sidebar with navigation
-- [DXForm](/components/extended/dxform): Advanced form wrapper with defineForm integration
+- [DXField](/components/extended/dxfield): Single-field renderer for any field type with value/span/info/hint slots
+- [DXForm](/components/extended/dxform): Form renderer driven by field definitions, with optional tabs, conditional fields, per-field slots, async options, nested repeaters, and auto error-tab switching
+- [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
 
 ## Composables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.4.14",
+  "version": "0.6.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -47,7 +47,7 @@
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.0",
     "axios": "^1.6.0",
-    "vue": "^3.4.0"
+    "vue": "^3.5.13"
   },
   "peerDependenciesMeta": {
     "axios": {
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.22.0",
-    "bootstrap-vue-next": "^0.40.8",
+    "bootstrap-vue-next": "^0.45.6",
     "highlight.js": "^11.11.1",
     "pluralize": "^8.0.0",
     "rehype-autolink-headings": "^7.1.0",

package/resources/js/components/base/DButton.vue

@@ -33,15 +33,14 @@ interface Props {
   variant?: ButtonVariant | LinkVariant | null;
 
   /**
-   * The size of the button
-   * @default 'md'
+   * The size of the button. Omit for the default (medium) size —
+   * bootstrap-vue-next 0.45 removed the no-op `'md'` value from `Size`.
    */
   size?: Size;
 }
 
 withDefaults(defineProps<Props>(), {
   variant: 'primary',
-  size: 'md',
 });
 </script>
 

package/resources/js/components/base/{DCarousel.vue → DFormRadioGroup.vue}

@@ -1,10 +1,10 @@
 /**
  * @component
- * Type-safe wrapper around Bootstrap Vue Next BCarousel component.
- * Slideshow component for cycling through images or content.
+ * Type-safe wrapper around Bootstrap Vue Next BFormRadioGroup component.
+ * Renders a group of radio inputs from an `options` array or slot content.
  */
 <script setup lang="ts">
-import { BCarousel } from "bootstrap-vue-next";
+import { BFormRadioGroup } from "bootstrap-vue-next";
 
 defineOptions({
   inheritAttrs: false,
@@ -12,10 +12,10 @@ defineOptions({
 </script>
 
 <template>
-  <BCarousel v-bind="$attrs">
+  <BFormRadioGroup v-bind="$attrs">
     <!-- Dynamically pass through all named slots with their props -->
     <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
       <slot :name="name" v-bind="slotProps" />
     </template>
-  </BCarousel>
+  </BFormRadioGroup>
 </template>

package/resources/js/components/base/DTable.vue

@@ -2,6 +2,7 @@
   <BTable
     ref="bTableRef"
     v-bind="$attrs"
+    :fields="shieldedFields"
     @update:sort-by="handleSortByUpdate"
     @update:current-page="handleCurrentPageUpdate"
     @update:busy="handleBusyUpdate"
@@ -15,19 +16,49 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { BTable } from "bootstrap-vue-next";
 
 defineOptions({
   inheritAttrs: false,
 });
 
+const props = defineProps<{
+  /**
+   * Column definitions. Declared as a prop (rather than passed through
+   * `$attrs`) so we can shield the field `formatter` signature across
+   * bootstrap-vue-next versions.
+   */
+  fields?: any[];
+}>();
+
 // Define emits to forward BTable events
 const emit = defineEmits(['update:sortBy', 'update:currentPage', 'update:busy', 'sorted', 'rowClicked']);
 
 // Reference to BTable for exposing methods
 const bTableRef = ref<any>(null);
 
+/**
+ * bootstrap-vue-next 0.43 changed the field `formatter` to receive a single
+ * object `{ value, key, item }`. This library has always documented the
+ * positional `(value, key, item)` signature, so wrap each formatter to keep
+ * existing consumer formatters working across the upgrade.
+ */
+const shieldedFields = computed(() => {
+  if (!props.fields) return undefined;
+  return props.fields.map((field) => {
+    if (field && typeof field.formatter === 'function') {
+      const original = field.formatter;
+      return {
+        ...field,
+        formatter: (obj: { value: unknown; key: string; item: any }) =>
+          original(obj?.value, obj?.key, obj?.item),
+      };
+    }
+    return field;
+  });
+});
+
 // Event handlers to forward BTable events
 const handleSortByUpdate = (val: any) => {
   emit('update:sortBy', val);
@@ -45,8 +76,13 @@ const handleSorted = (val: any) => {
   emit('sorted', val);
 };
 
-const handleRowClicked = (item: any, index: number, event: MouseEvent) => {
-  emit('rowClicked', item, index, event);
+/**
+ * bootstrap-vue-next 0.43 changed row events to a single object payload
+ * `{ item, index, event }`. Re-emit in the historic `(item, index, event)`
+ * shape so consumers (incl. DXTable) keep their handler signatures.
+ */
+const handleRowClicked = (obj: any) => {
+  emit('rowClicked', obj?.item, obj?.index, obj?.event);
 };
 
 // Expose refresh method from BTable

package/resources/js/components/base/DToaster.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { BToastOrchestrator } from "bootstrap-vue-next";
+// bootstrap-vue-next 0.44 removed BToastOrchestrator; the toast/modal/popover
+// renderer is now the unified BOrchestrator (also included inside BApp).
+import { BOrchestrator } from "bootstrap-vue-next";
 
 defineOptions({
   inheritAttrs: false,
@@ -7,10 +9,10 @@ defineOptions({
 </script>
 
 <template>
-  <BToastOrchestrator v-bind="$attrs">
+  <BOrchestrator v-bind="$attrs">
     <!-- Dynamically pass through all named slots with their props -->
     <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
       <slot :name="name" v-bind="slotProps" />
     </template>
-  </BToastOrchestrator>
+  </BOrchestrator>
 </template>

package/resources/js/components/extended/DXBasicForm.vue

@@ -1,189 +1,40 @@
-<template>
-    <BForm @submit.prevent="handleSubmit">
-        <!-- Form-level error message -->
-        <DAlert
-            v-if="form.shouldShowMessage"
-            :model-value="form.shouldShowMessage"
-            variant="danger"
-            class="mb-3"
-        >
-            {{ form.message }}
-        </DAlert>
-
-        <!-- Render each field -->
-        <template v-for="field in visibleFields" :key="field.key">
-            <!-- Custom slot for this field -->
-            <slot :name="`field-${field.key}`" :field="field" :form="form">
-                <!-- Default field rendering -->
-                <DFormGroup
-                    :label="field.label"
-                    :label-for="field.key"
-                    :class="field.class || 'mb-3'"
-                >
-                    <!-- Text-based inputs -->
-                    <DFormInput
-                        v-if="isTextInput(field.type)"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :type="field.type"
-                        :required="field.required"
-                        :placeholder="field.placeholder"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @input="form.clearError(field.key)"
-                    />
-
-                    <!-- Textarea -->
-                    <DFormTextarea
-                        v-else-if="field.type === 'textarea'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :required="field.required"
-                        :placeholder="field.placeholder"
-                        :rows="field.rows || 3"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @input="form.clearError(field.key)"
-                    />
-
-                    <!-- Select -->
-                    <DFormSelect
-                        v-else-if="field.type === 'select'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :required="field.required"
-                        :options="field.options"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @change="form.clearError(field.key)"
-                    />
-
-                    <!-- Checkbox -->
-                    <DFormCheckbox
-                        v-else-if="field.type === 'checkbox'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        v-bind="field.inputProps"
-                    >
-                        {{ field.label }}
-                    </DFormCheckbox>
-
-                    <!-- Radio group -->
-                    <BFormRadioGroup
-                        v-else-if="field.type === 'radio'"
-                        :id="field.key"
-                        v-model="form.data[field.key]"
-                        :options="field.options"
-                        :required="field.required"
-                        :state="form.getState(field.key)"
-                        v-bind="field.inputProps"
-                        @change="form.clearError(field.key)"
-                    />
-
-                    <!-- Validation error -->
-                    <DFormInvalidFeedback v-if="form.hasError(field.key)">
-                        {{ form.getError(field.key) }}
-                    </DFormInvalidFeedback>
-
-                    <!-- Help text -->
-                    <DFormText v-if="field.help">
-                        {{ field.help }}
-                    </DFormText>
-                </DFormGroup>
-            </slot>
-        </template>
-
-        <!-- Submit button -->
-        <DButton
-            v-if="showSubmit"
-            type="submit"
-            variant="primary"
-            :disabled="form.processing"
-            class="w-100"
-        >
-            <span v-if="form.processing">{{ submitLoadingText }}</span>
-            <span v-else>{{ submitText }}</span>
-        </DButton>
-
-        <!-- Footer slot -->
-        <slot name="footer"></slot>
-    </BForm>
-</template>
+<!--
+  DXBasicForm — deprecated alias of DXForm.
+
+  A flat form is just DXForm without a `tabs` prop. This wrapper forwards
+  everything to DXForm and logs a one-time deprecation warning so existing
+  callers keep working while they migrate. Remove in a future major.
+-->
+<script lang="ts">
+// Module scope: warn at most once per session, not once per instance.
+let hasWarned = false;
+</script>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { BForm, BFormRadioGroup } from "bootstrap-vue-next";
-import DAlert from "../base/DAlert.vue";
-import DFormGroup from "../base/DFormGroup.vue";
-import DFormInput from "../base/DFormInput.vue";
-import DFormTextarea from "../base/DFormTextarea.vue";
-import DFormSelect from "../base/DFormSelect.vue";
-import DFormCheckbox from "../base/DFormCheckbox.vue";
-import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
-import DFormText from "../base/DFormText.vue";
-import DButton from "../base/DButton.vue";
-import type { UseFormReturn } from "../../composables/useForm";
-import type { FieldDefinition, FieldType } from "../../types";
-
-interface Props {
-    /** Form instance from useForm composable */
-    form: UseFormReturn<any>;
-
-    /** Field definitions */
-    fields: FieldDefinition[];
-
-    /** Submit button text */
-    submitText?: string;
-
-    /** Submit button loading text */
-    submitLoadingText?: string;
-
-    /** Show submit button */
-    showSubmit?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    submitText: "Submit",
-    submitLoadingText: "Submitting...",
-    showSubmit: true,
-});
-
-/**
- * Fields whose `show()` predicate evaluates to true (or omits the
- * predicate entirely). Computed so the form re-renders when reactive
- * sources used inside `show` change.
- */
-const visibleFields = computed(() => {
-    return props.fields.filter((field) =>
-        field.show ? field.show() : true,
+import { onMounted } from "vue";
+import DXForm from "./DXForm.vue";
+
+defineOptions({ inheritAttrs: false });
+
+onMounted(() => {
+    if (hasWarned) return;
+    hasWarned = true;
+    console.warn(
+        "[dashboard-for-laravel] DXBasicForm is deprecated and will be " +
+            "removed in a future major version. Use DXForm instead " +
+            "(a flat form is DXForm without a `tabs` prop).",
     );
 });
-
-const emit = defineEmits<{
-    submit: [];
-}>();
-
-/**
- * Check if field type is a text-based input
- */
-const isTextInput = (type: FieldType): boolean => {
-    return [
-        "text",
-        "email",
-        "password",
-        "number",
-        "url",
-        "tel",
-        "date",
-        "datetime-local",
-        "time",
-    ].includes(type);
-};
-
-/**
- * Handle form submission
- */
-const handleSubmit = () => {
-    emit("submit");
-};
 </script>
+
+<template>
+    <!-- `form`/`fields`/etc. arrive via $attrs (inheritAttrs: false) and are
+         forwarded to DXForm. Cast because the type-checker can't see the
+         required `form` prop inside the untyped attrs spread. -->
+    <DXForm v-bind="($attrs as any)">
+        <!-- Forward all slots (#value(<key>), #footer, etc.) to DXForm. -->
+        <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps" />
+        </template>
+    </DXForm>
+</template>