@bagelink/vue 0.0.322 → 0.0.335

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

@@ -1,65 +1,110 @@
 <template>
-  <div class="bagel-input text-input" :class="{
-      dense, small, shrink, toggleEdit, editMode, code,
-      textInputIconWrap: icon,
-      txtInputIconStart: iconStart,
-    }" :title="title">
-    <label :for="id">
-      {{ label }}
-      <input v-if="!multiline && !autoheight && !code" :title="title" :autocomplete="autocomplete" :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 :title="title" :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" />
-      <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 />
-  </div>
+	<div
+		class="bagel-input text-input"
+		:class="{
+			dense, small, shrink, toggleEdit, editMode, code,
+			textInputIconWrap: icon,
+			txtInputIconStart: iconStart,
+		}"
+		:title="title"
+	>
+		<label :for="id">
+			{{ label }}
+			<input
+				v-if="!multiline && !autoheight && !code"
+				:title="title"
+				:autocomplete="autocomplete"
+				: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
+				:title="title"
+				: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"
+			/>
+			<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
+		/>
+	</div>
 </template>
 
-<script setup lang="ts">
+<script
+	setup
+	lang="ts"
+>
 import { onMounted, watch } from 'vue';
 import {
-  debounce, Btn, type MaterialIcons, MaterialIcon,
+	debounce, Btn, type MaterialIcons, MaterialIcon,
 } from '@bagelink/vue';
 
 const emit = defineEmits(['update:modelValue', 'debounce']);
 const props = withDefaults(
-  defineProps<{
-    id?: string;
-    title?: string;
-    helptext?: string;
-    placeholder?: string;
-    modelValue?: string | number;
-    label?: string;
-    small?: boolean;
-    dense?: boolean;
-    required?: boolean;
-    pattern?: string;
-    shrink?: boolean;
-    toggleEdit?: boolean;
-    type?: string;
-    nativeInputAttrs?: Record<string, any>;
-    icon?: MaterialIcons;
-    iconStart?: MaterialIcons;
-    multiline?: boolean;
-    autoheight?: boolean;
-    code?: boolean;
-    lines?: number;
-    autocomplete?: string;
-    autofocus?: boolean;
-  }>(),
-  {
-    type: 'text',
-    toggleEdit: false,
-    modelValue: '',
-    autocomplete: 'off',
-  },
+	defineProps<{
+		id?: string;
+		title?: string;
+		helptext?: string;
+		placeholder?: string;
+		modelValue?: string | number;
+		label?: string;
+		small?: boolean;
+		dense?: boolean;
+		required?: boolean;
+		pattern?: string;
+		shrink?: boolean;
+		toggleEdit?: boolean;
+		type?: string;
+		nativeInputAttrs?: Record<string, any>;
+		icon?: MaterialIcons;
+		iconStart?: MaterialIcons;
+		multiline?: boolean;
+		autoheight?: boolean;
+		code?: boolean;
+		lines?: number;
+		autocomplete?: string;
+		autofocus?: boolean;
+	}>(),
+	{
+		type: 'text',
+		toggleEdit: false,
+		modelValue: '',
+		autocomplete: 'off',
+	},
 );
 let inputVal = $ref<string | number>();
 let editMode = $ref<boolean>(!props.toggleEdit);
@@ -67,53 +112,54 @@ let editMode = $ref<boolean>(!props.toggleEdit);
 const input = $ref<HTMLInputElement>();
 
 const toggleEditAction = () => {
-  if (!props.toggleEdit) return;
-  if (editMode) {
-    editMode = false;
-    emit('debounce', inputVal);
-    emit('update:modelValue', inputVal as string);
-  } else {
-    editMode = true;
-    setTimeout(() => input?.focus(), 10);
-  }
+	if (!props.toggleEdit) return;
+	if (editMode) {
+		editMode = false;
+		emit('debounce', inputVal);
+		emit('update:modelValue', inputVal as string);
+	} else {
+		editMode = true;
+		setTimeout(() => input?.focus(), 10);
+	}
 };
 
 const rows = $computed(() => {
-  if (props.lines) return props.lines;
-  if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
-  if (props.multiline || props.code) return 4;
-  return 1;
+	if (props.lines) return props.lines;
+	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
+	if (props.multiline || props.code) return 4;
+	return 1;
 });
 
 watch(
-  () => inputVal,
-  (newVal) => {
-    if (props.toggleEdit) return;
-    if (newVal === props.modelValue) return;
-    emit('update:modelValue', newVal as string);
-    debounce(() => emit('debounce', newVal));
-  },
+	() => inputVal,
+	(newVal) => {
+		if (props.toggleEdit) return;
+		if (newVal === props.modelValue) return;
+		emit('update:modelValue', newVal as string);
+		debounce(() => emit('debounce', newVal));
+	},
 );
 
 watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal !== inputVal) inputVal = newVal;
