@bagelink/vue 0.0.25 → 0.0.35

package/src/components/NavBar.vue

@@ -0,0 +1,353 @@
+<template>
+	<div :class="{ open: isOpen, closed: !isOpen }">
+		<slot name="top" />
+		<div
+			class="nav-expend"
+			@click="isOpen = !isOpen"
+			@keypress.enter="isOpen = !isOpen"
+			role="button"
+			aria-label="Toggle Navigation"
+			tabindex="0"
+		>
+			<div class="icon-font top-arrow">
+				chevron_right
+			</div>
+		</div>
+
+		<div class="full-nav">
+			<div class="nav-scroll">
+				<div class="nav-links-wrapper">
+					<RouterLink
+						v-for="link in links"
+						class="nav-button"
+						:to="link.to"
+						:key="link.label"
+					>
+						<div class="icon-font">
+							{{ link.materialIcon }}
+						</div>
+						<div class="tooltip">
+							{{ link.localized ? link.localized : link.label }}
+						</div>
+					</RouterLink>
+				</div>
+			</div>
+
+			<div class="bot-buttons-wrapper">
+				<slot name="floor" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+// import LangText from "../translation/LangText.vue"
+import type { MaterialIcons } from '@/types/materialIcons';
+
+const isOpen = $ref(true);
+
+withDefaults(
+	defineProps<{
+		links?: { label: string; to: string; materialIcon: MaterialIcons, localized?: string }[];
+		homeIcon?: MaterialIcons;
+		homeLabel?: string;
+		homeTo?: string;
+	}>(),
+	{
+		homeIcon: 'home',
+		homeLabel: 'Home',
+		homeTo: '/',
+	},
+);
+</script>
+
+<style>
+[dir='rtl'] .top-arrow {
+	transform: rotate(180deg);
+}
+
+.nav-expend {
+	text-align: center;
+	cursor: pointer;
+	background: var(--bgl-white);
+	color: var(--bgl-blue);
+	display: flex;
+	border-radius: 100%;
+	font-size: 13px;
+	box-shadow: 0 0 50px 0 var(--bgl-shadow);
+	height: 22px;
+	width: 22px;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 82px;
+	box-sizing: border-box;
+	padding-inline-start: 2px;
+	margin-inline-start: 55px;
+	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
+}
+
+/*
+.nav-home-wrapper {
+	margin-bottom: 30px;
+}
+*/
+
+.nav-expend {
+	background: white;
+}
+
+.nav-expend:hover {
+	filter: brightness(95%);
+	box-shadow: 0 0 20px 0 var(--bgl-blue-tint);
+}
+
+.nav-expend:active {
+	filter: var(--bgl-active-filter);
+}
+
+.nav {
+	color: var(--bgl-white);
+	background: var(--bgl-blue);
+	z-index: 100;
+	width: 70px;
+	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
+	display: flex;
+	flex-direction: column;
+}
+
+.nav * {
+	user-select: none;
+}
+
+.nav-button {
+	text-decoration: none;
+	cursor: pointer;
+	display: flex;
+	text-align: start;
+	align-items: center;
+	position: relative;
+	color: var(--bgl-white);
+	transition: all 0.2s ease;
+	pointer-events: none;
+}
+
+.nav-button:hover {
+	width: fit-content;
+	pointer-events: all;
+}
+
+.nav-button .icon-font {
+	font-size: 22px;
+	margin: 0.25rem 10px;
+	padding: 10px;
+	width: 50px;
+	text-align: center;
+	height: 45px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	border-radius: 10px;
+	transition: all 0.2s ease;
+	pointer-events: all;
+}
+
+.nav-button:hover .icon-font,
+.nav-button.router-link-active .icon-font {
+	background: var(--bgl-white);
+	color: var(--bgl-blue);
+}
+
+.nav-button:hover .tooltip {
+	opacity: 1;
+	pointer-events: all;
+}
+
+.tooltip {
+	background-color: var(--bgl-white);
+	color: var(--bgl-blue);
+	line-height: 1;
+	padding: 0.5rem;
+	border-radius: 10px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+	transition: all 0.2s ease;
+	border: 5px solid transparent;
+	white-space: nowrap;
+	pointer-events: none;
+	opacity: 0;
+	margin-inline-start: 1rem;
+}
+
+.tooltip:hover {
+	filter: brightness(95%);
+}
+
+.tooltip:active {
+	filter: brightness(90%);
+}
+
+.bot-buttons-wrapper {
+	margin-top: auto;
+	width: 100%;
+}
+
+.nav-links-wrapper {
+	direction: ltr;
+}
+
+[dir='rtl'] .nav-links-wrapper {
+	direction: rtl;
+}
+
+.nav-scroll {
+	overflow-y: scroll;
+	width: 50vw;
+	direction: rtl;
+	text-align: end;
+	margin-inline-end: -7px;
+	pointer-events: none;
+	display: flex;
+	flex-direction: column;
+}
+
+.nav::-webkit-scrollbar-thumb {
+	background-color: transparent;
+}
+
+.nav:hover::-webkit-scrollbar-thumb {
+	background-color: var(--bgl-gray);
+}
+
+[dir='rtl'] .nav-scroll {
+	direction: ltr;
+}
+
+.full-nav {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+@media screen and (min-width: 910px) {
+	.nav.open .nav-expend {
+		margin-inline-start: 189px;
+		transform: rotate(180deg);
+	}
+
+	.nav.open {
+		width: 200px;
+		text-align: start;
+	}
+
+	.nav.open .tooltip {
+		background-color: transparent;
+		color: var(--bgl-white);
+		padding: 0;
+		box-shadow: none;
+		pointer-events: all;
+		opacity: 1;
+		margin-inline-start: 0rem;
+	}
+
+	.nav.open .nav-button .icon-font {
+		margin: 0;
+		background: transparent;
+	}
+
+	.nav.open .nav-button {
+		width: 180px;
+		border-radius: 10px;
+		margin-inline-start: 10px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+
+	.nav.open .nav-button:hover,
+	.nav.open .nav-button.router-link-active {
+		background: var(--bgl-white);
+		color: var(--bgl-blue);
+	}
+
+	.nav.open .nav-button:hover,
+	.nav.open .nav-button:hover .tooltip,
+	.nav.open .nav-button.router-link-active .tooltip {
+		color: var(--bgl-blue);
+	}
+}
+
+@media screen and (max-width: 910px) {
+	.full-nav {
+		height: auto;
+		display: flex;
+		flex-direction: row;
+		width: calc(100vw - 70px);
+		position: absolute;
+		inset-inline-end: 0;
+		overflow-x: auto;
+	}
+
+	.nav.open {
+		width: initial;
+	}
+
+	.nav {
+		width: auto;
+		display: flex;
+		flex-direction: row;
+		margin: 0;
+		overflow-x: auto;
+		justify-content: flex-start;
+	}
+
+	.tooltip {
+		opacity: 1;
+		background: transparent;
+		color: var(--bgl-white);
+		box-shadow: none;
+		font-size: 10px;
+		padding: 0;
+		margin: 0;
+	}
+
+	.nav-button {
+		flex-direction: column;
+		margin: 12px 0.25rem;
+	}
+
+	.nav-button .icon-font {
+		padding: 2px 0 0 0;
+		margin: 0;
+		height: 30px;
+		width: 30px;
+	}
+
+	.nav-links-wrapper {
+		display: flex;
+	}
+
+	.bot-buttons-wrapper {
+		margin-top: 0;
+		width: auto;
+		display: flex;
+	}
+
+	.nav-scroll {
+		overflow-y: visible;
+		width: auto;
+		direction: auto;
+		text-align: start;
+		margin-inline-end: 0px;
+		pointer-events: all;
+		display: flex;
+		flex-direction: row;
+		margin-inline-end: auto;
+	}
+
+	.nav::-webkit-scrollbar {
+		display: none;
+	}
+
+	.nav-expend {
+		display: none;
+	}
+}
+</style>

package/src/components/PageTitle.vue

@@ -0,0 +1,17 @@
+<template>
+	<div class="page-top">
+		<h1 class="top-title">
+			<slot />
+			{{ value }}
+		</h1>
+	</div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+	value: {
+		type: String,
+		default: '',
+	},
+});
+</script>

