@bagelink/vue 1.2.139 → 1.2.141

package/dist/style.css

@@ -1,4 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
+.expand-enter-active,
+.expand-leave-active {
+	transition: all 0.2s;
+	transition-delay: 0ms;
+}
+.expand-enter-from,
+.expand-leave-to {
+	max-height: 0;
+}
+.expand-enter-to,
+.expand-leave-from {
+	max-height: 300px;
+}
+
 .accordion-item[data-v-3334f637] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
@@ -41,20 +55,6 @@
 	text-decoration: underline;
 }
 
-.expand-enter-active,
-.expand-leave-active {
-	transition: all 0.2s;
-	transition-delay: 0ms;
-}
-.expand-enter-from,
-.expand-leave-to {
-	max-height: 0;
-}
-.expand-enter-to,
-.expand-leave-from {
-	max-height: 300px;
-}
-
 .bgl_btn[data-v-99c4aa53] {
   --btn-bg: var(--bgl-primary);
   --btn-color: var(--bgl-light-text);
@@ -262,10 +262,6 @@ display: block;
   object-fit: cover;
 }
 
-.inline[data-v-689f051f] {
-	display: inline;
-}
-
 .pill {
 	border-radius: 10px;
 	padding: 4px 8px;
@@ -308,15 +304,19 @@ display: block;
 	color: var(--bgl-red);
 }
 
