style: added BaseTabs and BaseTab functional components for unified tab displaying; workflow: added .js files check when purging in prod

This commit is contained in:
Roberto Tonino 2020-11-19 18:34:51 +01:00
parent ced8650ee6
commit 5c1e5204b2
7 changed files with 82 additions and 51 deletions

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,33 @@
import { defineComponent } from '@vue/composition-api'
// https://vuejs.org/v2/guide/render-function.html
// https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
export const BaseTab = defineComponent({
name: 'BaseTab',
functional: true,
render(h, ctx) {
return h(
'li',
{
class: [ctx.data.class, 'section-tabs__tab', 'uppercase-first-letter'],
on: ctx.data.on
},
ctx.slots().default
)
}
})
export const BaseTabs = defineComponent({
name: 'BaseTabs',
functional: true,
render(h, ctx) {
return h(
'ul',
{
class: [ctx.data.class, 'my-8', 'section-tabs'],
on: ctx.data.on
},
ctx.slots().default
)
}
})

View File

@ -13,17 +13,16 @@
</div>
</header>
<ul class="my-8 section-tabs">
<li
<BaseTabs>
<BaseTab
v-for="(item, name) in artistReleases"
:key="name"
class="section-tabs__tab uppercase-first-letter"
@click="changeTab(name)"
:class="{ active: currentTab === name }"
>
{{ $tc(`globals.listTabs.${name}`, 2) }}
</li>
</ul>
</BaseTab>
</BaseTabs>
<table class="table">
<thead>
@ -82,6 +81,8 @@
import { defineComponent, ref, unref, reactive, computed, onMounted, toRefs } from '@vue/composition-api'
import { orderBy } from 'lodash-es'
import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads'
import { checkNewRelease } from '@/utils/dates'
@ -89,6 +90,10 @@ import { formatArtistData, getArtistData } from '@/data/artist'
import { standardizeData } from '@/data/standardize'
export default defineComponent({
components: {
BaseTabs,
BaseTab
},
setup(props, ctx) {
const state = reactive({
currentTab: '',

View File

@ -13,17 +13,11 @@
</div>
</h1>
<ul class="section-tabs">
<li
v-for="tab in tabs"
:key="tab"
class="section-tabs__tab favorites_tablinks"
:class="{ active: activeTab === tab }"
@click="activeTab = tab"
>
<BaseTabs>
<BaseTab v-for="tab in tabs" :key="tab" :class="{ active: activeTab === tab }" @click="activeTab = tab">
{{ $tc(`globals.listTabs.${tab}`, 2) }}
</li>
</ul>
</BaseTab>
</BaseTabs>
<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
{{ $t('globals.download', { thing: $tc(`globals.listTabs.${activeTab}N`, getTabLenght()) }) }}
@ -197,11 +191,14 @@ import { getFavoritesData } from '@/data/favorites'
import EventBus from '@/utils/EventBus'
import PreviewControls from '@components/globals/PreviewControls.vue'
import CoverContainer from '@components/globals/CoverContainer.vue'
import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
export default {
components: {
PreviewControls,
CoverContainer
CoverContainer,
BaseTabs,
BaseTab
},
data() {
return {

View File

@ -6,17 +6,16 @@
</div>
<div v-show="showSearchTab">
<ul class="section-tabs">
<li
class="section-tabs__tab"
<BaseTabs>
<BaseTab
v-for="tab in tabs"
:key="tab.name"
@click="currentTab = tab"
:class="{ active: currentTab.name === tab.name }"
>
{{ tab.name }}
</li>
</ul>
</BaseTab>
</BaseTabs>
<keep-alive>
<component
@ -38,6 +37,7 @@ import ResultsAlbums from '@components/search/ResultsAlbums.vue'
import ResultsArtists from '@components/search/ResultsArtists.vue'
import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
import ResultsTracks from '@components/search/ResultsTracks.vue'
import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads'
@ -51,7 +51,9 @@ const resetObj = { data: [], next: 0, total: 0, hasLoaded: false }
export default {
components: {
BaseLoadingPlaceholder
BaseLoadingPlaceholder,
BaseTabs,
BaseTab
},
props: {
performScrolledSearch: {

View File

@ -34,13 +34,7 @@ function formatArtistReleases(artistReleases) {
return formattedReleases
}
let artistData = {}
let cached = false
export function getArtistData(artistID) {
if (cached) {
return artistData
} else {
socket.emit('getTracklist', {
type: 'artist',
id: artistID
@ -48,12 +42,8 @@ export function getArtistData(artistID) {
return new Promise((resolve, reject) => {
socket.on('show_artist', data => {
artistData = data
// cached = true
socket.off('show_artist')
resolve(data)
})
})
}
}

View File

@ -7,7 +7,7 @@ module.exports = {
},
purge: {
// https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475
content: [`./public/**/*.html`, `./src/**/*.vue`],
content: [`./public/**/*.html`, `./src/**/*.vue`, `./src/**/*.js`],
defaultExtractor(content) {
const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []