@bagelink/vue 0.0.235-beta.0 → 0.0.237

package/dist/plugins/modal.d.ts

@@ -13,7 +13,7 @@ interface ModalFormOptions extends ModalOptions {
     'onUpdate:modelValue'?: (val: any) => void;
     onSubmit: (val: any) => void;
     onDelete?: (id: string) => void;
-    schema: BglFormSchemaT<any>;
+    schema: BglFormSchemaT<any> | (() => BglFormSchemaT<any>);
 }
 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,CAAC;CAC5B;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,MAoDzB,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,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"}

package/dist/style.css

@@ -306,16 +306,16 @@
 }
 }
 
-.loading[data-v-0ca0d3de] {
+.loading[data-v-593b2146] {
 	border: 1px solid var(--bgl-white);
 	border-bottom: 2px solid var(--bgl-white);
-	animation: spin-0ca0d3de 1s linear infinite;
+	animation: spin-593b2146 1s linear infinite;
 	border-radius: 100px;
 	width: 1rem;
 	height: 1rem;
 	margin: auto;
 }
-@keyframes spin-0ca0d3de {
+@keyframes spin-593b2146 {
 0% {
 		transform: rotate(0deg);
 }
@@ -323,7 +323,7 @@
 		transform: rotate(360deg);
 }
 }
-.btn-icon[data-v-0ca0d3de] {
+.btn-icon[data-v-593b2146] {
 	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-0ca0d3de] {
+.btn[data-v-593b2146] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
 	text-decoration: none;
 }
-.btn[disabled="true"][data-v-0ca0d3de] {
+.btn[disabled="true"][data-v-593b2146] {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
-.btn-flex[data-v-0ca0d3de] {
+.btn-flex[data-v-593b2146] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	justify-content: center;
 }
-.btn .icon-font[data-v-0ca0d3de] {
+.btn .icon-font[data-v-593b2146] {
 	font-size: calc(var(--input-font-size) * 1.3);
 }
-.btn[data-v-0ca0d3de],
-.btn-icon[data-v-0ca0d3de] {
-	background-color: var(--0b5510c0);
-	color: var(--18db167b);
+.btn[data-v-593b2146],
+.btn-icon[data-v-593b2146] {
+	background-color: var(--bfb3f9c4);
+	color: var(--5ae19879);
 }
-.btn[data-v-0ca0d3de]:hover,
-.btn-icon[data-v-0ca0d3de]:hover {
+.btn[data-v-593b2146]:hover,
+.btn-icon[data-v-593b2146]:hover {
 	filter: var(--bgl-hover-filter);
 }
-.btn[data-v-0ca0d3de]:active,
-.btn-icon[data-v-0ca0d3de]:active {
+.btn[data-v-593b2146]:active,
+.btn-icon[data-v-593b2146]:active {
 	filter: var(--bgl-active-filter);
 }
-.btn.flatBtn[data-v-0ca0d3de] {
+.btn.flatBtn[data-v-593b2146] {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
-.btn-icon.flatBtn[data-v-0ca0d3de] {
+.btn-icon.flatBtn[data-v-593b2146] {
 	background: transparent;
 }
-.btn.flatBtn[data-v-0ca0d3de]:hover,
-.btn-icon.flatBtn[data-v-0ca0d3de]:hover {
+.btn.flatBtn[data-v-593b2146]:hover,
+.btn-icon.flatBtn[data-v-593b2146]:hover {
 	filter: var(--bgl-active-filter);
 }
-.btn.flatBtn[data-v-0ca0d3de]:active,
-.btn-icon.flatBtn[data-v-0ca0d3de]:active {
+.btn.flatBtn[data-v-593b2146]:active,
+.btn-icon.flatBtn[data-v-593b2146]:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
-.btn.flatBtn.red[data-v-0ca0d3de],
-.btn-icon.flatBtn.red[data-v-0ca0d3de] {
+.btn.flatBtn.red[data-v-593b2146],
+.btn-icon.flatBtn.red[data-v-593b2146] {
 	color: var(--bgl-red);
 }
-.btn.flatBtn.light[data-v-0ca0d3de],
-.btn-icon.flatBtn.light[data-v-0ca0d3de] {
+.btn.flatBtn.light[data-v-593b2146],
+.btn-icon.flatBtn.light[data-v-593b2146] {
 	color: var(--bgl-primary-tint);
 }
-.btn.flatBtn.black[data-v-0ca0d3de],
-.btn-icon.flatBtn.black[data-v-0ca0d3de] {
+.btn.flatBtn.black[data-v-593b2146],
+.btn-icon.flatBtn.black[data-v-593b2146] {
 	color: var(--bgl-black);
 }
-.btn.flatBtn.gray[data-v-0ca0d3de],
-.btn-icon.flatBtn.gray[data-v-0ca0d3de] {
+.btn.flatBtn.gray[data-v-593b2146],
+.btn-icon.flatBtn.gray[data-v-593b2146] {
 	color: var(--bgl-gray);
 }
-.btn.thin[data-v-0ca0d3de] {
+.btn.thin[data-v-593b2146] {
 	padding-left: calc(var(--btn-padding) / 2);
 	padding-right: calc(var(--btn-padding) / 2);
 }
-.btn.round[data-v-0ca0d3de] {
+.btn.round[data-v-593b2146] {
 	border-radius: calc(var(--btn-border-radius) * 2);
 }
-.btn-icon.thin[data-v-0ca0d3de] {
+.btn-icon.thin[data-v-593b2146] {
 	height: calc(var(--btn-height) / 1.5);
 	width: calc(var(--btn-height) / 1.5);
 	line-height: 1;
 }
-[dir="rtl"] .icon-font[data-v-0ca0d3de] {
+[dir="rtl"] .icon-font[data-v-593b2146] {
 	transform: rotateY(180deg);
 }
-.btn-border[data-v-0ca0d3de] {
-	outline: 1px solid var(--0b5510c0);
-	color: var(--0b5510c0);
+.btn-border[data-v-593b2146] {
+	outline: 1px solid var(--bfb3f9c4);
+	color: var(--bfb3f9c4);
 	background: transparent;
 }
-.btn-border[data-v-0ca0d3de]:hover {
+.btn-border[data-v-593b2146]:hover {
 	color: var(--bgl-white);
-	background: var(--0b5510c0);
+	background: var(--bfb3f9c4);
 	filter: brightness(100%);
 }
-.btn-border[data-v-0ca0d3de]:active {
+.btn-border[data-v-593b2146]:active {
 	filter: brightness(80%);
 }
 .bg-dark {
@@ -521,11 +521,11 @@
   }
 }
 
-.modal-title[data-v-b81f66ed] {
+.modal-title[data-v-6badff9e] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-b81f66ed] {
+.modal-title[data-v-6badff9e] {
 		margin-top: 1rem;
 }
 }
@@ -716,41 +716,37 @@
   border-radius: var(--btn-border-radius);
 }
 
-.del-top {
-	transform: translateY(-2.6rem);
-}
-
-.list-arrows[data-v-89607f2f] {
+.list-arrows[data-v-a167604a] {
 	opacity: 0;
 }
-.list-arrows .icon-font[data-v-89607f2f] {
+.list-arrows .icon-font[data-v-a167604a] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-89607f2f] {
+.list-arrows.sorted[data-v-a167604a] {
 	opacity: 1;
 }
-.col img[data-v-89607f2f] {
+.col img[data-v-a167604a] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-89607f2f] {
+.list-arrows.sorted .desc[data-v-a167604a] {
 	transform: rotate(180deg);
 }
-table[data-v-89607f2f] {
+table[data-v-a167604a] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-89607f2f] {
+th[data-v-a167604a] {
 	font-weight: 400;
 }
-.row[data-v-89607f2f] {
+.row[data-v-a167604a] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-89607f2f] {
+.row.first-row[data-v-a167604a] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -760,7 +756,7 @@ th[data-v-89607f2f] {
 	height: 50px;
 	vertical-align: bottom;
 }
-.row.first-row[data-v-89607f2f]::after {
+.row.first-row[data-v-a167604a]::after {
 	content: "";
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -768,11 +764,11 @@ th[data-v-89607f2f] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-89607f2f] {
+.first-row .col[data-v-a167604a] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-89607f2f] {
+.col[data-v-a167604a] {
 	white-space: nowrap;
 	padding: 14px;
 	transition: var(--bgl-transition);
@@ -781,16 +777,16 @@ th[data-v-89607f2f] {
 	padding-right: 1rem;
 	align-items: center;
 }
-.col>div[data-v-89607f2f] {
+.col>div[data-v-a167604a] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-89607f2f] {
+.max-col-width[data-v-a167604a] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .icon-font[data-v-89607f2f] {
+.col.check .icon-font[data-v-a167604a] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -801,44 +797,44 @@ th[data-v-89607f2f] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-89607f2f] {
+.rows[data-v-a167604a] {
 	font-size: 0.8125em;
 }
-.table-list[data-v-89607f2f] {
+.table-list[data-v-a167604a] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-89607f2f] {
+.BagelTable .table-list[data-v-a167604a] {
 	overflow: unset;
 }
-.row-item[data-v-89607f2f] {
+.row-item[data-v-a167604a] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-89607f2f]:hover {
+.row-item[data-v-a167604a]:hover {
 	background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-89607f2f] {
+.infinite-wrapper[data-v-a167604a] {
 	overflow-y: auto;
 	width: 100%;
 }
 
-.data[data-v-a752f355] {
+.data[data-v-bb2526f9] {
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
 	border-radius: var(--input-border-radius);
 }
-.data-row[data-v-a752f355] {
+.data-row[data-v-bb2526f9] {
 	display: flex;
 	justify-content: space-between;
 	padding-bottom: 0.5rem;
 	margin-bottom: 0.5rem;
 	border-bottom: 1px solid var(--border-color);
 }
-.data-link[data-v-a752f355] {
+.data-link[data-v-bb2526f9] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -1092,6 +1088,9 @@ th[data-v-89607f2f] {
 .dp__input_wrap input {
 	padding-inline-start: 2rem !important;
 }
+.dp__calendar_row>div:last-child {
+	pointer-events: auto !important;
+}
 
 .bagel-input textarea[data-v-1fc4f739] {
 	font-family: monospace;
@@ -2072,10 +2071,10 @@ input:checked + .slider[data-v-4955b9bd]:before {
 }
 }
 
-.btn-end[data-v-7031e613] {
+.btn-end[data-v-d3e2966e] {
 	text-align: end;
 }
-.whatsapp-preview[data-v-7031e613] {
+.whatsapp-preview[data-v-d3e2966e] {
 	direction: ltr;
 	width: 400px;
 	padding: 1rem;
@@ -2087,18 +2086,18 @@ input:checked + .slider[data-v-4955b9bd]:before {
 	top: 15px;
 	flex: 1 1 40%;
 }
-.whatsapp-wrap[data-v-7031e613] {
+.whatsapp-wrap[data-v-d3e2966e] {
 	display: flex;
 	gap: 1rem;
 	max-width: 1200px;
 	overflow: auto;
 	height: 100%;
 }
-.create-template-form[data-v-7031e613] {
+.create-template-form[data-v-d3e2966e] {
 	flex: 1 0 50%;
 	min-width: 300px;
 }
-.whatsapp-msg[data-v-7031e613] {
+.whatsapp-msg[data-v-d3e2966e] {
 	background: var(--whatsapp-green);
 	border-radius: 0.5rem;
 	border-start-start-radius: 0px;
@@ -2109,7 +2108,7 @@ input:checked + .slider[data-v-4955b9bd]:before {
 	position: relative;
 	min-height: 30px;
 }
-.whatsapp-msg[data-v-7031e613]::after {
+.whatsapp-msg[data-v-d3e2966e]::after {
 	content: '';
 	inset-inline-start: -5px;
 	border-radius: 0.1rem;
@@ -2120,27 +2119,27 @@ input:checked + .slider[data-v-4955b9bd]:before {
 	background: var(--whatsapp-green);
 	position: absolute;
 }
-.whatsapp-body[data-v-7031e613] {
+.whatsapp-body[data-v-d3e2966e] {
 	margin: 2px 0;
 }
-.whatsapp-footer[data-v-7031e613] {
+.whatsapp-footer[data-v-d3e2966e] {
 	margin: 0;
 	opacity: 0.6;
 	font-size: 0.8rem;
 }
-.whatsappHebrew[data-v-7031e613] {
+.whatsappHebrew[data-v-d3e2966e] {
 	direction: rtl;
 }
-.whatsappHebrew .whatsapp-msg[data-v-7031e613]::after {
+.whatsappHebrew .whatsapp-msg[data-v-d3e2966e]::after {
 	transform: skew(-45deg);
 }
 @media screen and (max-width: 1200px) {
-.whatsapp-preview[data-v-7031e613] {
+.whatsapp-preview[data-v-d3e2966e] {
 		width: 300px;
 }
 }
 @media screen and (max-width: 910px) {
-.whatsapp-preview[data-v-7031e613] {
+.whatsapp-preview[data-v-d3e2966e] {
 		display: none;
 }
 }
@@ -2869,6 +2868,7 @@ h6 {}
   gap: 1rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 * {
   box-sizing: border-box;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,SAEjC,CAAC;AAEnB,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAG3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,eAAO,MAAM,KAAK,UAAW,GAAG,YAAY,GAAG,QAK9C,CAAC;AAEF,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAC;AAEhI,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,SAEjC,CAAC;AAEnB,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAG3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,eAAO,MAAM,KAAK,UAAW,GAAG,YAAY,GAAG,QAM9C,CAAC;AAEF,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAC;AAEhI,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.235-beta.0",
+  "version": "0.0.237",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -1,10 +1,5 @@
 <template>
-	<component
-		:is="to ? 'router-link' : is"
-		:to="to"
-		:type="type"
-		:role="role"
-		:disabled="disabled"
+	<component :is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
 		:class="{
 			'btn-icon': icon && !slots['default'] && !value,
 			btn: !icon || slots['default'] || value,
@@ -12,28 +7,15 @@
 			round,
 			'flatBtn': flat,
 			'btn-border': border
-		}"
-	>
-		<div
-			class="loading"
-			v-if="loading"
-		/>
-		<div
-			v-else
-			class="btn-flex"
-		>
-			<MaterialIcon
-				v-if="icon"
-				:icon="icon"
-			/>
+		}">
+		<div class="loading" v-if="loading" />
+		<div v-else class="btn-flex">
+			<MaterialIcon v-if="icon" :icon="icon" />
 			<slot />
 			<template v-if="!slots['default'] && value">
 				{{ value }}
 			</template>
-			<MaterialIcon
-				v-if="props['icon.end']"
-				:icon="props['icon.end']"
-			/>
+			<MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
 		</div>
 	</component>
 </template>
@@ -62,8 +44,10 @@ const props = withDefaults(
 		to?: string;
 		round?: boolean;
 		is?: string;
+		onClick?: (e: MouseEvent) => void;
 	}>(),
 	{
+		onClick: () => '',
 		loading: false,
 		round: false,
 		disabled: false,

package/src/components/DataPreview.vue

@@ -1,23 +1,12 @@
 <template>
 	<div v-if="data" class="data">
-		<h3 class="mb-3 mt-0" v-if="title">
-			{{ title }}
-		</h3>
+		<Title v-if="title" :label="title" />
 		<template v-for="field in schema" :key="field.id">
 			<div class="data-row" v-if="iffer(field, itemData)">
 				<div class="key">
 					{{ field?.label || keyToLabel(field.id) }}
 				</div>
-				<component :is="field.$el || 'div'" class="value" :modelValue="denullify(itemData, field.id)"
-					@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(data, field.id), itemData)"
-					v-bind="bindAttrs(field.attrs, field.id ? itemData[field.id] : null, itemData)">
-					{{
-						field?.transform?.(denullify(itemData, field.id)
-							|| field.defaultValue, itemData)
-						|| denullify(itemData, field.id)
-						|| ''
-					}}
-				</component>
+				<BglField :field="field" v-model="itemData" />
 			</div>
 		</template>
 		<div v-if="!schema?.length">
@@ -38,9 +27,9 @@
 import {
 	type BglFormSchemaT,
 	keyToLabel,
-	bindAttrs,
 	iffer,
-	denullify,
+	Title,
+	BglField,
 } from '@bagelink/vue';
 
 defineProps<{

package/src/components/ListItem.vue

@@ -1,13 +1,11 @@
 <template>
-	<component
-		:is="to ? 'RouterLink' : 'div'"
-		:to="to"
-		class="list-item ellipsis"
-	>
+	<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>
@@ -16,5 +14,7 @@
 <script lang="ts" setup>
 defineProps<{
 	to?: string;
+	title?: string;
+	subtitle?: string;
 }>();
 </script>

package/src/components/Modal.vue

@@ -1,27 +1,26 @@
 <template>
 	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
 		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-
-		<div class="card modal" @click.stop>
+		<Card class="modal" @click.stop>
 			<header class="tool-bar">
 				<slot name="toolbar" />
 				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
-				<h3 class="modal-title">
-					{{ title }}
-				</h3>
+				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
 			</header>
 			<slot />
 			<footer class="modal-footer mt-3">
 				<Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
 				<slot name="footer" />
 			</footer>
-		</div>
+		</Card>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
-import { type BtnOptions, Btn, useEscape } from '@bagelink/vue';
+import {
+	type BtnOptions, Btn, useEscape, Title, Card,
+} from '@bagelink/vue';
 import '../styles/modal.css';
 
 const props = defineProps<{
@@ -37,27 +36,18 @@ const emit = defineEmits(['update:isModalVisible']);
 
 const closeModal = () => {
 	isActive = false;
-	setTimeout(() => {
-		emit('update:isModalVisible', false);
-	}, 200);
+	setTimeout(() => emit('update:isModalVisible', false), 200);
 };
 
+defineExpose({ closeModal });
+
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-
-	document.addEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
+	setTimeout(() => isActive = true, 1);
+	document.addEventListener('keydown', escapeKeyClose);
 });
 onUnmounted(() => {
-	document.removeEventListener(
-		'keydown',
-		escapeKeyClose,
-	);
+	document.removeEventListener('keydown', escapeKeyClose);
 });
 </script>