@bagelink/vue 0.0.749 → 0.0.753

package/src/components/layout/SidebarMenu.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useSlots } from 'vue'
 import { Btn, Card, Icon } from '@bagelink/vue'
+import { useSlots } from 'vue'
 import type { NavLink } from '@bagelink/vue'
 
 const props = defineProps<{
@@ -22,43 +22,45 @@ function toggleMenu() {
 </script>
 
 <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" />
+	<div class="vh-100 relative p-05 bgl_sidebar" :class="{ wideNav: isOpen }">
 		<Btn
-			v-for="(nav, i) in navLinks"
-			:key="i"
-			v-tooltip.right="{
-				content: nav.label,
-				disabled: open,
-				class: ['nav-tooltip'],
-			}"
-			:to="nav.to"
-			class="nav-button px-075"
+			thin
+			color="white"
+			class="mb-05 absolute toggleNav
+			 z-2 border"
+			icon="keyboard_arrow_right"
+			@click="toggleMenu"
+		/>
+		<Card
+			class="py-1 px-05 h-100 flex column gap-05 round relative bg-primary font-light overflow-y "
 		>
-			<template #default>
-				<Icon :icon="nav.icon" :size="1.4" />
-				<p v-if="open">
-					{{ nav.label }}
-				</p>
-			</template>
-		</Btn>
-		<div style="flex-grow: 1" />
-		<slot name="footer" />
-	</Card>
+			<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"
+				v-tooltip.right="{
+					content: nav.label,
+					disabled: open,
+					class: ['nav-tooltip'],
+				}"
+				:to="nav.to"
+				class="nav-button px-075 me-auto w-100"
+			>
+				<template #default>
+					<Icon :icon="nav.icon" :size="1.4" />
+					<transition name="showP">
+						<p v-if="open">
+							{{ nav.label }}
+						</p>
+					</transition>
+				</template>
+			</Btn>
+			<div style="flex-grow: 1" />
+			<slot name="footer" />
+		</Card>
+	</div>
 </template>
 
 <style>
