@bagelink/vue 0.0.32 → 0.0.35

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.32",
+  "version": "0.0.35",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -46,6 +46,7 @@
   "devDependencies": {
     "vue": "^3.3.8",
     "vue-router": "^4.2.5",
+    "vue3-charts": "^1.1.33",
     "@formkit/vue": "^1.3.0",
     "@formkit/core": "1.3.0",
     "vue-draggable-next": "^2.2.1",
@@ -57,13 +58,14 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-view": "^1.32.4",
     "@vue-macros/reactivity-transform": "^0.4.0",
-    "@bagelink/sdk": "0.0.32"
+    "@bagelink/sdk": "0.0.35"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*"
   },
   "optionalDependencies": {
     "vue-router": "^4.2.5",
+    "vue3-charts": "^1.1.33",
     "@formkit/vue": "^1.3.0",
     "@formkit/core": "1.3.0",
     "vue-draggable-next": "^2.2.1",

package/src/components/Comments.vue

@@ -30,7 +30,12 @@
 							icon="delete"
 							@click="deleteComment(comment.id)"
 						/>
-						<MaterialIcon :size="1.2" class="save" icon="save" @click="save" />
+						<MaterialIcon
+							:size="1.2"
+							class="save"
+							icon="save"
+							@click="save"
+						/>
 					</div>
 				</div>
 				<RTXEditor
@@ -38,7 +43,11 @@
 					@keydown.meta.enter="save"
 					v-if="editComment !== null && editComment?.id === comment.id"
 				/>
-				<div class="editor-wrapper" v-html="comment.body_html" v-else />
+				<div
+					class="editor-wrapper"
+					v-html="comment.body_html"
+					v-else
+				/>
 			</div>
 		</div>
 		<div class="new-comment">
@@ -47,7 +56,10 @@
 				v-model="bodyHtml"
 				@keydown.meta.enter="newComment"
 			/>
-			<Btn icon="send" @click="newComment">
+			<Btn
+				icon="send"
+				@click="newComment"
+			>
 				{{ form.send }}
 			</Btn>
 		</div>
@@ -56,8 +68,8 @@
 
 <script lang="ts" setup>
 import { onMounted, watch } from 'vue';
-import { Btn, MaterialIcon, RTXEditor } from '@/components';
 import { useBagel } from 'src/plugins/bagel';
+import { Btn, MaterialIcon, RTXEditor } from '@/components';
 
 const bagel = useBagel();
 let comments = $ref<Record<string, any>>([]);
@@ -85,7 +97,7 @@ const fetchData = async () => {
 	comments = [];
 	comments = (await bagel.get(
 		`comments/${props.ref_table}/${props.ref_id}`,
-	)) as Record<string, any>[];
+	));
 };
 
 onMounted(fetchData);
@@ -94,7 +106,7 @@ watch(() => props.ref_id, fetchData);
 const save = async () => {
 	if (!editComment) return;
 	await bagel.put(`comments/${editComment.id}`, editComment);
-	fetchData();
+	void fetchData(); // TODO: Nati: should be awaited?
 	editComment = null;
 };
 
@@ -102,7 +114,7 @@ let bodyHtml = $ref('');
 
 const deleteComment = async (id: string) => {
 	await bagel.delete(`comments/${id}`);
-	fetchData();
+	void fetchData(); // TODO: Nati: should be awaited?
 };
 
 const newComment = async () => {
@@ -114,7 +126,7 @@ const newComment = async () => {
 		type: 'Comment',
 	});
 	bodyHtml = '';
-	fetchData();
+	void fetchData(); // TODO: Nati: should be awaited?
 };
 </script>
 
@@ -126,9 +138,11 @@ const newComment = async () => {
 	position: relative;
 	gap: 0.5rem;
 }
+
 .comments-wrap p {
 	margin: 0;
 }
