@bagelink/vue 0.0.25 → 0.0.35

package/src/components/PersonPreviewFormkit.vue

@@ -0,0 +1,205 @@
+<template>
+	<div
+		@click="onClick"
+		class="person-card"
+		v-if="person"
+	>
+		<div
+			class="person-card-edit flex gap-2"
+			v-if="!onClick"
+		>
+			<Btn
+				@click="hideModal"
+				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 {
+	useModal, initials,
+} from '@/utils';
+import { Btn, MaterialIcon } from '@/components';
+
+// const toast = useToast(); // TODO: use toast
+const bagel = useBagel();
+const { modalForm, hideModal } = useModal();
+
+const props = defineProps<{
+	context: Record<string, any>;
+	// eslint-disable-next-line no-unused-vars
+	onClick?: ((event: MouseEvent) => void);
+	personSchema: () => FormKitSchemaDefinition;
+}>();
+
+const person = $computed<Person>(() => props.context.value);
+
+const showEditForm = async () => {
+	const { first_name, last_name } = person;
+	modalForm({
+		side: true,
+		title: `${first_name} ${last_name}`,
+		schema: props.personSchema,
+		modelValue: person,
+		onSubmit: (newPerson) => bagel.put('/person', newPerson),
+		// .then(() => toast.success($t('updatedSuccessfully'))), // TODO: use toast
+	});
+};
+</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>

package/src/components/RTXEditor.vue

@@ -0,0 +1,151 @@
+<template>
+	<!-- :class="{ editable: editable }" -->
+	<div
+		@click="focusEditor"
+		:id="`canvas-${elementId}`"
+		@keydown.meta.enter="$emit('keydown.meta.enter')"
+	/>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { DOMParser, DOMSerializer } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap } from 'prosemirror-commands';
+import { undo, redo, history } from 'prosemirror-history';
+import { schema } from 'prosemirror-schema-basic';
+
+const props = withDefaults(
+	defineProps<{
+		elementId?: string;
+		modelValue: string;
+	}>(),
+	{
+		elementId: Math.random().toString(36).substr(2, 9),
+		modelValue: '',
+	},
+);
+
+const emit = defineEmits(['update:modelValue', 'keydown.meta.enter']);
+
+const html = ref<string>(props.modelValue);
+let view: EditorView;
+
+const createEditorStateFromHTML = (htmlContent: string) => {
+	let content = { type: 'doc', content: [] };
+	try {
+		const dom = document.createElement('div');
+		dom.innerHTML = htmlContent || '';
+		content = DOMParser.fromSchema(schema)
+			.parse(dom, { preserveWhitespace: true })
+			.toJSON();
+	} catch (err) {
+		content = { type: 'doc', content: [] };
+	}
+
+	const state = EditorState.create({
+		doc: DOMParser.fromSchema(schema).schema.nodeFromJSON(content),
+		plugins: [
+			history(),
+			keymap({ 'Mod-z': undo, 'Mod-y': redo }),
+			keymap(baseKeymap),
+		],
+	});
+
+	return state;
+};
+
+function handleChange(newState: any) {
+	const dom = document.createElement('div');
+	const node = DOMSerializer.fromSchema(schema).serializeFragment(newState);
+	dom.appendChild(node);
+	html.value = dom?.innerHTML || '';
+	emit('update:modelValue', html.value);
+}
+
+const createEditorView = (state: EditorState) => {
+	const editorDiv = document.getElementById(`canvas-${props.elementId}`);
+	view = new EditorView(editorDiv, {
+		state,
+		// editable: () => props.editable,
+		dispatchTransaction(transaction) {
+			const newState = view.state.apply(transaction);
+			handleChange(newState.doc);
+			view.updateState(newState);
+		},
+	});
+	view.setProps({
+		// editable: () => props.editable,
+	});
+};
+
+function loadContent() {
+	const state = createEditorStateFromHTML(props.modelValue);
+	createEditorView(state);
+}
+
+watch(
+	() => props.modelValue,
+	(val: string) => {
+		if (val === html.value) return;
+		const el = document.getElementById(`canvas-${props.elementId}`);
+		if (el) el.innerHTML = '';
+		loadContent();
+	},
+);
+
+onMounted(loadContent);
+
+function focusEditor() {
+	view.focus();
+}
+</script>
+
+<style>
+.new-comment .ProseMirror {
+	width: 100%;
+	height: 100%;
+	border-radius: 3px;
+	padding: 0.55rem;
+	min-height: 40px;
+}
+
+.new-comment .ProseMirror p {
+	margin: 0;
+}
+
+.comment-input .ProseMirror {
+	background-color: var(--bgl-bg);
+	margin-inline-start: 0;
+}
+
+.new-comment .editable {
+	background-color: var(--bgl-bg);
+}
+
+.ProseMirror-focused {
+	outline: none;
+	border: none;
+	box-shadow: inset 0 0 10px #00000012;
+}
+
+.ProseMirror,
+.editor-wrapper {
+	height: 100%;
+	border-radius: 3px;
+	padding: 0.55rem;
+	border-radius: var(--btn-border-radius);
+	margin-inline-start: 1rem;
+}
+
+.ProseMirror p,
+.editor-wrapper p {
+	margin: 0;
+}
+
+.editable .ProseMirror {
+	background-color: var(--bgl-bg);
+}
+</style>

