@bagelink/vue 0.0.25 → 0.0.32

package/src/components/FormKitTable.vue

@@ -0,0 +1,250 @@
+<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="field.refFields?.map((k) => row[field.id][k]).join(' ') || row[field.id].id"
+										>
+											{{
+												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',
+		})),
+);
+</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,65 @@
+<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;
+	onDelete?: any |((id: string) => void);
+	$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,30 @@
+<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,16 @@
+<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,39 @@
+<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,16 @@
+<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,50 @@
+<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,94 @@
+<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>;
+	onSubmit?: ((formData: any) => void);
+	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>