@bagelink/vue 0.0.218 → 0.0.226-beta.0

package/src/components/{DropDown.vue → Drop.vue}

@@ -1,44 +1,66 @@
 <template>
-	<div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
-		<div class="dropdown-title">
-			{{ selectedOption || placeholder }}
-			<MaterialIcon icon="keyboard_arrow_down" />
-		</div>
-		<div
-			class="dropdown-body"
-		>
-			<p
-				v-for="(option, index) in options"
-				:key="index"
-				@click.stop="selectOption(option as string, index as number)"
-			>
-				{{ option }}
-			</p>
-		</div>
-	</div>
+  <label>{{ label }}</label>
+  <div class="dropdown" @click="toggleDropdown" :class="{ opendrop: isOpen }">
+    <div class="dropdown-title" :class="{ hasSelection: selectedOption }">
+      {{ selectedOption || placeholder }}
+      <MaterialIcon icon="keyboard_arrow_down" />
+    </div>
+    <div class="dropdown-body">
+      <p v-for="(option, index) in options" :key="index" @click.stop="selectOption(option)">
+        {{ optionToLabel(option) }}
+      </p>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { MaterialIcon } from '@bagelink/vue';
 
-const props = defineProps({
-	modelValue: String,
-	options: Array,
-	placeholder: String,
-});
+type Option = {
+  label: string;
+  value: string;
+} | string | number;
+
 const emit = defineEmits(['update:modelValue']);
 
+function optionToLabel(option?: Option) {
+  if (!option) return '';
+  if (typeof option === 'string' || typeof option === 'number') return option;
+  return option.label;
+}
+
+function optionToValue(option?: Option) {
+  if (!option) return '';
+  if (typeof option === 'string' || typeof option === 'number') return option;
+  return option.value;
+}
+
+const props = defineProps<{
+  modelValue: string | number,
+  options: Option[],
+  placeholder?: string,
+  label?: string,
+  id: string,
+  required: boolean
+}>();
+
 let isOpen = $ref(false);
-let selectedOption = $ref(props.modelValue);
+
+let selectedVal = $ref(props.modelValue);
+
+const selectedOption = $computed(() => {
+  const option = props.options.find((optn) => optionToValue(optn) === selectedVal);
+  return optionToLabel(option);
+});
 
 function toggleDropdown() {
-	isOpen = !isOpen;
+  isOpen = !isOpen;
 }
 
-function selectOption(option: string, index: number) {
-	selectedOption = option;
-	isOpen = false;
-	emit('update:modelValue', { option, index }); // Emit the selected option value with v-model
+function selectOption(option: Option) {
+  selectedVal = optionToValue(option);
+  emit('update:modelValue', selectedVal);
+  isOpen = false;
 }
 </script>
 
@@ -53,7 +75,7 @@ function selectOption(option: string, index: number) {
 
 .dropdown-title {
   white-space: nowrap;
-  color: var(--bgl-primary);
+  color: var(--bgl-gray);
   border-radius: var(--input-border-radius);
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
   padding-left: calc(var(--btn-padding) / 2);
@@ -69,6 +91,10 @@ function selectOption(option: string, index: number) {
   position: relative;
 }
 
+.dropdown-title.hasSelection {
+  color: var(--bgl-primary);
+}
+
 .open .dropdown {
   min-width: 120px;
 }

package/src/components/FormKitTable.vue

@@ -1,112 +1,112 @@
 <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>
+	<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";
+import { computed, ref, useSlots } from 'vue';
+import { BagelField, Btn, MaterialIcon } from '@bagelink/vue';
 
 const slots = useSlots();
 const loading = ref(true);
@@ -116,39 +116,35 @@ const props = defineProps<{
   schema?: BagelField[];
 }>();
 
-const emit = defineEmits(["selectElement"]);
+const emit = defineEmits(['selectElement']);
 
 const selectElement = (data: Record<string, any>) => {
-  emit("selectElement", data);
+	emit('selectElement', data);
 };
 
 // const sortList = () => {};
-const sortDirection = ref("");
-const sortField = ref("");
+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";
-  }
+	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",
-    }))
+	(): 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
-  );
+	return (
+		field.refFields?.map((k) => row[field.id][k]).join(' ') || row[field.id].id
+	);
 }
 </script>
 

package/src/components/Modal.vue

@@ -1,35 +1,18 @@
 <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" />
-				<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>
 			<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>

package/src/components/ModalBglForm.vue

