@bagelink/vue 0.0.314 → 0.0.318

package/dist/style.css

@@ -37,10 +37,10 @@
   background-color: var(--bgl-bg);
 }
 
-[dir="rtl"] .top-arrow[data-v-1da5b921] {
+[dir="rtl"] .top-arrow[data-v-727b754a] {
   transform: rotate(180deg);
 }
-.nav-expend[data-v-1da5b921] {
+.nav-expend[data-v-727b754a] {
   text-align: center;
   cursor: pointer;
   background: var(--bgl-white);
@@ -66,17 +66,17 @@
 	margin-bottom: 30px;
 }
 */
-.nav-expend[data-v-1da5b921] {
+.nav-expend[data-v-727b754a] {
   background: var(--bgl-white);
 }
-.nav-expend[data-v-1da5b921]:hover {
+.nav-expend[data-v-727b754a]:hover {
   filter: brightness(95%);
   box-shadow: 0 0 20px 0 var(--bgl-primary-tint);
 }
-.nav-expend[data-v-1da5b921]:active {
+.nav-expend[data-v-727b754a]:active {
   filter: var(--bgl-active-filter);
 }
-.nav[data-v-1da5b921] {
+.nav[data-v-727b754a] {
   color: var(--bgl-white);
   background: var(--bgl-primary);
   z-index: 100;
@@ -85,10 +85,10 @@
   display: flex;
   flex-direction: column;
 }
-.nav *[data-v-1da5b921] {
+.nav *[data-v-727b754a] {
   user-select: none;
 }
-.nav-button[data-v-1da5b921] {
+.nav-button[data-v-727b754a] {
   text-decoration: none;
   cursor: pointer;
   display: flex;
@@ -99,11 +99,11 @@
   transition: all 0.2s ease;
   pointer-events: none;
 }
-.nav-button[data-v-1da5b921]:hover {
+.nav-button[data-v-727b754a]:hover {
   width: fit-content;
   pointer-events: all;
 }
-.nav-button .bgl_icon-font[data-v-1da5b921] {
+.nav-button .bgl_icon-font[data-v-727b754a] {
   font-size: 22px;
   margin: 0.25rem 10px;
   padding: 10px;
@@ -116,16 +116,16 @@
   transition: all 0.2s ease;
   pointer-events: all;
 }
-.nav-button:hover .bgl_icon-font[data-v-1da5b921],
-.nav-button.router-link-active .bgl_icon-font[data-v-1da5b921] {
+.nav-button:hover .bgl_icon-font[data-v-727b754a],
+.nav-button.router-link-active .bgl_icon-font[data-v-727b754a] {
   background: var(--bgl-white);
   color: var(--bgl-primary);
 }
-.nav-button:hover .tooltip[data-v-1da5b921] {
+.nav-button:hover .tooltip[data-v-727b754a] {
   opacity: 1;
   pointer-events: all;
 }
-.tooltip[data-v-1da5b921] {
+.tooltip[data-v-727b754a] {
   background-color: var(--bgl-white);
   color: var(--bgl-primary);
   line-height: 1;
@@ -139,23 +139,23 @@
   opacity: 0;
   margin-inline-start: 1rem;
 }
-.tooltip[data-v-1da5b921]:hover {
+.tooltip[data-v-727b754a]:hover {
   filter: brightness(95%);
 }
-.tooltip[data-v-1da5b921]:active {
+.tooltip[data-v-727b754a]:active {
   filter: brightness(90%);
 }
-.bot-buttons-wrapper[data-v-1da5b921] {
+.bot-buttons-wrapper[data-v-727b754a] {
   margin-top: auto;
   width: 100%;
 }
-.nav-links-wrapper[data-v-1da5b921] {
+.nav-links-wrapper[data-v-727b754a] {
   direction: ltr;
 }
-[dir="rtl"] .nav-links-wrapper[data-v-1da5b921] {
+[dir="rtl"] .nav-links-wrapper[data-v-727b754a] {
   direction: rtl;
 }
-.nav-scroll[data-v-1da5b921] {
+.nav-scroll[data-v-727b754a] {
   overflow-y: scroll;
   width: 50vw;
   direction: rtl;
@@ -165,30 +165,30 @@
   display: flex;
   flex-direction: column;
 }
-.nav[data-v-1da5b921]::-webkit-scrollbar-thumb {
+.nav[data-v-727b754a]::-webkit-scrollbar-thumb {
   background-color: transparent;
 }
-.nav[data-v-1da5b921]:hover::-webkit-scrollbar-thumb {
+.nav[data-v-727b754a]:hover::-webkit-scrollbar-thumb {
   background-color: var(--bgl-gray);
 }
-[dir="rtl"] .nav-scroll[data-v-1da5b921] {
+[dir="rtl"] .nav-scroll[data-v-727b754a] {
   direction: ltr;
 }
-.full-nav[data-v-1da5b921] {
+.full-nav[data-v-727b754a] {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 @media screen and (min-width: 910px) {
-.nav.open .nav-expend[data-v-1da5b921] {
+.nav.open .nav-expend[data-v-727b754a] {
     margin-inline-start: 189px;
     transform: rotate(180deg);
 }
-.nav.open[data-v-1da5b921] {
+.nav.open[data-v-727b754a] {
     width: 200px;
     text-align: start;
 }
-.nav.open .tooltip[data-v-1da5b921] {
+.nav.open .tooltip[data-v-727b754a] {
     background-color: transparent;
     color: var(--bgl-white);
     padding: 0;
@@ -197,30 +197,30 @@
     opacity: 1;
     margin-inline-start: 0rem;
 }
-.nav.open .nav-button .bgl_icon-font[data-v-1da5b921] {
+.nav.open .nav-button .bgl_icon-font[data-v-727b754a] {
     margin: 0;
     background: transparent;
 }
-.nav.open .nav-button[data-v-1da5b921] {
+.nav.open .nav-button[data-v-727b754a] {
     width: 180px;
     border-radius: 10px;
     margin-inline-start: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
 }
-.nav.open .nav-button[data-v-1da5b921]:hover,
-  .nav.open .nav-button.router-link-active[data-v-1da5b921] {
+.nav.open .nav-button[data-v-727b754a]:hover,
+  .nav.open .nav-button.router-link-active[data-v-727b754a] {
     background: var(--bgl-white);
     color: var(--bgl-primary);
 }
-.nav.open .nav-button[data-v-1da5b921]:hover,
-  .nav.open .nav-button:hover .tooltip[data-v-1da5b921],
-  .nav.open .nav-button.router-link-active .tooltip[data-v-1da5b921] {
+.nav.open .nav-button[data-v-727b754a]:hover,
+  .nav.open .nav-button:hover .tooltip[data-v-727b754a],
+  .nav.open .nav-button.router-link-active .tooltip[data-v-727b754a] {
     color: var(--bgl-primary);
 }
 }
 @media screen and (max-width: 910px) {
-.full-nav[data-v-1da5b921] {
+.full-nav[data-v-727b754a] {
     height: auto;
     display: flex;
     flex-direction: row;
@@ -229,10 +229,10 @@
     inset-inline-end: 0;
     overflow-x: auto;
 }
-.nav.open[data-v-1da5b921] {
+.nav.open[data-v-727b754a] {
     width: initial;
 }
-.nav[data-v-1da5b921] {
+.nav[data-v-727b754a] {
     width: auto;
     display: flex;
     flex-direction: row;
@@ -240,7 +240,7 @@
     overflow-x: auto;
     justify-content: flex-start;
 }
-.tooltip[data-v-1da5b921] {
+.tooltip[data-v-727b754a] {
     opacity: 1;
     background: transparent;
     color: var(--bgl-white);
@@ -249,25 +249,25 @@
     padding: 0;
     margin: 0;
 }
-.nav-button[data-v-1da5b921] {
+.nav-button[data-v-727b754a] {
     flex-direction: column;
     margin: 12px 0.25rem;
 }
-.nav-button .bgl_icon-font[data-v-1da5b921] {
+.nav-button .bgl_icon-font[data-v-727b754a] {
     padding: 2px 0 0 0;
     margin: 0;
     height: 30px;
     width: 30px;
 }
-.nav-links-wrapper[data-v-1da5b921] {
+.nav-links-wrapper[data-v-727b754a] {
     display: flex;
 }
-.bot-buttons-wrapper[data-v-1da5b921] {
+.bot-buttons-wrapper[data-v-727b754a] {
     margin-top: 0;
     width: auto;
     display: flex;
 }
-.nav-scroll[data-v-1da5b921] {
+.nav-scroll[data-v-727b754a] {
     overflow-y: visible;
     width: auto;
     direction: auto;
@@ -278,10 +278,10 @@
     flex-direction: row;
     margin-inline-end: auto;
 }
-.nav[data-v-1da5b921]::-webkit-scrollbar {
+.nav[data-v-727b754a]::-webkit-scrollbar {
     display: none;
 }
-.nav-expend[data-v-1da5b921] {
+.nav-expend[data-v-727b754a] {
     display: none;
 }
 }
@@ -2297,6 +2297,65 @@ img.preview[data-v-1be8d7b1] {
 }
 }
 
+.layout {
+  min-height: 100px;
+  display: grid;
+}
+
+.v-popper--theme-tooltip .v-popper__inner {
+  background: rgb(255, 255, 255) !important;
+  color: var(--bgl-primary) !important;
+  font-size: 15px;
+  padding: 0.5rem 1rem;
+  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[data-v-67b81581] {
+  background-color: #40b884 !important;
+}
+.bgl_sidebar[data-v-67b81581] {
+  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;
+}
+.wideNav .toggleNav[data-v-67b81581] {
+  transform: rotate(180deg);
+}
+.wideNav .nav-button[data-v-67b81581] {
+  padding-inline-start: 1rem !important;
+  width: 100%;
+}
+.nav-button.bgl_btn-icon[data-v-67b81581] {
+  border-radius: var(--btn-border-radius) !important;
+}
+.nav-button p[data-v-67b81581] {
+  transition: var(--nav-tran);
+  animation: fade-67b81581 2s;
+  animation-duration: 900ms;
+}
+@keyframes fade-67b81581 {
+0% {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+30% {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+100% {
+    opacity: 1;
+    transform: translateX(0);
+}
+}
+
 
 
 .grid {

package/dist/types/NavLink.d.ts

@@ -2,8 +2,9 @@ import { MaterialIcons } from './materialIcons';
 export type NavLink = {
     label: string;
     to?: string;
-    materialIcon: MaterialIcons;
+    icon: MaterialIcons;
     localized?: string;
+    children?: NavLink[];
     onClick?: () => void;
 };
 //# sourceMappingURL=NavLink.d.ts.map

package/dist/types/NavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA"}
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.314",
+  "version": "0.0.318",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "floating-vue": "^5.2.2",
-    "type-fest": "^4.11.1",
+    "type-fest": "^4.12.0",
     "vue-multiselect": "3.0.0-beta.3"
   },
   "scripts": {

package/src/components/NavBar.vue

@@ -1,36 +1,42 @@
 <template>
-  <div :class="{ open: isOpen, closed: !isOpen }">
-    <slot name="top" />
-    <div class="nav-expend" @click="isOpen = !isOpen" @keypress.enter="isOpen = !isOpen" role="button"
-      aria-label="Toggle Navigation" tabindex="0">
-      <MaterialIcon icon="chevron_right" class="top-arrow" />
-    </div>
-
-    <div class="full-nav">
-      <div class="nav-scroll">
-        <div class="nav-links-wrapper">
-          <component :is="link.to?'router-link':'div'" v-for="link in links" class="nav-button" :to="link.to"
-            :key="link.label" @click="link.onClick?.()">
-            <MaterialIcon :icon="link.materialIcon" />
-            <div class="tooltip">
-              {{ link.label }}
-            </div>
-          </component>
-        </div>
-      </div>
-
-      <div class="bot-buttons-wrapper">
-        <component :is="link.to?'router-link':'div'" v-for="link in footerLinks" class="nav-button" :to="link.to"
-          @click="link.onClick?.()" :key="link.label">
-          <MaterialIcon :icon="link.materialIcon" />
-          <div class="tooltip">
-            {{ link.label }}
-          </div>
-        </component>
-        <slot name="floor" />
-      </div>
-    </div>
-  </div>
+	<div :class="{ open: isOpen, closed: !isOpen }">
+		<slot name="top" />
+		<div
+			class="nav-expend" @click="isOpen = !isOpen" @keypress.enter="isOpen = !isOpen" role="button"
+			aria-label="Toggle Navigation" tabindex="0"
+		>
+			<MaterialIcon icon="chevron_right" class="top-arrow" />
+		</div>
+
+		<div class="full-nav">
+			<div class="nav-scroll">
+				<div class="nav-links-wrapper">
+					<component
+						:is="link.to?'router-link':'div'" v-for="link in links" class="nav-button" :to="link.to"
+						:key="link.label" @click="link.onClick?.()"
+					>
+						<MaterialIcon :icon="link.icon" />
+						<div class="tooltip">
+							{{ link.label }}
+						</div>
+					</component>
+				</div>
+			</div>
+
+			<div class="bot-buttons-wrapper">
+				<component
+					:is="link.to?'router-link':'div'" v-for="link in footerLinks" class="nav-button" :to="link.to"
+					@click="link.onClick?.()" :key="link.label"
+				>
+					<MaterialIcon :icon="link.icon" />
+					<div class="tooltip">
+						{{ link.label }}
+					</div>
+				</component>
+				<slot name="floor" />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -40,20 +46,20 @@ import { MaterialIcon } from '@bagelink/vue';
 const isOpen = $ref(true);
 
 withDefaults(
-  defineProps<{
+	defineProps<{
     footerLinks?: NavLink[];
     links?: NavLink[];
     homeIcon?: MaterialIcons;
     homeLabel?: string;
     homeTo?: string;
   }>(),
-  {
-    homeIcon: 'home',
-    homeLabel: 'Home',
-    homeTo: '/',
-    links: () => [],
-    footerLinks: () => [],
-  },
+	{
+		homeIcon: 'home',
+		homeLabel: 'Home',
+		homeTo: '/',
+		links: () => [],
+		footerLinks: () => [],
+	},
 );
 </script>
 

package/src/components/index.ts

@@ -28,3 +28,4 @@ export { default as Carousel } from './Carousel.vue';
 export * from './form';
 export * from './dashboard';
 export * from './whatsapp';
+export * from './layout';

package/src/components/layout/Layout.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script lang="ts" setup>
-type Props = {
+type LayoutProrps = {
   gap?: number,
   h100?: boolean,
   columns?: string[]
   rows?: string[],
 }
-const props = withDefaults(defineProps<Props>(), {
+
+const props = withDefaults(defineProps<LayoutProrps>(), {
 	gap: 1,
 	h100: false,
 	columns: () => [],

package/src/components/layout/SidebarMenu.vue

@@ -23,16 +23,10 @@
 <script lang="ts" setup>
 import { useSlots } from 'vue';
 import { Btn, Icon } from '@bagelink/vue';
-import type { MaterialIcons } from '@bagelink/vue';
+import type { NavLink } from '@bagelink/vue';
 
 const slots = useSlots();
 
-type NavLink = {
-  to?: string;
-  icon: MaterialIcons;
-  label: string;
-  children?: NavLink[];
-};
 const props = defineProps<{ navLinks?: NavLink[], expandable?: boolean, open: boolean }>();
 
 let isOpen = $ref(props.open);

package/src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { default as Layout } from './Layout.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';

package/src/types/NavLink.ts

@@ -3,7 +3,8 @@ import { MaterialIcons } from './materialIcons';
 export type NavLink = {
   label: string;
   to?: string;
-  materialIcon: MaterialIcons;
+  icon: MaterialIcons;
   localized?: string;
+  children?: NavLink[];
   onClick?: () => void;
 }

package/src/components/layout/Column.vue

@@ -1,6 +0,0 @@
-<template>
-	<div/>
-</template>
-
-<style scoped>
-</style>