@bagelink/vue 0.0.331 → 0.0.335

package/src/components/layout/Layout.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="layout" :class="{ 'layout-h-100': h100 }" :style="style">
-		<slot />
-	</div>
+  <div class="layout" :class="{ 'layout-h-100': h100 }">
+    <slot />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -9,27 +9,48 @@ type LayoutProrps = {
   gap?: number,
   h100?: boolean,
   columns?: string[]
+  mColumns?: string[],
+  mRows?: string[]
   rows?: string[],
 }
 
 const props = withDefaults(defineProps<LayoutProrps>(), {
-	gap: 1,
-	h100: false,
-	columns: () => [],
-	rows: () => [],
+  gap: 1,
+  h100: false,
+  columns: () => ([]),
+  rows: () => ([]),
+  mColumns: () => ([]),
+  mRows: () => ([]),
 });
 
-const style = $computed(() => {
-	const obj: Record<string, any> = { gap: `${props.gap}rem` };
-	if (props.columns.length) obj['grid-template-columns'] = props.columns.join(' ');
-	if (props.rows.length) obj['grid-template-rows'] = props.rows.join(' ');
-	return obj;
+const gridTemplateRows = $computed(() => (props.rows.length ? props.rows.join(' ') : 'auto'));
+const gapSize = $computed(() => `${props.gap}rem`);
+const mGridTemplateRows = $computed(() => {
+  if (props.mRows?.length) return props.mRows.join(' ');
+  return gridTemplateRows;
+});
+
+const gridTemplateColumns = $computed(() => (props.columns.length ? props.columns.join(' ') : 'auto'));
+
+const mGridTemplateColumns = $computed(() => {
+  if (props.mColumns?.length) return props.mColumns.join(' ');
+  return gridTemplateColumns;
 });
 </script>
 
-<style>
+<style scoped>
 .layout {
   min-height: 100px;
   display: grid;
+  gap: v-bind(gapSize);
+  grid-template-rows: v-bind(gridTemplateRows);
+  grid-template-columns: v-bind(gridTemplateColumns);
+}
+
+@media screen and (max-width: 910px) {
+  .layout {
+    grid-template-rows: v-bind(mGridTemplateRows);
+    grid-template-columns: v-bind(mGridTemplateColumns);
+  }
 }
 </style>

package/src/components/layout/SidebarMenu.vue

@@ -1,28 +1,27 @@
 <template>
-	<Card class="flex column gap-05 pt-1 bgl_sidebar" :class="{ 'wideNav': isOpen }">
-		<div class="w-100 px-075">
-			<Btn thin color="light" class="toggleNav mb-05" icon="keyboard_arrow_right" @click="toggleMenu" />
-		</div>		<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
-		<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 px-075"
-			v-tooltip.right="{ content: nav.label, disabled: open, class: ['nav-tooltip'] }"
-		>
-			<template #default >
-				<Icon :icon="nav.icon" :size="1.4"/>
-				<p v-if="open">
-					{{ nav.label }}
-				</p>
-			</template>
-		</Btn>
-		<slot name="footer" />
-	</Card>
+  <Card class="flex column gap-05 pt-1 bgl_sidebar" :class="{ 'wideNav': isOpen }">
+    <div class="w-100 px-075">
+      <Btn thin color="light" class="toggleNav mb-05" icon="keyboard_arrow_right" @click="toggleMenu" />
+    </div>
+    <slot v-if="!isOpen || !slots['brand-open']" name="brand" />
+    <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 px-075"
+      v-tooltip.right="{ content: nav.label, disabled: open, class: ['nav-tooltip'] }">
+      <template #default>
+        <Icon :icon="nav.icon" :size="1.4" />
+        <p v-if="open">
+          {{ nav.label }}
+        </p>
+      </template>
+    </Btn>
+    <slot name="footer" />
+  </Card>
 </template>
 
 <script lang="ts" setup>
 import { useSlots } from 'vue';
-import { Btn, Icon } from '@bagelink/vue';
+import { Btn, Icon, Card } from '@bagelink/vue';
 import type { NavLink } from '@bagelink/vue';
 
 const slots = useSlots();
@@ -33,8 +32,8 @@ let isOpen = $ref(props.open);
 
 const emit = defineEmits(['update:open']);
 function toggleMenu() {
-	isOpen = !isOpen;
-	emit('update:open', isOpen);
+  isOpen = !isOpen;
+  emit('update:open', isOpen);
 }
 </script>
 
@@ -50,6 +49,7 @@ function toggleMenu() {
 .wideNav .nav-button .bgl_btn-flex {
   justify-content: flex-start !important;
 }
+
 .nav-button.router-link-active {
   background-color: var(--bgl-primary-tint) !important;
 }

package/src/components/layout/TabbedLayout.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="h-100 grid list-view gap-1" :class="{ 'side-tabs': sideTabs }">
+    <div class="bgl_card tabs-top">
+      <slot name="top-section" />
+      <div class="tabs grid auto-flow-columns fit-content">
+        <div v-for="tab in tabs" :class="{
+    active:
+      tab === activeTab ||
+      tab === router?.currentRoute.value.path.split('/').slice(-1)[0],
+  }" class="tab" :key="tab" @click="changeTab(tab)">
+          {{ tab }}
+        </div>
+      </div>
+    </div>
+    <div class="list-content" v-for="tab in tabs.filter((item) => item === activeTab)" :key="tab">
+      <slot :name="tab" :key="tab" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import type { Router } from 'vue-router';
+
+const emit = defineEmits(['update:modelValue']);
+
+let activeTab = $ref<string>();
+const props = defineProps<{
+  title?: string;
+  tabs: string[];
+  modelValue?: string;
+  router?: Router;
+  sideTabs?: boolean;
+}>();
+
+function changeTab(tab: string) {
+  activeTab = tab;
+  emit('update:modelValue', activeTab);
+  if (!props.router) return;
+  void props.router?.push({
+    path: props.router.currentRoute.value.path,
+    query: { ...props.router.currentRoute.value.query, t: tab },
+    hash: props.router.currentRoute.value.hash,
+  });
+}
+
+onMounted(() => {
+  const firstTab =
+    props.modelValue ||
+    props.router?.currentRoute.value.query.t ||
+    props.tabs[0];
+  activeTab = firstTab as string;
+});
+</script>
+
+<style scoped>
+.tab {
+  text-transform: capitalize;
+}
+
+.side-tabs {
+  display: flex;
+}
+
+.side-tabs .tabs-top {
+  margin-inline-end: 1rem;
+}
+
+.side-tabs .tabs {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.side-tabs .tab {
+  border: none;
+}
+</style>

package/src/components/layout/Tabs.vue

@@ -0,0 +1,19 @@
+<template>
+  <TabsNav :tabs="tabs" :group="group" />
+  <div v-if="currentTab">
+    <slot :name="currentTab" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TabsNav, type Tab } from '@bagelink/vue';
+import { useTabs } from './tabsManager';
+
+defineProps<{
+  tabs: Tab[];
+  modelValue?: string;
+}>();
+
+const group = Math.random().toString(36).substring(7);
+const { currentTab } = useTabs(group);
+</script>

package/src/components/layout/TabsBody.vue

@@ -0,0 +1,15 @@
+<template>
+  <div v-if="currentTab">
+    <slot :name="currentTab"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTabs } from './tabsManager';
+
+const props = defineProps<{
+  group: string;
+}>();
+
+const { currentTab } = useTabs(props.group);
+</script>

package/src/components/layout/TabsNav.vue

@@ -0,0 +1,48 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { type Tab, Icon } from '@bagelink/vue';
+import { useTabs } from './tabsManager';
+
+const props = defineProps<{
+  title?: string;
+  tabs: Tab[];
+  modelValue?: string;
+  sideTabs?: boolean;
+  group: string;
+}>();
+
+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;
+};
+
+const isActive = (tab: Tab) => {
+  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;
+};
+</script>
+
+<style scoped>
+.tab {
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  background: transparent;
+}
+
+.tab.currentTab {
+  border-bottom: 2px solid var(--primary-color);
+}
+</style>

