wip

src/components/Messages/MessageData.vue

@@ -2,10 +2,10 @@
 import { computed } from 'vue'
 
 const props = withDefaults(
-  defineProps<{ createdAt?: string; username?: string; my?: boolean; text?: string }>(),
+  defineProps<{ createdAt?: string; username?: string; onRightSide?: boolean; message?: string }>(),
   {
     my: false,
-    text: 'foobar',
+    message: 'foobar',
     username: 'robot',
   },
 )
@@ -35,14 +35,14 @@ const avatarLetter = computed(() => {
   <!--    </div>-->
   <!--  </div>-->
 
-  <div class="flex gap-2 border" :class="{ 'flex-row-reverse': props.my }">
+  <div class="flex gap-2" :class="{ 'flex-row-reverse': props.onRightSide }">
     <!--    <v-avatar size="36" color="deep-purple-lighten-4">-->
     <!--      <span class="text-deep-purple-darken-2">{{ avatarLetter }}</span>-->
     <!--    </v-avatar>-->
 
     <!--    :class="props.my ? 'message-shaped-right' : 'message-shaped'"-->
-    <div class="pa-4" :class="props.my ? 'bg-blue-400' : 'bg-white'">
-      <span class="">{{ props.text }}</span>
+    <div class="pa-4" :class="props.onRightSide ? 'bg-blue-400' : 'bg-white'">
+      <span class="">{{ props.message }}</span>
       <span class="">{{ createdAt }}</span>
     </div>
   </div>

src/components/Messages/MessageInput.vue

@@ -27,13 +27,18 @@ const isEmptyText = computed(() => {
 </script>
 
 <template>
-  <div class="d-flex ga-2 border pa-4">
-    <input v-model="text" placeholder="message" @keyup.enter="sendMessage" />
-    <button><span class="mdi mdi-emoticon-outline"></span></button>
-    <button><span class="mdi mdi-paperclip"></span></button>
-    <button :disabled="isEmptyText" @click="sendMessage">
-      <span class="mdi mdi-send"></span>
-    </button>
+  <div class="flex gap-2 pa-2 items-center">
+    <VTextField
+      prepend-inner-icon="mdi-emoticon-outline"
+      append-inner-icon="mdi-paperclip"
+      bg-color="white"
+      v-model="text"
+      placeholder="message"
+      density="default"
+      @keyup.enter="sendMessage"
+    />
+
+    <VBtn :disabled="isEmptyText" icon="mdi-send" @click="sendMessage" color="primary" />
   </div>
 </template>
 

src/components/Messages/MessageToolbar.vue

@@ -1,9 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { User } from '@/stores/users.ts'
+
+const {user} = defineProps<{ user: User }>()
+</script>
 
 <template>
   <VToolbar class="px-2">
     <VAvatar text="A" color="primary" />
-    <VToolbarTitle text="Message title" />
+    <VToolbarTitle :text="user.name" />
   </VToolbar>
 </template>
 

src/components/Messages/MessagesForm.vue

@@ -1,28 +1,37 @@
 <script setup lang="ts">
-import { computed, nextTick, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 import { useScroll } from '@vueuse/core'
+import type { User } from '@/stores/users.ts'
 
 const area = useTemplateRef('messageArea')
 
-const { y, arrivedState } = useScroll(area)
+// const { y, arrivedState } = useScroll(area)
 
-const messages = computed(() => {
-  // return [...messagesStore.messages]
+// const messages = computed(() => {
+// return [...messagesStore.messages]
+// })
+
+// async function scrollToBottom() {
+//   await nextTick()
+//   if (area.value) y.value = area.value?.scrollHeight
+// }
+
+const user = ref<User>({
+  id: 1,
+  name: 'test',
+  email: 'test@test.ru',
 })
 
-async function scrollToBottom() {
-  await nextTick()
-  if (area.value) y.value = area.value?.scrollHeight
-}
+const messages = ref([])
 </script>
 
 <template>
   <div class="flex h-full flex-col overflow-hidden">
     <div class="grow-0">
-      <slot name="toolbar" />
+      <slot name="toolbar" :user="user" />
     </div>
     <div class="px-8 gap-2 grow flex flex-col-reverse overflow-y-auto" ref="messageArea">
-      <slot />
+      <slot :messages="messages" />
     </div>
     <div class="grow-0">
       <slot name="input" />

src/components/Messages/MessagesList.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import MessageData from '@/components/Messages/MessageData.vue'
+import type { Message } from '@/stores/messages.ts'
+
+const { messages } = defineProps<{ messages: Message[] }>()
+</script>
+
+<template>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData on-right-side>Hello world</MessageData>
+  <MessageData on-right-side>Hello world</MessageData>
+  <MessageData on-right-side>Hello world</MessageData>
+  <MessageData on-right-side>Hello world</MessageData>
+  <MessageData on-right-side>Hello world</MessageData>
+  <MessageData on-right-side>Hello world</MessageData>
+  <MessageData on-right-side>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+  <MessageData>Hello world</MessageData>
+</template>
+
+<style scoped></style>