package/src/components/PersonPreview.vue

@@ -0,0 +1,203 @@
+<template>
+	<div
+		@click="onClick"
+		class="person-card"
+		v-if="person"
+	>
+		<div
+			class="person-card-edit flex gap-2"
+			v-if="!onClick"
+		>
+			<Btn
+				round
+				thin
+				icon.end="arrow_outward"
+				value="Profile"
+				v-if="!$route.path.match('/search')"
+				is="router-link"
+				:to="`/search/${person.id}`"
+			/>
+			<Btn
+				thin
+				flat
+				@click="showEditForm"
+				icon="edit"
+			/>
+		</div>
+		<div class="person-card-icon-wrap">
+			<p class="person-card-icon">
+				{{ initials(person.first_name, person.last_name) }}
+			</p>
+			<p class="person-card-name txt20">
+				{{ person.first_name }} {{ person.last_name }}
+			</p>
+		</div>
+
+		<div class="person-card-details-wrap">
+			<div
+				class="person-card-details"
+				v-if="person.phone?.length"
+			>
+				<MaterialIcon icon="phone" />
+				<p
+					v-for="phone in person.phone"
+					:key="phone.id"
+				>
+					{{ phone.phone }}
+				</p>
+			</div>
+			<div
+				class="person-card-details"
+				v-if="person.email?.length"
+			>
+				<MaterialIcon icon="email" />
+				<p
+					v-for="email in person.email"
+					:key="email.id"
+				>
+					{{ email.email }}
+				</p>
+			</div>
+			<div
+				class="person-card-details badge"
+				v-if="person.date_of_birth || person.gender"
+			>
+				<MaterialIcon icon="badge" />
+				<p v-if="person.date_of_birth">
+					{{ person.date_of_birth }}
+				</p>
+				<p v-if="person.gender">
+					{{ person.gender }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { useBagel } from 'src/plugins/bagel';
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { Person } from '@/types';
+import {
+	initials, useModal,
+} from '@/utils';
+import { Btn, MaterialIcon } from '@/components';
+
+// const toast = useToast(); // TODO: use toast
+const bagel = useBagel();
+const { modalForm } = useModal();
+
+const props = defineProps<{
+	person: Person;
+	// eslint-disable-next-line no-unused-vars
+	onClick?: ((event: MouseEvent) => void);
+	personSchema: () => FormKitSchemaDefinition;
+}>();
+
+const showEditForm = async () => {
+	const { first_name, last_name } = props.person;
+	modalForm({
+		side: true,
+		title: `${first_name} ${last_name}`,
+		schema: props.personSchema,
+		modelValue: props.person,
+		onSubmit: (newPerson) => bagel
+			.put('/person', newPerson),
+		// .then(() => toast.success($t('updatedSuccessfully'))),
+	});
+};
+</script>
+<style>
+.person-card {
+	border: 1.1px solid var(--border-color);
+	/* background: var(--input-bg); */
+	border-radius: var(--card-border-radius);
+	padding: 1rem;
+	margin-bottom: 0.5rem;
+	font-size: 1rem;
+	position: relative;
+}
+
+.person-card p {
+	margin: 0;
+}
+
+.person-card-details {
+	font-size: 14px;
+	margin-bottom: 2px;
+	line-height: 1.3;
+	display: flex;
+}
+
+.person-card-details p {
+	color: var(--input-color);
+	opacity: 0.6;
+}
+
+.person-card-details.badge p {
+	opacity: 1;
+}
+
+.person-card-details p:nth-child(2) {
+	opacity: 1;
+	padding-inline-end: 0.5rem;
+}
+
+.person-card-details .icon-font {
+	color: var(--bgl-blue);
+	padding-inline-end: 0.25rem;
+}
+
+.person-card-edit {
+	position: absolute;
+	inset-inline-end: 1rem;
+}
+
+.person-card-details-wrap {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.person-card-icon {
+	background: var(--bgl-gray);
+	height: 30px;
+	width: 30px;
+	border-radius: 100%;
+	text-transform: uppercase;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	font-size: 12px;
+}
+
+.person-card-icon-wrap {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	padding-bottom: 0.75rem;
+}
+
+@media screen and (max-width: 910px) {
+	.person-card-icon-wrap {
+		padding-bottom: 0.5rem;
+	}
+
+	.person-card {
+		padding: 0.75rem;
+		position: relative;
+	}
+
+	.person-card-edit {
+		/* position: relative; */
+		inset-inline-end: 0.5rem;
+		margin-bottom: 1rem;
+		justify-content: flex-end;
+	}
+
+	.person-card-name {
+		max-width: calc(100% - 170px);
+	}
+}
+</style>