@bagelink/vue 0.0.714 → 0.0.716

package/dist/components/form/inputs/RichText2/Toolbar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/Toolbar.vue"],"names":[],"mappings":"AA8GA,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,kBAAkB,CAAA;;YAI1C,aAAa;;;;YAAb,aAAa;;;;AAsJ7C,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"Toolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/Toolbar.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,aAAa,EAAuB,MAAM,kBAAkB,CAAA;;YAI1C,aAAa;;;;YAAb,aAAa;;;;AAkK7C,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

package/dist/components/form/inputs/RichText2/index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/index.vue"],"names":[],"mappings":"AAgNA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;;gBAKjB,MAAM;oBAAkB,aAAa;;;;gBAArC,MAAM;oBAAkB,aAAa;;;;AAoOzE,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/index.vue"],"names":[],"mappings":"AAkOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;;gBAKjB,MAAM;oBAAkB,aAAa;;;;gBAArC,MAAM;oBAAkB,aAAa;;;;AA8OzE,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,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":"AA8VA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAIN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAgLtB,iBAAS,cAAc;kBAmQI,GAAG;EAkC7B;AACD,QAAA,MAAM,eAAe;aAjdX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;;aAZV,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;UA4clB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"SelectInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/SelectInput.vue"],"names":[],"mappings":"AAyWA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,EAIN,KAAK,aAAa,EAClB,KAAK,MAAM,EAEX,MAAM,eAAe,CAAA;AAgLtB,iBAAS,cAAc;kBAyQI,GAAG;EAkC7B;AACD,QAAA,MAAM,eAAe;aAvdX,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;;aAZV,MAAM,EAAE;kBACH,MAAM;eACT,OAAO;iBACL,MAAM;iBACN,OAAO;eACT,OAAO;YACV,MAAM;gBACF,OAAO;kBACL,OAAO;WACd,aAAa;gBACR,OAAO;mBACJ,MAAM;gBACT,OAAO;;;UAkdlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

package/dist/index.cjs

@@ -6500,7 +6500,7 @@ const _hoisted_3$k = [
 const _hoisted_4$e = { class: "infinite-wrapper" };
 const _hoisted_5$e = { class: "row first-row" };
 const _hoisted_6$9 = { key: 0 };
-const _hoisted_7$5 = ["onClick"];
+const _hoisted_7$4 = ["onClick"];
 const _hoisted_8$2 = { class: "flex" };
 const _hoisted_9$2 = ["onClick"];
 const _hoisted_10$1 = { key: 0 };
@@ -6673,7 +6673,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_7$5);
+                ], 8, _hoisted_7$4);
               }), 128))
             ]),
             vue.createElementVNode("tbody", null, [
@@ -6772,7 +6772,7 @@ const _hoisted_6$8 = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_7$4 = { class: "key" };
+const _hoisted_7$3 = { class: "key" };
 const _hoisted_8$1 = { class: "m-0" };
 const _hoisted_9$1 = {
   key: 0,
@@ -6841,7 +6841,7 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(computedSchema.value, ({ id, label }) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: id }, [
               !isUnset(itemData.value[id]) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$8, [
-                vue.createElementVNode("div", _hoisted_7$4, [
+                vue.createElementVNode("div", _hoisted_7$3, [
                   vue.createElementVNode("p", _hoisted_8$1, vue.toDisplayString(label), 1)
                 ]),
                 vue.createElementVNode("div", null, [
@@ -16319,8 +16319,7 @@ const _hoisted_4$c = {
   class: "ms-auto ps-05 me-05"
 };
 const _hoisted_5$c = ["value"];
-const _hoisted_6$7 = { class: "selectinput-options" };
-const _hoisted_7$3 = ["aria-selected", "onClick", "onKeydown"];
+const _hoisted_6$7 = ["aria-selected", "onClick", "onKeydown"];
 const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectInput",
   props: {
@@ -16485,7 +16484,9 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                 placeholder: "Search",
                 icon: "search"
               }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_6$7, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
+              }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option2, i2) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: `${option2}${i2}`,
@@ -16496,19 +16497,21 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                     onClick: ($event) => select2(option2),
                     onKeydown: vue.withKeys(($event) => select2(option2), ["enter"])
                   }, [
-                    isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
-                      key: 0,
-                      icon: "check"
-                    })) : vue.createCommentVNode("", true),
-                    !isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
-                      key: 1,
-                      class: "opacity-3",
-                      icon: "fiber_manual_record"
-                    })) : vue.createCommentVNode("", true),
+                    _ctx.multiselect ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+                        key: 0,
+                        icon: "select_check_box"
+                      })) : vue.createCommentVNode("", true),
+                      !isSelected(option2) ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$Q), {
+                        key: 1,
+                        class: "opacity-3",
+                        icon: "check_box_outline_blank"
+                      })) : vue.createCommentVNode("", true)
+                    ], 64)) : vue.createCommentVNode("", true),
                     vue.createElementVNode("span", null, vue.toDisplayString(getLabel(option2)), 1)
