@bagelink/vue 0.0.218 → 0.0.226-beta.0

package/src/styles/layout.css

@@ -387,7 +387,7 @@
 label,
 .label {
     display: block;
-    font-size: var(--input-font-size);
+    font-size: var(--label-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
     color: var(--label-color);

package/src/styles/modal.css

@@ -12,6 +12,7 @@
 	pointer-events: none;
 	opacity: 0;
 	transition: all ease-in-out 0.3s;
+	overflow: auto;
 }
 
 .modal {
@@ -20,8 +21,8 @@
 	transform: scale(0.5);
 	opacity: 0;
 	transition: all ease-in-out 0.15s;
-	overflow: auto;
-	max-height: 96vh;
+	margin-top: 6rem;
+	margin-bottom: 4rem;
 }
 
 .small-modal .modal {

package/src/styles/theme.css

@@ -24,7 +24,7 @@
   --bgl-yellow: #ffbb00;
   --bgl-yellow-light: #fff6d5;
   --bgl-green: #75c98f;
-  --border-color: #eff2f5;
+  --border-color: #00000020;
   --bgl-bg: #f4f6fa;
   --bgl-shadow: #4c577d26;
   --whatsapp-gray: #89959f;
@@ -32,15 +32,16 @@
   --whatsapp-blue: #71bce6;
   --input-border-radius: 7px;
   --card-border-radius: 15px;
-  --btn-border-radius: 10px;
-  --btn-padding: 30px;
-  --input-bg: #f5f8fa;
+  --placeholder-color: #00000040;
   --label-color: #00000080;
+  --label-font-size: 12px;
+  --input-bg: #f5f8fa;
   --input-color: #000000;
-  --placeholder-color: #00000040;
   --input-height: 40px;
+  --input-font-size: 14px;
+  --btn-border-radius: 10px;
+  --btn-padding: 30px;
   --btn-height: 40px;
-  --input-font-size: 12px;
   --bgl-transition: all 200ms ease;
   --bgl-hover-filter: brightness(90%);
   --bgl-active-filter: brightness(70%);

package/src/types/BagelForm.ts

@@ -12,9 +12,14 @@ export type Field<T = Record<string, any>> = {
   label?: string;
   placeholder?: string;
   children?: Field<T>[];
+  class?: AttributeValue | AttributeFn<T>,
+  options?: string | ({ label: string; value: string | number }|string|number)[],
   attrs?: Attributes<T>;
   required?: boolean;
   hint?: string;
+  defaultValue?: any;
+  transform?: (val?: any, rowData?:Record<string, any>) => any;
+  onUpdate?: (val: any, fieldData?:any, rowData?:Record<string, any>) => void;
   'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 }
 

package/src/types/index.ts

@@ -1,7 +1,7 @@
 export type { MaterialIcons } from './materialIcons';
-export type { BankDetailsInterface, NewPerson, Person } from './Person';
 export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
+export type { NavLink } from '../components/NavBar.vue';
 
 export * from './BtnOptions';
 export * from './BagelForm';

package/src/utils/index.ts

@@ -7,10 +7,9 @@ export const debounce = (fn: () => void, delay = 500) => {
 	timeout = setTimeout(fn, delay);
 };
 
-export const keyToLabel = (key: string) => key
-	.split('_')
+export const keyToLabel = (key?: string): string | undefined => key?.split('_')
 	.map((k) => k.charAt(0).toUpperCase() + k.slice(1))
-	.join(' ');
+	.join(' ') || key;
 
 export const copyText = async (
 	text: string,
@@ -26,7 +25,10 @@ export const useFormkit = () => {
 	return formkit;
 };
 
-export const initials = (...strArr: string[]) => strArr.map((str) => str?.charAt(0)).join('');
+export const initials = (...strArr: string[]) => {
+	strArr = strArr.map((str) => str.split(/\s/)).flat();
+	return strArr.map((str) => str?.charAt(0)).join('');
+};
 
 export function useEscape(event: KeyboardEvent, closeModel: () => void) {
 	if (event.key === 'Escape') {
@@ -34,8 +36,17 @@ export function useEscape(event: KeyboardEvent, closeModel: () => void) {
 	}
 }
 
-export function bindAttrs<T = Record<string, any>>(attrs: Attributes, fieldVal: any, row: T) {
-	const arr = Object.entries(attrs).map(([key, value]) => [
+export function classify(fieldVal?: any, row?: any, ...classes: any[]) {
+	return classes.map((cls) => {
+		if (typeof cls === 'function') return cls(fieldVal, row);
+		return cls;
+	}).join(' ');
+}
+
+export function bindAttrs<T = Record<string, any>>(attrs?: Attributes, fieldVal?: any, row?: T) {
+	if (!attrs) return {};
+	const exclude = ['class', 'style'];
+	const arr = Object.entries(attrs).filter(([key]) => !exclude.includes(key)).map(([key, value]) => [
 		key,
 		typeof value === 'function' ? value(fieldVal, row) : value,
 	]);
@@ -43,4 +54,13 @@ export function bindAttrs<T = Record<string, any>>(attrs: Attributes, fieldVal:
 	return resolvedAttrs;
 }
 
+export const iffer = (field: any, itemData: any) => {
+	if (field['v-if'] && typeof field['v-if'] === 'function') {
+		return field['v-if'](field.id ? itemData[field.id] : '', itemData);
+	}
+	return field['v-if'] || true;
+};
+
+export const denullify = (itemData?: Record<string, any>, fieldID?: string) => (fieldID && itemData ? itemData[fieldID] : null);
+
 export { formatString } from './strings';

package/src/components/ContactSubmissions.vue

@@ -1,45 +0,0 @@
-<template>
-	<div class="card h-100 thin">
-		<TableSchema
-			:schema="schema"
-			:data="data"
-		/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { TableSchema } from '@bagelink/vue';
-import { useBagel } from '..';
-
-const bagel = useBagel();
-
-const props = defineProps({
-	person_id: {
-		type: String,
-		required: true,
-	},
-});
-
-const schema = () => [
-	{
-		id: 'created_at',
-		label: 'Date',
-		transform: (value: string) => new Date(value).toLocaleDateString(),
-	},
-	{
-		id: 'message',
-		label: 'Message',
-
-	},
-];
-
-let data = $ref<any[]>([]);
-
-onMounted(() => {
-	const getData = async () => {
-		data = await bagel.get(`cms/form-submissions/${props.person_id}`);
-	};
-	void getData();
-});
-</script>

package/src/components/PersonPreview.vue

@@ -1,199 +0,0 @@
-<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 type { FormKitSchemaDefinition } from '@formkit/core';
-import type { Person } from '@bagelink/vue';
-import { initials, Btn, MaterialIcon } from '@bagelink/vue';
-import { useBagel, useModal } from '..';
-
-// 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 = () => {
-	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(i18nT('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-primary);
-	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/PersonPreviewFormkit.vue

@@ -1,178 +0,0 @@
-<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 type { FormKitSchemaDefinition } from "@formkit/core";
-import type { Person } from "@bagelink/vue";
-import { initials, Btn, MaterialIcon } from "@bagelink/vue";
-import { useBagel, useModal } from "..";
-
-// 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(i18nT('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-primary);
-  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/form/ItemRef.vue

@@ -1,44 +0,0 @@
-<template>
-	<div>
-		{{ field?.label || field.id }}
-
-		<Btn
-			color="gray"
-			@click="openModal()"
-			v-if="field.refCollection"
-		>
-			{{ content }}
-			<MaterialIcon icon="arrow_forward" />
-		</Btn>
-		<span
-			v-else
-			class="pill"
-		>
-			{{ content }}
-		</span>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-
-import type { Router } from 'vue-router';
-import { Btn, MaterialIcon, BagelField } from '@bagelink/vue';
-
-const openRef = ref(false);
-
-const props = defineProps<{
-	modelValue: Record<string, any>;
-	field: BagelField;
-	router: Router;
-}>();
-
-const content = computed(() => props.field.refFields?.map((k) => props.modelValue?.[k] || '').join(' '));
-
-const openModal = () => {
-	console.log(`openning ${props.modelValue?.id}`);
-	openRef.value = true;
-	void props.router.push(`/${props.field.refCollection}/${props.modelValue?.id}`);
-};
-</script>
-s

package/src/components/form/MaterialIcon.vue

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