@bagelink/vue 0.0.318 → 0.0.331

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

@@ -58,15 +58,17 @@
 			v-if="toggleEdit"
 			thin
 			@click="toggleEditAction"
-			:icon="editMode ? 'check'
-				: 'edit'"
+			:icon="editMode ? 'check' : 'edit'"
 			flat
 		/>
 	</div>
 </template>
 
-<script setup lang="ts">
-import { watch } from 'vue';
+<script
+	setup
+	lang="ts"
+>
+import { onMounted, watch } from 'vue';
 import {
 	debounce, Btn, type MaterialIcons, MaterialIcon,
 } from '@bagelink/vue';
@@ -95,6 +97,7 @@ const props = withDefaults(
 		code?: boolean;
 		lines?: number;
 		autocomplete?: string;
+		autofocus?: boolean;
 	}>(),
 	{
 		type: 'text',
@@ -144,6 +147,10 @@ watch(
 	},
 	{ immediate: true },
 );
+
+onMounted(() => {
+	if (props.autofocus) setTimeout(() => input?.focus(), 10);
+});
 </script>
 
 <style>
@@ -152,11 +159,16 @@ watch(
 	min-width: unset !important;
 	/* width: auto; */
 }
+
+.bagel-input label {
+	font-size: var(--label-font-size);
+}
 </style>
 
 <style scoped>
 .bagel-input textarea {
 	min-height: unset;
+	font-size: var(--input-font-size);
 }
 
 .bagel-input.text-input textarea {
@@ -184,6 +196,10 @@ watch(
 	gap: 0.5rem;
 }
 
+.bagel-input label {
+	font-size: var(--label-font-size);
+}
+
 .toggleEditBtn {
 	position: absolute;
 	right: -24px;

package/src/components/index.ts

@@ -27,5 +27,5 @@ export { default as Carousel } from './Carousel.vue';
 
 export * from './form';
 export * from './dashboard';
-export * from './whatsapp';
+// export * from './whatsapp';
 export * from './layout';

package/src/components/layout/SidebarMenu.vue

@@ -6,7 +6,7 @@
 		<slot v-if="isOpen" name="brand-open" />
 		<slot v-if="!navLinks" />
 		<Btn
-			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="nav-button"
+			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="nav-button px-075"
 			v-tooltip.right="{ content: nav.label, disabled: open, class: ['nav-tooltip'] }"
 		>
 			<template #default >
@@ -50,13 +50,12 @@ function toggleMenu() {
 .wideNav .nav-button .bgl_btn-flex {
   justify-content: flex-start !important;
 }
-</style>
-
-<style scoped>
 .nav-button.router-link-active {
-  background-color: #40b884 !important;
+  background-color: var(--bgl-primary-tint) !important;
 }
+</style>
 
+<style scoped>
 .bgl_sidebar {
   background-color: var(--bgl-primary);
   color: var(--bgl-white);

package/src/components/whatsapp/index.ts

@@ -1,2 +1,2 @@
-export { default as MsgTemplate } from './form/MsgTemplate.vue';
-export { default as TextVariableExamples } from './form/TextVariableExamples.vue';
+// export { default as MsgTemplate } from './form/MsgTemplate.vue';
+// export { default as TextVariableExamples } from './form/TextVariableExamples.vue';

package/src/styles/appearance.css

@@ -0,0 +1,39 @@
+.opacity-1 {
+    opacity: 0.1;
+}
+
+.opacity-2 {
+    opacity: 0.2;
+}
+
+.opacity-3 {
+    opacity: 0.3;
+}
+
+.opacity-4 {
+    opacity: 0.4;
+}
+
+.opacity-5 {
+    opacity: 0.5;
+}
+
+.opacity-6 {
+    opacity: 0.6;
+}
+
+.opacity-7 {
+    opacity: 0.7;
+}
+
+.opacity-8 {
+    opacity: 0.8;
+}
+
+.opacity-9 {
+    opacity: 0.9;
+}
+
+.opacity-10 {
+    opacity: 1;
+}

package/src/styles/bagel.css

@@ -1,10 +1,12 @@
 @import "layout.css";
+@import "mobilLayout.css";
 @import "inputs.css";
 @import "buttons.css";
 @import "text.css";
 @import "scrollbar.css";
 @import "transitions.css";
 @import "loginCard.css";
+@import "appearance.css";
 @import "theme.css";
 @import "dark.css";
 @import "./fonts/Ploni.css";

package/src/styles/layout.css

@@ -127,8 +127,10 @@
 }
 
 .w-100,
-.w100 {
+.width-100 {
     width: 100%;
+    max-width: 100px;
+
 }
 
 .w300,
@@ -140,16 +142,41 @@
 .w600,
 .w650,
 .w700,
+.w750,
 .w770,
+.w800,
+.w850,
 .w900,
+.w950,
 .w970,
+.w1000,
 .w1030,
-.w1170 {
+.w1050,
+.w1100,
+.w1150,
+.w1170,
+.w1200,
+.w1250,
+.w1300,
+.w1350,
+.w1400,
+.w1450,
+.w1500,
+.w1550,
+.w1600 {
     margin-inline-start: auto;
     margin-inline-end: auto;
     width: 98%;
 }
 
+.w100 {
+    max-width: 100px;
+}
+
+.w200 {
+    max-width: 200px;
+}
+
 .w300 {
     max-width: 300px;
 }
@@ -182,30 +209,98 @@
     max-width: 650px;
 }
 
-.w650 {
+.w700 {
     max-width: 700px;
 }
 
+.w750 {
+    max-width: 750px;
+}
+
 .w770 {
     max-width: 770px;
 }
 
+.w800 {
+    max-width: 800px;
+}
+
+.w850 {
+    max-width: 850px;
+}
+
 .w900 {
     max-width: 900px;
 }
 
+.w950 {
+    max-width: 950px;
+}
+
 .w970 {
     max-width: 970px;
 }
 
+.w1000 {
+    max-width: 1000px;
+}
+
 .w1030 {
     max-width: 1030px;
 }
 
+.w1050 {
+    max-width: 1050px;
+}
+
+.w1100 {
+    max-width: 1100px;
+}
+
+.w1150 {
+    max-width: 1150px;
+}
+
 .w1170 {
     max-width: 1170px;
 }
 
+.w1200 {
+    max-width: 1200px;
+}
+
+.w1250 {
+    max-width: 1250px;
+}
+
+.w1300 {
+    max-width: 1300px;
+}
+
+.w1350 {
+    max-width: 1350px;
+}
+
+.w1400 {
+    max-width: 1400px;
+}
+
+.w1450 {
+    max-width: 1450px;
+}
+
+.w1500 {
+    max-width: 1500px;
+}
+
+.w1550 {
+    max-width: 1550px;
+}
+
+.w1600 {
+    max-width: 1600px;
+}
+
 .w-all,
 .wall {
     width: -webkit-fill-available;
@@ -1034,7 +1129,7 @@
 }
 
 .absolute {
-    position: absolute;
+    position: absolute !important;
 }
 
 .flex {
@@ -1061,8 +1156,12 @@
     width: 100%;
 }
 
-.flex-wrap {
-    flex-wrap: wrap;
+.inline {
+    display: inline;
+}
+
+.inline-block {
+    display: inline-block;
 }
 
 .flex-end {
@@ -1406,6 +1505,13 @@
     overflow-y: hidden;
 }
 
+.line {
+    background: var(--border-color);
+    height: 1px;
+    width: 100%;
+}
+
+
 @media screen and (max-width: 910px) {
     .grid-wrap-2 {
         grid-template-columns: repeat(1, 1fr);