@bagelink/vue 0.0.394 → 0.0.398

package/dist/components/Card.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.vue.d.ts","sourceRoot":"","sources":["../../src/components/Card.vue"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;;;;;;;;;AA6IA,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Card.vue.d.ts","sourceRoot":"","sources":["../../src/components/Card.vue"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;;;;;;;AA+IA,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/components/layout/SidebarMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SidebarMenu.vue"],"names":[],"mappings":"AAsBA;AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;AAmO7C,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"SidebarMenu.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SidebarMenu.vue"],"names":[],"mappings":"AAoCA;AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;AA2P7C,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.cjs

@@ -4569,11 +4569,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 const axios = axios$1.create({
-  // withCredentials to true to send cookies with requests
-  headers: {
-    "Allow-Control-Allow-Origin": "*",
-    withCredentials: true
-  }
+  withCredentials: true
 });
 class DataRequest {
   constructor(table, bagel) {
@@ -4653,11 +4649,10 @@ class BagelAuth {
   }
   async validateUser() {
     try {
-      const usr = await this.bagel.get("/users/me");
+      const { data: usr } = await axios.get("/users/me", { withCredentials: true });
       this.user = usr;
       return usr;
     } catch (err) {
-      console.log(err);
       return null;
     }
   }
@@ -4680,13 +4675,15 @@ class BagelAuth {
     const formData = new FormData();
     formData.append("username", (user == null ? void 0 : user.email) || "");
     formData.append("password", (user == null ? void 0 : user.password) || "");
+    console.log("Logging in");
     try {
       await axios.post("/auth/cookie/login", formData, {
         headers: {
-          "Content-Type": "multipart/form-data",
-          withCredentials: true
+          withCredentials: true,
+          "Content-Type": "multipart/form-data"
         }
       });
+      axios.defaults.withCredentials = true;
       return this.validateUser();
     } catch (err) {
       throw responses(((_b = (_a2 = err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b.detail) || "LOGIN_BAD_CREDENTIALS");
@@ -4720,7 +4717,6 @@ class BagelAuth {
 class Bagel {
   constructor({ host, onError }) {
     __publicField(this, "host");
-    __publicField(this, "axiosInstance", axios);
     __publicField(this, "onError");
     __publicField(this, "read_table", null);
     __publicField(this, "auth", new BagelAuth(this));
@@ -5794,7 +5790,10 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-bb2526f9"]]);
-const _hoisted_1$u = { class: "card_label" };
+const _hoisted_1$u = {
+  key: 0,
+  class: "card_label"
+};
 const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
   __name: "Card",
   props: {
@@ -5818,7 +5817,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
           "overflow-y": _ctx.overflowY
         }])
       }, [
-        vue.createElementVNode("span", _hoisted_1$u, vue.toDisplayString(_ctx.label), 1),
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$u, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         vue.renderSlot(_ctx.$slots, "default")
       ], 2);
     };
@@ -6417,9 +6416,9 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-e8219826"), n2 = n2(), vue.popScopeId(), n2);
+const _withScopeId$2 = (n2) => (vue.pushScopeId("data-v-e8219826"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$p = ["title"];
-const _hoisted_2$l = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("svg", {
+const _hoisted_2$l = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24",
   viewBox: "0 -960 960 960",
@@ -18653,9 +18652,9 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const $el = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-0dbacaa0"]]);
-const _withScopeId = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
+const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$e = ["title"];
-const _hoisted_2$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
+const _hoisted_2$b = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
 const _hoisted_3$8 = [
   _hoisted_2$b
 ];
@@ -45125,7 +45124,7 @@ const _hoisted_1$2$1 = {
   class: "layer-marker"
 };
 const _hoisted_2$2$1 = ["x", "y", "fill"];
-const _hoisted_3$1 = ["x1", "y1", "x2", "y2", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"];
+const _hoisted_3$1$1 = ["x1", "y1", "x2", "y2", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"];
 const _hoisted_4$1 = {
   key: 1,
   class: "layer-marker"
@@ -45149,7 +45148,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       "stroke-opacity": _ctx.strokeOpacity,
       "stroke-width": _ctx.strokeWidth,
       "stroke-dasharray": _ctx.strokeDasharray
-    }, null, 8, _hoisted_3$1)
+    }, null, 8, _hoisted_3$1$1)
   ])) : (vue.openBlock(), vue.createElementBlock("g", _hoisted_4$1, [
     vue.createElementVNode("text", {
       x: _ctx.y + 10,
@@ -46076,8 +46075,10 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-977dfbf4"]]);
+const _withScopeId = (n2) => (vue.pushScopeId("data-v-3c893fb1"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$5 = { class: "w-100 px-075" };
 const _hoisted_2$2 = { key: 0 };
+const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("div", { style: { "flex-grow": "1" } }, null, -1));
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "SidebarMenu",
   props: {
@@ -46098,7 +46099,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$u), {
-        class: vue.normalizeClass(["flex column gap-05 pt-1 bgl_sidebar", { "wideNav": vue.unref(isOpen) }])
+        class: vue.normalizeClass(["flex column gap-05 pt-1 bgl_sidebar", { wideNav: vue.unref(isOpen) }])
       }, {
         default: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1$5, [
@@ -46130,12 +46131,17 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             }, 1032, ["to"])), [
               [
                 _directive_tooltip,
-                { content: nav2.label, disabled: _ctx.open, class: ["nav-tooltip"] },
+                {
+                  content: nav2.label,
+                  disabled: _ctx.open,
+                  class: ["nav-tooltip"]
+                },
                 void 0,
                 { right: true }
               ]
             ]);
           }), 128)),
+          _hoisted_3$1,
           vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ]),
         _: 3
@@ -46143,7 +46149,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-65bec778"]]);
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-3c893fb1"]]);
 const _hoisted_1$4 = { class: "m-0 pb-025 txt14 line-height-1" };
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",

package/dist/index.mjs

@@ -4567,11 +4567,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 const axios = axios$1.create({
-  // withCredentials to true to send cookies with requests
-  headers: {
-    "Allow-Control-Allow-Origin": "*",
-    withCredentials: true
-  }
+  withCredentials: true
 });
 class DataRequest {
   constructor(table, bagel) {
@@ -4651,11 +4647,10 @@ class BagelAuth {
   }
   async validateUser() {
     try {
-      const usr = await this.bagel.get("/users/me");
+      const { data: usr } = await axios.get("/users/me", { withCredentials: true });
       this.user = usr;
       return usr;
     } catch (err) {
-      console.log(err);
       return null;
     }
   }
@@ -4678,13 +4673,15 @@ class BagelAuth {
     const formData = new FormData();
     formData.append("username", (user == null ? void 0 : user.email) || "");
     formData.append("password", (user == null ? void 0 : user.password) || "");
+    console.log("Logging in");
     try {
       await axios.post("/auth/cookie/login", formData, {
         headers: {
-          "Content-Type": "multipart/form-data",
-          withCredentials: true
+          withCredentials: true,
+          "Content-Type": "multipart/form-data"
         }
       });
+      axios.defaults.withCredentials = true;
       return this.validateUser();
     } catch (err) {
       throw responses(((_b = (_a2 = err.response) == null ? void 0 : _a2.data) == null ? void 0 : _b.detail) || "LOGIN_BAD_CREDENTIALS");
@@ -4718,7 +4715,6 @@ class BagelAuth {
 class Bagel {
   constructor({ host, onError }) {
     __publicField(this, "host");
-    __publicField(this, "axiosInstance", axios);
     __publicField(this, "onError");
     __publicField(this, "read_table", null);
     __publicField(this, "auth", new BagelAuth(this));
@@ -5792,7 +5788,10 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-bb2526f9"]]);
-const _hoisted_1$u = { class: "card_label" };
+const _hoisted_1$u = {
+  key: 0,
+  class: "card_label"
+};
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
@@ -5816,7 +5815,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           "overflow-y": _ctx.overflowY
         }])
       }, [
-        createElementVNode("span", _hoisted_1$u, toDisplayString(_ctx.label), 1),
+        _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1$u, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
       ], 2);
     };
@@ -6415,9 +6414,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _withScopeId$1 = (n2) => (pushScopeId("data-v-e8219826"), n2 = n2(), popScopeId(), n2);
+const _withScopeId$2 = (n2) => (pushScopeId("data-v-e8219826"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$p = ["title"];
-const _hoisted_2$l = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_2$l = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24",
   viewBox: "0 -960 960 960",
@@ -18651,9 +18650,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const $el = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-0dbacaa0"]]);
-const _withScopeId = (n2) => (pushScopeId("data-v-b87221d6"), n2 = n2(), popScopeId(), n2);
+const _withScopeId$1 = (n2) => (pushScopeId("data-v-b87221d6"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$e = ["title"];
-const _hoisted_2$b = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "slider round" }, null, -1));
+const _hoisted_2$b = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "slider round" }, null, -1));
 const _hoisted_3$8 = [
   _hoisted_2$b
 ];
@@ -45123,7 +45122,7 @@ const _hoisted_1$2$1 = {
   class: "layer-marker"
 };
 const _hoisted_2$2$1 = ["x", "y", "fill"];
-const _hoisted_3$1 = ["x1", "y1", "x2", "y2", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"];
+const _hoisted_3$1$1 = ["x1", "y1", "x2", "y2", "stroke", "stroke-opacity", "stroke-width", "stroke-dasharray"];
 const _hoisted_4$1 = {
   key: 1,
   class: "layer-marker"
@@ -45147,7 +45146,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       "stroke-opacity": _ctx.strokeOpacity,
       "stroke-width": _ctx.strokeWidth,
       "stroke-dasharray": _ctx.strokeDasharray
-    }, null, 8, _hoisted_3$1)
+    }, null, 8, _hoisted_3$1$1)
   ])) : (openBlock(), createElementBlock("g", _hoisted_4$1, [
     createElementVNode("text", {
       x: _ctx.y + 10,
@@ -46074,8 +46073,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 const Layout = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-977dfbf4"]]);
+const _withScopeId = (n2) => (pushScopeId("data-v-3c893fb1"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$5 = { class: "w-100 px-075" };
 const _hoisted_2$2 = { key: 0 };
+const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { style: { "flex-grow": "1" } }, null, -1));
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "SidebarMenu",
   props: {
@@ -46096,7 +46097,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createBlock(unref(_sfc_main$u), {
-        class: normalizeClass(["flex column gap-05 pt-1 bgl_sidebar", { "wideNav": unref(isOpen) }])
+        class: normalizeClass(["flex column gap-05 pt-1 bgl_sidebar", { wideNav: unref(isOpen) }])
       }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$5, [
@@ -46128,12 +46129,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             }, 1032, ["to"])), [
               [
                 _directive_tooltip,
-                { content: nav2.label, disabled: _ctx.open, class: ["nav-tooltip"] },
+                {
+                  content: nav2.label,
+                  disabled: _ctx.open,
+                  class: ["nav-tooltip"]
+                },
                 void 0,
                 { right: true }
               ]
             ]);
           }), 128)),
