Remove mixins in registry/lib/components/style/home-redesign/mixin.ts

This commit is contained in:
timongh 2023-02-08 16:26:31 +08:00
parent 78f91156eb
commit 046957478d
4 changed files with 143 additions and 147 deletions

View File

@ -1,5 +1,6 @@
<template>
<div
ref="el"
class="fresh-home-categories-bangumi-timeline-content"
:class="{ loading, loaded, scrolled, empty: items.length === 0 }"
>
@ -105,7 +106,7 @@ import { enableHorizontalScroll } from '@/core/horizontal-scroll'
import { addComponentListener } from '@/core/settings'
import { DpiImage, VEmpty, VIcon, VLoading } from '@/ui'
import { cssVariableMixin, requestMixin } from '../../../../mixin'
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
import { cleanUpScrollMask, setupScrollMask } from '../../../scroll-mask'
import { rankListCssVars } from './rank-list'
@ -155,9 +156,6 @@ const timelineCssVars = (() => {
timelineViewportHeight,
}
})()
const mixin0 = requestMixin<TimelineDay>({ requestMethod: getJsonWithCredentials })
const mixin1 = cssVariableMixin(timelineCssVars)
type MixinsInstance = InstanceType<typeof mixin0> & InstanceType<typeof mixin1>
export default defineComponent({
components: {
DpiImage,
@ -165,7 +163,15 @@ export default defineComponent({
VEmpty,
VLoading,
},
mixins: [mixin0, mixin1],
props: requestProps,
setup: props => ({
...useRequest<TimelineDay>({
api: props.api,
parseJson: (json: any) => json.result ?? [],
requestMethod: getJsonWithCredentials,
}),
...useCssVariable(timelineCssVars),
}),
data() {
return {
observers: [],
@ -176,23 +182,19 @@ export default defineComponent({
},
computed: {
todayIndex(): number {
const this0 = this as typeof this & MixinsInstance
return this0.items.findIndex(it => it.is_today === 1)
return this.items.findIndex(it => it.is_today === 1)
},
pastWeekItems(): TimelineDay[] {
const this0 = this as typeof this & MixinsInstance
return this0.items.slice(0, this0.todayIndex + 1)
return this.items.slice(0, this.todayIndex + 1)
},
currentWeekItems(): TimelineDay[] {
const this0 = this as typeof this & MixinsInstance
return this0.items.slice(this0.todayIndex)
return this.items.slice(this.todayIndex)
},
},
watch: {
loaded() {
const this0 = this as typeof this & { loaded: boolean }
if (this0.loaded) {
this0.updateScrollPosition()
if (this.loaded) {
this.updateScrollPosition()
}
},
},
@ -203,7 +205,7 @@ export default defineComponent({
const element = this.$el as HTMLElement
let ended = 0
const endHandler = () => {
ended++
ended += 1
if (ended >= 7) {
element.classList.add('snap')
element.removeEventListener('animationend', endHandler)
@ -219,9 +221,6 @@ export default defineComponent({
cleanUpScrollMask(...list)
},
methods: {
parseJson(json: any) {
return json.result ?? []
},
async updateScrollPosition() {
await this.$nextTick()
const list: HTMLElement[] = this.$refs.seasonsList

View File

@ -1,5 +1,5 @@
<template>
<div class="fresh-home-rank-list" :class="{ loading, loaded }">
<div ref="el" class="fresh-home-rank-list" :class="{ loading, loaded }">
<div v-if="!loaded" class="fresh-home-rank-list-loading-container">
<VLoading v-if="loading" />
<div v-if="(error || items.length === 0) && !loading" class="fresh-home-rank-list-empty">
@ -110,12 +110,10 @@ import UpInfo from '@/components/feeds/UpInfo.vue'
import { formatCount } from '@/core/utils/formatters'
import { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
import { cssVariableMixin, requestMixin } from '../../../../mixin'
import { type RankListCard, rankListCssVars } from './rank-list'
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
import { rankListCssVars } from './rank-list'
import type { RankListCard } from './rank-list'
const mixin0 = requestMixin<RankListCard>()
const mixin1 = cssVariableMixin(rankListCssVars)
type MixinsInstance = InstanceType<typeof mixin0> & InstanceType<typeof mixin1>
export default defineComponent({
components: {
DpiImage,
@ -125,7 +123,6 @@ export default defineComponent({
VEmpty,
VButton,
},
mixins: [mixin0, mixin1],
props: {
parseJson: {
type: Function as PropType<(json: unknown) => RankListCard[]>,
@ -135,19 +132,21 @@ export default defineComponent({
type: Boolean,
default: false,
},
...requestProps,
},
setup: props => ({
...useRequest<RankListCard>({ api: props.api, parseJson: props.parseJson }),
...useCssVariable(rankListCssVars),
}),
computed: {
firstItem(): RankListCard | undefined {
const this0 = this as typeof this & MixinsInstance
return this0.items[0]
return this.items[0]
},
secondItem(): RankListCard | undefined {
const this0 = this as typeof this & MixinsInstance
return this0.items[1]
return this.items[1]
},
thirdItem(): RankListCard | undefined {
const this0 = this as typeof this & MixinsInstance
return this0.items[2]
return this.items[2]
},
upInfoProps(): { size: number; icon: string; style: { transform: string } } {
return {
@ -159,12 +158,10 @@ export default defineComponent({
}
},
firstRow(): RankListCard[] {
const this0 = this as typeof this & MixinsInstance
return this0.items.slice(3, 6)
return this.items.slice(3, 6)
},
secondRow(): RankListCard[] {
const this0 = this as typeof this & MixinsInstance
return this0.items.slice(6, 10)
return this.items.slice(6, 10)
},
},
methods: {

View File

@ -111,51 +111,9 @@ import { getWatchlaterList, toggleWatchlater, watchlaterList } from '@/component
import { formatDuration } from '@/core/utils/formatters'
import { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
import { cssVariableMixin, requestMixin } from '../../../../mixin'
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
const mixin0 = requestMixin<VideoCard>()
const mixin1 = cssVariableMixin({
mainCoverHeight: 185,
mainCoverWidth: 287,
otherCoverHeight: 100,
otherCoverWidth: 154,
mainPaddingX: 18,
mainPaddingY: 20,
coverPadding: 16,
})
type MixinsInstance = InstanceType<typeof mixin0> & InstanceType<typeof mixin1>
export default defineComponent({
components: {
VButton,
VIcon,
DpiImage,
VLoading,
VEmpty,
},
mixins: [mixin0, mixin1],
data() {
return {
watchlaterList,
itemLimit: 10,
}
},
computed: {
currentItem(): VideoCard | undefined {
const this0 = this as typeof this & MixinsInstance
return this0.items[1]
},
currentUrl(): string {
return this.url(this.currentItem!.bvid)
},
watchlaterAdded(): boolean {
return this.watchlaterList.includes(this.currentItem.aid)
},
},
created() {
getWatchlaterList()
},
methods: {
parseJson(json: any): VideoCard[] {
const parseJson = (json: any): VideoCard[] => {
const items = lodash.get(json, 'data.archives', [])
const cards = items.map(
(item: any): VideoCard => ({
@ -179,28 +137,68 @@ export default defineComponent({
}),
)
return applyContentFilter(cards)
}
export default defineComponent({
components: {
VButton,
VIcon,
DpiImage,
VLoading,
VEmpty,
},
props: requestProps,
setup: props => ({
...useRequest({ api: props.api, parseJson }),
...useCssVariable({
mainCoverHeight: 185,
mainCoverWidth: 287,
otherCoverHeight: 100,
otherCoverWidth: 154,
mainPaddingX: 18,
mainPaddingY: 20,
coverPadding: 16,
}),
}),
data() {
return {
watchlaterList,
itemLimit: 10,
}
},
computed: {
currentItem(): VideoCard | undefined {
return this.items[1]
},
currentUrl(): string {
return this.url(this.currentItem!.bvid)
},
watchlaterAdded(): boolean {
return this.watchlaterList.includes(this.currentItem.aid)
},
},
created() {
getWatchlaterList()
},
methods: {
url(id: string) {
return `https://www.bilibili.com/video/${id}`
},
toggleWatchlater,
nextCard() {
const this0 = this as typeof this & MixinsInstance
this0.items.push(this0.items.shift())
this.items.push(this.items.shift())
},
previousCard() {
const this0 = this as typeof this & MixinsInstance
this0.items.unshift(this0.items.pop())
this.items.unshift(this.items.pop())
},
jumpToCard(event: MouseEvent, index: number) {
const this0 = this as typeof this & MixinsInstance
if (index <= 1 || index >= this0.items.length) {
if (index <= 1 || index >= this.items.length) {
return
}
let steps = index - 1
const jump = () => {
this.nextCard()
steps--
steps -= 1
if (steps > 0) {
setTimeout(jump)
}

View File

@ -1,73 +1,75 @@
import { defineComponent } from 'vue'
import type { Ref, ComputedRef } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { getJson } from '@/core/ajax'
/**
* API , 使 parseJson JSON , this.items
*/
export const requestMixin = <Item = unknown, JsonData = unknown>(
config: {
requestMethod?: (url: string) => Promise<JsonData>
} = {},
) => {
const { requestMethod = getJson } = config
return defineComponent({
props: {
export const requestProps = {
api: {
type: String,
required: true,
},
},
data() {
return {
items: [] as Item[],
loading: true,
error: false,
}
},
computed: {
loaded(): boolean {
return !this.loading && !this.error
},
},
created() {
this.reload().then()
},
methods: {
async reload() {
const this0 = this as typeof this & { parseJson: (json: JsonData) => Item[]; itemLimit?: number }
try {
this.error = false
this.loading = true
this.items = this0
.parseJson(await requestMethod(this.api))
.slice(0, this0.itemLimit ?? Infinity)
} catch (error) {
console.error(error)
this.error = true
} finally {
this.loading = false
}
},
},
})
}
/**
* UI this.ui , CSS var
* API , 使 parseJson JSON , items
*/
export const useRequest = <Item = unknown, JsonData = unknown>(config: {
api: string
requestMethod?: (url: string) => Promise<JsonData>
parseJson: (json: JsonData) => Item[]
itemLimit?: number
}): {
items: Ref<Item[]>
loading: Ref<boolean>
error: Ref<boolean>
loaded: ComputedRef<boolean>
reload: () => Promise<void>
} => {
const items = ref([]) as Ref<Item[]>
const loading = ref(true)
const error = ref(false)
const reload = async () => {
const { api, requestMethod = getJson, parseJson, itemLimit } = config
try {
error.value = false
loading.value = true
items.value = parseJson(await requestMethod(api)).slice(0, itemLimit ?? Infinity)
} catch (e) {
console.error(e)
error.value = true
} finally {
loading.value = false
}
}
reload().then()
return {
items,
loading,
error,
loaded: computed(() => !loading.value && !error.value),
reload,
}
}
/**
* UI ui , CSS var
* @param variables UI
*/
export const cssVariableMixin = (variables: Record<string, string | number>) =>
defineComponent({
data() {
return {
ui: variables,
}
},
mounted() {
const element = this.$el as HTMLElement
export const useCssVariable = <V extends Record<string, string | number>>(
variables: V,
): { el: Ref<HTMLElement | null>; ui: Ref<V> } => {
const el = ref(null) as Ref<HTMLElement | null>
const ui = ref(variables) as Ref<V>
onMounted(() => {
const element = document.documentElement
Object.entries(variables).forEach(([name, value]) => {
const stringValue = typeof value === 'number' ? `${value}px` : value
element.style.setProperty(`--${lodash.kebabCase(name)}`, stringValue)
})
},
})
return { el, ui }
}