@bagelink/vue 0.0.218 → 0.0.226-beta.0

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

@@ -0,0 +1,517 @@
+<template>
+	<div class="pb-1">
+		<label :for="id">
+			{{ label }}
+			<Multiselect
+				ref="multiselect" :closeOnSelect="true" :id="id" label="label" trackBy="value" :options="optionList"
+				:required="required" :placeholder="placeholder" v-model="seletValue"
+			/>
+		</label>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import Multiselect from 'vue-multiselect';
+
+type Option = {
+	label: string;
+	value: string | number;
+};
+type RawOption = Option | string | number;
+
+const props = defineProps<{
+	required?: boolean,
+	label: string,
+	id: string,
+	modelValue?: string | number,
+	placeholder?: string,
+	defaultValue?: string | number,
+	options: RawOption[] | string
+}>();
+
+let dataValue = $ref<string | number | undefined>(props.modelValue || props.defaultValue);
+const multiselect = $ref<Multiselect>();
+const emit = defineEmits(['update:modelValue']);
+const optionList = $ref<Option[]>([]);
+
+const seletValue = $computed({
+	get: () => optionList.find((opt) => opt.value === dataValue),
+	set: (val?: Option) => {
+		dataValue = val?.value;
+		emit('update:modelValue', dataValue);
+		multiselect?.deactivate();
+	},
+});
+
+function optnToValueLabel(option: RawOption): Option {
+	if (typeof option === 'string' || typeof option === 'number') {
+		return { label: `${option}`, value: option };
+	}
+	return option;
+}
+
+function updateOptionList() {
+	const { options } = props;
+	const optnLst = typeof options === 'string' ? options.split('\n|,') : options || [];
+	optionList.push(...optnLst.map(optnToValueLabel));
+}
+
+watch(() => props.options, updateOptionList, { immediate: true });
+</script>
+
+<style>
+fieldset[disabled] .multiselect {
+	pointer-events: none;
+}
+
+.multiselect__spinner {
+	position: absolute;
+	right: 1px;
+	top: 1px;
+	width: 40px;
+	height: 38px;
+	background: #fff;
+	display: block;
+}
+
+.multiselect__spinner::before,
+.multiselect__spinner::after {
+	position: absolute;
+	content: "";
+	top: 50%;
+	left: 50%;
+	margin: -8px 0 0 -8px;
+	width: 16px;
+	height: 16px;
+	border-radius: 100%;
+	border-color: var(--bgl-primary-tint) transparent transparent;
+	border-style: solid;
+	border-width: 2px;
+	box-shadow: 0 0 0 1px transparent;
+}
+
+.multiselect__spinner::before {
+	animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
+	animation-iteration-count: infinite;
+}
+
+.multiselect__spinner::after {
+	animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
+	animation-iteration-count: infinite;
+}
+
+.multiselect__loading-enter-active,
+.multiselect__loading-leave-active {
+	transition: opacity 0.4s ease-in-out;
+	opacity: 1;
+}
+
+.multiselect__loading-enter,
+.multiselect__loading-leave-active {
+	opacity: 0;
+}
+
+.multiselect,
+.multiselect__input,
+.multiselect__single {
+	font-family: inherit;
+	font-size: var(--input-font-size);
+	touch-action: manipulation;
+}
+
+.multiselect {
+	box-sizing: content-box;
+	display: block;
+	position: relative;
+	width: 100%;
+	min-height: var(--input-height);
+	text-align: left;
+	color: #35495e;
+}
+
+.multiselect * {
+	box-sizing: border-box;
+}
+
+.multiselect:focus {
+	outline: none;
+}
+
+.multiselect--disabled {
+	background: #ededed;
+	pointer-events: none;
+	opacity: 0.6;
+}
+
+.multiselect--active {
+	z-index: 50;
+}
+
+.multiselect--active:not(.multiselect--above) .multiselect__current,
+.multiselect--active:not(.multiselect--above) .multiselect__input,
+.multiselect--active:not(.multiselect--above) .multiselect__tags {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.multiselect--active:not(.multiselect--above) .multiselect__tags {
+	box-shadow: inset 0 0 10px #00000012;
+}
+
+.multiselect--active .multiselect__select {
+	transform: rotateZ(180deg);
+}
+
+.multiselect--above.multiselect--active .multiselect__current,
+.multiselect--above.multiselect--active .multiselect__input,
+.multiselect--above.multiselect--active .multiselect__tags {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+
+.multiselect__input,
+.multiselect__single {
+	position: relative;
+	display: inline-block;
+	min-height: 20px;
+	line-height: 20px;
+	border: none;
+	border-radius: var(--input-border-radius);
+	background: var(--input-bg);
+	padding: 0 0 0 5px;
+	width: calc(100%);
+	transition: border 0.1s ease;
+	box-sizing: border-box;
+	margin-bottom: 8px;
+	vertical-align: top;
+}
+
+.multiselect__input::placeholder {
+	color: #35495e;
+}
+
+.multiselect__tag~.multiselect__input,
+.multiselect__tag~.multiselect__single {
+	width: auto;
+}
+
+.multiselect__input:hover,
+.multiselect__single:hover {
+	border-color: #cfcfcf;
+}
+
+.multiselect__input:focus,
+.multiselect__single:focus {
+	border-color: #a8a8a8;
+	outline: none;
+}
+
+.multiselect__single {
+	padding-left: 5px;
+	margin-bottom: 8px;
+}
+
+.multiselect__tags-wrap {
+	display: inline;
+}
+
+.multiselect__tags {
+	min-height: 40px;
+	display: block;
+	padding: 8px 40px 0 8px;
+	border-radius: var(--input-border-radius);
+	background: var(--input-bg);
+	font-size: var(--input-font-size);
+}
+
+.multiselect__tag {
+	position: relative;
+	display: inline-block;
+	padding: 4px 26px 4px 10px;
+	border-radius: 5px;
+	margin-right: 10px;
+	color: #fff;
+	line-height: 1;
+	background: var(--bgl-primary-tint);
+	margin-bottom: 5px;
+	white-space: nowrap;
+	overflow: hidden;
+	max-width: 100%;
+	text-overflow: ellipsis;
+}
+
+.multiselect__tag-icon {
+	cursor: pointer;
+	margin-left: 7px;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	font-weight: 700;
+	font-style: initial;
+	width: 22px;
+	text-align: center;
+	line-height: 22px;
+	transition: all 0.2s ease;
+	border-radius: 5px;
+}
+
+.multiselect__tag-icon::after {
+	content: "×";
+	color: #266d4d;
+	font-size: 14px;
+}
+
+/* // Remove these lines to avoid green closing button
+  //.multiselect__tag-icon:focus,
+  //.multiselect__tag-icon:hover {
+  //  background: #369a6e;
+  //} */
+
+.multiselect__tag-icon:focus::after,
+.multiselect__tag-icon:hover::after {
+	color: white;
+}
+
+.multiselect__current {
+	line-height: 16px;
+	min-height: 40px;
+	box-sizing: border-box;
+	display: block;
+	overflow: hidden;
+	padding: 8px 12px 0;
+	padding-right: 30px;
+	white-space: nowrap;
+	margin: 0;
+	text-decoration: none;
+	border-radius: 5px;
+	/* border: 1px solid #e8e8e8; */
+	cursor: pointer;
+}
+
+.multiselect__select {
+	line-height: 16px;
+	display: block;
+	position: absolute;
+	box-sizing: border-box;
+	width: 40px;
+	height: 38px;
+	right: 1px;
+	top: 1px;
+	padding: 4px 8px;
+	margin: 0;
+	text-decoration: none;
+	text-align: center;
+	cursor: pointer;
+	transition: transform 0.2s ease;
+}
+
+.multiselect__select::before {
+	position: relative;
+	right: 0;
+	top: calc(var(--input-height) / 2 - var(--input-font-size));
+	color: var(--bgl-black);
+	content: "expand_more";
+	font-family: "Material Icons";
+	font-size: var(--input-font-size);
+}
+
+.multiselect__placeholder {
+	color: #adadad;
+	display: inline-block;
+	margin-bottom: 10px;
+	padding-top: 2px;
+}
+
+.multiselect--active .multiselect__placeholder {
+	display: none;
+}
+
+.multiselect__content-wrapper {
+	position: absolute;
+	display: block;
+	background: #fff;
+	width: 100%;
+	max-height: 240px;
+	overflow: auto;
+	box-shadow: 0 0 10px #00000012;
+	border-top: none;
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	z-index: 50;
+	-webkit-overflow-scrolling: touch;
+}
+
+.multiselect__content {
+	list-style: none;
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	min-width: 100%;
+	vertical-align: top;
+}
+
+.multiselect--above .multiselect__content-wrapper {
+	bottom: 100%;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	border-bottom: none;
+	border-top: 1px solid #e8e8e8;
+}
+
+.multiselect__content::-webkit-scrollbar {
+	display: none;
+}
+
+.multiselect__element {
+	display: block;
+}
+
+.multiselect__option {
+	display: block;
+	padding-inline-start: 12px;
+	min-height: calc(var(--input-height) * 0.8);
+	line-height: calc(var(--input-height) * 0.8);
+	text-decoration: none;
+	text-transform: none;
+	position: relative;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.multiselect__option::after {
+	top: 0;
+	right: 0;
+	position: absolute;
+	width: calc(var(--input-height) * 0.8);
+	height: calc(var(--input-height) * 0.8);;
+	text-align: center;
+	font-size: 13px;
+}
+
+.multiselect__option--highlight {
+	background: var(--bgl-primary-light);
+	outline: none;
+	color: var(--bgl-primary);
+}
+
+.multiselect__option--selected {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
+	font-weight: bold;
+}
+
+.multiselect__option--selected.multiselect__option--highlight {
+	filter: brightness(0.9);
+	color: #fff;
+}
+
+.multiselect__option--selected.multiselect__option--highlight::after {
+	content: "✕";
+	color: var(--bgl-white);
+}
+
+.multiselect--disabled .multiselect__current,
+.multiselect--disabled .multiselect__select {
+	background: #ededed;
+	color: #a6a6a6;
+}
+
+.multiselect__option--disabled {
+	background: #ededed !important;
+	color: #a6a6a6 !important;
+	cursor: text;
+	pointer-events: none;
+}
+
+.multiselect__option--group {
+	background: #ededed;
+	color: #35495e;
+}
+
+.multiselect__option--group.multiselect__option--highlight {
+	background: #35495e;
+	color: #fff;
+}
+
+.multiselect__option--group.multiselect__option--highlight::after {
+	background: #35495e;
+}
+
+.multiselect__option--disabled.multiselect__option--highlight {
+	background: #dedede;
+}
+
+.multiselect__option--group-selected.multiselect__option--highlight {
+	background: var(--bgl-red);
+	color: #fff;
+}
+
+.multiselect__option--group-selected.multiselect__option--highlight::after {
+	background: var(--bgl-red);
+	content: attr(data-deselect);
+	color: #fff;
+}
+
+.multiselect-enter-active,
+.multiselect-leave-active {
+	transition: all 0.15s ease;
+}
+
+.multiselect-enter,
+.multiselect-leave-active {
+	opacity: 0;
+}
+
+.multiselect__strong {
+	margin-bottom: 8px;
+	line-height: 20px;
+	display: inline-block;
+	vertical-align: top;
+}
+
+*[dir="rtl"] .multiselect {
+	text-align: right;
+}
+
+*[dir="rtl"] .multiselect__select {
+	right: auto;
+	left: 1px;
+}
+
+*[dir="rtl"] .multiselect__tags {
+	padding: 8px 8px 0 40px;
+}
+
+*[dir="rtl"] .multiselect__content {
+	text-align: right;
+}
+
+*[dir="rtl"] .multiselect__option::after {
+	right: auto;
+	left: 0;
+}
+
+*[dir="rtl"] .multiselect__clear {
+	right: auto;
+	left: 12px;
+}
+
+*[dir="rtl"] .multiselect__spinner {
+	right: auto;
+	left: 1px;
+}
+
+@keyframes spinning {
+	from {
+		transform: rotate(0);
+	}
+
+	to {
+		transform: rotate(2turn);
+	}
+}
+</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';
@@ -10,7 +9,7 @@ export { default as LinkField } from './LinkField.vue';
 export { default as PasswordInput } from './PasswordInput.vue';
 export { default as Password } from './Password.vue';
 export { default as ReadOnlyInput } from './ReadOnlyInput.vue';
-export { default as SelectField } from './SelectField.vue';
+export { default as SelectInput } from './SelectInput.vue';
 export { default as RichTextEditor } from './RichTextEditor.vue';
 export { default as TableField } from './TableField.vue';
 export { default as DurationInput } from './DurationInput.vue';
@@ -18,8 +17,8 @@ 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';
 export { default as FileUpload } from './FileUpload.vue';
+export { default as ToggleInput } from './ToggleInput.vue';

package/src/components/formkit/index.ts

@@ -6,7 +6,6 @@ import BankDetailsArray from './BankDetailsArray.vue';
 import MiscFieldsBtns from './MiscFields.vue';
 import Toggle from './Toggle.vue';
 import FileUploader from './FileUploader.vue';
-import PPV from '../PersonPreviewFormkit.vue';
 import TextVariableExamples from '../whatsapp/form/TextVariableExamples.vue';
 
 const ContactArrayInput: FormKitTypeDefinition = createInput(ContactArrayFormKit);
@@ -16,12 +15,10 @@ const MiscFieldsInput: FormKitTypeDefinition = createInput(MiscFieldsBtns);
 const ToggleSwitchInput: FormKitTypeDefinition = createInput(Toggle);
 const FileUploadInput: FormKitTypeDefinition = createInput(FileUploader);
 const TextVariablesInput: FormKitTypeDefinition = createInput(TextVariableExamples);
-const PersonPreviewInput: FormKitTypeDefinition = createInput(PPV);
 
 export {
 	TextVariablesInput,
 	ContactArrayInput,
-	PersonPreviewInput,
 	AddressInput,
 	BankDetailsInput,
 	MiscFieldsInput,

package/src/components/index.ts

@@ -5,20 +5,21 @@ export { default as NavBar } from './NavBar.vue';
 export { default as Btn } from './Btn.vue';
 export { default as Modal } from './Modal.vue';
 export { default as ModalBglForm } from './ModalBglForm.vue';
-export { default as DropDown } from './DropDown.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as Dropdown } from './Drop.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';
 export { default as TabbedLayout } from './TabbedLayout.vue';
 export { default as Comments } from './Comments.vue';
 export { default as PageTitle } from './PageTitle.vue';
-export { default as ModalForm } from './ModalForm.vue';
 export { default as FormSchema } from './FormSchema.vue';
 export { default as TableSchema } from './TableSchema.vue';
 export { default as TopBar } from './TopBar.vue';
 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 { default as Title } from './Title.vue';
 
 export * from './charts';
 export * from './formkit';

package/src/plugins/bagel.ts

@@ -27,7 +27,7 @@ export interface BagelOptions {
   // eslint-disable-next-line no-unused-vars
   onError?: (err: Error) => void,
   // eslint-disable-next-line no-unused-vars
-	i18nT?: (key: string) => string
+	i18nT?: (key?: string) => string
 }
 
 export const BagelVue: Plugin = {
@@ -36,7 +36,7 @@ export const BagelVue: Plugin = {
 
 		app.config.globalProperties.$bagel = bagel;
 		app.provide(bagelInjectionKey, bagel);
-		app.config.globalProperties.$i18T = options?.i18nT || ((key: string) => key);
+		app.config.globalProperties.$i18T = options?.i18nT || ((key?: string) => key);
 		app.provide(i18nTInjectionKey, options?.i18nT || ((key: string) => key));
 	},
 };

package/src/plugins/modal.ts

@@ -2,10 +2,9 @@ import {
 	h, InjectionKey, inject, defineComponent,
 } from 'vue';
 import type { Plugin } from 'vue';
-import type { BtnOptions } from '@bagelink/vue';
-import { Modal, ModalForm, ModalBglForm } from '@bagelink/vue';
+import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue';
+import { Modal, ModalBglForm } from '@bagelink/vue';
 import type { FormKitSchemaDefinition } from '@formkit/core';
-import { BglFormSchemaT } from 'dist/types';
 
 interface ModalOptions {
 	title?: string;
@@ -32,8 +31,6 @@ interface ModalApi {
 	// eslint-disable-next-line no-unused-vars
 	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
 	// eslint-disable-next-line no-unused-vars
-	modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => void;
-	// eslint-disable-next-line no-unused-vars
 	hideModal: (index?: number) => void;
 	// modalOptions: Ref<ModalOptions | ModalFormOptions>;
 }
@@ -48,7 +45,7 @@ export const useModal = (): ModalApi => {
 
 interface ModalComponentProps {
 	componentSlots: Record<string, any>,
-	modalType: 0 | 1 | 2,
+	modalType: 'modal' | 'modalForm',
 	modalOptions: ModalOptions | ModalFormOptions
 }
 
@@ -57,12 +54,11 @@ export const ModalPlugin: Plugin = {
 		const modalStack = $ref<ModalComponentProps[]>([]);
 
 		const hideModal = (index: number) => {
-			// console.log('hideModal', index);
 			modalStack.splice(index, 1);
 		};
 
 		const showModal = (
-			modalType: 0 | 1 | 2,
+			modalType: 'modal' | 'modalForm',
 			options: ModalOptions | ModalFormOptions,
 			slots: Record<string, any> = {},
 		) => {
@@ -74,9 +70,8 @@ export const ModalPlugin: Plugin = {
 		};
 
 		app.provide(ModalSymbol, {
-			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(1, options, slots),
-			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(0, options, slots),
-			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(2, options, slots),
+			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal('modal', options, slots),
+			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots),
 			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});
@@ -90,8 +85,7 @@ export const ModalPlugin: Plugin = {
 			render() {
 				return modalStack.map((modal, index) => {
 					let renderComponent;
-					if (modal.modalType === 1) renderComponent = ModalForm;
-					else if (modal.modalType === 2) renderComponent = ModalBglForm;
+					if (modal.modalType === 'modalForm') renderComponent = ModalBglForm;
 					else renderComponent = Modal;
 
 					return h(

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);