@bagelink/vue 0.0.198 → 0.0.204

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

@@ -0,0 +1,130 @@
+<template>
+	<div class="bagel-input">
+		<label>
+			{{ label }}
+		</label>
+		<div @click="browse" @dragover="dragenter" @drop="drop" @dragleave="dragleave" class="fileUploadWrap" :class="{fileDropZone: !files.length, dragover: isDragOver}">
+			<div v-if="files.length && !multiple">
+				<div class="imagePreviewWrap">
+					<img class="preview" :src="fileToUrl(files[0])" alt="" >
+				</div>
+				<div class="previewName">
+					<p class="no-margin">
+						{{files[0].name}}
+					</p>
+					<Btn thin @click.stop="removeFile(files[0])" flat icon="delete" color="red"/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Btn } from '@bagelink/vue';
+
+const props = defineProps<{label:string, multiple?: boolean}>();
+const files = $ref<File[]>([]);
+const fileQueue = $ref<File[]>([]);
+let isDragOver = $ref(false);
+
+const preventDefault = (e: Event) => {
+	e.preventDefault();
+	e.stopPropagation();
+};
+
+const fileToUrl = (file: File) => URL.createObjectURL(file);
+const removeFile = (file:File) => {
+	const index = files.indexOf(file);
+	files.splice(index, 1);
+};
+const flushQueue = () => {
+	fileQueue.forEach((file:File, i) => {
+		if (props.multiple) { if (!files.includes(file)) files.push(file); } else files.splice(0, 1, file);
+		console.log(files);
+		fileQueue.splice(i, 1);
+	});
+};
+
+const browse = () => {
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.multiple = props.multiple;
+	input.onchange = (e: Event) => {
+		const target = e?.target as HTMLInputElement;
+		if (target?.files) fileQueue.push(...Array.from(target.files));
+		flushQueue();
+	};
+	input.click();
+};
+
+const dragleave = (e: DragEvent) => {
+	preventDefault(e);
+	if (e.dataTransfer) isDragOver = false;
+	else isDragOver = false;
+};
+
+const dragenter = (e: DragEvent) => {
+	preventDefault(e);
+	if (e.dataTransfer) isDragOver = true;
+	else isDragOver = false;
+};
+
+const drop = (e: DragEvent) => {
+	preventDefault(e);
+	if (e.dataTransfer) fileQueue.push(...Array.from(e.dataTransfer.files));
+	isDragOver = false;
+	flushQueue();
+};
+</script>
+
+<style scoped>
+.bagel-input .fileUploadWrap {
+  outline: 1px solid var(--border-color);
+  border-radius: var(--input-border-radius);
+  text-align: center;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  position: relative;
+  height: 132px;
+  font-size: var(--input-font-size);
+}
+.previewName{
+  padding: 0.5rem;
+  text-align: start;
+  color: var(--input-color);
+  display: grid;
+  grid-template-columns: 1fr 22px;
+  align-items: center;
+
+}
+.previewName p{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.imagePreviewWrap{
+  background: var(--input-bg);
+  border-radius: var(--input-border-radius);
+  height: 90px;
+  padding: 5px;
+}
+
+img.preview {
+  height: 80px;
+  border-radius: var(--input-border-radius);
+  object-fit: contain;
+}
+.fileUploadWrap.dragover, .fileUploadWrap:hover{
+  box-shadow: inset 0 0 10px #00000012;
+}
+.bagel-input .fileUploadWrap.fileDropZone{
+  background: var(--input-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color:var(--bgl-gray);
+}
+.bagel-input .fileUploadWrap.fileDropZone:after {
+  content: "Drop files here or click to upload";
+}
+</style>

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

@@ -62,6 +62,8 @@ const props = withDefaults(
 			field: SelectBagelField;
 			modelValue: any;
 			small?: boolean;
+			label?: string;
+			description?: string;
 		}
 	>(),
 	{

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

@@ -1,15 +1,18 @@
 <template>
 	<div
-		class="bagel-input"
-		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart }"
+		class="bagel-input text-input"
+		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart, code }"
 		:title="title"
 	>
 		<label :for="id">
 			{{ label }}
 			<input
+				:autocomplete="autocomplete"
+				v-if="!multiline && !autoheight && !code"
 				:id="id"
 				v-model="inputVal"
 				:type="type"
+				:rows="1"
 				ref="input"
 				:placeholder="placeholder || label"
 				:disabled="!editMode"
@@ -17,8 +20,21 @@
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
 				@dblclick="toggleEditAction"
-				@keydown.enter="toggleEditAction"
 			>
+			<textarea
+				v-else
+				:id="id"
+				v-model="inputVal"
+				:type="type"
+				:rows="rows"
+				ref="input"
+				:placeholder="placeholder || label"
+				:disabled="!editMode"
+				:required="required"
+				:pattern="pattern"
+				v-bind="nativeInputAttrs"
+				@dblclick="toggleEditAction"
+			/>
 		</label>
 
 		<MaterialIcon
@@ -64,11 +80,17 @@ const props = withDefaults(
 		nativeInputAttrs?: Record<string, any>;
 		icon?: MaterialIcons;
 		iconStart?: MaterialIcons;
+    multiline?: boolean;
+    autoheight?: boolean;
+		code?: boolean;
+		lines?: number;
+		autocomplete?: string;
 	}>(),
 	{
 		type: 'text',
 		toggleEdit: false,
 		modelValue: '',
+		autocomplete: 'off',
 	},
 );
 let inputVal = $ref<string | number>();
