@bagelink/vue 0.0.247 → 0.0.250

package/package.json

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

package/src/components/Btn.vue

@@ -1,15 +1,17 @@
 <template>
-	<component :is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :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,
+			'bgl_btn-icon': icon && !slots['default'] && !value,
+			bgl_btn: !icon || slots['default'] || value,
 			thin,
 			round,
-			'flatBtn': flat,
-			'btn-border': border
-		}">
+			'bgl_flatBtn': flat,
+			'bgl_btn-border': border
+		}"
+	>
 		<div class="loading" v-if="loading" />
-		<div v-else class="btn-flex">
+		<div v-else class="bgl_btn-flex">
 			<MaterialIcon v-if="icon" :icon="icon" />
 			<slot />
 			<template v-if="!slots['default'] && value">
@@ -123,7 +125,7 @@ const computedBackgroundColor = $computed(
 	}
 }
 
-.btn-icon {
+.bgl_btn-icon {
 	height: var(--btn-height);
 	width: var(--btn-height);
 	border-radius: 100%;
@@ -134,118 +136,118 @@ const computedBackgroundColor = $computed(
 	transition: var(--bgl-transition);
 }
 
-.btn {
+.bgl_btn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
 	text-decoration: none;
 }
 
-.btn[disabled="true"] {
+.bgl_btn[disabled="true"] {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
 
-.btn-flex {
+.bgl_btn-flex {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	justify-content: center;
 }
 
-.btn .icon-font {
+.bgl_btn .bgl_.bgl_icon-font {
 	font-size: calc(var(--input-font-size) * 1.3);
 }
 
-.btn,
-.btn-icon {
+.bgl_btn,
+.bgl_btn-icon {
 	background-color: v-bind(computedBackgroundColor);
 	color: v-bind(cumputedTextColor);
 }
 
-.btn:hover,
-.btn-icon:hover {
+.bgl_btn:hover,
+.bgl_btn-icon:hover {
 	filter: var(--bgl-hover-filter);
 }
 
-.btn:active,
-.btn-icon:active {
+.bgl_btn:active,
+.bgl_btn-icon:active {
 	filter: var(--bgl-active-filter);
 }
 
-.btn.flatBtn {
+.bgl_btn.bgl_flatBtn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
 
-.btn-icon.flatBtn {
+.bgl_btn-icon.bgl_flatBtn {
 	background: transparent;
 }
 
-.btn.flatBtn:hover,
-.btn-icon.flatBtn:hover {
+.bgl_btn.bgl_flatBtn:hover,
+.bgl_btn-icon.bgl_flatBtn:hover {
 	filter: var(--bgl-active-filter);
 }
 
-.btn.flatBtn:active,
-.btn-icon.flatBtn:active {
+.bgl_btn.bgl_flatBtn:active,
+.bgl_btn-icon.bgl_flatBtn:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
 
-.btn.flatBtn.red,
-.btn-icon.flatBtn.red {
+.bgl_btn.bgl_flatBtn.red,
+.bgl_btn-icon.bgl_flatBtn.red {
 	color: var(--bgl-red);
 }
 
-.btn.flatBtn.light,
-.btn-icon.flatBtn.light {
+.bgl_btn.bgl_flatBtn.light,
+.bgl_btn-icon.bgl_flatBtn.light {
 	color: var(--bgl-primary-tint);
 }
 
-.btn.flatBtn.black,
-.btn-icon.flatBtn.black {
+.bgl_btn.bgl_flatBtn.black,
+.bgl_btn-icon.bgl_flatBtn.black {
 	color: var(--bgl-black);
 }
 
-.btn.flatBtn.gray,
-.btn-icon.flatBtn.gray {
+.bgl_btn.bgl_flatBtn.gray,
+.bgl_btn-icon.bgl_flatBtn.gray {
 	color: var(--bgl-gray);
 }
 
-.btn.thin {
+.bgl_btn.thin {
 	padding-left: calc(var(--btn-padding) / 2);
 	padding-right: calc(var(--btn-padding) / 2);
 }
 
-.btn.round {
+.bgl_btn.round {
 	border-radius: calc(var(--btn-border-radius) * 2);
 }
 
-.btn-icon.thin {
+.bgl_btn-icon.thin {
 	height: calc(var(--btn-height) / 1.5);
 	width: calc(var(--btn-height) / 1.5);
 	line-height: 1;
 }
 
-[dir="rtl"] .icon-font {
+[dir="rtl"] .bgl_.bgl_icon-font {
 	transform: rotateY(180deg);
 }
 
-.btn-border {
+.bgl_btn-border {
 	outline: 1px solid v-bind(computedBackgroundColor);
 	color: v-bind(computedBackgroundColor);
 	background: transparent;
 }
 
-.btn-border:hover {
+.bgl_btn-border:hover {
 	color: var(--bgl-white);
 	background: v-bind(computedBackgroundColor);
 	filter: brightness(100%);
 }
 
-.btn-border:active {
+.bgl_btn-border:active {
 	filter: brightness(80%);
 }
 </style>

package/src/components/Comments.vue

@@ -225,13 +225,13 @@ const newComment = async () => {
   filter: brightness(70%);
 }
 
-.icon-font.delete,
-.icon-font.save {
+.bgl_icon-font.delete,
+.bgl_icon-font.save {
   display: none;
 }
 
-.editable .icon-font.delete,
-.editable .icon-font.save {
+.editable .bgl_icon-font.delete,
+.editable .bgl_icon-font.save {
   display: block;
 }
 

package/src/components/MaterialIcon.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="icon-font"
+		class="bgl_icon-font"
 		:style="{ fontSize: `${size}rem` }"
 	>
 		{{ icon }}

package/src/components/NavBar.vue

@@ -158,7 +158,7 @@ withDefaults(
   pointer-events: all;
 }
 
-.nav-button .icon-font {
+.nav-button .bgl_icon-font {
   font-size: 22px;
   margin: 0.25rem 10px;
   padding: 10px;
@@ -172,8 +172,8 @@ withDefaults(
   pointer-events: all;
 }
 
-.nav-button:hover .icon-font,
-.nav-button.router-link-active .icon-font {
+.nav-button:hover .bgl_icon-font,
+.nav-button.router-link-active .bgl_icon-font {
   background: var(--bgl-white);
   color: var(--bgl-primary);
 }
@@ -269,7 +269,7 @@ withDefaults(
     margin-inline-start: 0rem;
   }
 
-  .nav.open .nav-button .icon-font {
+  .nav.open .nav-button .bgl_icon-font {
     margin: 0;
     background: transparent;
   }
@@ -334,7 +334,7 @@ withDefaults(
     margin: 12px 0.25rem;
   }
 
-  .nav-button .icon-font {
+  .nav-button .bgl_icon-font {
     padding: 2px 0 0 0;
     margin: 0;
     height: 30px;

package/src/components/TableSchema.vue

@@ -73,7 +73,7 @@ const sort = (fieldname: string) => {
 	opacity: 0;
 }
 
-.list-arrows .icon-font {
+.list-arrows .bgl_icon-font {
 	transition: all ease-in-out 0.2s;
 }
 
@@ -153,7 +153,7 @@ th {
 	text-overflow: ellipsis;
 }
 
-.col.check .icon-font {
+.col.check .bgl_icon-font {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);

package/src/components/form/inputs/TableField.vue

@@ -189,7 +189,7 @@ onMounted(() => {
 	cursor: grab;
 }
 
-.btn.thin.flatBtn {
+.bgl_btn.thin.bgl_flatBtn {
 	margin-inline-start: -1rem;
 	margin-top: 1rem;
 }
@@ -252,18 +252,18 @@ onMounted(() => {
 	background: var(--border-color);
 }
 
-.table-action>.icon-font {
+.table-action>.bgl_icon-font {
 	padding: 11.4px;
 	cursor: pointer;
 	transition: var(--bgl-transition);
 }
 
-.table-action:hover>.icon-font {
+.table-action:hover>.bgl_icon-font {
 	background: var(--bgl-red);
 	color: var(--bgl-white);
 }
 
-.table-action:active>.icon-font {
+.table-action:active>.bgl_icon-font {
 	filter: brightness(90%);
 }
 

package/src/components/form/inputs/TextInput.vue

@@ -1,22 +1,31 @@
 <template>
-	<div class="bagel-input text-input"
-		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart, code }"
-		:title="title">
+	<div
+		class="bagel-input text-input"
+		:class="{ dense, small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart, code }"
+		:title="title"
+	>
 		<label :for="id">
 			{{ label }}
-			<input :autocomplete="autocomplete" v-if="!multiline && !autoheight && !code" :id="id" v-model="inputVal"
-				:type="type" :rows="1" ref="input" :placeholder="placeholder || label" :disabled="!editMode"
-				:required="required" :pattern="pattern" v-bind="nativeInputAttrs" @dblclick="toggleEditAction">
-			<textarea v-else :id="id" v-model="inputVal" :type="type" :rows="rows" ref="input"
+			<input
+				:title="title" :autocomplete="autocomplete" v-if="!multiline && !autoheight && !code" :id="id"
+				v-model="inputVal" :type="type" :rows="1" ref="input" :placeholder="placeholder || label"
+				:disabled="!editMode" :required="required" :pattern="pattern" v-bind="nativeInputAttrs"
+				@dblclick="toggleEditAction"
+			>
+			<textarea
+				:title="title" v-else :id="id" v-model="inputVal" :type="type" :rows="rows" ref="input"
 				:placeholder="placeholder || label" :disabled="!editMode" :required="required" :pattern="pattern"
-				v-bind="nativeInputAttrs" @dblclick="toggleEditAction" />
+				v-bind="nativeInputAttrs" @dblclick="toggleEditAction"
+			/>
 			<p v-if="helptext">{{ helptext }}</p>
 		</label>
 
 		<MaterialIcon class="iconStart" v-if="iconStart" :icon="iconStart" />
 		<MaterialIcon v-if="icon" :icon="icon" />
-		<Btn class="toggleEditBtn" v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode ? 'check' : 'edit'"
-			flat />
+		<Btn
+			class="toggleEditBtn" v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode ? 'check' : 'edit'"
+			flat
+		/>
 	</div>
 </template>
 
@@ -36,6 +45,7 @@ const props = withDefaults(
 		modelValue?: string | number;
 		label?: string;
 		small?: boolean;
+		dense?: boolean;
 		required?: boolean;
 		pattern?: string;
 		shrink?: boolean;
@@ -130,7 +140,11 @@ watch(
 	margin-bottom: 0;
 	height: 30px;
 }
-
+.bagel-input.dense label{
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
 .toggleEditBtn {
 	position: absolute;
 	right: -24px;
@@ -142,7 +156,7 @@ watch(
 	position: relative;
 }
 
-.textInputIconWrap .icon-font {
+.textInputIconWrap .bgl_icon-font {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;

package/src/components/formkit/FileUploader.vue

@@ -240,7 +240,7 @@ function onDrop(e: DragEvent) {
 .uploading {}
 */
 
-.img-label .icon-font {
+.img-label .bgl_icon-font {
 	font-size: 30px;
 	margin-bottom: 10px;
 }

package/src/components/formkit/MiscFields.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Btn } from "@bagelink/vue";
+import { Btn } from '@bagelink/vue';
 
 const props = defineProps<{
 	context: Record<string, any>;
@@ -41,7 +41,7 @@ const addToField = (field: any) => {
 	margin-bottom: auto;
 }
 
-.gray.thin.flatBtn.btn.add-btn {
+.gray.thin.bgl_flatBtn.bgl_btn.add-btn {
 	display: flex;
 	gap: 0.5rem;
 	align-items: center;

package/src/styles/buttons.css

@@ -1,7 +1,7 @@
 button,
-.btn,
-.flatBtn,
-.btn-icon {
+.bgl_btn,
+.bgl_flatBtn,
+.bgl_btn-icon {
     font-family: inherit;
     white-space: nowrap;
     cursor: pointer;
@@ -49,13 +49,13 @@ button,
 }
 
 
-.btn.thin {
+.bgl_btn.thin {
     height: calc(var(--btn-height) * 0.7);
     line-height: calc(var(--btn-height) * 0.7);
 }
 
 @media screen and (max-width: 910px) {
-    .btn {
+    .bgl_btn {
         padding: 0 20px;
     }
 }

package/src/styles/dark.css

@@ -77,10 +77,10 @@
   color: var(--bgl-gray-light);
 }
 
-[theme="dark"] .btn,
-[theme="dark"] .btn-icon,
-[theme="dark"] .primary-checkbox input:checked + span,
-[theme="dark"] .btn.light {
+[theme="dark"] .bgl_btn,
+[theme="dark"] .bgl_btn-icon,
+[theme="dark"] .primary-checkbox input:checked+span,
+[theme="dark"] .bgl_btn.light {
   color: var(--bgl-black);
 }
 
@@ -90,4 +90,4 @@
 
 [theme="dark"] .nav-expend {
   top: 67px;
-}
+}

package/src/styles/inputs.css

@@ -67,7 +67,7 @@ select {
   padding-inline-end: 2rem;
 }
 
-.bagel-input.search-wrap .icon-font {
+.bagel-input.search-wrap .bgl_icon-font {
   margin-inline-start: -1.75rem;
 }
 
@@ -168,12 +168,12 @@ label.active {
   display: none;
 }
 
-.label-count-0 button.btn.flatBtn {
+.label-count-0 button.bgl_btn.bgl_flatBtn {
   /* background: var(--bgl-blue-light); */
   margin-right: 5px;
 }
 
-.label-count-0 button.btn.flatBtn:hover {
+.label-count-0 button.bgl_btn.bgl_flatBtn:hover {
   background: var(--bgl-hover-filter);
 }
 
@@ -218,4 +218,4 @@ input[type="color"]::-moz-color-swatch:hover {
     font-size: calc(var(--input-font-size) / 1.1);
     line-height: 1.2;
   }
-}
+}

package/src/styles/layout.css

@@ -272,6 +272,10 @@
     flex: 1 1 33.33333%;
 }
 
+.mb-auto {
+    margin-bottom: auto !important;
+}
+
 .mb-0 {
     margin-bottom: 0rem !important;
 }
@@ -304,6 +308,10 @@
     margin-bottom: 4rem !important;
 }
 
+.mt-auto {
+    margin-top: auto !important;
+}
+
 .mt-0 {
     margin-top: 0rem !important;
 }
@@ -336,6 +344,10 @@
     margin-top: 4rem !important;
 }
 
+.ms-auto {
+    margin-inline-start: auto !important;
+}
+
 .ms-0 {
     margin-inline-start: 0rem !important;
 }
@@ -368,6 +380,10 @@
     margin-inline-start: 4rem !important;
 }
 
+.me-auto {
+    margin-inline-end: auto !important;
+}
+
 .me-0 {
     margin-inline-end: 0rem !important;
 }

package/src/styles/text.css

@@ -23,6 +23,14 @@ h6 {}
     text-align: center;
 }
 
+.txt-start {
+    text-align: start;
+}
+
+.txt-end {
+    text-align: end;
+}
+
 
 .smalltxt {
     font-size: 12px;
@@ -104,7 +112,7 @@ h6 {}
     text-decoration: none;
 }
 
-.icon-font {
+.bgl_icon-font {
     font-family: "Material Symbols Outlined", serif;
 }
 

package/src/styles/theme.css

@@ -155,7 +155,7 @@
   margin-top: 1rem;
 }
 
-.login-card .btn {
+.login-card .bgl_btn {
   width: 100%;
   background: var(--bgl-primary);
   color: var(--bgl-white);