@bagelink/vue 0.0.696 → 0.0.702

package/src/components/form/BglMultiStepForm.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { BagelForm, type BglFormSchemaFnT, Btn, useBglSchema } from '@bagelink/vue'
+import { watch } from 'vue'
+
+type BagelFormT = InstanceType<typeof BagelForm>
+
+const props = withDefaults(
+	defineProps<{
+		bagelFormProps?: Omit<
+			BagelFormT['$props'],
+			(
+			'schema' | `${string}modelValue` | `ref${string}` | `onVnode${string}` | 'onSubmit'
+			)
+		>
+		schema: BglFormSchemaFnT<T>
+	}>(),
+	{
+		bagelFormProps: () => ({})
+	}
+)
+
+const emits = defineEmits(['submit'])
+
+const formRef = $ref<InstanceType<typeof BagelForm>>()
+
+const formData = defineModel<T>(
+	'modelValue',
+	{ default: () => {}, required: true }
+)
+
+function reportValidity() {
+	if (!formRef) return false
+	return formRef.validateForm()
+}
+
+const computedSchema = $computed(
+	() => useBglSchema({ schema: props.schema })
+)
+
+const numberOfSteps = $ref(computedSchema.length)
+
+let currentStep = $ref(0)
+
+const currentStepSchema = $computed(() => computedSchema[currentStep])
+
+let isStepping = $ref(false)
+let isSteppingTO: NodeJS.Timeout
+watch(
+	() => currentStep,
+	() => {
+		clearTimeout(isSteppingTO)
+		isStepping = true
+		isSteppingTO = setTimeout(() => (isStepping = false), 600)
+	}
+)
+
+const canDoNext = $computed(() => currentStep < numberOfSteps - 1)
+
+function prevStep() { if (currentStep > 0) currentStep-- }
+
+function nextStep() {
+	if (reportValidity() === false) return
+	if (canDoNext) currentStep++
+}
+
+function handleSubmit() {
+	if (reportValidity() === false) return
+	emits('submit', formData.value)
+}
+
+defineExpose({
+	submit: handleSubmit,
+	validateForm: formRef?.validateForm,
+	deleteItem: formRef?.deleteItem,
+	isDirty: formRef?.isDirty,
+	clearForm: formRef?.clearForm,
+})
+</script>
+
+<template>
+	<transition
+		:duration="600"
+		name="fade"
+		mode="out-in"
+	>
+		<template v-if="!isStepping">
+			<BagelForm
+				ref="formRef"
+				v-model=" formData"
+				:schema="[currentStepSchema]"
+				v-bind="bagelFormProps"
+			>
+				<template #success>
+					<slot name="success" />
+				</template>
+				<template #error>
+					<slot name="error" />
+				</template>
+			</BagelForm>
+		</template>
+	</transition>
+
+	<slot name="steppers" v-bind="{ prevStep, nextStep, submit: handleSubmit }">
+		<Btn
+			:disabled="currentStep === 0"
+			value="Back"
+			@click="prevStep"
+		/>
+
+		<Btn
+			v-if="canDoNext"
+			value="Next"
+			@click="nextStep"
+		/>
+		<Btn
+			v-else
+			value="Submit"
+			@click="handleSubmit"
+		/>
+	</slot>
+</template>

package/src/components/form/index.ts

@@ -1,4 +1,5 @@
 export { default as BglForm } from './BglForm.vue'
 export { default as BagelForm } from './BglForm.vue'
 export { default as BglField } from './BglField.vue'
+export { default as BglMultiStepForm } from './BglMultiStepForm.vue'
 export * from './inputs'

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

@@ -202,6 +202,7 @@ function drop(e: DragEvent) {
 	grid-template-columns: 1fr 22px;
 	align-items: center;
 	padding-inline: 14px;
+
 }
 
 .previewName p {
@@ -234,6 +235,7 @@ img.preview {
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
+	width: 100%;
 }
 
 .bagel-input .fileUploadWrap.fileDropZone:after {

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

@@ -205,7 +205,7 @@ onMounted(() => {
 						<Btn
 							thin
 							icon="clear"
-							class="color-black bg-gray-light"
+							class="color-primary bg-gray-20"
 							@click="selectedItems = []; emitUpdate()"
 						/>
 					</div>
@@ -341,6 +341,6 @@ onMounted(() => {
 	border: none;
 	/* background: transparent; if anyone is changing this please talk to me first*/
 	border-radius: var(--card-border-radius);
-	color: var(--input-color);
+	/* color: var(--input-color); */
 }
 </style>

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

@@ -187,7 +187,6 @@ const phone = defineModel<string>('modelValue', {
 
 function formatPhone(val: string): string {
 	const phoneNumber = parsePhoneNumberFromString(val, parseArgs)
-	console.log('Phone Number:', phoneNumber)
 
 	if (!phoneNumber) {
 		const dialCode

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

@@ -144,7 +144,6 @@ onMounted(() => {
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
-
 </style>
 
 <style scoped>

package/src/components/layout/TabsNav.vue

@@ -15,6 +15,8 @@ const props = defineProps<{
 	modelValue?: string
 	sideTabs?: boolean
 	group: string
+	flat?: boolean
+	vertical?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -72,7 +74,10 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap">
+	<div
+		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap"
+		:class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }"
+	>
 		<button
 			v-for="(tab, i) in props.tabs"
 			:key="i"
@@ -107,6 +112,8 @@ onBeforeUnmount(() => {
 	padding-block: calc(var(--btn-padding) / 8);
 	border-radius: var(--input-border-radius);
 	transition: var(--bgl-transition);
+	color: inherit
+
 }
 
 .bgl_tab:hover {
@@ -125,4 +132,60 @@ onBeforeUnmount(() => {
 	transition: var(--bgl-transition);
 	z-index: 0;
 }
+.bgl_flat-tabs.bgl_tabs_wrap {
+	background: transparent;
+}
+.bgl_flat-tabs.bgl_tabs_wrap::before{
+	background: transparent;
+	border-bottom: 1px solid var(--bgl-primary);
+	border-radius: 0;
+	top: calc(var(--btn-padding) * 1.25);
+	bottom: unset;
+
+}
+.bgl_flat-tabs .active.bgl_tab{
+	color: var(--bgl-primary)
+}
+.bgl_flat-tabs .bgl_tab:hover {
+	background: rgba(255, 255, 255, .1);
+}
+.bgl_vertical-tabs{
+	grid-auto-flow: row;
+	align-items: start;
+	justify-items: start;
+	gap: 1rem
+}
+.bgl_vertical-tabs .bgl_tab{
+	padding-inline: 0;
+	border-radius: 0;
+	border-bottom: 1px solid transparent;
+}
+.bgl_vertical-tabs .bgl_tab:hover{
+	background: transparent;
+	border-bottom: 1px solid var(--bgl-primary);
+
+}
+.bgl_vertical-tabs .bgl_tab.active{
+	border-bottom: 1px solid var(--bgl-primary);
+}
+.bgl_vertical-tabs.bgl_tabs_wrap::before{
+	border: none;
+}
+@media screen and (max-width: 910px) {
+	.bgl_vertical-tabs{
+	grid-auto-flow: column;
+	overflow: auto;
+	max-width: 100vw;
+	padding-inline-end: 1rem;
+	width: 100%;
+	gap: 1rem;
+	position: relative;
+}
+.bgl_vertical-tabs::-webkit-scrollbar {
+	display: none;
+}
+.bgl_vertical-tabs .bgl_tab{
+	white-space: nowrap;
+}
+}
 </style>