-.bgl_vid iframe[data-v-006552f6],
-.bgl_vid video[data-v-006552f6] {
+.inline[data-v-689f051f] {
+	display: inline;
+}
+
+.bgl_vid iframe[data-v-e5f32248],
+.bgl_vid video[data-v-e5f32248] {
 	width: 100%;
 	height: auto;
 	display: block;
 	margin: auto;
 	border-radius: var(--input-border-radius);
 }
-.bgl_vid.vid_empty[data-v-006552f6] {
+.bgl_vid.vid_empty[data-v-e5f32248] {
 	padding-top: 56.25%;
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
@@ -1404,6 +1404,12 @@ fieldset[data-v-f7e758e5] {
     color: var(--label-color) !important;
 }
 
+/* Global styles */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
+}
+
 .code-editor-container[data-v-de01e351] {
 	margin-bottom: 0.5rem;
 	height: 100%;
@@ -1472,12 +1478,6 @@ fieldset[data-v-f7e758e5] {
 	color: transparent;
 }
 
-/* Global styles */
-pre code.hljs {
-	padding: 0 !important;
-	background: transparent !important;
-}
-
 .colorInputPick{
     --input-font-size: 12px;
 	height: calc(var(--input-height) - 9px) !important;
@@ -1956,42 +1956,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 }
 .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-cced5e42] {
-	width: 100%;
-}
-.selectinput-option[data-v-cced5e42] {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: grid;
-	grid-template-columns:1fr;
-	justify-content: space-between;
-	width: 100%;
-	font-size: var(--input-font-size);
-	margin-block: 0.15rem;
-}
-.selectinput-option .bgl_icon-font[data-v-cced5e42]{
-	line-height: normal;
-}
-.selectinput-options.multiselect .selectinput-option[data-v-cced5e42] {
-	grid-template-columns: 10px 1fr;
-}
-.selectinput-options[data-v-cced5e42] {
-	max-height: 300px;
-	overflow-y: auto;
-}
-.selectinput-option[data-v-cced5e42]:hover, .highlight[data-v-cced5e42] {
-	background: var(--bgl-gray-20);
-}
-.isEmpty p[data-v-cced5e42] {
-	opacity: 0.3;
-}
-.selected[data-v-cced5e42]{
-	/* background: var(--bgl-primary-tint); */
-	background: var(--bgl-selected);
-}
-
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
@@ -2032,6 +1996,42 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	/* color: var(--input-color); */
 }
 
+.selectinput[data-v-cced5e42] {
+	width: 100%;
+}
+.selectinput-option[data-v-cced5e42] {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns:1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-option .bgl_icon-font[data-v-cced5e42]{
+	line-height: normal;
+}
+.selectinput-options.multiselect .selectinput-option[data-v-cced5e42] {
+	grid-template-columns: 10px 1fr;
+}
+.selectinput-options[data-v-cced5e42] {
+	max-height: 300px;
+	overflow-y: auto;
+}
+.selectinput-option[data-v-cced5e42]:hover, .highlight[data-v-cced5e42] {
+	background: var(--bgl-gray-20);
+}
+.isEmpty p[data-v-cced5e42] {
+	opacity: 0.3;
+}
+.selected[data-v-cced5e42]{
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-selected);
+}
+
 .bgl_input .canvas {
 	width: 100%;
 	height: 100%;
@@ -2047,6 +2047,40 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border-radius: var(--input-border-radius);
 }
 
+.table-row .bagel-input input,
+.table-row .bagel-input textarea,
+.table-row .bagel-input .input {
+	border-radius: 0;
+	background: transparent;
+	color: var(--bgl-text-color);
+}
+.table-row .bagel-input textarea {
+	resize: none;
+	min-height: 40px;
+	overflow: auto;
+	margin: 0px;
+	padding: 0.64rem 0.7rem 0;
+}
+.table-row .bagel-input {
+	margin: 0;
+}
+.table-row .bagel-input input:focus-visible,
+.table-row .bagel-input textarea:focus-visible,
+.table-row .bagel-input .input:focus-visible {
+	background: var(--border-color);
+}
+.ghost {
+	opacity: 0;
+	background: #c8ebfb;
+}
+.sortable-chosen {
+	cursor: grabbing !important;
+	border-color: transparent;
+	background: var(--bgl-box-bg);
+	border-radius: 10px;
+	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
+}
+
 .table-side-scroll[data-v-e9632f79] {
 	overflow: auto;
 	margin-inline-start: -1rem;
@@ -2153,40 +2187,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	opacity: 1;
 }
 
-.table-row .bagel-input input,
-.table-row .bagel-input textarea,
-.table-row .bagel-input .input {
-	border-radius: 0;
-	background: transparent;
-	color: var(--bgl-text-color);
-}
-.table-row .bagel-input textarea {
-	resize: none;
-	min-height: 40px;
-	overflow: auto;
-	margin: 0px;
-	padding: 0.64rem 0.7rem 0;
-}
-.table-row .bagel-input {
-	margin: 0;
-}
-.table-row .bagel-input input:focus-visible,
-.table-row .bagel-input textarea:focus-visible,
-.table-row .bagel-input .input:focus-visible {
-	background: var(--border-color);
-}
-.ghost {
-	opacity: 0;
-	background: #c8ebfb;
-}
-.sortable-chosen {
-	cursor: grabbing !important;
-	border-color: transparent;
-	background: var(--bgl-box-bg);
-	border-radius: 10px;
-	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
-}
-
 .tel-input[data-v-24f599bf] {
 	direction: ltr;
 	text-align: left;
@@ -2264,58 +2264,58 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-84ff4b81] {
+.bagel-input textarea[data-v-eeb2bf31] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-84ff4b81] {
+.bagel-input.text-input textarea[data-v-eeb2bf31] {
 	resize: none;
 }
-.code textarea[data-v-84ff4b81] {
+.code textarea[data-v-eeb2bf31] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
-.code textarea[data-v-84ff4b81]::placeholder {
+.code textarea[data-v-eeb2bf31]::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-84ff4b81] {
+.bagel-input.small[data-v-eeb2bf31] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-84ff4b81] {
+.bagel-input.dense label[data-v-eeb2bf31] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-84ff4b81]:disabled {
+.bagel-input input[data-v-eeb2bf31]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-84ff4b81] {
+.bagel-input label[data-v-eeb2bf31] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap .bgl_icon-font[data-v-84ff4b81] {
+.textInputIconWrap .bgl_icon-font[data-v-eeb2bf31] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.textInputIconWrap input[data-v-84ff4b81]{
+.textInputIconWrap input[data-v-eeb2bf31]{
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
-.txtInputIconStart .iconStart[data-v-84ff4b81] {
+.txtInputIconStart .iconStart[data-v-eeb2bf31] {
 	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;
 }
-.txtInputIconStart input[data-v-84ff4b81], .txtInputIconStart textarea[data-v-84ff4b81]{
+.txtInputIconStart input[data-v-eeb2bf31], .txtInputIconStart textarea[data-v-eeb2bf31]{
 	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
 }
-.bagel-input.small textarea[data-v-84ff4b81] {
+.bagel-input.small textarea[data-v-eeb2bf31] {
 	height: 30px;
 }
 
@@ -3964,10 +3964,10 @@ body:has(.bg-dark.is-active) {
 }
 }
 
-[dir='rtl'] .top-arrow[data-v-f3df1ee7] {
+[dir='rtl'] .top-arrow[data-v-04874db1] {
 	transform: rotate(180deg);
 }
-.nav-expend[data-v-f3df1ee7] {
+.nav-expend[data-v-04874db1] {
 	text-align: center;
 	cursor: pointer;
 	background: var(--bgl-popup-bg);
@@ -3993,17 +3993,17 @@ body:has(.bg-dark.is-active) {
 	margin-bottom: 30px;
 }
 */
-.nav-expend[data-v-f3df1ee7] {
+.nav-expend[data-v-04874db1] {
 	background: var(--bgl-popup-bg);
 }
-.nav-expend[data-v-f3df1ee7]:hover {
+.nav-expend[data-v-04874db1]:hover {
 	filter: brightness(95%);
 	box-shadow: 0 0 20px 0 var(--bgl-primary-tint);
 }
-.nav-expend[data-v-f3df1ee7]:active {
+.nav-expend[data-v-04874db1]:active {
 	filter: var(--bgl-active-filter);
 }
-.nav[data-v-f3df1ee7] {
+.nav[data-v-04874db1] {
 	color: var(--bgl-light-text);
 	background: var(--bgl-primary);
 	z-index: 100;
@@ -4012,10 +4012,10 @@ body:has(.bg-dark.is-active) {
 	display: flex;
 	flex-direction: column;
 }
-.nav[data-v-f3df1ee7] * {
+.nav[data-v-04874db1] * {
 	user-select: none;
 }
-.nav-button[data-v-f3df1ee7] {
+.nav-button[data-v-04874db1] {
 	text-decoration: none;
 	cursor: pointer;
 	display: flex;
@@ -4026,11 +4026,11 @@ body:has(.bg-dark.is-active) {
 	transition: all 0.2s ease;
 	pointer-events: none;
 }
-.nav-button[data-v-f3df1ee7]:hover {
+.nav-button[data-v-04874db1]:hover {
 	width: fit-content;
 	pointer-events: all;
 }
-.nav-button .bgl_icon-font[data-v-f3df1ee7] {
+.nav-button .bgl_icon-font[data-v-04874db1] {
 	font-size: 22px;
 	margin: 0.25rem 10px;
 	padding: 10px;
@@ -4043,16 +4043,16 @@ body:has(.bg-dark.is-active) {
 	transition: all 0.2s ease;
 	pointer-events: all;
 }
-.nav-button:hover .bgl_icon-font[data-v-f3df1ee7],
-.nav-button.router-link-active .bgl_icon-font[data-v-f3df1ee7] {
+.nav-button:hover .bgl_icon-font[data-v-04874db1],
+.nav-button.router-link-active .bgl_icon-font[data-v-04874db1] {
 	background: var(--bgl-box-bg);
 	color: var(--bgl-primary);
 }
-.nav-button:hover .tooltip[data-v-f3df1ee7] {
+.nav-button:hover .tooltip[data-v-04874db1] {
 	opacity: 1;
 	pointer-events: all;
 }
-.tooltip[data-v-f3df1ee7] {
+.tooltip[data-v-04874db1] {
 	background-color: var(--bgl-popup-bg);
 	color: var(--bgl-primary);
 	line-height: 1;
@@ -4066,23 +4066,23 @@ body:has(.bg-dark.is-active) {
 	opacity: 0;
 	margin-inline-start: 1rem;
 }
-.tooltip[data-v-f3df1ee7]:hover {
+.tooltip[data-v-04874db1]:hover {
 	filter: brightness(95%);
 }
-.tooltip[data-v-f3df1ee7]:active {
+.tooltip[data-v-04874db1]:active {
 	filter: brightness(90%);
 }
-.bot-buttons-wrapper[data-v-f3df1ee7] {
+.bot-buttons-wrapper[data-v-04874db1] {
 	margin-top: auto;
 	width: 100%;
 }
-.nav-links-wrapper[data-v-f3df1ee7] {
+.nav-links-wrapper[data-v-04874db1] {
 	direction: ltr;
 }
-[dir='rtl'] .nav-links-wrapper[data-v-f3df1ee7] {
+[dir='rtl'] .nav-links-wrapper[data-v-04874db1] {
 	direction: rtl;
 }
-.nav-scroll[data-v-f3df1ee7] {
+.nav-scroll[data-v-04874db1] {
 	overflow-y: scroll;
 	width: 50vw;
 	direction: rtl;
@@ -4092,30 +4092,30 @@ body:has(.bg-dark.is-active) {
 	display: flex;
 	flex-direction: column;
 }
-.nav[data-v-f3df1ee7]::-webkit-scrollbar-thumb {
+.nav[data-v-04874db1]::-webkit-scrollbar-thumb {
 	background-color: transparent;
 }
-.nav[data-v-f3df1ee7]:hover::-webkit-scrollbar-thumb {
+.nav[data-v-04874db1]:hover::-webkit-scrollbar-thumb {
 	background-color: var(--bgl-gray);
 }
-[dir='rtl'] .nav-scroll[data-v-f3df1ee7] {
+[dir='rtl'] .nav-scroll[data-v-04874db1] {
 	direction: ltr;
 }
-.full-nav[data-v-f3df1ee7] {
+.full-nav[data-v-04874db1] {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 }
 @media screen and (min-width: 910px) {
-.nav.open .nav-expend[data-v-f3df1ee7] {
+.nav.open .nav-expend[data-v-04874db1] {
 		margin-inline-start: 189px;
 		transform: rotate(180deg);
 }
-.nav.open[data-v-f3df1ee7] {
+.nav.open[data-v-04874db1] {
 		width: 200px;
 		text-align: start;
 }
-.nav.open .tooltip[data-v-f3df1ee7] {
+.nav.open .tooltip[data-v-04874db1] {
 		background-color: transparent;
 		color: var(--bgl-light-text);
 		padding: 0;
@@ -4124,30 +4124,30 @@ body:has(.bg-dark.is-active) {
 		opacity: 1;
 		margin-inline-start: 0rem;
 }
-.nav.open .nav-button .bgl_icon-font[data-v-f3df1ee7] {
+.nav.open .nav-button .bgl_icon-font[data-v-04874db1] {
 		margin: 0;
 		background: transparent;
 }
-.nav.open .nav-button[data-v-f3df1ee7] {
+.nav.open .nav-button[data-v-04874db1] {
 		width: 180px;
 		border-radius: 10px;
 		margin-inline-start: 10px;
 		margin-top: 10px;
 		margin-bottom: 10px;
 }
-.nav.open .nav-button[data-v-f3df1ee7]:hover,
-	.nav.open .nav-button.router-link-active[data-v-f3df1ee7] {
+.nav.open .nav-button[data-v-04874db1]:hover,
+	.nav.open .nav-button.router-link-active[data-v-04874db1] {
 		background: var(--bgl-popup-bg);
 		color: var(--bgl-primary);
 }
-.nav.open .nav-button[data-v-f3df1ee7]:hover,
-	.nav.open .nav-button:hover .tooltip[data-v-f3df1ee7],
-	.nav.open .nav-button.router-link-active .tooltip[data-v-f3df1ee7] {
+.nav.open .nav-button[data-v-04874db1]:hover,
+	.nav.open .nav-button:hover .tooltip[data-v-04874db1],
+	.nav.open .nav-button.router-link-active .tooltip[data-v-04874db1] {
 		color: var(--bgl-primary);
 }
 }
 @media screen and (max-width: 910px) {
-.full-nav[data-v-f3df1ee7] {
+.full-nav[data-v-04874db1] {
 		height: auto;
 		display: flex;
 		flex-direction: row;
@@ -4156,10 +4156,10 @@ body:has(.bg-dark.is-active) {
 		inset-inline-end: 0;
 		overflow-x: auto;
 }
-.nav.open[data-v-f3df1ee7] {
+.nav.open[data-v-04874db1] {
 		width: initial;
 }
-.nav[data-v-f3df1ee7] {
+.nav[data-v-04874db1] {
 		width: auto;
 		display: flex;
 		flex-direction: row;
@@ -4167,7 +4167,7 @@ body:has(.bg-dark.is-active) {
 		overflow-x: auto;
 		justify-content: flex-start;
 }
-.tooltip[data-v-f3df1ee7] {
+.tooltip[data-v-04874db1] {
 		opacity: 1;
 		background: transparent;
 		color: var(--bgl-light-text);
@@ -4176,25 +4176,25 @@ body:has(.bg-dark.is-active) {
 		padding: 0;
 		margin: 0;
 }
-.nav-button[data-v-f3df1ee7] {
+.nav-button[data-v-04874db1] {
 		flex-direction: column;
 		margin: 12px 0.25rem;
 }
-.nav-button .bgl_icon-font[data-v-f3df1ee7] {
+.nav-button .bgl_icon-font[data-v-04874db1] {
 		padding: 2px 0 0 0;
 		margin: 0;
 		height: 30px;
 		width: 30px;
 }
-.nav-links-wrapper[data-v-f3df1ee7] {
+.nav-links-wrapper[data-v-04874db1] {
 		display: flex;
 }
-.bot-buttons-wrapper[data-v-f3df1ee7] {
+.bot-buttons-wrapper[data-v-04874db1] {
 		margin-top: 0;
 		width: auto;
 		display: flex;
 }
-.nav-scroll[data-v-f3df1ee7] {
+.nav-scroll[data-v-04874db1] {
 		overflow-y: visible;
 		width: auto;
 		direction: auto;
@@ -4205,15 +4205,15 @@ body:has(.bg-dark.is-active) {
 		flex-direction: row;
 		margin-inline-end: auto;
 }
-.nav[data-v-f3df1ee7]::-webkit-scrollbar {
+.nav[data-v-04874db1]::-webkit-scrollbar {
 		display: none;
 }
-.nav-expend[data-v-f3df1ee7] {
+.nav-expend[data-v-04874db1] {
 		display: none;
 }
 }
 @media screen and (max-height: 550px) {
-.nav.open .nav-button[data-v-f3df1ee7] {
+.nav.open .nav-button[data-v-04874db1] {
 		margin-top: 4px;
 		margin-bottom: 4px;
 }

package/package.json

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

package/src/components/BglVideo.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
 import { watch } from 'vue'
 
+type Autoplay = boolean | 'visible'
 interface Props {
 	src?: string
-	autoplay?: boolean
+	autoplay?: Autoplay
 	mute?: boolean
 	aspectRatio?: string
 	controls?: boolean
@@ -21,6 +23,7 @@ const aspectRatio = $computed(
 )
 
 const video = $ref<HTMLVideoElement | null>()
+const videoContainer = $ref<HTMLElement | null>()
 
 function play() {
 	video?.play()
@@ -30,6 +33,21 @@ function pause() {
 	video?.pause()
 }
 
+// Setup intersection observer for autoplay="visible"
+if (props.autoplay === 'visible') {
+	const { stop } = useIntersectionObserver(
+		videoContainer,
+		([{ isIntersecting }]) => {
+			if (isIntersecting) {
+				play()
+			} else {
+				pause()
+			}
+		},
+		{ threshold: 0.3 } // Start playing when 30% of the video is visible
+	)
+}
+
 watch(() => props.status, (status) => {
 	if (status === 'play') play()
 	if (status === 'pause') pause()
@@ -69,7 +87,7 @@ const videoUrl = $computed(() => {
 </script>
 
 <template>
-	<div class="bgl_vid" :class="{ vid_empty: !src }">
+	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src }">
 		<iframe
 			v-if="embedType"
 			:src="videoUrl"
@@ -82,7 +100,7 @@ const videoUrl = $computed(() => {
 		<video
 			v-else-if="src"
 			ref="video"
-			:autoplay="autoplay"
+			:autoplay="autoplay === true"
 			:muted="mute"
 			:loop="loop"
 			:style="{ aspectRatio }"

package/src/components/NavBar.vue

@@ -39,7 +39,7 @@ onMounted(calcIsOpen)
 
 <template>
 	<div :class="{ open: isOpen, closed: !isOpen }">
-		<slot name="top" :isOpen />
+		<slot name="top" :isOpen="isOpen" />
 		<div
 			class="nav-expend"
 			role="button"

package/src/components/form/BagelForm.vue

@@ -141,9 +141,9 @@ defineExpose({ form, isDirty, validateForm, checkValidity })
 			<slot
 				name="submit"
 				:submit="handleSubmit"
-				:isDirty
-				:validateForm
-				:formState
+				:isDirty="isDirty"
+				:validateForm="validateForm"
+				:formState="formState"
 			/>
 		</form>