@bagelink/vue 0.0.451 → 0.0.458

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

@@ -57,17 +57,12 @@
 	</div>
 </template>
 
-<script
-	setup
-	lang="ts"
->
-import {  onMounted, watch } from 'vue';
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
 import {
 	debounce, type MaterialIcons, MaterialIcon,
 } from '@bagelink/vue';
 
-
-
 const emit = defineEmits(['update:modelValue', 'debounce']);
 const props = withDefaults(
 	defineProps<{
@@ -93,10 +88,12 @@ const props = withDefaults(
 		lines?: number;
 		autocomplete?: AutoFillField;
 		autofocus?: boolean;
+		debounceDelay?: number;
 	}>(),
 	{
 		type: 'text',
 		modelValue: '',
+		debounceDelay: 300,
 	},
 );
 let inputVal = $ref<string | number>();
@@ -113,7 +110,7 @@ const rows = $computed(() => {
 function updateInputVal() {
 	if (props.disabled) return;
 	emit('update:modelValue', inputVal as string);
-	debounce(() => emit('debounce', inputVal), 300);
+	debounce(() => emit('debounce', inputVal), props.debounceDelay);
 }
 
 watch(
@@ -156,7 +153,7 @@ onMounted(() => {
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.code textarea::placeholder{
+.code textarea::placeholder {
 	color: var(--bgl-white) !important;
 	opacity: 0.3;
 }

package/src/components/index.ts

@@ -21,6 +21,7 @@ export { default as Badge } from './Badge.vue';
 export { default as BglVideo } from './BglVideo.vue';
 export { default as Carousel } from './Carousel.vue';
 export { default as ModalConfirm } from './ModalConfirm.vue';
+export { default as MapEmbed } from './MapEmbed.vue';
 export { default as Flag } from './Flag.vue';
 
 export * from './form';

package/src/plugins/modal.ts

@@ -21,7 +21,7 @@ export interface ModalFormOptions {
 	visible?: boolean;
 	width?: string;
 	dismissable?: boolean;
-	schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
+	schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT;
 	onSubmit?: (formData: any) => any;
 	onDelete?: (id: string) => Promise<void>;
 	onError?: ((err: any) => void);
@@ -33,22 +33,24 @@ export type ModalConfirmOptions = {
 	title?: string;
 	message?: string;
 	resolve: (val: boolean) => void;
-}
+};
 
-type ModalType = 'modal' | 'modalForm' | 'confirm'
+type ModalType = 'modal' | 'modalForm' | 'confirm';
 
-type ConfirmModalUserOptions = string | { title: string, message: string }
+type ConfirmModalUserOptions = string | { title: string; message: string };
 
 export interface ModalComponentProps {
-	componentSlots: Record<string, any>,
-	modalType: ModalType,
-	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions
+	componentSlots: Record<string, any>;
+	modalType: ModalType;
+	modalOptions: ModalOptions | ModalFormOptions | ModalConfirmOptions;
 }
+
 export interface ModalFormComponentProps {
-	componentSlots: Record<string, any>,
-	modalType: 'modalForm',
-	modalOptions: ModalFormOptions
+	componentSlots: Record<string, any>;
+	modalType: 'modalForm';
+	modalOptions: ModalFormOptions;
 }
+
 export interface ModalApi {
 	showModal: (options: ModalOptions, slots?: Record<string, any>) => void;
 	showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => ModalFormComponentProps | undefined;
@@ -100,13 +102,12 @@ export const ModalPlugin: Plugin = {
 			showModalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal('modalForm', options, slots) as ModalFormComponentProps,
 			confirm: (userOptions: ConfirmModalUserOptions) => modalConfirm(userOptions),
 			hideModal: (index = modalStack.length - 1) => hideModal(index),
-			// modalOptions,
 		});
 
 		const ModalComponent = defineComponent({
 			data: () => ({ modalStack }),
 			render() {
-				return modalStack.map((modal, index) => {
+				return this.modalStack.map((modal, index) => {
 					const props = { ...modal.modalOptions, visible: true, 'onUpdate:visible': () => hideModal(index) };
 					if (modal.modalType === 'modalForm') return h(ModalForm, props as ModalFormOptions, modal.componentSlots);
 					if (modal.modalType === 'confirm') return h(ModalConfirm, props as any, {});

package/src/styles/appearance.css

@@ -42,43 +42,53 @@
     opacity: 1;
 }
 
-.z-index-0 {
+.z-index-0,
+.z-0 {
     z-index: 0;
 }
 
-.z-index-1 {
+.z-index-1,
+.z-1 {
     z-index: 1;
 }
 
-.z-index-2 {
+.z-index-2,
+.z-2 {
     z-index: 2;
 }
 
-.z-index-3 {
+.z-index-3,
+.z-3 {
     z-index: 3;
 }
 
-.z-index-4 {
+.z-index-4,
+.z-4 {
     z-index: 4;
 }
 
-.z-index-5 {
+.z-index-5,
+.z-5 {
     z-index: 5;
 }
 
-.z-index-9 {
+.z-index-9,
+.z-9 {
     z-index: 9;
 }
 
-.z-index-99 {
+.z-index-99,
+.z-99 {
     z-index: 99;
 }
 
-.z-index-999 {
+.z-index-999,
+.z-999 {
     z-index: 999;
 }
 
-.z-index-9999 {
+.z-index-9999,
+.z-9999 {
     z-index: 9999;
 }
 
@@ -170,6 +180,14 @@
     color: var(--bgl-gray) !important;
 }
 
+.color-label {
+    color: var(--label-color) !important;
+}
+
+.bg-label {
+    background: var(--label-color) !important;
+}
+
 .bg-gray-light {
     background: var(--bgl-gray-light) !important;
 }
@@ -456,39 +474,48 @@
         opacity: 1;
     }
 
-    .m_z-index-0 {
+    .m_z-index-0,
+    .m_z-0 {
         z-index: 0;
     }
 
-    .m_z-index-1 {
+    .m_z-index-1,
+    .m_z-1 {
         z-index: 1;
     }
 
-    .m_z-index-2 {
+    .m_z-index-2,
+    .m_z-2 {
         z-index: 2;
     }
 
-    .m_z-index-3 {
+    .m_z-index-3,
+    .m_z-3 {
         z-index: 3;
     }
 
-    .m_z-index-4 {
+    .m_z-index-4,
+    .m_z-4 {
         z-index: 4;
     }
 
-    .m_z-index-5 {
+    .m_z-index-5,
+    .m_z-5 {
         z-index: 5;
     }
 
-    .m_z-index-9 {
+    .m_z-index-9,
+    .m_z-9 {
         z-index: 9;
     }
 
-    .m_z-index-99 {
+    .m_z-index-99,
+    .m_z-99 {
         z-index: 99;
     }
 
-    .m_z-index-999 {
+    .m_z-index-999,
+    .m_z-999 {
         z-index: 999;
     }
 
@@ -581,6 +608,14 @@
         color: var(--bgl-gray) !important;
     }
 
+    .m_color-label {
+        color: var(--label-color) !important;
+    }
+
+    .m_bg-label {
+        background: var(--label-color) !important;
+    }
+
     .m_bg-gray-light {
         background: var(--bgl-gray-light) !important;
     }

package/src/styles/layout.css

@@ -19,6 +19,11 @@
     border-radius: calc(var(--btn-border-radius) / 2);
 }
 
+.flex-center {
+    justify-items: center;
+    align-items: center;
+    display: flex;}
+
 .justify-items-center {
     justify-items: center;
 }

package/src/styles/mobilLayout.css

@@ -38,6 +38,12 @@
         border-radius: var(--btn-border-radius);
     }
 
+    .m_flex-center {
+        justify-items: center;
+        align-items: center;
+        display: flex;
+    }
+
     .m_justify-items-center {
         justify-items: center;
     }

package/src/styles/modal.css

@@ -40,15 +40,16 @@
 }
 
 .tool-bar {
-    margin: -2rem -1rem 1rem;
+    margin: -1rem -1rem 1rem;
     display: flex;
     justify-content: space-between;
     position: -webkit-sticky;
     position: sticky;
-    padding-top: 1rem;
+    padding-top: 0rem;
     top: 0rem;
     z-index: 3;
     background: var(--bgl-white);
+    border-radius: var(--card-border-radius);
 }
 
 .modal-size {

package/src/styles/text.css

@@ -176,6 +176,16 @@
     font-weight: 400;
 }
 
+.semi,
+.semibold,
+.txt-semi,
+.txt-semibold,
+.font-regular,
+.font-semi,
+.font-semibold {
+    font-weight: 600;
+}
+
 .line-height-1 {
     line-height: 1;
 }
@@ -233,6 +243,11 @@
     text-decoration: none;
 }
 
+.underline,
+.decoration-underline {
+    text-decoration: underline !important;
+}
+
 .word-break {
     word-break: break-word;
 }
@@ -249,9 +264,6 @@
     text-transform: capitalize;
 }
 
-
-
-
 .bgl_icon-font {
     font-family: "Material Symbols Outlined", serif !important;
 }
@@ -468,6 +480,17 @@
         font-weight: 400;
     }
 
+    .m_semi,
+    .m_semibold,
+    .m_txt-semi,
+    .m_txt-semibold,
+    .m_font-regular,
+    .m_font-semi,
+    .m_font-semibold {
+        font-weight: 600;
+    }
+
+
     .m_line-height-1 {
         line-height: 1;
     }
@@ -525,6 +548,12 @@
         text-decoration: none;
     }
 
+    .m_underline,
+    .m_decoration-underline {
+        text-decoration: underline !important;
+    }
+
+
     .m_bgl_icon-font {
         font-family: "Material Symbols Outlined", serif;
     }

package/src/types/BagelForm.ts

@@ -17,6 +17,7 @@ export type BaseBagelField<T = Record<string, any>> = {
 	class?: AttributeValue | AttributeFn<T>,
 	attrs?: Attributes<T>;
 	required?: boolean;
+	disabled?: boolean;
 	helptext?: string;
 	options?: string | ({ label?: string; value: string | number } | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void);
 	defaultValue?: any;