@bagelink/vue 0.0.216 → 0.0.223

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

@@ -10,12 +10,14 @@
 			v-model="inputVal"
 			:class="{ 'no-edit': !editMode }"
 		>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			height="24" viewBox="0 -960 960 960"
-			width="24"
-		>
-			<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
+		<div class="check-square">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				height="24" viewBox="0 -960 960 960"
+				width="24"
+			>
+				<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
+		</div>
 		<label :for="id">
 			{{ label }}
 		</label>
@@ -51,13 +53,16 @@ const inputVal = defineModel<boolean>('modelValue', { default: false });
 </style>
 <style scoped>
 .bgl-checkbox{
-position: relative;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .bgl-checkbox input[type=checkbox]{
   display: none;
 }
 .bgl-checkbox label{
-  padding-inline-start: calc(var(--input-height) / 2 + 0.25rem);
+  padding-inline-start: 0.5rem;
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
@@ -68,34 +73,31 @@ position: relative;
 .bgl-checkbox:active{
   filter: var(--bgl-active-filter);
 }
-.bgl-checkbox label::before{
-  content: "";
+.bgl-checkbox .check-square{
   width: calc(var(--input-height) / 2.5);
   height: calc(var(--input-height) / 2.5);
   background: var(--bgl-white);
-  display: inline-block;
-  position: absolute;
-  margin-top: 0.25rem;
-  inset-inline-start: 0;
   border-radius: calc(var(--input-border-radius) / 2) ;
   border: var(--bgl-primary) 1px solid;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-input:checked ~ label::before{
+input:checked ~ .check-square{
   background: var(--bgl-primary);
 }
 .bgl-checkbox svg{
   width: calc(var(--input-height) / 2.5);
   height: calc(var(--input-height) / 2.5);
   position: absolute;
-  inset-inline-start: 0.05rem;
-  margin-top: 0.3rem;
   z-index: 2;
   fill: var(--bgl-white);
   opacity: 0;
   pointer-events: none;
 }
-input:checked ~ svg{
+input:checked ~ .check-square svg{
   opacity: 1;
 }
 </style>

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

@@ -1,55 +1,46 @@
 <template>
 	<div
 		class="bagel-input"
-		:title="field.description"
+		:title="label"
 		:class="{ small: small }"
 	>
-		<label v-if="field.label">
-			{{ field.label }}
+		<label v-if="label">
+			{{ label }}
 		</label>
-		<input
+		<VDatepicker v-model="date" :enable-time-picker="enableTime"/>
+		<!-- <input
 			type="date"
 			v-model="date"
-			@update:modelValue="handleInput"
 			:placeholder="field.placeholder || field.label"
 			class="date-picker"
 			:disabled="!editMode"
 			:enableTimePicker="false"
 			:textInputOptions="{ format: 'yyyy-MM-dd' }"
-		>
+		> -->
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import type { BagelField } from '@bagelink/vue';
+import VDatepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
 
-const props = withDefaults(
+withDefaults(
 	defineProps<{
-		field: BagelField;
-		modelValue: any;
+		label?: string;
 		editMode?: boolean;
 		small?: boolean;
+		enableTime?: boolean;
 	}>(),
 	{
+		enableTime: false,
 		editMode: true,
 		small: false,
 	},
 );
 
-const date = ref(props.modelValue);
-
-const emit = defineEmits(['update:modelValue']);
-
-const handleInput = () => {
-	emit('update:modelValue', date.value.toISOString().split('T').shift());
-};
+const date = defineModel<string>('modelValue', { default: '' });
 </script>
 
 <style scoped>
-/*
-.date-picker {
-	padding-inline-start: 10px;
-}
-*/
+
 </style>

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

@@ -76,13 +76,9 @@
 
 <script setup lang="ts">
 import { VueDraggableNext } from 'vue-draggable-next';
-// import { EntityMeta } from 'bagel-sdk/types';
 import { onMounted, ref } from 'vue';
-import { Btn, formatString } from '@bagelink/vue';
+import { Btn, formatString, MaterialIcon } from '@bagelink/vue';
 
-import MaterialIcon from '../MaterialIcon.vue';
-
-// import { ButtonIcon } from 'src/components/buttons'
 let bagel: any;
 let api: any;
 const props = withDefaults(

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

@@ -2,7 +2,6 @@ export { default as CheckInput } from './CheckInput.vue';
 export { default as CurrencyInput } from './CurrencyInput.vue';
 export { default as DateInput } from './DateInput.vue';
 export { default as DatetimeInput } from './DatetimeInput.vue';
-export { default as EmailInput } from './EmailInput.vue';
 export { default as FloatInput } from './FloatInput.vue';
 export { default as IntInput } from './IntInput.vue';
 export { default as JSONInput } from './JSONInput.vue';
@@ -18,7 +17,6 @@ export { default as TextInput } from './TextInput.vue';
 export { default as TextArea } from './TextArea.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as ColorPicker } from './ColorPicker.vue';
-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';

package/src/components/index.ts

@@ -19,6 +19,8 @@ export { default as RouterWrapper } from './RouterWrapper.vue';
 export { default as ContactSubmissions } from './ContactSubmissions.vue';
 export { default as PersonPreview } from './PersonPreview.vue';
 export { default as DataPreview } from './DataPreview.vue';
+export { default as Card } from './Card.vue';
+export { default as Avatar } from './Avatar.vue';
 
 export * from './charts';
 export * from './formkit';

package/src/plugins/modal.ts

@@ -57,7 +57,6 @@ export const ModalPlugin: Plugin = {
 		const modalStack = $ref<ModalComponentProps[]>([]);
 
 		const hideModal = (index: number) => {
-			// console.log('hideModal', index);
 			modalStack.splice(index, 1);
 		};
 

package/src/styles/inputs.css

@@ -17,7 +17,7 @@ select {
 
 .bagel-input::placeholder .bagel-input label {
     display: block;
-    font-size: var(--input-font-size);
+    font-size: var(--label-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
 }
@@ -183,7 +183,7 @@ button.formkit-input:active {
 
 .formkit-outer label {
     display: block;
-    font-size: var(--input-font-size);
+    font-size: var(--label-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
     color: var(--label-color);

package/src/styles/layout.css

@@ -387,7 +387,7 @@
 label,
 .label {
     display: block;
-    font-size: var(--input-font-size);
+    font-size: var(--label-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
     color: var(--label-color);

package/src/styles/theme.css

@@ -24,7 +24,7 @@
   --bgl-yellow: #ffbb00;
   --bgl-yellow-light: #fff6d5;
   --bgl-green: #75c98f;
-  --border-color: #eff2f5;
+  --border-color: #00000020;
   --bgl-bg: #f4f6fa;
   --bgl-shadow: #4c577d26;
   --whatsapp-gray: #89959f;
@@ -32,15 +32,16 @@
   --whatsapp-blue: #71bce6;
   --input-border-radius: 7px;
   --card-border-radius: 15px;
-  --btn-border-radius: 10px;
-  --btn-padding: 30px;
-  --input-bg: #f5f8fa;
+  --placeholder-color: #00000040;
   --label-color: #00000080;
+  --label-font-size: 12px;
+  --input-bg: #f5f8fa;
   --input-color: #000000;
-  --placeholder-color: #00000040;
   --input-height: 40px;
+  --input-font-size: 14px;
+  --btn-border-radius: 10px;
+  --btn-padding: 30px;
   --btn-height: 40px;
-  --input-font-size: 12px;
   --bgl-transition: all 200ms ease;
   --bgl-hover-filter: brightness(90%);
   --bgl-active-filter: brightness(70%);

package/src/types/index.ts

@@ -2,6 +2,7 @@ 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 type { NavLink } from '../components/NavBar.vue';
 
 export * from './BtnOptions';
 export * from './BagelForm';

package/src/utils/index.ts

@@ -26,7 +26,10 @@ export const useFormkit = () => {
 	return formkit;
 };
 
-export const initials = (...strArr: string[]) => strArr.map((str) => str?.charAt(0)).join('');
+export const initials = (...strArr: string[]) => {
+	strArr = strArr.map((str) => str.split(/\s/)).flat();
+	return strArr.map((str) => str?.charAt(0)).join('');
+};
 
 export function useEscape(event: KeyboardEvent, closeModel: () => void) {
 	if (event.key === 'Escape') {

package/src/components/form/ItemRef.vue

@@ -1,44 +0,0 @@
-<template>
-	<div>
-		{{ field?.label || field.id }}
-
-		<Btn
-			color="gray"
-			@click="openModal()"
-			v-if="field.refCollection"
-		>
-			{{ content }}
-			<MaterialIcon icon="arrow_forward" />
-		</Btn>
-		<span
-			v-else
-			class="pill"
-		>
-			{{ content }}
-		</span>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-
-import type { Router } from 'vue-router';
-import { Btn, MaterialIcon, BagelField } from '@bagelink/vue';
-
-const openRef = ref(false);
-
-const props = defineProps<{
-	modelValue: Record<string, any>;
-	field: BagelField;
-	router: Router;
-}>();
-
-const content = computed(() => props.field.refFields?.map((k) => props.modelValue?.[k] || '').join(' '));
-
-const openModal = () => {
-	console.log(`openning ${props.modelValue?.id}`);
-	openRef.value = true;
-	void props.router.push(`/${props.field.refCollection}/${props.modelValue?.id}`);
-};
-</script>
-s

package/src/components/form/MaterialIcon.vue

@@ -1,19 +0,0 @@
-<template>
-	<div
-		class="icon-font"
-		:style="{ fontSize: `${size}rem` }"
-	>
-		{{ icon }}
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue';
-
-defineProps<{
-	icon: MaterialIcons
-	size?: number
-}>();
-</script>
-
-<style scoped></style>

package/src/components/form/PlainInputField.vue

@@ -1,79 +0,0 @@
-<template>
-	<div class="bagel-input">
-		<label :for="formatString(name, 'pascal')">
-			<LangText :input="formatString(name, 'titleCase')" />
-		</label>
-		<input
-			v-if="type === 'checkbox'"
-			ref="el"
-			:checked="modelValue"
-			class="ctl"
-			type="checkbox"
-			@change="handleCheck"
-		>
-		<input
-			v-else-if="type === 'number'"
-			ref="el"
-			:name="formatString(name, 'pascal')"
-			:type="type"
-			:value="modelValue"
-			class="ctl"
-			@input="handleInput"
-		>
-		<input
-			v-else-if="type === 'text'"
-			ref="el"
-			:name="formatString(name, 'pascal')"
-			:type="type"
-			:value="modelValue"
-			class="ctl"
-			@input="handleInput"
-		>
-		<textarea
-			v-else-if="type === 'textarea'"
-			ref="el"
-			:name="formatString(name, 'pascal')"
-			:type="type"
-			:value="modelValue"
-			class="ctl"
-			@input="handleInput"
-		/>
-		<div>
-			<LangText :input="errorMessage" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-import { formatString } from '@bagelink/vue';
-import LangText from '../LangText.vue';
-
-const props = defineProps<{
-	type: 'text' | 'number' | 'password' | 'email' | 'checkbox' | 'textarea';
-	name: string;
-	value?: any;
-	modelValue: any;
-	errorMessage?: string;
-	focus?: boolean;
-}>();
-
-const emits = defineEmits(['update:modelValue']);
-const el = ref<HTMLInputElement | null>(null);
-const handleInput = (e: Event) => {
-	const el = e.target as HTMLInputElement;
-	emits('update:modelValue', el.value);
-};
-const handleCheck = (e: Event) => {
-	const el = e.target as HTMLInputElement;
-	emits('update:modelValue', el.checked ? 1 : 0);
-};
-onMounted(() => {
-	if (props.focus) {
-		el.value?.focus();
-	}
-});
-</script>
-
-<style scoped></style>

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

@@ -1,137 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:class="{ small: small }"
-	>
-		<label v-if="label">
-			<LangText :input="label" />
-		</label>
-
-		<input
-			@keydown.enter="handleEnter"
-			autocomplete="off"
-			@click="showList = true"
-			name="link-input"
-			v-model="selectedItem"
-			@focus="initList"
-			@input="handleInput"
-			:disabled="!editMode"
-		>
-
-		<div
-			class="custom-select"
-			name="link-input"
-			:class="{ 'open-select': showList && linkOptions.length > 0 }"
-		>
-			<div class="custom-select-drop">
-				<div
-					v-for="item in linkOptions"
-					:key="formatString(item.value, 'pascal')"
-					@click.stop="handleSelect(item)"
-				>
-					{{
-						useId || entity === 'Entity' ? item.value
-						: item.label || item.description || item.value
-					}}
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { formatString } from '@bagelink/vue';
-
-// TODO: remove this Nati ?
-
-const props = withDefaults(
-	defineProps<{
-		label?: string;
-		modelValue: any;
-		useId?: false;
-		bagelApp?: any;
-		entity: string;
-		editMode: boolean;
-		filters?: any;
-		small?: boolean;
-	}>(),
-	{
-		label: '',
-		useId: false,
-		filters: {},
-	},
-);
-const showList = ref(false);
-const linkOptions = ref<any>([]);
-const item = ref<ListItem>();
-const emits = defineEmits(['update:modelValue', 'selected']);
-const selectedItem = ref<any>();
-
-function handleSelect(item: ListItem) {
-	showList.value = false;
-	selectedItem.value = item;
-	if (props.useId) {
-		selectedItem.value = item.value;
-	} else {
-		selectedItem.value = item.label || item.description || item.value;
-	}
-
-	emits('update:modelValue', item.value);
-	emits('selected');
-}
-
-async function getLinkOptions(inputString: string) {
-	linkOptions.value = await props.bagelApp?.entity.getLinkedFieldList({
-		entity: props.entity,
-		txt: inputString,
-		reference_entity: '',
-		filters: props.filters,
-	});
-}
-
-interface ListItem {
-	value: string;
-	label?: string;
-	description?: string;
-}
-
-async function initList(e: Event) {
-	await getLinkOptions(getElValue(e));
-	showList.value = true;
-}
-
-function getElValue(e: Event) {
-	const el = e.target as HTMLInputElement;
-	return el.value.trim();
-}
-
-function handleEnter(e: Event) {
-	emits('update:modelValue', getElValue(e));
-	emits('selected');
-	showList.value = false;
-}
-
-function handleClick(e: any) {
-	const { target } = e;
-	if (target.name != 'link-input' && showList.value == true) {
-		showList.value = false;
-		emits('update:modelValue', item.value);
-		emits('selected');
-	}
-	// showList.value = false
-}
-
-const handleInput = async (e: Event) => {
-	showList.value = true;
-	const el = e.target as HTMLInputElement;
-	emits('update:modelValue', el.value);
-	await getLinkOptions(el.value);
-};
-onMounted(() => {
-	selectedItem.value = props.modelValue;
-	document.addEventListener('click', handleClick);
-});
-</script>
-
-<style scoped></style>

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

@@ -1,58 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="description"
-		:class="{ small: small }"
-	>
-		<label v-if="label">
-			<LangText :input="label" />
-		</label>
-		<input
-			:value="modelValue"
-			maxlength="140"
-			type="email"
-			@input="handleInput"
-			:class="{ 'no-edit': !editMode }"
-			:placeholder="placeholder"
-		>
-		<!-- :placeholder="bagelApp.translate(placeholder, true)" -->
-	</div>
-</template>
-
-<script setup lang="ts">
-// TODO: remove this Nati?
-
-const emits = defineEmits(['update:modelValue']);
-
-// const props =
-withDefaults(
-	defineProps<{
-		description?: string;
-		label?: string;
-		modelValue: any;
-		placeholder?: string;
-		editMode?: boolean;
-		small?: boolean;
-	}>(),
-	{
-		description: '',
-		editMode: true,
-		placeholder: '',
-		label: '',
-	},
-);
-const handleInput = (e: Event) => {
-	const el = e.target as HTMLInputElement;
-	emits('update:modelValue', el.value);
-};
-</script>
-
-<style scoped>
-input[type='email'] {
-	direction: ltr;
-}
-
-[dir='rtl'] input[type='email'] {
-	text-align: end;
-}
-</style>