@omnitend/dashboard-for-laravel 0.4.7

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="dashboard-layout d-flex" :data-dashboard-id="dashboardId">
+    <!-- Sidebar -->
+    <DXDashboardSidebar
+      :navigation="navigation"
+      :current-url="currentUrl"
+      :title="title"
+      :collapsed="collapsed"
+      :hidden="hidden"
+      @toggle="toggleSidebar"
+    >
+      <!-- Dynamically forward all sidebar-* slots by stripping the prefix -->
+      <template
+        v-for="(originalName, strippedName) in sidebarSlots"
+        :key="strippedName"
+        #[strippedName]="slotProps"
+      >
+        <slot :name="originalName" v-bind="slotProps" />
+      </template>
+    </DXDashboardSidebar>
+
+    <!-- Main Content Area -->
+    <div class="dashboard-content flex-grow-1">
+      <!-- Top Navbar -->
+      <DXDashboardNavbar
+        :page-title="pageTitle"
+        :user="user"
+        :logout-url="logoutUrl"
+        @toggle-sidebar="toggleSidebar"
+      >
+        <!-- Dynamically forward all navbar-* slots by stripping the prefix -->
+        <template
+          v-for="(originalName, strippedName) in navbarSlots"
+          :key="strippedName"
+          #[strippedName]="slotProps"
+        >
+          <slot :name="originalName" v-bind="slotProps" />
+        </template>
+      </DXDashboardNavbar>
+
+      <!-- Page Content -->
+      <main class="dashboard-main p-4">
+        <DContainer fluid>
+          <DRow class="justify-content-center">
+            <DCol cols="12" xl="10">
+              <slot />
+            </DCol>
+          </DRow>
+        </DContainer>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useSlots } from 'vue';
+import DXDashboardSidebar from './DXDashboardSidebar.vue';
+import DXDashboardNavbar from './DXDashboardNavbar.vue';
+import DContainer from '../base/DContainer.vue';
+import DRow from '../base/DRow.vue';
+import DCol from '../base/DCol.vue';
+import type { Navigation } from '../../types/navigation';
+
+const slots = useSlots();
+
+interface Props {
+  /** Navigation structure for sidebar */
+  navigation: Navigation;
+
+  /** Current URL path for active state */
+  currentUrl: string;
+
+  /** Dashboard title shown in sidebar brand */
+  title?: string;
+
+  /** Page title shown in navbar */
+  pageTitle?: string;
+
+  /** User object for navbar dropdown */
+  user?: { name: string; email: string } | null;
+
+  /** Logout URL for navbar dropdown */
+  logoutUrl?: string;
+
+  /** LocalStorage key for sidebar state persistence */
+  storageKey?: string;
+
+  /**
+   * Unique ID for this dashboard instance (for nested dashboards)
+   * Used to scope visibility state when multiple dashboards exist on same page
+   * If not provided, uses global HTML class approach (for SSR compatibility)
+   */
+  dashboardId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: 'Dashboard',
+  pageTitle: '',
+  user: null,
+  logoutUrl: '/logout',
+  storageKey: 'dashboard-sidebar-hidden',
+  dashboardId: '',
+});
+
+const collapsed = ref(false);
+
+// Compute sidebar slots (strip 'sidebar-' prefix)
+const sidebarSlots = computed(() => {
+  const result: Record<string, string> = {};
+  Object.keys(slots).forEach(name => {
+    if (name.startsWith('sidebar-')) {
+      const strippedName = name.substring(8); // Remove 'sidebar-' prefix
+      result[strippedName] = name;
+    }
+  });
+  return result;
+});
+
+// Compute navbar slots (strip 'navbar-' prefix)
+const navbarSlots = computed(() => {
+  const result: Record<string, string> = {};
+  Object.keys(slots).forEach(name => {
+    if (name.startsWith('navbar-')) {
+      const strippedName = name.substring(7); // Remove 'navbar-' prefix
+      result[strippedName] = name;
+    }
+  });
+  return result;
+});
+
+// Initialize sidebar visibility from localStorage
+const getInitialHiddenState = (): boolean => {
+  // Skip during SSR - no access to localStorage or document
+  if (typeof window === 'undefined') {
+    return !props.dashboardId; // Default: hidden for global, visible for scoped
+  }
+
+  try {
+    const savedHidden = localStorage.getItem(props.storageKey);
+    if (savedHidden !== null) {
+      const isHidden = JSON.parse(savedHidden);
+
+      // If no dashboard ID (global instance), update HTML class for SSR compatibility
+      if (!props.dashboardId) {
+        if (isHidden) {
+          document.documentElement.classList.remove('sidebar-visible');
+        } else {
+          document.documentElement.classList.add('sidebar-visible');
+        }
+      }
+
+      return isHidden;
+    }
+  } catch (error) {
+    console.error('Error loading sidebar state:', error);
+  }
+
+  // Default: hidden for global instances (docs), visible for scoped instances (examples)
+  if (!props.dashboardId) {
+    document.documentElement.classList.remove('sidebar-visible');
+    return true;
+  }
+  return false; // Show sidebar in scoped instances by default
+};
+
+const hidden = ref(getInitialHiddenState());
+
+const toggleSidebar = () => {
+  hidden.value = !hidden.value;
+
+  // Skip during SSR
+  if (typeof window === 'undefined') return;
+
+  // If no dashboard ID (global instance), update HTML class
+  if (!props.dashboardId) {
+    if (hidden.value) {
+      document.documentElement.classList.remove('sidebar-visible');
+    } else {
+      document.documentElement.classList.add('sidebar-visible');
+    }
+  }
+
+  // Save to localStorage
+  try {
+    localStorage.setItem(props.storageKey, JSON.stringify(hidden.value));
+  } catch (error) {
+    console.error('Error saving sidebar state:', error);
+  }
+};
+</script>
+
+<style scoped>
+.dashboard-layout {
+  min-height: 100vh;
+  background-color: #f8f9fa;
+}
+
+.dashboard-content {
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+.dashboard-main {
+  flex: 1;
+  max-width: 100%;
+}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+  <header class="dashboard-navbar bg-white border-bottom">
+    <DContainer fluid class="h-100">
+      <DRow class="h-100 align-items-center">
+        <DCol class="d-flex align-items-center gap-3">
+          <DButton
+            variant="link"
+            class="text-dark p-0"
+            @click="$emit('toggleSidebar')"
+            aria-label="Toggle sidebar"
+          >
+            <slot name="menu-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="currentColor"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"
+                />
+              </svg>
+            </slot>
+          </DButton>
+
+          <h4 v-if="pageTitle" class="mb-0 fw-semibold d-none d-md-block">{{ pageTitle }}</h4>
+
+          <div class="flex-grow-1 d-flex justify-content-center">
+            <slot name="search" />
+          </div>
+        </DCol>
+
+        <DCol cols="auto">
+          <slot name="user-menu" :user="user">
+            <DDropdown
+              v-if="user"
+              variant="link"
+              class="text-dark"
+              menu-class="dropdown-menu-end"
+              no-caret
+            >
+              <template #button-content>
+                <slot name="user-icon" :initial="getUserInitial(user)">
+                  <div class="user-avatar">
+                    {{ getUserInitial(user) }}
+                  </div>
+                </slot>
+              </template>
+
+              <slot name="user-menu-items" :user="user" />
+            </DDropdown>
+          </slot>
+        </DCol>
+      </DRow>
+    </DContainer>
+  </header>
+</template>
+
+<script setup lang="ts">
+import DContainer from "../base/DContainer.vue";
+import DRow from "../base/DRow.vue";
+import DCol from "../base/DCol.vue";
+import DButton from "../base/DButton.vue";
+import DDropdown from "../base/DDropdown.vue";
+
+withDefaults(
+  defineProps<{
+    user?: {
+      name: string;
+      email: string;
+      [key: string]: any;
+    } | null;
+    pageTitle?: string;
+  }>(),
+  {
+    user: null,
+    pageTitle: "",
+  },
+);
+
+defineEmits<{
+  toggleSidebar: [];
+}>();
+
+const getUserInitial = (user: { name: string } | null) => {
+  if (!user?.name) return "";
+  return user.name.charAt(0).toUpperCase();
+};
+</script>
+
+<style scoped>
+.dashboard-navbar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.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;
+}
+</style>

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

