fiery-rabbit 0.0.1

package/src/components/layout/src/layout-main.vue

@@ -0,0 +1,429 @@
+<template>
+	<div
+		:class="{
+			'static-fold': layoutContext.staticMenuFold && layoutContext.menuType === 'Static',
+			hover: layoutContext.revealMenuHover,
+		}"
+		class="layout-content-wrapper"
+	>
+		<div
+			class="top-bar flex justify-content-between align-items-center"
+			:style="{
+				borderBottom: layoutContext.menuType === 'Horizontal' ? '0 none' : 'var(--border)',
+			}"
+		>
+			<div class="left flex align-items-center">
+				<Button
+					v-if="layoutContext.menuType === 'Static'"
+					:icon="PrimeIcons.ALIGN_JUSTIFY"
+					text
+					rounded
+					aria-label="ALIGN_JUSTIFY"
+					class="sidebar-menu-fold-btn ml-3 w-2rem h-2rem"
+					@click="() => (layoutContext.staticMenuFold = !layoutContext.staticMenuFold)"
+				/>
+				<Button
+					v-else-if="layoutContext.menuType === 'Overlay'"
+					:icon="PrimeIcons.ALIGN_JUSTIFY"
+					text
+					rounded
+					aria-label="ALIGN_JUSTIFY"
+					class="sidebar-menu-fold-btn ml-3 w-2rem h-2rem"
+					@click="() => (layoutContext.overlayMenuFold = !layoutContext.overlayMenuFold)"
+				/>
+				<Breadcrumb
+					class="layout-breadcrumb ml-2"
+					:home="home"
+					:model="breadcrumbs"
+				>
+					<template #item="{ item }">
+						<div class="flex align-items-center gap-2">
+							<i :class="`${item.icon} item-icon`"></i>
+							<span
+								:id="`text-${item.id}`"
+								v-tooltip.bottom="{ value: item.tooltip, autoHide: false }"
+								:style="{
+									color: layoutContext?.selectedMenu?.id === item.id ? 'var(--primary-color)' : 'var(--text-color)',
+								}"
+								class="inline-block max-w-12rem text-overflow-ellipsis overflow-hidden white-space-nowrap"
+								>{{ item.label }}</span
+							>
+						</div>
+					</template>
+					<template #separator> / </template>
+				</Breadcrumb>
+			</div>
+			<div class="right flex justify-content-between align-items-center mr-4">
+				<template v-if="commonTools?.length">
+					<template
+						v-for="toolMenu in commonTools"
+						:key="toolMenu"
+					>
+						<Button
+							v-if="toolMenu.visible"
+							v-tooltip.bottom="toolMenu.label"
+							:icon="toolMenu.icon"
+							outlined
+							rounded
+							:arial-label="toolMenu.label"
+							class="w-2rem h-2rem ml-2 px-2"
+							@click="(event: Event) =>toolMenu?.command && toolMenu?.command(toolMenu, event)"
+						/>
+					</template>
+				</template>
+				<template v-if="layoutContext.showNotifications">
+					<Button
+						v-if="notificationTotalBadge > 0"
+						v-badge="notificationTotalBadge"
+						:icon="PrimeIcons.BELL"
+						rounded
+						outlined
+						aria-label="notification"
+						class="w-2rem h-2rem ml-2 overflow-visible"
+						@click="(event) => handleToggleNotificationPanel(event)"
+					/>
+					<Button
+						v-else
+						:icon="PrimeIcons.BELL"
+						rounded
+						outlined
+						aria-label="notification"
+						class="w-2rem h-2rem ml-2 overflow-visible"
+						@click="(event) => handleToggleNotificationPanel(event)"
+					/>
+				</template>
+				<OverlayPanel
+					ref="notificationOpRef"
+					appendTo="self"
+				>
+					<ul
+						v-if="notifications?.length"
+						:style="{ width: width ?? 'auto', height: 'auto' }"
+						class="notification-list my-0 mx-auto"
+					>
+						<li
+							v-for="(menu, index) in notifications"
+							:key="index"
+							class="notification-item"
+							:style="{ height: menu.separator ? '1px' : 'auto' }"
+						>
+							<div
+								class="separator-line"
+								v-if="menu.separator"
+							></div>
+							<div
+								v-else
+								v-ripple
+								class="p-ripple item-content cursor-pointer flex align-items-center"
+								@click="(event) => (notificationOpRef.toggle(event), menu?.command && menu?.command(menu, event))"
+							>
+								<i
+									v-if="menu.icon?.length"
+									:class="menu.icon"
+									class="mr-1"
+								/>
+								<span :class="{ 'mr-2': menu?.quantity && menu?.quantity > 0 }">{{ menu.label }}</span>
+								<Badge
+									v-if="menu?.quantity && menu?.quantity > 0"
+									:value="menu.quantity"
+								/>
+							</div>
+						</li>
+					</ul>
+					<div
+						v-else
+						class="w-8rem h-10rem empty flex justify-content-center align-items-center"
+					>
+						{{ t('noData') }}
+					</div>
+				</OverlayPanel>
+				<Button
+					:icon="PrimeIcons.COG"
+					rounded
+					outlined
+					aria-label="configuration"
+					class="w-2rem h-2rem ml-2"
+					@click="() => (layoutContext.settingVisible = true)"
+				/>
+				<div class="user-tool ml-2">
+					<div class="avatar relative">
+						<div class="avatar-btn py-1 px-2">
+							<Avatar
+								v-if="avatar?.length"
+								:image="avatar"
+								shape="circle"
+							/>
+							<Avatar
+								v-else
+								:icon="PrimeIcons.USER"
+								shape="circle"
+								style="color: var(--text-color)"
+							/>
+							<span
+								:class="{
+									'ml-2': user?.length,
+								}"
+								style="color: var(--text-color)"
+								>{{ user ?? '' }}</span
+							>
+						</div>
+						<div
+							:style="{
+								top: layoutContext.menuType === 'Horizontal' ? '5.8rem' : '2.8rem',
+								right: '2rem',
+							}"
+							class="menu fixed overflow-hidden"
+						>
+							<ul
+								v-if="userMenus?.length"
+								:style="{ width: width ?? 'auto', height: 'auto' }"
+								class="user-menu-list my-0 mx-auto"
+							>
+								<li
+									v-for="(userMenu, index) in userMenus"
+									:key="index"
+									class="user-menu-item"
+									:style="{ height: userMenu.separator ? '1px' : 'auto' }"
+								>
+									<div
+										class="separator-line"
+										v-if="userMenu.separator"
+									></div>
+									<div
+										v-else
+										v-ripple
+										class="p-ripple item-content cursor-pointer flex align-items-center"
+										@click="(event) => userMenu?.command && userMenu?.command(userMenu, event)"
+									>
+										<i
+											:class="userMenu.icon"
+											class="mr-1"
+										/>
+										<span>{{ userMenu.label }}</span>
+									</div>
+								</li>
+							</ul>
+							<div
+								v-else
+								class="w-8rem h-10rem empty flex justify-content-center align-items-center"
+							>
+								{{ t('noData') }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<ScrollPanel style="width: 100%; height: calc(100vh - 3rem)">
+			<div class="layout-content">
+				<router-view />
+			</div>
+			<ScrollTop
+				target="parent"
+				:threshold="100"
+				:pt="{
+					root: {
+						style: {
+							transform: `translateY(${layoutContext.menuType === 'Horizontal' ? -3 : 0}rem)`,
+						},
+					},
+				}"
+			/>
+		</ScrollPanel>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRef, inject, watch, nextTick } from 'vue';
+import Avatar from 'primevue/avatar';
+import Button from 'primevue/button';
+import Breadcrumb from 'primevue/breadcrumb';
+import { PrimeIcons } from 'primevue/api';
+import { useI18n } from 'vue-i18n';
+import { MenuItem } from 'primevue/menuitem';
+import { IToolMenuItem, INotification } from './layout.vue';
+import ScrollTop from 'primevue/scrolltop';
+import ScrollPanel from 'primevue/scrollpanel';
+import OverlayPanel from 'primevue/overlaypanel';
+import Badge from 'primevue/badge';
+
+interface Item extends MenuItem {
+	id: string;
+	expand: boolean;
+	level: number;
+	active: boolean;
+	parentId: string;
+	items: Item[];
+}
+
+interface IProps {
+	userMenus?: IToolMenuItem[];
+	commonTools?: IToolMenuItem[];
+	notifications?: INotification[];
+}
+
+const generateUniqueId = (): string => {
+	const timestamp = Date.now().toString(36);
+	const randomPart = Math.random().toString(36).substring(2);
+	return timestamp + randomPart;
+};
+
+const formatModel = (model: Item[] | undefined, level = 0, parentId = '0'): Item[] => {
+	if (model?.length) {
+		level++;
+		model = model.map((item: Item) => {
+			item.level = level;
+			item.expand = false;
+			item.active = false;
+			item.parentId = parentId;
+			item.id = item?.id ?? generateUniqueId();
+			if (!item?.items?.length) {
+				const tempCommand = item?.command;
+				item.command = (event) => {
+					event?.item && (layoutContext.selectedMenu = event.item);
+					tempCommand && tempCommand(event);
+				};
+			}
+			item?.items?.length && (item.items = formatModel(item.items, level, item.id));
+			return item;
+		});
+	}
+	return model as Item[];
+};
+
+const layoutContext: any = inject('layout', undefined);
+
+const props = defineProps<IProps>();
+const userMenus = toRef(props, 'userMenus');
+const commonTools = toRef(props, 'commonTools');
+const notifications = toRef(props, 'notifications');
+const avatar = layoutContext?.userTool?.avatar;
+const user = layoutContext?.userTool?.user;
+const width = layoutContext?.userTool?.width;
+const { t } = useI18n();
+const menus = ref<Item[]>(
+	layoutContext.menuType === 'Horizontal' ? formatModel(layoutContext.menus) : layoutContext.menus,
+);
+const home = ref<MenuItem>();
+const breadcrumbs = ref<MenuItem[]>([]);
+const notificationOpRef = ref();
+const notificationTotalBadge = ref<number>(0);
+
+const findAllParents = (model: Item[], currentItem: Item, initialModel: Item[], parentMenus: Item[]): Item[] => {
+	model?.length &&
+		model.forEach((menu: Item) => {
+			if (menu.id === currentItem.parentId) {
+				parentMenus.push(menu);
+				parentMenus = findAllParents(initialModel, menu, initialModel, parentMenus);
+			}
+			menu?.items?.length && (parentMenus = findAllParents(menu.items, currentItem, initialModel, parentMenus));
+		});
+	return parentMenus;
+};
+
+watch(
+	() => layoutContext.selectedMenu,
+	(val) => {
+		if (!val?.items?.length) {
+			let allParentMenus = [];
+			if (val.parentId !== '0') {
+				allParentMenus = findAllParents(menus.value, val, menus.value, []);
+				allParentMenus = [...allParentMenus].reverse();
+				allParentMenus.push({
+					id: val.id,
+					icon: val.icon,
+					label: val.label,
+				} as Item);
+				home.value = {
+					id: allParentMenus[0].id,
+					icon: allParentMenus[0].icon,
+					label: allParentMenus[0].label,
+				};
+				breadcrumbs.value = allParentMenus.reduce((arr: MenuItem[], item: Item, index: number) => {
+					index > 0 &&
+						arr.push({
+							id: item.id,
+							label: item.label,
+							icon: item.icon,
+						});
+					return arr;
+				}, []);
+			} else {
+				home.value = {
+					id: val.id,
+					icon: val.icon,
+					label: val.label,
+				};
+				breadcrumbs.value = [];
+			}
+			nextTick(() => {
+				const homeDom = document.querySelector(`#text-${home.value!.id}`);
+				home.value!.tooltip = homeDom && homeDom.scrollWidth > homeDom.clientWidth ? home.value!.label : '';
+				breadcrumbs.value?.length &&
+					(breadcrumbs.value = breadcrumbs.value.map((item: MenuItem) => {
+						const dom = document.querySelector(`#text-${item.id}`);
+						item.tooltip = dom && dom.scrollWidth > dom.clientWidth ? item.label : '';
+						return item;
+					}));
+			});
+		}
+	},
+	{ deep: true },
+);
+
+watch(
+	() => layoutContext.menuType,
+	(val) => (menus.value = val === 'Horizontal' ? formatModel(layoutContext.menus) : layoutContext.menus),
+);
+
+watch(
+	notifications,
+	(val) => {
+		if (val?.length) {
+			notificationTotalBadge.value = 0;
+			val.forEach((item: INotification) => {
+				item?.quantity && (notificationTotalBadge.value += item.quantity);
+			});
+		}
+	},
+	{ deep: true },
+);
+
+const handleToggleNotificationPanel = (event: Event) => notificationOpRef.value.toggle(event);
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>
+
+<style lang="scss">
+.notification-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+
+	.notification-item {
+		color: var(--text-color);
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		.item-content {
+			height: 2.4rem;
+			line-height: 2.4rem;
+			padding: 0 1.2rem;
+
+			&:hover {
+				background: var(--surface-hover);
+			}
+		}
+
+		.separator-line {
+			width: 100%;
+			height: 1px;
+			border-top: var(--border);
+		}
+	}
+}
+</style>