@omnitend/dashboard-for-laravel 0.7.1 → 0.9.0

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

@@ -22,52 +22,96 @@
 
     <nav class="sidebar-nav p-3">
       <template v-for="(group, groupIndex) in navigation" :key="groupIndex">
-        <div v-if="group.visible !== false" class="nav-group mb-3">
+        <div
+          v-if="group.visible !== false"
+          class="nav-group mb-3"
+          :class="{ 'nav-group-open': isGroupExpanded(groupIndex, group) }"
+        >
+          <!-- Collapsible group header (accordion toggle) -->
+          <button
+            v-if="isGroupToggle(group)"
+            type="button"
+            class="nav-group-toggle text-uppercase small fw-semibold mb-2 px-2"
+            :aria-expanded="isGroupExpanded(groupIndex, group)"
+            :aria-controls="groupItemsId(groupIndex)"
+            @click="toggleGroup(groupIndex)"
+          >
+            <span class="nav-group-toggle-label">{{ group.label }}</span>
+            <svg
+              class="nav-group-chevron"
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              aria-hidden="true"
+            >
+              <!-- Wide, square-capped chevron matching Omni Tend's menu headers.
+                   Points down when closed; rotated 180° when the group is open. -->
+              <path
+                d="M11.375 4.8125L7 9.1875L2.625 4.8125"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="square"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Static group label (non-collapsible, expanded sidebar) -->
           <div
-            v-if="group.label && !collapsed"
+            v-else-if="group.label && !collapsed"
             class="nav-group-label text-uppercase small fw-semibold mb-2 px-2"
           >
             {{ group.label }}
           </div>
 
+          <!-- Divider shown in place of the label when the sidebar rail is collapsed -->
           <div v-if="group.label && collapsed" class="nav-group-divider">
             <hr class="my-2 border-secondary" />
           </div>
 
-          <ul class="nav flex-column gap-1">
-            <li v-for="(item, itemIndex) in group.items" :key="itemIndex" class="nav-item">
-              <slot
-                name="link"
-                :item="item"
-                :is-active="isActive(item.url)"
-                :collapsed="collapsed"
-              >
-                <a
-                  :href="item.url"
-                  class="nav-link d-flex align-items-center gap-2 rounded"
-                  :class="{
-                    'active': isActive(item.url),
-                    'justify-content-center': collapsed
-                  }"
+          <div
+            :id="groupItemsId(groupIndex)"
+            class="nav-group-items"
+            :class="{ 'nav-group-items--collapsible': isGroupToggle(group) }"
+            :inert="isGroupExpanded(groupIndex, group) ? undefined : true"
+          >
+            <ul class="nav flex-column gap-1">
+              <li v-for="(item, itemIndex) in group.items" :key="itemIndex" class="nav-item">
+                <slot
+                  name="link"
+                  :item="item"
+                  :is-active="isActive(item.url)"
+                  :collapsed="collapsed"
+                  :is-expanded="isGroupExpanded(groupIndex, group)"
                 >
-                  <component
-                    v-if="item.icon"
-                    :is="item.icon"
-                    class="nav-icon"
-                    style="width: 20px; height: 20px;"
-                  />
-                  <span v-if="!collapsed" class="nav-label">{{ item.label }}</span>
-                  <span
-                    v-if="item.badge && !collapsed"
-                    class="badge ms-auto"
-                    :class="`bg-${item.badgeColor || 'primary'}`"
+                  <a
+                    :href="item.url"
+                    class="nav-link d-flex align-items-center gap-2 rounded"
+                    :class="{
+                      'active': isActive(item.url),
+                      'justify-content-center': collapsed
+                    }"
                   >
-                    {{ item.badge }}
-                  </span>
-                </a>
-              </slot>
-            </li>
-          </ul>
+                    <component
+                      v-if="item.icon"
+                      :is="item.icon"
+                      class="nav-icon"
+                      style="width: 20px; height: 20px;"
+                    />
+                    <span v-if="!collapsed" class="nav-label">{{ item.label }}</span>
+                    <span
+                      v-if="item.badge && !collapsed"
+                      class="badge ms-auto"
+                      :class="`bg-${item.badgeColor || 'primary'}`"
+                    >
+                      {{ item.badge }}
+                    </span>
+                  </a>
+                </slot>
+              </li>
+            </ul>
+          </div>
         </div>
       </template>
     </nav>
