@bagelink/vue 1.6.43 → 1.6.49

package/src/components/form/inputs/TextInput.vue

@@ -8,7 +8,7 @@ import {
 } from '@bagelink/vue'
 import { until } from '@vueuse/core'
 
-import { onMounted, watch, nextTick } from 'vue'
+import { computed, onMounted, ref, watch, nextTick } from 'vue'
 
 export interface TextInputProps extends ValidateInputBaseT {
 	id?: string
@@ -44,40 +44,40 @@ const props = withDefaults(defineProps<TextInputProps>(), {
 	modelValue: '',
 })
 const emit = defineEmits(['update:modelValue', 'debounce'])
-let inputVal = $ref<string | number>()
+const inputVal = ref<string | number>()
 
-const input = $ref<HTMLTextAreaElement | HTMLInputElement>()
+const input = ref<HTMLTextAreaElement | HTMLInputElement>()
 
 useValidateFieldValue(
-	() => inputVal,
-	() => input,
+	() => inputVal.value,
+	() => input.value,
 	props.validate,
 	props.getFormData
 )
 
-const inputRows = $computed(() => {
+const inputRows = computed(() => {
 	let rows = Number(props.rows) || 1
 	if (props.autoheight)
-		{rows = Math.max(rows, String(inputVal).split('\n').length)}
-	if (props.multiline || props.code) {rows = Math.max(rows, 4)}
+	{ rows = Math.max(rows, String(inputVal.value).split('\n').length) }
+	if (props.multiline || props.code) { rows = Math.max(rows, 4) }
 	return rows
 })
 
 const debouncedEmit = useDebounceFn(() => {
-	emit('debounce', inputVal as string)
+	emit('debounce', inputVal.value as string)
 }, 700)
 
 function autoResizeTextarea() {
-	if (!props.autoheight || !input || 'TEXTAREA' !== input.tagName) {return}
+	if (!props.autoheight || !input.value || input.value.tagName !== 'TEXTAREA') { return }
 
-	const textarea = input as HTMLTextAreaElement
+	const textarea = input.value as HTMLTextAreaElement
 	textarea.style.height = 'auto'
 	textarea.style.height = `${textarea.scrollHeight + 1}px`
 }
 
 function updateInputVal() {
-	if (props.disabled) {return}
-	emit('update:modelValue', inputVal as string)
+	if (props.disabled) { return }
+	emit('update:modelValue', inputVal.value as string)
 	debouncedEmit()
 
 	if (props.autoheight) {
@@ -88,8 +88,8 @@ function updateInputVal() {
 watch(
 	() => props.modelValue,
 	(newVal) => {
-		if (newVal !== inputVal) {
-			inputVal = newVal
+		if (newVal !== inputVal.value) {
+			inputVal.value = newVal
 			if (props.autoheight) {
 				nextTick(() => { autoResizeTextarea() })
 			}
@@ -98,15 +98,15 @@ watch(
 	{ immediate: true }
 )
 
-const hasFocus = () => document.activeElement === input
-const focus = () => input?.focus()
+const hasFocus = () => document.activeElement === input.value
+const focus = () => input.value?.focus()
 defineExpose({ focus, hasFocus })
 
 onMounted(async () => {
 	if (props.autofocus) {
-		await until(() => input).toBeTruthy()
+		await until(() => input.value).toBeTruthy()
 		await sleep(400)
-		input?.focus()
+		input.value?.focus()
 	}
 	// Don't auto-restore defaultValue - let user control their own content
 

package/src/components/form/inputs/ToggleInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const props = withDefaults(defineProps<{
 	label?: string
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
 	defaultValue?: boolean
 }>(), { defaultValue: false })
 
-const inputId = $ref(props.id || Math.random().toString(36).slice(7))
+const inputId = computed(() => props.id || Math.random().toString(36).slice(7))
 
 const checked = defineModel<boolean | undefined>('modelValue', { default: undefined })
 

package/src/components/form/inputs/Upload/useFileUpload.ts

@@ -32,7 +32,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 	const fileToUrl = (file: File) => URL.createObjectURL(file)
 
 	function addFile(file?: File | File[] | FileList | null) {
-		if (!file) {return}
+		if (!file) { return }
 
 		let filesToAdd: File[] = []
 
@@ -58,18 +58,18 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 		}
 
 		// Call the onFilesQueued callback if provided
-		if (props.onFileQueued && 0 < newQueueFiles.length) {
+		if (props.onFileQueued && newQueueFiles.length > 0) {
 			props.onFileQueued(newQueueFiles)
 		}
 	}
 
 	async function removeFile(pathKeyOrFile: string | File | QueueFile) {
-		if ('string' === typeof pathKeyOrFile) {
+		if (typeof pathKeyOrFile === 'string') {
 			// Remove from both lists
 			storageFiles.value = storageFiles.value.filter(file => file.path_key !== pathKeyOrFile)
 
 			const pathKeyIndex = pk.value.indexOf(pathKeyOrFile)
-			if (-1 !== pathKeyIndex) {
+			if (pathKeyIndex !== -1) {
 				pk.value.splice(pathKeyIndex, 1)
 			}
 
@@ -88,7 +88,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 				&& queueFile.namespace === namespace
 			)
 
-			if (-1 !== index) {
+			if (index !== -1) {
 				fileQueue.value.splice(index, 1)
 			}
 		}
@@ -124,7 +124,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 
 	// UI interaction
 	function browse(autoFlush = false) {
-		if (props.disabled) {return}
+		if (props.disabled) { return }
 
 		const input = document.createElement('input')
 		input.type = 'file'

package/src/components/form/useBagelFormState.ts

@@ -13,11 +13,11 @@ export interface BagelFormState<T> {
 
 // Helper function to safely clone objects without circular references
 function safeClone(obj: any): any {
-	if (null === obj || 'object' !== typeof obj) {return obj}
+	if (obj === null || typeof obj !== 'object') { return obj }
 
 	const seen = new WeakSet()
 	return JSON.parse(JSON.stringify(obj, (key, value) => {
-		if ('object' === typeof value && null !== value) {
+		if (typeof value === 'object' && value !== null) {
 			if (seen.has(value)) {
 				return undefined // Remove circular reference
 			}
@@ -37,7 +37,7 @@ export function provideBagelFormState<T>(initialData: T) {
 		const keys = path.split(/[.[]/)
 
 		// Initialize the root if it's not an object
-		if ('object' !== typeof data.value || null === data.value) {
+		if (typeof data.value !== 'object' || data.value === null) {
 			data.value = {} as T
 		}
 
@@ -46,7 +46,7 @@ export function provideBagelFormState<T>(initialData: T) {
 		// Build the path, ensuring each level is an object
 		for (let i = 0; i < keys.length - 1; i++) {
 			const key = keys[i]
-			if (!(key in current) || 'object' !== typeof current[key] || null === current[key]) {
+			if (!(key in current) || typeof current[key] !== 'object' || current[key] === null) {
 				current[key] = {}
 			}
 			current = current[key]
@@ -71,6 +71,6 @@ export function provideBagelFormState<T>(initialData: T) {
 
 export function useBagelFormState<T>(injectionKey: typeof FORM_STATE_KEY = FORM_STATE_KEY): BagelFormState<T> {
 	const state = inject<BagelFormState<T>>(injectionKey)
-	if (!state) {throw new Error('BagelFormState must be provided')}
+	if (!state) { throw new Error('BagelFormState must be provided') }
 	return state
 }

package/src/components/layout/AppContent.vue

@@ -18,7 +18,11 @@ withDefaults(defineProps<Props>(), {
 })
 
 // Inject menu state from parent
-const menuState = inject('menuState') as {
+const menuState = inject('menuState', {
+	isOpen: { value: true },
+	isMobile: { value: false },
+	toggleMenu: () => { },
+}) as {
 	isOpen: { value: boolean }
 	isMobile: { value: boolean }
 	toggleMenu: () => void
@@ -83,8 +87,7 @@ const hasSidebarCard = computed(() => {
 
 		<!-- Page Content -->
 		<main
-			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100"
-			:class="{
+			class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-auto m_vw100" :class="{
 				'px-1': !hasSidebarCard,
 			}"
 		>

package/src/components/layout/AppLayout.vue

@@ -17,7 +17,7 @@ const isMobile = ref(false)
 
 // Check if mobile
 function checkMobile() {
-	isMobile.value = 910 > window.innerWidth
+	isMobile.value = window.innerWidth < 910
 	if (isMobile.value) {
 		isOpen.value = false
 	}
@@ -128,7 +128,7 @@ onUnmounted(() => {
 	transition: margin-inline-start 400ms ease;
 		min-height: 100vh
 	}
-	
+
 	.page-content {
 		overflow: auto;
 	}

package/src/components/layout/AppSidebar.vue

@@ -7,6 +7,7 @@ import { useRoute } from 'vue-router'
 // Extended interface for links that can have actions
 interface LinkWithAction extends NavLink {
 	action?: () => void
+	activeRoutes?: string[] // נתיבים שצריכים להיות מסומנים כאקטיביים עבור הלינק הזה
 }
 
 interface Props {
@@ -38,7 +39,13 @@ const route = useRoute()
 const isTransitioning = ref(false)
 
 // Inject menu state from parent
-const menuState = inject('menuState') as {
+const menuState = inject('menuState', {
+	isOpen: { value: true },
+	isMobile: { value: false },
+	closeOnMobile: () => void 0,
+	sidebarWidth: '260px',
+	sidebarCollapsedWidth: '66px',
+}) as {
 	isOpen: { value: boolean }
 	isMobile: { value: boolean }
 	closeOnMobile: () => void
@@ -60,6 +67,58 @@ watch(
 	}
 )
 
+// Check if a route is active (exact match, parent route, or custom activeRoutes)
+function isActiveRoute(link: LinkWithAction): boolean {
+	const linkPath = link.to
+
+	if (!linkPath) {
+		return false
+	}
+
+	// אם יש activeRoutes מותאמים אישית, השתמש בהם בלבד
+	if (link.activeRoutes && link.activeRoutes.length > 0) {
+		return link.activeRoutes.some((activePath) => {
+			if (activePath === '/') {
+				return route.path === activePath
+			}
+			return route.path === activePath || route.path.startsWith(`${activePath}/`)
+		})
+	}
+
+	// אחרת, השתמש בלוגיקה האוטומטית הרגילה
+	if (linkPath === '/') {
+		return route.path === linkPath
+	}
+
+	// Exact match
+	if (route.path === linkPath) {
+		return true
+	}
+
+	// Check if current path starts with link path followed by a slash
+	// This handles nested routes like /organizations/id/settings
+	if (route.path.startsWith(`${linkPath}/`)) {
+		return true
+	}
+
+	// Handle dynamic routes - if linkPath has multiple segments and current path matches the pattern
+	const linkSegments = linkPath.split('/').filter(Boolean)
+	const routeSegments = route.path.split('/').filter(Boolean)
+
+	// If link has fewer segments than current route, check if the beginning matches
+	if (linkSegments.length <= routeSegments.length) {
+		return linkSegments.every((segment, index) => {
+			// Allow UUID-like patterns to match
+			if (segment.match(/^[a-f0-9-]{36}$/i) && routeSegments[index]?.match(/^[a-f0-9-]{36}$/i)) {
+				return true
+			}
+			return segment === routeSegments[index]
+		})
+	}
+
+	return false
+}
+
 // Computed styles
 const sidebarStyles = computed(() => {
 	let width = '280px'
@@ -117,15 +176,19 @@ const sidebarStyles = computed(() => {
 			<!-- Navigation Links -->
 			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
 				<Btn
-					v-for="link in props.navLinks" :key="link.to" :title="!menuState.isOpen.value && !menuState.isMobile.value
-						? link.label
-						: ''
-					" fullWidth alignTxt="start" class="flex-shrink-0 px-1" :class="{ 'nav-btn-active': route.path === link.to }"
+					v-for="link in props.navLinks"
+					:key="link.to"
+					:title="!menuState.isOpen.value && !menuState.isMobile.value ? link.label : ''"
+					fullWidth
+					alignTxt="start"
+					class="flex-shrink-0 px-1"
+					:class="{ 'nav-btn-active': isActiveRoute(link) }"
 					:style="{
-						backgroundColor:
-							route.path === link.to ? props.activeColor : props.bgColor,
-						color: route.path === link.to ? 'white' : props.textColor,
-					}" :to="link.to || '/'" @click="link.action"
+						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
+						color: isActiveRoute(link) ? 'white' : props.textColor,
+					}"
+					:to="link.to || '/'"
+					@click="link.action"
 				>
 					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
@@ -134,15 +197,19 @@ const sidebarStyles = computed(() => {
 				</Btn>
 			</nav>
 			<!-- Footer -->
-			<div
-				class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto scrollbar-gutter-stable"
-			>
+			<div class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto">
 				<!-- Footer Links -->
 				<Btn
-					v-for="link in props.footerLinks" :key="link.to || link.label" :title="!menuState.isOpen.value && !menuState.isMobile.value
-						? link.label
-						: ''
-					" alignTxt="start" fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
+					v-for="link in props.footerLinks"
+					:key="link.to || link.label"
+					:title="!menuState.isOpen.value && !menuState.isMobile.value ? link.label : ''"
+					alignTxt="start"
+					fullWidth
+					flat
+					:icon="link.icon"
+					class="flex-shrink-0 px-1"
+					:to="link.to"
+					@click="link.action"
 				>
 					<span class="nav-text">
 						{{ link.label }}

package/src/components/layout/Layout.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 interface LayoutProrps {
 	gap?: number
 	h100?: boolean
@@ -20,20 +22,20 @@ const props = withDefaults(defineProps<LayoutProrps>(), {
 
 })
 
-const gridTemplateRows = $computed(() => (0 < props.rows.length ? props.rows.join(' ') : 'auto'))
-const gapSize = $computed(() => `${props.gap}rem`)
-const mGapSize = $computed(() => props.mGap !== undefined ? `${props.mGap}rem` : gapSize)
+const gridTemplateRows = computed(() => (props.rows.length > 0 ? props.rows.join(' ') : 'auto'))
+const gapSize = computed(() => `${props.gap}rem`)
+const mGapSize = computed(() => props.mGap !== undefined ? `${props.mGap}rem` : gapSize.value)
 
-const mGridTemplateRows = $computed(() => {
-	if (props.mRows?.length) {return props.mRows.join(' ')}
-	return gridTemplateRows
+const mGridTemplateRows = computed(() => {
+	if (props.mRows?.length) { return props.mRows.join(' ') }
+	return gridTemplateRows.value
 })
 
-const gridTemplateColumns = $computed(() => (0 < props.columns.length ? props.columns.join(' ') : 'auto'))
+const gridTemplateColumns = computed(() => (props.columns.length > 0 ? props.columns.join(' ') : 'auto'))
 
-const mGridTemplateColumns = $computed(() => {
-	if (props.mColumns?.length) {return props.mColumns.join(' ')}
-	return gridTemplateColumns
+const mGridTemplateColumns = computed(() => {
+	if (props.mColumns?.length) { return props.mColumns.join(' ') }
+	return gridTemplateColumns.value
 })
 </script>
 

package/src/components/layout/SidebarMenu.vue

@@ -2,7 +2,7 @@
 import type { NavLink } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import { Btn, Card, Icon, useDebounceFn } from '@bagelink/vue'
-import { useSlots } from 'vue'
+import { ref, useSlots } from 'vue'
 
 const props = defineProps<{
 	navLinks?: NavLink[]
@@ -14,10 +14,10 @@ const emit = defineEmits(['update:open'])
 
 const slots: SetupContext['slots'] = useSlots()
 
-let isOpen = $ref(props.open)
+const isOpen = ref(props.open)
 const toggleMenu = useDebounceFn(() => {
-	isOpen = !isOpen
-	emit('update:open', isOpen)
+	isOpen.value = !isOpen.value
+	emit('update:open', isOpen.value)
 })
 </script>
 

package/src/components/layout/TabbedLayout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Raw } from 'vue'
 import type { Router } from 'vue-router'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const props = defineProps<{
 	title?: string
@@ -13,11 +13,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue'])
 
-let activeTab = $ref<string>()
+const activeTab = ref<string>()
 function changeTab(tab: string) {
-	activeTab = tab
-	emit('update:modelValue', activeTab)
-	if (!props.router) {return}
+	activeTab.value = tab
+	emit('update:modelValue', activeTab.value)
+	if (!props.router) { return }
 	void props.router.push({
 		path: props.router.currentRoute.value.path,
 		query: { ...props.router.currentRoute.value.query, t: tab },
@@ -27,10 +27,10 @@ function changeTab(tab: string) {
 
 onMounted(() => {
 	const firstTab
-    = props.modelValue
-    	|| props.router?.currentRoute.value.query.t
-    	|| props.tabs[0]
-	activeTab = firstTab as string
+		= props.modelValue
+			|| props.router?.currentRoute.value.query.t
+			|| props.tabs[0]
+	activeTab.value = firstTab as string
 })
 </script>
 
@@ -58,25 +58,25 @@ onMounted(() => {
 
 <style scoped>
 .tab {
-  text-transform: capitalize;
+	text-transform: capitalize;
 }
 
 .side-tabs {
-  display: flex;
+	display: flex;
 }
 
 .side-tabs .tabs-top {
-  margin-inline-end: 1rem;
+	margin-inline-end: 1rem;
 }
 
 .side-tabs .tabs {
-  display: block;
-  padding: 0;
-  margin: 0;
-  border: none;
+	display: block;
+	padding: 0;
+	margin: 0;
+	border: none;
 }
 
 .side-tabs .tab {
-  border: none;
+	border: none;
 }
 </style>

package/src/components/layout/Tabs.vue

@@ -2,7 +2,7 @@
 import type { Tab } from '@bagelink/vue'
 import type { SetupContext, VNode } from 'vue'
 import { TabsNav } from '@bagelink/vue'
-import { defineComponent, h, useSlots } from 'vue'
+import { computed, defineComponent, h, useSlots } from 'vue'
 
 import { useTabs } from './tabsManager'
 
@@ -17,9 +17,9 @@ const slots: SetupContext['slots'] = useSlots()
 const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 
-const tabValue = (tab: Tab) => ('string' === typeof tab ? tab : tab.id)
+const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
 
-const slctTab = $computed({
+const slctTab = computed({
 	get: () => props.modelValue || tabValue(props.tabs[0]),
 	set: (value) => {
 		emit('update:modelValue', value)
@@ -31,7 +31,7 @@ const tabComponent = defineComponent({
 		const currentTabIndex = props.tabs.findIndex(
 			tab => tabValue(tab) === currentTab.value
 		)
-		if (-1 === currentTabIndex) {return}
+		if (currentTabIndex === -1) { return }
 		const slotChildren = slots.default?.()[1]?.children
 
 		return h('div', (slotChildren as VNode[])[currentTabIndex])
@@ -39,7 +39,6 @@ const tabComponent = defineComponent({
 })
 </script>
 
-z
 <template>
 	<TabsNav v-model="slctTab" :flat="flat" :tabs="tabs" :group class="mb-05" />
 	<div v-if="currentTab">

package/src/components/layout/TabsNav.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue'])
 const { currentTab } = useTabs(props.group)
 currentTab.value
-  = props.modelValue || 'string' === typeof props.tabs[0]
+  = props.modelValue || typeof props.tabs[0] === 'string'
 		? props.tabs[0]
 		: props.tabs[0].id
 
@@ -32,13 +32,13 @@ const tabs = ref<HTMLElement[]>([])
 
 function updateIndicator() {
 	nextTick(() => {
-		if (!tabsWrap.value) {return}
+		if (!tabsWrap.value) { return }
 		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
 		if (activeTab) {
 			// Wait a bit more to ensure CSS is fully loaded and elements are properly sized
 			setTimeout(() => {
 				const { offsetLeft, offsetWidth } = activeTab
-				if (0 <= offsetLeft && 0 < offsetWidth) { // Ensure valid measurements
+				if (offsetLeft >= 0 && offsetWidth > 0) { // Ensure valid measurements
 					tabsWrap.value?.style.setProperty('--indicator-left', `${offsetLeft}px`)
 					tabsWrap.value?.style.setProperty('--indicator-width', `${offsetWidth}px`)
 					tabsWrap.value?.style.setProperty('--indicator-opacity', '1')
@@ -49,25 +49,25 @@ function updateIndicator() {
 }
 
 function selectTab(tab: TabType | string) {
-	currentTab.value = 'string' === typeof tab ? tab : tab.id
+	currentTab.value = typeof tab === 'string' ? tab : tab.id
 	emit('update:modelValue', currentTab.value)
 	nextTick(() => { updateIndicator() })
 }
 
 function isActive(tab: TabType | string) {
-	if ('string' === typeof tab) {return currentTab.value === tab}
+	if (typeof tab === 'string') { return currentTab.value === tab }
 	return currentTab.value === tab.id
 }
 
 function tabLabel(tab: TabType | string) {
-	if ('string' === typeof tab) {return tab}
+	if (typeof tab === 'string') { return tab }
 	return tab.label
 }
 
 watch(
 	() => props.modelValue,
 	(value) => {
-		if (value && !isActive(value)) {currentTab.value = value}
+		if (value && !isActive(value)) { currentTab.value = value }
 		nextTick(() => { updateIndicator() })
 	},
 	{ immediate: true }
@@ -97,14 +97,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }">
-	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
-		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="{ active: isActive(tab) }" class="bgl_tab relative z-1" @click="selectTab(tab)">
-			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
-			{{ tabLabel(tab) }}
-		</button>
+	<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }">
+		<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
+			<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="{ active: isActive(tab) }" class="bgl_tab relative z-1" @click="selectTab(tab)">
+				<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
+				{{ tabLabel(tab) }}
+			</button>
 		</slot>
-		</div>
+	</div>
 </template>
 
 <style scoped>

package/src/components/layout/index.ts

@@ -1,3 +1,6 @@
+export { default as AppContent } from './AppContent.vue'
+export { default as AppLayout } from './AppLayout.vue'
+export { default as AppSidebar } from './AppSidebar.vue'
 export { default as BottomMenu } from './BottomMenu.vue'
 export { default as Layout } from './Layout.vue'
 export { default as SidebarMenu } from './SidebarMenu.vue'
@@ -6,8 +9,3 @@ export { default as TabbedLayout } from './TabbedLayout.vue'
 export { default as Tabs } from './Tabs.vue'
 export { default as TabsBody } from './TabsBody.vue'
 export { default as TabsNav } from './TabsNav.vue'
-export { default as AppContent } from './AppContent.vue'
-export { default as AppLayout } from './AppLayout.vue'
-export { default as AppSidebar } from './AppSidebar.vue'
-
-