Merge pull request #209 from determaer/main

fix

src/BaseAdaptiveExtendedChatApp.vue

@@ -57,9 +57,10 @@
 
         <template #third-col>
           <chat-wrapper
+            ref="refChatWrapper"
             :is-open-chat-panel="isOpenChatPanel"
             :is-selected-chat="!!selectedChat"
-            :mobile-sized="mobileSized"
+            :chat-panel-width="chatPanelWidth"
           >
             <template #default>
               <div style="display: flex;
@@ -293,9 +294,10 @@ const isShowFeedWhileSearch = ref(true)
 const isSecondColVisible = ref(false)
 const isThirdColVisible = ref(false)
 const isShowReturnButton = ref(false)
-const mobileSized = ref(false)
+const chatPanelWidth = ref(50)
 
 const refContainer = ref()
+const refChatWrapper = ref()
 
 const handleOpenSearchPanel = () => {
   isOpenSearchPanel.value = !isOpenSearchPanel.value
@@ -533,24 +535,26 @@ const handleEvent = async (event) => {
 };
 
 const resizeObserver = new ResizeObserver((entries) => {
-  const containerWidth = entries[0].target.clientWidth
-
-  if (containerWidth < 920){
-    feedSearchFeedCol.value = true
-    isShowReturnButton.value = true
-    mobileSized.value = true
-  }
-  if (containerWidth > 920){
-    feedSearchFeedCol.value = false
-    isShowReturnButton.value = false
-    mobileSized.value = false
-  }
-
-  if (containerWidth < 720){
-    sidebarFirstCol.value = false
-  }
-  if (containerWidth > 720){
-    sidebarFirstCol.value = true
+  if (entries[0] && entries[1]){
+    const containerWidth = entries[0].target.clientWidth
+    const chatwrapperWidth = entries[1].target.clientWidth
+    if (chatwrapperWidth < 700) chatPanelWidth.value = 80
+    if (chatwrapperWidth > 700) chatPanelWidth.value = 60
+
+    if (containerWidth < 920){
+      feedSearchFeedCol.value = true
+      isShowReturnButton.value = true
+    }
+    if (containerWidth > 920){
+      feedSearchFeedCol.value = false
+      isShowReturnButton.value = false
+    }
+    if (containerWidth < 720){
+      sidebarFirstCol.value = false
+    }
+    if (containerWidth > 720){
+      sidebarFirstCol.value = true
+    }
   }
 });
 
@@ -568,5 +572,8 @@ onMounted(() => {
   if (unref(refContainer).$el){
     resizeObserver.observe(unref(refContainer).$el)
   }
+  if (unref(refChatWrapper).$el){
+    resizeObserver.observe(unref(refChatWrapper).$el)
+  }
 });
 </script>

src/library/components/PlaceholderComponent.vue

@@ -6,14 +6,15 @@
     :class="{ 'filled': isFilled, 'empty': !isFilled }"
     class="placeholder"
     @keydown.enter="handleEnter"
-    @click="prepare"
+    @focus="prepare"
+    @blur="validate"
   >
     {{ v }}
   </span>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import {  onMounted, onUnmounted, ref } from 'vue';
 
 
 const props = defineProps({
@@ -43,12 +44,15 @@ const prepare = () => {
 }
 
 function validate() {
-  v.value = refPlaceholder.value.innerText.trim()
-  if (v.value != ''){
-    emit('edit', v.value)
-  }
-  else {
-    v.value = 'Заполнить'
+  if (props.value != v.value){
+    v.value = refPlaceholder.value.innerText.trim()
+    if (v.value != ''){
+      emit('edit',[v.value, props.index])
+    }
+    else {
+      if (!props.isFilled) v.value = 'Заполнить'
+      else v.value = props.value
+    }
   }
 }
 
@@ -58,28 +62,21 @@ function handleEnter(event) {
 }
 
 function handleKey(event) {
-    if (event.key === "Escape") {
-      if (props.value != v.value)validate()
-      event.target.blur()
-    }
-    if (event.key == 'Tab'){
-      event.preventDefault()
-    }
-}
-
-function handleClickOutside(event) {
-  if (event.target.id != 'placeholder' && refPlaceholder.value && !refPlaceholder.value.contains(event.target)) {
-    if (props.value != v.value)validate()
+  if (event.key === "Escape") {
+    event.target.blur()
+    validate()
+  }
+  if (event.key == 'Tab'){
+    validate()
+    event.target.blur()
   }
 }
 
 onMounted(() => {
-  window.addEventListener("click", handleClickOutside);
   window.addEventListener("keydown", handleKey);
 })
 
 onUnmounted(() => {
-  window.removeEventListener("click", handleClickOutside);
   window.removeEventListener("keydown", handleKey);
 })
 </script>

src/library/components/WABATemplateSelector.vue

@@ -273,6 +273,10 @@ const selectTemplate = (item) => {
   item.isSelected = true;
   selectedTemplate.value = item;
   allVariantsShow.value = false;
+  Object.keys(wabaValues).forEach(key => {
+    wabaValues[key] = '';
+  });
+  selectedFile.value = null
   setThirdColVisible()
 };
 
@@ -372,8 +376,7 @@ const updateShowValues = () => {
 }
 
 const updateWabaValue = (value) => {
-  console.log(value)
-  wabaValues[selectedIndex.value] = value;
+  wabaValues[value[1]] = value[0];
 };
 
 

src/library/layouts/ChatWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-wrapper">
+  <div class="chat-wrapper" :id="'chat-wrapper-' + chatAppId">
     <div
       v-if="isSelectedChat"
       class="chat-wrapper__selected-chat"
@@ -20,7 +20,6 @@
       v-if="isOpenChatPanel"
       class="chat-wrapper__chat-panel"
       :style="{ 'flex-basis': isOpenChatPanel ? '40%' : '0%' }"
-      :class="{'chat-wrapper__chat-panel-mobile' : mobileSized}"
     >
       <slot name="chatpanel" />
     </div>
@@ -31,6 +30,7 @@
   lang="ts"
   setup
 >
+import { watch, inject } from 'vue';
 import { t } from '../../locale/useLocale';
 
 const props = defineProps({
@@ -42,11 +42,26 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  mobileSized: {
-    type: Boolean,
-    default: false
+  chatPanelWidth: {
+    type: Number,
+    required: false,
+    default: 50,
   }
 })
+
+const chatAppId = inject('chatAppId')
+
+watch(
+  () => props.chatPanelWidth,
+  () => {
+    const container = document.getElementById('chat-wrapper-' + chatAppId)
+    if (container){
+      container.style.setProperty('--chat-panel-width', props.chatPanelWidth + '%')
+      container.style.setProperty('--chat-panel-left', (100 - props.chatPanelWidth) + '%')
+    }
+  },
+  {immediate: true}
+)
 </script>
 
 
@@ -55,6 +70,10 @@ const props = defineProps({
   lang="scss"
 >
 .chat-wrapper {
+
+  --chat-panel-width: 50%;
+  --chat-panel-left: 50%;
+
   display: flex;
   height: 100%;
   width: 100%;
@@ -77,13 +96,8 @@ const props = defineProps({
     position: absolute;
     height: 100%;
     z-index: 100;
-    width: 40%;
-    left: 60%;
-  }
-
-  &__chat-panel-mobile{
-    left: 0%;
-    width: 100%;
+    width: var(--chat-panel-width);
+    left: var(--chat-panel-left);
   }
 }
 </style>