@@ -70,32 +72,24 @@ function toggleMenu() {
 	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
-.wideNav .nav-button .bgl_btn-flex {
-	justify-content: flex-start !important;
-}
-
 .nav-button.router-link-active {
 	background: var(--bgl-popup-bg) !important;
 	color: var(--bgl-primary);
 }
+.nav-button .bgl_btn-flex{
+	justify-content: flex-start !important;
+}
 </style>
 
 <style scoped>
 .bgl_sidebar {
-	background-color: var(--bgl-primary);
-	color: var(--bgl-white);
-	overflow: hidden;
-	border-radius: var(--card-border-radius);
-	margin: 0.5rem;
-	width: calc(100% - 1rem);
-	padding: 0.5rem;
-	overflow-y: auto;
 }
 .toggleNav {
 	height: 22px !important;
 	width: 22px !important;
-	opacity: 0.4;
 	transition: var(--bgl-transition);
+	top: 2rem;
+	inset-inline-end: -3px;
 }
 .toggleNav:hover {
 	opacity: 1;
@@ -105,11 +99,6 @@ function toggleMenu() {
 	transform: rotate(180deg);
 }
 
-.wideNav .nav-button {
-	padding-inline-start: 1rem !important;
-	width: 100%;
-}
-
 [dir='rtl'] .toggleNav {
 	transform: rotate(180deg);
 }
@@ -118,30 +107,14 @@ function toggleMenu() {
 	transform: rotate(0deg);
 }
 
-.nav-button.bgl_btn-icon {
-	border-radius: var(--btn-border-radius) !important;
+.showP-enter-active,
+.showP-leave-active {
+  transition: all 0.5s ease;
 }
 
-.nav-button p {
-	transition: var(--nav-tran);
-	animation: fade 2s;
-	animation-duration: 900ms;
-}
-
-@keyframes fade {
-	0% {
-		opacity: 0;
-		transform: translateX(-20px);
-	}
-
-	30% {
-		opacity: 0;
-		transform: translateX(-20px);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(0);
-	}
+.showP-enter-from,
+.showP-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
 }
 </style>

package/src/components/layout/TabbedLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Router } from 'vue-router'
 import { type Raw, onMounted } from 'vue'
+import type { Router } from 'vue-router'
 
 const props = defineProps<{
 	title?: string

package/src/components/layout/Tabs.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type Tab, TabsNav } from '@bagelink/vue'
-import { type VNode, defineComponent, defineProps, h, useSlots } from 'vue'
+import { defineComponent, defineProps, h, useSlots } from 'vue'
+import type { VNode } from 'vue'
 
 import { useTabs } from './tabsManager'
 

package/src/components/layout/index.ts

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

package/src/components/lightbox/index.ts

@@ -1,6 +1,6 @@
-import type { App, Directive, DirectiveBinding } from 'vue'
-import { createApp } from 'vue'
 import { IMAGE_FORMATS_REGEXP, VIDEO_FORMATS_REGEXP } from '@bagelink/vue'
+import { createApp } from 'vue'
+import type { App, Directive, DirectiveBinding } from 'vue'
 import Lightbox from './Lightbox.vue'
 import type { LightboxItem } from './lightbox.types'
 

package/src/composables/index.ts

@@ -1,7 +1,7 @@
 import { type BglFormSchemaFnT, type BglFormSchemaT, type IfAny, getFallbackSchema } from '@bagelink/vue'
 
-import type { Ref, UnwrapRef } from 'vue'
 import { ref, watch } from 'vue'
+import type { Ref, UnwrapRef } from 'vue'
 
 interface useBglSchemaParamsT<T> {
 	schema?: BglFormSchemaFnT<T>

package/src/index.ts

@@ -1,16 +1,16 @@
+export * from './components'
+export * from './composables'
 export {
-	BagelVue,
-	type BagelOptions,
 	bagelInjectionKey,
+	type BagelOptions,
+	BagelVue,
+	i18nTInjectionKey,
 	useBagel,
 	useI18nT,
-	i18nTInjectionKey,
 } from './plugins/bagel'
 export { ModalPlugin, useModal } from './plugins/modal'
-export * from './utils'
 export * from './types'
-export * from './composables'
-export * from './components'
+export * from './utils'
 export * from './utils/allCountries'
 export * from './utils/constants'
 import './styles/bagel.css'

package/src/plugins/bagel.ts

@@ -1,10 +1,10 @@
+import { Bagel } from '@bagelink/sdk'
 import FloatingVue from 'floating-vue'
 import { inject } from 'vue'
 import type { InjectionKey, Plugin } from 'vue'
-import { Bagel } from '@bagelink/sdk'
 import Lightbox from '../components/lightbox'
-import clickOutside from '../utils/clickOutside'
 import { useLang } from '../utils'
+import clickOutside from '../utils/clickOutside'
 
 export const bagelInjectionKey = Symbol('bagel') as InjectionKey<Bagel>
 export const i18nTInjectionKey = Symbol('bagel') as InjectionKey<(key: string) => string>

package/src/plugins/modal.ts

@@ -1,7 +1,7 @@
+import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'
 import { defineComponent, h, inject } from 'vue'
-import type { InjectionKey, Plugin } from 'vue'
 import type { BglFormSchemaT, BtnOptions } from '@bagelink/vue'
-import { Modal, ModalConfirm, ModalForm } from '@bagelink/vue'
+import type { InjectionKey, Plugin } from 'vue'
 
 // Interface Definitions
 export interface ModalOptions {

package/src/styles/bagel.css

@@ -85,6 +85,12 @@ select {
     font: inherit;
 }
 
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
 
 @media screen and (max-width: 910px) {
 

package/src/styles/buttons.css

@@ -69,6 +69,10 @@
     border: 1px solid var(--border-color);
 }
 
+.border-primary {
+    border: 1px solid var(--bgl-primary);
+}
+
 .rotate-180 {
     transform: rotate(180deg);
 }

package/src/styles/theme.css

@@ -78,6 +78,11 @@
     --whatsapp-blue: #71bce6;
 }
 
+
+.testMe * {
+    outline: 1px dotted red;
+}
+
 .Vue-Toastification__toast {
     border-radius: var(--card-border-radius);
     box-shadow: none;
@@ -88,7 +93,7 @@
 }
 
 .Vue-Toastification__close-button {
-    height: 1rem;
+    height: 1.5rem;
     line-height: 1rem;
 }
 

package/src/types/index.ts

@@ -1,6 +1,6 @@
 export type {
-	ModalComponentProps as ModalFormComponentProps,
 	ModalApi,
+	ModalComponentProps as ModalFormComponentProps,
 	ModalComponentProps,
 	ModalFormOptions,
 	ModalOptions,
@@ -9,12 +9,12 @@ export type {
 import type { MaterialIcons } from './materialIcons'
 
 export type { MaterialIcons }
-export type { Tables, TableToTypeMapping } from '@bagelink/sdk'
+export * from './BagelForm'
+export * from './BtnOptions'
 export type { StorageFile } from './file'
-export type { NavLink } from './NavLink'
 
-export * from './BtnOptions'
-export * from './BagelForm'
+export type { NavLink } from './NavLink'
+export type { Tables, TableToTypeMapping } from '@bagelink/sdk'
 
 export type Tab = {
 	label: string
@@ -39,5 +39,4 @@ export type Option =
 	| Record<string, any>
 	| { label: string, value: string | number }
 
-
 export type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N

package/src/utils/index.ts

@@ -63,12 +63,12 @@ export function denullify(itemData?: Record<string, any>, fieldID?: string) {
 
 export const isDate = (dateToTest: any) => !Number.isNaN(Date.parse(dateToTest))
 
-export { formatString } from './strings'
-
 export * as bagelFormUtils from './BagelFormUtils'
 
 export { useLang } from './lang'
 
+export { formatString } from './strings'
+
 export function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T> {
 	const keys = Array.from(new Set((data ?? []).map(Object.keys).flat()))
 

package/vite.config.ts

@@ -1,9 +1,9 @@
 import { resolve } from 'node:path'
-import { URL, fileURLToPath } from 'node:url'
-import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
 import vue from '@vitejs/plugin-vue'
-import dts from 'vite-plugin-dts'
 import ReactivityTransform from '@vue-macros/reactivity-transform/vite'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
 
 const indexDir = resolve(__dirname, 'src')