@bagelink/vue 0.0.466 → 0.0.471

package/src/components/formkit/Toggle.vue

@@ -1,24 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+	helpText?: string
+	id: string
+	label?: string
+}>()
+const inputVal = defineModel('modelValue', {
+	type: Boolean,
+	default: false,
+})
+</script>
+
 <template>
 	<div class="bagel-input checkbox" :title="label">
 		<label class="switch">
-			<input type="checkbox" v-model="inputVal" :id="id">
+			<input :id="id" v-model="inputVal" type="checkbox">
 			<span class="slider round" />
 		</label>
 	</div>
 </template>
 
-<script setup lang="ts">
-defineProps<{
-	helpText?: string;
-	id: string;
-	label?: string;
-}>();
-const inputVal = defineModel('modelValue', {
-	type: Boolean,
-	default: false,
-});
-</script>
-
 <style>
 .checkbox-label {
 	display: flex;

package/src/components/index.ts

@@ -1,30 +1,30 @@
-export { default as MaterialIcon } from './MaterialIcon.vue';
-export { default as Icon } from './MaterialIcon.vue';
-export { default as NavBar } from './NavBar.vue';
-export { default as Btn } from './Btn.vue';
-export { default as Modal } from './Modal.vue';
-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 PageTitle } from './PageTitle.vue';
-export { default as TableSchema } from './TableSchema.vue';
-export { default as TopBar } from './TopBar.vue';
-export { default as RouterWrapper } from './RouterWrapper.vue';
-export { default as DataPreview } from './DataPreview.vue';
-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 Alert } from './Alert.vue';
-export { default as Badge } from './Badge.vue';
-export { default as BglVideo } from './BglVideo.vue';
-export { default as Carousel } from './Carousel.vue';
-export { default as ModalConfirm } from './ModalConfirm.vue';
-export { default as MapEmbed } from './MapEmbed.vue';
-export { default as Flag } from './Flag.vue';
+export { default as MaterialIcon } from './MaterialIcon.vue'
+export { default as Icon } from './MaterialIcon.vue'
+export { default as NavBar } from './NavBar.vue'
+export { default as Btn } from './Btn.vue'
+export { default as Modal } from './Modal.vue'
+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 PageTitle } from './PageTitle.vue'
+export { default as TableSchema } from './TableSchema.vue'
+export { default as TopBar } from './TopBar.vue'
+export { default as RouterWrapper } from './RouterWrapper.vue'
+export { default as DataPreview } from './DataPreview.vue'
+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 Alert } from './Alert.vue'
+export { default as Badge } from './Badge.vue'
+export { default as BglVideo } from './BglVideo.vue'
+export { default as Carousel } from './Carousel.vue'
+export { default as ModalConfirm } from './ModalConfirm.vue'
+export { default as MapEmbed } from './MapEmbed.vue'
+export { default as Flag } from './Flag.vue'
 
-export * from './form';
-export * from './dashboard';
+export * from './form'
+export * from './dashboard'
 // export * from './whatsapp';
-export * from './layout';
+export * from './layout'

package/src/components/layout/BottomMenu.vue

@@ -1,37 +1,42 @@
+<script lang="ts" setup>
+import {
+	Btn,
+	Card,
+	Icon,
+	type NavLink,
+} from '@bagelink/vue'
+
+defineProps<{
+	navLinks: NavLink[]
+}>()
+</script>
+
 <template>
 	<Card
 		class="hide m_grid gap-05 bgl_bottombar px-1 txt14 justify-content-start align-items-center
 	overflow-x"
 	>
-    <slot name="brand" />
-    <Btn @click="nav.onClick" :to="nav.to" v-for="(nav, i) in navLinks" :key="i"
-    class="m_h-auto">
-      <Icon :icon="nav.icon" :size="1.4" class="m-0" />
-      <p class="m-0 pb-025  txt14 line-height-1">
-        {{ nav.label }}
-      </p>
-    </Btn>
-  </Card>
+		<slot name="brand" />
+		<Btn
+			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="m_h-auto"
+			@click="nav.onClick"
+		>
+			<Icon :icon="nav.icon" :size="1.4" class="m-0" />
+			<p class="m-0 pb-025  txt14 line-height-1">
+				{{ nav.label }}
+			</p>
+		</Btn>
+	</Card>
 </template>
 
