@omnitend/dashboard-for-laravel 0.21.0 → 0.23.0

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

@@ -1,8 +1,9 @@
 <!--
   @component
-  Top navigation bar for the dashboard shell: menu toggle, page title, centred
-  search, page-level actions, and the user menu. Usually rendered by
-  `DXDashboard`, which forwards these slots with a `navbar-` prefix.
+  Top navigation bar for the dashboard shell: menu toggle, page title, search
+  (aligned per `searchAlign`, left by default), page-level actions, and the
+  user menu. Usually rendered by `DXDashboard`, which forwards these slots
+  with a `navbar-` prefix.
 -->
 <template>
   <header class="dashboard-navbar border-bottom">
@@ -39,25 +40,35 @@
 
         <div
           v-if="$slots.search"
-          class="dashboard-navbar__search d-flex justify-content-center"
+          class="dashboard-navbar__search d-flex"
+          :class="searchAlignClass"
         >
-          <!-- @slot Search input or component. Centred in the bar on wider screens; drops to its own full-width row below the `md` breakpoint. -->
+          <!-- @slot Search input or component. Aligned per `searchAlign` within its region (inline in the bar from `md` up; its own full-width row below). -->
           <slot name="search" />
         </div>
 
-        <div class="dashboard-navbar__end d-flex align-items-center gap-3">
-          <!-- Page-level primary actions, right-aligned next to the user menu -->
-          <div
-            v-if="$slots.actions"
-            class="dashboard-navbar__actions d-flex align-items-center gap-2"
-          >
-            <!--
-              @slot Page-level primary actions (e.g. a Create button), right-aligned next to the user menu.
-              @binding {string} pageTitle The current page title, for context.
-            -->
-            <slot name="actions" :pageTitle="pageTitle" />
-          </div>
+        <!-- Page-level primary actions: right-aligned next to the user menu
+             from `md` up; their own wrappable full-width row below (#93),
+             or hidden below `md` when `actionsOnMobile` is "hide". -->
+        <div
+          v-if="$slots.actions"
+          class="dashboard-navbar__actions align-items-center gap-2"
+          :class="actionsDisplayClass"
+        >
+          <!--
+            @slot Page-level primary actions (e.g. a Create button). Right-aligned next to the user menu from `md` up; below, wraps to its own full-width row or is hidden entirely per `actionsOnMobile`.
+            @binding {string} pageTitle The current page title, for context.
+          -->
+          <slot name="actions" :pageTitle="pageTitle" />
+        </div>
 
+        <!-- Only render the user-menu cluster when it has content: an empty
+             flex item would still cost a bar gap, pushing actions off the
+             right edge in guest (user-less) layouts. -->
+        <div
+          v-if="$slots['user-menu'] || user"
+          class="dashboard-navbar__end d-flex align-items-center gap-3"
+        >
           <!--
             @slot Replaces the entire user menu (the default avatar dropdown).
             @binding {object} user The signed-in user.
@@ -68,17 +79,17 @@
               variant="link"
               class="text-dark"
               menu-class="dropdown-menu-end"
+              toggle-class="dashboard-navbar__user-menu-toggle"
               no-caret
             >
               <template #button-content>
                 <!--
-                  @slot Custom user avatar/icon in the dropdown trigger.
+                  @slot Custom user avatar/icon in the dropdown trigger. To decorate the default avatar (e.g. add a notification dot) rather than replace it, render `DXUserAvatar` — the same component used here, so the styling comes with it.
                   @binding {string} initial The first letter of the user's name.
+                  @binding {object} user The signed-in user.
                 -->
-                <slot name="user-icon" :initial="getUserInitial(user)">
-                  <div class="user-avatar">
-                    {{ getUserInitial(user) }}
-                  </div>
+                <slot name="user-icon" :initial="getUserInitial(user)" :user="user">
+                  <DXUserAvatar :user="user" />
                 </slot>
               </template>
 
@@ -96,11 +107,14 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import DContainer from "../base/DContainer.vue";
 import DButton from "../base/DButton.vue";
 import DDropdown from "../base/DDropdown.vue";
+import DXUserAvatar from "./DXUserAvatar.vue";
+import type { NavbarActionsOnMobile, NavbarSearchAlign } from "../../types/navigation";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     /** The signed-in user shown in the avatar dropdown. `null` hides the menu. */
     user?: {
@@ -110,13 +124,53 @@ withDefaults(
     } | null;
     /** Page title shown at the left of the navbar (hidden below the `md` breakpoint). */
     pageTitle?: string;
+    /**
+     * Horizontal alignment of the search slot content within its region
+     * (`"start"` = flush left, `"center"` = centred). Applies at every size:
+     * the region sits inline after the title from `md` up, and is its own
+     * full-width row below.
+     */
+    searchAlign?: NavbarSearchAlign;
+    /**
+     * What the actions slot does below the `md` breakpoint: `"wrap"` moves it
+     * to its own full-width row (the bar grows), `"hide"` removes it entirely
+     * (for apps that relocate page actions into the page on phones).
+     */
+    actionsOnMobile?: NavbarActionsOnMobile;
   }>(),
   {
     user: null,
     pageTitle: "",
+    searchAlign: "start",
+    actionsOnMobile: "wrap",
   },
 );
 
