@bagelink/vue 1.15.13 → 1.15.26

package/src/dialog/Dialog.vue

@@ -160,277 +160,279 @@ defineExpose({ close })
 </template>
 
 <style scoped>
+
 /* Base dialog styles */
 dialog {
-	border-radius: var(--bgl-card-radius, 12px);
-	max-width: var(--dialog-width);
-	width: calc(100% - 2rem);
-	max-height: calc(100vh - 2rem);
-	background: var(--bgl-popup-bg, #fff);
-	color: var(--bgl-popup-text, black);
+border-radius: var(--bgl-card-radius, 12px);
+max-width: var(--dialog-width);
+width: calc(100% - 2rem);
+max-height: calc(100vh - 2rem);
+background: var(--bgl-popup-bg, #fff);
+color: var(--bgl-popup-text, black);
 }
 
 .grid-dialog {
-	grid-template-rows: auto 1fr auto;
-	overflow: hidden;
-	border-radius: var(--bgl-card-radius, 12px);
-	/* height: 100%;  לא להכניס את זה כי זה ישבור את הדילוג באייפון*/ 
+grid-template-rows: auto 1fr auto;
+overflow: hidden;
+border-radius: var(--bgl-card-radius, 12px);
+/* height: 100%;  לא להכניס את זה כי זה ישבור את הדילוג באייפון*/ 
 }
 
 .height-100-2 {
-	height: calc(100vh - 2rem);
+height: calc(100vh - 2rem);
 }
 
 .max-height-100-2 {
-	max-height: calc(100vh - 2rem);
+max-height: calc(100vh - 2rem);
 }
 
 .dialog-close {
-	margin-top: 0.125rem;
+margin-top: 0.125rem;
 }
 
 .overlay-btn {
-	opacity: 0;
-	animation: fade-in 0.3s ease-out 0.1s forwards;
+opacity: 0;
+animation: fade-in 0.3s ease-out 0.1s forwards;
 }
 
 /* Backdrop animations */
 dialog::backdrop {
-	background: var(--bgl-dark-bg, rgba(0, 0, 0, 0.5));
-	opacity: 0;
+background: var(--bgl-dark-bg, rgba(0, 0, 0, 0.5));
+opacity: 0;
 }
 
 dialog[open]::backdrop {
-	animation: fade-in 0.2s ease-out forwards;
+animation: fade-in 0.2s ease-out forwards;
 }
 
 dialog.is-closing::backdrop {
-	animation: fade-out 0.15s ease-in forwards;
+animation: fade-out 0.15s ease-in forwards;
 }
 
 /* Dialog position animations */
 dialog.dialog-center[open] {
-	animation: scale-fade-in 0.2s ease-out;
+animation: scale-fade-in 0.2s ease-out;
 }
 
 dialog.dialog-center.is-closing {
-	animation: scale-fade-out 0.15s ease-in forwards;
+animation: scale-fade-out 0.15s ease-in forwards;
 }
 
 dialog.dialog-right[open] {
-	animation: slide-in-right 0.25s ease-out;
+animation: slide-in-right 0.25s ease-out;
 }
 [dir="rtl"] .dialog-right[open] {
-	animation: slide-in-left 0.25s ease-out;
+animation: slide-in-left 0.25s ease-out;
 }
 [dir="rtl"] .dialog-right.is-closing {
-	animation: slide-out-left 0.2s ease-in forwards;
+animation: slide-out-left 0.2s ease-in forwards;
 }
 
 dialog.dialog-right.is-closing {
-	animation: slide-out-right 0.2s ease-in forwards;
+animation: slide-out-right 0.2s ease-in forwards;
 }
 
 dialog.dialog-left[open] {
-	animation: slide-in-left 0.25s ease-out;
+animation: slide-in-left 0.25s ease-out;
 }
 [dir="rtl"] .dialog-left[open] {
-	animation: slide-in-right 0.25s ease-out;
+animation: slide-in-right 0.25s ease-out;
 }
 
 dialog.dialog-left.is-closing {
-	animation: slide-out-left 0.2s ease-in forwards;
+animation: slide-out-left 0.2s ease-in forwards;
 }
 [dir="rtl"] .dialog-left.is-closing {
-	animation: slide-out-right 0.2s ease-in forwards;
+animation: slide-out-right 0.2s ease-in forwards;
 }
 dialog.dialog-top[open] {
-	animation: slide-in-top 0.25s ease-out;
+animation: slide-in-top 0.25s ease-out;
 }
 
 dialog.dialog-top.is-closing {
-	animation: slide-out-top 0.2s ease-in forwards;
+animation: slide-out-top 0.2s ease-in forwards;
 }
 
 dialog.dialog-bottom[open] {
-	animation: slide-in-bottom 0.25s ease-out;
+animation: slide-in-bottom 0.25s ease-out;
 }
 
 dialog.dialog-bottom.is-closing {
-	animation: slide-out-bottom 0.2s ease-in forwards;
+animation: slide-out-bottom 0.2s ease-in forwards;
 }
 
 /* Keyframes - shared and reusable */
 @keyframes fade-in {
-	from {
-		opacity: 0;
-	}
+from {
+	opacity: 0;
+}
 
-	to {
-		opacity: 1;
-	}
+to {
+	opacity: 1;
+}
 }
 
 @keyframes fade-out {
-	from {
-		opacity: 1;
-	}
+from {
+	opacity: 1;
+}
 
-	to {
-		opacity: 0;
-	}
+to {
+	opacity: 0;
+}
 }
 
 @keyframes scale-fade-in {
-	from {
-		opacity: 0;
-		transform: scale(0.95) translateY(10px);
-	}
+from {
+	opacity: 0;
+	transform: scale(0.95) translateY(10px);
+}
 
-	to {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
+to {
+	opacity: 1;
+	transform: scale(1) translateY(0);
+}
 }
 
 @keyframes scale-fade-out {
-	from {
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
+from {
+	opacity: 1;
+	transform: scale(1) translateY(0);
+}
 
-	to {
-		opacity: 0;
-		transform: scale(0.95) translateY(10px);
-	}
+to {
+	opacity: 0;
+	transform: scale(0.95) translateY(10px);
+}
 }
 
 @keyframes slide-in-right {
-	from {
-		opacity: 0;
-		transform: translateX(100%);
-	}
+from {
+	opacity: 0;
+	transform: translateX(100%);
+}
 
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
+to {
+	opacity: 1;
+	transform: translateX(0);
+}
 }
 
 @keyframes slide-out-right {
-	from {
-		opacity: 1;
-		transform: translateX(0);
-	}
+from {
+	opacity: 1;
+	transform: translateX(0);
+}
 
-	to {
-		opacity: 0;
-		transform: translateX(100%);
-	}
+to {
+	opacity: 0;
+	transform: translateX(100%);
+}
 }
 
 @keyframes slide-in-left {
-	from {
-		opacity: 0;
-		transform: translateX(-100%);
-	}
+from {
+	opacity: 0;
+	transform: translateX(-100%);
+}
 
-	to {
-		opacity: 1;
-		transform: translateX(0);
-	}
+to {
+	opacity: 1;
+	transform: translateX(0);
+}
 }
 
 @keyframes slide-out-left {
-	from {
-		opacity: 1;
-		transform: translateX(0);
-	}
+from {
+	opacity: 1;
+	transform: translateX(0);
+}
 
-	to {
-		opacity: 0;
-		transform: translateX(-100%);
-	}
+to {
+	opacity: 0;
+	transform: translateX(-100%);
+}
 }
 
 @keyframes slide-in-top {
-	from {
-		opacity: 0;
-		transform: translateY(-100%);
-	}
+from {
+	opacity: 0;
+	transform: translateY(-100%);
+}
 
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
+to {
+	opacity: 1;
+	transform: translateY(0);
+}
 }
 
 @keyframes slide-out-top {
-	from {
-		opacity: 1;
-		transform: translateY(0);
-	}
+from {
+	opacity: 1;
+	transform: translateY(0);
+}
 
-	to {
-		opacity: 0;
-		transform: translateY(-100%);
-	}
+to {
+	opacity: 0;
+	transform: translateY(-100%);
+}
 }
 
 @keyframes slide-in-bottom {
-	from {
-		opacity: 0;
-		transform: translateY(100%);
-	}
+from {
+	opacity: 0;
+	transform: translateY(100%);
+}
 
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
+to {
+	opacity: 1;
+	transform: translateY(0);
+}
 }
 
 @keyframes slide-out-bottom {
-	from {
-		opacity: 1;
-		transform: translateY(0);
-	}
+from {
+	opacity: 1;
+	transform: translateY(0);
+}
 
-	to {
-		opacity: 0;
-		transform: translateY(100%);
-	}
+to {
+	opacity: 0;
+	transform: translateY(100%);
+}
 }
 
 /* Full width adjustments */
 dialog[style*="--dialog-width: 100%"] {
-	max-width: calc(100vw - 2rem);
+max-width: calc(100vw - 2rem);
 }
 
 dialog.dialog-left[style*="--dialog-width: 100%"],
 dialog.dialog-right[style*="--dialog-width: 100%"] {
-	max-width: calc(100vw - 2rem);
-	width: calc(100vw - 2rem);
+max-width: calc(100vw - 2rem);
+width: calc(100vw - 2rem);
 }
 
 dialog.dialog-left .grid-dialog,
-	dialog.dialog-right .grid-dialog {
-		height: 100%
-	}
+dialog.dialog-right .grid-dialog {
+	height: 100%
+}
 
 /* Mobile adjustments */
 @media screen and (max-width: 910px) {
 
-	dialog.dialog-left .grid-dialog,
-	dialog.dialog-right .grid-dialog {
-		max-height: 100vh;
-		height: unset !important;
-	}
+dialog.dialog-left .grid-dialog,
+dialog.dialog-right .grid-dialog {
+	max-height: 100vh;
+	height: unset !important;
+}
 
-	dialog.dialog-left,
-	dialog.dialog-right {
-		width: 100%;
-	}
+dialog.dialog-left,
+dialog.dialog-right {
+	width: 100%;
 }
+}
+
 </style>
 <!-- prettier-ignore-end -->
 <!-- eslint-enable -->

package/src/form-flow/MultiStepForm.vue

@@ -396,158 +396,160 @@ defineExpose({
 </template>
 
 <style scoped>
+
 .multi-step-form {
-	display: flex;
-	flex-direction: column;
-	gap: 2rem;
+display: flex;
+flex-direction: column;
+gap: 2rem;
 }
 
 .step-progress {
-	display: flex;
-	justify-content: space-between;
-	position: relative;
-	padding: 0 1rem;
+display: flex;
+justify-content: space-between;
+position: relative;
+padding: 0 1rem;
 }
 
 .step-progress::before {
-	content: '';
-	position: absolute;
-	top: 20px;
-	left: 0;
-	right: 0;
-	height: 2px;
-	background: #e0e0e0;
-	z-index: 0;
+content: '';
+position: absolute;
+top: 20px;
+left: 0;
+right: 0;
+height: 2px;
+background: #e0e0e0;
+z-index: 0;
 }
 
 .step-indicator {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 0.5rem;
-	cursor: pointer;
-	position: relative;
-	z-index: 1;
-	flex: 1;
-	min-width: 0;
+display: flex;
+flex-direction: column;
+align-items: center;
+gap: 0.5rem;
+cursor: pointer;
+position: relative;
+z-index: 1;
+flex: 1;
+min-width: 0;
 }
 
 .step-number {
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	background: white;
-	border: 2px solid #e0e0e0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: 600;
-	transition: all 0.2s;
+width: 40px;
+height: 40px;
+border-radius: 50%;
+background: white;
+border: 2px solid #e0e0e0;
+display: flex;
+align-items: center;
+justify-content: center;
+font-weight: 600;
+transition: all 0.2s;
 }
 
 .step-indicator.active .step-number {
-	background: var(--primary-color, #007bff);
-	color: white;
-	border-color: var(--primary-color, #007bff);
+background: var(--primary-color, #007bff);
+color: white;
+border-color: var(--primary-color, #007bff);
 }
 
 .step-indicator.completed .step-number {
-	background: var(--success-color, #28a745);
-	color: white;
-	border-color: var(--success-color, #28a745);
+background: var(--success-color, #28a745);
+color: white;
+border-color: var(--success-color, #28a745);
 }
 
 .step-label {
-	font-size: 0.875rem;
-	color: #666;
-	text-align: center;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	max-width: 100%;
+font-size: 0.875rem;
+color: #666;
+text-align: center;
+white-space: nowrap;
+overflow: hidden;
+text-overflow: ellipsis;
+max-width: 100%;
 }
 
 .step-indicator.active .step-label {
-	color: var(--primary-color, #007bff);
-	font-weight: 600;
+color: var(--primary-color, #007bff);
+font-weight: 600;
 }
 
 .step-title {
-	margin: 0 0 1.5rem 0;
-	font-size: 1.5rem;
-	color: #333;
+margin: 0 0 1.5rem 0;
+font-size: 1.5rem;
+color: #333;
 }
 
 .step-navigation {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 1rem 0;
+display: flex;
+justify-content: space-between;
+align-items: center;
+padding: 1rem 0;
 }
 
 .step-counter {
-	font-size: 0.875rem;
-	color: #666;
+font-size: 0.875rem;
+color: #666;
 }
 
 button {
-	padding: 0.75rem 1.5rem;
-	border: none;
-	border-radius: 4px;
-	font-weight: 600;
-	cursor: pointer;
-	transition: all 0.2s;
+padding: 0.75rem 1.5rem;
+border: none;
+border-radius: 4px;
+font-weight: 600;
+cursor: pointer;
+transition: all 0.2s;
 }
 
 .btn-primary {
-	background: var(--primary-color, #007bff);
-	color: white;
+background: var(--primary-color, #007bff);
+color: white;
 }
 
 .btn-primary:hover:not(:disabled) {
-	background: var(--primary-dark, #0056b3);
+background: var(--primary-dark, #0056b3);
 }
 
 .btn-secondary {
-	background: white;
-	color: var(--primary-color, #007bff);
-	border: 1px solid var(--primary-color, #007bff);
+background: white;
+color: var(--primary-color, #007bff);
+border: 1px solid var(--primary-color, #007bff);
 }
 
 .btn-secondary:hover:not(:disabled) {
-	background: var(--primary-light, #f0f7ff);
+background: var(--primary-light, #f0f7ff);
 }
 
 button:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
+opacity: 0.5;
+cursor: not-allowed;
 }
 
 .validation-errors {
-	background: #fff5f5;
-	border: 1px solid #fc8181;
-	border-radius: 4px;
-	padding: 1rem;
-	margin-bottom: 1rem;
+background: #fff5f5;
+border: 1px solid #fc8181;
+border-radius: 4px;
+padding: 1rem;
+margin-bottom: 1rem;
 }
 
 .validation-errors ul {
-	margin: 0;
-	padding-left: 1.25rem;
-	color: #c53030;
+margin: 0;
+padding-left: 1.25rem;
+color: #c53030;
 }
 
 .validation-errors li {
-	margin-bottom: 0.25rem;
+margin-bottom: 0.25rem;
 }
 
 .validation-errors li:last-child {
-	margin-bottom: 0;
+margin-bottom: 0;
 }
 
 @media (max-width: 768px) {
-	.step-label {
-		display: none;
-	}
+.step-label {
+	display: none;
 }
+}
+
 </style>