-<script lang="ts" setup>
-import {
-  Icon, Btn, type NavLink, Card,
-} from '@bagelink/vue';
-
-defineProps<{
-  navLinks: NavLink[];
-}>();
-</script>
-
 <style>
 .bgl_bottombar .bgl_btn-flex{
   flex-direction: column;
   height: 60px;
   gap: 0;
 }
-
 </style>
+
 <style scoped>
 .bgl_bottombar {
   background-color: var(--bgl-primary);
@@ -43,7 +48,6 @@ defineProps<{
 	--bgl_bottombar-btn-width: 62px;
 }
 
-
 .bgl_bottombar>* {
   width: var(--bgl_bottombar-btn-width);
 }

package/src/components/layout/Layout.vue

@@ -1,43 +1,43 @@
-<template>
-  <div class="layout" :class="{ 'layout-h-100': h100 }">
-    <slot />
-  </div>
-</template>
-
 <script lang="ts" setup>
-type LayoutProrps = {
-  gap?: number,
-  h100?: boolean,
-  columns?: string[]
-  mColumns?: string[],
-  mRows?: string[]
-  rows?: string[],
+interface LayoutProrps {
+	gap?: number
+	h100?: boolean
+	columns?: string[]
+	mColumns?: string[]
+	mRows?: string[]
+	rows?: string[]
 }
 
 const props = withDefaults(defineProps<LayoutProrps>(), {
-  gap: 1,
-  h100: false,
-  columns: () => ([]),
-  rows: () => ([]),
-  mColumns: () => ([]),
-  mRows: () => ([]),
-});
+	gap: 1,
+	h100: false,
+	columns: () => ([]),
+	rows: () => ([]),
+	mColumns: () => ([]),
+	mRows: () => ([]),
+})
 
-const gridTemplateRows = $computed(() => (props.rows.length ? props.rows.join(' ') : 'auto'));
-const gapSize = $computed(() => `${props.gap}rem`);
+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;
-});
+	if (props.mRows?.length) return props.mRows.join(' ')
+	return gridTemplateRows
+})
 
-const gridTemplateColumns = $computed(() => (props.columns.length ? props.columns.join(' ') : 'auto'));
+const gridTemplateColumns = $computed(() => (props.columns.length ? props.columns.join(' ') : 'auto'))
 
 const mGridTemplateColumns = $computed(() => {
-  if (props.mColumns?.length) return props.mColumns.join(' ');
-  return gridTemplateColumns;
-});
+	if (props.mColumns?.length) return props.mColumns.join(' ')
+	return gridTemplateColumns
+})
 </script>
 
+<template>
+	<div class="layout" :class="{ 'layout-h-100': h100 }">
+		<slot />
+	</div>
+</template>
+
 <style scoped>
 .layout {
   min-height: 100px;

package/src/components/layout/SidebarMenu.vue

@@ -1,14 +1,39 @@
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+import { Btn, Card, Icon } from '@bagelink/vue'
+import type { NavLink } from '@bagelink/vue'
+
+const props = defineProps<{
+	navLinks?: NavLink[]
+	expandable?: boolean
+	open: boolean
+}>()
+
+const emit = defineEmits(['update:open'])
+
+const slots = useSlots()
+
+let isOpen = $ref(props.open)
+
+function toggleMenu() {
+	isOpen = !isOpen
+	emit('update:open', isOpen)
+}
+</script>
+
 <template>
 	<Card
 		class="flex column gap-05 pt-1 bgl_sidebar"
-		:class="{ wideNav: isOpen }">
+		:class="{ wideNav: isOpen }"
+	>
 		<div class="w-100 px-075">
 			<Btn
 				thin
 				color="light"
 				class="toggleNav mb-05"
 				icon="keyboard_arrow_right"
-				@click="toggleMenu" />
+				@click="toggleMenu"
+			/>
 		</div>
 		<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
 		<slot v-if="isOpen" name="brand-open" />
@@ -16,13 +41,14 @@
 		<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'],
-			}">
+			}"
+			:to="nav.to"
+			class="nav-button px-075"
+		>
 			<template #default>
 				<Icon :icon="nav.icon" :size="1.4" />
 				<p v-if="open">
