@bagelink/vue 0.0.241 → 0.0.245

package/dist/plugins/modal.d.ts

@@ -8,12 +8,14 @@ interface ModalOptions {
     actions?: BtnOptions[];
     class?: string;
 }
-interface ModalFormOptions extends ModalOptions {
-    modelValue?: any;
-    'onUpdate:modelValue'?: (val: any) => void;
-    onSubmit: (val: any) => void;
-    onDelete?: (id: string) => void;
-    schema: BglFormSchemaT<any> | (() => BglFormSchemaT<any>);
+interface ModalFormOptions {
+    side?: boolean;
+    title?: string;
+    dismissable?: boolean;
+    schema: BglFormSchemaT<any> | (() => BglFormSchemaT);
+    modelValue?: Record<string, any>;
+    onSubmit?: (formData: any) => Promise<any>;
+    onDelete?: (id: string) => Promise<void>;
 }
 interface ModalApi {
     showModal: (options: ModalOptions, slots?: Record<string, any>) => void;

package/dist/plugins/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,UAAU,YAAY;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,GAAG,CAAC;IAEjB,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAE3C,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAE7B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;CAE1D;AAED,UAAU,QAAQ;IAEjB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAExE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAEhF,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAEpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAQF,eAAO,MAAM,WAAW,EAAE,MAiDzB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/plugins/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACf,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhE,UAAU,YAAY;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,gBAAgB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACzC;AAED,UAAU,QAAQ;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChF,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,EAAE,YAAY,CAAC,QAAQ,CAAmB,CAAC;AAEnE,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAQF,eAAO,MAAM,WAAW,EAAE,MAuCzB,CAAC"}

package/dist/style.css

@@ -446,6 +446,9 @@
   align-items: center;
 }
 
+.bg-lignt {
+  background-color: var(--bgl-white);
+}
 
 .modal {
   width: 96%;
@@ -493,7 +496,7 @@
   margin-inline-start: auto;
   margin-inline-end: 20px;
   min-height: calc(100vh - 40px);
-
+  transform: translateX(100%);
 }
 
 .is-active .modal {
@@ -502,8 +505,18 @@
   box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
+.bg-lignt .modal {
+  transform: scale(1);
+  border: 1px solid var(--border-color);
+}
+
+.bg-lignt.is-active .modal {
+  box-shadow: none;
+}
+
 .is-active.is-side .modal {
   inset-inline-end: 20px;
+  transform: translateX(0%);
 }
 
 .bg-dark.is-active {
@@ -532,11 +545,12 @@
     margin-inline-start: 5%;
   }
 }
-.modal-title[data-v-766bb68f] {
+
+.modal-title[data-v-753a1016] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-766bb68f] {
+.modal-title[data-v-753a1016] {
 		margin-top: 1rem;
 }
 }
@@ -853,22 +867,21 @@ th[data-v-56ec9012] {
 	color: var(--input-color);
 }
 
-.avatar[data-v-4c736a32]{
+.avatar[data-v-dbdd4c26] {
 	border-radius: 100%;
-	width: 50px;
-	height: 50px;
-	background-color: var(--bgl-primary-tint);
+	background-color: var(--bgl-gray-20);
+	border: 0.5px solid var(--border-color);
 	overflow: hidden;
 	text-align: center;
 	padding: none;
 }
-.avatar p[data-v-4c736a32] {
+.avatar p[data-v-dbdd4c26] {
 	font-size: 1.5rem;
 	line-height: 50px;
 	margin: 0;
 	font-weight: 200;
 }
-.avatar img[data-v-4c736a32]{
+.avatar img[data-v-dbdd4c26] {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
@@ -1656,55 +1669,55 @@ to {
 	/* width: auto; */
 }
 
-.bagel-input textarea[data-v-9f24ba22]{
-  min-height: unset;
+.bagel-input textarea[data-v-f04abcf4] {
+	min-height: unset;
 }
-.bagel-input.text-input textarea[data-v-9f24ba22]{
-  resize: none;
+.bagel-input.text-input textarea[data-v-f04abcf4] {
+	resize: none;
 }
-.code textarea[data-v-9f24ba22]{
-  font-family: 'Inconsolata', monospace;
-  background: var(--bgl-black) !important;
-  color: var(--bgl-white) !important;
+.code textarea[data-v-f04abcf4] {
+	font-family: 'Inconsolata', monospace;
+	background: var(--bgl-black) !important;
+	color: var(--bgl-white) !important;
 }
-.bagel-input.toggleEdit[data-v-9f24ba22]:hover {
+.bagel-input.toggleEdit[data-v-f04abcf4]:hover {
 	background-color: var(--input-bg);
 }
-.bagel-input.small[data-v-9f24ba22] {
+.bagel-input.small[data-v-f04abcf4] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.toggleEditBtn[data-v-9f24ba22] {
+.toggleEditBtn[data-v-f04abcf4] {
 	position: absolute;
 	right: -24px;
 	top: 4;
 	opacity: 0;
 }
-.textInputIconWrap[data-v-9f24ba22] {
+.textInputIconWrap[data-v-f04abcf4] {
 	position: relative;
 }
-.textInputIconWrap .icon-font[data-v-9f24ba22] {
+.textInputIconWrap .icon-font[data-v-f04abcf4] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-9f24ba22] {
+.txtInputIconStart .iconStart[data-v-f04abcf4] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-9f24ba22] {
+.txtInputIconStart textarea[data-v-f04abcf4] {
 	padding-inline-start: 2rem;
 }
-.bagel-input:hover .toggleEditBtn[data-v-9f24ba22],
-.bagel-input.editMode .toggleEditBtn[data-v-9f24ba22] {
+.bagel-input:hover .toggleEditBtn[data-v-f04abcf4],
+.bagel-input.editMode .toggleEditBtn[data-v-f04abcf4] {
 	opacity: 1;
 }
-.bagel-input.small textarea[data-v-9f24ba22] {
+.bagel-input.small textarea[data-v-f04abcf4] {
 	height: 30px;
 }
 
@@ -1981,41 +1994,42 @@ img.preview[data-v-4144cc3e] {
 	color: var(--bgl-green);
 }
 
-.bgl-checkbox[data-v-4955b9bd]{
+.bgl-checkbox[data-v-13b65ea3] {
   position: relative;
 }
-.bgl-checkbox input[type=checkbox][data-v-4955b9bd]{
+.bgl-checkbox input[type=checkbox][data-v-13b65ea3] {
   display: none;
 }
-.bgl-checkbox label[data-v-4955b9bd]{
+.bgl-checkbox label[data-v-13b65ea3] {
   padding-inline-start: calc(var(--input-height) + 0.25rem);
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
+  line-height: var(--input-height);
 }
-.bgl-checkbox[data-v-4955b9bd]:hover{
+.bgl-checkbox[data-v-13b65ea3]:hover {
   filter: brightness(90%);
 }
-.bgl-checkbox[data-v-4955b9bd]:active{
+.bgl-checkbox[data-v-13b65ea3]:active {
   filter: var(--bgl-active-filter);
 }
-.switch[data-v-4955b9bd] {
+.switch[data-v-13b65ea3] {
   position: absolute;
   display: inline-block;
   height: calc(var(--input-height) / 2);
   width: var(--input-height);
   border-radius: var(--input-height);
   background: var(--bgl-gray);
-  outline: 1px solid var(--bgl-black);
+  outline: 1px solid var(--border-color);
   margin-top: 0.15rem;
   pointer-events: none;
 }
-.switch input[data-v-4955b9bd] {
+.switch input[data-v-13b65ea3] {
   opacity: 0;
   width: 0;
   height: 0;
 }
-.slider[data-v-4955b9bd] {
+.slider[data-v-13b65ea3] {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -2028,7 +2042,7 @@ img.preview[data-v-4144cc3e] {
   border-radius: calc(var(--input-height) / 2);
   box-shadow: inset 0 0 10px #00000020;
 }
-.slider[data-v-4955b9bd]:before {
+.slider[data-v-13b65ea3]:before {
   position: absolute;
   content: "";
   height: calc(var(--input-height) / 2 - 4px);
@@ -2040,10 +2054,10 @@ img.preview[data-v-4144cc3e] {
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
-input:checked + .slider[data-v-4955b9bd] {
+.checked .slider[data-v-13b65ea3] {
   background: var(--bgl-primary);
 }
-input:checked + .slider[data-v-4955b9bd]:before {
+.checked .slider[data-v-13b65ea3]:before {
   transform: translateX(calc(var(--input-height) / 2));
 }
 
@@ -2366,71 +2380,197 @@ input:checked + .slider[data-v-4955b9bd]:before {
 .flex-3-col {
     flex: 1 1 33.33333%;
 }
-.mb-0 {
-    margin-bottom: 0;
-}
 .mb-1 {
-    margin-bottom: 0.25rem;
+    margin-bottom: 1rem !important;
 }
 .mb-2 {
-    margin-bottom: 0.5rem;
+    margin-bottom: 2rem !important;
 }
 .mb-3 {
-    margin-bottom: 1rem;
-}
-.mt-0 {
-    margin-top: 0;
+    margin-bottom: 3rem !important;
 }
 .mt-1 {
-    margin-top: 0.25rem;
+    margin-top: 1rem !important;
 }
 .mt-2 {
-    margin-top: 0.5rem;
+    margin-top: 2rem !important;
 }
 .mt-3 {
-    margin-top: 1rem;
+    margin-top: 3rem !important;
 }
 .ms-1 {
-    margin-inline-start: 0.25rem;
+    margin-inline-start: 1rem !important;
 }
 .ms-2 {
-    margin-inline-start: 0.5rem;
+    margin-inline-start: 2rem !important;
 }
 .ms-3 {
-    margin-inline-start: 1rem;
+    margin-inline-start: 3rem !important;
 }
 .me-1 {
-    margin-inline-end: 0.25rem;
+    margin-inline-end: 1rem !important;
 }
 .me-2 {
-    margin-inline-end: 0.5rem;
+    margin-inline-end: 2rem !important;
 }
 .me-3 {
-    margin-inline-end: 1rem;
+    margin-inline-end: 3rem !important;
+}
+.mb-0 {
+    margin-bottom: 0rem !important;
+}
+.mb-4 {
+    margin-bottom: 4rem !important;
+}
+.mb-075 {
+    margin-bottom: 0.75rem !important;
+}
+.mb-05 {
+    margin-bottom: 0.5rem !important;
+}
+.mb-025 {
+    margin-bottom: 0.25rem !important;
+}
+.mt-0 {
+    margin-top: 0rem !important;
+}
+.mt-4 {
+    margin-top: 4rem !important;
+}
+.mt-075 {
+    margin-top: 0.75rem !important;
+}
+.mt-05 {
+    margin-top: 0.5rem !important;
+}
+.mt-025 {
+    margin-top: 0.25rem !important;
+}
+.ms-0 {
+    margin-inline-start: 0rem !important;
+}
+.ms-4 {
+    margin-inline-start: 4rem !important;
+}
+.ms-075 {
+    margin-inline-start: 0.75rem !important;
+}
+.ms-05 {
+    margin-inline-start: 0.5rem !important;
+}
+.ms-025 {
+    margin-inline-start: 0.25rem !important;
+}
+.me-0 {
+    margin-inline-end: 0rem !important;
+}
+.me-4 {
+    margin-inline-end: 4rem !important;
+}
+.me-075 {
+    margin-inline-end: 0.75rem !important;
+}
+.me-05 {
+    margin-inline-end: 0.5rem !important;
+}
+.me-025 {
+    margin-inline-end: 0.25rem !important;
+}
+.pb-0 {
+    padding-bottom: 0rem !important;
 }
 .pb-1 {
-    padding-bottom: 1rem;
+    padding-bottom: 1rem !important;
 }
 .pb-2 {
-    padding-bottom: 2rem;
+    padding-bottom: 2rem !important;
 }
 .pb-3 {
-    padding-bottom: 3rem;
+    padding-bottom: 3rem !important;
+}
+.pb-4 {
+    padding-bottom: 4rem !important;
+}
+.pb-075 {
+    padding-bottom: 0.75rem !important;
+}
+.pb-05 {
+    padding-bottom: 0.5rem !important;
 }
 .pb-025 {
-    padding-bottom: 0.25rem;
+    padding-bottom: 0.25rem !important;
+}
+.pt-0 {
+    padding-top: 0rem !important;
 }
 .pt-1 {
-    padding-top: 1rem;
+    padding-top: 1rem !important;
 }
 .pt-2 {
-    padding-top: 2rem;
+    padding-top: 2rem !important;
 }
 .pt-3 {
-    padding-top: 3rem;
+    padding-top: 3rem !important;
+}
+.pt-4 {
+    padding-top: 4rem !important;
+}
+.pt-075 {
+    padding-top: 0.75rem !important;
+}
+.pt-05 {
+    padding-top: 0.5rem !important;
 }
 .pt-025 {
-    padding-top: 0.25rem;
+    padding-top: 0.25rem !important;
+}
+.ps-0 {
+    padding-inline-start: 0rem !important;
+}
+.ps-1 {
+    padding-inline-start: 1rem !important;
+}
+.ps-2 {
+    padding-inline-start: 2rem !important;
+}
+.ps-3 {
+    padding-inline-start: 3rem !important;
+}
+.ps-4 {
+    padding-inline-start: 4rem !important;
+}
+.ps-075 {
+    padding-inline-start: 0.75rem !important;
+}
+.ps-05 {
+    padding-inline-start: 0.5rem !important;
+}
+.ps-025 {
+    padding-inline-start: 0.25rem !important;
+}
+.pe-0 {
+    padding-inline-end: 0rem !important;
+}
+.pe-1 {
+    padding-inline-end: 1rem !important;
+}
+.pe-2 {
+    padding-inline-end: 2rem !important;
+}
+.pe-3 {
+    padding-inline-end: 3rem !important;
+}
+.pe-4 {
+    padding-inline-end: 4rem !important;
+}
+.pe-075 {
+    padding-inline-end: 0.75rem !important;
+}
+.pe-05 {
+    padding-inline-end: 0.5rem !important;
+}
+.pe-025 {
+    padding-inline-end: 0.25rem !important;
 }
 .flex {
     display: flex;
@@ -2746,6 +2886,12 @@ h6 {}
 .txtblue {
     color: var(--bgl-primary);
 }
+.txtblack {
+    color: var(--bgl-black);
+}
+.txtred {
+    color: var(--bgl-red);
+}
 .font-light {
     font-weight: 100;
 }
@@ -2761,6 +2907,9 @@ h6 {}
 .pointer {
     cursor: pointer;
 }
+.decoration-none {
+    text-decoration: none;
+}
 .icon-font {
     font-family: "Material Symbols Outlined", serif;
 }
@@ -2916,15 +3065,6 @@ h6 {}
 .card.thin {
   padding: 1rem 1rem;
 }
-.login-card {
-  padding: 3rem 2rem;
-  border-radius: calc(var(--card-border-radius) * 2);
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 330px;
-  margin: 15vh auto 0;
-}
 .login-card h3 {
   font-size: 1.4rem;
 }

package/dist/types/BagelForm.d.ts

@@ -1,33 +1,37 @@
+import { SelectInput, TextInput } from '..';
 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>> = {
+export type BaseBagelField<T = Record<string, any>> = {
     $el?: any;
     id?: string;
     label?: string;
     placeholder?: string;
     children?: Field<T>[];
     class?: AttributeValue | AttributeFn<T>;
-    options?: string | ({
-        label: string;
-        value: string | number;
-    } | string | number)[];
     attrs?: Attributes<T>;
     required?: boolean;
-    hint?: string;
+    helptext?: string;
+    options?: string | ({
+        label?: string;
+        value: string | number;
+    } | string | number | Record<string, any>)[];
     defaultValue?: any;
     transform?: (val?: any, rowData?: Record<string, any>) => any;
     onUpdate?: (val: any, fieldData?: any, rowData?: Record<string, any>) => void;
     'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 };
-export interface SelectBagelField {
-    inputType: 'SelectField';
-    options: string | {
-        label: string;
-        value: string | number;
-    }[];
+export interface InputBagelField<T> extends BaseBagelField<T> {
+    $el: 'text' | typeof TextInput;
+    id: string;
+    type?: string;
+}
+export interface SelectBagelField<T> extends BaseBagelField<T> {
+    $el: 'select' | typeof SelectInput;
+    id: string;
 }
+export type Field<T = Record<string, any>> = BaseBagelField<T> | InputBagelField<T> | SelectBagelField<T>;
 export type BglFormSchemaT<T = Record<string, any>> = Field<T>[];
 //# sourceMappingURL=BagelForm.d.ts.map

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

@@ -1 +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,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACnF,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/D;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}
+{"version":3,"file":"BagelForm.d.ts","sourceRoot":"","sources":["../../src/types/BagelForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvD,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,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI;IACpD,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,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC;IAC1G,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,CAAC;IAC9D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC7D,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC3D,GAAG,EAAE,MAAM,GAAG,OAAO,SAAS,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC5D,GAAG,EAAE,QAAQ,GAAG,OAAO,WAAW,CAAC;IACnC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAE1G,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC"}

package/package.json

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

package/src/components/Avatar.vue

@@ -1,11 +1,7 @@
 <template>
-	<div class="avatar">
-		<img
-			v-if="src"
-			:src="src"
-			:alt="name"
-		>
-		<p v-else>
+	<div class="avatar" :style="{ width: `${size}px`, height: `${size}px` }">
+		<img v-if="src" :src="src" :alt="name">
+		<p v-else :style="{ 'line-height': `${size * 0.9}px` }">
 			{{ fallback || initials(name || '') }}
 		</p>
 	</div>
@@ -14,22 +10,23 @@
 <script setup lang="ts">
 import { initials } from '@bagelink/vue';
 
-defineProps<{
-  fallback?: string;
-  src?: string;
-  name?: string;
-}>();
+withDefaults(defineProps<{
+	fallback?: string;
+	src?: string;
+	name?: string;
+	size?: number;
+}>(), { size: 50 });
 </script>
 
 <style scoped>
-.avatar{
+.avatar {
 	border-radius: 100%;
-	width: 50px;
-	height: 50px;
-	background-color: var(--bgl-primary-tint);
+	background-color: var(--bgl-gray-20);
+	border: 0.5px solid var(--border-color);
 	overflow: hidden;
 	text-align: center;
 	padding: none;
+
 }
 
 .avatar p {
@@ -39,7 +36,7 @@ defineProps<{
 	font-weight: 200;
 }
 
-.avatar img{
+.avatar img {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;

package/src/components/ListItem.vue

@@ -1,18 +1,25 @@
 <template>
-	<component :is="to ? 'RouterLink' : 'div'" :to="to" class="list-item ellipsis">
-		<p class="txt16 no-margin">
-			{{ title }}
-			<slot />
-		</p>
-		<p class="txt14 no-margin txtgray">
-			{{ subtitle }}
-			<slot name="subtitle" />
-		</p>
+	<component :is="to ? 'RouterLink' : 'div'" :to="to" class="flex list-item gap-3">
+		<Avatar style="flex-basis: 1;" :name="title" :src="src" v-if="src || showAvatar" :size="40" />
+		<div>
+			<p class="txt16 no-margin ellipsis">
+				{{ title }}
+				<slot />
+			</p>
+			<p class="txt14 no-margin txtgray ellipsis">
+				{{ subtitle }}
+				<slot name="subtitle" />
+			</p>
+		</div>
 	</component>
 </template>
 
 <script lang="ts" setup>
+import { Avatar } from '@bagelink/vue';
+
 defineProps<{
+	src?: string;
+	showAvatar?: boolean;
 	to?: string;
 	title?: string;
 	subtitle?: string;

package/src/components/Modal.vue

@@ -1,8 +1,6 @@
 <template>
-	<div
-		class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
-	>
+	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
 		<Card class="modal" @click.stop>
 			<header class="tool-bar">
 				<slot name="toolbar" />