From ebb9a9b64f0ad994bbc0aba3be49d741777662a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Thu, 26 Sep 2019 04:24:38 +0900
Subject: [PATCH] Add mk-frac component (#5456)

* Add mk-frac component

* Follow lint

* FIx linting miss
---
 .../app/common/views/components/frac.vue      | 49 +++++++++++++++++++
 .../app/common/views/components/index.ts      |  2 +
 2 files changed, 51 insertions(+)
 create mode 100644 src/client/app/common/views/components/frac.vue

diff --git a/src/client/app/common/views/components/frac.vue b/src/client/app/common/views/components/frac.vue
new file mode 100644
index 000000000..1840bd28f
--- /dev/null
+++ b/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>
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index d5392fb8c..4253118ba 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/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);