[DM.Front] Internationalization

frontend/DM.Web.Modern.Temp/package.json

@@ -19,12 +19,12 @@
     "@vee-validate/yup": "^4.13.2",
     "axios": "^1.7.4",
     "dayjs": "^1.11.12",
-    "pinia": "^2.2.2",
+    "pinia": "^3.0.4",
     "primevue": "^4.4.1",
     "vee-validate": "^4.13.2",
     "vue": "^3.4.38",
     "vue-final-modal": "^4.5.4",
-    "vue-i18n": "^9.14.0",
+    "vue-i18n": "^11.2.2",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.56.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-cypress": "^3.5.0",
     "eslint-plugin-vue": "^9.27.0",
     "jsdom": "^24.1.1",

frontend/DM.Web.Modern.Temp/src/App.vue

@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { useUiStore, useUserStore } from "@/stores";
+import { onMounted, watch } from "vue";
+import { ModalsContainer } from "vue-final-modal";
+import TheHeader from "@/views/layout/TheHeader.vue";
+import TheFooter from "@/views/layout/TheFooter.vue";
+
+const uiStore = useUiStore();
+const userStore = useUserStore();
+
+watch(
+  () => [uiStore.theme],
+  (value, oldValue) => {
+    const html = document.querySelector("html")!;
+    html.classList.remove(`theme_${oldValue}`);
+    html.classList.add(`theme_${value}`);
+  },
+  { immediate: true },
+);
+
+onMounted(userStore.fetchUser);
+</script>
+
 <template>
   <div id="app">
     <div class="main" ref="scroll">
@@ -23,29 +46,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { useUiStore, useUserStore } from "@/stores";
-import { onMounted, watch } from "vue";
-import { ModalsContainer } from "vue-final-modal";
-import TheHeader from "@/views/layout/TheHeader.vue";
-import TheFooter from "@/views/layout/TheFooter.vue";
-
-const uiStore = useUiStore();
-const { fetchUser } = useUserStore();
-
-watch(
-  () => [uiStore.theme],
-  (value, oldValue) => {
-    const html = document.querySelector("html")!;
-    html.classList.remove(`theme_${oldValue}`);
-    html.classList.add(`theme_${value}`);
-  },
-  { immediate: true },
-);
-
-onMounted(fetchUser);
-</script>
-
 <style scoped lang="sass">
 @use "@/assets/styles/Variables"
 @use "@/assets/styles/Layout"

frontend/DM.Web.Modern.Temp/src/assets/styles/Reset.sass

@@ -45,20 +45,3 @@ a
   &.router-link-active
     font-weight: bold
     +Themes.theme(color, Themes.$text)
-
-field
-  display: flex
-  margin: Variables.$small 0
-  align-items: baseline
-
-  & input
-    flex-shrink: 0
-
-  &.error input
-    animation-name: shake-error
-    animation-duration: Variables.$animation-time
-    animation-timing-function: ease-in-out
-    +Themes.theme(border-color, Themes.$negative-border)
-
-    &:focus
-      +Themes.theme(box-shadow, Themes.$negative-border, inset 0 0 Variables.$minor)

frontend/DM.Web.Modern.Temp/src/components/community/UserLink.vue

@@ -1,18 +1,35 @@
+<script setup lang="ts">
+import type { User } from "@/api/models/community";
+import { computed } from "vue";
+import { userIsAdmin, userIsAuthority } from "@/api/models/community/helpers";
+
+const props = defineProps<{
+  user: User;
+  hidePicture?: boolean;
+}>();
+
+const badge = computed(() => {
+  if (userIsAdmin(props.user)) return "A";
+  if (userIsAuthority(props.user)) return "M";
+  return null;
+});
+</script>
+
 <template>
-  <span :title="user.status">
+  <span :title="props.user.status">
     <router-link
-      :to="{ name: 'profile', params: { login: user.login } }"
+      :to="{ name: 'profile', params: { login: props.user.login } }"
       class="user-link"
     >
       <span
-        v-if="!hidePicture"
+        v-if="!props.hidePicture"
         :style="{
           backgroundImage:
-            user.smallPictureUrl && `url(${user.smallPictureUrl})`,
+            props.user.smallPictureUrl && `url(${props.user.smallPictureUrl})`,
         }"
         class="user-logo"
       />
-      {{ user.login }}
+      {{ props.user.login }}
     </router-link>
 
     <span v-if="badge" class="user-badge-container">
@@ -22,23 +39,6 @@
   </span>
 </template>
 