@@ -0,0 +1,233 @@
+<template>
+  <aside
+    ref="sidebarRef"
+    class="dashboard-sidebar text-white"
+    :class="{
+      'sidebar-collapsed': collapsed,
+      'sidebar-hidden': hidden
+    }"
+  >
+    <div class="sidebar-header p-3">
+      <div class="d-flex align-items-center justify-content-between">
+        <slot name="brand" :collapsed="collapsed" :title="title">
+          <div class="brand-container" :class="{ 'collapsed': collapsed }">
+            <div class="brand-initial">{{ brandInitial }}</div>
+            <h5 v-if="!collapsed" class="mb-0 fw-bold ms-2">
+              {{ title }}
+            </h5>
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <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.label && !collapsed"
+            class="nav-group-label text-uppercase small fw-semibold mb-2 px-2"
+          >
+            {{ group.label }}
+          </div>
+
+          <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
+                  }"
+                >
+                  <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>
+      </template>
+    </nav>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, watch, nextTick } from 'vue';
+import type { Navigation } from '../../types/navigation';
+
+const props = withDefaults(defineProps<{
+  navigation: Navigation;
+  currentUrl: string;
+  collapsed?: boolean;
+  hidden?: boolean;
+  title?: string;
+}>(), {
+  collapsed: false,
+  hidden: false,
+  title: 'Dashboard',
+});
+
+defineEmits<{
+  toggle: [];
+}>();
+
+const sidebarRef = ref<HTMLElement | null>(null);
+
+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);
+};
+
+const scrollToActiveItem = async (smooth = false) => {
+  await nextTick();
+  if (!sidebarRef.value) return;
+
+  const activeLink = sidebarRef.value.querySelector('.nav-link.active') as HTMLElement;
+  if (activeLink) {
+    const sidebar = sidebarRef.value;
+    const linkRect = activeLink.getBoundingClientRect();
+    const sidebarRect = sidebar.getBoundingClientRect();
+
+    // Calculate the position to scroll to (center the active item)
+    const scrollTop = activeLink.offsetTop - (sidebarRect.height / 2) + (linkRect.height / 2);
+
+    sidebar.scrollTo({
+      top: scrollTop,
+      behavior: smooth ? 'smooth' : 'instant',
+    });
+  }
+};
+
+// Scroll to active item on initial mount (instant, no animation)
+onMounted(() => {
+  scrollToActiveItem(false);
+});
+
+// Watch for URL changes (client-side routing) and scroll smoothly
+watch(() => props.currentUrl, () => {
+  scrollToActiveItem(true);
+});
+</script>
+
+<style scoped>
+.dashboard-sidebar {
+  min-height: 100vh;
+  transition: width 0.3s ease;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.brand-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  transition: all 0.3s ease;
+}
+
+.brand-container.collapsed {
+  justify-content: center;
+}
+
+.brand-initial {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1.25rem;
+}
+
+.sidebar-nav {
+  overflow-x: hidden;
+}
+
+.nav-group-label {
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+}
+
+:deep(.nav-link) {
+  padding: 0.625rem 0.75rem;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+:deep(.nav-link.active) {
+  font-weight: 500;
+}
+
+:deep(.nav-icon) {
+  flex-shrink: 0;
+}
+
+:deep(.nav-label) {
+  flex: 1;
+}
+
+.sidebar-collapsed :deep(.nav-link) {
+  padding: 0.625rem;
+}
+
+/* Custom scrollbar */
+.dashboard-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dashboard-sidebar::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.dashboard-sidebar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.dashboard-sidebar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.sidebar-hidden {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+    <OBasicForm
+        :form="form.form"
+        :fields="form.fields"
+        :submit-text="submitText"
+        :submit-loading-text="submitLoadingText"
+        :show-submit="showSubmit"
+        @submit="emit('submit')"
+    >
+        <!-- Pass through all slots -->
+        <template v-for="(_, name) in $slots" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps" />
+        </template>
+    </OBasicForm>
+</template>
+
+<script setup lang="ts">
+import OBasicForm from "./DXBasicForm.vue";
+import type { DefineFormReturn } from "../../composables/defineForm";
+
+interface Props {
+    /** Form object from defineForm */
+    form: DefineFormReturn<any>;
+
+    /** Submit button text */
+    submitText?: string;
+
+    /** Submit button loading text */
+    submitLoadingText?: string;
+
+    /** Show submit button */
+    showSubmit?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    submitText: "Submit",
+    submitLoadingText: "Submitting...",
+    showSubmit: true,
+});
+
+const emit = defineEmits<{
+    submit: [];
+}>();
+</script>