@bagelink/vue 1.4.48 → 1.4.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.48",
+  "version": "1.4.50",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/NavBar.vue

@@ -41,11 +41,7 @@ onMounted(calcIsOpen)
 	<div :class="{ open: isOpen, closed: !isOpen }">
 		<slot name="top" :isOpen="isOpen" />
 		<div
-			class="nav-expend"
-			role="button"
-			aria-label="Toggle Navigation"
-			tabindex="0"
-			@click="toggleMenu"
+			class="nav-expend" role="button" aria-label="Toggle Navigation" tabindex="0" @click="toggleMenu"
 			@keypress.enter="toggleMenu"
 		>
 			<Icon icon="chevron_right" class="top-arrow" />
@@ -55,12 +51,8 @@ onMounted(calcIsOpen)
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
 					<component
-						:is="link.to ? 'router-link' : 'div'"
-						v-for="link in links"
-						:key="link.label"
-						class="nav-button"
-						:to="link.to"
-						@click="link.onClick?.()"
+						:is="link.to ? 'router-link' : 'div'" v-for="link in links" :key="link.label"
+						class="nav-button" :to="link.to" @click="link.onClick?.()"
 					>
 						<Icon :icon="link.icon" />
 						<div class="tooltip">
@@ -72,12 +64,8 @@ onMounted(calcIsOpen)
 
 			<div class="bot-buttons-wrapper">
 				<component
-					:is="link.to ? 'router-link' : 'div'"
-					v-for="link in footerLinks"
-					:key="link.label"
-					class="nav-button"
-					:to="link.to"
-					@click="link.onClick?.()"
+					:is="link.to ? 'router-link' : 'div'" v-for="link in footerLinks" :key="link.label"
+					class="nav-button" :to="link.to" @click="link.onClick?.()"
 				>
 					<Icon :icon="link.icon" />
 					<div class="tooltip">
@@ -138,7 +126,7 @@ onMounted(calcIsOpen)
 .nav {
 	color: var(--bgl-light-text);
 	background: var(--bgl-primary);
-	z-index: 100;
+	z-index: 98;
 	width: 70px;
 	transition: all 0.4s cubic-bezier(0.36, 0.02, 0.23, 1);
 	display: flex;
@@ -379,6 +367,7 @@ onMounted(calcIsOpen)
 		display: none;
 	}
 }
+
 @media screen and (max-height: 550px) {
 	.nav.open .nav-button {
 		margin-top: 4px;

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

@@ -126,12 +126,14 @@ function inputHandler() {
 
 watch(() => numberValue, () => {
 	nextTick(() => {
+		// Don't reformat if user is currently typing a decimal
+		if (formattedValue.endsWith('.')) return
 		formattedValue = numberValue !== undefined ? formatNumber(numberValue) : ''
 	})
 })
 
 watch(() => modelValue, (newVal) => {
-	if (newVal !== numberValue)	{
+	if (newVal !== numberValue) {
 		if (typeof newVal === 'string' && (newVal === '-' || newVal.endsWith('.'))) {
 			formattedValue = newVal
 			return
@@ -143,8 +145,7 @@ watch(() => modelValue, (newVal) => {
 
 <template>
 	<div
-		class="bagel-input num-input"
-		:class="{
+		class="bagel-input num-input" :class="{
 			textInputSpinnerWrap: icon || spinner,
 			txtInputIconStart: iconStart,
 		}"
@@ -154,47 +155,39 @@ watch(() => modelValue, (newVal) => {
 				{{ label }}
 			</label>
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
-				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
+				<Btn
+					v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius"
+					:class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment"
+				/>
 				<input
-					:id
-					v-model.trim="formattedValue"
-					v-pattern.number
-					type="text"
-					:class="{
+					:id v-model.trim="formattedValue" v-pattern.number type="text" :class="{
 						'txt-center': center,
 						'min0': layout,
 						'bgl-number-input': layout !== 'vertical' && layout !== 'horizontal',
-					}"
-					:placeholder="placeholder || label"
-					:disabled
-					:required
-					:readonly="disabled"
-					inputmode="decimal"
-					autocomplete="off"
-					:pattern="useGrouping ? '^-?\\d{1,3}(,\\d{3})*(\.\\d+)?$' : '^-?\\d*\.?\d*$'"
-					autocorrect="off"
-					spellcheck="false"
-					@input="inputHandler"
-					@keydown.up.prevent="increment"
+					}" :placeholder="placeholder || label" :disabled :required :readonly="disabled" inputmode="decimal"
+					autocomplete="off" :pattern="useGrouping ? '^-?\\d{1,3}(,\\d{3})*(\.\\d+)?$' : '^-?\\d*\.?\d*$'"
+					autocorrect="off" spellcheck="false" @input="inputHandler" @keydown.up.prevent="increment"
 					@keydown.down.prevent="decrement"
 				>
 				<p v-if="helptext" class="opacity-7 light">
 					{{ helptext }}
 				</p>
-				<Icon
-					v-if="iconStart"
-					class="iconStart"
-					:icon="iconStart"
-				/>
-				<Icon
-					v-if="icon"
-					:icon
+				<Icon v-if="iconStart" class="iconStart" :icon="iconStart" />
+				<Icon v-if="icon" :icon />
+				<Btn
+					v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius"
+					:class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement"
 				/>
-				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement" />
 
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
-					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add top-bgl-ctrl-num-btn" :disabled="!canAdd" tabindex="-1" @click="increment" />
-					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove" :disabled="!canDecrement" tabindex="-1" @click="decrement" />
+					<Btn
+						icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add top-bgl-ctrl-num-btn" :disabled="!canAdd"
+						tabindex="-1" @click="increment"
+					/>
+					<Btn
+						icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove" :disabled="!canDecrement"
+						tabindex="-1" @click="decrement"
+					/>
 				</div>
 			</div>
 		</div>
@@ -202,14 +195,15 @@ watch(() => modelValue, (newVal) => {
 </template>
 
 <style scoped>
-.txtInputIconStart input{
+.txtInputIconStart input {
 	padding-inline-start: calc(var(--input-height) / 1.5);
 }
+
 .txtInputIconStart .iconStart {
 	color: var(--input-color);
 	position: absolute;
-    inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2 );
+	inset-inline-start: calc(var(--input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--input-height) / 2);
 	line-height: 0;
 }
 
@@ -226,19 +220,21 @@ watch(() => modelValue, (newVal) => {
 	gap: 0;
 }
 
-.top-bgl-ctrl-num-btn{
+.top-bgl-ctrl-num-btn {
 	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-ctrl-num-btn{
+
+.bgl-ctrl-num-btn {
 	height: calc(var(--input-height) / 2.5) !important;
 	isolation: isolate;
 }
 
-.bgl-big-ctrl-num-btn{
+.bgl-big-ctrl-num-btn {
 	width: 100% !important;
 	isolation: isolate;
 }
-.bgl-number-input{
+
+.bgl-number-input {
 	padding-inline-end: 1.75rem !important;
 }
 </style>