@@ -87,6 +109,13 @@ const toggleEditAction = () => {
 	}
 };
 
+const rows = $computed(() => {
+	if (props.lines) return props.lines;
+	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
+	if (props.multiline || props.code) return 4;
+	return 1;
+});
+
 watch(
 	() => inputVal,
 	(newVal) => {
@@ -115,10 +144,17 @@ watch(
 </style>
 
 <style scoped>
-.bagel-input input[disabled] {
-	background: none;
+.bagel-input textarea{
+  min-height: unset;
+}
+.bagel-input.text-input textarea{
+  resize: none;
+}
+.code textarea{
+  font-family: 'Inconsolata', monospace;
+  background: var(--bgl-black) !important;
+  color: var(--bgl-white) !important;
 }
-
 .bagel-input.toggleEdit:hover {
 	background-color: var(--input-bg);
 }
@@ -155,7 +191,7 @@ watch(
 	color: var(--bgl-gray);
 }
 
-.txtInputIconStart input {
+.txtInputIconStart textarea {
 	padding-inline-start: 2rem;
 }
 
@@ -164,7 +200,7 @@ watch(
 	opacity: 1;
 }
 
-.bagel-input.small input {
+.bagel-input.small textarea {
 	height: 30px;
 }
 </style>

package/src/components/form/inputs/index.ts

@@ -22,3 +22,4 @@ export { default as DynamicLinkField } from './DynamicLinkField.vue';
 export { default as PlainText } from './PlainText.vue';
 export { default as DatePicker } from './DatePicker.vue';
 export { default as RadioPillsInput } from './RadioPillsInput.vue';
+export { default as FileUpload } from './FileUpload.vue';

package/src/types/BagelField.ts

@@ -49,9 +49,4 @@ export interface NestedBagelForm extends BaseBagelField {
 	fields: NestedBagelFormFields;
 }
 
-export interface SelectBagelField extends BaseBagelField {
-	inputType: 'SelectField';
-	options: string | { label: string; value: string | number }[];
-}
-
-export type BagelField = BaseBagelField | SelectBagelField | NestedBagelForm;
+export type BagelField = BaseBagelField | NestedBagelForm;

package/src/types/BagelForm.ts

@@ -0,0 +1,24 @@
+export type AttributeValue = string | number | boolean | null | undefined | Record<string, any>;
+
+export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => AttributeValue;
+
+export interface Attributes<T = any> {
+  [key: string]: AttributeValue | AttributeFn<T>
+}
+
+export type Field<T = Record<string, any>> = {
+  $el?: any;
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  children?: Field<T>[];
+  attrs?: Attributes<T>;
+  required?: boolean;
+}
+
+export interface SelectBagelField {
+	inputType: 'SelectField';
+	options: string | { label: string; value: string | number }[];
+}
+
+export type BglFormSchemaT<T = Record<string, any>> = Field<T>[];

package/src/types/index.ts

@@ -2,7 +2,16 @@ export type { MaterialIcons } from './materialIcons';
 export type { BankDetailsInterface, NewPerson, Person } from './Person';
 export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
-export * from './BagelField';
+
 export * from './BtnOptions';
+export * from './BagelForm';
 
-export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
+export type ThemeType = |
+	'light'
+	| 'red'
+	| 'gray'
+	| 'gray-light'
+	| 'black'
+	| 'green'
+	| 'primary'
+	| 'blue' // ! blue does nothing

package/src/utils/index.ts

@@ -1,6 +1,5 @@
 import { inject } from 'vue';
-
-import type { BagelField } from '@bagelink/vue';
+import { Attributes } from '../types';
 
 let timeout: any;
 export const debounce = (fn: () => void, delay = 500) => {
@@ -13,27 +12,6 @@ export const keyToLabel = (key: string) => key
 	.map((k) => k.charAt(0).toUpperCase() + k.slice(1))
 	.join(' ');
 
-export function computeFields(modelValue: Record<string, any>): BagelField[] {
-	const fields = [];
-	for (const key of Object.keys(modelValue)) {
-		const field: BagelField = {
-			label: keyToLabel(key),
-			id: key,
-			inputType: 'PlainText',
-		};
-		if (typeof modelValue[key] === 'string') field.inputType = 'PlainText';
-		if (typeof modelValue[key] === 'number') field.inputType = 'NumberInput';
-		if (modelValue[key] === true || modelValue[key] === false) field.inputType = 'CheckInput';
-		if (
-			modelValue[key] instanceof Date ||
-			!Number.isNaN(Date.parse(modelValue[key]))
-		) field.inputType = 'DateInput';
-
-		fields.push(field);
-	}
-	return fields;
-}
-
 export const copyText = async (
 	text: string,
 	// eslint-disable-next-line no-unused-vars
@@ -56,4 +34,13 @@ export function useEscape(event: KeyboardEvent, closeModel: () => void) {
 	}
 }
 
+export function bindAttrs<T = Record<string, any>>(attrs: Attributes, fieldVal: any, row: T) {
+	const arr = Object.entries(attrs).map(([key, value]) => [
+		key,
+		typeof value === 'function' ? value(fieldVal, row) : value,
+	]);
+	const resolvedAttrs = Object.fromEntries(arr);
+	return resolvedAttrs;
+}
+
 export { formatString } from './strings';

package/dist/components/FileUploader.vue.d.ts

@@ -1,60 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    done: (...args: any[]) => void;
-    complete: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>>> & {
-    onDone?: ((...args: any[]) => any) | undefined;
-    onComplete?: ((...args: any[]) => any) | undefined;
-}, {
-    id: string;
-    private: 1 | 0;
-    beforeUpload: () => Promise<any>;
-    dragDropLabel: string;
-    browseLabel: string;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-//# sourceMappingURL=FileUploader.vue.d.ts.map

package/dist/components/FileUploader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileUploader.vue.d.ts","sourceRoot":"","sources":["../../src/components/FileUploader.vue"],"names":[],"mappings":"AAiDA;;;;;0BA6YuB,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;;;;0BAAZ,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;QAJ5B,MAAM;aAED,CAAC,GAAG,CAAC;kBAEA,MAAM,QAAQ,GAAG,CAAC;mBACjB,MAAM;iBACR,MAAM;;AARtB,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}