@@ -75,8 +119,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch, nextTick } from 'vue';
-import type { Navigation } from '../../types/navigation';
+import { computed, ref, onMounted, watch, nextTick, useId } from 'vue';
+import type { Navigation, NavigationGroup } from '../../types/navigation';
 
 const props = withDefaults(defineProps<{
   navigation: Navigation;
@@ -84,10 +128,24 @@ const props = withDefaults(defineProps<{
   collapsed?: boolean;
   hidden?: boolean;
   title?: string;
+  /**
+   * Turn group headers into accordion toggles that collapse/expand their items.
+   * When off (default), every group is rendered permanently expanded.
+   */
+  collapsibleGroups?: boolean;
+  /**
+   * Only relevant when `collapsibleGroups` is on.
+   * `true` (default): only the active-route group starts open, and opening one
+   * group closes the others (single-open accordion).
+   * `false`: all groups start open and toggle independently.
+   */
+  autoCollapseInactiveGroups?: boolean;
 }>(), {
   collapsed: false,
   hidden: false,
   title: 'Dashboard',
+  collapsibleGroups: false,
+  autoCollapseInactiveGroups: true,
 });
 
 defineEmits<{
@@ -96,14 +154,115 @@ defineEmits<{
 
 const sidebarRef = ref<HTMLElement | null>(null);
 
+const uid = useId();
+const groupItemsId = (index: number): string => `${uid}-nav-group-${index}`;
+
 const brandInitial = computed(() => {
   return props.title.charAt(0).toUpperCase();
 });
 
-const isActive = (url: string): boolean => {
-  // Normalize URLs for comparison (remove trailing slash, lowercase)
-  const normalizeUrl = (u: string) => u.toLowerCase().replace(/\/$/, '');
-  return normalizeUrl(props.currentUrl) === normalizeUrl(url);
+// Normalize URLs for comparison: drop any query string / hash, lowercase, and
+// remove a single trailing slash. Dropping ?query and #hash means an index page
+// carrying filter/pagination params (e.g. `/rotas?page=2`) still matches its
+// `/rotas` nav item.
+const normalizeUrl = (url: string): string =>
+  url.toLowerCase().replace(/[?#].*$/, '').replace(/\/$/, '');
+
+/**
+ * The single best-matching nav item URL for the current route. Prefers an exact
+ * match; otherwise the longest ancestor path, so a detail page like
+ * `/rotas/507` activates the `/rotas` item. Root `/` only matches exactly — it
+ * is a prefix of every path, so it is never treated as an ancestor.
+ * Returns the normalized URL of the winning item, or null if nothing matches.
+ */
+const activeUrl = computed<string | null>(() => {
+  const current = normalizeUrl(props.currentUrl);
+  let best: string | null = null;
+  for (const group of props.navigation) {
+    if (group.visible === false) continue;
+    for (const item of group.items) {
+      if (item.visible === false) continue;
+      const candidate = normalizeUrl(item.url);
+      const matches =
+        candidate === current ||
+        (candidate !== '' && current.startsWith(candidate + '/'));
+      if (matches && (best === null || candidate.length > best.length)) {
+        best = candidate;
+      }
+    }
+  }
+  return best;
+});
+
+const isActive = (url: string): boolean =>
+  activeUrl.value !== null && normalizeUrl(url) === activeUrl.value;
+
+// Index of the group containing the active route (-1 if none).
+const activeGroupIndex = computed(() =>
+  props.navigation.findIndex(
+    (group) => group.visible !== false && group.items.some((item) => isActive(item.url))
+  )
+);
+
+// A group renders a clickable toggle header only when collapsible groups are
+// enabled, the sidebar rail is expanded, the group has a label, and the group
+// hasn't individually opted out via `collapsible: false`.
+const isGroupToggle = (group: NavigationGroup): boolean =>
+  props.collapsibleGroups &&
+  !props.collapsed &&
+  !!group.label &&
+  group.collapsible !== false;
+
+// Whether a group's items are currently shown. Rail-collapsed sidebars always
+// show items (as icons); non-collapsible groups are always expanded.
+const isGroupExpanded = (index: number, group: NavigationGroup): boolean => {
+  if (props.collapsed) return true;
+  if (!isGroupToggle(group)) return true;
+  return openGroups.value.has(index);
+};
+
+const openGroups = ref<Set<number>>(new Set());
+
+const computeInitialOpenGroups = (): Set<number> => {
+  const next = new Set<number>();
+  if (props.autoCollapseInactiveGroups) {
+    if (activeGroupIndex.value >= 0) next.add(activeGroupIndex.value);
+  } else {
+    props.navigation.forEach((group, index) => {
+      if (group.visible !== false && group.collapsible !== false) next.add(index);
+    });
+  }
+  return next;
+};
+
+// Initialise synchronously so the active group is already open on first paint —
+// no post-mount height measurement, so no open/close flicker on load.
+openGroups.value = computeInitialOpenGroups();
+
+const toggleGroup = (index: number): void => {
+  const wasOpen = openGroups.value.has(index);
+  if (props.autoCollapseInactiveGroups) {
+    openGroups.value = wasOpen ? new Set() : new Set([index]);
+    return;
+  }
+  const next = new Set(openGroups.value);
+  if (wasOpen) next.delete(index);
+  else next.add(index);
+  openGroups.value = next;
+};
+
+// Ensure the active-route group is open. In single-open mode this switches to
+// it (closing others); otherwise it just adds it to the open set. No-op when
+// there is no active group (e.g. a detail page not present in the nav).
+const openActiveGroup = (): void => {
+  if (!props.collapsibleGroups || activeGroupIndex.value < 0) return;
+  if (props.autoCollapseInactiveGroups) {
+    openGroups.value = new Set([activeGroupIndex.value]);
+  } else {
+    const next = new Set(openGroups.value);
+    next.add(activeGroupIndex.value);
+    openGroups.value = next;
+  }
 };
 
 const scrollToActiveItem = async (smooth = false) => {
@@ -131,10 +290,19 @@ onMounted(() => {
   scrollToActiveItem(false);
 });
 
-// Watch for URL changes (client-side routing) and scroll smoothly
+// Client-side route change: open the newly active group, then scroll to it.
 watch(() => props.currentUrl, () => {
+  openActiveGroup();
   scrollToActiveItem(true);
 });
+
+// The active group can change without a currentUrl change — e.g. navigation
+// arrives/repopulates after mount (async data, permission gating), so the active
+// route resolves late. Watch the derived index (not the array identity, which
+// can churn on every parent re-render) and open the active group when it lands.
+watch(activeGroupIndex, () => {
+  openActiveGroup();
+});
 </script>
 
 <style scoped>
@@ -186,6 +354,99 @@ watch(() => props.currentUrl, () => {
   letter-spacing: 0.5px;
 }
 
+/* Collapsible group toggle header */
+.nav-group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  /* Comfortable, ergonomic click target (matches the nav links' vertical
+     rhythm). `px-2` on the element sets only left/right padding, so vertical
+     padding here does not fight Bootstrap's utility `!important`. */
+  min-height: 2.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+  background: transparent;
+  border: 0;
+  /* No `color` here on purpose: theme.scss sets `.nav-group-toggle` to
+     $navbar-dark-color so the toggle matches the static .nav-group-label.
+     A scoped `color` would override that (equal specificity, later source order). */
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--bs-border-radius, 0.375rem);
+  transition: background-color 0.2s ease;
+}
+
+.nav-group-toggle:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.nav-group-toggle:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+.nav-group-toggle-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-group-chevron {
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+}
+
+.nav-group-open > .nav-group-toggle .nav-group-chevron {
+  transform: rotate(180deg);
+}
+
+/*
+ * Grid-based collapse: animate rows 0fr -> 1fr so the container height follows
+ * its content with no JS measurement. The active group renders with
+ * `.nav-group-open` already applied, so its open state paints without a
+ * transition (no load flicker). Opacity fades the items in/out alongside the
+ * height change for a smoother reveal.
+ *
+ * This mechanism is applied ONLY to groups that actually collapse
+ * (`--collapsible`). A group that never collapses (feature off, rail-collapsed,
+ * or `collapsible: false`) keeps a plain wrapper, so its `overflow: hidden`
+ * never clips focus outlines / badge shadows for consumers who didn't opt in.
+ */
+.nav-group-items--collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
+}
+
+.nav-group-open > .nav-group-items--collapsible {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.nav-group-items--collapsible > .nav {
+  overflow: hidden;
+  min-height: 0;
+  /*
+   * Bootstrap's `.nav` sets `flex-wrap: wrap`. While the grid row is collapsing
+   * (height near 0), a wrapping flex-column can't stack its items in the tiny
+   * height and wraps them into side-by-side columns instead — a visible reflow
+   * flash. `nowrap` keeps them stacked and simply clipped by `overflow: hidden`.
+   */
+  flex-wrap: nowrap;
+}
+
+/* Respect reduced-motion: collapse instantly, no fade. */
+@media (prefers-reduced-motion: reduce) {
+  .nav-group-items--collapsible,
+  .nav-group-toggle {
+    transition: none;
+  }
+}
+
 :deep(.nav-link) {
   padding: 0.625rem 0.75rem;
   transition: all 0.2s ease;

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

@@ -26,14 +26,47 @@
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
-            {{ resolvedLabel }}
+            <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
         </DFormCheckbox>
 
         <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
             {{ form.getError(errorKey) }}
         </DFormInvalidFeedback>
         <slot name="info" :field="field" :model="model" />
-        <DFormText v-if="resolvedHint" class="text-muted">
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
+            <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
+        </DFormText>
+        <DFormText v-if="field.help">{{ field.help }}</DFormText>
+    </div>
+
+    <!-- Switch: toggle with contextual on/off text and an on-state style -->
+    <div
+        v-else-if="field.type === 'switch'"
+        :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
+    >
+        <slot
+            v-if="$slots.value"
+            name="value"
+            :field="field"
+            :model="model"
+            :value="fieldValue"
+            :update="setValue"
+        />
+        <DFormCheckbox
+            v-else
+            v-model="switchModel"
+            switch
+            :disabled="isDisabled || isReadonly"
+            v-bind="field.inputProps"
+        >
+            <DXFieldLabel :label="switchText" :info="resolvedInfo" />
+        </DFormCheckbox>
+
+        <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
+            {{ form.getError(errorKey) }}
+        </DFormInvalidFeedback>
+        <slot name="info" :field="field" :model="model" />
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
             <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
         </DFormText>
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
@@ -41,7 +74,10 @@
 
     <!-- Repeater: nested, repeatable sub-form -->
     <div v-else-if="field.type === 'repeater'" :class="field.class || 'mb-3'">
-        <DFormGroup :label="resolvedLabel">
+        <DFormGroup>
+            <template #label>
+                <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+            </template>
             <DXRepeater
                 :form="form"
                 :field="field"
@@ -55,14 +91,19 @@
             </DXRepeater>
         </DFormGroup>
         <slot name="info" :field="field" :model="model" />
-        <DFormText v-if="resolvedHint" class="text-muted">
+        <DFormText v-if="resolvedHint || $slots.hint" class="text-muted">
             <slot name="hint" :field="field" :model="model">{{ resolvedHint }}</slot>
         </DFormText>
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
     </div>
 
     <!-- Standard labelled field -->
-    <DFormGroup v-else :label="resolvedLabel" :class="field.class || 'mb-3'">
+    <DFormGroup v-else :class="field.class || 'mb-3'">
+        <!-- Label with optional info popover -->
+        <template #label>
+            <DXFieldLabel :label="resolvedLabel" :info="resolvedInfo" />
+        </template>
+
         <!-- Custom value slot overrides the built-in control -->
         <slot
             v-if="$slots.value"
@@ -144,7 +185,7 @@
                 <span class="input-group-text">{{ field.currencySymbol || "£" }}</span>
             </template>
             <DFormInput
-                v-model="fieldValue"
+                v-model="numericInputValue"
                 type="number"
                 :required="field.required"
                 :placeholder="field.placeholder"
@@ -213,6 +254,7 @@ import DFormCheckbox from "../base/DFormCheckbox.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
+import DXFieldLabel from "./DXFieldLabel.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { FieldDefinition, FieldOption, FieldType } from "../../types";
 import { getByPath, setByPath } from "../../utils/objectPath";
@@ -273,6 +315,41 @@ const fieldValue = computed({
     set: (value: any) => setValue(value),
 });
 
+// For `percentage` fields with `asFraction`, the model holds a 0–1 fraction but
+// the input shows/edits a 0–100 percentage. Scale on read/write, rounding away
+// binary-float artefacts (0.2 * 100 = 20.000000000000004). Currency and plain
+// percentage fields pass straight through.
+const isFractionPercentage = computed(
+    () => props.field.type === "percentage" && props.field.asFraction === true,
+);
+
+const numericInputValue = computed({
+    get: () => {
+        const value = fieldValue.value;
+        if (!isFractionPercentage.value) return value;
+        if (value === null || value === undefined || value === "") return value;
+        const num = Number(value);
+        if (!Number.isFinite(num)) return value;
+        return Math.round(num * 100 * 1e6) / 1e6;
+    },
+    set: (value: any) => {
+        if (!isFractionPercentage.value) {
+            setValue(value);
+            return;
+        }
+        if (value === null || value === undefined || value === "") {
+            setValue(value);
+            return;
+        }
+        const num = Number(value);
+        if (!Number.isFinite(num)) {
+            setValue(value);
+            return;
+        }
+        setValue(Math.round((num / 100) * 1e9) / 1e9);
+    },
+});
+
 const NUMERIC_TYPES: ReadonlySet<FieldType> = new Set([
     "number",
     "currency",
@@ -307,6 +384,46 @@ const resolvedLabel = computed(
 
 const resolvedHint = computed(() => resolveMaybe(props.field.hint));
 
+const resolvedInfo = computed(() => resolveMaybe(props.field.info));
+
+// ————————————————— switch (toggle) field
+
+// Whether a `switch` field is currently on. Coerces the model value to a
+// boolean, but treats the common "falsey" string encodings a backend might send
+// for a boolean ("0", "false", "") as off — plain `Boolean("0")` is `true`,
+// which would wrongly render such a value on.
+const switchIsOn = computed(() => {
+    const value = fieldValue.value;
+    if (typeof value === "string") {
+        const normalised = value.trim().toLowerCase();
+        return normalised !== "" && normalised !== "0" && normalised !== "false";
+    }
+    return Boolean(value);
+});
+
+// Bind the toggle to a normalised boolean. The underlying bvn checkbox only
+// treats a literal `true` as checked, so a truthy non-boolean model (e.g.
+// Laravel serialising a boolean column as `1`, or a `"1"` string) would render
+// the toggle in the *off* position while `switchIsOn` styled it *on* — the
+// control contradicting itself. Reading a real boolean keeps the checkbox
+// position, the on-state style, and the contextual text in agreement; writing
+// stores a clean boolean.
+const switchModel = computed({
+    get: () => switchIsOn.value,
+    set: (value: boolean) => setValue(value),
+});
+
+/**
+ * Contextual label for a `switch` field: `textWhenTrue`/`textWhenFalse`
+ * for the current state, falling back to the field's label.
+ */
+const switchText = computed(() => {
+    const contextual = switchIsOn.value
+        ? resolveMaybe(props.field.textWhenTrue)
+        : resolveMaybe(props.field.textWhenFalse);
+    return contextual ?? resolvedLabel.value;
+});
+
 const isDisabled = computed(() => {
     if (props.field.disabledWhen) {
         return props.field.disabledWhen(effectiveModel.value);
@@ -399,4 +516,26 @@ onBeforeUnmount(() => {
     border: 1px solid var(--bs-border-color);
     border-radius: var(--bs-border-radius);
 }
+
+/* Switch field: contextual styling that responds to the on/off state.
+   Off is muted; on turns the control and label a filled success green. */
+.dx-switch :deep(.form-check-label) {
+    color: var(--bs-secondary-color);
+    transition: color 0.15s ease-in-out;
+}
+
+.dx-switch--on :deep(.form-check-label) {
+    color: var(--bs-success);
+    font-weight: 500;
+}
+
+.dx-switch--on :deep(.form-check-input:checked) {
+    background-color: var(--bs-success);
+    border-color: var(--bs-success);
+}
+
+.dx-switch--on :deep(.form-check-input:focus) {
+    border-color: var(--bs-success);
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
+}
 </style>

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

@@ -0,0 +1,72 @@
+<template>
+    <span class="dx-field-label">
+        <span class="dx-field-label__text">{{ label }}</span>
+        <template v-if="info">
+            <button
+                :id="infoId"
+                type="button"
+                class="dx-field-label__info"
+                :aria-label="`More information: ${label}`"
+                @click.stop.prevent
+            >
+                <i-lucide-info aria-hidden="true" />
+            </button>
+            <DPopover
+                :target="infoId"
+                hover
+                focus
+                placement="top"
+            >
+                {{ info }}
+            </DPopover>
+        </template>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { useId } from "vue";
+import DPopover from "../base/DPopover.vue";
+
+interface Props {
+    /** Visible label text. */
+    label: string;
+
+    /** Optional help text revealed in a popover from an info affordance. */
+    info?: string;
+}
+
+defineProps<Props>();
+
+// Stable, SSR-safe id so the popover can target the trigger button.
+const infoId = `dx-field-info-${useId()}`;
+</script>
+
+<style scoped>
+.dx-field-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.dx-field-label__info {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    line-height: 1;
+    color: var(--bs-secondary-color);
+    cursor: help;
+}
+
+.dx-field-label__info:hover,
+.dx-field-label__info:focus-visible {
+    color: var(--bs-primary);
+}
+
+.dx-field-label__info svg {
+    width: 0.9em;
+    height: 0.9em;
+}
+</style>