@bagelink/vue 0.0.236-beta.0 → 0.0.239

package/src/components/FormKitTable.vue

@@ -1,280 +0,0 @@
-<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, Btn, MaterialIcon } from '@bagelink/vue';
-
-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-primary);
-  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

@@ -1,76 +0,0 @@
-<template>
-	<div>
-		<FormKit
-			type="form"
-			:modelValue="modelValue"
-			@update:modelValue="handleEmit"
-			@submit="runSubmit"
-			:submitLabel="i18nT('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 '@bagelink/vue';
-import { useModal, useI18nT } from '..';
-
-const { showModal } = useModal();
-const i18nT = useI18nT();
-const emits = defineEmits(['update:modelValue', 'submit']);
-const handleEmit = (val: any) => emits('update:modelValue', val);
-const runSubmit = (val: any) => emits('submit', val);
-
-const props = defineProps<{
-	modelValue?: any;
-	schema: FormKitSchemaDefinition;
-	// eslint-disable-next-line no-unused-vars
-	onDelete?: ((id: string) => void);
-}>();
-
-const data = reactive({
-	...props.modelValue,
-	t: (val: string) => i18nT?.(val) || val,
-});
-
-const runDelete = () => {
-	showModal(
-		{
-			class: 'small-modal',
-			title: i18nT('Are you sure?'),
-			actions: [
-				{
-					value: 'Confirm',
-					color: 'red',
-					onClick: () => props.onDelete?.(data.id),
-				},
-				{ value: 'Cancel', color: 'gray' },
-			],
-		},
-		{ default: i18nT('form.deleteMessage') },
-	);
-};
-</script>
-
-<style>
-.del-top {
-	transform: translateY(-2.6rem);
-}
-</style>

package/src/components/ModalBglForm.vue

@@ -1,106 +0,0 @@
-<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>
-			<BagelForm
-				:onDelete="onDelete ? runDelete : undefined"
-				v-model="formData"
-				@submit="runSubmit"
-				:schema="computedFormSchema"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import {
-	Btn, BtnOptions, useEscape, BagelForm, type BglFormSchemaT,
-} from '@bagelink/vue';
-import '../styles/modal.css';
-
-const props = defineProps<{
-	side?: boolean;
-	title?: string;
-	dismissable?: boolean;
-	actions?: BtnOptions[];
-	schema: BglFormSchemaT | (() => BglFormSchemaT);
-	// 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);
-
-const formData = defineModel<Record<string, any>>('modelValue', { default: {} });
-
-const emit = defineEmits(['update:isModalVisible']);
-
-const closeModal = () => {
-	isActive = false;
-	setTimeout(() => {
-		emit('update:isModalVisible', false);
-	}, 200);
-};
-
-const runSubmit = async () => {
-	try {
-		await props.onSubmit?.(formData.value);
-		closeModal();
-	} catch (err) {
-		console.error(err);
-	}
-};
-
-const runDelete = () => {
-	props.onDelete?.(formData.value?.id);
-	closeModal();
-};
-
-const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
-
-onMounted(() => {
-	setTimeout(() => isActive = true, 1);
-	document.addEventListener('keydown', escapeKeyClose);
-});
-onUnmounted(() => document.removeEventListener('keydown', escapeKeyClose));
-</script>
-
-<style scoped>
-.modal-title {
-	margin-top: 0.5rem;
-}
-
-@media screen and (max-width: 910px) {
-	.modal-title {
-		margin-top: 1rem;
-	}
-}
-</style>