@bagelink/vue 0.0.859 → 0.0.865

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/AccordionItem.vue"],"names":[],"mappings":"AAuPA,iBAAS,cAAc;;sBAoFG,GAAG;yBACC,GAAG;;;WASnB,OAAO,IAA6B;EAEjD;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAlLZ,MAAM;SACT,MAAM;WACJ,OAAO;eACH,aAAa,GAAG,YAAY;mBACxB,OAAO,GAAG,KAAK;WACvB,OAAO;gBACF,MAAM;;;;YANV,MAAM;SACT,MAAM;WACJ,OAAO;eACH,aAAa,GAAG,YAAY;mBACxB,OAAO,GAAG,KAAK;WACvB,OAAO;gBACF,MAAM;;;kFAmLjB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"AccordionItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/AccordionItem.vue"],"names":[],"mappings":"AAmPA,iBAAS,cAAc;;sBAoFG,GAAG;yBACC,GAAG;;;WASnB,OAAO,IAA6B;EAEjD;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAhLZ,MAAM;SACT,MAAM;WACJ,OAAO;eACH,aAAa,GAAG,YAAY;mBACxB,OAAO,GAAG,KAAK;WACvB,OAAO;gBACF,MAAM;;;;YANV,MAAM;SACT,MAAM;WACJ,OAAO;eACH,aAAa,GAAG,YAAY;mBACxB,OAAO,GAAG,KAAK;WACvB,OAAO;gBACF,MAAM;;;kFAiLjB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,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":"AA8RA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;;gBAOjB,MAAM;oBAAkB,aAAa;;;;gBAArC,MAAM;oBAAkB,aAAa;;;;AAiQzE,wBAOG"}
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText2/index.vue"],"names":[],"mappings":"AAAA,OAuSO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;;gBAOjB,MAAM;oBAAkB,aAAa;;;;gBAArC,MAAM;oBAAkB,aAAa;;;;AA2QzE,wBAOG"}

package/dist/index.cjs

@@ -80,15 +80,13 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
         emit2("update:open", value);
       }
     });
-    vue.onMounted(() => {
-      if (props2.open) isOpen.value = true;
-    });
     const accordionState = vue.inject("accordionState");
     const id = props2.id || Math.random().toString(36).slice(7);
     const computedIcon = vue.computed(() => {
       return props2.iconType === "plus_minus" ? isOpen.value ? "remove" : "add" : "expand_more";
     });
     const iconPosition = vue.computed(() => props2.iconPosition || "end");
+    vue.watch(() => props2.open, (val) => isOpen.value = !!val, { immediate: true });
     if (accordionState) {
       vue.watch(
         () => accordionState.openItem,
@@ -158,7 +156,7 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-9d8335fa"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-bb26ed1a"]]);
 const _hoisted_1$L = { class: "relative" };
 const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
   __name: "AddressSearch",
@@ -637,7 +635,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     }
     function handleResize() {
       if (!bglSlider.value) return;
-      itemCount.value = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props2.items, 2) : Math.min(props2.items, 3);
+      itemCount.value = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props2.items, 2) : props2.items;
       goToSlide(activeSlideIndex.value);
     }
     function onScrollEnd() {
@@ -741,7 +739,7 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-8e22119a"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5da489eb"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -43932,10 +43930,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
 const _hoisted_2$e = { class: "editor-container flex flex-stretch gap-1 m_column" };
 const _hoisted_3$b = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
-const _hoisted_4$7 = {
-  key: 0,
-  class: "preview-area w-100 radius-05 p-1"
-};
+const _hoisted_4$7 = ["textContent"];
 const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: {
@@ -43990,6 +43985,9 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
       if (["alignLeft", "alignCenter", "alignRight", "alignJustify"].includes(action))
         value = action.replace("align", "").toLowerCase();
       switch (action) {
+        case "link":
+          applyFormatting("insertLink");
+          break;
         case "orderedList":
           applyFormatting("insertOrderedList");
           break;
@@ -44062,6 +44060,10 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
         }
       }
     }
