@omnitend/dashboard-for-laravel 0.7.1 → 0.9.0

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

@@ -29,7 +29,7 @@
             <DTab
                 v-for="(tab, index) in visibleTabs"
                 :key="tab.key"
-                :title="tab.label || tab.key"
+                :title="resolveTabLabel(tab)"
                 :lazy="tab.lazy"
                 :active="index === 0"
             >
@@ -207,6 +207,13 @@ function resolvePredicate(
     return typeof when === "function" ? when(model.value) : when;
 }
 
+/** Resolve a tab's (possibly function-valued) label against the live model. */
+function resolveTabLabel(tab: FormTab): string {
+    const label =
+        typeof tab.label === "function" ? tab.label(model.value) : tab.label;
+    return label || tab.key;
+}
+
 function isFieldVisible(field: FieldDefinition): boolean {
     const whenOk = resolvePredicate(field.when, true);
     const showOk = field.show ? field.show() : true;

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

@@ -124,6 +124,7 @@ const rowKey = (index: number): string | number => {
 function defaultForType(type: FieldType): any {
     switch (type) {
         case "checkbox":
+        case "switch":
             return false;
         case "number":
         case "currency":

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

@@ -529,7 +529,7 @@
                             :disabled="editForm?.processing"
                             @click="handleDelete"
                         >
-                            {{ editForm?.processing ? 'Deleting...' : 'Delete' }}
+                            {{ pendingAction === 'delete' ? 'Deleting...' : 'Delete' }}
                         </DButton>
                     </div>
                     <div class="d-flex gap-2">
@@ -542,10 +542,10 @@
                             @click="handleEditSave"
                         >
                             <template v-if="isCreateMode">
-                                {{ editForm?.processing ? 'Creating...' : 'Create' }}
+                                {{ pendingAction === 'save' ? 'Creating...' : 'Create' }}
                             </template>
                             <template v-else>
-                                {{ editForm?.processing ? 'Saving...' : 'Save Changes' }}
+                                {{ pendingAction === 'save' ? 'Saving...' : 'Save Changes' }}
                             </template>
                         </DButton>
                     </div>
@@ -621,8 +621,12 @@ export interface EditTab {
     /** Unique key for this tab */
     key: string;
 
-    /** Display label (optional, auto-derived from key if omitted) */
-    label?: string;
+    /**
+     * Display label (optional, auto-derived from key if omitted). May be a
+     * function of the model (the edited row merged with the live form data),
+     * e.g. `label: (item) => \`Products (${item.products_count ?? 0})\``.
+     */
+    label?: string | ((item: any) => string);
 
     /** Field keys to display in this tab (from editFields) */
     fieldKeys: string[];
@@ -1380,6 +1384,11 @@ const editForm = ref<any>(null);
 const activeTabIndex = ref(0);
 const isCreateMode = ref(false);
 
+// Which modal action is in flight, so the Save and Delete buttons show their
+// own loading label independently. `editForm.processing` is shared by every
+// request the form makes, so it can't tell Save from Delete on its own.
+const pendingAction = ref<'save' | 'delete' | null>(null);
+
 // Toast (may not be available in test environment)
 let createToast: ((obj: any) => any) | undefined;
 try {
@@ -1521,6 +1530,15 @@ const handleCreateNew = () => {
 const handleEditSave = async () => {
     if (!editForm.value) return;
 
+    pendingAction.value = 'save';
+    try {
+        await performSave();
+    } finally {
+        pendingAction.value = null;
+    }
+};
+
+const performSave = async () => {
     // Create mode: POST to createUrl
     if (isCreateMode.value && props.createUrl) {
         try {
@@ -1648,6 +1666,7 @@ const handleDelete = async () => {
 
     if (!confirmed) return;
 
+    pendingAction.value = 'delete';
     try {
         const itemId = (selectedItem.value as any).id;
         const url = props.deleteUrl.replace(':id', itemId);
@@ -1687,6 +1706,8 @@ const handleDelete = async () => {
         });
     } catch (error) {
         emit('deleteError', selectedItem.value as T, error);
+    } finally {
+        pendingAction.value = null;
     }
 };
 

package/resources/js/composables/defineForm.ts

@@ -30,6 +30,7 @@ export interface DefineFormReturn<TData extends Record<string, any>> {
 function getDefaultValueForType(type: FieldType): any {
     switch (type) {
         case "checkbox":
+        case "switch":
             return false;
         case "number":
         case "currency":

package/resources/js/index.ts

@@ -8,6 +8,7 @@ export * from 'bootstrap-vue-next';
 export { default as DXDashboard } from "./components/extended/DXDashboard.vue";
 export { default as DXForm } from "./components/extended/DXForm.vue";
 export { default as DXField } from "./components/extended/DXField.vue";
+export { default as DXFieldLabel } from "./components/extended/DXFieldLabel.vue";
 export { default as DXRepeater } from "./components/extended/DXRepeater.vue";
 /**
  * @deprecated Use `DXForm`. `DXBasicForm` is a thin wrapper around `DXForm`

package/resources/js/types/index.ts

@@ -11,6 +11,8 @@ import type { Component } from "vue";
  * - `image` / `file` — file input (`image` additionally shows a preview).
  * - `component` — escape hatch that renders `field.component`.
  * - `repeater` — nested, repeatable sub-form driven by `field.fields`.
+ * - `switch` — a toggle checkbox with contextual on/off text and an
+ *   on-state (filled) style; see `textWhenTrue` / `textWhenFalse`.
  */
 export type FieldType =
     | "text"
@@ -28,6 +30,7 @@ export type FieldType =
     | "textarea"
     | "select"
     | "checkbox"
+    | "switch"
     | "radio"
     | "image"
     | "file"
@@ -105,6 +108,15 @@ export interface FieldDefinition {
     /** Symbol shown for `currency` fields (default: the locale's, "£"). */
     currencySymbol?: string;
 
+    /**
+     * For `percentage` fields: treat the underlying model value as a 0–1
+     * fraction while showing/editing it as a 0–100 percentage. The model keeps
+     * the fraction (e.g. `0.2`), the input shows `20`. Off by default (the value
+     * is taken as a whole percentage). Use for fields stored as ratios (VAT
+     * rates, discounts, …).
+     */
+    asFraction?: boolean;
+
     /** `accept` attribute for `image`/`file` inputs (e.g. "image/*"). */
     accept?: string;
 
@@ -117,6 +129,26 @@ export interface FieldDefinition {
      */
     hint?: MaybeFn<string>;
 
+    /**
+     * Longer help text revealed in a popover from a small info affordance
+     * on the field's label (on hover/focus). Complements `hint` (which is
+     * always-visible muted text below the control). May be a function of
+     * the model. For rich content, use the `#info` slot instead.
+     */
+    info?: MaybeFn<string>;
+
+    /**
+     * For `switch` fields: contextual label shown when the toggle is on.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenTrue?: MaybeFn<string>;
+
+    /**
+     * For `switch` fields: contextual label shown when the toggle is off.
+     * Falls back to `label` when omitted. May be a function of the model.
+     */
+    textWhenFalse?: MaybeFn<string>;
+
     /** CSS class for the form group */
     class?: string;
 
@@ -191,8 +223,13 @@ export interface FormTab {
     /** Unique key for this tab */
     key: string;
 
-    /** Display label (optional, defaults to the key) */
-    label?: string;
+    /**
+     * Display label (optional, defaults to the key). May be a function of the
+     * form model — the live form data merged with any `context` (e.g. the row
+     * DXTable is editing) — so a tab title can reflect the record, such as
+     * `label: (model) => \`Products (${model.products_count ?? 0})\``.
+     */
+    label?: MaybeFn<string>;
 
     /** Field keys (from the form's fields) to render in this tab */
     fieldKeys: string[];

package/resources/js/types/navigation.ts

@@ -11,7 +11,13 @@ export interface NavigationItem {
 export interface NavigationGroup {
   label?: string;
   items: NavigationItem[];
+  /**
+   * Per-group override for the sidebar's `collapsibleGroups` behaviour.
+   * Set to `false` to keep a group permanently expanded (no toggle header)
+   * even when the sidebar has collapsible groups enabled. Defaults to `true`.
+   */
   collapsible?: boolean;
+  /** Reserved for a future explicit initial-open hint; not currently wired. */
   collapsed?: boolean;
   visible?: boolean;
 }