package/src/components/RouterWrapper.vue

@@ -0,0 +1,17 @@
+<template>
+	<router-view v-slot="{ Component, route }">
+		<transition
+			:duration="300"
+			name="slide-fade"
+			mode="out-in"
+			appear
+		>
+			<component
+				:is="Component"
+				:key="route?.params.itemID"
+			/>
+		</transition>
+	</router-view>
+</template>
+
+<script lang="ts" setup></script>

package/src/components/TabbedLayout.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="h-100 grid list-view gap-3">
+		<div class="card tabs-top">
+			<slot name="top-section" />
+			<div class="tabs grid auto-flow-columns fit-content">
+				<div
+					v-for="tab in tabs"
+					:class="{
+						active:
+							tab === activeTab ||
+							tab === router.currentRoute.value.path.split('/').slice(-1)[0],
+					}"
+					class="tab"
+					:key="tab"
+					@click="changeTab(tab)"
+				>
+					{{ tab }}
+				</div>
+			</div>
+		</div>
+		<!-- <TransitionRouterView v-if="baseRoute" /> -->
+		<div
+			class="list-content"
+			v-for="tab in tabs.filter((item) => item === activeTab)"
+			:key="tab"
+		>
+			<slot
+				:name="tab"
+				:key="tab"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import type { Router } from 'vue-router';
+
+const emit = defineEmits(['update:modelValue']);
+
+let activeTab = $ref<string>();
+const props = defineProps<{
+	title?: string;
+	tabs: string[];
+	modelValue?: string;
+	router: Router
+}>();
+
+function changeTab(tab: string) {
+	const { router } = props;
+	activeTab = tab;
+	void router.push({
+		path: router.currentRoute.value.path,
+		query: { ...router.currentRoute.value.query, t: tab },
+		hash: router.currentRoute.value.hash,
+	});
+	emit('update:modelValue', activeTab);
+}
+
+onMounted(() => {
+	const firstTab = props.modelValue || props.router.currentRoute.value.query.t || props.tabs[0];
+	activeTab = firstTab as string;
+});
+</script>
+
+<style scoped>
+.tab {
+	text-transform: capitalize;
+}
+
+/* .top-section {
+	grid-area: top-section;
+	font-size: 10px;
+}
+
+.detail-section {
+	grid-area: detail-section;
+} */
+.card.tabs-top {
+	width: 99%;
+
+}
+</style>

package/src/components/TableSchema.vue