-                  ], 42, _hoisted_7$3);
+                  ], 42, _hoisted_6$7);
                 }), 128))
-              ]),
+              ], 2),
               vue.renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
             _: 3
@@ -16532,9 +16535,10 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
                 !_ctx.hideLabel ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3$g, vue.toDisplayString(selectedLabel.value), 1)) : vue.createCommentVNode("", true),
                 _ctx.clearable && selectedItemCount.value > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$c, [
                   vue.createVNode(vue.unref(Btn), {
+                    flat: "",
                     thin: "",
                     icon: "clear",
-                    class: "color-primary bg-gray-20",
+                    class: "color-gray",
                     onClick: _cache[0] || (_cache[0] = ($event) => {
                       vue.isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
@@ -16562,7 +16566,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-a26862a2"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-25fde24f"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -47156,7 +47160,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$f = {
-  class: "toolbar",
+  class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
 const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
@@ -47167,82 +47171,58 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   emits: ["action"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
-    const colorPicker = vue.ref(null);
-    const fontSizeInput = vue.ref(null);
+    vue.ref(null);
+    vue.ref(null);
     const toolbarOptions = [
+      { name: "separator" },
       { name: "bold", icon: "format_bold" },
       { name: "italic", icon: "format_italic" },
       { name: "underline", icon: "format_underlined" },
-      { name: "fontSize", icon: "format_size" },
-      { name: "fontFamily", icon: "font_download" },
-      { name: "textColor", icon: "text_format" },
-      { name: "backgroundColor", icon: "format_color_fill" },
-      { name: "alignLeft", icon: "format_align_left" },
-      { name: "alignCenter", icon: "format_align_center" },
-      { name: "alignRight", icon: "format_align_right" },
-      { name: "alignJustify", icon: "format_align_justify" },
+      { name: "separator" },
       { name: "orderedList", icon: "format_list_numbered" },
       { name: "unorderedList", icon: "format_list_bulleted" },
-      { name: "indent", icon: "format_indent_increase" },
-      { name: "outdent", icon: "format_indent_decrease" },
-      { name: "link", icon: "link" },
-      { name: "image", icon: "image" },
-      { name: "table", icon: "table_chart" },
-      { name: "blockquote", icon: "format_quote" },
-      { name: "codeBlock", icon: "code" },
-      { name: "splitView", icon: "splitscreen_right" },
-      { name: "codeView", icon: "code" }
+      { name: "separator" },
+      { name: "link", icon: "add_link" },
+      { name: "image", icon: "add_photo_alternate" },
+      { name: "youtube", icon: "youtube_activity" },
+      { name: "separator" },
+      { name: "splitView", icon: "code" },
+      { name: "clear", icon: "format_clear" }
     ];
-    function handleColorPick(type3) {
-      var _a2;
-      const color2 = (_a2 = colorPicker.value) == null ? void 0 : _a2.value;
-      if (color2) {
-        emit2("action", type3, color2);
-      }
-    }
-    function handleFontSizeChange() {
-      var _a2;
-      const size2 = (_a2 = fontSizeInput.value) == null ? void 0 : _a2.value;
-      if (size2) {
-        emit2("action", "fontSize", size2);
-      }
+    function handleSelectChange(selectedOption) {
+      emit2("action", "formatBlock", selectedOption);
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(toolbarOptions.filter((t) => _ctx.config.includes(t.name)), (action) => {
-          return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(Btn), {
-            key: action.name,
-            thin: "",
-            color: "light",
-            "aria-label": action.name,
-            icon: action.icon,
-            onClick: ($event) => emit2("action", action.name)
-          }, null, 8, ["aria-label", "icon", "onClick"])), [
-            [_directive_tooltip, action.name]
-          ]);
-        }), 128)),
-        _ctx.config.includes("textColor") || _ctx.config.includes("backgroundColor") ? (vue.openBlock(), vue.createElementBlock("input", {
-          key: 0,
-          ref_key: "colorPicker",
-          ref: colorPicker,
-          type: "color",
-          onChange: _cache[0] || (_cache[0] = ($event) => handleColorPick(_ctx.config.includes("textColor") ? "textColor" : "backgroundColor"))
-        }, null, 544)) : vue.createCommentVNode("", true),
-        _ctx.config.includes("fontSize") ? (vue.openBlock(), vue.createElementBlock("input", {
-          key: 1,
-          ref_key: "fontSizeInput",
-          ref: fontSizeInput,
-          type: "number",
-          min: "1",
-          max: "7",
-          onChange: handleFontSizeChange
-        }, null, 544)) : vue.createCommentVNode("", true)
+        vue.createVNode(SelectInput, {
+          class: "m-0 w150",
+          options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
+          onChange: handleSelectChange
+        }),
+        (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(toolbarOptions, (action, index2) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+            action.name !== "separator" && _ctx.config.includes(action.name) ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+              key: action.name,
+              thin: "",
+              flat: "",
+              class: "rounded",
+              "aria-label": action.name,
+              icon: action.icon,
+              onClick: ($event) => emit2("action", action.name)
+            }, null, 8, ["aria-label", "icon", "onClick"])), [
+              [_directive_tooltip, action.name]
+            ]) : vue.createCommentVNode("", true),
+            action.name === "separator" ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: `separator-${index2}`,
+              class: "opacity-2 mb-025"
+            }, "|")) : vue.createCommentVNode("", true)
+          ], 64);
+        }), 64))
       ]);
     };
   }
 });
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-4c741194"]]);
 function applyFormatting(command2, value = "") {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -47415,8 +47395,11 @@ function createTable() {
     }
   }
 }
