@bagelink/vue 0.0.25 → 0.0.35

package/src/components/FormKitTable.vue

@@ -0,0 +1,299 @@
+<template>
+	<div class="table-list-wrap h-100">
+		<!-- <Transition name="fade">  -->
+		<div class="table-list">
+			<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">
+							{{ 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>
+								<div v-if="field.inputType === 'DateInput'">
+									{{ new Date(row[field.id]).toLocaleDateString() }}
+								</div>
+								<div v-else-if="field.inputType === 'CheckInput'">
+									<MaterialIcon
+										icon="check"
+										class="pill green"
+										v-if="row[field.id]"
+									/>
+									<MaterialIcon
+										icon="close"
+										class="pill"
+										v-else
+									/>
+								</div>
+								<div v-else-if="field.inputType === 'ItemRef' && row[field.id]">
+									<Btn
+										v-if="field.refCollection"
+										color="gray"
+										class="thin"
+										@click="
+											$router.push(
+												`/${field.refCollection}/${row[field.id].id}`,
+											)"
+									>
+										{{
+											field.refFields
+												?.map((k) => row[field.id][k])
+												.join(' ') || row[field.id].id
+										}}
+										<MaterialIcon icon="arrow_forward" />
+									</Btn>
+									<Btn
+										icon="receipt"
+										is="a"
+										thin
+										v-else-if="field.link"
+										:href="row[field.id][field.link]"
+										target="_blank"
+									>
+										{{
+											field.refFields
+												?.map((k) => row[field.id][k])
+												.join(' ') || row[field.id].id
+										}}
+									</Btn>
+									<div
+										class="pill"
+										v-else
+										:class="getPillClass(row, field)"
+									>
+										{{
+											field.refFields
+												?.map((k) => row[field.id][k])
+												.join(' ') || row[field.id].id
+										}}
+									</div>
+								</div>
+								<div
+									class="max-col-width"
+									v-else
+								>
+									{{ row[field.id] }}
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<!-- </Transition> -->
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue';
+import { BagelField } from '@/types';
+import { Btn, MaterialIcon } from '@/components';
+
+const slots = useSlots();
+const loading = ref(true);
+
+const props = defineProps<{
+	data: any[];
+	schema?: BagelField[];
+}>();
+
+const emit = defineEmits(['selectElement']);
+
+const selectElement = (data: Record<string, any>) => {
+	emit('selectElement', data);
+};
+
+// const sortList = () => {};
+const sortDirection = ref('');
+const sortField = ref('');
+
+const sort = (fieldname: string) => {
+	if (sortField.value === fieldname) {
+		if (sortDirection.value === 'ASC') sortDirection.value = 'DESC';
+		else sortField.value = '';
+	} else {
+		sortField.value = fieldname;
+		sortDirection.value = 'ASC';
+	}
+};
+
+const columns = computed<BagelField[]>(
+	(): BagelField[] => props.schema ||
+		Object.keys(props.data[0]).map((k: string) => ({
+			id: k,
+			inputType: 'PlainText',
+		})),
+);
+
+function getPillClass(row: Record<string, any>, field: BagelField) {
+	return field.refFields?.map((k) => row[field.id][k]).join(' ') || row[field.id].id;
+}
+</script>
+
+<style scoped>
+.Paid {
+	background-color: var(--bgl-green);
+	color: white;
+}
+
+.Error {
+	background-color: var(--bgl-red-tint);
+	color: var(--bgl-red)
+}
+
+.list-arrows {
+	opacity: 0;
+}
+
+.list-arrows .icon-font {
+	transition: all ease-in-out 0.2s;
+}
+
+.list-arrows.sorted {
+	opacity: 1;
+}
+
+.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/FormSchema.vue

@@ -0,0 +1,79 @@
+<template>
+	<div>
+		<FormKit
+			type="form"
+			:modelValue="modelValue"
+			@update:modelValue="handleEmit"
+			@submit="runSubmit"
+			:submitLabel="$t('save')"
+		>
+			<FormKitSchema
+				:schema="schema"
+				:data="data"
+			/>
+		</FormKit>
+		<Btn
+			class="del-top"
+			v-if="modelValue?.id && onDelete"
+			@click="runDelete"
+			value="Delete"
+			flat
+			icon="delete"
+			color="red"
+			thin
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { type FormKitSchemaDefinition } from '@formkit/core';
+
+import { Btn } from '@/components';
+import { useModal } from '@/utils';
+
+const { showModal } = useModal();
+const emits = defineEmits(['update:modelValue', 'submit']);
+const handleEmit = (val: any) => emits('update:modelValue', val);
+const runSubmit = (val: any) => emits('submit', val);
+
+const props = withDefaults(defineProps<{
+	modelValue?: any;
+	schema: FormKitSchemaDefinition;
+	// eslint-disable-next-line no-unused-vars
+	onDelete?: ((id: string) => void);
+	// eslint-disable-next-line no-unused-vars
+	$t: (key: string) => string;
+}>(), {
+	$t: (key: string) => key,
+});
+
+const data = reactive({
+	...props.modelValue,
+	t: (val: string) => props.$t(val),
+});
+
+const runDelete = () => {
+	showModal(
+		{
+			class: 'small-modal',
+			title: props.$t('Are you sure?'),
+			actions: [
+				{
+					value: 'Confirm',
+					color: 'red',
+					onClick: () => props.onDelete?.(data.id),
+				},
+				{ value: 'Cancel', color: 'gray' },
+			],
+		},
+		{ default: props.$t('form.deleteMessage') },
+	);
+};
+</script>
+
+<style>
+.del-top {
+	transform: translateY(-2.6rem);
+}
+</style>

package/src/components/LangText.vue

@@ -0,0 +1,32 @@
+<template>
+	<span ref="el" />
+	{{ input }}
+	<!-- v-html="$t(input)" -->
+</template>
+<script setup lang="ts">
+defineProps<{
+	input: any;
+}>();
+</script>
+<style>
+.translate {
+	cursor: pointer;
+	position: relative;
+}
+
+/*
+.translate:hover {
+	color: var(--bgl-blue);
+}
+*/
+
+.translate-globe {
+	position: absolute;
+	top: -5px;
+	right: -5px;
+	width: 10px;
+	height: 10px;
+	background-size: contain;
+	/* background-image: url('@/assets/globe.svg'); */
+}
+</style>

package/src/components/ListItem.vue

@@ -0,0 +1,20 @@
+<template>
+	<component
+		:is="to ? 'RouterLink' : 'div'"
+		:to="to"
+		class="list-item ellipsis"
+	>
+		<p class="txt16 no-margin">
+			<slot />
+		</p>
+		<p class="txt14 no-margin txtgray">
+			<slot name="subtitle" />
+		</p>
+	</component>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+	to?: string;
+}>();
+</script>

package/src/components/ListView.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="card list-view grid thin">
+		<div class="list-header flex gap-3 align-items-top">
+			<div
+				v-if="enableSearch"
+				class="bagel-input search-wrap"
+			>
+				<input
+					:placeholder="searchPlaceholder"
+					v-model="searchTerm"
+					@input="search()"
+				>
+				<MaterialIcon
+					class="txtgray"
+					icon="search"
+				/>
+			</div>
+			<Btn
+				color="blue"
+				v-if="enableAdd"
+				icon="add"
+				@click="emit('add')"
+			/>
+		</div>
+		<div class="list-content grid auto-flow-rows align-items-start">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { MaterialIcon, Btn } from '@/components';
+import { debounce } from '@/utils';
+
+defineProps<{
+	enableAdd: boolean;
+	enableSearch: boolean;
+	open: boolean;
+	searchPlaceholder: string;
+}
+>();
+const emit = defineEmits(['search', 'add', 'debounce']);
+const searchTerm = $ref('');
+const search = () => {
+	emit('search', searchTerm);
+	debounce(() => emit('debounce', searchTerm));
+};
+</script>
+
+<style>
+.search-wrap {
+	flex-grow: 1;
+}
+</style>

package/src/components/MaterialIcon.vue

@@ -0,0 +1,19 @@
+<template>
+	<div
+		class="icon-font"
+		:style="{ fontSize: `${size}rem` }"
+	>
+		{{ icon }}
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { MaterialIcons } from '@/types/materialIcons';
+
+defineProps<{
+	icon: MaterialIcons;
+	size?: number;
+}>();
+</script>
+
+<style scoped></style>

package/src/components/Modal.vue

@@ -0,0 +1,62 @@
+<template>
+	<div
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isActive }"
+		@click="() => (dismissable ? closeModal() : '')"
+		@keydown.esc="closeModal"
+	>
+		<div
+			class="card modal"
+			@click.stop
+		>
+			<header class="tool-bar">
+				<slot name="toolbar" />
+			</header>
+			<h3 class="modal-title">
+				{{ title }}
+			</h3>
+			<slot />
+			<footer class="modal-footer mt-3">
+				<Btn
+					v-for="(action, i) in actions"
+					:key="i"
+					@click="closeModal"
+					color="gray"
+					v-bind="action"
+				/>
+				<slot name="footer" />
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { Btn } from '@/components';
+import { BtnOptions } from '@/types/BtnOptions';
+import '../styles/modal.css';
+
+defineProps<{
+	side?: boolean;
+	title?: string;
+	dismissable?: boolean;
+	actions?: BtnOptions[];
+}>();
+
+let isActive = $ref<boolean>(false);
+
+onMounted(() => {
+	setTimeout(() => {
+		isActive = true;
+	}, 1);
+});
+
+const emit = defineEmits(['update:isModalVisible']);
+
+const closeModal = () => {
+	isActive = false;
+	setTimeout(() => {
+		emit('update:isModalVisible', false);
+	}, 200);
+};
+</script>