+          _hoisted_3$1,
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ]),
         _: 3
@@ -46141,7 +46147,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-65bec778"]]);
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-3c893fb1"]]);
 const _hoisted_1$4 = { class: "m-0 pb-025 txt14 line-height-1" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "BottomMenu",

package/dist/style.css

@@ -752,15 +752,25 @@ th[data-v-10808aad] {
 }
 
 .card_label {
+	font-size: 1rem;
+	position: relative;
+	top: -0.5rem;
+	padding: 0.75rem 0;
+	display: block;
+	border-bottom: 1px solid var(--border-color);
+	margin-bottom: 1rem;
+}
+.border .card_label {
 	font-size: 0.7rem;
 	font-weight: 300;
-	background: rgb(255, 255, 255);
-	padding: 0px 12px;
-	display: block;
+	background:var(--bgl-white);
+	padding: 0 0.75rem;
 	position: absolute;
-	border-radius: 100px;
-	top: -8px;
-	left: 10px;
+	top: -0.5rem;
+	inset-inline-start: 1rem;
+	border-left: 1px solid var(--border-color);
+	border-right: 1px solid var(--border-color);
+	border-bottom: unset;
 }
 .bgl_card {
 	border-radius: var(--card-border-radius);
@@ -1777,72 +1787,72 @@ img.preview[data-v-0dbacaa0] {
 }
 
 .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);
+	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;
+	justify-content: flex-start !important;
 }
 .nav-button.router-link-active {
-  background: var(--bgl-white) !important;
-  color: var(--bgl-primary);
+	background: var(--bgl-white) !important;
+	color: var(--bgl-primary);
 }
 