+// Explicit map (not string interpolation) so an out-of-union value at runtime
+// falls back to a valid class instead of a silent Bootstrap no-op, and the
+// full class names stay greppable.
+const SEARCH_ALIGN_CLASSES: Record<NavbarSearchAlign, string> = {
+  start: "justify-content-start",
+  center: "justify-content-center",
+};
+
+const searchAlignClass = computed(
+  () => SEARCH_ALIGN_CLASSES[props.searchAlign] ?? SEARCH_ALIGN_CLASSES.start,
+);
+
+// "hide" swaps d-flex for d-none/d-md-flex on the WRAPPER — hiding only the
+// slot content would leave a zero-height full-width row still costing a flex
+// row-gap on phones. Explicit map + fallback, same rationale as
+// SEARCH_ALIGN_CLASSES above.
+const ACTIONS_DISPLAY_CLASSES: Record<NavbarActionsOnMobile, string> = {
+  wrap: "d-flex",
+  hide: "d-none d-md-flex",
+};
+
+const actionsDisplayClass = computed(
+  () => ACTIONS_DISPLAY_CLASSES[props.actionsOnMobile] ?? ACTIONS_DISPLAY_CLASSES.wrap,
+);
+
 defineEmits<{
   /** Emitted when the hamburger menu button is clicked. */
   toggleSidebar: [];
@@ -140,45 +194,56 @@ const getUserInitial = (user: { name: string } | null) => {
   padding: 0.5rem 0;
 }
 
-/* Push the user-menu / actions cluster to the right. */
+/* Push the user-menu cluster to the right. (The actions region carries its
+   own auto margin from `md` up — see the sibling rule below.) */
 .dashboard-navbar__end {
   margin-left: auto;
 }
 
 /*
- * Mobile-first: the search sits on its own full-width row below the toggle /
- * title / user-menu row (order after both, flex-basis 100% forces the wrap).
- * From `md` up it moves inline between the title and the user menu and grows to
- * fill the middle, centring its content.
+ * Mobile-first: the actions and the search each sit on their own full-width
+ * row below the toggle / title / user-menu row (flex-basis 100% forces the
+ * wrap; the bar and the sticky header grow to contain them — #93). The
+ * actions row itself wraps so a wide button group stacks instead of
+ * overflowing the viewport.
+ * From `md` up everything moves inline: search between the title and the
+ * actions (grows to fill the middle; `searchAlign` controls where its content
+ * sits), actions right-aligned next to the user menu. The actions' order 2
+ * holds at every size — only search and end change order across the
+ * breakpoint.
  */
+.dashboard-navbar__actions {
+  order: 2;
+  flex: 0 0 100%;
+  flex-wrap: wrap;
+}
+
 .dashboard-navbar__search {
   order: 3;
   flex: 0 0 100%;
-  width: 100%;
 }
 
 @media (min-width: 768px) {
   .dashboard-navbar__search {
     order: 1;
     flex: 1 1 auto;
-    width: auto;
+  }
+
+  .dashboard-navbar__actions {
+    flex: 0 1 auto;
+    flex-wrap: nowrap;
+    margin-left: auto;
   }
 
   .dashboard-navbar__end {
-    order: 2;
+    order: 3;
   }
-}
 
-.user-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--bs-dark);
-  color: var(--bs-white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 14px;
+  /* When the actions region is present it carries the push-right auto margin;
+     zero the user-menu cluster's so the two sit adjacent instead of having
+     the free space split between them. */
+  .dashboard-navbar__actions ~ .dashboard-navbar__end {
+    margin-left: 0;
+  }
 }
 </style>

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

