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 0000000000..1840bd28fe
--- /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 d5392fb8cd..4253118ba8 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);