@bagelink/vue 0.0.245 → 0.0.250

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,26 @@
     flex: 1 1 33.33333%;
 }
 
+.mb-auto {
+    margin-bottom: auto !important;
+}
+
+.mb-0 {
+    margin-bottom: 0rem !important;
+}
+
+.mb-025 {
+    margin-bottom: 0.25rem !important;
+}
+
+.mb-05 {
+    margin-bottom: 0.5rem !important;
+}
+
+.mb-075 {
+    margin-bottom: 0.75rem !important;
+}
+
 .mb-1 {
     margin-bottom: 1rem !important;
 }
@@ -284,6 +304,30 @@
     margin-bottom: 3rem !important;
 }
 
+.mb-4 {
+    margin-bottom: 4rem !important;
+}
+
+.mt-auto {
+    margin-top: auto !important;
+}
+
+.mt-0 {
+    margin-top: 0rem !important;
+}
+
+.mt-025 {
+    margin-top: 0.25rem !important;
+}
+
+.mt-05 {
+    margin-top: 0.5rem !important;
+}
+
+.mt-075 {
+    margin-top: 0.75rem !important;
+}
+
 .mt-1 {
     margin-top: 1rem !important;
 }
@@ -296,6 +340,30 @@
     margin-top: 3rem !important;
 }
 
+.mt-4 {
+    margin-top: 4rem !important;
+}
+
+.ms-auto {
+    margin-inline-start: auto !important;
+}
+
+.ms-0 {
+    margin-inline-start: 0rem !important;
+}
+
+.ms-025 {
+    margin-inline-start: 0.25rem !important;
+}
+
+.ms-05 {
+    margin-inline-start: 0.5rem !important;
+}
+
+.ms-075 {
+    margin-inline-start: 0.75rem !important;
+}
+
 .ms-1 {
     margin-inline-start: 1rem !important;
 }
@@ -308,6 +376,30 @@
     margin-inline-start: 3rem !important;
 }
 
+.ms-4 {
+    margin-inline-start: 4rem !important;
+}
+
+.me-auto {
+    margin-inline-end: auto !important;
+}
+
+.me-0 {
+    margin-inline-end: 0rem !important;
+}
+
+.me-025 {
+    margin-inline-end: 0.25rem !important;
+}
+
+.me-05 {
+    margin-inline-end: 0.5rem !important;
+}
+
+.me-075 {
+    margin-inline-end: 0.75rem !important;
+}
+
 .me-1 {
     margin-inline-end: 1rem !important;
 }
@@ -320,86 +412,125 @@
     margin-inline-end: 3rem !important;
 }
 
-.mb-0 {
-    margin-bottom: 0rem !important;
+.me-4 {
+    margin-inline-end: 4rem !important;
 }
 
-.mb-4 {
-    margin-bottom: 4rem !important;
+
+.-mb-025 {
+    margin-bottom: -0.25rem !important;
 }
 
-.mb-075 {
-    margin-bottom: 0.75rem !important;
+.-mb-05 {
+    margin-bottom: -0.5rem !important;
 }
 
-.mb-05 {
-    margin-bottom: 0.5rem !important;
+.-mb-075 {
+    margin-bottom: -0.75rem !important;
 }
 
-.mb-025 {
-    margin-bottom: 0.25rem !important;
+.-mb-1 {
+    margin-bottom: -1rem !important;
 }
 
-.mt-0 {
-    margin-top: 0rem !important;
+.-mb-2 {
+    margin-bottom: -2rem !important;
 }
 
-.mt-4 {
-    margin-top: 4rem !important;
+.-mb-3 {
+    margin-bottom: -3rem !important;
 }
 
-.mt-075 {
+.-mb-4 {
+    margin-bottom: -4rem !important;
+}
+
+.-mt-025 {
+    margin-top: -0.25rem !important;
+}
+
+.-mt-05 {
+    margin-top: -0.5rem !important;
+}
+
+.-mt-075 {
     margin-top: 0.75rem !important;
 }
 
-.mt-05 {
-    margin-top: 0.5rem !important;
+.-mt-1 {
+    margin-top: -1rem !important;
 }
 
-.mt-025 {
-    margin-top: 0.25rem !important;
+.-mt-2 {
+    margin-top: -2rem !important;
 }
 
-.ms-0 {
-    margin-inline-start: 0rem !important;
+.-mt-3 {
+    margin-top: -3rem !important;
 }
 
-.ms-4 {
-    margin-inline-start: 4rem !important;
+.-mt-4 {
+    margin-top: -4rem !important;
 }
 
-.ms-075 {
-    margin-inline-start: 0.75rem !important;
+.-ms-025 {
+    margin-inline-start: -0.25rem !important;
 }
 
-.ms-05 {
-    margin-inline-start: 0.5rem !important;
+.-ms-05 {
+    margin-inline-start: -0.5rem !important;
 }
 
-.ms-025 {
-    margin-inline-start: 0.25rem !important;
+.-ms-075 {
+    margin-inline-start: -0.75rem !important;
 }
 
-.me-0 {
-    margin-inline-end: 0rem !important;
+.-ms-1 {
+    margin-inline-start: -1rem !important;
 }
 
-.me-4 {
-    margin-inline-end: 4rem !important;
+.-ms-2 {
+    margin-inline-start: -2rem !important;
 }
 
-.me-075 {
-    margin-inline-end: 0.75rem !important;
+.-ms-3 {
+    margin-inline-start: -3rem !important;
 }
 
-.me-05 {
-    margin-inline-end: 0.5rem !important;
+.-ms-4 {
+    margin-inline-start: -4rem !important;
 }
 
-.me-025 {
-    margin-inline-end: 0.25rem !important;
+
+.-me-025 {
+    margin-inline-end: -0.25rem !important;
+}
+
+.-me-05 {
+    margin-inline-end: -0.5rem !important;
+}
+
+.-me-075 {
+    margin-inline-end: -0.75rem !important;
 }
 
+.-me-1 {
+    margin-inline-end: -1rem !important;
+}
+
+.-me-2 {
+    margin-inline-end: -2rem !important;
+}
+
+.-me-3 {
+    margin-inline-end: -3rem !important;
+}
+
+.-me-4 {
+    margin-inline-end: -4rem !important;
+}
+
+
 .pb-0 {
     padding-bottom: 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;
@@ -85,6 +93,10 @@ h6 {}
     font-weight: 700;
 }
 
+.line-height-1 {
+    line-height: 1;
+}
+
 .ellipsis {
     overflow: hidden;
     display: block;
@@ -100,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);