@bagelink/vue 0.0.32 → 0.0.35

package/src/components/ListView.vue

@@ -1,11 +1,26 @@
 <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
+				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')" />
+			<Btn
+				color="blue"
+				v-if="enableAdd"
+				icon="add"
+				@click="emit('add')"
+			/>
 		</div>
 		<div class="list-content grid auto-flow-rows align-items-start">
 			<slot />
@@ -18,12 +33,12 @@ import { MaterialIcon, Btn } from '@/components';
 import { debounce } from '@/utils';
 
 defineProps<{
-		enableAdd: boolean;
-		enableSearch: boolean;
-		open: boolean;
-		searchPlaceholder: string;
-	}
->()
+	enableAdd: boolean;
+	enableSearch: boolean;
+	open: boolean;
+	searchPlaceholder: string;
+}
+>();
 const emit = defineEmits(['search', 'add', 'debounce']);
 const searchTerm = $ref('');
 const search = () => {

package/src/components/MaterialIcon.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="icon-font" :style="{ fontSize: `${size}rem` }">
+	<div
+		class="icon-font"
+		:style="{ fontSize: `${size}rem` }"
+	>
 		{{ icon }}
 	</div>
 </template>

package/src/components/Modal.vue

@@ -1,7 +1,14 @@
 <template>
-	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-		<div class="card modal" @click.stop>
+	<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>
@@ -10,7 +17,13 @@
 			</h3>
 			<slot />
 			<footer class="modal-footer mt-3">
-				<Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
+				<Btn
+					v-for="(action, i) in actions"
+					:key="i"
+					@click="closeModal"
+					color="gray"
+					v-bind="action"
+				/>
 				<slot name="footer" />
 			</footer>
 		</div>
@@ -47,4 +60,3 @@ const closeModal = () => {
 	}, 200);
 };
 </script>
-

package/src/components/ModalForm.vue

@@ -1,19 +1,32 @@
 <template>
 	<div
-		class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isActive }"
+		@click="() => (dismissable ? closeModal() : '')"
+		@keydown.esc="closeModal"
 	>
-		<div class="card modal" @click.stop>
+		<div
+			class="card modal"
+			@click.stop
+		>
 			<header class="tool-bar">
 				<slot name="toolbar" />
-				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
+				<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"
+				:onDelete="onDelete ? runDelete : null"
+				:modelValue="modelValue"
+				@update:modelValue="handleEmit"
+				@submit="runSubmit"
+				:schema="computedFormSchema"
 			/>
 		</div>
 	</div>
@@ -33,9 +46,11 @@ const props = defineProps<{
 	title?: string;
 	dismissable?: boolean;
 	actions?: BtnOptions[];
-	schema:FormKitSchemaDefinition |(() => FormKitSchemaDefinition);
+	schema: FormKitSchemaDefinition | (() => FormKitSchemaDefinition);
 	modelValue?: Record<string, any>;
-	onSubmit?: ((formData: any) => void);
+	// eslint-disable-next-line no-unused-vars
+	onSubmit?: ((formData: any) => Promise<void>);
+	// eslint-disable-next-line no-unused-vars
 	onDelete?: ((id: string) => void);
 }>();
 

package/src/components/NavBar.vue

@@ -2,8 +2,12 @@
 	<div :class="{ open: isOpen, closed: !isOpen }">
 		<slot name="top" />
 		<div
-			class="nav-expend" @click="isOpen = !isOpen" @keypress.enter="isOpen = !isOpen" role="button"
-			aria-label="Toggle Navigation" tabindex="0"
+			class="nav-expend"
+			@click="isOpen = !isOpen"
+			@keypress.enter="isOpen = !isOpen"
+			role="button"
+			aria-label="Toggle Navigation"
+			tabindex="0"
 		>
 			<div class="icon-font top-arrow">
 				chevron_right
