@bagelink/vue 0.0.200 → 0.0.204

package/dist/style.css

@@ -306,16 +306,16 @@
 }
 }
 
-.loading[data-v-718ff632] {
+.loading[data-v-845b751e] {
 	border: 1px solid var(--bgl-white);
 	border-bottom: 2px solid var(--bgl-white);
-	animation: spin-718ff632 1s linear infinite;
+	animation: spin-845b751e 1s linear infinite;
 	border-radius: 100px;
 	width: 1rem;
 	height: 1rem;
 	margin: auto;
 }
-@keyframes spin-718ff632 {
+@keyframes spin-845b751e {
 0% {
 		transform: rotate(0deg);
 }
@@ -323,7 +323,7 @@
 		transform: rotate(360deg);
 }
 }
-.btn-icon[data-v-718ff632] {
+.btn-icon[data-v-845b751e] {
 	height: var(--btn-height);
 	width: var(--btn-height);
 	border-radius: 100%;
@@ -333,97 +333,97 @@
 	flex-shrink: 0;
 	transition: var(--bgl-transition);
 }
-.btn[data-v-718ff632] {
+.btn[data-v-845b751e] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
 	text-decoration: none;
 }
-.btn[disabled="true"][data-v-718ff632] {
+.btn[disabled="true"][data-v-845b751e] {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
-.btn-flex[data-v-718ff632] {
+.btn-flex[data-v-845b751e] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	justify-content: center;
 }
-.btn .icon-font[data-v-718ff632] {
+.btn .icon-font[data-v-845b751e] {
 	font-size: calc(var(--input-font-size) * 1.3);
 }
-.btn[data-v-718ff632],
-.btn-icon[data-v-718ff632] {
-	background-color: var(--e0356e0a);
-	color: var(--458dc816);
+.btn[data-v-845b751e],
+.btn-icon[data-v-845b751e] {
+	background-color: var(--0bd3bef7);
+	color: var(--1b1b6b12);
 }
-.btn[data-v-718ff632]:hover,
-.btn-icon[data-v-718ff632]:hover {
+.btn[data-v-845b751e]:hover,
+.btn-icon[data-v-845b751e]:hover {
 	filter: var(--bgl-hover-filter);
 }
-.btn[data-v-718ff632]:active,
-.btn-icon[data-v-718ff632]:active {
+.btn[data-v-845b751e]:active,
+.btn-icon[data-v-845b751e]:active {
 	filter: var(--bgl-active-filter);
 }
-.btn.flatBtn[data-v-718ff632] {
+.btn.flatBtn[data-v-845b751e] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
-.btn-icon.flatBtn[data-v-718ff632] {
+.btn-icon.flatBtn[data-v-845b751e] {
 	background: transparent;
 }
-.btn.flatBtn[data-v-718ff632]:hover,
-.btn-icon.flatBtn[data-v-718ff632]:hover {
+.btn.flatBtn[data-v-845b751e]:hover,
+.btn-icon.flatBtn[data-v-845b751e]:hover {
 	filter: var(--bgl-active-filter);
 }
-.btn.flatBtn[data-v-718ff632]:active,
-.btn-icon.flatBtn[data-v-718ff632]:active {
+.btn.flatBtn[data-v-845b751e]:active,
+.btn-icon.flatBtn[data-v-845b751e]:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
-.btn.flatBtn.red[data-v-718ff632],
-.btn-icon.flatBtn.red[data-v-718ff632] {
+.btn.flatBtn.red[data-v-845b751e],
+.btn-icon.flatBtn.red[data-v-845b751e] {
 	color: var(--bgl-red);
 }
-.btn.flatBtn.light[data-v-718ff632],
-.btn-icon.flatBtn.light[data-v-718ff632] {
+.btn.flatBtn.light[data-v-845b751e],
+.btn-icon.flatBtn.light[data-v-845b751e] {
 	color: var(--bgl-primary-tint);
 }
-.btn.flatBtn.black[data-v-718ff632],
-.btn-icon.flatBtn.black[data-v-718ff632] {
+.btn.flatBtn.black[data-v-845b751e],
+.btn-icon.flatBtn.black[data-v-845b751e] {
 	color: var(--bgl-black);
 }
-.btn.flatBtn.gray[data-v-718ff632],
-.btn-icon.flatBtn.gray[data-v-718ff632] {
+.btn.flatBtn.gray[data-v-845b751e],
+.btn-icon.flatBtn.gray[data-v-845b751e] {
 	color: var(--bgl-gray);
 }
-.btn.thin[data-v-718ff632] {
+.btn.thin[data-v-845b751e] {
 	padding-left: calc(var(--btn-padding) / 2);
 	padding-right: calc(var(--btn-padding) / 2);
 }
-.btn.round[data-v-718ff632] {
+.btn.round[data-v-845b751e] {
 	border-radius: calc(var(--btn-border-radius) * 2);
 }
-.btn-icon.thin[data-v-718ff632] {
+.btn-icon.thin[data-v-845b751e] {
 	height: calc(var(--btn-height) / 1.5);
 	width: calc(var(--btn-height) / 1.5);
 	line-height: 1;
 }
-[dir="rtl"] .icon-font[data-v-718ff632] {
+[dir="rtl"] .icon-font[data-v-845b751e] {
 	transform: rotateY(180deg);
 }
-.btn-border[data-v-718ff632] {
-	outline: 1px solid var(--e0356e0a);
-	color: var(--e0356e0a);
+.btn-border[data-v-845b751e] {
+	outline: 1px solid var(--0bd3bef7);
+	color: var(--0bd3bef7);
 	background: transparent;
 }
-.btn-border[data-v-718ff632]:hover {
+.btn-border[data-v-845b751e]:hover {
 	color: var(--bgl-white);
-	background: var(--e0356e0a);
+	background: var(--0bd3bef7);
 	filter: brightness(100%);
 }
-.btn-border[data-v-718ff632]:active {
+.btn-border[data-v-845b751e]:active {
 	filter: brightness(80%);
 }
 .bg-dark {
@@ -1705,6 +1705,10 @@ input:checked + .slider[data-v-d0543d4b]:before {
 }
 }
 
+.del-top {
+	transform: translateY(-2.6rem);
+}
+
 .no-edit[data-v-0dacba34] {
   pointer-events: none;
 }
@@ -1940,11 +1944,11 @@ input[type='email'][data-v-ed81a514] {
 	margin-bottom: 2px;
 }
 
-.custom-select[data-v-028ea61b] {
+.custom-select[data-v-f2c5b9ca] {
 	position: relative;
 	font-size: var(--input-font-size);
 }
-.custom-select .input[data-v-028ea61b] {
+.custom-select .input[data-v-f2c5b9ca] {
 	width: 100%;
 	cursor: pointer;
 	background: var(--input-bg);
@@ -1960,7 +1964,7 @@ input[type='email'][data-v-ed81a514] {
 	justify-content: center;
 	margin-bottom: 2px;
 }
-.custom-select .input[data-v-028ea61b]:after {
+.custom-select .input[data-v-f2c5b9ca]:after {
 	content: 'keyboard_arrow_down';
 	font-family: 'Material Symbols Outlined', serif;
 	position: absolute;
@@ -1969,24 +1973,24 @@ input[type='email'][data-v-ed81a514] {
 	right: calc(var(--input-height) / 4);
 	height: 100%;
 }
-[dir='rtl'] .custom-select .input[data-v-028ea61b]:after {
+[dir='rtl'] .custom-select .input[data-v-f2c5b9ca]:after {
 	right: unset;
 	left: calc(var(--input-font-size) / 2);
 }
-[dir='rtl'] .custom-select-drop[data-v-028ea61b] {
-	inset-inline-end: var(--1c3856b2);
+[dir='rtl'] .custom-select-drop[data-v-f2c5b9ca] {
+	inset-inline-end: var(--530a7ef0);
 	inset-inline-start: unset;
 }
-.custom-select-drop[data-v-028ea61b] {
+.custom-select-drop[data-v-f2c5b9ca] {
 	position: fixed;
 
 	cursor: pointer;
 	font-size: 12px;
-	top: var(--62aaf5e4);
-	inset-inline-start: var(--1c3856b2);
+	top: var(--7d0177a2);
+	inset-inline-start: var(--530a7ef0);
 	box-sizing: border-box;
 	min-width: 220px;
-	width: var(--6b6f4c7b);
+	width: var(--0ee22bfd);
 	background: var(--bgl-white);
 	box-shadow: 0 0 10px 0 var(--bgl-shadow);
 	border-radius: 10px;
@@ -1997,23 +2001,23 @@ input[type='email'][data-v-ed81a514] {
 	max-height: 0;
 	/*transition: var(--bgl-transition);*/
 }
-.open-select.custom-select-drop[data-v-028ea61b] {
+.open-select.custom-select-drop[data-v-f2c5b9ca] {
 	opacity: 1;
 	max-height: 150px;
 	pointer-events: all;
 	/*transition: var(--bgl-transition);*/
 }
-.custom-select-drop>*[data-v-028ea61b] {
+.custom-select-drop>*[data-v-f2c5b9ca] {
 	/*transition: var(--bgl-transition); */
 	padding: 0.5rem 0.75rem;
 }
-.custom-select-drop>*[data-v-028ea61b]:hover {
+.custom-select-drop>*[data-v-f2c5b9ca]:hover {
 	background: var(--bgl-blue-light);
 }
-.custom-select-drop>*[data-v-028ea61b]:active {
+.custom-select-drop>*[data-v-f2c5b9ca]:active {
 	filter: var(--bgl-hover-filter);
 }
-.bagel-input label[data-v-028ea61b] {
+.bagel-input label[data-v-f2c5b9ca] {
 	margin-bottom: 0;
 }
 
@@ -2173,47 +2177,55 @@ input[type='email'][data-v-ed81a514] {
 	/* width: auto; */
 }
 
-.bagel-input input[disabled][data-v-1502ca60] {
-	background: none;
+.bagel-input textarea[data-v-9f24ba22]{
+  min-height: unset;
+}
+.bagel-input.text-input textarea[data-v-9f24ba22]{
+  resize: none;
 }
-.bagel-input.toggleEdit[data-v-1502ca60]:hover {
+.code textarea[data-v-9f24ba22]{
+  font-family: 'Inconsolata', monospace;
+  background: var(--bgl-black) !important;
+  color: var(--bgl-white) !important;
+}
+.bagel-input.toggleEdit[data-v-9f24ba22]:hover {
 	background-color: var(--input-bg);
 }
-.bagel-input.small[data-v-1502ca60] {
+.bagel-input.small[data-v-9f24ba22] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.toggleEditBtn[data-v-1502ca60] {
+.toggleEditBtn[data-v-9f24ba22] {
 	position: absolute;
 	right: -24px;
 	top: 4;
 	opacity: 0;
 }
-.textInputIconWrap[data-v-1502ca60] {
+.textInputIconWrap[data-v-9f24ba22] {
 	position: relative;
 }
-.textInputIconWrap .icon-font[data-v-1502ca60] {
+.textInputIconWrap .icon-font[data-v-9f24ba22] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-1502ca60] {
+.txtInputIconStart .iconStart[data-v-9f24ba22] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart input[data-v-1502ca60] {
+.txtInputIconStart textarea[data-v-9f24ba22] {
 	padding-inline-start: 2rem;
 }
-.bagel-input:hover .toggleEditBtn[data-v-1502ca60],
-.bagel-input.editMode .toggleEditBtn[data-v-1502ca60] {
+.bagel-input:hover .toggleEditBtn[data-v-9f24ba22],
+.bagel-input.editMode .toggleEditBtn[data-v-9f24ba22] {
 	opacity: 1;
 }
-.bagel-input.small input[data-v-1502ca60] {
+.bagel-input.small textarea[data-v-9f24ba22] {
 	height: 30px;
 }
 
@@ -2370,6 +2382,54 @@ input[type='email'][data-v-ed81a514] {
   color: var(--bgl-white);
 }
 
+.bagel-input .fileUploadWrap[data-v-352399c0] {
+  outline: 1px solid var(--border-color);
+  border-radius: var(--input-border-radius);
+  text-align: center;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  position: relative;
+  height: 132px;
+  font-size: var(--input-font-size);
+}
+.previewName[data-v-352399c0]{
+  padding: 0.5rem;
+  text-align: start;
+  color: var(--input-color);
+  display: grid;
+  grid-template-columns: 1fr 22px;
+  align-items: center;
+}
+.previewName p[data-v-352399c0]{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.imagePreviewWrap[data-v-352399c0]{
+  background: var(--input-bg);
+  border-radius: var(--input-border-radius);
+  height: 90px;
+  padding: 5px;
+}
+img.preview[data-v-352399c0] {
+  height: 80px;
+  border-radius: var(--input-border-radius);
+  object-fit: contain;
+}
+.fileUploadWrap.dragover[data-v-352399c0], .fileUploadWrap[data-v-352399c0]:hover{
+  box-shadow: inset 0 0 10px #00000012;
+}
+.bagel-input .fileUploadWrap.fileDropZone[data-v-352399c0]{
+  background: var(--input-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color:var(--bgl-gray);
+}
+.bagel-input .fileUploadWrap.fileDropZone[data-v-352399c0]:after {
+  content: "Drop files here or click to upload";
+}
+
 .chart-line {
 	width: 100%;
 	height: 300px;

package/dist/types/BagelField.d.ts

@@ -29,12 +29,5 @@ export interface NestedBagelForm extends BaseBagelField {
     inputType: 'BagelForm';
     fields: NestedBagelFormFields;
 }
-export interface SelectBagelField extends BaseBagelField {
-    inputType: 'SelectField';
-    options: string | {
-        label: string;
-        value: string | number;
-    }[];
-}
-export type BagelField = BaseBagelField | SelectBagelField | NestedBagelForm;
+export type BagelField = BaseBagelField | NestedBagelForm;
 //# sourceMappingURL=BagelField.d.ts.map

package/dist/types/BagelField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelField.d.ts","sourceRoot":"","sources":["../../src/types/BagelField.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EACN,SAAS,GACT,aAAa,GACb,WAAW,GACX,YAAY,GACZ,eAAe,GACf,WAAW,GACX,eAAe,GACf,YAAY,GACZ,aAAa,GACb,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IAEtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG,WAAW,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAEhF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;CAC9B;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACvD,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,eAAe,CAAC"}
+{"version":3,"file":"BagelField.d.ts","sourceRoot":"","sources":["../../src/types/BagelField.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EACN,SAAS,GACT,aAAa,GACb,WAAW,GACX,YAAY,GACZ,eAAe,GACf,WAAW,GACX,eAAe,GACf,YAAY,GACZ,aAAa,GACb,WAAW,GACX,UAAU,GACV,UAAU,GACV,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IAEtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG,WAAW,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAEhF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;CAC9B;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,eAAe,CAAC"}

package/dist/types/BagelForm.d.ts

@@ -0,0 +1,23 @@
+export type AttributeValue = string | number | boolean | null | undefined | Record<string, any>;
+export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => AttributeValue;
+export interface Attributes<T = any> {
+    [key: string]: AttributeValue | AttributeFn<T>;
+}
+export type Field<T = Record<string, any>> = {
+    $el?: any;
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    children?: Field<T>[];
+    attrs?: Attributes<T>;
+    required?: boolean;
+};
+export interface SelectBagelField {
+    inputType: 'SelectField';
+    options: string | {
+        label: string;
+        value: string | number;
+    }[];
+}
+export type BglFormSchemaT<T = Record<string, any>> = Field<T>[];
+//# sourceMappingURL=BagelForm.d.ts.map

package/dist/types/BagelForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEhG,MAAM,MAAM,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC;AAE1F,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAC/C;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA;AAED,MAAM,WAAW,gBAAgB;IAChC,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9D;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@ export type { MaterialIcons } from './materialIcons';
 export type { BankDetailsInterface, NewPerson, Person } from './Person';
 export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
-export * from './BagelField';
 export * from './BtnOptions';
-export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'blue';
+export * from './BagelForm';
+export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'primary' | 'blue';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,GAAE,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,SAAS,GACT,MAAM,CAAA"}

package/dist/utils/index.d.ts

@@ -1,10 +1,10 @@
-import type { BagelField } from '..';
+import { Attributes } from '../types';
 export declare const debounce: (fn: () => void, delay?: number) => void;
 export declare const keyToLabel: (key: string) => string;
-export declare function computeFields(modelValue: Record<string, any>): BagelField[];
 export declare const copyText: (text: string, cb?: ((msg: string) => void) | undefined) => Promise<void>;
 export declare const useFormkit: () => unknown;
 export declare const initials: (...strArr: string[]) => string;
 export declare function useEscape(event: KeyboardEvent, closeModel: () => void): void;
+export declare function bindAttrs<T = Record<string, any>>(attrs: Attributes, fieldVal: any, row: T): any;
 export { formatString } from './strings';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,EAAE,CAmB3E;AAED,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAAiD,CAAC;AAE9F,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAAiD,CAAC;AAE9F,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,OAO1F;AAED,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/package.json

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

package/src/components/Btn.vue

@@ -74,15 +74,15 @@ const props = withDefaults(
 );
 
 const computedTheme = $computed(
-	() => (props?.color || props?.theme)
+	() => (props?.color || props?.theme),
 );
 
 const computedDefaultColors = $computed(
 	() => ({
 		backgroundColor: 'var(--bgl-primary)',
-		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)'
-	})
-)
+		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
+	}),
+);
 
 function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
 	return ({
@@ -91,17 +91,18 @@ function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof co
 		color: props.flat
 			? theme.backgroundColor as string
 			: theme.color as string,
-	})
+	});
 }
 
 const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
 	red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
 	black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
 	green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	blue: getThemeColors({ backgroundColor: 'var(--bgl-blue)', color: 'var(--bgl-white)' }),
+	primary: getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
 	gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
 	light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
 	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
+	blue: getThemeColors({}),
 };
 
 const cumputedTextColor = $computed(
@@ -184,7 +185,6 @@ const computedBackgroundColor = $computed(
 	filter: var(--bgl-active-filter);
 }
 
-
 .btn.flatBtn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);

package/src/components/form/BglField.vue

@@ -0,0 +1,29 @@
+<template>
+	<component
+		:required="field.required"
+		v-bind="bindAttrs(field?.attrs||{}, props.modelValue[field.id || ''], props.modelValue,)"
+		:is="field.$el || 'div'"
+		:label="field.label"
+		:placeholder="field.placeholder || field.label"
+		:modelValue="props.modelValue[field.id || '']"
+		@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
+	>
+		<BglField
+			:modelValue="modelValue"
+			@update:modelValue="($event:any)=>emits('update:modelValue', $event)"
+			v-for="(child,ii) in field.children" :key="child.id||ii"
+			:field="child"
+		/>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import { type Field, bindAttrs } from '@bagelink/vue';
+
+const props = defineProps<{
+    modelValue: Record<string, any>;
+    field: Field
+  }>();
+
+const emits = defineEmits(['update:modelValue']);
+</script>

package/src/components/form/BglForm.vue

@@ -0,0 +1,75 @@
+<template>
+	<form @submit.prevent="runSubmit">
+		<BglField
+			v-for="(field, i) in schema" :key="field.id || `${i  }p`" :field="field" :modelValue="data"
+			@update:modelValue="($event: any) => field.id ? data[field.id] = $event : ''"
+		/>
+		<Btn
+			class="del-top" v-if="modelValue?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
+			color="red" thin
+		/>
+		<Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
+		<div v-else>
+			<slot name="submit"/>
+		</div>
+	</form>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import { Btn, useModal, BglField } from '@bagelink/vue';
+import { type BglFormSchemaT } from '@bagelink/vue';
+
+const { showModal } = useModal();
+
+const props = defineProps<{
+	modelValue?: any;
+	schema: BglFormSchemaT;
+	onDelete?: ((id: string) => void);
+	onSubmit?: ((data: any) => void);
+}>();
+
+const emits = defineEmits(['update:modelValue', 'submit']);
+const handleEmit = (val: any) => emits('update:modelValue', val);
+let data = $ref({
+	...props.modelValue,
+});
+const runSubmit = () => {
+	emits('submit', data);
+	clearForm();
+};
+
+const clearForm = () => data = {};
+
+const i18nT = (val: string) => val;
+
+watch(
+	() => data,
+	() => handleEmit,
+	{ immediate: true },
+);
+
+const runDelete = () => {
+	showModal(
+		{
+			class: 'small-modal',
+			title: i18nT('Are you sure?'),
+			actions: [
+				{
+					value: 'Confirm',
+					color: 'red',
+					onClick: () => props.onDelete?.(data.id),
+				},
+				{ value: 'Cancel', color: 'gray' },
+			],
+		},
+		{ default: i18nT('form.deleteMessage') },
+	);
+};
+</script>
+
+<style>
+.del-top {
+	transform: translateY(-2.6rem);
+}
+</style>

package/src/components/form/index.ts

@@ -1,4 +1,6 @@
 export { default as ItemRef } from './ItemRef.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as PlainInputField } from './PlainInputField.vue';
+export { default as BglForm } from './BglForm.vue';
+export { default as BglField } from './BglField.vue';
 export * from './inputs';