-const _hoisted_1$e = { class: "rich-text-editor" };
-const _hoisted_2$b = ["innerHTML"];
+const _hoisted_1$e = { class: "rich-text-editor round pt-05 px-1 pb-1" };
+const _hoisted_2$b = {
+  key: 0,
+  class: "preview-area bg-black color-white w-100 rounded p-1"
+};
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
@@ -47450,7 +47433,9 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       "blockquote",
       "codeBlock",
       "splitView",
-      "codeView"
+      "youtube",
+      "codeView",
+      "clear"
     ];
     const config = vue.ref(props2.toolbarConfig || defaultConfig2);
     let contentHtml = vue.ref(props2.modelValue);
@@ -47533,15 +47518,15 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-        vue.createVNode(Toolbar, {
+        vue.createVNode(_sfc_main$a, {
           config: config.value,
           onAction: handleToolbarAction
         }, null, 8, ["config"]),
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["editor-container", { "split-view": vue.unref(isSplitView) }])
+          class: vue.normalizeClass(["editor-container flex flex-stretch", { "split-view": vue.unref(isSplitView) }])
         }, [
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["content-area", { "code-view": vue.unref(isCodeView) }])
+            class: vue.normalizeClass(["content-area rounded p-1 bg-white shadow-light w-100 grid", { "code-view": vue.unref(isCodeView) }])
           }, [
             vue.unref(isCodeView) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
               key: 0,
@@ -47554,6 +47539,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
               ref_key: "editableContent",
               ref: editableContent,
               contenteditable: "true",
+              class: "editableContent",
               role: "textbox",
               "aria-multiline": "true",
               tabindex: "0",
@@ -47561,17 +47547,13 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
               onKeydown: handleKeyDown2
             }, null, 544))
           ], 2),
-          vue.unref(isSplitView) ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: "preview-area",
-            innerHTML: vue.unref(contentHtml)
-          }, null, 8, _hoisted_2$b)) : vue.createCommentVNode("", true)
+          vue.unref(isSplitView) ? (vue.openBlock(), vue.createElementBlock("code", _hoisted_2$b, vue.toDisplayString(vue.unref(contentHtml)), 1)) : vue.createCommentVNode("", true)
         ], 2)
       ]);
     };
   }
 });
-const index = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-e3cd444d"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-d3f64de7"]]);
 const _hoisted_1$d = ["for"];
 const _hoisted_2$a = ["id", "name", "value"];
 const _hoisted_3$8 = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };

package/dist/index.mjs

