@bagelink/vue 0.0.200 → 0.0.206

package/src/components/Btn.vue

@@ -70,19 +70,20 @@ const props = withDefaults(
 		type: 'button',
 		role: 'button',
 		is: 'button',
+		border: false,
 	},
 );
 
 const computedTheme = $computed(
-	() => (props?.color || props?.theme)
+	() => (props?.color || props?.theme),
 );
 
 const computedDefaultColors = $computed(
 	() => ({
 		backgroundColor: 'var(--bgl-primary)',
-		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)'
-	})
-)
+		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
+	}),
+);
 
 function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
 	return ({
@@ -91,17 +92,18 @@ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof co
 		color: props.flat
 			? theme.backgroundColor as string
 			: theme.color as string,
-	})
+	});
 }
 
 const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
 	red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
 	black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
 	green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	blue: getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
+	primary: getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
 	gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
 	light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
 	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
+	blue: getThemeColors({}),
 };
 
 const cumputedTextColor = $computed(
@@ -184,7 +186,6 @@ const computedBackgroundColor = $computed(
 	filter: var(--bgl-active-filter);
 }
 
-
 .btn.flatBtn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);

package/src/components/TabbedLayout.vue

@@ -1,65 +1,65 @@
 <template>
-  <div class="h-100 grid list-view gap-3">
-    <div class="card tabs-top">
-      <slot name="top-section" />
-      <div class="tabs grid auto-flow-columns fit-content">
-        <div
-          v-for="tab in tabs"
-          :class="{
-            active:
-              tab === activeTab ||
-              tab === router.currentRoute.value.path.split('/').slice(-1)[0],
-          }"
-          class="tab"
-          :key="tab"
-          @click="changeTab(tab)"
-        >
-          {{ tab }}
-        </div>
-      </div>
-    </div>
-    <!-- <TransitionRouterView v-if="baseRoute" /> -->
-    <div
-      class="list-content"
-      v-for="tab in tabs.filter((item) => item === activeTab)"
-      :key="tab"
-    >
-      <slot :name="tab" :key="tab" />
-    </div>
-  </div>
+	<div class="h-100 grid list-view gap-3" :class="{'side-tabs': sideTabs}">
+		<div class="card tabs-top">
+			<slot name="top-section" />
+			<div class="tabs grid auto-flow-columns fit-content">
+				<div
+					v-for="tab in tabs"
+					:class="{
+						active:
+							tab === activeTab ||
+							tab === router?.currentRoute.value.path.split('/').slice(-1)[0],
+					}"
+					class="tab"
+					:key="tab"
+					@click="changeTab(tab)"
+				>
+					{{ tab }}
+				</div>
+			</div>
+		</div>
+		<div
+			class="list-content"
+			v-for="tab in tabs.filter((item) => item === activeTab)"
+			:key="tab"
+		>
+			<slot :name="tab" :key="tab" />
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
-import type { Router } from "vue-router";
+import { onMounted } from 'vue';
+import type { Router } from 'vue-router';
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 
 let activeTab = $ref<string>();
 const props = defineProps<{
   title?: string;
   tabs: string[];
   modelValue?: string;
-  router: Router;
+  router?: Router;
+  sideTabs?: boolean;
 }>();
 
 function changeTab(tab: string) {
-  const { router } = props;
-  activeTab = tab;
-  void router.push({
-    path: router.currentRoute.value.path,
-    query: { ...router.currentRoute.value.query, t: tab },
-    hash: router.currentRoute.value.hash,
-  });
-  emit("update:modelValue", activeTab);
+	activeTab = tab;
+	emit('update:modelValue', activeTab);
+	if (!props.router) return;
+	void props.router?.push({
+		path: props.router.currentRoute.value.path,
+		query: { ...props.router.currentRoute.value.query, t: tab },
+		hash: props.router.currentRoute.value.hash,
+	});
 }
 
 onMounted(() => {
-  const firstTab =
+	const firstTab =
     props.modelValue ||
-    props.router.currentRoute.value.query.t ||
+    props.router?.currentRoute.value.query.t ||
     props.tabs[0];
-  activeTab = firstTab as string;
+	activeTab = firstTab as string;
 });
 </script>
 
