@bagelink/vue 0.0.342 → 0.0.346

package/src/components/layout/TabsNav.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="tabs grid auto-flow-columns fit-content">
-    <button :class="{ active: isActive(tab) }" @click="selectTab(tab)" class="tab" v-for="(tab, i) in tabs" :key="i">
-      <Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
-      {{ tabLabel(tab) }}
-    </button>
-  </div>
+	<div class="grid auto-flow-columns fit-content">
+		<button :class="{ active: isActive(tab) }" @click="selectTab(tab)" class="bgl_tab" v-for="(tab, i) in tabs" :key="i">
+			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
+			{{ tabLabel(tab) }}
+		</button>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -22,27 +22,49 @@ const props = defineProps<{
 const { currentTab } = useTabs(props.group);
 currentTab.value = props.modelValue || typeof props.tabs[0] === 'string' ? props.tabs[0] : props.tabs[0].id;
 const selectTab = (tab: Tab) => {
-  currentTab.value = typeof tab === 'string' ? tab : tab.id;
+	currentTab.value = typeof tab === 'string' ? tab : tab.id;
 };
 
 const isActive = (tab: Tab) => {
-  if (typeof tab === 'string') return currentTab.value === tab;
-  return currentTab.value === tab.id;
+	if (typeof tab === 'string') return currentTab.value === tab;
+	return currentTab.value === tab.id;
 };
 const tabLabel = (tab: Tab) => {
-  if (typeof tab === 'string') return tab;
-  return tab.label;
+	if (typeof tab === 'string') return tab;
+	return tab.label;
 };
 </script>
 
 <style scoped>
-.tab {
+.bgl_tab {
   border: none;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 2px solid var(--border-color);
   background: transparent;
+  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);
+
 }
 
-.tab.currentTab {
+.bgl_tab.currentTab {
   border-bottom: 2px solid var(--primary-color);
 }
+
+.bgl_tab.active {
+    color: var(--bgl-primary);
+    border-bottom: 2px solid var(--bgl-primary);
+}
+
+.bgl_tab:hover {
+    color: var(--bgl-primary);
+}
+
+.bgl_tab:active {
+    -webkit-filter: brightness(70%);
+    filter: brightness(70%);
+}
 </style>

package/src/components/layout/index.ts

@@ -1,5 +1,6 @@
 export { default as Layout } from './Layout.vue';
 export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as BottomMenu } from './BottomMenu.vue';
 export { default as Tabs } from './Tabs.vue';
 export { default as TabsNav } from './TabsNav.vue';
 export { default as TabsBody } from './TabsBody.vue';

package/src/styles/layout.css

@@ -165,6 +165,7 @@
     margin-inline-end: auto;
     width: 98%;
 }
+
 .w10 {
     max-width: 10px;
 }
@@ -355,6 +356,16 @@
     height: -webkit-fill-available;
 }
 
+.w-auto,
+.w-a {
+    width: auto !important;
+}
+
+.h-auto,
+.h-a {
+    height: auto !important;
+}
+
 .gap-0 {
     gap: 0;
 }

package/src/styles/mobilLayout.css

@@ -290,6 +290,16 @@
         height: -webkit-fill-available;
     }
 
+    .m_w-auto,
+    .m_w-a {
+        width: auto !important;
+    }
+
+    .m_h-auto,
+    .m_h-a {
+        height: auto !important;
+    }
+
     .m_gap-0 {
         gap: 0;
     }

package/src/styles/theme.css

@@ -142,7 +142,6 @@
     color: var(--bgl-primary);
     border-bottom: 2px solid var(--bgl-primary);
 }
-
 .router-tab:hover {
     color: var(--bgl-primary);
 }

package/src/styles/transitions.css

@@ -58,10 +58,14 @@
 
 .slide-fade-enter-active {
     transition: all 0.15s ease-out;
+    overflow: hidden;
+
 }
 
 .slide-fade-leave-active {
     transition: all 0.15s ease-in;
+    overflow: hidden;
+
 }
 
 .slide-fade-enter-from {