@@ -13,7 +17,12 @@
 		<div class="full-nav">
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
-					<RouterLink v-for="link in links" class="nav-button" :to="link.to" :key="link.label">
+					<RouterLink
+						v-for="link in links"
+						class="nav-button"
+						:to="link.to"
+						:key="link.label"
+					>
 						<div class="icon-font">
 							{{ link.materialIcon }}
 						</div>
@@ -32,7 +41,6 @@
 </template>
 
 <script lang="ts" setup>
-
 // import LangText from "../translation/LangText.vue"
 import type { MaterialIcons } from '@/types/materialIcons';
 
@@ -79,9 +87,11 @@ withDefaults(
 	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
 }
 
+/*
 .nav-home-wrapper {
-	/* margin-bottom: 30px; */
+	margin-bottom: 30px;
 }
+*/
 
 .nav-expend {
 	background: white;

package/src/components/PersonPreview.vue

@@ -75,28 +75,26 @@
 </template>
 
 <script lang="ts" setup>
+import { useBagel } from 'src/plugins/bagel';
+import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { Person } from '@/types';
 import {
 	initials, useModal,
 } from '@/utils';
 import { Btn, MaterialIcon } from '@/components';
-import { useBagel } from 'src/plugins/bagel';
-import type { FormKitSchemaDefinition } from '@formkit/core';
-
 
 // const toast = useToast(); // TODO: use toast
 const bagel = useBagel();
 const { modalForm } = useModal();
 
-
 const props = defineProps<{
 	person: Person;
-	onClick: ((event: MouseEvent) => void) | undefined;
+	// eslint-disable-next-line no-unused-vars
+	onClick?: ((event: MouseEvent) => void);
 	personSchema: () => FormKitSchemaDefinition;
 }>();
 
 const showEditForm = async () => {
-
 	const { first_name, last_name } = props.person;
 	modalForm({
 		side: true,
@@ -104,7 +102,7 @@ const showEditForm = async () => {
 		schema: props.personSchema,
 		modelValue: props.person,
 		onSubmit: (newPerson) => bagel
-			.put('/person', newPerson)
+			.put('/person', newPerson),
 		// .then(() => toast.success($t('updatedSuccessfully'))),
 	});
 };

package/src/components/PersonPreviewFormkit.vue

@@ -76,14 +76,13 @@
 </template>
 
 <script lang="ts" setup>
-
+import { useBagel } from 'src/plugins/bagel';
+import type { FormKitSchemaDefinition } from '@formkit/core';
 import type { Person } from '@/types';
 import {
 	useModal, initials,
 } from '@/utils';
 import { Btn, MaterialIcon } from '@/components';
-import { useBagel } from 'src/plugins/bagel';
-import type { FormKitSchemaDefinition } from '@formkit/core';
 
 // const toast = useToast(); // TODO: use toast
 const bagel = useBagel();
@@ -91,7 +90,8 @@ const { modalForm, hideModal } = useModal();
 
 const props = defineProps<{
 	context: Record<string, any>;
-	onClick: ((event: MouseEvent) => void) | undefined;
+	// eslint-disable-next-line no-unused-vars
+	onClick?: ((event: MouseEvent) => void);
 	personSchema: () => FormKitSchemaDefinition;
 }>();
 
@@ -104,7 +104,7 @@ const showEditForm = async () => {
 		title: `${first_name} ${last_name}`,
 		schema: props.personSchema,
 		modelValue: person,
-		onSubmit: (newPerson) => bagel.put('/person', newPerson)
+		onSubmit: (newPerson) => bagel.put('/person', newPerson),
 		// .then(() => toast.success($t('updatedSuccessfully'))), // TODO: use toast
 	});
 };

package/src/components/RTXEditor.vue

@@ -111,9 +111,11 @@ function focusEditor() {
 	padding: 0.55rem;
 	min-height: 40px;
 }
+
 .new-comment .ProseMirror p {
 	margin: 0;
 }