package/src/components/ModalForm.vue

@@ -0,0 +1,109 @@
+<template>
+	<div
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isActive }"
+		@click="() => (dismissable ? closeModal() : '')"
+		@keydown.esc="closeModal"
+	>
+		<div
+			class="card modal"
+			@click.stop
+		>
+			<header class="tool-bar">
+				<slot name="toolbar" />
+				<Btn
+					:style="{ float: side ? 'left' : 'right' }"
+					flat
+					icon="close"
+					@click="closeModal"
+				/>
+				<h3 class="modal-title">
+					{{ title }}
+				</h3>
+			</header>
+			<FormSchema
+				:onDelete="onDelete ? runDelete : null"
+				:modelValue="modelValue"
+				@update:modelValue="handleEmit"
+				@submit="runSubmit"
+				:schema="computedFormSchema"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { type FormKitSchemaDefinition } from '@formkit/core';
+import { onMounted } from 'vue';
+import { Btn, FormSchema } from '@/components';
+import '../styles/modal.css';
+import { BtnOptions } from '@/types/BtnOptions';
+
+// import { BagelField } from '@/types';
+
+const props = defineProps<{
+	side?: boolean;
+	title?: string;
+	dismissable?: boolean;
+	actions?: BtnOptions[];
+	schema: FormKitSchemaDefinition | (() => FormKitSchemaDefinition);
+	modelValue?: Record<string, any>;
+	// eslint-disable-next-line no-unused-vars
+	onSubmit?: ((formData: any) => Promise<void>);
+	// eslint-disable-next-line no-unused-vars
+	onDelete?: ((id: string) => void);
+}>();
+
+const computedFormSchema = $computed(() => {
+	if (typeof props.schema === 'function') {
+		return props.schema();
+	}
+	return props.schema;
+});
+
+let isActive = $ref<boolean>(false);
+
+onMounted(() => {
+	setTimeout(() => {
+		isActive = true;
+	}, 1);
+});
+
+const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
+const handleEmit = (value: any) => {
+	emit('update:modelValue', value);
+};
+
+const closeModal = () => {
+	isActive = false;
+	setTimeout(() => {
+		emit('update:isModalVisible', false);
+	}, 200);
+};
+
+const runSubmit = async (formData: any) => {
+	try {
+		await props.onSubmit?.(formData);
+		closeModal();
+	} catch (err) {
+		console.error(err);
+	}
+};
+
+const runDelete = () => {
+	props.onDelete?.(props.modelValue?.id);
+	closeModal();
+};
+</script>
+
+<style scoped>
+.modal-title {
+	margin-top: 0.5rem;
+}
+
+@media screen and (max-width: 910px) {
+	.modal-title {
+		margin-top: 1rem;
+	}
+}
+</style>