@bagelink/vue 0.0.363 → 0.0.374

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 {
@@ -1630,12 +1646,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 +1685,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;
 	background: var(--input-bg);
 	overflow: auto;
 	max-height: 600px;
+	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 +1775,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 +1785,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 +5140,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.374",
   "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>

package/src/components/form/BglField.vue

@@ -1,58 +1,87 @@
 <template>
-  <component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-    :class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="is" :label="field.label"
-    :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
-    :defaultValue="field.defaultValue" :options="bindAttrs({ options: field.options }, fieldData, modelValue).options"
-    :helptext="field.helptext" @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" />
-  </component>
+	<component
+		:required="field.required"
+		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
+		v-if="vIf"
+		:is="is"
+		:label="field.label"
+		:id="field.id"
+		:placeholder="field.placeholder || field.label"
+		v-model="fieldData"
+		:defaultValue="field.defaultValue"
+		:options="
+			bindAttrs({ options: field.options }, fieldData, modelValue).options
+		"
+		:helptext="field.helptext"
+		@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" />
+	</component>
 </template>
 
 <script lang="ts" setup>
 import {
-  type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+	type Field,
+	bindAttrs,
+	classify,
+	SelectInput,
+	TextInput,
+	ToggleInput,
+	CheckInput,
+	RichText,
 } from '@bagelink/vue';
 
-const props = withDefaults(defineProps<{
-  field: Field
-  modelValue: Record<string, any>
-}>(), {
-  modelValue: () => ({}),
-});
+const props = withDefaults(
+	defineProps<{
+		field: Field;
+		modelValue: Record<string, any>;
+	}>(),
+	{
+		modelValue: () => ({}),
+	}
+);
 
 const is = $computed(() => {
-  if (props.field.$el === 'text') return TextInput;
-  if (props.field.$el === 'select') return SelectInput;
-  if (props.field.$el === 'toggle') return ToggleInput;
-  if (props.field.$el === 'check') return CheckInput;
-  return props.field.$el || 'div';
+	if (props.field.$el === 'text') return TextInput;
+	if (props.field.$el === 'select') return SelectInput;
+	if (props.field.$el === 'toggle') return ToggleInput;
+	if (props.field.$el === 'check') return CheckInput;
+	if (props.field.$el === 'richtext') return RichText;
+	return props.field.$el || 'div';
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const formData = $computed({
-  get: () => props.modelValue,
-  set: (val: any) => emit('update:modelValue', val),
+	get: () => props.modelValue,
+	set: (val: any) => emit('update:modelValue', val),
 });
 
 const fieldData = $computed({
-  set: (val: any) => {
-    if (!props.field.id) return;
-    const data = { ...props.modelValue } || {};
-    data[props.field.id] = val;
-    emit('update:modelValue', data);
-  },
-  get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
+	set: (val: any) => {
+		if (!props.field.id) return;
+		const data = { ...props.modelValue } || {};
+		data[props.field.id] = val;
+		emit('update:modelValue', data);
+	},
+	get: () => {
+		if (props.field.id) return props.modelValue[props.field.id];
+		return props.field.defaultValue || '';
+	},
 });
 
 const vIf = $computed(() => {
-  if (props.field['v-if'] === undefined) return true;
-  if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-  if (typeof props.field['v-if'] === 'string') return true;
-  if (typeof props.field['v-if'] === 'function') {
-    return props.field['v-if']?.(fieldData, formData);
-  }
-  return true;
+	if (props.field['v-if'] === undefined) return true;
+	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+	if (typeof props.field['v-if'] === 'string') return true;
+	if (typeof props.field['v-if'] === 'function') {
+		return props.field['v-if']?.(fieldData, formData);
+	}
+	return true;
 });
 </script>