+
 .comments-wrap::before {
 	content: '';
 	inset-inline-start: 10px;
@@ -200,6 +214,7 @@ const newComment = async () => {
 .comment .comment-actions .edit {
 	opacity: 0;
 }
+
 .comment-actions .edit {
 	margin-inline-end: auto;
 }
@@ -208,13 +223,13 @@ const newComment = async () => {
 	opacity: 0.4;
 }
 
-.comment-actions > div {
+.comment-actions>div {
 	transition: all 200ms ease;
 	cursor: pointer;
 	opacity: 0.6;
 }
 
-.comment-actions > div:hover {
+.comment-actions>div:hover {
 	color: var(--bgl-blue);
 }
 
@@ -222,17 +237,20 @@ const newComment = async () => {
 	color: var(--bgl-red);
 }
 
-.comment-actions > div:active {
+.comment-actions>div:active {
 	filter: brightness(70%);
 }
+
 .icon-font.delete,
 .icon-font.save {
 	display: none;
 }
+
 .editable .icon-font.delete,
 .editable .icon-font.save {
 	display: block;
 }
+
 /* .editor-wrapper { */
 /* margin-inline-start: 0.5rem; */
 /* margin-top: 0.05em; */
@@ -245,6 +263,7 @@ const newComment = async () => {
 .editable .editor-wrapper {
 	background-color: var(--bgl-bg);
 }
+
 .new-comment {
 	display: flex;
 	align-items: flex-end;

package/src/components/ContactArray.vue

@@ -2,25 +2,29 @@
 	<div class="bagel-input mt-2">
 		{{ field.label }}
 		<div class="mb-2 mt-1">
-			<div class="bglform-contact" v-for="(contact, i) in val" :key="i">
+			<div
+				class="bglform-contact"
+				v-for="(contact, i) in val"
+				:key="i"
+			>
 				<input
 					v-model="contact.email"
 					:placeholder="placeholders.email"
 					type="email"
 					v-if="field.id === 'email'"
-				/>
+				>
 				<input
 					v-model="contact.phone"
 					:placeholder="placeholders.phone"
 					type="tel"
 					v-if="field.id === 'phone'"
-				/>
+				>
 				<input
 					v-if="contact.email || contact.phone"
 					v-model="contact.label"
 					type="text"
 					:placeholder="placeholders.label"
-				/>
+				>
 				<div class="bglform-contact-opt">
 					<!-- <input v-model="contact.primary" id="primary" type="checkbox" > -->
 					<CheckInput
@@ -31,10 +35,21 @@
 						}"
 						v-model="contact.primary"
 					/>
-					<MaterialIcon @click="del(i)" icon="delete" class="btn-float" />
+					<MaterialIcon
+						@click="del(i)"
+						icon="delete"
+						class="btn-float"
+					/>
 				</div>
 			</div>
-			<Btn color="light" thin @click="val.push({})" icon="add"> Add </Btn>
+			<Btn
+				color="light"
+				thin
+				@click="val.push({})"
+				icon="add"
+			>
+				Add
+			</Btn>
 		</div>
 	</div>
 </template>

package/src/components/ContactSubmissions.vue

@@ -1,13 +1,16 @@
 <template>
 	<div class="card h-100 thin">
-		<TableSchema :schema="schema" :data="data" />
+		<TableSchema
+			:schema="schema"
+			:data="data"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { TableSchema } from '@/components';
 import { useBagel } from 'src/plugins/bagel';
+import { TableSchema } from '@/components';
 
 const bagel = useBagel();
 
@@ -37,6 +40,6 @@ onMounted(() => {
 	const getData = async () => {
 		data = await bagel.get(`cms/form-submissions/${props.person_id}`);
 	};
-	getData();
+	void getData();
 });
 </script>

package/src/components/DataPreview.vue

@@ -1,21 +1,36 @@
 <template>
-	<div v-if="data" class="data">
-		<h3 class="mb-3 mt-0" v-if="title">
+	<div
+		v-if="data"
+		class="data"
+	>
+		<h3
+			class="mb-3 mt-0"
+			v-if="title"
+		>
 			{{ title }}
 		</h3>
-		<div v-for="field in schema || []" :key="field.id" class="data-row">
+		<div
+			v-for="field in schema || []"
+			:key="field.id"
+			class="data-row"
+		>
 			<div class="key">
 				{{ field.label ? parseLocale(field.label) : keyToLabel(field.id) }}
 			</div>
-			<component :is="field.$el || 'div'" class="vlue">
+			<component
+				:is="field.$el || 'div'"
+				class="vlue"
+			>
 				{{ data[field.id] || field.defaultValue }}
 			</component>
 		</div>
 		<div v-if="!schema?.length">
 			<div
-				class="data-row" v-for="[key, value] in Object.entries(data).filter(
+				class="data-row"
+				v-for="[key, value] in Object.entries(data).filter(
 					([key]) => !keysToIgnore.includes(key),
-				)" :key="key"
+				)"
+				:key="key"
 			>
 				<div class="key">
 					{{ $t(keyToLabel(key)) }}
@@ -30,9 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import { keyToLabel } from '@/utils';
-
-import { parseLocale } from '@/utils';
+import { keyToLabel, parseLocale } from '@/utils';
 
 const keysToIgnore = ['id', 'person_id', 'person', 'created_at', 'updated_at'];
 

package/src/components/FileUploader.vue

@@ -8,7 +8,11 @@
 			@drop.prevent.stop="onDrop"
 		>
 			<Transition name="pop">
-				<div ref="dropCircle" v-if="draggingOver" class="drop-circle" />
+				<div
+					ref="dropCircle"
+					v-if="draggingOver"
+					class="drop-circle"
+				/>
 			</Transition>
 			<div class="img-label">
 				<p>
@@ -23,7 +27,11 @@
 				>
 					<div class="load-file-bar">
 						<p>{{ item.file.name }}</p>
-						<div class="pie" :style="`--p:${item.progress}`" style="--b: 2px">
+						<div
+							class="pie"
+							:style="`--p:${item.progress}`"
+							style="--b: 2px"
+						>
 							<span>{{ `${item.progress}` }}</span>
 						</div>
 					</div>
@@ -43,6 +51,7 @@
 <script setup lang="ts">
 import { useBagel } from 'src/plugins/bagel';
 import { ref, onMounted, onUnmounted } from 'vue';
+
 const bagel = useBagel();
 
 const draggingOver = ref(false);
@@ -65,17 +74,17 @@ const props = withDefaults(
 		// folder?: string,
 		private?: 1 | 0;
 		singleFile?: boolean;
-		beforeUpload?:() => Promise<any>;
-			form: {
-				dragDrop: string
-				browse: string
-			}
+		beforeUpload?: () => Promise<any>;
+		form: {
+			dragDrop: string
+			browse: string
+		}
 	}>(),
 	{
 		private: 0,
 		entity: '',
 		id: '',
-		beforeUpload: async () => {},
+		beforeUpload: async () => { },
 	},
 );
 

package/src/components/FormKitTable.vue

@@ -1,78 +1,123 @@
 <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>
+		<!-- <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>
-						</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"
+						</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}`"
 						>
-							<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] }}
+							<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>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</Transition>
+								<div
+									class="max-col-width"
+									v-else
+								>
+									{{ row[field.id] }}
+								</div>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<!-- </Transition> -->
 	</div>
 </template>
 
@@ -110,12 +155,16 @@ const sort = (fieldname: string) => {
 };
 
 const columns = computed<BagelField[]>(
-	(): BagelField[] => props.schema
-		|| Object.keys(props.data[0]).map((k: string) => ({
+	(): 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>

package/src/components/FormSchema.vue

@@ -1,14 +1,26 @@
 <template>
 	<div>
 		<FormKit
-			type="form" :modelValue="modelValue" @update:modelValue="handleEmit" @submit="runSubmit"
+			type="form"
+			:modelValue="modelValue"
+			@update:modelValue="handleEmit"
+			@submit="runSubmit"
 			:submitLabel="$t('save')"
 		>
-			<FormKitSchema :schema="schema" :data="data" />
+			<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
+			class="del-top"
+			v-if="modelValue?.id && onDelete"
+			@click="runDelete"
+			value="Delete"
+			flat
+			icon="delete"
+			color="red"
+			thin
 		/>
 	</div>
 </template>
@@ -28,9 +40,11 @@ const runSubmit = (val: any) => emits('submit', val);
 const props = withDefaults(defineProps<{
 	modelValue?: any;
 	schema: FormKitSchemaDefinition;
-	onDelete?: any |((id: string) => void);
+	// 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,
 });
 

package/src/components/LangText.vue

@@ -14,9 +14,11 @@ defineProps<{
 	position: relative;
 }
 
+/*
 .translate:hover {
-	/* color: var(--bgl-blue); */
+	color: var(--bgl-blue);
 }
+*/
 
 .translate-globe {
 	position: absolute;

package/src/components/ListItem.vue

@@ -1,5 +1,9 @@
 <template>
-	<component :is="to ? 'RouterLink' : 'div'" :to="to" class="list-item ellipsis">
+	<component
+		:is="to ? 'RouterLink' : 'div'"
+		:to="to"
+		class="list-item ellipsis"
+	>
 		<p class="txt16 no-margin">
 			<slot />
 		</p>