0.4.2 with i18n!

package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/DeFUCC/project-app.git"
   },
-  "version": "0.4.0",
+  "version": "0.4.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build"
@@ -26,10 +26,13 @@
     "markdown-it-task-lists": "^2.1.1",
     "remarkable": "^2.0.1",
     "vue": "^3.0.5",
+    "vue-i18n": "^9.0.0-rc.2",
     "vue-router": "^4.0.2"
   },
   "devDependencies": {
     "@iconify/json": "^1.1.284",
+    "@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.12",
+    "@types/node": "^14.14.20",
     "@vitejs/plugin-vue": "^1.0.5",
     "@vue/compiler-sfc": "^3.0.5",
     "vite": "^2.0.0-beta.19",

src/components/app/bar.vue

@@ -26,10 +26,11 @@
         data-inline="false"
       ></span
     ></router-link>
-    <router-link v-else to="/my">
-      {{ String(user.is.alias).slice(0, 24) || "noname" }}</router-link
-    >
+    <router-link v-else to="/my" class="username">
+      <UserPill :id="user.is.pub" />
+    </router-link>
     <div class="spacer"></div>
+    <AppLocale />
     <router-link to="/about/"
       ><span
         class="iconify"
@@ -88,6 +89,10 @@ nav {
 .router-link-active svg {
   color: #000;
 }
+.username {
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+}
 .spacer {
   flex: 10 1 100px;
 }
@@ -112,5 +117,9 @@ a svg {
     white-space: nowrap;
     width: 100%;
   }
+  .username {
+    writing-mode: horizontal-tb;
+    transform: rotate(0);
+  }
 }
 </style>

src/components/app/locale.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="locale active" @click="edit = !edit" v-show="!edit">
+    {{ locale }}
+  </div>
+  <div class="locale choose" v-if="edit">
+    <span
+      v-for="loc in locales"
+      @click="
+        changeLocale(loc);
+        edit = false;
+      "
+      :key="loc"
+      :class="{ active: loc == locale }"
+      class="locale"
+      >{{ loc }}</span
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { changeLocale, locales } from "../../locales/i18n";
+
+export default defineComponent({
+  setup() {
+    const edit = ref(false);
+    const { locale } = useI18n();
+
+    return {
+      edit,
+      locale,
+      locales,
+      changeLocale,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.locale {
+  padding: 0.5em;
+  cursor: pointer;
+}
+.active {
+  font-weight: bold;
+}
+</style>

src/components/edit/date.vue

@@ -2,7 +2,7 @@
   <section>
     <div class="row">
       <div class="type">
-        {{ type }}
+        {{ $t("date." + type) }}
         <span @click="add()" v-if="!date.timestamp && editable"
           ><i class="iconify" data-icon="la:plus"></i
         ></span>

src/components/edit/status.vue

@@ -5,21 +5,21 @@
       :class="{ [state.status]: true }"
       @click="state.open = !state.open"
     >
-      {{ state.name }}
-      <span v-if="editable">
+      {{ $t("status." + state.status) }}
+      <span v-show="editable">
         <i class="iconify" data-icon="la:pen"></i>
       </span>
     </div>
     <transition name="fade">
-      <div class="choose" v-if="state.open && editable">
+      <div class="choose" v-if="editable" v-show="state.open">
         <span
-          v-for="(status, s) in statuses"
-          :key="status"
+          v-for="st in statuses"
+          :key="st"
           class="status"
-          :class="{ [s]: true }"
-          @click="setStatus(s)"
-          >{{ status }}</span
-        >
+          :class="{ [st]: true }"
+          @click="setStatus(st)"
+          v-t="'status.' + st"
+        ></span>
       </div>
     </transition>
   </section>
@@ -38,18 +38,15 @@ export default defineComponent({
   setup(props) {
     const state = reactive({
       status: null,
-      edit: false,
-      name: computed(() => {
-        return statuses[state.status];
-      }),
+      open: false,
     });
     const itemStatus = gun.get(props.id).get("status");
 
     itemStatus.on((data) => {
       state.status = data;
     });
-    function setStatus(status) {
-      itemStatus.put(status);
+    function setStatus(st) {
+      itemStatus.put(st);
       state.open = false;
     }
     return {
@@ -74,7 +71,7 @@ export default defineComponent({
   align-items: center;
   padding: 2px 4px;
   border-radius: 4px;
-  font-size: 0.9em;
+  font-size: 1em;
   background-color: #ccc;
   width: min-content;
   white-space: nowrap;
@@ -87,6 +84,11 @@ export default defineComponent({
   position: absolute;
   top: 0;
   z-index: 40;
+  border-radius: 8px;
+  background-color: hsla(0, 0%, 100%, 0.8);
+}
+.choose .status {
+  margin: 4px;
 }
 .new {
   background-color: rgb(154, 184, 93);

src/components/item/card.vue

@@ -113,7 +113,7 @@ export default defineComponent({
   flex-flow: column;
   align-items: stretch;
   padding: 0;
-  flex: 1 1 300px;
+  flex: 1 1 600px;
   min-height: min-content;
   border-radius: var(--small-radius);
   border-left: 6px solid #999;

src/components/item/route.vue

@@ -38,7 +38,7 @@ export default defineComponent({
           break;
         }
         gun.get(id).once((item) => {
-          if (item) {
+          if (item && item.type && item.title) {
             route[p] = item;
             route[p].soul = id;
             id = item?.parent;

src/components/page/container.vue

@@ -33,7 +33,7 @@
             @update="update('title', $event)"
           />
           <div class="author">
-            <UserPill :author="item.soul.slice(1, 88)" />
+            <UserPill :id="item.soul.slice(1, 88)" />
             &nbsp;
             <ItemDate :item="item" />
             <EditStatus :id="item.soul" :editable="editable" />
@@ -54,11 +54,13 @@
       <EditDate type="finish" :id="item.soul" :editable="editable" />
     </section>
 
-    <ItemsContainer
-      :type="item.type"
+    <ItemsList
+      v-for="type in model[item.type]"
       @open="$emit('open', $event)"
+      :key="type"
+      :type="type"
       :parent="item.type == 'user' ? `~${item.pub}/${appPath}` : item.soul"
-    />
+    ></ItemsList>
 
     <CommentList :id="item.soul" />
     <PageLog :id="item.soul" :editable="editable" />

src/components/user/pill.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link :to="'/app/users/' + profile.pub" class="user">
+  <router-link :to="'/users/' + profile.pub" class="user">
     <UserAvatar size="small" :pic="profile.avatar" class="pad" />
     <span
       class="alias"
@@ -21,13 +21,14 @@ import { truncate } from "../../use/item";
 
 export default defineComponent({
   props: {
-    avatar: String,
-    alias: String,
-    pub: String,
     id: String,
   },
   setup(props) {
-    const profile = reactive({ ...props });
+    const profile = reactive({
+      alias: null,
+      pub: null,
+      avatar: null,
+    });
 
     watchEffect(() => {
       if (props.id) {

src/locales/en.yaml

@@ -0,0 +1,24 @@
+app:
+  title: Project app
+type:
+  user: User | Users
+  design: Design | Designs
+  project: Project | Projects
+  object: Object | Objects
+  event: Event | Events
+  task: Task | Tasks
+  purchase: Purchase | Purchases
+  result: Result | Results
+  thing: Thing | Things
+status:
+  new: New
+  dev: Development
+  process: Process
+  product: Product
+  pause: Paused
+  ondemand: On demand
+  finish: Finished
+  null: no status
+date:
+  start: Start date
+  finish: Finish date

src/locales/i18n.ts

@@ -0,0 +1,21 @@
+import { createI18n } from 'vue-i18n'
+import en from './en.yaml'
+import ru from './ru.yaml'
+
+export const i18n = createI18n({
+  legacy: true,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: {
+    en,
+    ru,
+  },
+})
+
+export const locale = i18n.global.locale
+
+export const locales = ['en', 'ru']
+
+export function changeLocale(loc) {
+  i18n.global.locale = loc
+}

src/locales/ru.yaml

@@ -0,0 +1,24 @@
+app:
+  title: 'Ленты'
+type:
+  user: 'Участник | Участники'
+  design: 'Программа | Программы'
+  project: 'Проект | Проекты'
+  object: 'Объект | Объекты'
+  event: 'Событие | События'
+  task: 'Задача | Задачи'
+  purchase: 'Покупка | Покупки'
+  result: 'Результат | Результаты'
+  thing: 'Вещь | Вещи'
+status:
+  new: 'Новинка'
+  dev: 'Разработка'
+  process: 'Процесс'
+  product: 'Продукт'
+  pause: 'На паузе'
+  ondemand: 'По запросу'
+  finish: 'Завершено'
+  null: 'Без статуса'
+date:
+  start: 'Дата начала'
+  finish: 'Дата окончания'

src/main.ts

@@ -1,11 +1,13 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { router } from './router'
+import { i18n } from './locales/i18n'
 import './index.css'
 
 import '@iconify/iconify'
 import '@purge-icons/generated'
 
 const projectApp = createApp(App)
 projectApp.use(router)
+projectApp.use(i18n)
 projectApp.mount('#app')

src/pages/[type]/index.vue

@@ -8,7 +8,7 @@
         :class="{ active: atype == type }"
         @click="$router.push({ path: '/' + atype })"
       >
-        <IconType :type="atype" /> {{ atype }}s
+        <IconType :type="atype" /> {{ $t("type." + atype) }}
         <span class="count"> </span>
       </div>
     </aside>
@@ -50,6 +50,7 @@ export default {
     const route = useRoute();
     const router = useRouter();
     const title = useTitle();
+
     const types = model.all;
 
     const feeds = reactive({
@@ -142,7 +143,7 @@ export default {
 }
 .types {
   min-width: max-content;
-  scroll-snap-align: start end;
+  scroll-snap-align: start;
   overflow-y: scroll;
   height: 100%;
   display: flex;
@@ -180,6 +181,7 @@ export default {
   scroll-snap-type: x mandatory;
   overscroll-behavior-x: none;
   width: 100%;
+  scroll-snap-stop: always;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   -webkit-overflow-scrolling: touch;
 }