UI-396: updated some packages to fix vulnerabilities (#372)

packages/alto/package.json

@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
-    "quill": "^1.3.7",
+    "quill": "^2.0.2",
     "vue-slicksort": "^2.0.5"
   },
   "devDependencies": {
@@ -89,7 +89,6 @@
     "@storybook/vue3": "^8.0.10",
     "@storybook/vue3-vite": "^8.0.10",
     "@types/node": "18.7.15",
-    "@types/quill": "^2.0.14",
     "@vitejs/plugin-vue": "^5.0.2",
     "@vueuse/core": "^9.9.0",
     "@youcan/ui-core": "*",

packages/vue3/package.json

@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
-    "quill": "^1.3.7",
+    "quill": "^2.0.2",
     "vue-slicksort": "^2.0.5"
   },
   "devDependencies": {
@@ -76,7 +76,6 @@
     "@storybook/vue3": "^7.6.10",
     "@storybook/vue3-vite": "^7.6.10",
     "@types/node": "18.7.15",
-    "@types/quill": "^2.0.14",
     "@vitejs/plugin-vue": "^5.0.2",
     "@vueuse/core": "^9.9.0",
     "@youcan/ui-core": "*",

packages/vue3/src/_dev/App.vue

@@ -1,29 +1,43 @@
 <script setup lang="ts">
 import 'uno.css';
 import '../assets/main.css';
+import { ref } from 'vue';
+import { RichText } from '~/components';
+
+const content = ref();
 </script>
 
 <template>
   <div class="container">
-    <p class="testfont">
-      خط الكوفي العربي1234
-    </p>
-    <p class="testfont">
-      Hello it's me AA BB Balance
-    </p>
-    <p class="testtokens">
-      Hello it's me AA BB Balance
-      1234
-    </p>
+    <RichText v-model="content" />
   </div>
 </template>
 
 <style scoped>
-.testfont {
-  font-family: var(--font-family);
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  gap: 40px;
+}
+
+.container .row {
+  display: flex;
+  flex-direction: column;
+  gap: 300px;
+  width: 80%;
+}
+
+.container .row > div {
+  flex: 1;
 }
 
-.testtokens {
-  font: var(--display-md-regular);
+.container .row > div span {
+  margin: 0;
+  color: var(--gray-900);
+  font: var(--text-sm-medium);
 }
 </style>