-.bgl_sidebar[data-v-65bec778] {
-  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;
+.bgl_sidebar[data-v-3c893fb1] {
+	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[data-v-65bec778]{
-  height: 22px !important;
-  width: 22px !important;
-  opacity: 0.4;
-  transition: var(--bgl-transition);
+.toggleNav[data-v-3c893fb1] {
+	height: 22px !important;
+	width: 22px !important;
+	opacity: 0.4;
+	transition: var(--bgl-transition);
 }
-.toggleNav[data-v-65bec778]:hover{
-  opacity: 1;
+.toggleNav[data-v-3c893fb1]:hover {
+	opacity: 1;
 }
-.wideNav .toggleNav[data-v-65bec778] {
-  transform: rotate(180deg);
+.wideNav .toggleNav[data-v-3c893fb1] {
+	transform: rotate(180deg);
 }
-.wideNav .nav-button[data-v-65bec778] {
-  padding-inline-start: 1rem !important;
-  width: 100%;
+.wideNav .nav-button[data-v-3c893fb1] {
+	padding-inline-start: 1rem !important;
+	width: 100%;
 }
-[dir="rtl"] .toggleNav[data-v-65bec778] {
-  transform: rotate(180deg);
+[dir='rtl'] .toggleNav[data-v-3c893fb1] {
+	transform: rotate(180deg);
 }
-[dir="rtl"] .wideNav .toggleNav[data-v-65bec778] {
-  transform: rotate(0deg);
+[dir='rtl'] .wideNav .toggleNav[data-v-3c893fb1] {
+	transform: rotate(0deg);
 }
-.nav-button.bgl_btn-icon[data-v-65bec778] {
-  border-radius: var(--btn-border-radius) !important;
+.nav-button.bgl_btn-icon[data-v-3c893fb1] {
+	border-radius: var(--btn-border-radius) !important;
 }
-.nav-button p[data-v-65bec778] {
-  transition: var(--nav-tran);
-  animation: fade-65bec778 2s;
-  animation-duration: 900ms;
+.nav-button p[data-v-3c893fb1] {
+	transition: var(--nav-tran);
+	animation: fade-3c893fb1 2s;
+	animation-duration: 900ms;
 }
-@keyframes fade-65bec778 {
+@keyframes fade-3c893fb1 {
 0% {
-    opacity: 0;
-    transform: translateX(-20px);
+		opacity: 0;
+		transform: translateX(-20px);
 }
 30% {
-    opacity: 0;
-    transform: translateX(-20px);
+		opacity: 0;
+		transform: translateX(-20px);
 }
 100% {
-    opacity: 1;
-    transform: translateX(0);
+		opacity: 1;
+		transform: translateX(0);
 }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.394",
+  "version": "0.0.398",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Card.vue

@@ -8,8 +8,9 @@
 			[bg || '']: bg,
 			'overflow-x': overflowX,
 			'overflow-y': overflowY,
-		}">
-		<span class="card_label">
+		}"
+	>
+		<span v-if="label" class="card_label">
 			{{ label }}
 		</span>
 		<slot />
@@ -41,16 +42,29 @@ defineProps<{
 
 <style>
 .card_label {
+	font-size: 1rem;
+	position: relative;
+	top: -0.5rem;
+	padding: 0.75rem 0;
+	display: block;
+	border-bottom: 1px solid var(--border-color);
+	margin-bottom: 1rem;
+
+}
+.border .card_label {
 	font-size: 0.7rem;
 	font-weight: 300;
-	background: rgb(255, 255, 255);
-	padding: 0px 12px;
-	display: block;
+	background:var(--bgl-white);
+	padding: 0 0.75rem;
 	position: absolute;
-	border-radius: 100px;
-	top: -8px;
-	left: 10px;
+	top: -0.5rem;
+	inset-inline-start: 1rem;
+	border-left: 1px solid var(--border-color);
+	border-right: 1px solid var(--border-color);
+	border-bottom: unset;
+
 }
+
 .bgl_card {
 	border-radius: var(--card-border-radius);
 	background: var(--bgl-white);

package/src/components/layout/SidebarMenu.vue

@@ -1,15 +1,28 @@
 <template>
-	<Card class="flex column gap-05 pt-1 bgl_sidebar" :class="{ 'wideNav': isOpen }">
+	<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" />
+			<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'] }"
-		>
+			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">
@@ -17,6 +30,7 @@
 				</p>
 			</template>
 		</Btn>
+		<div style="flex-grow: 1" />
 		<slot name="footer" />
 	</Card>
 </template>
@@ -28,7 +42,11 @@ import type { NavLink } from '@bagelink/vue';
 
 const slots = useSlots();
 
-const props = defineProps<{ navLinks?: NavLink[], expandable?: boolean, open: boolean }>();
+const props = defineProps<{
+	navLinks?: NavLink[];
+	expandable?: boolean;
+	open: boolean;
+}>();
 
 let isOpen = $ref(props.open);
 
@@ -41,85 +59,85 @@ function toggleMenu() {
 
 <style>
 .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);
+	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;
+	justify-content: flex-start !important;
 }
 
 .nav-button.router-link-active {
-  background: var(--bgl-white) !important;
-  color: var(--bgl-primary);
+	background: var(--bgl-white) !important;
+	color: var(--bgl-primary);
 }
 </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;
+	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);
+.toggleNav {
+	height: 22px !important;
+	width: 22px !important;
+	opacity: 0.4;
+	transition: var(--bgl-transition);
 }
-.toggleNav:hover{
-  opacity: 1;
+.toggleNav:hover {
+	opacity: 1;
 }
 
 .wideNav .toggleNav {
-  transform: rotate(180deg);
+	transform: rotate(180deg);
 }
 
 .wideNav .nav-button {
-  padding-inline-start: 1rem !important;
-  width: 100%;
+	padding-inline-start: 1rem !important;
+	width: 100%;
 }
 
-[dir="rtl"] .toggleNav {
-  transform: rotate(180deg);
+[dir='rtl'] .toggleNav {
+	transform: rotate(180deg);
 }
 
-[dir="rtl"] .wideNav .toggleNav {
-  transform: rotate(0deg);
+[dir='rtl'] .wideNav .toggleNav {
+	transform: rotate(0deg);
 }
 
 .nav-button.bgl_btn-icon {
-  border-radius: var(--btn-border-radius) !important;
+	border-radius: var(--btn-border-radius) !important;
 }
 
 .nav-button p {
-  transition: var(--nav-tran);
-  animation: fade 2s;
-  animation-duration: 900ms;
+	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);
-  }
+	0% {
+		opacity: 0;
+		transform: translateX(-20px);
+	}
+
+	30% {
+		opacity: 0;
+		transform: translateX(-20px);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
 }
 </style>