@bagelink/vue 0.0.392 → 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/form/inputs/RichText.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RichText.vue"],"names":[],"mappings":"AAiBA;;gBAmTyD,MAAM;;;;gBAAN,MAAM;;;;AAL/D,wBAOG;AACH,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"}
+{"version":3,"file":"RichText.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/RichText.vue"],"names":[],"mappings":"AAiBA;;gBAwTyD,MAAM;;;;gBAAN,MAAM;;;;AAL/D,wBAOG;AACH,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"}

package/dist/components/form/inputs/SelectInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAuDA;AAIA,OAAO,wBAAwB,CAAC;AAKhC,KAAK,MAAM,GACR,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqb7C,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":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAyDA;AAIA,OAAO,wBAAwB,CAAC;AAKhC,KAAK,MAAM,GACR,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmc7C,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",
@@ -15197,6 +15196,10 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     let search = vue.ref("");
     const dropdown = vue.ref(null);
     let open = vue.ref(false);
+    function openOptions() {
+      var _a2;
+      (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+    }
     function updateOpen(visible) {
       open.value = visible;
       if (!open.value)
@@ -15238,8 +15241,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
     const filteredOptions = vue.computed(
       () => props2.options.filter((option2) => {
-        const searchTerm = new RegExp(search.value, "gi");
-        return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
+        const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
+        return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
       })
     );
     const select2 = (option2) => {
@@ -15300,12 +15303,16 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           const exists = props2.options.find(
             (o2) => getValue(o2) === getValue(option2)
           );
-          selectedItems.value.splice(i2, 1, exists);
+          if (!exists)
+            selectedItems.value.splice(i2, 1);
+          else
+            selectedItems.value.splice(i2, 1, exists);
         });
         const newSelection = JSON.stringify(selectedItems.value.map(getValue));
         if (original !== newSelection)
           emitUpdate();
-      }
+      },
+      { deep: true }
     );
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(kt$1), {
@@ -15358,6 +15365,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("label", null, [
             vue.createTextVNode(vue.toDisplayString(_ctx.label) + " ", 1),
             vue.createElementVNode("button", {
+              onKeydown: openOptions,
               onClick: _cache[0] || (_cache[0] = ($event) => updateOpen(true)),
               disabled: _ctx.disabled,
               type: "button",
@@ -15365,9 +15373,10 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             }, [
               vue.createElementVNode("p", null, vue.toDisplayString(selectedLabel.value), 1),
               vue.createVNode(vue.unref(_sfc_main$H), vue.normalizeProps(vue.guardReactiveProps({ icon: vue.unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
-            ], 10, _hoisted_1$m),
+            ], 42, _hoisted_1$m),
             _ctx.required ? (vue.openBlock(), vue.createElementBlock("input", {
               key: 0,
+              tabindex: "-1",
               style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
               onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
               value: selectedItems.value,
@@ -15380,7 +15389,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-1eb708f2"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-3e27cf1d"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -18643,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
 ];
@@ -39454,6 +39463,10 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
       return editor.value.chain().focus();
     };
     const { showModalForm } = useModal();
+    Image.configure({
+      inline: true,
+      allowBase64: true
+    });
     function addImage() {
       showModalForm({
         title: "Add Image",
@@ -45111,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"
@@ -45135,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,
@@ -46062,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: {
@@ -46084,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, [
@@ -46116,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
@@ -46129,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",
@@ -15195,6 +15194,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     let search = ref("");
     const dropdown = ref(null);
     let open = ref(false);
+    function openOptions() {
+      var _a2;
+      (_a2 = dropdown.value) == null ? void 0 : _a2.show();
+    }
     function updateOpen(visible) {
       open.value = visible;
       if (!open.value)
@@ -15236,8 +15239,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const isSelected = (option2) => !!selectedItems.value.find((item) => getValue(option2) === getValue(item));
     const filteredOptions = computed(
       () => props2.options.filter((option2) => {
-        const searchTerm = new RegExp(search.value, "gi");
-        return Boolean(option2) && (getLabel(option2).match(searchTerm) || getValue(option2).match(searchTerm));
+        const searchTerm = search.value.split(/\s+/).filter(Boolean).map((t) => new RegExp(t, "gi"));
+        return Boolean(option2) && (searchTerm.every((s2) => getLabel(option2).match(s2)) || searchTerm.length === 0);
       })
     );
     const select2 = (option2) => {
@@ -15298,12 +15301,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           const exists = props2.options.find(
             (o2) => getValue(o2) === getValue(option2)
           );
-          selectedItems.value.splice(i2, 1, exists);
+          if (!exists)
+            selectedItems.value.splice(i2, 1);
+          else
+            selectedItems.value.splice(i2, 1, exists);
         });
         const newSelection = JSON.stringify(selectedItems.value.map(getValue));
         if (original !== newSelection)
           emitUpdate();
-      }
+      },
+      { deep: true }
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(kt$1), {
@@ -15356,6 +15363,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           createElementVNode("label", null, [
             createTextVNode(toDisplayString(_ctx.label) + " ", 1),
             createElementVNode("button", {
+              onKeydown: openOptions,
               onClick: _cache[0] || (_cache[0] = ($event) => updateOpen(true)),
               disabled: _ctx.disabled,
               type: "button",
@@ -15363,9 +15371,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("p", null, toDisplayString(selectedLabel.value), 1),
               createVNode(unref(_sfc_main$H), normalizeProps(guardReactiveProps({ icon: unref(open) ? "unfold_less" : "unfold_more" })), null, 16)
-            ], 10, _hoisted_1$m),
+            ], 42, _hoisted_1$m),
             _ctx.required ? (openBlock(), createElementBlock("input", {
               key: 0,
+              tabindex: "-1",
               style: { "width": "0", "height": "0", "position": "absolute", "opacity": "0", "z-index": "-1" },
               onInput: _cache[1] || (_cache[1] = ($event) => updateOpen(true)),
               value: selectedItems.value,
@@ -15378,7 +15387,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-1eb708f2"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-3e27cf1d"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -18641,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
 ];
@@ -39452,6 +39461,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return editor.value.chain().focus();
     };
     const { showModalForm } = useModal();
+    Image.configure({
+      inline: true,
+      allowBase64: true
+    });
     function addImage() {
       showModalForm({
         title: "Add Image",
@@ -45109,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"
@@ -45133,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,
@@ -46060,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: {
@@ -46082,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, [
@@ -46114,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
@@ -46127,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);
@@ -1056,10 +1066,10 @@ display: block;
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-1eb708f2] {
+.selectinput[data-v-3e27cf1d] {
 	width: 100%;
 }
-.selectinput-option[data-v-1eb708f2] {
+.selectinput-option[data-v-3e27cf1d] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1070,14 +1080,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-1eb708f2] {
+.selectinput-options[data-v-3e27cf1d] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-1eb708f2]:hover {
+.selectinput-option[data-v-3e27cf1d]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-1eb708f2] {
+.isEmpty p[data-v-3e27cf1d] {
 	opacity: 0.3;
 }
 
@@ -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.392",
+  "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/form/inputs/RichText.vue

@@ -42,6 +42,11 @@ const focus = () => {
 };
 const { showModalForm } = useModal();
 
+Image.configure({
+	inline: true,
+	allowBase64: true,
+});
+
 function addImage() {
 	showModalForm({
 		title: 'Add Image',

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

@@ -7,6 +7,7 @@
 		<label>
 			{{ label }}
 			<button
+				@keydown="openOptions"
 				@click="updateOpen(true)"
 				:disabled="disabled"
 				type="button"
@@ -16,6 +17,7 @@
 				<Icon v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }" />
 			</button>
 			<input
+				tabindex="-1"
 				style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
 				v-if="required"
 				@input="updateOpen(true)"
@@ -87,6 +89,11 @@ const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
 
 let open = $ref(false);
 
+function openOptions() {
+	dropdown?.show();
+	// updateOpen(true);
+}
+
 function updateOpen(visible: boolean) {
 	open = visible;
 	if (!open) search = '';
@@ -129,10 +136,14 @@ const isSelected = (option: Option) =>
 
 const filteredOptions = $computed(() =>
 	props.options.filter((option) => {
-		const searchTerm = new RegExp(search, 'gi');
+		const searchTerm = search
+			.split(/\s+/)
+			.filter(Boolean)
+			.map((t) => new RegExp(t, 'gi'));
 		return (
 			Boolean(option) &&
-			(getLabel(option).match(searchTerm) || getValue(option).match(searchTerm))
+			(searchTerm.every((s) => getLabel(option).match(s)) ||
+				searchTerm.length === 0)
 		);
 	})
 );
@@ -196,11 +207,13 @@ watch(
 			const exists = props.options.find(
 				(o) => getValue(o) === getValue(option)
 			);
-			selectedItems.splice(i, 1, exists);
+			if (!exists) selectedItems.splice(i, 1);
+			else selectedItems.splice(i, 1, exists);
 		});
 		const newSelection = JSON.stringify(selectedItems.map(getValue));
 		if (original !== newSelection) emitUpdate();
-	}
+	},
+	{ deep: true }
 );
 </script>
 

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>