@@ -6498,7 +6498,7 @@ const _hoisted_3$k = [
 const _hoisted_4$e = { class: "infinite-wrapper" };
 const _hoisted_5$e = { class: "row first-row" };
 const _hoisted_6$9 = { key: 0 };
-const _hoisted_7$5 = ["onClick"];
+const _hoisted_7$4 = ["onClick"];
 const _hoisted_8$2 = { class: "flex" };
 const _hoisted_9$2 = ["onClick"];
 const _hoisted_10$1 = { key: 0 };
@@ -6671,7 +6671,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_7$5);
+                ], 8, _hoisted_7$4);
               }), 128))
             ]),
             createElementVNode("tbody", null, [
@@ -6770,7 +6770,7 @@ const _hoisted_6$8 = {
   key: 0,
   class: "data-row"
 };
-const _hoisted_7$4 = { class: "key" };
+const _hoisted_7$3 = { class: "key" };
 const _hoisted_8$1 = { class: "m-0" };
 const _hoisted_9$1 = {
   key: 0,
@@ -6839,7 +6839,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(computedSchema.value, ({ id, label }) => {
             return openBlock(), createElementBlock(Fragment$1, { key: id }, [
               !isUnset(itemData.value[id]) ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
-                createElementVNode("div", _hoisted_7$4, [
+                createElementVNode("div", _hoisted_7$3, [
                   createElementVNode("p", _hoisted_8$1, toDisplayString(label), 1)
                 ]),
                 createElementVNode("div", null, [
@@ -16317,8 +16317,7 @@ const _hoisted_4$c = {
   class: "ms-auto ps-05 me-05"
 };
 const _hoisted_5$c = ["value"];
-const _hoisted_6$7 = { class: "selectinput-options" };
-const _hoisted_7$3 = ["aria-selected", "onClick", "onKeydown"];
+const _hoisted_6$7 = ["aria-selected", "onClick", "onKeydown"];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "SelectInput",
   props: {
@@ -16483,7 +16482,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 placeholder: "Search",
                 icon: "search"
               }, null, 8, ["modelValue"])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_6$7, [
+              createElementVNode("div", {
+                class: normalizeClass(["selectinput-options", { multiselect: _ctx.multiselect }])
+              }, [
                 (openBlock(true), createElementBlock(Fragment$1, null, renderList(filteredOptions.value, (option2, i2) => {
                   return openBlock(), createElementBlock("div", {
                     key: `${option2}${i2}`,
@@ -16494,19 +16495,21 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                     onClick: ($event) => select2(option2),
                     onKeydown: withKeys(($event) => select2(option2), ["enter"])
                   }, [
-                    isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
-                      key: 0,
-                      icon: "check"
-                    })) : createCommentVNode("", true),
-                    !isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
-                      key: 1,
-                      class: "opacity-3",
-                      icon: "fiber_manual_record"
-                    })) : createCommentVNode("", true),
+                    _ctx.multiselect ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
+                      isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
+                        key: 0,
+                        icon: "select_check_box"
+                      })) : createCommentVNode("", true),
+                      !isSelected(option2) ? (openBlock(), createBlock(unref(_sfc_main$Q), {
+                        key: 1,
+                        class: "opacity-3",
+                        icon: "check_box_outline_blank"
+                      })) : createCommentVNode("", true)
+                    ], 64)) : createCommentVNode("", true),
                     createElementVNode("span", null, toDisplayString(getLabel(option2)), 1)
-                  ], 42, _hoisted_7$3);
+                  ], 42, _hoisted_6$7);
                 }), 128))
-              ]),
+              ], 2),
               renderSlot(_ctx.$slots, "last", {}, void 0, true)
             ]),
             _: 3