@@ -23,8 +23,7 @@
 			</header>
 			<BagelForm
 				:onDelete="onDelete ? runDelete : undefined"
-				:modelValue="modelValue"
-				@update:modelValue="handleEmit"
+				v-model="formData"
 				@submit="runSubmit"
 				:schema="computedFormSchema"
 			/>
@@ -45,7 +44,6 @@ const props = defineProps<{
 	dismissable?: boolean;
 	actions?: BtnOptions[];
 	schema: BglFormSchemaT | (() => BglFormSchemaT);
-	modelValue?: Record<string, any>;
 	// eslint-disable-next-line no-unused-vars
 	onSubmit?: ((formData: any) => Promise<void>);
 	// eslint-disable-next-line no-unused-vars
@@ -61,10 +59,9 @@ const computedFormSchema = $computed(() => {
 
 let isActive = $ref<boolean>(false);
 
-const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
-const handleEmit = (value: any) => {
-	emit('update:modelValue', value);
-};
+const formData = defineModel<Record<string, any>>('modelValue', { default: {} });
+
+const emit = defineEmits(['update:isModalVisible']);
 
 const closeModal = () => {
 	isActive = false;
@@ -73,9 +70,9 @@ const closeModal = () => {
 	}, 200);
 };
 
-const runSubmit = async (formData: any) => {
+const runSubmit = async () => {
 	try {
-		await props.onSubmit?.(formData);
+		await props.onSubmit?.(formData.value);
 		closeModal();
 	} catch (err) {
 		console.error(err);
@@ -83,28 +80,17 @@ const runSubmit = async (formData: any) => {
 };
 
 const runDelete = () => {
-	props.onDelete?.(props.modelValue?.id);
+	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,
-	);
+	setTimeout(() => isActive = true, 1);
+	document.addEventListener('keydown', escapeKeyClose);
 });
+onUnmounted(() => document.removeEventListener('keydown', escapeKeyClose));
 </script>
 
 <style scoped>

package/src/components/NavBar.vue

@@ -9,31 +9,42 @@
 			aria-label="Toggle Navigation"
 			tabindex="0"
 		>
-			<div class="icon-font top-arrow">
-				chevron_right
-			</div>
+			<MaterialIcon icon="chevron_right" class="top-arrow" />
 		</div>
 
 		<div class="full-nav">
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
-					<RouterLink
-						v-for="link in links?.()"
+					<component
+						:is="link.to?'router-link':'div'"
+						v-for="link in links"
 						class="nav-button"
 						:to="link.to"
 						:key="link.label"
+						@click="link.onClick?.()"
 					>
-						<div class="icon-font">
-							{{ link.materialIcon }}
-						</div>
+						<MaterialIcon :icon="link.materialIcon" />
 						<div class="tooltip">
-							{{ link.localized ? link.localized : link.label }}
+							{{ link.label }}
 						</div>
-					</RouterLink>
+					</component>
 				</div>
 			</div>
 
 			<div class="bot-buttons-wrapper">
+				<component
+					:is="link.to?'router-link':'div'"
+					v-for="link in footerLinks"
+					class="nav-button"
+					:to="link.to"
+					@click="link.onClick?.()"
+					:key="link.label"
+				>
+					<MaterialIcon :icon="link.materialIcon" />
+					<div class="tooltip">
+						{{ link.label }}
+					</div>
+				</component>
 				<slot name="floor" />
 			</div>
 		</div>
@@ -41,19 +52,22 @@
 </template>
 
 <script lang="ts" setup>
-// import LangText from "../translation/LangText.vue"s
 import type { MaterialIcons } from '@bagelink/vue';
+import { MaterialIcon } from '@bagelink/vue';
 
 const isOpen = $ref(true);
+export type NavLink = {
+  label: string;
+  to?: string;
+  materialIcon: MaterialIcons;
+  localized?: string;
+  onClick?: () => void;
+}
 
 withDefaults(
 	defineProps<{
-    links?: () => {
-      label: string;
-      to: string;
-      materialIcon: MaterialIcons;
-      localized?: string;
-    }[];
+    footerLinks?: NavLink[];
+    links?:NavLink[];
     homeIcon?: MaterialIcons;
     homeLabel?: string;
     homeTo?: string;
@@ -62,6 +76,8 @@ withDefaults(
 		homeIcon: 'home',
 		homeLabel: 'Home',
 		homeTo: '/',
+		links: () => [],
+		footerLinks: () => [],
 	},
 );
 </script>