UI-355 : Synced alto with vue3 (#354)

youcan-shop · May 28, 2024 · a27a78b · a27a78b
1 parent 967dfbc
commit a27a78b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/packages/alto/src/assets/main.css b/packages/alto/src/assets/main.css
@@ -1 +1,9 @@
-@import "https://fonts.cdnfonts.com/css/mona-sans?styles=144346,144348,144350,144358,144360,144362,144334,144336,144338,144340,144342,144344,144352,144354,144356,144322,144324,144326,144328,144330,144332,144316,144318,144320,144345,144339,144351,144321,144327";
+@font-face {
+  font-family: Mona-sans;
+  src: url("https://ui-assets.ycdn.store/fonts/Mona-Sans.ttf");
+}
+
+@font-face {
+  font-family: DroidKufi;
+  src: url("https://ui-assets.ycdn.store/fonts/DroidKufi-Regular.ttf");
+}
diff --git a/packages/alto/src/components/DropdownMenu/DropdownMenu.vue b/packages/alto/src/components/DropdownMenu/DropdownMenu.vue
@@ -26,6 +26,10 @@ const handleScroll = () => {
   show.value = false;
 };
 
+const closeMenu = () => {
+  show.value = false;
+};
+
 onMounted(() => {
   window.addEventListener('scroll', handleScroll);
 });
@@ -43,7 +47,7 @@ onClickOutside(dropdownMenu, () => show.value = false);
       <slot />
     </div>
     <Transition name="fade-in">
-      <div v-if="show" ref="triggeredElement" class="triggered-element">
+      <div v-if="show" ref="triggeredElement" class="triggered-element" @click="closeMenu">
         <slot name="MenuItems" />
       </div>
     </Transition>

diff --git a/packages/alto/src/components/RichText/RichText.vue b/packages/alto/src/components/RichText/RichText.vue
@@ -58,6 +58,10 @@ onMounted(() => {
     replaceIcons(customIcons);
     quill = new Quill(editor.value, editorConfig);
 
+    if (props.modelValue) {
+      quill.root.innerHTML = props.modelValue;
+    }
+
     if (quill) {
       quill.on('text-change', () => {
         if (quill) {
@@ -99,6 +103,11 @@ onMounted(() => {
   border-radius: 0 0 8px 8px;
 }
 
+.ql-container.ql-snow {
+  height: auto;
+  background-color: var(--base-white);
+}
+
 .rich-text {
   border: 1px solid var(--gray-200);
   border-radius: 8px;