+    function logInput(e) {
+      const target = e.target;
+      contentHtml.value = target.textContent || "";
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
         vue.createVNode(_sfc_main$u, {
@@ -44089,13 +44091,19 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
               onKeydown: handleKeyDown2
             }, null, 544))
           ]),
-          vue.unref(isSplitView) ? (vue.openBlock(), vue.createElementBlock("code", _hoisted_4$7, vue.toDisplayString(vue.unref(contentHtml)), 1)) : vue.createCommentVNode("", true)
+          vue.unref(isSplitView) ? (vue.openBlock(), vue.createElementBlock("code", {
+            key: 0,
+            contenteditable: "true",
+            class: "preview-area w-100 radius-05 p-1",
+            onInput: logInput,
+            textContent: vue.toDisplayString(vue.unref(contentHtml))
+          }, null, 40, _hoisted_4$7)) : vue.createCommentVNode("", true)
         ])
       ]);
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-8f1898f5"]]);
+const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-ee4d5b26"]]);
 /*!
  * Signature Pad v5.0.4 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license

package/dist/index.mjs

@@ -1,7 +1,7 @@
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { defineComponent, reactive, provide, openBlock, createElementBlock, renderSlot, ref, computed, onMounted, inject, watch, normalizeClass, createElementVNode, unref, createVNode, createCommentVNode, toDisplayString, Transition, withCtx, isRef, Fragment as Fragment$1, renderList, createBlock, useCssVars, useSlots, resolveDynamicComponent, withModifiers, createTextVNode, normalizeStyle, onUnmounted, resolveComponent, mergeProps, mergeModels, useModel, pushScopeId, popScopeId, nextTick, normalizeProps, guardReactiveProps, withScopeId, withKeys, createApp, h as h$2, withDirectives, vModelCheckbox, vModelText, toRef, createSlots, Teleport, render as render$f, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, vModelRadio, resolveDirective, onBeforeUnmount, getCurrentInstance, watchEffect, markRaw, customRef, TransitionGroup, vModelDynamic, shallowRef } from "vue";
+import { defineComponent, reactive, provide, openBlock, createElementBlock, renderSlot, ref, computed, inject, watch, normalizeClass, createElementVNode, unref, createVNode, createCommentVNode, toDisplayString, Transition, withCtx, isRef, Fragment as Fragment$1, renderList, createBlock, useCssVars, useSlots, resolveDynamicComponent, withModifiers, createTextVNode, normalizeStyle, onMounted, onUnmounted, resolveComponent, mergeProps, mergeModels, useModel, pushScopeId, popScopeId, nextTick, normalizeProps, guardReactiveProps, withScopeId, withKeys, createApp, h as h$2, withDirectives, vModelCheckbox, vModelText, toRef, createSlots, Teleport, render as render$f, onBeforeUpdate, vShow, getCurrentScope, onScopeDispose, vModelRadio, resolveDirective, onBeforeUnmount, getCurrentInstance, watchEffect, markRaw, customRef, TransitionGroup, vModelDynamic, shallowRef } from "vue";
 const bagelFormUtils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   get bglForm() {
@@ -78,15 +78,13 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
         emit2("update:open", value);
       }
     });
-    onMounted(() => {
-      if (props2.open) isOpen.value = true;
-    });
     const accordionState = inject("accordionState");
     const id = props2.id || Math.random().toString(36).slice(7);
     const computedIcon = computed(() => {
       return props2.iconType === "plus_minus" ? isOpen.value ? "remove" : "add" : "expand_more";
     });
     const iconPosition = computed(() => props2.iconPosition || "end");
+    watch(() => props2.open, (val) => isOpen.value = !!val, { immediate: true });
     if (accordionState) {
       watch(
         () => accordionState.openItem,
@@ -156,7 +154,7 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-9d8335fa"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Y, [["__scopeId", "data-v-bb26ed1a"]]);
 const _hoisted_1$L = { class: "relative" };
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "AddressSearch",
@@ -635,7 +633,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     }
     function handleResize() {
       if (!bglSlider.value) return;
-      itemCount.value = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props2.items, 2) : Math.min(props2.items, 3);
+      itemCount.value = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props2.items, 2) : props2.items;
       goToSlide(activeSlideIndex.value);
     }
     function onScrollEnd() {
@@ -739,7 +737,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-8e22119a"]]);
+const Carousel = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5da489eb"]]);
 function _isPlaceholder(a2) {
   return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
 }
@@ -43930,10 +43928,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
 const _hoisted_1$m = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
 const _hoisted_2$e = { class: "editor-container flex flex-stretch gap-1 m_column" };
 const _hoisted_3$b = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
-const _hoisted_4$7 = {
-  key: 0,
-  class: "preview-area w-100 radius-05 p-1"
-};
+const _hoisted_4$7 = ["textContent"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -43988,6 +43983,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       if (["alignLeft", "alignCenter", "alignRight", "alignJustify"].includes(action))
         value = action.replace("align", "").toLowerCase();
       switch (action) {
+        case "link":
+          applyFormatting("insertLink");
+          break;
         case "orderedList":
           applyFormatting("insertOrderedList");
           break;
@@ -44060,6 +44058,10 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         }
       }
     }
+    function logInput(e) {
+      const target = e.target;
+      contentHtml.value = target.textContent || "";
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(_sfc_main$u, {
@@ -44087,13 +44089,19 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               onKeydown: handleKeyDown2
             }, null, 544))
           ]),
-          unref(isSplitView) ? (openBlock(), createElementBlock("code", _hoisted_4$7, toDisplayString(unref(contentHtml)), 1)) : createCommentVNode("", true)
+          unref(isSplitView) ? (openBlock(), createElementBlock("code", {
+            key: 0,
+            contenteditable: "true",
+            class: "preview-area w-100 radius-05 p-1",
+            onInput: logInput,
+            textContent: toDisplayString(unref(contentHtml))
+          }, null, 40, _hoisted_4$7)) : createCommentVNode("", true)
         ])
       ]);
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-8f1898f5"]]);
+const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-ee4d5b26"]]);
 /*!
  * Signature Pad v5.0.4 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license

package/dist/style.css

@@ -1,14 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
-.accordion-item[data-v-9d8335fa] {
+.accordion-item[data-v-bb26ed1a] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-item button[data-v-9d8335fa] {
+.accordion-item button[data-v-bb26ed1a] {
 	cursor: pointer;
 }
-.accordion-head[data-v-9d8335fa] {
+.accordion-head[data-v-bb26ed1a] {
 	height: var(--input-height);
 	background: transparent;
 	display: flex;
@@ -18,7 +18,7 @@
 	border: none;
 	color: inherit !important;
 }
-.accordion-icon[data-v-9d8335fa] {
+.accordion-icon[data-v-bb26ed1a] {
 	transition: all 0.2s ease;
 	display: flex;
 	align-items: center;
@@ -27,16 +27,16 @@
 	height: calc( var(--btn-height) / 1.5);
 	padding-inline: calc(var(--btn-padding) / 3);
 }
-.accordion-icon.open[data-v-9d8335fa] {
+.accordion-icon.open[data-v-bb26ed1a] {
 	transform: rotate(180deg);
 }
-.accordion-label[data-v-9d8335fa] {
+.accordion-label[data-v-bb26ed1a] {
 	font-weight: bold;
 }
-.flat.accordion-item[data-v-9d8335fa] {
+.flat.accordion-item[data-v-bb26ed1a] {
 	border-bottom: none
 }
-.accordion-head:hover .accordion-label[data-v-9d8335fa] {
+.accordion-head:hover .accordion-label[data-v-bb26ed1a] {
 	text-decoration: underline;
 }
 
@@ -350,7 +350,7 @@ display: block;
 	padding: 0;
 }
 
-.blocker[data-v-8e22119a] {
+.blocker[data-v-5da489eb] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -358,7 +358,7 @@ display: block;
 	height: 100%;
 	z-index: 100;
 }
-.bgl-slider[data-v-8e22119a] {
+.bgl-slider[data-v-5da489eb] {
 	display: grid;
 	position: relative;
 	/* scroll-behavior: smooth; */
