@bagelink/vue 0.0.437 → 0.0.441

package/src/components/Modal.vue

@@ -3,17 +3,30 @@
 		class="bg-dark"
 		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
 		@click="() => (dismissable ? closeModal() : '')"
-		@keydown.esc="closeModal">
+		@keydown.esc="closeModal"
+	>
 		<Card class="modal" @click.stop :style="{ ...maxWidth }">
-			<header class="tool-bar">
+			<header v-if="slots['toolbar'] || title" class="tool-bar">
 				<slot name="toolbar" />
 				<Btn
 					:style="{ float: side ? 'left' : 'right' }"
 					flat
 					icon="close"
-					@click="closeModal" />
+					@click="closeModal"
+				/>
 				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
 			</header>
+
+			<div v-else class="sticky h-10 bg-white z-index-999 -mt-1 -me-075 h-40px pt-025 round">
+				<Btn
+					class="color-black"
+					:style="{ float: side ? 'left' : 'right' }"
+					icon="close"
+					thin
+					color="white"
+					@click="closeModal"
+				/>
+			</div>
 			<slot />
 			<footer v-if="slots['footer'] || actions?.length" class="modal-footer mt-3">
 				<Btn
@@ -21,7 +34,8 @@
 					:key="i"
 					@click="closeModal"
 					color="gray"
-					v-bind="action" />
+					v-bind="action"
+				/>
 				<slot name="footer" />
 			</footer>
 		</Card>
