Add mk-frac component (#5456)

* Add mk-frac component

* Follow lint

* FIx linting miss

src/client/app/common/views/components/frac.vue

@@ -0,0 +1,49 @@
+<template>
+<span class="mk-frac"><span>{{ pad }}</span><span>{{ value }} / {{ total }}</span></span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n(),
+	props: {
+		value: {
+			type: Number,
+			required: true,
+		},
+		total: {
+			type: Number,
+			required: true,
+		},
+	},
+	computed: {
+		pad(this: {
+			value: number;
+			total: number;
+			length(value: number): number;
+		}) {
+			return '0'.repeat(this.length(this.total) - this.length(this.value));
+		},
+	},
+	methods: {
+		length(value: number) {
+			const string = value.toString();
+
+			return string.includes('e') ? -~string.substr(string.indexOf('e')) : string.length;
+		},
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-frac
+	-webkit-font-feature-settings 'tnum'
+	-moz-font-feature-settings 'tnum'
+	font-feature-settings 'tnum'
+	font-variant-numeric tabular-nums
+
+	> :first-child
+		visibility hidden
+</style>

src/client/app/common/views/components/index.ts

@@ -33,6 +33,7 @@ import fileTypeIcon from './file-type-icon.vue';
 import emoji from './emoji.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import userList from './user-list.vue';
+import frac from './frac.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
 import uiHorizonGroup from './ui/horizon-group.vue';
@@ -82,6 +83,7 @@ Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-emoji', emoji);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('mk-user-list', userList);
+Vue.component('mk-frac', frac);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
 Vue.component('ui-horizon-group', uiHorizonGroup);