@@ -35,28 +61,6 @@
 	</Card>
 </template>
 
-<script lang="ts" setup>
-import { useSlots } from 'vue';
-import { Btn, Icon, Card } from '@bagelink/vue';
-import type { NavLink } from '@bagelink/vue';
-
-const slots = useSlots();
-
-const props = defineProps<{
-	navLinks?: NavLink[];
-	expandable?: boolean;
-	open: boolean;
-}>();
-
-let isOpen = $ref(props.open);
-
-const emit = defineEmits(['update:open']);
-function toggleMenu() {
-	isOpen = !isOpen;
-	emit('update:open', isOpen);
-}
-</script>
-
 <style>
 .v-popper--theme-tooltip .v-popper__inner {
 	background: rgb(255, 255, 255) !important;

package/src/components/layout/TabbedLayout.vue

@@ -1,58 +1,60 @@
-<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']);
+import { onMounted } from 'vue'
+import type { Router } from 'vue-router'
 
-let activeTab = $ref<string>();
 const props = defineProps<{
-  title?: string;
-  tabs: string[];
-  modelValue?: string;
-  router?: Router;
-  sideTabs?: boolean;
-}>();
+	title?: string
+	tabs: string[]
+	modelValue?: string
+	router?: Router
+	sideTabs?: boolean
+}>()
 
+const emit = defineEmits(['update:modelValue'])
+
+let activeTab = $ref<string>()
 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,
-  });
+	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;
-});
+	const firstTab
+    = props.modelValue
+    || props.router?.currentRoute.value.query.t
+    || props.tabs[0]
+	activeTab = firstTab as string
+})
 </script>
 
+<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" :key="tab" :class="{
+						active:
+							tab === activeTab
+							|| tab === router?.currentRoute.value.path.split('/').slice(-1)[0],
+					}" class="tab" @click="changeTab(tab)"
+				>
+					{{ tab }}
+				</div>
+			</div>
+		</div>
+		<div v-for="tab in tabs.filter((item) => item === activeTab)" :key="tab" class="list-content">
+			<slot :key="tab" :name="tab" />
+		</div>
+	</div>
+</template>
+
 <style scoped>
 .tab {
   text-transform: capitalize;

package/src/components/layout/Tabs.vue

@@ -1,48 +1,48 @@
-<template>
-	<TabsNav v-model="slctTab" :tabs="tabs" :group="group" class="mb-05" />
-	<div v-if="currentTab">
-		<template v-if="slots[currentTab]">
-			<slot :name="currentTab" />
-		</template>
-		<template v-else-if="currentTab">
-			<component :is="tabComponent" />
-		</template>
-	</div>
-</template>
-z
 <script setup lang="ts">
-import { TabsNav, type Tab } from '@bagelink/vue';
-import { defineProps, useSlots, h, type VNode, defineComponent } from 'vue';
+import { type Tab, TabsNav } from '@bagelink/vue'
+import { type VNode, defineComponent, defineProps, h, useSlots } from 'vue'
 
-import { useTabs } from './tabsManager';
+import { useTabs } from './tabsManager'
 
 const props = defineProps<{
-	tabs: Tab[];
-	modelValue?: string;
-}>();
-
-const slots = useSlots();
-const group = Math.random().toString(36).substring(7);
-const { currentTab } = useTabs(group);
+	tabs: Tab[]
+	modelValue?: string
+}>()
 
-const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id);
+const emit = defineEmits(['update:modelValue'])
+const slots = useSlots()
+const group = Math.random().toString(36).substring(7)
+const { currentTab } = useTabs(group)
 