@@ -29,8 +43,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch, useSlots } from 'vue';
-import { type BtnOptions, Btn, useEscape, Title, Card } from '@bagelink/vue';
+import {
+	onMounted, onUnmounted, watch, useSlots,
+} from 'vue';
+import {
+	type BtnOptions, Btn, useEscape, Title, Card,
+} from '@bagelink/vue';
 import '../styles/modal.css';
 
 const props = defineProps<{
@@ -53,7 +71,7 @@ watch(
 		if (val) openModal();
 		else closeModal();
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 const maxWidth = $computed(() => {
@@ -72,8 +90,7 @@ const closeModal = () => {
 
 defineExpose({ closeModal });
 
-const escapeKeyClose = (e: KeyboardEvent) =>
-	props?.dismissable && useEscape(e, () => closeModal());
+const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
 	setTimeout(() => (isVisible = true), 1);

package/src/components/ModalForm.vue

@@ -6,7 +6,7 @@
 		:width
 		:visible="visible"
 		:dismissable
-		:title="title">
+		:title >
 		<BagelForm
 			@submit="runSubmit"
 			ref="form"

package/src/components/PageTitle.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page-top">
-		<h1 class="top-title">
+		<h1 class="top-title m-0">
 			<slot /> {{ value }}
 		</h1>
 	</div>
@@ -19,6 +19,7 @@ defineProps({
 .top-title {
   font-weight: 600;
   font-size: 20px;
+  line-height: 1;
 }
 
 .page-top {
@@ -26,4 +27,10 @@ defineProps({
   align-items: center;
   gap: 1rem;
 }
+
+@media screen and (max-width: 910px) {
+.top-title {
+  font-size: 16px;
+}
+}
 </style>

package/src/components/TableSchema.vue

@@ -71,22 +71,53 @@ const slots = useSlots();
 const loading = $ref(true);
 
 const props = defineProps<{
+	selecteItems?: string[];
 	data: any[];
 	schema?: BglFormSchemaT | (() => BglFormSchemaT);
+	showFields?: string[];
 }>();
 
+const emit = defineEmits(['update:selecteItems', 'orderBy', 'select']);
+
+let selecteItems = $ref<string[]>(props.selecteItems || []);
+let selected = $computed({
+	get: () => selecteItems,
+	set: (value: string[]) => {
+		selecteItems = value;
+		emit('update:selecteItems', value);
+	},
+});
+
+function selectAll(event: PointerEvent) {
+	const value = (event.target as HTMLInputElement).checked;
+	if (!value) {
+		selected = [];
+		return;
+	}
+	selected.push(...computedData.map((d) => d.id));
+}
+
 const computedSchema = $computed(() => {
 	if (typeof props.schema === 'function') {
 		return props.schema();
 	}
-	if (props.schema) return props.schema;
-	const keys = [...new Set((props.data || []).map(Object.keys).flat())] as string[];
-	const schema: BglFormSchemaT = keys.map((id) => ({ id, label: keyToLabel(id) }));
-	return schema;
+	if (props.schema) {
+		return props.showFields
+			? props.schema.filter((f) => props.showFields?.includes(f.id as string))
+			: props.schema;
+	}
+	const keys = [
+		...new Set((props.data || []).map(Object.keys).flat()),
+	] as string[];
+	const schema: BglFormSchemaT = keys.map((id) => ({
+		id,
+		label: keyToLabel(id),
+	}));
+	return props.showFields
+		? schema.filter((f) => props.showFields?.includes(f.id as string) || !f.id)
+		: schema;
 });
 
-const emit = defineEmits(['select', 'orderBy']);
-
 const selectElement = (item: Record<string, any>) => emit('select', item);
 
 let sortDirection = $ref('ASC');
@@ -119,6 +150,12 @@ const computedData = $computed(() => {
 		return dta.sort((a, b) => {
 			const aValue = a[sortField];
 			const bValue = b[sortField];
+			const numAValue = parseInt(aValue);
+			const numBValue = parseInt(bValue);
+			if (!isNaN(numAValue) && !isNaN(numBValue)) {
+				if (sortDirection === 'ASC') return numAValue - numBValue;
+				return numBValue - numAValue;
+			}
 			if (typeof aValue === 'string') {
 				if (sortDirection === 'ASC') return aValue.localeCompare(bValue);
 				return bValue.localeCompare(aValue);
@@ -185,6 +222,9 @@ th {
 	height: 50px;
 	vertical-align: bottom;
 }
+.row.first-row input[type=checkbox]{
+	margin-bottom: 0.7rem;
+}
 
 .row.first-row::after {
 	content: '';
@@ -255,6 +295,10 @@ th {
 .row-item:hover {
 	background: var(--bgl-gray-light);
 }
+.row-item input[type=checkbox]{
+	margin-top: 0.45rem !important;
+	accent-color: var(--bgl-primary);
+}
 
 .infinite-wrapper {
 	overflow-y: auto;

package/src/components/form/inputs/FileUpload.vue

@@ -14,12 +14,16 @@
 				dragover: isDragOver,
 			}"
 		>
+		<slot name="files" :files="storageFiles" :fileQueue>
 			<template v-for="file in storageFiles" :key="file.id">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="file.url" alt="" />
+				<div class="single-image" v-if="!multiple">
+					<img class="single preview" :src="file.url" alt="" />
+					<!-- <p class="no-margin">
+						{{ file.name }}
+					</p> -->
 				</div>
-				<div class="previewName">
-					<img v-if="multiple" class="preview" :src="file.url" alt="" />
+				<div class="multi-image-item previewName" v-if="multiple">
+					<img  class="preview" :src="file.url" alt="" />
 					<p class="no-margin">
 						{{ file.name }}
 					</p>
@@ -60,6 +64,10 @@
 					</div>
 				</div>
 			</template>
+		</slot>
+			<slot v-if="(!storageFiles.length && !fileQueue.length) || multiple" name="placeholder">
+				<p>Drop files here or click to upload</p>
+			</slot>
 		</div>
 	</div>
 </template>
@@ -224,8 +232,7 @@ const drop = (e: DragEvent) => {
 	cursor: pointer;
 	transition: var(--bgl-transition);
 	position: relative;
-	min-height: 132px;
-	max-height: 500px;
+	height: calc(var(--width) / 1.5);
 	font-size: var(--input-font-size);
 	overflow-y: auto;
 	background: var(--input-bg);
@@ -256,11 +263,24 @@ const drop = (e: DragEvent) => {
 }
 
 img.preview {
-	width: var(--width);
+	/* max-height: calc(var(--width) / 2); */
 	/* max-width: calc(var(--width) * 2); */
+	width: 40px;
+	height: 40px;
 	border-radius: var(--input-border-radius);
 	object-fit: cover;
-	background: var(--bgl-white);
+	background: var(--bgl-gray-light);
+	box-shadow: 0 0 10px #00000012;
+
+}
+
+img.preview.single{
+	max-width: var(--width);
+	width: auto;
+	object-fit: contain;
+	height: auto;
+	max-height: calc(var(--width) / 2);
+	margin: 1rem;
 }
 
 .fileUploadWrap.dragover,
@@ -276,9 +296,6 @@ img.preview {
 	color: var(--bgl-gray);
 }
 
-.bagel-input .fileUploadWrap.fileDropZone:after {
-	content: 'Drop files here or click to upload';
-}
 
 .pie {
 	width: 30px;

package/src/components/form/inputs/SelectInput.vue

@@ -16,9 +16,13 @@
 				class="selectinput-btn"
 				:class="{ isEmpty: selectedItems.length === 0 }"
 			>
-				<p>{{ selectedLabel }}</p>
+				<Icon v-if="icon" :icon="icon" />
+				<p v-if="!hideLabel">
+					{{ selectedLabel }}
+				</p>
 				<Icon
 					v-if="!disabled"
+					thin
 					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
 				/>
 			</button>
@@ -29,7 +33,7 @@
 				@input="updateOpen(true)"
 				:value="selectedItems"
 				required
-			>
+			/>
 		</label>
 		<template #popper>
 			<Card
@@ -71,7 +75,7 @@
 import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
-import { TextInput, Card, Icon } from '@bagelink/vue';
+import { TextInput, Card, Icon, type MaterialIcons } from '@bagelink/vue';
 
 type Option =
 	| string
@@ -91,6 +95,8 @@ const props = defineProps<{
 	label?: string;
 	fullWidth?: boolean;
 	multiselect?: boolean;
+	icon?: MaterialIcons;
+	hideLabel?: boolean;
 }>();
 
 let selectedItems = $ref<Option[]>([]);
@@ -144,19 +150,22 @@ const getValue = (option?: Option) => {
 	return option.value;
 };
 
-const isSelected = (option: Option) => !!selectedItems.find((item) => getValue(option) === getValue(item));
-
-const filteredOptions = $computed(() => props.options.filter((option) => {
-	const searchTerm = search
-		.split(/\s+/)
-		.filter(Boolean)
-		.map((t) => new RegExp(t, 'gi'));
-	return (
-		Boolean(option) &&
+const isSelected = (option: Option) =>
+	!!selectedItems.find((item) => getValue(option) === getValue(item));
+
+const filteredOptions = $computed(() =>
+	props.options.filter((option) => {
+		const searchTerm = search
+			.split(/\s+/)
+			.filter(Boolean)
+			.map((t) => new RegExp(t, 'gi'));
+		return (
+			Boolean(option) &&
 			(searchTerm.every((s) => getLabel(option).match(s)) ||
 				searchTerm.length === 0)
-	);
-}));
+		);
+	}),
+);
 
 const select = (option: Option) => {
 	const existingIndex = selectedItems.findIndex(
@@ -274,6 +283,12 @@ watch(
 	width: 100%;
 	font-family: inherit;
 	font-size: var(--input-font-size);
+
+}
+.selectinput-btn p{
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .selectinput-btn:disabled {