@bagelink/vue 1.2.77 → 1.2.81

package/src/components/Slider.vue

@@ -7,7 +7,7 @@ type AutoplayMode = 'disabled' | 'standard' | 'linear'
 type AutoplayValue = boolean | AutoplayMode
 
 interface CarouselOptions {
-	duration?: number
+	speed?: number
 	easing?: Easing
 	perPage?: number | { [key: number]: number }
 	startIndex?: number
@@ -22,6 +22,7 @@ interface CarouselOptions {
 	pauseOnHover?: boolean
 	dots?: boolean
 	slideWidth?: number
+	slideGap?: number
 	onInit?: () => void
 	onChange?: () => void
 }
@@ -35,7 +36,7 @@ interface DragState {
 }
 
 const props = withDefaults(defineProps<CarouselOptions>(), {
-	duration: 200,
+	speed: 350,
 	easing: 'ease-out',
 	startIndex: 0,
 	draggable: true,
@@ -44,11 +45,11 @@ const props = withDefaults(defineProps<CarouselOptions>(), {
 	loop: true,
 	rtl: false,
 	autoplay: 'disabled',
-	autoplayInterval: 3000,
-	autoplaySpeed: 50,
+	autoplayInterval: 5000,
 	pauseOnHover: true,
 	dots: false,
 	slideWidth: 300,
+	slideGap: 1
 })
 
 const emit = defineEmits<{
@@ -118,7 +119,7 @@ const config = computed<ComputedConfig>(() => {
 	const calculatedPerPage = perPage.value
 
 	return {
-		duration: props.duration,
+		speed: props.speed,
 		easing: props.easing,
 		perPage: calculatedPerPage,
 		startIndex: props.startIndex,
@@ -129,10 +130,11 @@ const config = computed<ComputedConfig>(() => {
 		rtl: props.rtl,
 		autoplay: autoplayMode,
 		autoplayInterval: props.autoplayInterval,
-		autoplaySpeed: props.autoplaySpeed,
+		autoplaySpeed: props.speed / 4,
 		pauseOnHover: props.pauseOnHover,
 		dots: props.dots,
 		slideWidth: props.slideWidth,
+		slideGap: props.slideGap,
 		onInit: () => { emit('init') },
 		onChange: () => { emit('change') }
 	}
@@ -343,7 +345,7 @@ function buildSliderFrameItem(elm: Element): HTMLElement {
 	const elementContainer = document.createElement('div')
 	elementContainer.style.cssFloat = config.value.rtl ? 'right' : 'left'
 	elementContainer.style.float = config.value.rtl ? 'right' : 'left'
-
+	elementContainer.style.padding = config.value.slideGap ? `${config.value.slideGap / 2}rem` : '0'
 	const percentage = config.value.loop
 		? 100 / (innerElements.value.length + (perPage.value * 2))
 		: 100 / innerElements.value.length
@@ -474,8 +476,8 @@ function disableTransition(): void {
 
 function enableTransition(): void {
 	if (sliderFrame.value) {
-		sliderFrame.value.style.webkitTransition = `all ${config.value.duration}ms ${config.value.easing}`
-		sliderFrame.value.style.transition = `all ${config.value.duration}ms ${config.value.easing}`
+		sliderFrame.value.style.webkitTransition = `all ${config.value.speed}ms ${config.value.easing}`
+		sliderFrame.value.style.transition = `all ${config.value.speed}ms ${config.value.easing}`
 	}
 }
 
@@ -996,7 +998,7 @@ defineExpose({
   width: 12px;
   height: 12px;
   border-radius: 50px;
-  background-color: #ccc;
+  background-color: var(--bgl-gray-light);
   border: none;
   padding: 0;
   cursor: pointer;
@@ -1004,7 +1006,7 @@ defineExpose({
 }
 
 .carousel-dot.active {
-  background-color: #333;
+  background-color: var(--bgl-primary);
   width: 26px;
 }
 </style>

package/src/components/form/BagelForm.vue

@@ -111,6 +111,7 @@ function updateFormData(fieldId: string, value: any) {
 
 // Form validation
 const validateForm = () => form.value?.reportValidity() ?? false
+const checkValidity = () => form.value?.checkValidity() ?? false
 const formError = ref<Error>()
 // Form submission
 async function handleSubmit() {
@@ -156,7 +157,7 @@ function handleSlotInputChange(event: Event) {
 	}
 }
 
-defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema })
+defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkValidity })
 </script>
 
 <template>

package/src/components/form/BglMultiStepForm.vue

@@ -2,8 +2,8 @@
 import type { BglFormSchemaFnT } from '@bagelink/vue'
 
 import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers'
-import { BagelForm, Btn, useBglSchema } from '@bagelink/vue'
-import { ref, watch, computed } from 'vue'
+import { BagelForm, Btn, useBglSchema, sleep } from '@bagelink/vue'
+import { ref, watch, computed, nextTick } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -13,7 +13,7 @@ const props = withDefaults(
 			'schema' | `${string}modelValue` | `ref${string}` | `onVnode${string}` | 'onSubmit'
 			)
 		>
-		schema: BglFormSchemaFnT<T>
+		schema?: BglFormSchemaFnT<T>
 		showProgress?: boolean
 		rtl?: boolean
 		stepLabels?: string[]
@@ -119,9 +119,6 @@ const currentStepSchema = computed(() => {
 	return [computedSchema.value[actualIndex]]
 })
 
-const isStepping = ref(false)
-let isSteppingTO: NodeJS.Timeout
-
 // Tracks which way we're sliding (left or right)
 const slideDirection = ref(props.rtl ? 'right' : 'left')
 
@@ -138,9 +135,7 @@ watch(
 		}
 
 		previousStep.value = oldStep
-		clearTimeout(isSteppingTO)
-		isStepping.value = true
-		isSteppingTO = setTimeout(() => (isStepping.value = false), 200)
+		// We don't need isStepping flag anymore
 		emits('stepChange', {
 			newStep,
 			oldStep,
@@ -150,19 +145,32 @@ watch(
 	}
 )
 
-const canDoNext = computed(() => currentStep.value < numberOfSteps.value - 1)
+const isLastStep = computed(() => currentStep.value === numberOfSteps.value - 1)
 
 const isStepValidated = computed(() => (stepIndex: number) => validatedSteps.value.includes(stepIndex))
 
+// Add a computed property to check if current step is valid
+const isStepValid = ref(false)
+
+async function checkCurrentStepValidity() {
+	await nextTick()
+	if (!props.validateOnSteps) isStepValid.value = true
+	else isStepValid.value = formRef.value?.checkValidity() ?? false
+}
+
 function prevStep() {
 	if (currentStep.value > 0) currentStep.value--
 }
 
 const formContainer = ref<HTMLElement>()
 
-function nextStep() {
+async function nextStep() {
+	// Always use reportValidity when attempting to move to next step
+	// This will show validation errors to the user
 	if (props.validateOnSteps && reportValidity() === false) return
-	if (canDoNext.value) currentStep.value++
+	if (!isLastStep.value) currentStep.value++
+	await sleep(400)
+	checkCurrentStepValidity()
 }
 
 function goToStep(stepIndex: number) {
@@ -173,6 +181,7 @@ function goToStep(stepIndex: number) {
 	}
 
 	// For forward navigation to non-validated steps, validate current step first if needed
+	// This will show validation errors to the user
 	if (props.validateOnSteps && reportValidity() === false) {
 		return false
 	}
@@ -187,6 +196,7 @@ function goToStep(stepIndex: number) {
 }
 
 function handleSubmit() {
+	// Show validation errors to the user when submitting
 	if (reportValidity() === false) return
 	emits('submit', formData.value)
 }
@@ -194,15 +204,11 @@ function handleSubmit() {
 function reset() {
 	validatedSteps.value = []
 	currentStep.value = 0
-	// Clear form if BagelForm supports it
-	// if (formRef.value && typeof formRef.value.clearForm === 'function') {
-	// 	formRef.value.clearForm()
-	// }
 }
 
 // Re-evaluate filtered steps when formData changes
 watch(() => formData.value, () => {
-	// If current step index is now invalid after filtering, reset to first valid step
+	checkCurrentStepValidity()
 	if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
 		currentStep.value = 0
 	}
@@ -211,11 +217,13 @@ watch(() => formData.value, () => {
 defineExpose({
 	submit: handleSubmit,
 	validateForm: reportValidity,
+	checkValidity: formRef.value?.checkValidity,
 	isDirty: computed(() => formRef.value?.isDirty),
 	reset,
 	goToStep,
 	currentStep: computed(() => currentStep.value),
 	totalSteps: computed(() => numberOfSteps.value),
+	isStepValid,
 	nextStep,
 	prevStep,
 })
@@ -260,7 +268,7 @@ defineExpose({
 				:name="slideDirection === 'right' ? 'slide-right' : 'slide-left'"
 				mode="out-in"
 			>
-				<div v-if="!isStepping" :key="currentStep" ref="formContainer" class="bgl-form-container">
+				<div :key="currentStep" ref="formContainer" class="bgl-form-container">
 					<BagelForm
 						ref="formRef"
 						v-model="formData"
@@ -286,11 +294,17 @@ defineExpose({
 						submit: handleSubmit,
 						currentStep,
 						totalSteps: numberOfSteps,
-						canDoNext,
+						isLastStep,
+						isStepValid,
 					}"
 				>
-					<Btn v-if="currentStep !== 0" color="gray" icon="arrow_back" click="prevStep" />
-					<Btn v-if="canDoNext" icon="arrow_forward" @click="nextStep" />
+					<Btn v-if="currentStep !== 0" color="gray" icon="arrow_back" @click="prevStep" />
+					<Btn
+						v-if="!isLastStep"
+						icon="arrow_forward"
+						:disabled="props.validateOnSteps && !isStepValid"
+						@click="nextStep"
+					/>
 					<Btn v-else value="Submit" @click="handleSubmit" />
 				</slot>
 			</div>
@@ -305,12 +319,10 @@ defineExpose({
 	gap: 1rem;
 	width: 100%;
 	/* Default transition duration */
-	--transition-duration: 200ms;
+	--transition-duration: 300ms;
 	--move-distance: 35%;
-	--ease-in: ease-in-out;
-	--ease-out: ease-in-out;
-	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
-	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
+	--ease-in: cubic-bezier(0.42, 0, 0.58, 1);
+	--ease-out: cubic-bezier(0.42, 0, 0.58, 1);
 }
 
 .bgl-steps-indicator {
@@ -398,16 +410,18 @@ defineExpose({
 	justify-content: center;
 	gap: 1rem;
 	grid-area: unset !important;
-
+	margin-top: 2rem;
 }
 
 /* Slide Left Animation (going forward) */
 .slide-left-enter-active {
-	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-left-leave-active {
-	transition: opacity, transform var(--transition-duration) var(--ease-out);
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-left-enter-from {
@@ -422,12 +436,13 @@ defineExpose({
 
 /* Slide Right Animation (going back) */
 .slide-right-enter-active {
-	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-right-leave-active {
-	transition: all var(--transition-duration) var(--ease-out);
-	transition-property: opacity, transform;
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-right-enter-from {

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -7,10 +7,9 @@ declare global {
 	}
 }
 import { appendStyle, appendScript } from '@bagelink/vue'
-import { nextTick, onMounted, watch } from 'vue'
+import { onMounted, ref, computed, watch } from 'vue'
 
-// Props
-const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals = true, label, height = '300px' } = defineProps<{
+interface CodeEditorProps {
 	language?: Language
 	readonly?: boolean
 	modelValue?: string
@@ -18,39 +17,50 @@ const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals
 	ignoreIllegals?: boolean
 	label?: string
 	height?: string
-}>()
+}
+// Props with default values
+const props = withDefaults(defineProps<CodeEditorProps>(), {
+	language: 'html',
+	readonly: false,
+	modelValue: '',
+	autodetect: true,
+	ignoreIllegals: true,
+	label: '',
+	height: '240px'
+})
 
 const emit = defineEmits(['update:modelValue'])
+// State
+const code = ref(props.modelValue || '')
+const editorRef = ref<HTMLDivElement>()
+const loaded = ref(false)
+const hljs = ref<HilightJS | null>(null)
+// Computed
+const maxHeight = computed(() => {
+	const h = props.height ?? '240px'
+	return h.match(/^\d+$/) ? `${h}px` : h
+})
 
-let hljs = $ref<HilightJS | null>(null)
+const formattedCode = computed(() => {
+	if (!hljs.value) return escapeHtml(code.value)
 
-let elHeight = $ref(height)
-// State and refs
-let code = $ref('')
-const textarea = $ref<HTMLTextAreaElement>()
-let loaded = $ref(false)
+	try {
+		const lang = props.language || ''
 
-// Computed properties
-const cannotDetectLanguage = $computed(() => {
-	const lang = language || ''
-	return !(autodetect ?? !lang) && !hljs?.getLanguage(lang)
-})
+		if (lang && !props.autodetect && !hljs.value.getLanguage(lang)) {
+			console.warn(`The language "${lang}" is not available.`)
+			return escapeHtml(code.value)
+		}
 
-const className = $computed(() => {
-	if (cannotDetectLanguage) return ''
-	return `hljs ${language || ''}`
-})
+		const result = props.autodetect
+			? hljs.value.highlightAuto(code.value)
+			: hljs.value.highlight(code.value, { language: lang, ignoreIllegals: props.ignoreIllegals })
 
-const highlightedCode = $computed(() => {
-	if (cannotDetectLanguage) {
-		console.warn(`The language "${language}" you specified could not be found.`)
-		return escapeHtml(code)
+		return result.value || escapeHtml(code.value)
+	} catch (error) {
+		console.error('Highlighting error:', error)
+		return escapeHtml(code.value)
 	}
-	const lang = language || ''
-	const result = autodetect
-		? hljs?.highlightAuto(code)
-		: hljs?.highlight(code, { language: lang, ignoreIllegals })
-	return result?.value || ''
 })
 
 // Methods
@@ -67,113 +77,165 @@ function escapeHtml(unsafe: string) {
 	})
 }
 
+function handleInput(e: Event) {
+	const target = e.target as HTMLTextAreaElement
+	code.value = target.value
+	emit('update:modelValue', code.value)
+}
+
 function handleTab(event: KeyboardEvent) {
+	if (event.key !== 'Tab') return
+
+	event.preventDefault()
 	const target = event.target as HTMLTextAreaElement
 	const start = target.selectionStart
-	const tab = '  '
-	code = code.slice(0, start) + tab + code.slice(start)
-	nextTick(() => {
-		target.selectionStart = target.selectionEnd = start + tab.length
-	})
-}
+	const end = target.selectionEnd
 
-function adjustHeight() {
-	if (textarea?.scrollHeight && textarea.scrollHeight > Number.parseInt(elHeight)) {
-		elHeight = `${textarea.scrollHeight}px`
-	}
+	// Add tab or indent selected text
+	const newValue = `${code.value.substring(0, start)}  ${code.value.substring(end)}`
+	code.value = newValue
+	emit('update:modelValue', code.value)
+
+	// Move cursor position after the inserted tab
+	setTimeout(() => {
+		target.selectionStart = target.selectionEnd = start + 2
+	}, 0)
 }
 
 // Lifecycle
 onMounted(async () => {
-	// Append scripts and styles for Highlight.js
-	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
-	await appendStyle('https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css')
-
-	// Initialize hljs
-	if (window.hljs) {
-		hljs = window.hljs as HilightJS
-		loaded = true
-	} else {
-		console.error('Highlight.js failed to load.')
+	try {
+		// Load highlight.js
+		await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
+		await appendStyle('https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css')
+
+		if (window.hljs) {
+			hljs.value = window.hljs
+			loaded.value = true
+		} else {
+			console.error('Failed to load highlight.js')
+		}
+	} catch (error) {
+		console.error('Error loading highlight.js:', error)
 	}
 })
 
-watch(() => modelValue, (newVal) => {
-	adjustHeight()
-	if (newVal !== code) {
-		code = newVal
+// Watch for external modelValue changes
+watch(() => props.modelValue, (newVal) => {
+	if (newVal !== undefined && newVal !== code.value) {
+		code.value = newVal
 	}
 }, { immediate: true })
 </script>
 
 <template>
-	<div class="mb-05">
-		<label v-if="label" class="label txt-start">{{ label }}</label>
-		<div v-if="loaded" class="code-editor-wrap grid rounded p-1 overflow hm-300px ltr  txt-start relative h-100p">
-			<div class="relative block h-100" :style="{ height: `calc(${elHeight} - 2rem)` }">
-				<pre class=" overflow-hidden absolute inset-0 p-0 m-0  h-100  codeText">
-					<code class="absolute inset-0" :class="className" v-html="highlightedCode" />
-				</pre>
+	<div class="code-editor-container ltr" :style="{ maxHeight }">
+		<label v-if="label" class="label">{{ label }}</label>
+		<div
+			v-if="loaded"
+			ref="editorRef"
+			class="code-editor-grandpa"
+		>
+			<div class="editor-content-papa relative">
+				<pre class="code-display" wrap><code v-html="formattedCode" /></pre>
 				<textarea
 					v-if="!readonly"
-					ref="textarea"
-					v-model="code"
-					class="code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none txt-start"
+					:value="code"
+					class="code-input"
 					spellcheck="false"
-					placeholder="Write your code here"
-					aria-label="Code Editor"
-					data-gramm="false"
-					@keydown.tab.prevent="handleTab"
-					@input="emit('update:modelValue', code)"
+					autocomplete="off"
+					autocorrect="off"
+					autocapitalize="off"
+					@input="handleInput"
+					@keydown="handleTab"
 				/>
 			</div>
 		</div>
 	</div>
 </template>
 
-<style>
-pre code.hljs{
-	padding: 0 !important;
-	inset: 0 !important;
-	position: absolute;
+<style scoped>
+.code-editor-container {
+	margin-bottom: 0.5rem;
+	height: 100%;
 }
-</style>
 
-<style scoped>
-.codeText{
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  caret-color: var(--bgl-white);
-  color: var(--bgl-white);
+.label {
+	display: block;
+	text-align: left;
+	margin-bottom: 0.25rem;
 }
-.code-editor-wrap {
-  background: #282c34;
-  height: max-content;
+
+.code-editor-grandpa {
+	background: #22252A;
+	border-radius: 0.25rem;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	padding: 1ch;
+	padding-inline-start: 2ch;
 }
-.code-editor-wrap:focus-within, .code-editor-wrap:focus-visible, .code-editor-wrap:focus {
-    box-shadow: inset 0 0 10px #00000021;
-	outline: solid 1px var(--border-color);
-	/* outline: -webkit-focus-ring-color auto 1px; */
 
+.code-editor-grandpa:focus-within {
+	outline: solid 1px var(--border-color, #4f575f);
+	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
 
-.code-editor-wrap:focus-within:has(textarea:focus) + .label,
-.label:has(+ .code-editor-wrap:focus-within) {
-	color: var(--bgl-primary) !important;
+.editor-content-papa {
+	position: relative;
+	width: 100%;
+	padding-bottom: calc(100% - 5lh);
+}
+.code-display,
+.code-input {
+	inset: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	font-family: monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	tab-size: 2;
+	word-break: keep-all;
+	text-align: left;
 }
 
-.code-editor {
-  color: transparent;
-  resize: none;
+.code-display {
+	position: relative;
+	color:  #fff;
+	pointer-events: none;
+	z-index: 1;
 }
 
-.code-editor::selection {
-  background: #2466bc30;
-  color: inherit;
+.code-display code {
+	display: block;
+	background: transparent !important;
+	padding: 0 !important;
 }
 
-.code-editor:focus {
-  outline: none;
+.code-input {
+	position: absolute;
+	background: transparent;
+	color: transparent;
+	caret-color:  #fff;
+	border: none;
+	resize: none;
+	outline: none;
+	z-index: 2;
+}
+
+.code-input::selection {
+	background-color: rgba(36, 102, 188, 0.3);
+	color: transparent;
+}
+</style>
+
+<style>
+/* Global styles */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
 }
 </style>