@@ -61,8 +61,8 @@
         <DFormCheckbox
             v-else
             v-model="fieldValue"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="resolvedLabel" class="visually-hidden" />
         </DFormCheckbox>
@@ -97,8 +97,8 @@
         <DFormCheckbox
             v-else
             v-model="fieldValue"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
         </DFormCheckbox>
@@ -159,8 +159,8 @@
         <DXSwitch
             v-else
             v-model="switchModel"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel
                 :label="switchText"
@@ -201,8 +201,8 @@
         <DXSwitch
             v-else
             v-model="switchModel"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         >
             <DXFieldLabel :label="switchText" :info="resolvedInfo" />
         </DXSwitch>
@@ -306,8 +306,8 @@
             v-model="fieldValue"
             :field="field"
             :model="model"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- Textarea. Error clearing happens in the v-model setter. -->
@@ -319,8 +319,9 @@
             :rows="field.rows || 3"
             :state="fieldState"
             :disabled="isDisabled"
-            :readonly="isReadonly"
-            v-bind="field.inputProps"
+            :readonly="isReadonly || isPlaintext"
+            :plaintext="isPlaintext"
+            v-bind="inputPropsWithGuards"
         />
 
         <!-- Select (sync or async options) -->
@@ -330,8 +331,8 @@
             :required="field.required"
             :options="resolvedOptions"
             :state="fieldState"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- Radio group -->
@@ -341,8 +342,8 @@
             :options="resolvedOptions"
             :required="field.required"
             :state="fieldState"
-            :disabled="isDisabled || isReadonly"
-            v-bind="field.inputProps"
+            :disabled="isDisabled || isReadonly || isPlaintext"
+            v-bind="controlPropsWithGuards"
         />
 
         <!-- File / image upload -->
@@ -352,8 +353,8 @@
                 :accept="field.accept || (field.type === 'image' ? 'image/*' : undefined)"
                 :required="field.required"
                 :state="fieldState"
-                :disabled="isDisabled || isReadonly"
-                v-bind="field.inputProps"
+                :disabled="isDisabled || isReadonly || isPlaintext"
+                v-bind="controlPropsWithGuards"
                 @change="handleFileChange"
             />
             <img
@@ -384,8 +385,9 @@
                 :max="field.max"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
-                v-bind="field.inputProps"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
+                v-bind="inputPropsWithGuards"
                 @input="handleCurrencyInput"
                 @focus="handleCurrencyFocus"
                 @blur="handleCurrencyBlur"
@@ -401,8 +403,9 @@
                 :max="field.max"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
-                v-bind="field.inputProps"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
+                v-bind="inputPropsWithGuards"
             />
 
             <template v-if="field.type === 'percentage'" #append>
@@ -422,9 +425,10 @@
                 :placeholder="field.placeholder"
                 :state="fieldState"
                 :disabled="isDisabled"
-                :readonly="isReadonly"
+                :readonly="isReadonly || isPlaintext"
+                :plaintext="isPlaintext"
                 autocomplete="off"
-                v-bind="field.inputProps"
+                v-bind="inputPropsWithGuards"
             />
             <datalist :id="datalistId">
                 <option
@@ -437,6 +441,31 @@
             </datalist>
         </template>
 