+
 .comment-input .ProseMirror {
 	background-color: var(--bgl-bg);
 	margin-inline-start: 0;
@@ -128,6 +130,7 @@ function focusEditor() {
 	border: none;
 	box-shadow: inset 0 0 10px #00000012;
 }
+
 .ProseMirror,
 .editor-wrapper {
 	height: 100%;
@@ -136,6 +139,7 @@ function focusEditor() {
 	border-radius: var(--btn-border-radius);
 	margin-inline-start: 1rem;
 }
+
 .ProseMirror p,
 .editor-wrapper p {
 	margin: 0;

package/src/components/RouterWrapper.vue

@@ -1,7 +1,15 @@
 <template>
 	<router-view v-slot="{ Component, route }">
-		<transition :duration="300" name="slide-fade" mode="out-in" appear>
-			<component :is="Component" :key="route?.params.itemID" />
+		<transition
+			:duration="300"
+			name="slide-fade"
+			mode="out-in"
+			appear
+		>
+			<component
+				:is="Component"
+				:key="route?.params.itemID"
+			/>
 		</transition>
 	</router-view>
 </template>

package/src/components/TabbedLayout.vue

@@ -24,7 +24,10 @@
 			v-for="tab in tabs.filter((item) => item === activeTab)"
 			:key="tab"
 		>
-			<slot :name="tab" :key="tab" />
+			<slot
+				:name="tab"
+				:key="tab"
+			/>
 		</div>
 	</div>
 </template>
@@ -44,9 +47,9 @@ const props = defineProps<{
 }>();
 
 function changeTab(tab: string) {
-	const router = props.router;
+	const { router } = props;
 	activeTab = tab;
-	router.push({
+	void router.push({
 		path: router.currentRoute.value.path,
 		query: { ...router.currentRoute.value.query, t: tab },
 		hash: router.currentRoute.value.hash,
@@ -55,7 +58,7 @@ function changeTab(tab: string) {
 }
 
 onMounted(() => {
-	const firstTab =		props.modelValue || props.router.currentRoute.value.query.t || props.tabs[0];
+	const firstTab = props.modelValue || props.router.currentRoute.value.query.t || props.tabs[0];
 	activeTab = firstTab as string;
 });
 </script>
@@ -73,7 +76,7 @@ onMounted(() => {
 .detail-section {
 	grid-area: detail-section;
 } */
-.card.tabs-top{
+.card.tabs-top {
 	width: 99%;
 
 }

package/src/components/TableSchema.vue

@@ -3,19 +3,48 @@
 		<!-- <div v-for="field in schema" :key="field.id">{{ parseLocale(field.label) }}</div> -->
 		<table class="infinite-wrapper">
 			<thead class="row first-row">
-				<th class="col" v-for="field in columns" :key="field.id" @click="sort(field.id)">
+				<th
+					class="col"
+					v-for="field in columns"
+					:key="field.id"
+					@click="sort(field.id)"
+				>
 					<div class="flex">
 						{{ parseLocale(field.label || field.id) }}
-						<div class="list-arrows" :class="{ sorted: sortField === field.id }">
-							<MaterialIcon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
+						<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" />
+			<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>
 							<component
 								:is="field.$el || field.$cmp || 'div'"
@@ -39,7 +68,6 @@ import { useSlots } from 'vue';
 import { MaterialIcon } from '@/components';
 import { parseLocale } from '@/utils';
 
-
 const slots = useSlots();
 const loading = $ref(true);
 
@@ -48,15 +76,21 @@ const props = defineProps<{
 	schema?: any[];
 }>();
 
-
 const emit = defineEmits(['select']);
 
 const selectElement = (data: Record<string, any>) => {
 	emit('select', data);
 };
 
-const bindAttrs = (attrs: Record<string, string | any>, field: any, row: any) => {
-	const arr = Object.entries(attrs || {}).map(([key, value]) => [key, typeof value === 'function' ? value(field, row) : value]);
+const bindAttrs = (attrs: Record<string, any>, field: any, row: any) => {
+	const arr = Object.entries(
+		attrs || {},
+	)
+		.map(
+			([key, value]) => [
+				key, typeof value === 'function' ? value(field, row) : value,
+			],
+		);
 	const resolvedAttrs = Object.fromEntries(arr);
 	return resolvedAttrs;
 };
@@ -76,11 +110,12 @@ const sort = (fieldname: string) => {
 };
 
 const columns = $computed(
-	() => props.schema
-		|| Object.keys(props.data[0]).map((k: string) => ({
+	() => (
+		props.schema ||
+		Object.keys(props.data[0]).map((k: string) => ({
 			id: k,
 			inputType: 'PlainText',
-		})),
+		}))),
 );
 </script>
 

package/src/components/charts/BarChart.vue

@@ -1,24 +1,47 @@
 <template>
 	<div class="bar-chart">
-		<div class="graph-wrap" v-for="(item, i) in dataArray" :key="i">
-			<div class="group-wrap" v-if="item.group">
+		<div
+			class="graph-wrap"
+			v-for="(item, i) in dataArray"
+			:key="i"
+		>
+			<div
+				class="group-wrap"
+				v-if="item.group"
+			>
 				<p class="group-title">
 					{{ item.group }}
 				</p>
-				<div v-for="(nested, i) in item?.data || []" :key="i" class="bar-wrap">
-					<div class="bar" :style="{ height: loaded ? `${percent(nested.value)}%` : '0' }" />
+				<div
+					v-for="(nested, i) in item?.data || []"
+					:key="i"
+					class="bar-wrap"
+				>
+					<div
+						class="bar"
+						:style="{ height: loaded ? `${percent(nested.value)}%` : '0' }"
+					/>
 					<div
-						class="bar compare" v-if="nested.compareValue" :style="{
+						class="bar compare"
+						v-if="nested.compareValue"
+						:style="{
 							height: loaded ? `${percent(nested.compareValue)}%` : '0',
 						}"
 					/>
 					<!-- <p class="bar-txt">{{ nested.title }}</p> -->
 				</div>
 			</div>
-			<div v-else class="bar-wrap">
-				<div class="bar" :style="{ height: loaded ? `${percent(item.value)}%` : '0' }" />
+			<div
+				v-else
+				class="bar-wrap"
+			>
+				<div
+					class="bar"
+					:style="{ height: loaded ? `${percent(item.value)}%` : '0' }"
+				/>
 				<div
-					class="bar compare" v-if="item?.compareValue"
+					class="bar compare"
+					v-if="item?.compareValue"
 					:style="{ height: loaded ? `${percent(item.compareValue)}%` : '0' }"
 				/>
 				<p class="bar-txt">
@@ -31,7 +54,10 @@
 		</p>
 		<div class="red-bar" />
 		<div class="bar-lines">
-			<p v-for="mark in marks" :key="mark">
+			<p
+				v-for="mark in marks"
+				:key="mark"
+			>
 				{{ mark.toLocaleString() }}
 			</p>
 		</div>

package/src/components/dashboard/Lineart.vue

@@ -1,29 +1,64 @@
 <template>
-	<div ref="chartContainer" class="chart-line">
-		<Chart v-if="chartSize" :size="chartSize" :data="data" :margin="chartMargin" :axis="axisConfig">
+	<div
+		ref="chartContainer"
+		class="chart-line"
+	>
+		<Chart
+			v-if="chartSize"
+			:size="chartSize"
+			:data="data"
+			:margin="chartMargin"
+			:axis="axisConfig"
+		>
 			<template #layers>
-				<Grid :center="true" strokeDasharray="2,2" :hideY="true" />
+				<Grid
+					:center="true"
+					strokeDasharray="2,2"
+					:hideY="true"
+				/>
 				<Area
-					aria-label="Profit/Loss" :dataKeys="['date', 'total_value']" type="monotone"
+					aria-label="Profit/Loss"
+					:dataKeys="['date', 'total_value']"
+					type="monotone"
 					:areaStyle="{ fill: 'url(#grad)' }"
 				/>
 				<Line
-					:dataKeys="['date', 'total_value']" type="monotone" :dotStyle="dotStyling"
+					:dataKeys="['date', 'total_value']"
+					type="monotone"
+					:dotStyle="dotStyling"
 					:lineStyle="{ stroke: BRAND_COLOR, r: 2 }"
 				/>
 				<Marker
-					v-if="displayMarker" :value="meanValue" label="ממוצע" :color="BRAND_COLOR" :strokeWidth="2"
+					v-if="displayMarker"
+					:value="meanValue"
+					label="ממוצע"
+					:color="BRAND_COLOR"
+					:strokeWidth="2"
 					strokeDasharray="6 6"
 				/>
 				<defs>
-					<linearGradient id="grad" gradientTransform="rotate(90)">
-						<stop offset="0%" :stop-color="BRAND_COLOR" stop-opacity="1" />
-						<stop offset="100%" stop-color="white" stop-opacity="0.4" />
+					<linearGradient
+						id="grad"
+						gradientTransform="rotate(90)"
+					>
+						<stop
+							offset="0%"
+							:stop-color="BRAND_COLOR"
+							stop-opacity="1"
+						/>
+						<stop
+							offset="100%"
+							stop-color="white"
+							stop-opacity="0.4"
+						/>
 					</linearGradient>
 				</defs>
 			</template>
 			<template #widgets>
-				<Tooltip color="white" :config="tooltipConfiguration" />
+				<Tooltip
+					color="white"
+					:config="tooltipConfiguration"
+				/>
 			</template>
 		</Chart>
 	</div>
@@ -31,17 +66,14 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
 import {
 	Chart, Grid, Line, Area, Tooltip, Marker,
 } from 'vue3-charts';
 import type { ChartAxis, Data } from 'vue3-charts/dist/types';
 
-const props = defineProps<{ data: Data[] }>();
-
-const { locale } = useI18n();
+const props = defineProps<{ data: Data[], locale: string }>();
 
-const data = $computed(() => (locale.value === 'he' ? [...props.data].reverse() : props.data));
+const data = $computed(() => (props.locale === 'he' ? [...props.data].reverse() : props.data));
 
 interface Size {
 	width: number;

package/src/components/form/ItemRef.vue

@@ -2,11 +2,18 @@
 	<div>
 		{{ field.label || field.id }}
 
-		<Btn color="gray" @click="openModal()" v-if="field.refCollection">
+		<Btn
+			color="gray"
+			@click="openModal()"
+			v-if="field.refCollection"
+		>
 			{{ content }}
 			<MaterialIcon icon="arrow_forward" />
 		</Btn>
-		<span v-else class="pill">
+		<span
+			v-else
+			class="pill"
+		>
 			{{ content }}
 		</span>
 	</div>
@@ -33,6 +40,6 @@ const content = computed(() => props.field.refFields?.map((k) => props.modelValu
 const openModal = () => {
 	console.log(`openning ${props.modelValue?.id}`);
 	openRef.value = true;
-	router.push(`/${props.field.refCollection}/${props.modelValue?.id}`);
+	void router.push(`/${props.field.refCollection}/${props.modelValue?.id}`);
 };
 </script>

package/src/components/form/MaterialIcon.vue

@@ -8,11 +8,11 @@
 </template>
 
 <script setup lang="ts">
-import { MaterialIcons } from '../../types/materialIcons';
+import { MaterialIcons } from '@/types/materialIcons';
 
 defineProps<{
-    icon: MaterialIcons
-    size?: number
+	icon: MaterialIcons
+	size?: number
 }>();
 </script>