@@ -0,0 +1,248 @@
+<template>
+	<div class="table-list-wrap h-100">
+		<!-- <div v-for="field in schema" :key="field.id">{{ parseLocale(field.label) }}</div> -->
+		<table class="infinite-wrapper">
+			<thead class="row first-row">
+				<th
+					class="col"
+					v-for="field in columns"
+					:key="field.id"
+					@click="sort(field.id)"
+				>
+					<div class="flex">
+						{{ parseLocale(field.label || field.id) }}
+						<div
+							class="list-arrows"
+							:class="{ sorted: sortField === field.id }"
+						>
+							<MaterialIcon
+								:class="{ desc: sortDirection === 'DESC' }"
+								icon="keyboard_arrow_up"
+							/>
+						</div>
+					</div>
+				</th>
+			</thead>
+			<tbody
+				ref="infinite"
+				class="rows infinite"
+				:class="{ loading }"
+			>
+				<tr
+					@click="selectElement(row)"
+					class="row row-item position-relative"
+					v-for="row in data"
+					:key="row.id"
+				>
+					<td
+						class="col"
+						v-for="field in columns"
+						:key="`${field.id}-${row.id}`"
+					>
+						<slot
+							v-if="slots[field.id]"
+							:name="field.id"
+							:row="row"
+							:field="field"
+						/>
+						<div v-else>
+							<component
+								:is="field.$el || field.$cmp || 'div'"
+								v-if="field['v-if'] ? field['v-if'](row[field.id], row) : true"
+								v-bind="bindAttrs(field.attrs, row[field.id], row)"
+								:src="field.$el === 'img' ? row[field.id]?.url : ''"
+							>
+								{{ field?.transform?.(row[field.id], row) || row[field.id] || '' }}
+							</component>
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<!-- </Transition> -->
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue';
+import { MaterialIcon } from '@/components';
+import { parseLocale } from '@/utils';
+
+const slots = useSlots();
+const loading = $ref(true);
+
+const props = defineProps<{
+	data: any[];
+	schema?: any[];
+}>();
+
+const emit = defineEmits(['select']);
+
+const selectElement = (data: Record<string, any>) => {
+	emit('select', data);
+};
+
+const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
+	const arr = Object.entries(
+		attrs || {},
+	)
+		.map(
+			([key, value]) => [
+				key, typeof value === 'function' ? value(field, row) : value,
+			],
+		);
+	const resolvedAttrs = Object.fromEntries(arr);
+	return resolvedAttrs;
+};
+
+// const sortList = () => {};
+let sortDirection = $ref('');
+let sortField = $ref('');
+
+const sort = (fieldname: string) => {
+	if (sortField === fieldname) {
+		if (sortDirection === 'ASC') sortDirection = 'DESC';
+		else sortField = '';
+	} else {
+		sortField = fieldname;
+		sortDirection = 'ASC';
+	}
+};
+
+const columns = $computed(
+	() => (
+		props.schema ||
+		Object.keys(props.data[0]).map((k: string) => ({
+			id: k,
+			inputType: 'PlainText',
+		}))),
+);
+</script>
+
+<style scoped>
+.list-arrows {
+	opacity: 0;
+}
+
+.list-arrows .icon-font {
+	transition: all ease-in-out 0.2s;
+}
+
+.list-arrows.sorted {
+	opacity: 1;
+}
+
+.col img {
+	height: 35px;
+	margin-top: -14px;
+	margin-bottom: -14px;
+	border-radius: 5px;
+}
+
+.list-arrows.sorted .desc {
+	transform: rotate(180deg);
+}
+
+table {
+	border-collapse: separate;
+	border-spacing: 0 15px;
+	border-collapse: collapse;
+}
+
+th {
+	font-weight: 400;
+}
+
+.row {
+	border-bottom: 1px solid var(--border-color);
+	cursor: pointer;
+}
+
+.row.first-row {
+	font-size: 0.8rem;
+	color: var(--bgl-black-tint);
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--bgl-white);
+	height: 50px;
+	vertical-align: bottom;
+}
+
+.row.first-row::after {
+	content: '';
+	border-bottom: 1px solid var(--border-color);
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: -1px;
+}
+
+.first-row .col {
+	cursor: pointer;
+	background: var(--bgl-white);
+}
+
+.col {
+	white-space: nowrap;
+	padding: 14px;
+	transition: var(--bgl-transition);
+	line-height: 1;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	align-items: center;
+}
+
+.col>div {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.max-col-width {
+	max-width: 30vw;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.col.check .icon-font {
+	border-radius: 100%;
+	background: var(--bgl-blue-20);
+	color: var(--bgl-blue);
+	width: 20px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: -2px;
+}
+
+.rows {
+	font-size: 0.8125em;
+}
+
+.table-list {
+	height: 100%;
+	position: relative;
+	padding-left: 0 !important;
+	padding-right: 0 !important;
+	overflow: auto;
+}
+
+.BagelTable .table-list {
+	overflow: unset;
+}
+
+.row-item {
+	height: 50px;
+	transition: all 200ms ease;
+}
+
+.row-item:hover {
+	background: var(--bgl-gray-light);
+}
+
+.infinite-wrapper {
+	overflow-y: auto;
+	width: 100%;
+}
+</style>

package/src/components/TopBar.vue

@@ -0,0 +1,5 @@
+<template>
+	<div class="flex space-between">
+		<slot />
+	</div>
+</template>