+        <!-- Password with a reveal toggle (the default for `type: "password"`).
+             Typing a long password blind is the one place the eye really earns
+             its keep, so it's opt-out (`revealable: false`) rather than opt-in. -->
+        <DInputGroup v-else-if="isRevealablePassword">
+            <DFormInput
+                v-model="textFieldModel"
+                :required="field.required"
+                :placeholder="field.placeholder"
+                :state="fieldState"
+                :disabled="isDisabled"
+                :readonly="isReadonly"
+                v-bind="passwordInputProps"
+            />
+            <template #append>
+                <DButton
+                    variant="outline-secondary"
+                    :icon="passwordRevealed ? 'eye-slash' : 'eye'"
+                    :aria-label="passwordRevealed ? 'Hide password' : 'Show password'"
+                    :aria-pressed="passwordRevealed"
+                    :disabled="isDisabled"
+                    @click="passwordRevealed = !passwordRevealed"
+                />
+            </template>
+        </DInputGroup>
+
         <!-- Text-based inputs (text/email/password/number/url/tel/date/time/datetime) -->
         <DFormInput
             v-else
@@ -449,8 +478,9 @@
             :max="field.max"
             :state="fieldState"
             :disabled="isDisabled"
-            :readonly="isReadonly"
-            v-bind="field.inputProps"
+            :readonly="isReadonly || isPlaintext"
+            :plaintext="isPlaintext"
+            v-bind="inputPropsWithGuards"
         />
 
         <!-- Validation error -->
@@ -505,6 +535,7 @@ import DXSwitch from "./DXSwitch.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
+import DButton from "../base/DButton.vue";
 import DXFieldLabel from "./DXFieldLabel.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { FieldDefinition, FieldOption, FieldType, LabelCols } from "../../types";
@@ -880,6 +911,71 @@ const isDisabled = computed(() => {
 
 const isReadonly = computed(() => resolveMaybe(props.field.readonly) ?? false);
 
+// Display-only: the value as static text rather than a control. bvn's
+// `plaintext` only swaps the class, so pair it with `readonly` at every call
+// site — otherwise the "static text" is still editable.
+const isPlaintext = computed(() => resolveMaybe(props.field.plaintext) ?? false);
+
+const passwordRevealed = ref(false);
+
+const isRevealablePassword = computed(
+    () =>
+        props.field.type === "password" &&
+        (props.field.revealable ?? true) &&
+        !isPlaintext.value,
+);
+
+// DXTable reuses ONE DXField instance per field key across modal opens (the
+// v-for is keyed on `field.key`, which is stable across rows) and swaps in a
+// fresh form per record. Without this, revealing row A's password leaves row
+// B's — and the create form's — showing in clear text.
+watch(
+    () => [props.form, props.field.key],
+    () => {
+        passwordRevealed.value = false;
+    },
+);
+
+/*
+ * `inputProps` is an escape hatch that deliberately wins over the field's own
+ * bindings — it is spread last. But it must not win over the guarantees the
+ * field makes, or those guarantees are only documentation: a `plaintext` field
+ * that `inputProps: { readonly: false }` re-opens for editing isn't read-only,
+ * and a password whose `type` `inputProps` sets to "text" is unmasked under a
+ * toggle still reading "Show password". So the guards are re-applied ON TOP of
+ * inputProps. Everything else in inputProps still passes through, and a field
+ * that isn't plaintext/readonly is untouched — `inputProps: { readonly: true }`
+ * still works as before.
+ */
+
+// For controls with a native readonly state (the text family + textarea).
+const inputPropsWithGuards = computed(() => {
+    const merged: Record<string, any> = { ...props.field.inputProps };
+    if (isPlaintext.value) {
+        merged.plaintext = true;
+        merged.readonly = true;
+    } else if (isReadonly.value) {
+        merged.readonly = true;
+    }
+    return merged;
+});
+
+// For controls with NO native readonly state (select/radio/checkbox/switch/
+// file/component), where read-only is expressed as `disabled`.
+const controlPropsWithGuards = computed(() => {
+    const merged: Record<string, any> = { ...props.field.inputProps };
+    if (isDisabled.value || isReadonly.value || isPlaintext.value) {
+        merged.disabled = true;
+    }
+    return merged;
+});
+
+// The reveal toggle owns the password input's `type`.
+const passwordInputProps = computed(() => ({
+    ...inputPropsWithGuards.value,
+    type: passwordRevealed.value ? "text" : "password",
+}));
+
 const inputType = computed<string>(() => {
     const type: FieldType = props.field.type;
     if (type === "datetime") return "datetime-local";