@bagelink/vue 0.0.1066 → 0.0.1070

package/dist/style.css

@@ -1074,27 +1074,30 @@ pre code.hljs{
 	direction: ltr;
 }
 
-.txtInputIconStart .iconStart[data-v-abb5baff] {
+.txtInputIconStart .iconStart[data-v-09ec7e39] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.textInputSpinnerWrap .spinner[data-v-abb5baff] {
+.textInputSpinnerWrap .spinner[data-v-09ec7e39] {
 	color: var(--input-color);
 	position: absolute;
 	inset-inline-end: 0;
 	margin-top: calc(var(--input-height) / -1);
 	line-height: 0;
 }
-.bgl-ctrl-num-btn[data-v-abb5baff]{
-	height: calc(var(--input-height) / 2) !important;
+.top-bgl-ctrl-num-btn[data-v-09ec7e39]{
+	margin-top: calc(var(--input-height) / 10) !important;
 }
-.bgl-big-ctrl-num-btn[data-v-abb5baff]{
+.bgl-ctrl-num-btn[data-v-09ec7e39]{
+	height: calc(var(--input-height) / 2.5) !important;
+}
+.bgl-big-ctrl-num-btn[data-v-09ec7e39]{
 	width: 100% !important;
 }
-.bgl-number-input[data-v-abb5baff]{
+.bgl-number-input[data-v-09ec7e39]{
 	padding-inline-end: 1.75rem !important;
 }
 
@@ -1136,12 +1139,7 @@ pre code.hljs{
 }
 
 .m-password {
-	position: absolute;
-	inset-block: 0;
-	margin-top: calc(var(--input-height) / 2 - 0.75rem);
-}
-.relative.has-label .m-password {
-	margin-top: calc(var(--input-height) / 2 + 0.25rem);
+	height: var(--input-height) !important;
 }
 
 .radio-input-list[data-v-3c77be46]{
@@ -1180,28 +1178,28 @@ pre code.hljs{
 	color: var(--bgl-light-text);
 }
 
-.range-slider-position-txt[data-v-5c90c7f5]{
+.range-slider-position-txt[data-v-2e7787ea]{
 	margin-inline-start:  calc((var(--progress) * 1%) - (var(--bgl-range-thumb-size) * var(--progress) / 100));
 	top: calc(var(--bgl-range-thumb-size) / 2 ) ;
 	transition: transform 0.1s, opacity 0.5s, top 0.5s;
 	transform: scale(0.5);
 	width: var(--bgl-range-thumb-size);
 }
-.range-slider:hover .range-slider-position-txt[data-v-5c90c7f5]{
+.range-slider:hover .range-slider-position-txt[data-v-2e7787ea]{
 	opacity: 1;
 	transform: scale(1);
-	top: calc(var(--bgl-range-thumb-size) / 1) ;
+	top: calc(var(--bgl-range-thumb-size) / 1.8) ;
 }
-.range-slider[data-v-5c90c7f5] {
+.range-slider[data-v-2e7787ea] {
 	height: var(--bgl-range-track-size);
 	display: flex;
 	align-items: center;
 	margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
 }
-.range-slider-txt[data-v-5c90c7f5]{
+.range-slider-txt[data-v-2e7787ea]{
 	margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
 }
-input[type="range"][data-v-5c90c7f5] {
+input[type="range"][data-v-2e7787ea] {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -1211,7 +1209,7 @@ input[type="range"][data-v-5c90c7f5] {
   appearance: none;
   margin: 0;
 }
-input[type="range"][data-v-5c90c7f5]::-webkit-slider-thumb {
+input[type="range"][data-v-2e7787ea]::-webkit-slider-thumb {
   pointer-events: all;
   appearance: none;
   width: var(--bgl-range-thumb-size);
@@ -1224,23 +1222,30 @@ input[type="range"][data-v-5c90c7f5]::-webkit-slider-thumb {
   cursor: grab;
   transition: var(--bgl-transition);
 }
-input[type="range"][data-v-5c90c7f5]::-webkit-slider-thumb:hover {
+input[type="range"][data-v-2e7787ea]::-webkit-slider-thumb:hover {
 	box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) var(--bgl-primary-tint);
 	filter: brightness(90%);
 }
-input[type="range"][data-v-5c90c7f5]:focus::-webkit-slider-thumb {
+input[type="range"][data-v-2e7787ea]:focus::-webkit-slider-thumb {
   outline: none;
   box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) var(--bgl-primary-tint);
 }
-input[type="range"][data-v-5c90c7f5]:active::-webkit-slider-thumb {
+input[type="range"][data-v-2e7787ea]:active::-webkit-slider-thumb {
 	cursor: grabbing;
 }
-.track[data-v-5c90c7f5] {
+.track[data-v-2e7787ea] {
   height: var(--bgl-range-track-height);
   background: var(--bgl-bg);
   margin-inline-start: calc(var(--bgl-range-thumb-size) / 2);
   width: calc(100% - var(--bgl-range-thumb-size));
 }
+@media screen and (max-width: 768px) {
+.range-slider-position-txt[data-v-2e7787ea]{
+		opacity: 1;
+		transform: scale(1);
+		top: calc(var(--bgl-range-thumb-size) / 1.8) ;
+}
+}
 
 .tableBoxSelect[data-v-4548b70f]::after {
 	content: '';
@@ -1266,26 +1271,26 @@ input[type="range"][data-v-5c90c7f5]:active::-webkit-slider-thumb {
 line-height: 1.65;
 }
 
-.rich-text-editor[data-v-70080819] {
+.rich-text-editor[data-v-2e74943d] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-70080819] {
+.editor-container[data-v-2e74943d] {
 	display: flex;
 	gap: 1rem;
 }
-.content-area[data-v-70080819],
-.preview-area[data-v-70080819] {
+.content-area[data-v-2e74943d],
+.preview-area[data-v-2e74943d] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-70080819] {
+.split-view[data-v-2e74943d] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-70080819] {
+.editableContent[data-v-2e74943d] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -1293,7 +1298,7 @@ line-height: 1.65;
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-70080819] {
+.html-editor[data-v-2e74943d] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -1304,12 +1309,12 @@ line-height: 1.65;
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-70080819] {
+.preview-area[data-v-2e74943d] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-70080819] {
+.fullscreen-mode[data-v-2e74943d] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -1318,18 +1323,18 @@ line-height: 1.65;
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-70080819] {
+.fullscreen-mode .editor-container[data-v-2e74943d] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-70080819],
-.fullscreen-mode .preview-area[data-v-70080819] {
+.fullscreen-mode .content-area[data-v-2e74943d],
+.fullscreen-mode .preview-area[data-v-2e74943d] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-70080819]{
+.fullscreen-mode .code-editor[data-v-2e74943d]{
 	height: 100% !important;
 }
-.debug-controls[data-v-70080819] {
+.debug-controls[data-v-2e74943d] {
 	display: flex;
 	gap: 0.5rem;
 	justify-content: flex-end;
@@ -8104,7 +8109,7 @@ to {
     display: block !important;
 }
 .block {
-    display: block;
+    display: block !important;
     width: 100% !important;
 }
 .inline {

package/package.json

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

package/src/components/form/BglField.vue

@@ -16,7 +16,7 @@ import {
 	type BagelFormState,
 	BglForm
 } from '@bagelink/vue'
-import { inject, ref } from 'vue'
+import { inject } from 'vue'
 import TabsNav from '../layout/TabsNav.vue'
 import { FORM_STATE_KEY, provideBagelFormState } from './useBagelFormState'
 
@@ -84,9 +84,9 @@ const vIf = $computed(() => {
 	return true
 })
 
-const computedFieldData = $computed(
-	() => props.field.transform?.(fieldData, formState.data.value as T) ?? fieldData
-)
+// const computedFieldData = $computed(
+// 	() => props.field.transform?.(fieldData, formState.data.value as T) ?? fieldData
+// )
 
 const computedOptions = $computed(
 	() => bindAttrs({ options: props.field.options }, fieldData, formState.data.value).options

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

@@ -133,7 +133,7 @@ watch(() => modelValue, (newVal) => {
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" @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 color-gray" @click="increment" />
+					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn" @click="increment" />
 					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" @click="decrement" />
 				</div>
 			</div>
@@ -157,9 +157,13 @@ watch(() => modelValue, (newVal) => {
 	margin-top: calc(var(--input-height) / -1);
 	line-height: 0;
 }
+.top-bgl-ctrl-num-btn{
+	margin-top: calc(var(--input-height) / 10) !important;
+}
 .bgl-ctrl-num-btn{
-	height: calc(var(--input-height) / 2) !important;
+	height: calc(var(--input-height) / 2.5) !important;
 }
+
 .bgl-big-ctrl-num-btn{
 	width: 100% !important;
 }

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

@@ -32,7 +32,6 @@ const props = withDefaults(
 		label: ''
 	}
 )
-const hasLabel = $computed(() => props.label && props.label.trim() !== '')
 
 const password = defineModel<string>('modelValue')
 const showPwd = defineModel<boolean>('showPwd', { default: false })
@@ -43,32 +42,27 @@ const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 </script>
 
 <template>
-	<div class="relative" :class="{ 'has-label': hasLabel }">
+	<div class="relative">
 		<TextInput
 			v-model="password"
 			v-bind="props"
 			:type="inputType"
 			class="mb-0"
 		/>
-		<Btn
-			flat
-			thin
-			class="mx-05 m-password position-bottom-end"
-			:icon="toggleShowPwdIcon"
-			@click="showPwd = !showPwd"
-		/>
+		<div class="m-password position-bottom-end flex column justify-content-center">
+			<Btn
+				flat
+				thin
+				class="mx-05"
+				:icon="toggleShowPwdIcon"
+				@click="showPwd = !showPwd"
+			/>
+		</div>
 	</div>
 </template>
 
 <style>
 .m-password {
-	position: absolute;
-	inset-block: 0;
-	margin-top: calc(var(--input-height) / 2 - 0.75rem);
-
-}
-
-.relative.has-label .m-password {
-	margin-top: calc(var(--input-height) / 2 + 0.25rem);
+	height: var(--input-height) !important;
 }
 </style>

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

@@ -154,7 +154,7 @@ const displayTo = $computed(() => formatValue(validTo))
 .range-slider:hover .range-slider-position-txt{
 	opacity: 1;
 	transform: scale(1);
-	top: calc(var(--bgl-range-thumb-size) / 1) ;
+	top: calc(var(--bgl-range-thumb-size) / 1.8) ;
 }
 
 .range-slider {
@@ -212,4 +212,11 @@ input[type="range"]:active::-webkit-slider-thumb {
   margin-inline-start: calc(var(--bgl-range-thumb-size) / 2);
   width: calc(100% - var(--bgl-range-thumb-size));
 }
+@media screen and (max-width: 768px) {
+	.range-slider-position-txt{
+		opacity: 1;
+		transform: scale(1);
+		top: calc(var(--bgl-range-thumb-size) / 1.8) ;
+	}
+}
 </style>

package/src/components/form/inputs/RichText/index.vue

@@ -51,7 +51,7 @@ async function initEditor() {
 		const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
 		const textNodes: Text[] = []
 		let node: Node | null
-		while (node = walker.nextNode()) {
+		while ((node = walker.nextNode())) {
 			if (node.parentElement === doc.body) {
 				textNodes.push(node as Text)
 			}

package/src/styles/layout.css

@@ -5352,7 +5352,7 @@
 }
 
 .block {
-    display: block;
+    display: block !important;
     width: 100% !important;
 }