-<script setup lang="ts">
-import type { User } from "@/api/models/community";
-import { computed } from "vue";
-import { userIsAdmin, userIsAuthority } from "@/api/models/community/helpers";
-
-const { user, hidePicture } = defineProps<{
-  user: User;
-  hidePicture?: boolean;
-}>();
-
-const badge = computed(() => {
-  if (userIsAdmin(user)) return "A";
-  if (userIsAuthority(user)) return "M";
-  return null;
-});
-</script>
-
 <style scoped lang="sass">
 @use "@/assets/styles/Variables"
 @use "@/assets/styles/Themes"

frontend/DM.Web.Modern.Temp/src/components/community/UserRating.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { User } from "@/api/models/community";
 
-defineProps<{ user: User }>();
+const props = defineProps<{ user: User }>();
 </script>
 
 <template>
   <router-link
     class="rating"
-    :to="{ name: 'profile', params: { login: user.login } }"
+    :to="{ name: 'profile', params: { login: props.user.login } }"
   >
     <template v-if="user.rating.enabled">
       <span
         :class="{
           quality: true,
-          positive: user.rating.quality > 0,
-          negative: user.rating.quality < 0,
+          positive: props.user.rating.quality > 0,
+          negative: props.user.rating.quality < 0,
         }"
-        >{{ user.rating.quality }}</span
-      >/{{ user.rating.quantity }}
+        >{{ props.user.rating.quality }}</span
+      >/{{ props.user.rating.quantity }}
     </template>
     <template v-else>скрыт</template>
   </router-link>

frontend/DM.Web.Modern.Temp/src/components/likes/DmLike.vue

@@ -3,34 +3,39 @@ import { IconType } from "@/components/ui-kit/iconType";
 import { computed } from "vue";
 import type { Served } from "@/api/models";
 import type { User } from "@/api/models/community";
+import { useUserStore } from "@/stores";
 import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
-import DmIcon from "@/components/ui-kit/DmIcon.vue";
 
 interface Likeable {
   likes: Served<User[]>;
   author: Served<User>;
 }
 
-const props = defineProps<{
-  entity: Likeable;
-  user: User | null;
+const props = defineProps<{ entity: Likeable }>();
+const emit = defineEmits<{
+  (e: "liked"): void;
+  (e: "unliked"): void;
 }>();
-const emit = defineEmits(["liked", "unliked"]);
+
+const userStore = useUserStore();
 
 const canInteract = computed(
-  () => !!props.user && props.user.login !== props.entity.author.login,
+  () =>
+    userStore.user !== null &&
+    userStore.user.login !== props.entity.author.login,
 );
 const userLiked = computed(() =>
-  props.entity.likes.some((liker) => liker.login === props.user?.login),
+  props.entity.likes.some((liker) => liker.login === userStore.user?.login),
 );
 </script>
 
 <template>
-  <dm-icon-button v-show="canInteract || entity.likes.length"
+  <dm-icon-button
+    v-show="canInteract || entity.likes.length"
     :class="['like', canInteract && 'like-likeable', userLiked && 'like-liked']"
     :icon="IconType.Like"
     :disabled="!canInteract"
-    @click="emit(userLiked ? 'unliked' : 'liked')"
+    @click="userLiked ? emit('unliked') : emit('liked')"
   >
     <template v-if="entity.likes.length">
       <span class="like-counter">{{ entity.likes.length }}</span>

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { IconType } from "@/components/ui-kit/iconType";
 import Button from "primevue/button";
+import DmIcon from "@/components/ui-kit/DmIcon.vue";
 
 defineProps<{
   label: string;

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VueFinalModal } from "vue-final-modal";
-defineProps<{ withForm: boolean }>();
+defineProps<{ withForm?: boolean }>();
 </script>
 
 <template>

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmForm.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T">
-defineEmits(["submit"]);
+const emit = defineEmits<{ (e: "submit"): void }>();
 </script>
 
 <template>
-  <form @submit.self.prevent="$emit('submit')">
+  <form @submit.self.prevent="emit('submit')">
     <slot />
     <div class="controls">
       <slot name="controls" />

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { IconType } from "@/components/ui-kit/iconType";
+import DmIcon from "@/components/ui-kit/DmIcon.vue";
 
 defineProps<{
   icon: IconType;

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue

@@ -3,6 +3,8 @@ import { Menu } from "primevue";
 import { IconType } from "@/components/ui-kit/iconType";
 import { computed, useTemplateRef } from "vue";
 import type { MenuItem } from "primevue/menuitem";
+import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
+import DmIcon from "@/components/ui-kit/DmIcon.vue";
 
 export type DmMenuItem = {
   label: string;

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmPaging.vue

@@ -17,6 +17,7 @@
 import type { Paging } from "@/api/models/common";
 import { computed, ref, watch } from "vue";
 import { IconType } from "@/components/ui-kit/iconType";
+import DmIcon from "@/components/ui-kit/DmIcon.vue";
 
 interface PageLink {
   to: any;