@bagelink/vue 0.0.439 → 0.0.447

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,11 +71,32 @@ 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();
@@ -97,8 +118,6 @@ const computedSchema = $computed(() => {
 		: schema;
 });
 
-const emit = defineEmits(['select', 'orderBy']);
-
 const selectElement = (item: Record<string, any>) => emit('select', item);
 
 let sortDirection = $ref('ASC');
@@ -131,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);
@@ -197,6 +222,9 @@ th {
 	height: 50px;
 	vertical-align: bottom;
 }
+.row.first-row input[type=checkbox]{
+	margin-bottom: 0.7rem;
+}
 
 .row.first-row::after {
 	content: '';
@@ -267,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,59 +14,69 @@
 				dragover: isDragOver,
 			}"
 		>
-			<template v-for="file in storageFiles" :key="file.id">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="file.url" alt="" />
-				</div>
-				<div class="previewName">
-					<img v-if="multiple" class="preview" :src="file.url" alt="" />
-					<p class="no-margin">
+			<slot name="files" :files="storageFiles" :fileQueue>
+				<template v-for="file in storageFiles" :key="file.id">
+					<div class="single-image" v-if="!multiple">
+						<img class="single preview" :src="file.url" alt="" >
+					<!-- <p class="no-margin">
 						{{ file.name }}
-					</p>
-					<Btn
-						thin
-						@click.stop="removeFile(file)"
-						flat
-						icon="delete"
-						color="red"
-					/>
-				</div>
-			</template>
-			<template v-for="fileQ in fileQueue" :key="fileQ.file">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="fileToUrl(fileQ.file)" alt="" />
-				</div>
-				<div class="previewName">
-					<img
-						:width="width || '220'"
-						v-if="multiple"
-						class="preview"
-						:src="fileToUrl(fileQ.file)"
-						alt=""
-					/>
-					<p class="no-margin">
-						{{ fileQ.name }}
-					</p>
-					<div
-						class="pie"
-						:style="`--p:${fileQ.progress}`"
-						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }"
-					>
-						<span class="progress" v-if="fileQ.progress < 100">
-							{{ `${fileQ.progress.toFixed(0)}` }}
-						</span>
-						<MaterialIcon class="success" icon="check" />
+					</p> -->
 					</div>
-				</div>
-			</template>
+					<div class="multi-image-item previewName" v-if="multiple">
+						<img  class="preview" :src="file.url" alt="" >
+						<p class="no-margin">
+							{{ file.name }}
+						</p>
+						<Btn
+							thin
+							@click.stop="removeFile(file)"
+							flat
+							icon="delete"
+							color="red"
+						/>
+					</div>
+				</template>
+				<template v-for="fileQ in fileQueue" :key="fileQ.file">
+					<div class="imagePreviewWrap" v-if="!multiple">
+						<img class="preview" :src="fileToUrl(fileQ.file)" alt="" >
+					</div>
+					<div class="previewName">
+						<img
+							:width="width || '220'"
+							v-if="multiple"
+							class="preview"
+							:src="fileToUrl(fileQ.file)"
+							alt=""
+						>
+						<p class="no-margin">
+							{{ fileQ.name }}
+						</p>
+						<div
+							class="pie"
+							:style="`--p:${fileQ.progress}`"
+							style="--b: 2px"
+							:class="{ complete: fileQ.progress === 100 }"
+						>
+							<span class="progress" v-if="fileQ.progress < 100">
+								{{ `${fileQ.progress.toFixed(0)}` }}
+							</span>
+							<MaterialIcon class="success" icon="check" />
+						</div>
+					</div>
+				</template>
+			</slot>
+			<slot v-if="(!storageFiles.length && !fileQueue.length) || multiple" name="placeholder" :browse>
+				<p>Drop files here or click to upload</p>
+			</slot>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
-import { Btn, type StorageFile, useBagel, MaterialIcon } from '@bagelink/vue';
+import {
+	Btn, type StorageFile, useBagel, MaterialIcon,
+} from '@bagelink/vue';
 
 const bagel = useBagel();
 
@@ -96,8 +106,7 @@ const bindKey: StrKey = props.bindkey || 'id';
 const file_bindkeys = defineModel<FSValue>('modelValue');
 const storageFiles = $ref<StorageFile[]>([]);
 
-const compareIds = (v1?: FSValue, v2?: FSValue) =>
-	[v1].flat().join(',') === [v2].flat().join(',');
+const compareIds = (v1?: FSValue, v2?: FSValue) => [v1].flat().join(',') === [v2].flat().join(',');
 
 onMounted(() => {
 	if (!props.files && [file_bindkeys.value].flat().length) {
@@ -182,9 +191,7 @@ const browse = () => {
 	input.onchange = (e: Event) => {
 		const target = e?.target as HTMLInputElement;
 		if (target?.files) {
-			Array.from(target.files).forEach((file: File) =>
-				fileQueue.push({ name: file.name, file, progress: 0 }),
-			);
+			Array.from(target.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
 		}
 		flushQueue();
 	};
@@ -206,9 +213,7 @@ const dragover = (e: DragEvent) => {
 const drop = (e: DragEvent) => {
 	preventDefault(e);
 	if (e.dataTransfer) {
-		Array.from(e.dataTransfer.files).forEach((file: File) =>
-			fileQueue.push({ name: file.name, file, progress: 0 }),
-		);
+		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
 	}
 	isDragOver = false;
 	flushQueue();
@@ -224,8 +229,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 +260,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,10 +293,6 @@ img.preview {
 	color: var(--bgl-gray);
 }
 
-.bagel-input .fileUploadWrap.fileDropZone:after {
-	content: 'Drop files here or click to upload';
-}
-
 .pie {
 	width: 30px;
 	height: 30px;

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

@@ -283,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 {