@@ -68,7 +68,20 @@ onMounted(() => {
   text-transform: capitalize;
 }
 
-.card.tabs-top {
-  /* width: 99%; */
+.side-tabs{
+  display: flex;
+}
+.side-tabs .tabs-top{
+ margin-inline-end: 1rem;
+}
+.side-tabs .tabs{
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.side-tabs .tab{
+ border: none;
 }
 </style>

package/src/components/form/BglField.vue

@@ -0,0 +1,30 @@
+<template>
+	<component
+		:required="field.required"
+		v-bind="bindAttrs(field?.attrs||{}, props.modelValue[field.id || ''], props.modelValue,)"
+		:is="field.$el || 'div'"
+		:label="field.label"
+		:id="field.id"
+		:placeholder="field.placeholder || field.label"
+		:modelValue="props.modelValue[field.id || '']"
+		@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
+	>
+		<BglField
+			:modelValue="modelValue"
+			@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
+			v-for="(child,ii) in field.children" :key="child.id||ii"
+			:field="child"
+		/>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import { type Field, bindAttrs } from '@bagelink/vue';
+
+const props = defineProps<{
+    modelValue: Record<string, any>;
+    field: Field
+  }>();
+
+const emits = defineEmits(['update:modelValue']);
+</script>

package/src/components/form/BglForm.vue

@@ -0,0 +1,75 @@
+<template>
+	<form @submit.prevent="runSubmit">
+		<BglField
+			v-for="(field, i) in schema" :key="field.id || `${i  }p`" :field="field" :modelValue="data"
+			@update:modelValue="($event: any) => field.id ? data[field.id] = $event : ''"
+		/>
+		<Btn
+			class="del-top" v-if="modelValue?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
+			color="red" thin
+		/>
+		<Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
+		<div v-else>
+			<slot name="submit"/>
+		</div>
+	</form>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import { Btn, useModal, BglField } from '@bagelink/vue';
+import { type BglFormSchemaT } from '@bagelink/vue';
+
+const { showModal } = useModal();
+
+const props = defineProps<{
+	modelValue?: any;
+	schema: BglFormSchemaT;
+	onDelete?: ((id: string) => void);
+	onSubmit?: ((data: any) => void);
+}>();
+
+const emits = defineEmits(['update:modelValue', 'submit']);
+const handleEmit = (val: any) => emits('update:modelValue', val);
+let data = $ref({
+	...props.modelValue,
+});
+const runSubmit = () => {
+	emits('submit', data);
+	clearForm();
+};
+
+const clearForm = () => data = {};
+
+const i18nT = (val: string) => val;
+
+watch(
+	() => data,
+	() => handleEmit,
+	{ immediate: true },
+);
+
+const runDelete = () => {
+	showModal(
+		{
+			class: 'small-modal',
+			title: i18nT('Are you sure?'),
+			actions: [
+				{
+					value: 'Confirm',
+					color: 'red',
+					onClick: () => props.onDelete?.(data.id),
+				},
+				{ value: 'Cancel', color: 'gray' },
+			],
+		},
+		{ default: i18nT('form.deleteMessage') },
+	);
+};
+</script>
+
+<style>
+.del-top {
+	transform: translateY(-2.6rem);
+}
+</style>

package/src/components/form/index.ts

@@ -1,4 +1,6 @@
 export { default as ItemRef } from './ItemRef.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as PlainInputField } from './PlainInputField.vue';
+export { default as BglForm } from './BglForm.vue';
+export { default as BglField } from './BglField.vue';
 export * from './inputs';

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/RadioPillsInput.vue

@@ -1,15 +1,20 @@
 <template>
-	<div class="flex gap-2 flex-wrap">
-		<div class="radio-pill" v-for="({id,label,value}, index) in cumputedOptions" :key="index">
-			<input
-				type="radio"
-				:id="id"
-				:name="name"
-				:value="value"
-				:checked="selectedValue === value"
-				@change="handleSelect"
-			>
-			<label :for="id">{{ label }}</label>
+	<div class="bagel-input">
+		<label class="pb-025" >
+			{{ label  }}
+		</label>
+		<div class="flex gap-2 flex-wrap">
+			<div class="radio-pill" v-for="({optioId,label,value}, index) in cumputedOptions" :key="index">
+				<input
+					type="radio"
+					:id="optioId"
+					:name="id"
+					:value="value"
+					:checked="selectedValue === value"
+					@change="handleSelect"
+				>
+				<label :for="optioId">{{ label }}</label>
+			</div>
 		</div>
 	</div>
 </template>
@@ -18,7 +23,7 @@
 import { onMounted, watch } from 'vue';
 
 interface RadioOption {
-	id: string;
+	optioId: string;
 	label: string;
 	value: any;
 }
@@ -28,11 +33,12 @@ const props = defineProps<{
 	options?: RadioOption[],
 	stringOptions: string[],
 	modelValue: any,
-	name: string,
+	id?: string,
+	label?: string,
 }>();
 
 const cumputedOptions = $computed(() => props.options || props.stringOptions.map((v) => ({
-	id: v,
+	optioId: v,
 	label: v,
 	value: v,
 })));

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'| 'blue';
+export type ThemeType = |
+	'light'
+	| 'red'
+	| 'gray'
+	| 'gray-light'
+	| 'black'
+	| 'green'
+	| 'primary'
+	| 'blue' // ! blue does nothing

package/src/types/materialIcons.ts

@@ -528,6 +528,7 @@ export type MaterialIcons =
     | 'check_in_out'
     | 'check_indeterminate_small'
     | 'check_small'
+    | 'checkbook'
     | 'checklist'
     | 'checklist_rtl'
     | 'checkroom'