-  },
-  { immediate: true },
+	() => props.modelValue,
+	(newVal) => {
+		if (newVal !== inputVal) inputVal = newVal;
+	},
+	{ immediate: true },
 );
 
 onMounted(() => {
-  if (props.autofocus) setTimeout(() => input?.focus(), 10);
+	if (props.autofocus) setTimeout(() => input?.focus(), 10);
 });
 </script>
 
 <style>
 .bagel-input.shrink,
 .bagel-input.shrink input {
-  min-width: unset !important;
-  /* width: auto; */
+	min-width: unset !important;
+	/* width: auto; */
 }
+
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
@@ -121,76 +167,76 @@ onMounted(() => {
 
 <style scoped>
 .bagel-input textarea {
-  min-height: unset;
-  font-size: var(--input-font-size);
+	min-height: unset;
+	font-size: var(--input-font-size);
 }
 
 .bagel-input.text-input textarea {
-  resize: none;
+	resize: none;
 }
 
 .code textarea {
-  font-family: 'Inconsolata', monospace;
-  background: var(--bgl-black) !important;
-  color: var(--bgl-white) !important;
+	font-family: 'Inconsolata', monospace;
+	background: var(--bgl-black) !important;
+	color: var(--bgl-white) !important;
 }
 
 .bagel-input.toggleEdit:hover {
-  background-color: var(--input-bg);
+	background-color: var(--input-bg);
 }
 
 .bagel-input.small {
-  margin-bottom: 0;
-  height: 30px;
+	margin-bottom: 0;
+	height: 30px;
 }
 
 .bagel-input.dense label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
 }
 
 .bagel-input label {
-  font-size: var(--label-font-size);
+	font-size: var(--label-font-size);
 }
 
 .toggleEditBtn {
-  position: absolute;
-  right: -24px;
-  top: 4;
-  opacity: 0;
+	position: absolute;
+	right: -24px;
+	top: 4;
+	opacity: 0;
 }
 
 .textInputIconWrap {
-  position: relative;
+	position: relative;
 }
 
 .textInputIconWrap .bgl_icon-font {
-  position: absolute;
-  inset-inline-end: 0.7rem;
-  bottom: 50%;
-  line-height: 0;
-  color: var(--bgl-gray);
+	position: absolute;
+	inset-inline-end: 0.7rem;
+	bottom: 50%;
+	line-height: 0;
+	color: var(--bgl-gray);
 }
 
 .txtInputIconStart .iconStart {
-  position: absolute;
-  inset-inline-start: 0.7rem;
-  top: 50%;
-  line-height: 0;
-  color: var(--bgl-gray);
+	position: absolute;
+	inset-inline-start: 0.7rem;
+	top: 50%;
+	line-height: 0;
+	color: var(--bgl-gray);
 }
 
 .txtInputIconStart textarea {
-  padding-inline-start: 2rem;
+	padding-inline-start: 2rem;
 }
 
 .bagel-input:hover .toggleEditBtn,
 .bagel-input.editMode .toggleEditBtn {
-  opacity: 1;
+	opacity: 1;
 }
 
 .bagel-input.small textarea {
-  height: 30px;
+	height: 30px;
 }
 </style>

package/src/components/index.ts

@@ -8,7 +8,6 @@ export { default as ModalForm } from './ModalForm.vue';
 export { default as AccordionItem } from './AccordionItem.vue';
 export { default as ListView } from './ListView.vue';
 export { default as ListItem } from './ListItem.vue';
-export { default as TabbedLayout } from './TabbedLayout.vue';
 export { default as Comments } from './Comments.vue';
 export { default as PageTitle } from './PageTitle.vue';
 export { default as TableSchema } from './TableSchema.vue';
@@ -19,7 +18,6 @@ export { default as Card } from './Card.vue';
 export { default as Avatar } from './Avatar.vue';
 export { default as Title } from './Title.vue';
 export { default as Accordion } from './Accordion.vue';
-export { default as ComboBox } from './ComboBox.vue';
 export { default as Alert } from './Alert.vue';
 export { default as Badge } from './Badge.vue';
 export { default as BglVideo } from './BglVideo.vue';

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';