Add mk-frac component (#5456)

* Add mk-frac component

* Follow lint

* FIx linting miss
This commit is contained in:
Acid Chicken (硫酸鶏) 2019-09-26 04:24:38 +09:00 committed by syuilo
parent ef17838c64
commit ebb9a9b64f
2 changed files with 51 additions and 0 deletions

View File

@ -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>

View File

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