@@ -367,44 +367,44 @@ display: block;
 	/* scroll-snap-type: x mandatory; */
 	overflow-x: hidden;
 }
-.autoHeight[data-v-8e22119a] {
+.autoHeight[data-v-5da489eb] {
 	transition: height ease 0.7s;
 }
-.bgl-slider.allowScroll[data-v-8e22119a] {
+.bgl-slider.allowScroll[data-v-5da489eb] {
 	overflow-x: scroll;
 }
-.bgl-slider[data-v-8e22119a] {
+.bgl-slider[data-v-5da489eb] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 1) * 1%);
 	gap: 1%;
 }
-.bgl-slider.odd[data-v-8e22119a] {
+.bgl-slider.odd[data-v-5da489eb] {
 	grid-auto-columns: calc(100% / var(--item-count) - calc(var(--item-count) - 2) * 1%);
 }
-.bgl-slider.slides-1[data-v-8e22119a] {
+.bgl-slider.slides-1[data-v-5da489eb] {
 	grid-auto-columns: 100%;
 	gap: 0;
 }
-.bgl-slider[data-v-8e22119a]::-webkit-scrollbar {
+.bgl-slider[data-v-5da489eb]::-webkit-scrollbar {
 	display: none;
 }
-.bgl-slider[data-v-8e22119a] * {
+.bgl-slider[data-v-5da489eb] * {
 	scroll-snap-align: start;
 }
-.dragging.bgl-slider[data-v-8e22119a] {
+.dragging.bgl-slider[data-v-5da489eb] {
 	cursor: grabbing;
 	cursor: -webkit-grabbing;
 	scroll-snap-type: unset;
 }
-.clicking.bgl-slider[data-v-8e22119a] {
+.clicking.bgl-slider[data-v-5da489eb] {
 	scroll-behavior: unset;
 }
-.dragging.bgl-slider[data-v-8e22119a] * {
+.dragging.bgl-slider[data-v-5da489eb] * {
 	scroll-snap-align: unset;
 	user-select: none;
 }
 @media screen and (max-width: 600px) {
-.bgl-slider.slides-1[data-v-8e22119a]  * {
-		margin-inline-start: 1%;
+.bgl-slider.slides-1[data-v-5da489eb]> * {
+		margin-inline-start: 0%;
 }
 }
 
@@ -1288,29 +1288,29 @@ p {
     8 #818181 /* few chars */
   ;
 }
-.preview-area[data-v-8f1898f5]{
+.preview-area[data-v-ee4d5b26]{
 	font-family: "FontWithASyntaxHighlighter", monospace;
   	font-palette: --myCustomPalette;
 	background: var(--bgl-code-bg);
 	color: var(--bgl-code-color)
 }
-.rich-text-editor[data-v-8f1898f5] {
+.rich-text-editor[data-v-ee4d5b26] {
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 	width: 100%;
 }
-.editableContent[data-v-8f1898f5]{
+.editableContent[data-v-ee4d5b26]{
 	min-height: 100%;
 	white-space: pre-wrap;
 	outline: none;
 }
-.content-area[data-v-8f1898f5]{
+.content-area[data-v-ee4d5b26]{
 	background: var(--bgl-richtext-color);
 }
-.content-area[data-v-8f1898f5], .preview-area[data-v-8f1898f5]{
+.content-area[data-v-ee4d5b26], .preview-area[data-v-ee4d5b26]{
 	min-height: 200px;
 }
-.fullscreen-mode[data-v-8f1898f5] {
+.fullscreen-mode[data-v-ee4d5b26] {
     position: fixed;
     top: 0;
     left: 0;
@@ -1322,14 +1322,14 @@ p {
     overflow: auto;
 	border-radius: 0;
 }
-.fullscreen-mode .content-area[data-v-8f1898f5]{
+.fullscreen-mode .content-area[data-v-ee4d5b26]{
 	height: calc(100vh - 5rem);
 	padding: 4rem !important;
 	max-width: 900px;
 	margin-inline: auto ;
 	overflow-y: auto;
 }
-.fullscreen-mode .toolbar[data-v-8f1898f5]{
+.fullscreen-mode .toolbar[data-v-ee4d5b26]{
 	max-width: 900px;
 	margin-inline: auto ;
 	/* border-bottom: 1px solid var(--border-color); */
@@ -3567,6 +3567,9 @@ to {
 .oval {
     border-radius: 100%;
 }
+.aspect-ratio-1 {
+    aspect-ratio: 1;
+}
 .flex-center {
     justify-content: center;
     align-items: center;
@@ -6886,6 +6889,10 @@ to {
         border-radius: 100%;
     }
 
+    .m_aspect-ratio-1 {
+        aspect-ratio: 1;
+    }
+
     .m_flex-center {
         justify-items: center;
         align-items: center;

package/package.json

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

package/src/components/AccordionItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue'
-import { inject, onMounted, watch, computed } from 'vue'
+import { inject, watch, computed } from 'vue'
 
 const props = defineProps<{
 	label?: string
@@ -24,10 +24,6 @@ let isOpen = $computed({
 	},
 })
 
-onMounted(() => {
-	if (props.open) isOpen = true
-})
-
 interface AccordionState {
 	openItem?: string
 }
@@ -42,6 +38,8 @@ const computedIcon = computed(() => {
 })
 const iconPosition = computed(() => props.iconPosition || 'end')
 
+watch(() => props.open, val => isOpen = !!val, { immediate: true })
+
 if (accordionState) {
 	watch(
 		() => accordionState.openItem,

package/src/components/Carousel.vue

@@ -81,7 +81,7 @@ function handleSlideChange() {
 
 function handleResize() {
 	if (!bglSlider) return
-	itemCount = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props.items, 2) : Math.min(props.items, 3)
+	itemCount = window.innerWidth < 600 ? 1 : window.innerWidth < 991 ? Math.min(props.items, 2) : props.items
 	goToSlide(activeSlideIndex)
 }
 
@@ -250,8 +250,8 @@ watch(() => activeSlideIndex, handleSlideChange)
 }
 
 @media screen and (max-width: 600px) {
-	.bgl-slider.slides-1  * {
-		margin-inline-start: 1%;
+	.bgl-slider.slides-1> * {
+		margin-inline-start: 0%;
 	}
 
 }

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

@@ -47,11 +47,16 @@ function updateContent() {
 	emit('update:modelValue', contentHtml)
 }
 
+type ToolbarAction = 'link' | 'image' | 'table' | 'youtube' | 'fontSize' | 'fontFamily' | 'textColor' | 'backgroundColor' | 'bold' | 'italic' | 'underline' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'orderedList' | 'unorderedList' | 'indent' | 'outdent' | 'blockquote' | 'codeBlock' | 'splitView' | 'codeView' | 'clear' | 'fullScreen'
+
 function handleToolbarAction(action: string, value?: string) {
 	if (!editableContent) return
 	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action))
 		value = action.replace('align', '').toLowerCase()
 	switch (action) {
+		case 'link':
+			applyFormatting('insertLink')
+			break
 		case 'orderedList':
 			applyFormatting('insertOrderedList')
 			break
@@ -131,6 +136,10 @@ function handleKeyDown(event: KeyboardEvent) {
 		}
 	}
 }
+function logInput(e: InputEvent) {
+	const target = e.target as HTMLElement
+	contentHtml = target.textContent || ''
+}
 </script>
 
 <template>
@@ -151,7 +160,7 @@ function handleKeyDown(event: KeyboardEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<code v-if="isSplitView" class="preview-area  w-100 radius-05 p-1">{{ contentHtml }}</code>
+			<code v-if="isSplitView" contenteditable="true" class="preview-area  w-100 radius-05 p-1" @input="logInput" v-text="contentHtml" />
 		</div>
 	</div>
 </template>

package/src/styles/layout.css

@@ -51,6 +51,10 @@
     border-radius: 100%;
 }
 
+.aspect-ratio-1 {
+    aspect-ratio: 1;
+}
+
 .flex-center {
     justify-content: center;
     align-items: center;

package/src/styles/mobilLayout.css

@@ -72,6 +72,10 @@
         border-radius: 100%;
     }
 
+    .m_aspect-ratio-1 {
+        aspect-ratio: 1;
+    }
+
     .m_flex-center {
         justify-items: center;
         align-items: center;