@bagelink/vue 0.0.431 → 0.0.437

package/dist/style.css

@@ -376,124 +376,122 @@ a[data-v-d09a83c5] {
   filter: brightness(80%);
 }
 .bg-dark {
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.7);
-	z-index: 999;
-	pointer-events: none;
-	opacity: 0;
-	transition: all ease-in-out 0.3s;
-	max-height: 100vh;
-	overflow: auto;
-	margin: 0 auto;
-	width: 100%;
-	display: grid;
-	align-items: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 999;
+    pointer-events: none;
+    opacity: 0;
+    transition: all ease-in-out 0.3s;
+    max-height: 100vh;
+    overflow: scroll;
+    margin: 0 auto;
+    width: 100%;
+    display: grid;
+    align-items: center;
+    overflow-x: hidden;
 }
 
+
 .bg-lignt {
-	background-color: var(--bgl-white);
+    background-color: var(--bgl-white);
 }
 
 .modal {
-	width: 96%;
-	max-width: 720px;
-	/* transform: scale(0.5); */
-	/* opacity: 0; */
-	transition: all ease-in-out 0.18s;
-	margin-left: auto;
-	margin-right: auto;
-	height: fit-content;
+    width: 96%;
+    max-width: 720px;
+    /* transform: scale(0.5); */
+    /* opacity: 0; */
+    transition: all ease-in-out 0.18s;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
 }
 
 .small-modal .modal {
-	max-width: 300px;
-	text-align: center;
+    max-width: 300px;
+    text-align: center;
 }
 
 .tool-bar {
-	margin: -2rem -1rem 1rem;
-	display: flex;
-	justify-content: space-between;
-	position: -webkit-sticky;
-	position: sticky;
-	padding-top: 1rem;
-	top: 0rem;
-	z-index: 3;
-	background: var(--bgl-white);
+    margin: -2rem -1rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    position: -webkit-sticky;
+    position: sticky;
+    padding-top: 1rem;
+    top: 0rem;
+    z-index: 3;
+    background: var(--bgl-white);
 }
 
 .modal-size {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .is-side .modal {
-	inset-inline-end: -1720px;
-	transform: scale(1);
-	opacity: 1;
-	/* position: fixed; */
-	/* top: 20px; */
-	/* bottom: 20px; */
-	max-width: 600px;
-	width: 90%;
-	margin-top: 20px;
-	margin-bottom: 20px;
-	margin-inline-start: auto;
-	margin-inline-end: 20px;
-	min-height: calc(100vh - 40px);
-	transform: translateX(100%);
+    inset-inline-end: -1720px;
+    transform: scale(1);
+    opacity: 1;
+    max-width: 600px;
+    width: 90%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-inline-start: auto;
+    margin-inline-end: 20px;
+    min-height: calc(100vh - 40px);
+    transform: translateX(100%);
 }
 
 .is-active .modal {
-	transform: scale(1);
-	opacity: 1;
-	box-shadow: 6px 6px 20px 20px #0000001c;
+    transform: scale(1);
+    opacity: 1;
+    box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-	transform: scale(1);
-	border: 1px solid var(--border-color);
+    transform: scale(1);
+    border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-	box-shadow: none;
+    box-shadow: none;
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 0px;
-	transform: translateX(0%);
+    inset-inline-end: 0px;
+    transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-	opacity: 1;
-	pointer-events: all;
+    opacity: 1;
+    pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-	opacity: 1;
-	align-items: stretch;
+    opacity: 1;
+    align-items: stretch;
 }
 
 .is-side.is-active .modal {
-	pointer-events: all;
+    pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-	.tool-bar {
-		margin: -1rem 0rem 1rem;
-		padding-bottom: 1rem;
-		align-items: center;
-	}
+    .tool-bar {
+        margin: -1rem 0rem 1rem;
+        padding-bottom: 1rem;
+        align-items: center;
+    }
 
-	.is-active.is-side .modal {
-		margin-inline-end: 5%;
-		margin-inline-start: 5%;
-	}
+    .is-active.is-side .modal {
+        margin-inline-end: 5%;
+        margin-inline-start: 5%;
+    }
 }
-
 .modal-title {
 	text-align: center;
 	font-weight: 600;
@@ -1072,64 +1070,64 @@ display: block;
 }
 .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-9b751fe0] {
-  width: 100%;
+.selectinput[data-v-39ae2ac8] {
+	width: 100%;
 }
-.selectinput-option[data-v-9b751fe0] {
-  padding: 6px 12px;
-  cursor: pointer;
-  border-radius: 5px;
-  transition: all 0.2s;
-  display: grid;
-  grid-template-columns: 10px 1fr;
-  justify-content: space-between;
-  width: 100%;
-  font-size: var(--input-font-size);
+.selectinput-option[data-v-39ae2ac8] {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns: 10px 1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-9b751fe0] {
-  max-height: 300px;
-  overflow-y: auto;
+.selectinput-options[data-v-39ae2ac8] {
+	max-height: 300px;
+	overflow-y: auto;
 }
-.selectinput-option[data-v-9b751fe0]:hover {
-  background: var(--bgl-gray-20);
+.selectinput-option[data-v-39ae2ac8]:hover {
+	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-9b751fe0] {
-  opacity: 0.3;
+.isEmpty p[data-v-39ae2ac8] {
+	opacity: 0.3;
 }
 
 .bagel-input label {
-  font-size: var(--label-font-size);
+	font-size: var(--label-font-size);
 }
 .selectinput-btn {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--input-height);
-  border-radius: var(--input-border-radius);
-  border: none;
-  background: var(--input-bg);
-  padding: 0.7rem;
-  color: var(--input-color);
-  width: 100%;
-  font-family: inherit;
-  font-size: var(--input-font-size);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: var(--input-height);
+	border-radius: var(--input-border-radius);
+	border: none;
+	background: var(--input-bg);
+	padding: 0.7rem;
+	color: var(--input-color);
+	width: 100%;
+	font-family: inherit;
+	font-size: var(--input-font-size);
 }
 .selectinput-btn:disabled {
-  color: var(--input-disabled-color);
-  background-color: transparent;
+	color: var(--input-disabled-color);
+	background-color: transparent;
 }
 .selectinput-btn:focus {
-  outline: none;
-  box-shadow: inset 0 0 10px #00000012;
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
 }
 .v-popper__arrow-container {
-  display: none;
+	display: none;
 }
 .v-popper--theme-dropdown .v-popper__inner {
-  border: none;
-  /* background: transparent; if anyone is changing this please talk to me first*/
-  border-radius: var(--card-border-radius);
-  color: var(--input-color);
+	border: none;
+	/* background: transparent; if anyone is changing this please talk to me first*/
+	border-radius: var(--card-border-radius);
+	color: var(--input-color);
 }
 
 .table-side-scroll[data-v-cdacf10e] {
@@ -1480,7 +1478,7 @@ display: block;
 }
 }
 
-.radio-pill label[data-v-ad2e40f3] {
+.radio-pill label[data-v-880c5069] {
 	color: var(--bgl-primary);
 	white-space: nowrap;
 	border-radius: calc(var(--btn-border-radius) * 2);
@@ -1494,13 +1492,13 @@ display: block;
 	background: var(--bgl-white);
 	user-select: none;
 }
-.radio-pill label[data-v-ad2e40f3]:hover {
+.radio-pill label[data-v-880c5069]:hover {
 	filter: var(--bgl-hover-filter);
 }
-.radio-pill input[data-v-ad2e40f3] {
+.radio-pill input[data-v-880c5069] {
 	display: none;
 }
-.radio-pill input:checked ~ label[data-v-ad2e40f3] {
+.radio-pill input:checked ~ label[data-v-880c5069] {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
@@ -5589,8 +5587,7 @@ select {
     height: 0.5rem;
 }
 ::-webkit-scrollbar-track {
-    /* border-left: 1px solid var(--bgl-gray-light); */
-    /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
+    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
 }
 ::-webkit-scrollbar-thumb {
     background-color: var(--bgl-gray);
@@ -6295,19 +6292,63 @@ select {
     --transition: all 0.2s cubic-bezier(0.1, 0.5, 0.33, 1);
     --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
 }
-body {
-    max-width: 100vw;
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-}
 .grid>* {
     min-height: 0;
 }
 * {
     box-sizing: border-box;
 }
-@media (min-width: 992px) {}
+html {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    height: 100%;
+    background-attachment: scroll;
+}
+body {
+    margin: 0;
+    min-height: 100%;
+    background-color: var(--bgl-bg);
+    font-family: var(--bgl-font);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.65;
+    width: auto;
+    height: auto;
+}
+a {
+    background-color: transparent;
+    cursor: pointer;
+    display: inline-block;
+    color: inherit;
+}
+a:active,
+a:hover {
+    outline: 0;
+}
+b,
+strong {
+    font-weight: bold;
+}
+hr {
+    box-sizing: content-box;
+}
+img,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+}
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
 @media screen and (max-width: 910px) {
 
     body {

package/dist/utils/BagelFormUtils.d.ts

@@ -10,6 +10,7 @@ interface InputOptions {
     class?: string;
     defaultValue?: string;
     disabled?: boolean;
+    helptext?: string;
 }
 interface TextInputOptions extends InputOptions {
     type?: 'text' | 'tel' | 'email';

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAEvG,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAU7E;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAUtF;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAY7H;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAQvF;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAUrF;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAE7C,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,KAAK,eAAe,GAAG,YAAY,CAAC;AAEpC,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAcP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAUP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}

package/package.json

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

package/src/components/form/BglField.vue

@@ -14,13 +14,15 @@
 			bindAttrs({ options: field.options }, fieldData, modelValue).options
 		"
 		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)">
+		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
+	>
 		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
 		<BglField
 			v-model="formData"
 			v-for="(child, ii) in field.children"
 			:key="child.id || ii"
-			:field="child" />
+			:field="child"
+		/>
 	</component>
 </template>
 
@@ -43,7 +45,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: () => ({}),
-	}
+	},
 );
 
 const is = $computed(() => {

package/src/components/form/BglForm.vue

@@ -4,19 +4,22 @@
 			v-for="(field, i) in schema"
 			:key="field.id || `${i}p`"
 			:field="field"
-			v-model="data" />
+			v-model="data"
+		/>
 	</template>
 	<form
 		v-else-if="!slots.success || status !== 'success'"
 		ref="form"
-		@submit.prevent="runSubmit">
+		@submit.prevent="runSubmit"
+	>
 		<Title tag="h4" :label="label" v-if="label" />
 		<BglField
 			v-for="(field, i) in schema"
 			:key="field.id || `${i}p`"
 			:field="field"
-			v-model="data" />
-		<slot name="submit" />
+			v-model="data"
+		/>
+		<slot name="submit" :submit="runSubmit" :isDirty />
 	</form>
 	<slot v-if="status === 'success'" name="success" />
 	<slot v-if="status === 'error'" name="error" />
@@ -44,7 +47,7 @@ const props = withDefaults(
 	}>(),
 	{
 		modelValue: () => ({}),
-	}
+	},
 );
 
 const instAt = new Date();
@@ -61,7 +64,7 @@ let data = $computed({
 		formData = val;
 		emit('update:modelValue', val);
 	},
-	get: () => props.modelValue || formData,
+	get: () => formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -79,14 +82,15 @@ watch(
 			clearForm();
 		}
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 const runSubmit = () => {
 	const isValid = validateForm();
 	if (!isValid) return;
 	// props.onSubmit?.(data);
-	emit('submit', data);
+	emit('submit', { ...formData });
+	isDirty = false;
 };
 
 const i18nT = (val: string) => val;
@@ -105,7 +109,7 @@ const deleteItem = () => {
 				{ value: 'Cancel', color: 'gray' },
 			],
 		},
-		{ default: i18nT('form.deleteMessage') }
+		{ default: i18nT('form.deleteMessage') },
 	);
 };
 

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

@@ -1,8 +1,6 @@
 <template>
 	<div class="bagel-input">
-		<label class="pb-025">
-			{{ label }}
-		</label>
+		<label class="pb-025"> {{ label }}</label>
 		<div class="flex gap-05 flex-wrap">
 			<div class="radio-pill" v-for="(option, index) in options" :key="index">
 				<input
@@ -10,7 +8,7 @@
 					:id="`${id}-${getValue(option)}`"
 					:name="id"
 					:value="getValue(option)"
-					:checked="selectedValue === getValue(option)"
+					:checked="selectedValue == getValue(option)"
 					@change="handleSelect"
 				/>
 				<label :for="`${id}-${getValue(option)}`">{{ getLabel(option) }}</label>
@@ -56,13 +54,14 @@ const props = withDefaults(
 	},
 );
 
-let selectedValue = $ref('');
+let selectedValue = $ref(props.modelValue);
 
 function handleSelect(e: Event) {
 	const newVal = (e.target as any)?.value;
 	emits('update:modelValue', newVal);
 	selectedValue = newVal;
 }
+
 watch(
 	() => props.modelValue,
 	(newVal, oldVal) => {