@webitel/ui-chats 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-chats",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"description": "Reusable Webitel Frontend Code for Chats UI",
 	"workspaces": [
 		"../../",

package/src/ui/messaging/components/chat-date-divider.vue

@@ -25,6 +25,8 @@ const formattedDate = computed<Date>(() => {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
   .chat-date-divider {
     @extend %typo-subtitle-1;
     width: 100%;

package/src/ui/messaging/components/scroll-to-bottom-btn.vue

@@ -34,6 +34,7 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
 
 .scroll-to-bottom-btn {
   position: absolute;

package/src/ui/messaging/components/the-chat-messages-container.vue

@@ -70,6 +70,8 @@ function focusOnInput() {
 </script>
 
 <style scoped lang="scss">
+@use '@webitel/styleguide/scroll' as *;
+
 .the-chat-messages-container {
   position: relative;
   display: flex;

package/src/ui/messaging/modules/message/components/details/chat-message-blocked-error.vue

@@ -17,7 +17,11 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 </script>
 
+<script setup lang="ts">
+</script>
 <style scoped lang="scss">
+@use '@webitel/styleguide/typography' as *;
+
 .chat-message-blocked-error {
   @extend %typo-body-1;
   background: var(--p-error-highlight-color);
@@ -34,5 +38,3 @@ const { t } = useI18n();
   max-width: 132px;
 }
 </style>
-<script setup lang="ts">
-</script>

package/src/ui/messaging/modules/message/components/details/chat-message-document.vue

@@ -49,6 +49,8 @@ function downloadDocument() {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .chat-message-document {
   display: flex;
   align-items: flex-start;

package/src/ui/messaging/modules/message/components/details/chat-message-image.vue

@@ -27,6 +27,8 @@ const emit = defineEmits<{
 
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
 .chat-message-image {
   cursor: pointer;
 

package/src/ui/messaging/modules/message/components/details/chat-message-text.vue

@@ -25,6 +25,7 @@ const text = computed(() => {
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
 
 .chat-message-text {
   @extend %typo-body-1;

package/src/ui/messaging/modules/message/components/details/chat-message-time.vue

@@ -24,6 +24,7 @@ const time = computed(() => prettifyTime(props.date));
 </script>
 
 <style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
 .chat-message-time {
   display: flex;
   flex-direction: column;