oceanhelm 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oceanhelm",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Oceanhelm's highly customizable library",
   "private": false,
   "type": "module",

package/src/components/ConfigurableSidebar.vue

@@ -1,228 +1,220 @@
 <template>
-    <nav id="sidebar" :class="sidebarClasses">
-      <!-- Logo Section -->
-      <div class="logo d-flex align-items-center left" v-if="showLogo">
-        <i :class="logoIcon" class="me-2"></i>
-        <span>{{ brandName }}</span>
-      </div>
-  
-      <!-- Navigation Items -->
-      <ul class="list-unstyled components mt-4">
-        <li 
-          v-for="(item, index) in filteredMenuItems" 
-          :key="index"
-          :class="{ 'active': item.active, 'dropdown': item.type === 'dropdown' }"
-          @click="handleItemClick(item)"
-        >
-          <!-- Regular Link -->
-          <a 
-            v-if="item.type === 'link'" 
-            :href="item.href || '#'"
-            @click.prevent="handleNavigation(item)"
-          >
-            <i :class="item.icon" v-if="item.icon"></i> 
+  <nav id="sidebar" :class="sidebarClasses">
+    <!-- Logo Section -->
+    <div class="logo d-flex align-items-center left" v-if="showLogo">
+      <i :class="logoIcon" class="me-2"></i>
+      <span>{{ brandName }}</span>
+    </div>
+
+    <!-- Navigation Items -->
+    <ul class="list-unstyled components mt-4">
+      <li v-for="(item, index) in filteredMenuItems" :key="index"
+        :class="{ 'active': item.active, 'dropdown': item.type === 'dropdown' }" @click="handleItemClick(item)">
+        <!-- Regular Link -->
+        <a v-if="item.type === 'link'" :href="item.href || '#'" @click.prevent="handleNavigation(item)">
+          <i :class="item.icon" v-if="item.icon"></i>
+          {{ item.label }}
+        </a>
+
+        <!-- Button/Action -->
+        <a v-else-if="item.type === 'button'" @click.prevent="handleAction(item)" style="cursor: pointer;">
+          <i :class="item.icon" v-if="item.icon"></i>
+          {{ item.label }}
+        </a>
+
+        <!-- Dropdown -->
+        <template v-else-if="item.type === 'dropdown'">
+          <a class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            <i :class="item.icon" v-if="item.icon"></i>
             {{ item.label }}
           </a>
-  
-          <!-- Button/Action -->
-          <a 
-            v-else-if="item.type === 'button'" 
-            @click.prevent="handleAction(item)"
-            style="cursor: pointer;"
-          >
-            <i :class="item.icon" v-if="item.icon"></i> 
-            {{ item.label }}
-          </a>
-  
-          <!-- Dropdown -->
-          <template v-else-if="item.type === 'dropdown'">
-            <a 
-              class="dropdown-toggle" 
-              type="button" 
-              data-bs-toggle="dropdown" 
-              aria-expanded="false"
-            >
-              <i :class="item.icon" v-if="item.icon"></i> 
-              {{ item.label }}
+          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+            <a v-for="(subItem, subIndex) in getFilteredChildren(item)" :key="subIndex" class="dropdown-item black"
+              @click.prevent="handleAction(subItem)" style="cursor: pointer;">
+              {{ subItem.label }}
             </a>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-              <a 