@@ -16530,9 +16533,10 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 !_ctx.hideLabel ? (openBlock(), createElementBlock("p", _hoisted_3$g, toDisplayString(selectedLabel.value), 1)) : createCommentVNode("", true),
                 _ctx.clearable && selectedItemCount.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
                   createVNode(unref(Btn), {
+                    flat: "",
                     thin: "",
                     icon: "clear",
-                    class: "color-primary bg-gray-20",
+                    class: "color-gray",
                     onClick: _cache[0] || (_cache[0] = ($event) => {
                       isRef(selectedItems) ? selectedItems.value = [] : selectedItems = [];
                       emitUpdate();
@@ -16560,7 +16564,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-a26862a2"]]);
+const SelectInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-25fde24f"]]);
 /*!
   * vue-draggable-next v2.2.0
   * (c) 2023 Anish George
@@ -47154,7 +47158,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$f = {
-  class: "toolbar",
+  class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
 };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
@@ -47165,82 +47169,58 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   emits: ["action"],
   setup(__props, { emit: __emit }) {
     const emit2 = __emit;
-    const colorPicker = ref(null);
-    const fontSizeInput = ref(null);
+    ref(null);
+    ref(null);
     const toolbarOptions = [
+      { name: "separator" },
       { name: "bold", icon: "format_bold" },
       { name: "italic", icon: "format_italic" },
       { name: "underline", icon: "format_underlined" },
-      { name: "fontSize", icon: "format_size" },
-      { name: "fontFamily", icon: "font_download" },
-      { name: "textColor", icon: "text_format" },
-      { name: "backgroundColor", icon: "format_color_fill" },
-      { name: "alignLeft", icon: "format_align_left" },
-      { name: "alignCenter", icon: "format_align_center" },
-      { name: "alignRight", icon: "format_align_right" },
-      { name: "alignJustify", icon: "format_align_justify" },
+      { name: "separator" },
       { name: "orderedList", icon: "format_list_numbered" },
       { name: "unorderedList", icon: "format_list_bulleted" },
-      { name: "indent", icon: "format_indent_increase" },
-      { name: "outdent", icon: "format_indent_decrease" },
-      { name: "link", icon: "link" },
-      { name: "image", icon: "image" },
-      { name: "table", icon: "table_chart" },
-      { name: "blockquote", icon: "format_quote" },
-      { name: "codeBlock", icon: "code" },
-      { name: "splitView", icon: "splitscreen_right" },
-      { name: "codeView", icon: "code" }
+      { name: "separator" },
+      { name: "link", icon: "add_link" },
+      { name: "image", icon: "add_photo_alternate" },
+      { name: "youtube", icon: "youtube_activity" },
+      { name: "separator" },
+      { name: "splitView", icon: "code" },
+      { name: "clear", icon: "format_clear" }
     ];
-    function handleColorPick(type3) {
-      var _a2;
-      const color2 = (_a2 = colorPicker.value) == null ? void 0 : _a2.value;
-      if (color2) {
-        emit2("action", type3, color2);
-      }
-    }
-    function handleFontSizeChange() {
-      var _a2;
-      const size2 = (_a2 = fontSizeInput.value) == null ? void 0 : _a2.value;
-      if (size2) {
-        emit2("action", "fontSize", size2);
-      }
+    function handleSelectChange(selectedOption) {
+      emit2("action", "formatBlock", selectedOption);
     }
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        (openBlock(true), createElementBlock(Fragment$1, null, renderList(toolbarOptions.filter((t) => _ctx.config.includes(t.name)), (action) => {
-          return withDirectives((openBlock(), createBlock(unref(Btn), {
-            key: action.name,
-            thin: "",
-            color: "light",
-            "aria-label": action.name,
-            icon: action.icon,
-            onClick: ($event) => emit2("action", action.name)
-          }, null, 8, ["aria-label", "icon", "onClick"])), [
-            [_directive_tooltip, action.name]
-          ]);
-        }), 128)),
-        _ctx.config.includes("textColor") || _ctx.config.includes("backgroundColor") ? (openBlock(), createElementBlock("input", {
-          key: 0,
-          ref_key: "colorPicker",
-          ref: colorPicker,
-          type: "color",
-          onChange: _cache[0] || (_cache[0] = ($event) => handleColorPick(_ctx.config.includes("textColor") ? "textColor" : "backgroundColor"))
-        }, null, 544)) : createCommentVNode("", true),
-        _ctx.config.includes("fontSize") ? (openBlock(), createElementBlock("input", {
-          key: 1,
-          ref_key: "fontSizeInput",
-          ref: fontSizeInput,
-          type: "number",
-          min: "1",
-          max: "7",
-          onChange: handleFontSizeChange
-        }, null, 544)) : createCommentVNode("", true)
+        createVNode(SelectInput, {
+          class: "m-0 w150",
+          options: ["Text", "Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6", "Blockquote", "Code"],
+          onChange: handleSelectChange
+        }),
+        (openBlock(), createElementBlock(Fragment$1, null, renderList(toolbarOptions, (action, index2) => {
+          return openBlock(), createElementBlock(Fragment$1, null, [
+            action.name !== "separator" && _ctx.config.includes(action.name) ? withDirectives((openBlock(), createBlock(unref(Btn), {
+              key: action.name,
+              thin: "",
+              flat: "",
+              class: "rounded",
+              "aria-label": action.name,
+              icon: action.icon,
+              onClick: ($event) => emit2("action", action.name)
+            }, null, 8, ["aria-label", "icon", "onClick"])), [
+              [_directive_tooltip, action.name]
+            ]) : createCommentVNode("", true),
+            action.name === "separator" ? (openBlock(), createElementBlock("span", {
+              key: `separator-${index2}`,
+              class: "opacity-2 mb-025"
+            }, "|")) : createCommentVNode("", true)
+          ], 64);
+        }), 64))
       ]);
     };
   }
 });
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-4c741194"]]);
 function applyFormatting(command2, value = "") {
   const selection = window.getSelection();
   if (selection && selection.rangeCount > 0) {
@@ -47413,8 +47393,11 @@ function createTable() {
     }
   }
 }
-const _hoisted_1$e = { class: "rich-text-editor" };
-const _hoisted_2$b = ["innerHTML"];
+const _hoisted_1$e = { class: "rich-text-editor round pt-05 px-1 pb-1" };
+const _hoisted_2$b = {
+  key: 0,
+  class: "preview-area bg-black color-white w-100 rounded p-1"
+};
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -47448,7 +47431,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       "blockquote",
       "codeBlock",
       "splitView",
-      "codeView"
+      "youtube",
+      "codeView",
+      "clear"
     ];
     const config = ref(props2.toolbarConfig || defaultConfig2);
     let contentHtml = ref(props2.modelValue);
@@ -47531,15 +47516,15 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createVNode(Toolbar, {
+        createVNode(_sfc_main$a, {
           config: config.value,
           onAction: handleToolbarAction
         }, null, 8, ["config"]),
         createElementVNode("div", {
-          class: normalizeClass(["editor-container", { "split-view": unref(isSplitView) }])
+          class: normalizeClass(["editor-container flex flex-stretch", { "split-view": unref(isSplitView) }])
         }, [
           createElementVNode("div", {
-            class: normalizeClass(["content-area", { "code-view": unref(isCodeView) }])
+            class: normalizeClass(["content-area rounded p-1 bg-white shadow-light w-100 grid", { "code-view": unref(isCodeView) }])
           }, [
             unref(isCodeView) ? withDirectives((openBlock(), createElementBlock("textarea", {
               key: 0,
@@ -47552,6 +47537,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               ref_key: "editableContent",
               ref: editableContent,
               contenteditable: "true",
+              class: "editableContent",
               role: "textbox",
               "aria-multiline": "true",
               tabindex: "0",
@@ -47559,17 +47545,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               onKeydown: handleKeyDown2
             }, null, 544))
           ], 2),
-          unref(isSplitView) ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: "preview-area",
-            innerHTML: unref(contentHtml)
-          }, null, 8, _hoisted_2$b)) : createCommentVNode("", true)
+          unref(isSplitView) ? (openBlock(), createElementBlock("code", _hoisted_2$b, toDisplayString(unref(contentHtml)), 1)) : createCommentVNode("", true)
         ], 2)
       ]);
     };
   }
 });
-const index = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-e3cd444d"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-d3f64de7"]]);
 const _hoisted_1$d = ["for"];
 const _hoisted_2$a = ["id", "name", "value"];
 const _hoisted_3$8 = { class: "flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025" };

package/dist/style.css

@@ -1295,30 +1295,37 @@ 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-a26862a2] {
+.selectinput[data-v-25fde24f] {
 	width: 100%;
 }
-.selectinput-option[data-v-a26862a2] {
+.selectinput-option[data-v-25fde24f] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
 	transition: all 0.2s;
 	display: grid;
-	grid-template-columns: 10px 1fr;
+	grid-template-columns:1fr;
 	justify-content: space-between;
 	width: 100%;
 	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-options.multiselect .selectinput-option[data-v-25fde24f] {
+	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-a26862a2] {
+.selectinput-options[data-v-25fde24f] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-a26862a2]:hover {
+.selectinput-option[data-v-25fde24f]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-a26862a2] {
+.isEmpty p[data-v-25fde24f] {
 	opacity: 0.3;
 }
+.selected[data-v-25fde24f]{
+	background: var(--input-bg);
+}
 
 .bagel-input label {
 	font-size: var(--label-font-size);
@@ -2194,75 +2201,78 @@ p {
 	border-radius: var(--input-border-radius);
 }
 
-.toolbar[data-v-4c741194] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  padding: 10px;
-  background-color: #f0f0f0;
-  border-bottom: 1px solid #ccc;
-}
-button[data-v-4c741194]:hover {
-  background-color: #e0e0e0;
-}
-input[type="color"][data-v-4c741194],
-input[type="number"][data-v-4c741194] {
-  width: 40px;
-  height: 30px;
-  padding: 0;
-  border: 1px solid #ccc;
-  border-radius: 3px;
+.rich-text-editor[data-v-d3f64de7] {
+	background: var(--input-bg);
+	margin-bottom: 0.5rem;
+	width: 100%;
+	/* font-family: Arial, sans-serif; */
+	/* max-width: 800px; */
+	/* margin: 0 auto; */
 }
-
-.rich-text-editor[data-v-e3cd444d] {
-  font-family: Arial, sans-serif;
-  max-width: 800px;
-  margin: 0 auto;
+.editableContent[data-v-d3f64de7]{
+	min-height: 100%;
+	white-space: pre-wrap;
+	outline: none;
 }
-[contenteditable='true'][data-v-e3cd444d] {
-  	white-space: pre-wrap;
-  	word-wrap: break-word;
+/* [contenteditable='true'] {
+	  white-space: pre-wrap;
+	  word-wrap: break-word;
 	outline: none;
-	border: none;
 	height: 100%;
+} */
+.content-area[data-v-d3f64de7]{
+}
+.content-area[data-v-d3f64de7], .preview-area[data-v-d3f64de7]{
+	min-height: 200px;
 }
-.editor-container[data-v-e3cd444d] {
+.preview-area[data-v-d3f64de7]{}
+
+/*
+
+.editor-container {
   display: flex;
   border: 1px solid #ccc;
   border-radius: 4px;
   overflow: hidden;
 }
-.content-area[data-v-e3cd444d],
-.preview-area[data-v-e3cd444d] {
+
+.content-area,
+.preview-area {
   flex: 1;
   min-height: 300px;
   padding: 10px;
   overflow-y: auto;
 }
-.content-area[data-v-e3cd444d]:focus {
+
+.content-area:focus {
   outline: none;
 }
-.split-view .content-area[data-v-e3cd444d],
-.split-view .preview-area[data-v-e3cd444d] {
+
+.split-view .content-area,
+.split-view .preview-area {
   width: 50%;
 }
-.preview-area[data-v-e3cd444d] {
+
+.preview-area {
   background-color: #f9f9f9;
   border-left: 1px solid #ccc;
-}
-@media (max-width: 768px) {
-.split-view[data-v-e3cd444d] {
+} */
+
+/* @media (max-width: 768px) {
+  .split-view {
     flex-direction: column;
-}
-.split-view .content-area[data-v-e3cd444d],
-  .split-view .preview-area[data-v-e3cd444d] {
+  }
+
+  .split-view .content-area,
+  .split-view .preview-area {
     width: 100%;
-}
-.preview-area[data-v-e3cd444d] {
+  }
+
+  .preview-area {
     border-left: none;
     border-top: 1px solid #ccc;
-}
-}
+  }
+} */
 
 .radio-input-list[data-v-ac3dc0e2]{
 	width: auto;

package/package.json

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

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Btn, type MaterialIcons } from '@bagelink/vue'
+import SelectInput from '../SelectInput.vue'
 import type { ToolbarConfig, ToolbarConfigOption } from './richtext-types'
 
 defineProps<{ config: ToolbarConfig }>()
@@ -9,33 +10,26 @@ const colorPicker = $ref<HTMLInputElement | null>(null)
 const fontSizeInput = $ref<HTMLInputElement | null>(null)
 
 interface toolbarOption {
-	name: ToolbarConfigOption
+	name: ToolbarConfigOption | 'separator'
 	icon: MaterialIcons
 }
 
 const toolbarOptions: toolbarOption[] = [
+	{ name: 'separator' },
 	{ name: 'bold', icon: 'format_bold' },
 	{ name: 'italic', icon: 'format_italic' },
 	{ name: 'underline', icon: 'format_underlined' },
-	{ name: 'fontSize', icon: 'format_size' },
-	{ name: 'fontFamily', icon: 'font_download' },
-	{ name: 'textColor', icon: 'text_format' },
-	{ name: 'backgroundColor', icon: 'format_color_fill' },
-	{ name: 'alignLeft', icon: 'format_align_left' },
-	{ name: 'alignCenter', icon: 'format_align_center' },
-	{ name: 'alignRight', icon: 'format_align_right' },
-	{ name: 'alignJustify', icon: 'format_align_justify' },
+	{ name: 'separator' },
 	{ name: 'orderedList', icon: 'format_list_numbered' },
 	{ name: 'unorderedList', icon: 'format_list_bulleted' },
-	{ name: 'indent', icon: 'format_indent_increase' },
-	{ name: 'outdent', icon: 'format_indent_decrease' },
-	{ name: 'link', icon: 'link' },
-	{ name: 'image', icon: 'image' },
-	{ name: 'table', icon: 'table_chart' },
-	{ name: 'blockquote', icon: 'format_quote' },
-	{ name: 'codeBlock', icon: 'code' },
-	{ name: 'splitView', icon: 'splitscreen_right' },
-	{ name: 'codeView', icon: 'code' },
+	{ name: 'separator' },
+	{ name: 'link', icon: 'add_link' },
+	{ name: 'image', icon: 'add_photo_alternate' },
+	{ name: 'youtube', icon: 'youtube_activity' },
+	{ name: 'separator' },
+	{ name: 'splitView', icon: 'code' },
+	{ name: 'clear', icon: 'format_clear' },
+
 ]
 
 function handleColorPick(type: 'textColor' | 'backgroundColor') {
@@ -51,57 +45,40 @@ function handleFontSizeChange() {
 		emit('action', 'fontSize', size)
 	}
 }
+function handleSelectChange(selectedOption: string) {
+	emit('action', 'formatBlock', selectedOption)
+}
 </script>
 
 <template>
-	<div class="toolbar" role="toolbar">
-		<Btn
-			v-for="action in toolbarOptions.filter(t => config.includes(t.name))"
-			:key="action.name"
-			v-tooltip="action.name"
-			thin
-			color="light"
-			:aria-label="action.name"
-			:icon="action.icon"
-			@click="emit('action', action.name)"
+	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
+		<SelectInput
+			class="m-0 w150"
+			:options="['Text', 'Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6', 'Blockquote', 'Code']"
+			@change="handleSelectChange"
 		/>
-		<input
-			v-if="config.includes('textColor') || config.includes('backgroundColor')"
-			ref="colorPicker"
-			type="color"
-			@change="handleColorPick(config.includes('textColor') ? 'textColor' : 'backgroundColor')"
-		>
-		<input
-			v-if="config.includes('fontSize')"
-			ref="fontSizeInput"
-			type="number"
-			min="1"
-			max="7"
-			@change="handleFontSizeChange"
-		>
+
+		<template v-for="(action, index) in toolbarOptions">
+			<Btn
+				v-if="action.name !== 'separator' && config.includes(action.name)"
+				:key="action.name"
+				v-tooltip="action.name"
+				thin
+				flat
+				class="rounded"
+				:aria-label="action.name"
+				:icon="action.icon"
+				@click="emit('action', action.name)"
+			/>
+			<span
+				v-if="action.name === 'separator'"
+				:key="`separator-${index}`"
+				class=" opacity-2 mb-025"
+			>|</span>
+		</template>
 	</div>
 </template>
 
 <style scoped>
-.toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  padding: 10px;
-  background-color: #f0f0f0;
-  border-bottom: 1px solid #ccc;
-}
 
-button:hover {
-  background-color: #e0e0e0;
-}
-
-input[type="color"],
-input[type="number"] {
-  width: 40px;
-  height: 30px;
-  padding: 0;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-}
 </style>

package/src/components/form/inputs/RichText2/index.vue

@@ -30,7 +30,9 @@ const defaultConfig: ToolbarConfig = [
 	'blockquote',
 	'codeBlock',
 	'splitView',
-	'codeView'
+	'youtube',
+	'codeView',
+	'clear',
 ]
 const config = $ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
 let contentHtml = $ref(props.modelValue)
@@ -121,15 +123,16 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-	<div class="rich-text-editor">
+	<div class="rich-text-editor round pt-05 px-1 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
-		<div class="editor-container" :class="{ 'split-view': isSplitView }">
-			<div class="content-area" :class="{ 'code-view': isCodeView }">
+		<div class="editor-container flex flex-stretch" :class="{ 'split-view': isSplitView }">
+			<div class="content-area rounded p-1 bg-white shadow-light w-100 grid" :class="{ 'code-view': isCodeView }">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
 					ref="editableContent"
 					contenteditable="true"
+					class="editableContent"
 					role="textbox"
 					aria-multiline="true"
 					tabindex="0"
@@ -137,25 +140,40 @@ function handleKeyDown(event: KeyboardEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<div v-if="isSplitView" class="preview-area" v-html="contentHtml" />
+			<code v-if="isSplitView" class="preview-area bg-black color-white  w-100 rounded p-1">{{ contentHtml }}</code>
 		</div>
 	</div>
 </template>
 
 <style scoped>
 .rich-text-editor {
-  font-family: Arial, sans-serif;
-  max-width: 800px;
-  margin: 0 auto;
+	background: var(--input-bg);
+	margin-bottom: 0.5rem;
+	width: 100%;
+	/* font-family: Arial, sans-serif; */
+	/* max-width: 800px; */
+	/* margin: 0 auto; */
 }
-
-[contenteditable='true'] {
-  	white-space: pre-wrap;
-  	word-wrap: break-word;
+.editableContent{
+	min-height: 100%;
+	white-space: pre-wrap;
+	outline: none;
+}
+/* [contenteditable='true'] {
+	  white-space: pre-wrap;
+	  word-wrap: break-word;
 	outline: none;
-	border: none;
 	height: 100%;
+} */
+.content-area{
+}
+.content-area, .preview-area{
+	min-height: 200px;
+
 }
+.preview-area{}
+
+/*
 
 .editor-container {
   display: flex;
@@ -184,9 +202,9 @@ function handleKeyDown(event: KeyboardEvent) {
 .preview-area {
   background-color: #f9f9f9;
   border-left: 1px solid #ccc;
-}
+} */
 
-@media (max-width: 768px) {
+/* @media (max-width: 768px) {
   .split-view {
     flex-direction: column;
   }
@@ -200,5 +218,5 @@ function handleKeyDown(event: KeyboardEvent) {
     border-left: none;
     border-top: 1px solid #ccc;
   }
-}
+} */
 </style>

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

@@ -203,9 +203,10 @@ onMounted(() => {
 
 					<div v-if="clearable && selectedItemCount > 0" class="ms-auto ps-05 me-05">
 						<Btn
+							flat
 							thin
 							icon="clear"
-							class="color-primary bg-gray-20"
+							class="color-gray"
 							@click="selectedItems = []; emitUpdate()"
 						/>
 					</div>
@@ -238,7 +239,7 @@ onMounted(() => {
 					placeholder="Search"
 					icon="search"
 				/>
-				<div class="selectinput-options">
+				<div class="selectinput-options" :class="{ multiselect }">
 					<div
 						v-for="(option, i) in filteredOptions"
 						:key="`${option}${i}`"
@@ -250,12 +251,14 @@ onMounted(() => {
 						@click="select(option)"
 						@keydown.enter="select(option)"
 					>
-						<Icon v-if="isSelected(option)" icon="check" />
-						<Icon
-							v-if="!isSelected(option)"
-							class="opacity-3"
-							icon="fiber_manual_record"
-						/>
+						<template v-if="multiselect">
+							<Icon v-if="isSelected(option)" icon="select_check_box" />
+							<Icon
+								v-if="!isSelected(option)"
+								class="opacity-3"
+								icon="check_box_outline_blank"
+							/>
+						</template>
 						<span>
 							{{ getLabel(option) }}
 						</span>
@@ -278,10 +281,15 @@ onMounted(() => {
 	border-radius: 5px;
 	transition: all 0.2s;
 	display: grid;
-	grid-template-columns: 10px 1fr;
+	grid-template-columns:1fr;
 	justify-content: space-between;
 	width: 100%;
 	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-options.multiselect .selectinput-option {
+	grid-template-columns: 10px 1fr;
+
 }
 
 .selectinput-options {
@@ -295,6 +303,9 @@ onMounted(() => {
 .isEmpty p {
 	opacity: 0.3;
 }
+.selected{
+	background: var(--input-bg);
+}
 </style>
 
 <style>