package/src/components/layout/index.ts

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

package/src/components/layout/tabsManager.ts

@@ -0,0 +1,18 @@
+import { reactive, computed } from 'vue';
+
+const state = reactive(new Map());
+
+export function useTabs(group: string) {
+	if (!state.has(group)) {
+		state.set(group, reactive({ currentTab: null }));
+	}
+
+	const currentTab = computed({
+		get: () => state.get(group).currentTab,
+		set: (val) => {
+			state.get(group).currentTab = val;
+		},
+	});
+
+	return { currentTab };
+}

package/src/styles/appearance.css

@@ -36,4 +36,46 @@
 
 .opacity-10 {
     opacity: 1;
+}
+
+@media screen and (max-width: 910px) {
+    .m_opacity-1 {
+        opacity: 0.1;
+    }
+
+    .m_opacity-2 {
+        opacity: 0.2;
+    }
+
+    .m_opacity-3 {
+        opacity: 0.3;
+    }
+
+    .m_opacity-4 {
+        opacity: 0.4;
+    }
+
+    .m_opacity-5 {
+        opacity: 0.5;
+    }
+
+    .m_opacity-6 {
+        opacity: 0.6;
+    }
+
+    .m_opacity-7 {
+        opacity: 0.7;
+    }
+
+    .m_opacity-8 {
+        opacity: 0.8;
+    }
+
+    .m_opacity-9 {
+        opacity: 0.9;
+    }
+
+    .m_opacity-10 {
+        opacity: 1;
+    }
 }

