@bagelink/vue 0.0.302 → 0.0.308

package/src/components/TableSchema.vue

@@ -2,13 +2,9 @@
 	<div class="table-list-wrap h-100">
 		<table class="infinite-wrapper">
 			<thead class="row first-row">
-				<th
-					class="col"
-					v-for="field in computedSchema"
-					:key="field.id" @click="sort(field?.id || '')"
-				>
+				<th class="col" v-for="field in computedSchema" :key="field.id" @click="sort(field?.id || '')">
 					<div class="flex">
-						{{ field.id }}
+						{{ field.label || keyToLabel(field.id) }}
 						<div class="list-arrows" :class="{ sorted: sortField === field.id }">
 							<MaterialIcon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 						</div>
@@ -16,12 +12,7 @@
 				</th>
 			</thead>
 			<tbody ref="infinite" class="rows infinite" :class="{ loading }">
-				<tr
-					v-for="row in data"
-					:key="row.id"
-					@click="selectElement(row)"
-					class="row row-item position-relative"
-				>
+				<tr v-for="row in data" :key="row.id" @click="selectElement(row)" class="row row-item position-relative">
 					<td class="col" v-for="field in computedSchema" :key="`${field.id}-${row.id}`">
 						<slot v-if="field.id && slots[field.id]" :name="field.id" :row="row" :field="field" />
 						<div v-else>
