@bagelink/vue 0.0.427 → 0.0.435

package/dist/plugins/bagel.d.ts

@@ -6,6 +6,9 @@ export declare const i18nTInjectionKey: InjectionKey<(key: string) => string>;
 export declare function useBagel(): Bagel;
 export declare function useI18nT(): (key: string) => string;
 export interface BagelOptions {
+    availableLangs?: string[];
+    defaultLang?: string;
+    language?: string;
     host: string;
     onError?: (err: Error) => void;
     i18nT?: (key: string) => string;

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

@@ -1 +1 @@
-{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,eAAO,MAAM,iBAAiB,qBAAyC,CAAC;AACxE,eAAO,MAAM,iBAAiB,qBAEvB,MAAM,KAAK,MAAM,CACvB,CAAC;AAEF,wBAAgB,QAAQ,UAKvB;AAED,wBAAgB,QAAQ,4BAKvB;AAED,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAA;IAEZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAE/B,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B;AACD,eAAO,MAAM,QAAQ,EAAE,MAmBtB,CAAC"}
+{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,eAAO,MAAM,iBAAiB,qBAAyC,CAAC;AACxE,eAAO,MAAM,iBAAiB,qBAEvB,MAAM,KAAK,MAAM,CACvB,CAAC;AAEF,wBAAgB,QAAQ,UAKvB;AAED,wBAAgB,QAAQ,4BAKvB;AAED,MAAM,WAAW,YAAY;IAC5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IAEb,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAE/B,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAChC;AACD,eAAO,MAAM,QAAQ,EAAE,MAwBtB,CAAC"}

package/dist/style.css

@@ -625,41 +625,41 @@ a[data-v-d09a83c5] {
   gap: 1rem;
 }
 
-.list-arrows[data-v-54d69b8f] {
+.list-arrows[data-v-1d169811] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-54d69b8f] {
+.list-arrows .bgl_icon-font[data-v-1d169811] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-54d69b8f] {
+.list-arrows.sorted[data-v-1d169811] {
 	opacity: 1;
 }
-.col img[data-v-54d69b8f] {
+.col img[data-v-1d169811] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-54d69b8f] {
+.list-arrows.sorted .desc[data-v-1d169811] {
 	transform: rotate(180deg);
 }
-table[data-v-54d69b8f] {
+table[data-v-1d169811] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-54d69b8f] {
+th[data-v-1d169811] {
 	font-weight: 400;
 }
-.embedded-field[data-v-54d69b8f] {
+.embedded-field[data-v-1d169811] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-54d69b8f] {
+.row[data-v-1d169811] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-54d69b8f] {
+.row.first-row[data-v-1d169811] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -669,7 +669,7 @@ th[data-v-54d69b8f] {
 	height: 50px;
 	vertical-align: bottom;
 }
-.row.first-row[data-v-54d69b8f]::after {
+.row.first-row[data-v-1d169811]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -677,27 +677,27 @@ th[data-v-54d69b8f] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-54d69b8f] {
+.first-row .col[data-v-1d169811] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-54d69b8f] {
+.col[data-v-1d169811] {
 	white-space: nowrap;
 	padding: 0.75rem 0.5rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col > div[data-v-54d69b8f] {
+.col > div[data-v-1d169811] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-54d69b8f] {
+.max-col-width[data-v-1d169811] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-54d69b8f] {
+.col.check .bgl_icon-font[data-v-1d169811] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -708,27 +708,27 @@ th[data-v-54d69b8f] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-54d69b8f] {
+.rows[data-v-1d169811] {
 	font-size: 0.8125em;
 }
-.table-list[data-v-54d69b8f] {
+.table-list[data-v-1d169811] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-54d69b8f] {
+.BagelTable .table-list[data-v-1d169811] {
 	overflow: unset;
 }
-.row-item[data-v-54d69b8f] {
+.row-item[data-v-1d169811] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-54d69b8f]:hover {
+.row-item[data-v-1d169811]:hover {
 	background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-54d69b8f] {
+.infinite-wrapper[data-v-1d169811] {
 	overflow-y: auto;
 	width: 100%;
 }
@@ -823,7 +823,7 @@ th[data-v-54d69b8f] {
   object-fit: cover;
 }
 
-.alert[data-v-4017e821] {
+.alert[data-v-0ec1391d] {
   padding: var(--btn-padding);
   border-radius: var(--card-border-radius);
   background: var(--bgl-primary-light);
@@ -832,25 +832,25 @@ th[data-v-54d69b8f] {
   gap: 1rem;
   position: relative;
 }
-.alert_icon[data-v-4017e821] {
+.alert_icon[data-v-0ec1391d] {
   line-height: 1;
 }
-.alert.warning[data-v-4017e821] {
+.alert.warning[data-v-0ec1391d] {
   background-color: var(--bgl-yellow-light);
 }
-.alert.error[data-v-4017e821] {
+.alert.error[data-v-0ec1391d] {
   background: var(--bgl-red-tint);
 }
-.alert_close[data-v-4017e821]{
+.alert_close[data-v-0ec1391d]{
   display: none;
   position: absolute;
   inset-inline-end: 1.5rem;
   top: 2rem;
 }
-.alert[dismissable="true"] .alert_close[data-v-4017e821]{
+.alert[dismissable="true"] .alert_close[data-v-0ec1391d]{
 display: block;
 }
-.alert[dismissable="true"] p[data-v-4017e821]{
+.alert[dismissable="true"] p[data-v-0ec1391d]{
   width: calc(100% - 5rem);
 }
 
@@ -1072,10 +1072,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-6b40f812] {
+.selectinput[data-v-39ae2ac8] {
 	width: 100%;
 }
-.selectinput-option[data-v-6b40f812] {
+.selectinput-option[data-v-39ae2ac8] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1086,14 +1086,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-6b40f812] {
+.selectinput-options[data-v-39ae2ac8] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-6b40f812]:hover {
+.selectinput-option[data-v-39ae2ac8]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-6b40f812] {
+.isEmpty p[data-v-39ae2ac8] {
 	opacity: 0.3;
 }
 
@@ -1281,68 +1281,68 @@ display: block;
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-df718b64] {
+.bagel-input textarea[data-v-534ec341] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-df718b64] {
+.bagel-input.text-input textarea[data-v-534ec341] {
 	resize: none;
 }
-.code textarea[data-v-df718b64] {
+.code textarea[data-v-534ec341] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.code textarea[data-v-df718b64]::placeholder{
+.code textarea[data-v-534ec341]::placeholder{
 	color: var(--bgl-white) !important;
 	opacity: 0.3;
 }
-.bagel-input.toggleEdit[data-v-df718b64]:hover {
+.bagel-input.toggleEdit[data-v-534ec341]:hover {
 	background-color: var(--input-bg);
 }
-.bagel-input.small[data-v-df718b64] {
+.bagel-input.small[data-v-534ec341] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-df718b64] {
+.bagel-input.dense label[data-v-534ec341] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input label[data-v-df718b64] {
+.bagel-input label[data-v-534ec341] {
 	font-size: var(--label-font-size);
 }
-.toggleEditBtn[data-v-df718b64] {
+.toggleEditBtn[data-v-534ec341] {
 	position: absolute;
 	right: -24px;
 	top: 4;
 	opacity: 0;
 }
-.textInputIconWrap[data-v-df718b64] {
+.textInputIconWrap[data-v-534ec341] {
 	position: relative;
 }
-.textInputIconWrap .bgl_icon-font[data-v-df718b64] {
+.textInputIconWrap .bgl_icon-font[data-v-534ec341] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-df718b64] {
+.txtInputIconStart .iconStart[data-v-534ec341] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-df718b64] {
+.txtInputIconStart textarea[data-v-534ec341] {
 	padding-inline-start: 2rem;
 }
-.bagel-input:hover .toggleEditBtn[data-v-df718b64],
-.bagel-input.editMode .toggleEditBtn[data-v-df718b64] {
+.bagel-input:hover .toggleEditBtn[data-v-534ec341],
+.bagel-input.editMode .toggleEditBtn[data-v-534ec341] {
 	opacity: 1;
 }
-.bagel-input.small textarea[data-v-df718b64] {
+.bagel-input.small textarea[data-v-534ec341] {
 	height: 30px;
 }
 
@@ -1480,7 +1480,7 @@ display: block;
 }
 }
 
-.radio-pill label[data-v-41859ed6] {
+.radio-pill label[data-v-880c5069] {
 	color: var(--bgl-primary);
 	white-space: nowrap;
 	border-radius: calc(var(--btn-border-radius) * 2);
@@ -1494,67 +1494,74 @@ display: block;
 	background: var(--bgl-white);
 	user-select: none;
 }
-.radio-pill label[data-v-41859ed6]:hover {
+.radio-pill label[data-v-880c5069]:hover {
 	filter: var(--bgl-hover-filter);
 }
-.radio-pill input[data-v-41859ed6] {
+.radio-pill input[data-v-880c5069] {
 	display: none;
 }
-.radio-pill input:checked ~ label[data-v-41859ed6] {
+.radio-pill input:checked ~ label[data-v-880c5069] {
 	background: var(--bgl-primary);
 	color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-0dbacaa0] {
+.bagel-input .fileUploadWrap[data-v-4f0a6b20] {
+	--width: 320px;
 	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;
+	min-height: 132px;
+	max-height: 500px;
 	font-size: var(--input-font-size);
+	overflow-y: auto;
+	background: var(--input-bg);
 }
-.previewName[data-v-0dbacaa0] {
+.previewName[data-v-4f0a6b20] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
 	display: grid;
-	grid-template-columns: 1fr 22px;
+	grid-template-columns: auto 1fr 22px;
+	gap: 1rem;
 	align-items: center;
 	padding-inline: 14px;
 }
-.previewName p[data-v-0dbacaa0] {
+.previewName p[data-v-4f0a6b20] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-0dbacaa0] {
+.imagePreviewWrap[data-v-4f0a6b20] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
-	height: 90px;
 	padding: 5px;
+	min-height: 90px;
 }
-img.preview[data-v-0dbacaa0] {
-	height: 80px;
+img.preview[data-v-4f0a6b20] {
+	width: var(--width);
+	/* max-width: calc(var(--width) * 2); */
 	border-radius: var(--input-border-radius);
-	object-fit: contain;
+	object-fit: cover;
+	background: var(--bgl-white);
 }
-.fileUploadWrap.dragover[data-v-0dbacaa0],
-.fileUploadWrap[data-v-0dbacaa0]:hover {
+.fileUploadWrap.dragover[data-v-4f0a6b20],
+.fileUploadWrap[data-v-4f0a6b20]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-0dbacaa0] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-4f0a6b20] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-0dbacaa0]:after {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-4f0a6b20]:after {
 	content: 'Drop files here or click to upload';
 }
-.pie[data-v-0dbacaa0] {
+.pie[data-v-4f0a6b20] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1562,7 +1569,7 @@ img.preview[data-v-0dbacaa0] {
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-0dbacaa0]:before {
+.pie[data-v-4f0a6b20]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1580,26 +1587,26 @@ img.preview[data-v-0dbacaa0] {
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-0dbacaa0] {
+.pie .success[data-v-4f0a6b20] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-0dbacaa0] {
+.pie .progress[data-v-4f0a6b20] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-0dbacaa0] {
+.pie.complete .progress[data-v-4f0a6b20] {
 	display: none;
 }
-.pie.complete .success[data-v-0dbacaa0] {
+.pie.complete .success[data-v-4f0a6b20] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-0dbacaa0]:before {
+.pie.complete[data-v-4f0a6b20]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-0dbacaa0] {
+.pie.complete[data-v-4f0a6b20] {
 	color: var(--bgl-green);
 }
 
@@ -1972,31 +1979,42 @@ p {
   color: var(--bgl-primary) !important;
 }
 
-.bgl_tabs_wrap[data-v-ca10eb5f] {
+.bgl_tabs_wrap[data-v-05be4d6e] {
+	background: var(--input-bg);
+	border-radius: calc(var(--input-border-radius) * 1.4);
+	padding-inline: calc(var(--btn-padding) / 8);
+	padding-block: calc(var(--btn-padding) / 8);
+	box-shadow: inset 0 0 10px #00000012;
+	gap: 0.25rem;
 }
-.bgl_tab[data-v-ca10eb5f] {
+.bgl_tab[data-v-05be4d6e] {
 	border: none;
-	border-bottom: 2px solid var(--border-color);
 	background: transparent;
+	cursor: pointer;
 	font-size: var(--input-font-size);
 	font-family: inherit;
-	cursor: pointer;
 	transition: var(--bgl-transition);
-	padding-inline-start: calc(var(--btn-padding) / 2);
-	padding-inline-end: calc(var(--btn-padding) / 2);
-	padding-bottom: calc(var(--btn-padding) / 4);
+	padding-inline: calc(var(--btn-padding) / 2);
+	padding-block: calc(var(--btn-padding) / 8);
+	border-radius: var(--input-border-radius);
 }
-.bgl_tab.currentTab[data-v-ca10eb5f] {
-	border-bottom: 2px solid var(--primary-color);
+.bgl_tab.currentTab[data-v-05be4d6e],
+.bgl_tab.active[data-v-05be4d6e] {
+	background: var(--bgl-white);
+	box-shadow: 0 0 10px #00000011;
+	position: relative;
 }
-.bgl_tab.active[data-v-ca10eb5f] {
-	color: var(--bgl-primary);
-	border-bottom: 2px solid var(--bgl-primary);
+.bgl_tab[data-v-05be4d6e]:hover {
+	background: var(--input-bg);
+	filter: brightness(95%);
 }
-.bgl_tab[data-v-ca10eb5f]:hover {
-	color: var(--bgl-primary);
+.bgl_tab.currentTab[data-v-05be4d6e]:hover,
+.bgl_tab.active[data-v-05be4d6e]:hover {
+	background: var(--bgl-white);
+	filter: brightness(100%);
+	box-shadow: 0 0 10px #00000022;
 }
-.bgl_tab[data-v-ca10eb5f]:active {
+.bgl_tab[data-v-05be4d6e]:active {
 	-webkit-filter: brightness(70%);
 	filter: brightness(70%);
 }

package/dist/utils/BagelFormUtils.d.ts

@@ -10,6 +10,7 @@ interface InputOptions {
     class?: string;
     defaultValue?: string;
     disabled?: boolean;
+    helptext?: string;
 }
 interface TextInputOptions extends InputOptions {
     type?: 'text' | 'tel' | 'email';

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;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;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,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,KAAK,CAQvF;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,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAE7C,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;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;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,CAAC;AAEpC,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAcP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAUP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}

package/dist/utils/index.d.ts

@@ -11,4 +11,5 @@ export declare const iffer: (field: any, itemData: any) => any;
 export declare const denullify: (itemData?: Record<string, any>, fieldID?: string) => any;
 export { formatString } from './strings';
 export * as bagelFormUtils from './BagelFormUtils';
+export { useLang } from './lang';
 //# 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":"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,OAEP,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,kBAI1B,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;AAEzC,OAAO,KAAK,cAAc,MAAM,kBAAkB,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,OAEP,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,kBAI1B,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;AAEzC,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/utils/lang.d.ts

@@ -0,0 +1,7 @@
+export declare function useLang(): {
+    lang: import('vue').WritableComputedRef<string>;
+    $tdb: (langEl: Record<string, any>) => any;
+    availableLangs: import('vue').WritableComputedRef<string[]>;
+    defaultLang: import('vue').WritableComputedRef<string>;
+};
+//# sourceMappingURL=lang.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../src/utils/lang.ts"],"names":[],"mappings":"AAcA,wBAAgB,OAAO;;mBAMA,OAAO,MAAM,EAAE,GAAG,CAAC;;;EAkBzC"}

package/package.json

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

package/src/components/Alert.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="alert" :class="[type]" v-if="!isDismissed" :dismissable="dismissable" >
-		<Icon class="alert_icon" :icon="type" :size="2" :color="color[type]"/>
+		<Icon v-if="icon !== 'none'" class="alert_icon" :icon="icon || type" :size="2" :color="color[type]"/>
 		<p class="m-0">
 			{{ message }}
 		</p>
@@ -10,12 +10,14 @@
 
 <script setup lang="ts">
 import { Icon } from '@bagelink/vue';
+import type { MaterialIcons } from '@bagelink/vue';
 import Btn from './Btn.vue';
 
 type Props = {
   message: string;
   dismissable?: boolean;
-  type: 'info' | 'warning' | 'error';
+  type?: 'info' | 'warning' | 'error';
+  icon?: MaterialIcons | 'none';
 }
 
 withDefaults(

package/src/components/TableSchema.vue

@@ -6,15 +6,18 @@
 					class="col"
 					v-for="field in computedSchema"
 					:key="field.id"
-					@click="sort(field?.id || '')">
+					@click="sort(field?.id || '')"
+				>
 					<div class="flex">
 						{{ field.label || keyToLabel(field.id) }}
 						<div
 							class="list-arrows"
-							:class="{ sorted: sortField === field.id }">
+							:class="{ sorted: sortField === field.id }"
+						>
 							<MaterialIcon
 								:class="{ desc: sortDirection === 'DESC' }"
-								icon="keyboard_arrow_up" />
+								icon="keyboard_arrow_up"
+							/>
 						</div>
 					</div>
 				</th>
@@ -24,25 +27,29 @@
 					v-for="row in computedData"
 					:key="row.id"
 					@click="selectElement(row)"
-					class="row row-item position-relative">
+					class="row row-item position-relative"
+				>
 					<td
 						class="col"
 						v-for="field in computedSchema.map((c) => ({
 							...c,
 							transform: undefined,
 						}))"
-						:key="`${field.id}-${row.id}`">
+						:key="`${field.id}-${row.id}`"
+					>
 						<slot
 							v-if="field.id && slots[field.id]"
 							:name="field.id"
 							:row="row"
-							:field="field" />
+							:field="field"
+						/>
 						<div v-else>
 							<BglField
 								class="embedded-field"
 								:field="field"
 								:modelValue="row"
-								label="" />
+								label=""
+							/>
 						</div>
 					</td>
 				</tr>
@@ -65,14 +72,17 @@ const loading = $ref(true);
 
 const props = defineProps<{
 	data: any[];
-	schema: BglFormSchemaT | (() => BglFormSchemaT);
+	schema?: BglFormSchemaT | (() => BglFormSchemaT);
 }>();
 
 const computedSchema = $computed(() => {
 	if (typeof props.schema === 'function') {
 		return props.schema();
 	}
-	return props.schema;
+	if (props.schema) return props.schema;
+	const keys = [...new Set((props.data || []).map(Object.keys).flat())] as string[];
+	const schema: BglFormSchemaT = keys.map((id) => ({ id, label: keyToLabel(id) }));
+	return schema;
 });
 
 const emit = defineEmits(['select', 'orderBy']);