@bagelink/vue 0.0.1076 → 0.0.1082

package/dist/style.css

@@ -1178,28 +1178,28 @@ pre code.hljs{
 	color: var(--bgl-light-text);
 }
 
-.range-slider-position-txt[data-v-2e7787ea]{
+.range-slider-position-txt[data-v-fb99b679]{
 	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);
+	transform: scale(0.8);
 	width: var(--bgl-range-thumb-size);
 }
-.range-slider:hover .range-slider-position-txt[data-v-2e7787ea]{
+.range-slider:hover .range-slider-position-txt[data-v-fb99b679]{
 	opacity: 1;
 	transform: scale(1);
 	top: calc(var(--bgl-range-thumb-size) / 1.8) ;
 }
-.range-slider[data-v-2e7787ea] {
+.range-slider[data-v-fb99b679] {
 	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-2e7787ea]{
+.range-slider-txt[data-v-fb99b679]{
 	margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
 }
-input[type="range"][data-v-2e7787ea] {
+input[type="range"][data-v-fb99b679] {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -1209,7 +1209,7 @@ input[type="range"][data-v-2e7787ea] {
   appearance: none;
   margin: 0;
 }
-input[type="range"][data-v-2e7787ea]::-webkit-slider-thumb {
+input[type="range"][data-v-fb99b679]::-webkit-slider-thumb {
   pointer-events: all;
   appearance: none;
   width: var(--bgl-range-thumb-size);
@@ -1222,25 +1222,25 @@ input[type="range"][data-v-2e7787ea]::-webkit-slider-thumb {
   cursor: grab;
   transition: var(--bgl-transition);
 }
-input[type="range"][data-v-2e7787ea]::-webkit-slider-thumb:hover {
+input[type="range"][data-v-fb99b679]::-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-2e7787ea]:focus::-webkit-slider-thumb {
+input[type="range"][data-v-fb99b679]: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-2e7787ea]:active::-webkit-slider-thumb {
+input[type="range"][data-v-fb99b679]:active::-webkit-slider-thumb {
 	cursor: grabbing;
 }
-.track[data-v-2e7787ea] {
+.track[data-v-fb99b679] {
   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]{
+.range-slider-position-txt[data-v-fb99b679]{
 		opacity: 1;
 		transform: scale(1);
 		top: calc(var(--bgl-range-thumb-size) / 1.8) ;
@@ -1341,10 +1341,10 @@ line-height: 1.65;
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-9574c8a2] {
+.selectinput[data-v-77b2541f] {
 	width: 100%;
 }
-.selectinput-option[data-v-9574c8a2] {
+.selectinput-option[data-v-77b2541f] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1356,23 +1356,23 @@ line-height: 1.65;
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-9574c8a2]{
+.selectinput-option .bgl_icon-font[data-v-77b2541f]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-9574c8a2] {
+.selectinput-options.multiselect .selectinput-option[data-v-77b2541f] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-9574c8a2] {
+.selectinput-options[data-v-77b2541f] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-9574c8a2]:hover, .highlight[data-v-9574c8a2] {
+.selectinput-option[data-v-77b2541f]:hover, .highlight[data-v-77b2541f] {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-9574c8a2] {
+.isEmpty p[data-v-77b2541f] {
 	opacity: 0.3;
 }
-.selected[data-v-9574c8a2]{
+.selected[data-v-77b2541f]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }

package/package.json

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

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

@@ -112,7 +112,7 @@ const displayTo = $computed(() => formatValue(validTo))
 			</div>
 			<p
 				v-if="validFrom !== min"
-				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0"
+				class="txt-center txt-12 range-slider-position-txt absolute line-height-1"
 				:style="{ '--progress': `${fromPercentage}` }"
 			>
 				<slot v-if="!multiRange" name="progress" :progress="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
@@ -124,7 +124,7 @@ const displayTo = $computed(() => formatValue(validTo))
 			</p>
 			<p
 				v-if="multiRange && validTo !== max"
-				class="txt-center txt-12 range-slider-position-txt opacity-0 line-height-1 absolute"
+				class="txt-center txt-12 range-slider-position-txt line-height-1 absolute"
 				:style="{ '--progress': `${toPercentage}` }"
 			>
 				<slot name="to" :to="displayTo" :from="displayFrom" :min="formatValue(min)" :max="formatValue(max)">
@@ -148,7 +148,7 @@ const displayTo = $computed(() => formatValue(validTo))
 	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);
+	transform: scale(0.8);
 	width: var(--bgl-range-thumb-size);
 }
 .range-slider:hover .range-slider-position-txt{

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

@@ -167,6 +167,7 @@ function emitUpdate() {
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
+	if (arr1.length !== arr2.length) return false
 	const arr1Values = [...arr1].map(a => getValue(a)).filter(Boolean)
 	const arr2Values = [...arr2].map(a => getValue(a)).filter(Boolean)
 	const isSame = arr1Values.every((item: Option) => arr2Values.includes(item))
@@ -180,9 +181,10 @@ watch(
 			const newOption = props.options.find(o => getValue(o) === newVal) ?? newVal
 			if (newOption && !isSelected(newOption)) selectedItems = [newOption]
 		} else {
-			const isSame = compareArrays([newVal].flat(), selectedItems)
+			const newData = [newVal].flat()
+			const isSame = compareArrays(newData, selectedItems)
 			if (!isSame) {
-				selectedItems.splice(0, selectedItemCount, ...[newVal].flat())
+				selectedItems.splice(0, selectedItemCount, ...newData)
 			}
 		}
 	},