@@ -40,14 +31,15 @@ import {
 	type BglFormSchemaT,
 	MaterialIcon,
 	BglField,
+	keyToLabel,
 } from '@bagelink/vue';
 
 const slots = useSlots();
 const loading = $ref(true);
 
 const props = defineProps<{
-	data: any[];
-	schema: BglFormSchemaT | (() => BglFormSchemaT);
+  data: any[];
+  schema: BglFormSchemaT | (() => BglFormSchemaT);
 }>();
 
 const computedSchema = $computed(() => {
@@ -78,128 +70,126 @@ const sort = (fieldname: string) => {
 
 <style scoped>
 .list-arrows {
-	opacity: 0;
+  opacity: 0;
 }
 
 .list-arrows .bgl_icon-font {
-	transition: all ease-in-out 0.2s;
+  transition: all ease-in-out 0.2s;
 }
 
 .list-arrows.sorted {
-	opacity: 1;
+  opacity: 1;
 }
 
 .col img {
-	height: 35px;
-	margin-top: -14px;
-	margin-bottom: -14px;
-	border-radius: 5px;
+  height: 35px;
+  margin-top: -14px;
+  margin-bottom: -14px;
+  border-radius: 5px;
 }
 
 .list-arrows.sorted .desc {
-	transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 table {
-	border-collapse: separate;
-	border-spacing: 0 15px;
-	border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0 15px;
+  border-collapse: collapse;
 }
 
 th {
-	font-weight: 400;
+  font-weight: 400;
 }
 
 .row {
-	border-bottom: 1px solid var(--border-color);
-	cursor: pointer;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
 }
 
 .row.first-row {
-	font-size: 0.8rem;
-	color: var(--bgl-black-tint);
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	background: var(--bgl-white);
-	height: 50px;
-	vertical-align: bottom;
+  font-size: 0.8rem;
+  color: var(--bgl-black-tint);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--bgl-white);
+  height: 50px;
+  vertical-align: bottom;
 }
 
 .row.first-row::after {
-	content: "";
-	border-bottom: 1px solid var(--border-color);
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: -1px;
+  content: "";
+  border-bottom: 1px solid var(--border-color);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
 }
 
 .first-row .col {
-	cursor: pointer;
-	background: var(--bgl-white);
+  cursor: pointer;
+  background: var(--bgl-white);
 }
 
 .col {
-	white-space: nowrap;
-	padding: 14px;
-	transition: var(--bgl-transition);
-	line-height: 1;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	align-items: center;
+  white-space: nowrap;
+padding: 0.75rem 0.5rem;
+  transition: var(--bgl-transition);
+  line-height: 1;
+  align-items: center;
 }
 
 .col>div {
-	display: flex;
-	gap: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
 }
 
 .max-col-width {
-	max-width: 30vw;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  max-width: 30vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .col.check .bgl_icon-font {
-	border-radius: 100%;
-	background: var(--bgl-blue-20);
-	color: var(--bgl-primary);
-	width: 20px;
-	height: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-top: -2px;
+  border-radius: 100%;
+  background: var(--bgl-blue-20);
+  color: var(--bgl-primary);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: -2px;
 }
 
 .rows {
-	font-size: 0.8125em;
+  font-size: 0.8125em;
 }
 
 .table-list {
-	height: 100%;
-	position: relative;
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	overflow: auto;
+  height: 100%;
+  position: relative;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  overflow: auto;
 }
 
 .BagelTable .table-list {
-	overflow: unset;
+  overflow: unset;
 }
 
 .row-item {
-	height: 50px;
-	transition: all 200ms ease;
+  height: 50px;
+  transition: all 200ms ease;
 }
 
 .row-item:hover {
-	background: var(--bgl-gray-light);
+  background: var(--bgl-gray-light);
 }
 
 .infinite-wrapper {
-	overflow-y: auto;
-	width: 100%;
+  overflow-y: auto;
+  width: 100%;
 }
 </style>

package/src/components/index.ts

@@ -1,4 +1,3 @@
-export { default as LangText } from './LangText.vue';
 export { default as RTXEditor } from './RTXEditor.vue';
 export { default as MaterialIcon } from './MaterialIcon.vue';
 export { default as Icon } from './MaterialIcon.vue';
@@ -24,6 +23,7 @@ export { default as ComboBox } from './ComboBox.vue';
 export { default as Alert } from './Alert.vue';
 export { default as Badge } from './Badge.vue';
 export { default as BglVideo } from './BglVideo.vue';
+export { default as Carousel } from './Carousel.vue';
 
 export * from './form';
 export * from './dashboard';

package/src/components/whatsapp/form/MsgTemplate.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="main-content">
 		<PageTitle>Whatsapp Template</PageTitle>
-		<div class="view-wrapper card thin">
+		<div class="view-wrapper bgl_card thin">
 			<div class="whatsapp-wrap">
 				<div class="create-template-form">
 					<BagelForm :schema="whatsappTemplateSchema" v-model="localWhatsappData" @submit="upsertTemplate" />

package/src/styles/bagel.css

@@ -3,9 +3,10 @@
 @import "buttons.css";
 @import "text.css";
 @import "scrollbar.css";
+@import "transitions.css";
+@import "loginCard.css";
 @import "theme.css";
 @import "dark.css";
-@import "transitions.css";
 @import "./fonts/Ploni.css";
 
 :root {
@@ -14,12 +15,20 @@
 }
 
 body {
-    width: 100vw;
+    max-width: 100vw;
     height: 100vh;
     padding: 0;
     margin: 0;
 }
 
+.grid>* {
+    min-height: 0;
+}
+
+* {
+    box-sizing: border-box;
+}
+
 @media (min-width: 992px) {}
 
 @media screen and (max-width: 910px) {

package/src/styles/buttons.css

@@ -64,6 +64,7 @@
 .hover:active {
     filter: brightness(80%);
 }
+
 @media screen and (max-width: 910px) {
     .bgl_btn {
         padding: 0 20px;

package/src/styles/inputs.css

@@ -1,212 +1,211 @@
 input,
 textarea,
 select {
-	font-family: inherit;
-	width: 100%;
+    font-family: inherit;
+    width: 100%;
 }
 
 .bagel-input {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	text-align: start;
-	margin-bottom: 0.5rem;
-	width: 100%;
-	color: var(--bgl-black);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    text-align: start;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    color: var(--bgl-black);
 }
 
 .bagel-input::placeholder .bagel-input label {
-	display: block;
-	font-size: var(--label-font-size);
-	margin-bottom: 2px;
-	line-height: 1.3;
+    display: block;
+    font-size: var(--label-font-size);
+    margin-bottom: 2px;
+    line-height: 1.3;
 }
 
 .bagel-input::placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }
 
 .bagel-input label {
-	color: var(--label-color);
+    color: var(--label-color);
 }
 
 .bagel-input input,
 .bagel-input select,
 .custom-select .input {
-	height: var(--input-height);
-	font-size: var(--input-font-size);
+    height: var(--input-height);
+    font-size: var(--input-font-size);
 }
 
 .bagel-input input,
 .bagel-input textarea,
 .bagel-input select,
 .custom-select .input {
-	background: var(--input-bg);
-	border: none;
-	padding: 0.7rem;
-	border-radius: var(--input-border-radius);
-	color: var(--input-color);
-	min-width: calc(var(--input-height) * 3);
-	width: 100%;
+    background: var(--input-bg);
+    border: none;
+    padding: 0.7rem;
+    border-radius: var(--input-border-radius);
+    color: var(--input-color);
+    min-width: calc(var(--input-height) * 3);
+    width: 100%;
 }
 
 .bagel-input input::placeholder,
 .bagel-input textarea::placeholder,
 .bagel-input select::placeholder,
 .custom-select .input::placeholder {
-	color: var(--placeholder-color);
+    color: var(--placeholder-color);
 }
 
 .bagel-input.search-wrap {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 .bagel-input.search-wrap input {
-	padding-inline-end: 2rem;
+    padding-inline-end: 2rem;
 }
 
 .bagel-input.search-wrap .bgl_icon-font {
-	margin-inline-start: -1.75rem;
+    margin-inline-start: -1.75rem;
 }
 
 .bagel-input select {
-	height: var(--input-height);
+    height: var(--input-height);
 }
 
 .bagel-input textarea {
-	resize: vertical;
-	min-height: calc(var(--input-height) * 3);
-	line-height: 1.5;
+    resize: vertical;
+    min-height: calc(var(--input-height) * 3);
+    line-height: 1.5;
 }
 
 .bagel-input.wider input {
-	min-width: 320px;
+    min-width: 320px;
 }
 
 .bagel-input input[type="radio"] {
-	padding: 0;
-	width: fit-content;
+    padding: 0;
+    width: fit-content;
 }
 
 .bagel-input:focus-within label {
-	color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }
 
 .bagel-input select.no-edit,
 .bagel-input input.no-edit,
 .bagel-input textarea.no-edit,
 .bagel-input .switch.no-edit {
-	pointer-events: none;
-	outline: none;
+    pointer-events: none;
+    outline: none;
 }
 
 .bagel-input label.active {
-	color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }
 
 .inline-80 {
-	display: inline-block;
-	width: 80%;
+    display: inline-block;
+    width: 80%;
 }
 
 .inline-20 {
-	display: inline-block;
-	width: 20%;
+    display: inline-block;
+    width: 20%;
 }
 
 .inline-10 {
-	display: inline-block;
-	width: 20%;
+    display: inline-block;
+    width: 20%;
 }
 
 .inline-50 {
-	display: inline-block;
-	width: 49%;
-	margin: 0 0.5%;
+    display: inline-block;
+    width: 49%;
+    margin: 0 0.5%;
 }
 
 .custom-select .input {
-	height: var(--input-height);
-	font-size: var(--input-font-size);
+    height: var(--input-height);
+    font-size: var(--input-font-size);
 }
 
 .custom-select .input {
-	background: var(--input-bg);
-	border: none;
-	padding: 0.7rem;
-	border-radius: var(--input-border-radius);
-	color: var(--input-color);
-	min-width: calc(var(--input-height) * 3);
-	width: 100%;
+    background: var(--input-bg);
+    border: none;
+    padding: 0.7rem;
+    border-radius: var(--input-border-radius);
+    color: var(--input-color);
+    min-width: calc(var(--input-height) * 3);
+    width: 100%;
 }
 
 .input.active,
 .bagel-input input:focus-visible,
 .bagel-input select:focus-visible,
 .bagel-input textarea:focus-visible {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
+    outline: none;
+    box-shadow: inset 0 0 10px #00000012;
 }
 
 .bagel-input input[type="number"]::-webkit-inner-spin-button,
 .bagel-input input[type="number"]::-webkit-outer-spin-button {
-	-webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 .label-count-0 label {
-	display: none;
+    display: none;
 }
 
 .label-count-0 button.bgl_btn.bgl_flatBtn {
-	/* background: var(--bgl-blue-light); */
-	margin-right: 5px;
+    margin-right: 5px;
 }
 
 .label-count-0 button.bgl_btn.bgl_flatBtn:hover {
-	background: var(--bgl-hover-filter);
+    background: var(--bgl-hover-filter);
 }
 
 .bagel-input input[type="color"] {
-	padding: 0.025rem 0.05rem;
-	display: block;
-	width: var(--input-height);
-	height: var(--input-height);
-	border: none;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	cursor: pointer;
+    padding: 0.025rem 0.05rem;
+    display: block;
+    width: var(--input-height);
+    height: var(--input-height);
+    border: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
 }
 
 .bagel-input input[type="color"]::-webkit-color-swatch {
-	border-radius: var(--input-border-radius);
-	border: none;
-	transition: box-shadow 200ms ease;
+    border-radius: var(--input-border-radius);
+    border: none;
+    transition: box-shadow 200ms ease;
 }
 
 .bagel-input input[type="color"]::-moz-color-swatch {
-	border-radius: var(--input-border-radius);
-	border: none;
-	transition: box-shadow 200ms ease;
+    border-radius: var(--input-border-radius);
+    border: none;
+    transition: box-shadow 200ms ease;
 }
 
 .bagel-input input[type="color"]::-webkit-color-swatch:hover {
-	box-shadow: inset 0 0 10px #00000050;
+    box-shadow: inset 0 0 10px #00000050;
 }
 
 .bagel-input input[type="color"]::-moz-color-swatch:hover {
-	box-shadow: inset 0 0 10px #00000050;
+    box-shadow: inset 0 0 10px #00000050;
 }
 
 @media screen and (max-width: 910px) {
-	.bagel-input.wider input {
-		min-width: 120px;
-	}
-
-	.bagel-input label {
-		font-size: calc(var(--input-font-size) / 1.1);
-		line-height: 1.2;
-	}
-}
+    .bagel-input.wider input {
+        min-width: 120px;
+    }
+
+    .bagel-input label {
+        font-size: calc(var(--input-font-size) / 1.1);
+        line-height: 1.2;
+    }
+}