-const emit = defineEmits(['update:modelValue']);
+const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
 
 const slctTab = $computed({
 	get: () => props.modelValue || tabValue(props.tabs[0]),
-	set: (value) => emit('update:modelValue', value),
-});
+	set: (value) => { emit('update:modelValue', value) },
+})
 
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
-			(tab) => tabValue(tab) === currentTab.value,
-		);
-		if (currentTabIndex === -1) return null;
-		const slotChildren = slots?.default?.()?.[1]?.children;
+			tab => tabValue(tab) === currentTab.value,
+		)
+		if (currentTabIndex === -1) return null
+		const slotChildren = slots.default?.()[1]?.children
 
-		return h('div', (slotChildren as VNode[])[currentTabIndex]);
+		return h('div', (slotChildren as VNode[])[currentTabIndex])
 	},
-});
+})
 </script>
+
+z
+<template>
+	<TabsNav v-model="slctTab" :tabs="tabs" :group="group" class="mb-05" />
+	<div v-if="currentTab">
+		<template v-if="slots[currentTab]">
+			<slot :name="currentTab" />
+		</template>
+		<template v-else-if="currentTab">
+			<component :is="tabComponent" />
+		</template>
+	</div>
+</template>

package/src/components/layout/TabsBody.vue

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

package/src/components/layout/TabsNav.vue

@@ -1,63 +1,63 @@
-<template>
-	<div class="grid auto-flow-columns fit-content bgl_tabs_wrap">
-		<button
-			type="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">
-import { type Tab, Icon } from '@bagelink/vue';
-import { watch } from 'vue';
-import { useTabs } from './tabsManager';
+import { Icon, type Tab } from '@bagelink/vue'
+import { watch } from 'vue'
+import { useTabs } from './tabsManager'
 
 const props = defineProps<{
-	title?: string;
-	tabs: Tab[];
-	modelValue?: string;
-	sideTabs?: boolean;
-	group: string;
-}>();
+	title?: string
+	tabs: Tab[]
+	modelValue?: string
+	sideTabs?: boolean
+	group: string
+}>()
 
-const { currentTab } = useTabs(props.group);
-currentTab.value =
-	props.modelValue || typeof props.tabs[0] === 'string'
+const emit = defineEmits(['update:modelValue'])
+const { currentTab } = useTabs(props.group)
+currentTab.value
+	= props.modelValue || typeof props.tabs[0] === 'string'
 		? props.tabs[0]
-		: props.tabs[0].id;
+		: props.tabs[0].id
 
-const emit = defineEmits(['update:modelValue']);
-const selectTab = (tab: Tab) => {
-	currentTab.value = typeof tab === 'string' ? tab : tab.id;
-	emit('update:modelValue', currentTab.value);
-};
+function selectTab(tab: Tab) {
+	currentTab.value = typeof tab === 'string' ? tab : tab.id
+	emit('update:modelValue', currentTab.value)
+}
 
-const isActive = (tab: Tab) => {
-	if (typeof tab === 'string') return currentTab.value === tab;
-	return currentTab.value === tab.id;
-};
+function 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;
-};
+function tabLabel(tab: Tab) {
+	if (typeof tab === 'string') return tab
+	return tab.label
+}
 
 watch(
 	() => props.modelValue,
 	(value) => {
-		if (value && !isActive(value)) currentTab.value = value;
+		if (value && !isActive(value)) currentTab.value = value
 	},
 	{ immediate: true },
-);
+)
 </script>
 
+<template>
+	<div class="grid auto-flow-columns fit-content bgl_tabs_wrap">
+		<button
+			v-for="(tab, i) in tabs"
+			:key="i"
+			type="button"
+			:class="{ active: isActive(tab) }"
+			class="bgl_tab"
+			@click="selectTab(tab)"
+		>
+			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
+			{{ tabLabel(tab) }}
+		</button>
+	</div>
+</template>
+
 <style scoped>
 .bgl_tabs_wrap {
 	background: var(--input-bg);

package/src/components/layout/index.ts

@@ -1,7 +1,7 @@
-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';
-export { default as TabbedLayout } from './TabbedLayout.vue';
+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'
+export { default as TabbedLayout } from './TabbedLayout.vue'