@bagelink/vue 0.0.363 → 0.0.378

package/dist/style.css

@@ -748,31 +748,43 @@ padding: 0.75rem 0.5rem;
 	color: var(--input-color);
 }
 
+.card_label {
+	font-size: 0.7rem;
+	font-weight: 300;
+	background: rgb(255, 255, 255);
+	padding: 0px 12px;
+	display: block;
+	position: absolute;
+	border-radius: 100px;
+	top: -8px;
+	left: 10px;
+}
 .bgl_card {
-    border-radius: var(--card-border-radius);
-    background: var(--bgl-white);
-    padding: 2rem 2rem;
+	border-radius: var(--card-border-radius);
+	background: var(--bgl-white);
+	padding: 2rem 2rem;
+	position: relative;
 }
 .bgl_card.gray {
-    background: var(--bgl-gray-20);
+	background: var(--bgl-gray-20);
 }
 .bgl_card.border {
-    border: 1px solid var(--border-color);
-    background-color: transparent;
+	border: 1px solid var(--border-color);
+	background-color: transparent;
 }
 .bgl_card.thin {
-    padding: 1rem 1rem;
+	padding: 1rem 1rem;
 }
 .bgl_card.BagelTable {
-    height: 100%;
-    overflow: auto;
-    padding-top: 0;
+	height: 100%;
+	overflow: auto;
+	padding-top: 0;
 }
 .bgl_card.thin .tabs {
-    margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 .bgl_card .bgl_card.tabs-top {
-    padding: 0;
+	padding: 0;
 }
 
 .avatar[data-v-c38bc02a] {
@@ -795,7 +807,7 @@ padding: 0.75rem 0.5rem;
   object-fit: cover;
 }
 
-.alert[data-v-94bfcb05] {
+.alert[data-v-4017e821] {
   padding: var(--btn-padding);
   border-radius: var(--card-border-radius);
   background: var(--bgl-primary-light);
@@ -804,25 +816,25 @@ padding: 0.75rem 0.5rem;
   gap: 1rem;
   position: relative;
 }
-.alert_icon[data-v-94bfcb05] {
+.alert_icon[data-v-4017e821] {
   line-height: 1;
 }
-.alert.warning[data-v-94bfcb05] {
+.alert.warning[data-v-4017e821] {
   background-color: var(--bgl-yellow-light);
 }
-.alert.error[data-v-94bfcb05] {
+.alert.error[data-v-4017e821] {
   background: var(--bgl-red-tint);
 }
-.alert_close[data-v-94bfcb05]{
+.alert_close[data-v-4017e821]{
   display: none;
   position: absolute;
   inset-inline-end: 1.5rem;
   top: 2rem;
 }
-.alert[dismissable="true"] .alert_close[data-v-94bfcb05]{
+.alert[dismissable="true"] .alert_close[data-v-4017e821]{
 display: block;
 }
-.alert[dismissable="true"] p[data-v-94bfcb05]{
+.alert[dismissable="true"] p[data-v-4017e821]{
   width: calc(100% - 5rem);
 }
 
@@ -955,7 +967,7 @@ display: block;
 }
 
 .del-top {
-  transform: translateY(-2.6rem);
+	transform: translateY(-2.6rem);
 }
 
 :root {
@@ -1033,10 +1045,10 @@ 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-70fd5ae7] {
+.selectinput[data-v-ab376074] {
 	width: 100%;
 }
-.selectinput-option[data-v-70fd5ae7] {
+.selectinput-option[data-v-ab376074] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1047,14 +1059,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-70fd5ae7] {
+.selectinput-options[data-v-ab376074] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-70fd5ae7]:hover {
+.selectinput-option[data-v-ab376074]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-70fd5ae7] {
+.isEmpty p[data-v-ab376074] {
 	opacity: 0.3;
 }
 
@@ -1087,7 +1099,7 @@ display: block;
 }
 .v-popper--theme-dropdown .v-popper__inner {
 	border: none;
-	background: transparent;
+	/* background: transparent; if anyone is changing this please talk to me first*/
 	border-radius: var(--card-border-radius);
 	color: var(--input-color);
 }
@@ -1241,64 +1253,68 @@ display: block;
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-cd4c27ad] {
+.bagel-input textarea[data-v-df718b64] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-cd4c27ad] {
+.bagel-input.text-input textarea[data-v-df718b64] {
 	resize: none;
 }
-.code textarea[data-v-cd4c27ad] {
+.code textarea[data-v-df718b64] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.bagel-input.toggleEdit[data-v-cd4c27ad]:hover {
+.code textarea[data-v-df718b64]::placeholder{
+	color: var(--bgl-white) !important;
+	opacity: 0.3;
+}
+.bagel-input.toggleEdit[data-v-df718b64]:hover {
 	background-color: var(--input-bg);
 }
-.bagel-input.small[data-v-cd4c27ad] {
+.bagel-input.small[data-v-df718b64] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-cd4c27ad] {
+.bagel-input.dense label[data-v-df718b64] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input label[data-v-cd4c27ad] {
+.bagel-input label[data-v-df718b64] {
 	font-size: var(--label-font-size);
 }
-.toggleEditBtn[data-v-cd4c27ad] {
+.toggleEditBtn[data-v-df718b64] {
 	position: absolute;
 	right: -24px;
 	top: 4;
 	opacity: 0;
 }
-.textInputIconWrap[data-v-cd4c27ad] {
+.textInputIconWrap[data-v-df718b64] {
 	position: relative;
 }
-.textInputIconWrap .bgl_icon-font[data-v-cd4c27ad] {
+.textInputIconWrap .bgl_icon-font[data-v-df718b64] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-cd4c27ad] {
+.txtInputIconStart .iconStart[data-v-df718b64] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-cd4c27ad] {
+.txtInputIconStart textarea[data-v-df718b64] {
 	padding-inline-start: 2rem;
 }
-.bagel-input:hover .toggleEditBtn[data-v-cd4c27ad],
-.bagel-input.editMode .toggleEditBtn[data-v-cd4c27ad] {
+.bagel-input:hover .toggleEditBtn[data-v-df718b64],
+.bagel-input.editMode .toggleEditBtn[data-v-df718b64] {
 	opacity: 1;
 }
-.bagel-input.small textarea[data-v-cd4c27ad] {
+.bagel-input.small textarea[data-v-df718b64] {
 	height: 30px;
 }
 
@@ -1360,7 +1376,7 @@ display: block;
 	color: var(--bgl-primary);
 	border: 1px solid var(--bgl-primary);
 }
-.time-wrap input[type="radio"]:checked+label {
+.time-wrap input[type='radio']:checked + label {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
@@ -1404,7 +1420,7 @@ display: block;
 	padding: 10px 0 0;
 	margin-bottom: -10px;
 }
-.dp__calendar_row>div:last-child {
+.dp__calendar_row > div:last-child {
 	pointer-events: none;
 }
 .dp__outer_menu_wrap.dp--menu-wrapper {
@@ -1461,7 +1477,7 @@ display: block;
   color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-1be8d7b1] {
+.bagel-input .fileUploadWrap[data-v-3bb24b0c] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1471,45 +1487,46 @@ display: block;
 	height: 132px;
 	font-size: var(--input-font-size);
 }
-.previewName[data-v-1be8d7b1] {
+.previewName[data-v-3bb24b0c] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
 	display: grid;
 	grid-template-columns: 1fr 22px;
 	align-items: center;
+	padding-inline: 14px;
 }
-.previewName p[data-v-1be8d7b1] {
+.previewName p[data-v-3bb24b0c] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-1be8d7b1] {
+.imagePreviewWrap[data-v-3bb24b0c] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	height: 90px;
 	padding: 5px;
 }
-img.preview[data-v-1be8d7b1] {
+img.preview[data-v-3bb24b0c] {
 	height: 80px;
 	border-radius: var(--input-border-radius);
 	object-fit: contain;
 }
-.fileUploadWrap.dragover[data-v-1be8d7b1],
-.fileUploadWrap[data-v-1be8d7b1]:hover {
+.fileUploadWrap.dragover[data-v-3bb24b0c],
+.fileUploadWrap[data-v-3bb24b0c]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-1be8d7b1] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-1be8d7b1]:after {
-	content: "Drop files here or click to upload";
+.bagel-input .fileUploadWrap.fileDropZone[data-v-3bb24b0c]:after {
+	content: 'Drop files here or click to upload';
 }
-.pie[data-v-1be8d7b1] {
+.pie[data-v-3bb24b0c] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1517,40 +1534,44 @@ img.preview[data-v-1be8d7b1] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-1be8d7b1]:before {
-	content: "";
+.pie[data-v-3bb24b0c]:before {
+	content: '';
 	position: absolute;
 	border-radius: 50%;
 	inset: 0;
 	transition: all 0.2s ease-in-out;
 	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
-	-webkit-mask: radial-gradient(farthest-side,
-			#0000 calc(99% - var(--b)),
-			#000 calc(100% - var(--b)));
-	mask: radial-gradient(farthest-side,
-			#0000 calc(99% - var(--b)),
-			#000 calc(100% - var(--b)));
-}
-.pie .success[data-v-1be8d7b1] {
+	-webkit-mask: radial-gradient(
+		farthest-side,
+		#0000 calc(99% - var(--b)),
+		#000 calc(100% - var(--b))
+	);
+	mask: radial-gradient(
+		farthest-side,
+		#0000 calc(99% - var(--b)),
+		#000 calc(100% - var(--b))
+	);
+}
+.pie .success[data-v-3bb24b0c] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-1be8d7b1] {
+.pie .progress[data-v-3bb24b0c] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-1be8d7b1] {
+.pie.complete .progress[data-v-3bb24b0c] {
 	display: none;
 }
-.pie.complete .success[data-v-1be8d7b1] {
+.pie.complete .success[data-v-3bb24b0c] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-1be8d7b1]:before {
+.pie.complete[data-v-3bb24b0c]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-1be8d7b1] {
+.pie.complete[data-v-3bb24b0c] {
 	color: var(--bgl-green);
 }
 
@@ -1630,12 +1651,16 @@ img.preview[data-v-1be8d7b1] {
 	padding: 0 1rem;
 }
 .tiptap h1,
-.tiptap h2,
+.tiptap h2 {
+	line-height: 1;
+	margin-top: 0;
+}
 .tiptap h3,
 .tiptap h4,
 .tiptap h5,
 .tiptap h6 {
 	line-height: 1.1;
+	margin-top: 0;
 }
 .tiptap code {
 	background-color: rgba(97, 97, 97, 0.1);
@@ -1665,13 +1690,30 @@ img.preview[data-v-1be8d7b1] {
 .tiptap hr {
 	border: none;
 	border-top: 2px solid rgba(13, 13, 13, 0.1);
-	margin: 2rem 0;
+	margin: 1rem 0;
 }
 .tiptap {
-	min-height: 500px;
+	min-height: 200px;
 	background: var(--input-bg);
 	overflow: auto;
-	max-height: 600px;
+	max-height: 500px;
+	padding: 0.7rem;
+	color: var(--input-color);
+	border-radius: var(--input-border-radius);
+	font-size: var(--input-font-size);
+	line-height: 1.5;
+}
+.tiptap.ProseMirror-focused {
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
+}
+.RichText {
+	margin-bottom: 0.5rem;
+}
+.RichText-tools {
+	background: var(--input-bg);
+	margin-bottom: 0.125rem;
+	border-radius: var(--input-border-radius);
 }
 
 .chart-line {
@@ -1738,7 +1780,7 @@ img.preview[data-v-1be8d7b1] {
   color: var(--bgl-primary);
 }
 
-.bgl_sidebar[data-v-24905642] {
+.bgl_sidebar[data-v-65bec778] {
   background-color: var(--bgl-primary);
   color: var(--bgl-white);
   overflow: hidden;
@@ -1748,22 +1790,37 @@ img.preview[data-v-1be8d7b1] {
   padding: 0.5rem;
   overflow-y: auto;
 }
-.wideNav .toggleNav[data-v-24905642] {
+.toggleNav[data-v-65bec778]{
+  height: 22px !important;
+  width: 22px !important;
+  opacity: 0.4;
+  transition: var(--bgl-transition);
+}
+.toggleNav[data-v-65bec778]:hover{
+  opacity: 1;
+}
+.wideNav .toggleNav[data-v-65bec778] {
   transform: rotate(180deg);
 }
-.wideNav .nav-button[data-v-24905642] {
+.wideNav .nav-button[data-v-65bec778] {
   padding-inline-start: 1rem !important;
   width: 100%;
 }
-.nav-button.bgl_btn-icon[data-v-24905642] {
+[dir="rtl"] .toggleNav[data-v-65bec778] {
+  transform: rotate(180deg);
+}
+[dir="rtl"] .wideNav .toggleNav[data-v-65bec778] {
+  transform: rotate(0deg);
+}
+.nav-button.bgl_btn-icon[data-v-65bec778] {
   border-radius: var(--btn-border-radius) !important;
 }
-.nav-button p[data-v-24905642] {
+.nav-button p[data-v-65bec778] {
   transition: var(--nav-tran);
-  animation: fade-24905642 2s;
+  animation: fade-65bec778 2s;
   animation-duration: 900ms;
 }
-@keyframes fade-24905642 {
+@keyframes fade-65bec778 {
 0% {
     opacity: 0;
     transform: translateX(-20px);
@@ -5088,7 +5145,7 @@ select {
     text-decoration: none;
 }
 .bgl_icon-font {
-    font-family: "Material Symbols Outlined", serif;
+    font-family: "Material Symbols Outlined", serif !important;
 }
 .nowrap {
     white-space: nowrap;

package/dist/utils/BagelFormUtils.d.ts

@@ -22,6 +22,16 @@ interface NumFieldOptions extends InputOptions {
     min?: number;
     step?: number;
 }
+type RichTextOptions = InputOptions;
+export declare function richText(id: string, label?: string, options?: RichTextOptions): {
+    $el: string;
+    class: string | undefined;
+    required: boolean | undefined;
+    id: string;
+    label: string | undefined;
+    placeholder: string | undefined;
+    attrs: {};
+};
 export declare function txtField(id: string, label?: string, options?: TextInputOptions): Field;
 export declare function slctField(id: string, label?: string, options?: Option[] | (() => Option[]), config?: SlctInputOptions): Field;
 export declare function numField(id: string, label?: string, options?: NumFieldOptions): Field;

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;CACjB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;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,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,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,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;CACjB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB;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,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"}

package/package.json

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

package/src/components/Alert.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="alert" :class="[type]" v-if="!isDismissed" :dismissable="dismissable" >
 		<Icon class="alert_icon" :icon="type" :size="2" :color="color[type]"/>
-		<p>
+		<p class="m-0">
 			{{ message }}
 		</p>
 		<Btn  @click="isDismissed = true" flat thin class="alert_close" icon="close"/>

package/src/components/Card.vue

@@ -1,57 +1,85 @@
 <template>
 	<div
-		class="bgl_card" :class="{
-			thin, border: outline,
+		class="bgl_card"
+		:class="{
+			thin,
+			'border': outline,
 			'h-100': h100,
 			[bg || '']: bg,
 			'overflow-x': overflowX,
-			'overflow-y': overflowY
-		}"
-	>
+			'overflow-y': overflowY,
+		}">
+		<span class="card_label">
+			{{ label }}
+		</span>
 		<slot />
 	</div>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  thin?: boolean;
-  outline?: boolean;
-  h100?: boolean;
-  overflowX?: boolean;
-  overflowY?: boolean;
-  bg?: 'gray' | 'light' | 'dark' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'white' | 'transparent';
+	label?: string;
+	thin?: boolean;
+	outline?: boolean;
+	h100?: boolean;
+	overflowX?: boolean;
+	overflowY?: boolean;
+	bg?:
+		| 'gray'
+		| 'light'
+		| 'dark'
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'danger'
+		| 'warning'
+		| 'info'
+		| 'white'
+		| 'transparent';
 }>();
 </script>
 
 <style>
+.card_label {
+	font-size: 0.7rem;
+	font-weight: 300;
+	background: rgb(255, 255, 255);
+	padding: 0px 12px;
+	display: block;
+	position: absolute;
+	border-radius: 100px;
+	top: -8px;
+	left: 10px;
+}
 .bgl_card {
-    border-radius: var(--card-border-radius);
-    background: var(--bgl-white);
-    padding: 2rem 2rem;
+	border-radius: var(--card-border-radius);
+	background: var(--bgl-white);
+	padding: 2rem 2rem;
+	position: relative;
 }
 
 .bgl_card.gray {
-    background: var(--bgl-gray-20);
+	background: var(--bgl-gray-20);
 }
 
 .bgl_card.border {
-    border: 1px solid var(--border-color);
-    background-color: transparent;
+	border: 1px solid var(--border-color);
+	background-color: transparent;
 }
 
 .bgl_card.thin {
-    padding: 1rem 1rem;
+	padding: 1rem 1rem;
 }
 .bgl_card.BagelTable {
-    height: 100%;
-    overflow: auto;
-    padding-top: 0;
+	height: 100%;
+	overflow: auto;
+	padding-top: 0;
 }
 .bgl_card.thin .tabs {
-    margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 
 .bgl_card .bgl_card.tabs-top {
-    padding: 0;
+	padding: 0;
 }
 </style>