-                v-for="(subItem, subIndex) in item.children" 
-                :key="subIndex"
-                class="dropdown-item black" 
-                @click.prevent="handleAction(subItem)"
-                style="cursor: pointer;"
-              >
-                {{ subItem.label }}
-              </a>
-            </div>
-          </template>
-  
-          <!-- Separator -->
-          <div 
-            v-else-if="item.type === 'separator'" 
-            class="dropdown-divider"
-          ></div>
-  
-          <!-- Static Text -->
-          <a v-else-if="item.type === 'text'">
-            {{ item.label }}
-          </a>
-        </li>
-      </ul>
-  
-      <!-- Custom Slot for Additional Content -->
-      <slot name="footer"></slot>
-    </nav>
-  </template>
-  
-  <script>
-  export default {
-    name: 'ConfigurableSidebar',
-    
-    props: {
-      // Brand configuration
-      brandName: {
-        type: String,
-        default: 'OceanHelm'
-      },
-      logoIcon: {
-        type: String,
-        default: 'bi bi-water'
-      },
-      showLogo: {
-        type: Boolean,
-        default: true
-      },
-      
-      // Menu items configuration
-      menuItems: {
-        type: Array,
-        required: true,
-        default: () => []
-      },
-      
-      // User profile for role-based filtering
-      userProfile: {
-        type: Object,
-        default: () => ({})
-      },
-      
-      // Sidebar behavior
-      responsive: {
-        type: Boolean,
-        default: true
-      },
-      
-      // Custom classes
-      customClasses: {
-        type: String,
-        default: ''
-      },
-      
-      // Permission checker function
-      permissionChecker: {
-        type: Function,
-        default: null
-      }
+          </div>
+        </template>
+
+        <!-- Separator -->
+        <div v-else-if="item.type === 'separator'" class="dropdown-divider"></div>
+
+        <!-- Static Text -->
+        <a v-else-if="item.type === 'text'">
+          {{ item.label }}
+        </a>
+      </li>
+    </ul>
+
+    <!-- Custom Slot for Additional Content -->
+    <slot name="footer"></slot>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'ConfigurableSidebar',
+
+  props: {
+    // Brand configuration
+    brandName: {
+      type: String,
+      default: 'OceanHelm'
     },
-    
-    computed: {
-      sidebarClasses() {
-        return this.customClasses;
-      },
-      
-      filteredMenuItems() {
-        return this.menuItems.filter(item => this.hasPermission(item));
-      }
+    logoIcon: {
+      type: String,
+      default: 'bi bi-water'
     },
-    
-    mounted() {
-      if (this.responsive) {
-        this.initializeResponsiveBehavior();
-      }
+    showLogo: {
+      type: Boolean,
+      default: true
     },
-    
-    methods: {
-      // Permission checking
-      hasPermission(item) {
-        // Use custom permission checker if provided
-        if (this.permissionChecker) {
-          return this.permissionChecker(item, this.userProfile);
-        }
-        
-        // Default role-based checking
-        if (!item.roles || item.roles.length === 0) {
-          return true; // No role restriction
-        }
-        
-        return item.roles.includes(this.userProfile.role);
-      },
-      
-      // Navigation handling
-      handleNavigation(item) {
-        this.$emit('navigate', item);
-        
-        // Default behavior if no custom handler
-        if (item.href && !item.preventDefault) {
-          if (item.external) {
-            window.open(item.href, '_blank');
-          } else {
-            this.$router?.push(item.href);
-          }
+
+    // Menu items configuration
+    menuItems: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+
+    // User profile for role-based filtering
+    userProfile: {
+      type: Object,
+      default: () => ({})
+    },
+
+    // Sidebar behavior
+    responsive: {
+      type: Boolean,
+      default: true
+    },
+
+    // Custom classes
+    customClasses: {
+      type: String,
+      default: ''
+    },
+
+    // Permission checker function
+    permissionChecker: {
+      type: Function,
+      default: null
+    }
+  },
+
+  computed: {
+    sidebarClasses() {
+      return this.customClasses;
+    },
+
+    filteredMenuItems() {
+      return this.menuItems.filter(item => {
+        // Check if the item itself has permission
+        if (!this.hasPermission(item)) {
+          return false;
         }
-      },
-      
-      // Action handling
-      handleAction(item) {
-        this.$emit('action', item);
-      },
-      
-      // Item click handling
-      handleItemClick(item) {
-        this.$emit('item-click', item);
-        
-        if (item.type === 'dropdown') {
-          // Handle dropdown specific logic if needed
+
+        // For dropdown items, check if any children have permission
+        if (item.type === 'dropdown' && item.children) {
+          return item.children.some(child => this.hasPermission(child));
         }
-      },
-      
-      // Responsive behavior
-      initializeResponsiveBehavior() {
-        const sidebarToggle = document.getElementById('sidebarToggle');
-        const sidebar = document.getElementById('sidebar');
-        const content = document.getElementById('content');
-        
-        if (!sidebarToggle || !sidebar || !content) return;
-        
-        // Initial state for desktop
-        if (window.innerWidth >= 768) {
-          sidebar.classList.toggle('active');
-          content.classList.toggle('active');
+
+        return true;
+      });
+    }
+  },
+
+  mounted() {
+    if (this.responsive) {
+      this.initializeResponsiveBehavior();
+    }
+  },
+
+  methods: {
+    // Get filtered children for dropdown items
+    getFilteredChildren(item) {
+      if (!item.children) return [];
+      return item.children.filter(child => this.hasPermission(child));
+    },
+
+    // Permission checking
+    hasPermission(item) {
+      // Use custom permission checker if provided
+      if (this.permissionChecker) {
+        return this.permissionChecker(item, this.userProfile);
+      }
+
+      // Default role-based checking
+      if (!item.roles || item.roles.length === 0) {
+        return true; // No role restriction
+      }
+
+      return item.roles.includes(this.userProfile.role);
+    },
+
+    // Navigation handling
+    handleNavigation(item) {
+      this.$emit('navigate', item);
+
+      // Default behavior if no custom handler
+      if (item.href && !item.preventDefault) {
+        if (item.external) {
+          window.open(item.href, '_blank');
+        } else {
+          this.$router?.push(item.href);
         }
-        
-        // Toggle functionality
-        sidebarToggle.addEventListener('click', () => {
-          sidebar.classList.toggle('active');
-          content.classList.toggle('active');
-        });
-        
-        // Close sidebar on outside click (mobile)
-        document.addEventListener('click', (event) => {
-          const isClickInsideSidebar = sidebar.contains(event.target);
-          const isClickOnToggleBtn = sidebarToggle.contains(event.target);
-          
-          if (!isClickInsideSidebar && !isClickOnToggleBtn && 
-              window.innerWidth < 768 && 
-              sidebar.classList.contains('active')) {
-            sidebar.classList.remove('active');
-            content.classList.remove('active');
-          }
-        });
       }
     },
-    
-    emits: ['navigate', 'action', 'item-click']
-  }
-  </script>
-  
+
+    // Action handling
+    handleAction(item) {
+      this.$emit('action', item);
+    },
+
+    // Item click handling
+    handleItemClick(item) {
+      this.$emit('item-click', item);
+
+      if (item.type === 'dropdown') {
+        // Handle dropdown specific logic if needed
+      }
+    },
+
+    // Responsive behavior
+    initializeResponsiveBehavior() {
+      const sidebarToggle = document.getElementById('sidebarToggle');
+      const sidebar = document.getElementById('sidebar');
+      const content = document.getElementById('content');
+
+      if (!sidebarToggle || !sidebar || !content) return;
+
+      // Initial state for desktop
+      if (window.innerWidth >= 768) {
+        sidebar.classList.toggle('active');
+        content.classList.toggle('active');
+      }
+
+      // Toggle functionality
+      sidebarToggle.addEventListener('click', () => {
+        sidebar.classList.toggle('active');
+        content.classList.toggle('active');
+      });
+
+      // Close sidebar on outside click (mobile)
+      document.addEventListener('click', (event) => {
+        const isClickInsideSidebar = sidebar.contains(event.target);
+        const isClickOnToggleBtn = sidebarToggle.contains(event.target);
+
+        if (!isClickInsideSidebar && !isClickOnToggleBtn &&
+          window.innerWidth < 768 &&
+          sidebar.classList.contains('active')) {
+          sidebar.classList.remove('active');
+          content.classList.remove('active');
+        }
+      });
+    }
+  },
+
+  emits: ['navigate', 'action', 'item-click']
+}
+</script>