package/src/styles/layout.css

@@ -101,12 +101,11 @@
     inset-inline-end: 0px;
 }
 
-.position-absolute {
-    position: absolute;
-}
-
-.position-relative {
-    position: relative;
+.positioned-full {
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
 }
 
 .auto-flow-rows {
@@ -129,8 +128,6 @@
 .w-100,
 .width-100 {
     width: 100%;
-    max-width: 100px;
-
 }
 
 .w300,
@@ -168,15 +165,62 @@
     margin-inline-end: auto;
     width: 98%;
 }
+.w10 {
+    max-width: 10px;
+}
+
+.w20 {
+    max-width: 20px;
+}
+
+.w20 {
+    max-width: 20px;
+}
+
+.w30 {
+    max-width: 30px;
+}
+
+.w40 {
+    max-width: 40px;
+}
+
+.w50 {
+    max-width: 50px;
+}
+
+.w60 {
+    max-width: 60px;
+}
+
+.w70 {
+    max-width: 70px;
+}
+
+.w80 {
+    max-width: 80px;
+}
+
+.w90 {
+    max-width: 90px;
+}
 
 .w100 {
     max-width: 100px;
 }
 
+.w150 {
+    max-width: 150px;
+}
+
 .w200 {
     max-width: 200px;
 }
 
+.w250 {
+    max-width: 250px;
+}
+
 .w300 {
     max-width: 300px;
 }
@@ -1124,14 +1168,31 @@
     padding: 0.25rem !important;
 }
 
-.relative {
-    position: relative;
+.relative,
+.position-relative {
+    position: relative !important;
 }
 
-.absolute {
+.absolute,
+.position-absolute {
     position: absolute !important;
 }
 
+.fixed,
+.position-fixed {
+    position: fixed !important;
+}
+
+.static,
+.position-static {
+    position: static !important;
+}
+
+.sticky,
+.position-sticky {
+    position: sticky !important;
+}
+
 .flex {
     display: flex;
     align-items: center;
@@ -1143,7 +1204,8 @@
 }
 
 .hide,
-.display-hide {
+.none,
+.display-none {
     display: none;
 }
 

package/src/styles/mobilLayout.css

@@ -19,14 +19,12 @@
         display: grid !important;
     }
 
-    .m_none {
+    .m_hide,
+    .m_none,
+    .m_display-none {
         display: none !important;
     }
 
-    .m_w-100 {
-        width: 100% !important;
-    }
-
     .m_inline-grid {
         display: inline-grid;
     }
@@ -126,12 +124,11 @@
         inset-inline-end: 0px;
     }
 
-    .m_position-absolute {
-        position: absolute;
-    }
-
-    .m_position-relative {
-        position: relative;
+    .m_positioned-full {
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
     }
 
     .m_auto-flow-rows {
@@ -153,9 +150,7 @@
 
     .m_w-100,
     .m_width-100 {
-        width: 100%;
-        max-width: 100px;
-
+        width: 100% !important;
     }
 
     .m_w300,
@@ -177,14 +172,62 @@
         width: 98%;
     }
 
+    .m_w10 {
+        max-width: 10px;
+    }
+
+    .m_w20 {
+        max-width: 20px;
+    }
+
+    .m_w20 {
+        max-width: 20px;
+    }
+
+    .m_w30 {
+        max-width: 30px;
+    }
+
+    .m_w40 {
+        max-width: 40px;
+    }
+
+    .m_w50 {
+        max-width: 50px;
+    }
+
+    .m_w60 {
+        max-width: 60px;
+    }
+
+    .m_w70 {
+        max-width: 70px;
+    }
+
+    .m_w80 {
+        max-width: 80px;
+    }
+
+    .m_w90 {
+        max-width: 90px;
+    }
+
     .m_w100 {
         max-width: 100px;
     }
 
+    .m_w150 {
+        max-width: 150px;
+    }
+
     .m_w200 {
         max-width: 200px;
     }
 
+    .m_w250 {
+        max-width: 250px;
+    }
+
     .m_w300 {
         max-width: 300px;
     }
@@ -1060,14 +1103,31 @@
         padding: 0.25rem !important;
     }
 
-    .m_relative {
-        position: relative;
+    .m_relative,
+    .m_position-relative {
+        position: relative !important;
     }
 
-    .m_absolute {
+    .m_absolute,
+    .m_position-absolute {
         position: absolute !important;
     }
 
+    .m_fixed,
+    .m_position-fixed {
+        position: fixed !important;
+    }
+
+    .m_static,
+    .m_position-static {
+        position: static !important;
+    }
+
+    .m_sticky,
+    .m_position-sticky {
+        position: sticky !important;
+    }
+
     .m_flex-stretch {
         display: flex;
         align-items: stretch;