refactor(client): use css modules

This commit is contained in:
syuilo
2023-01-15 08:30:29 +09:00
parent c1b6378951
commit d23aa94b41
18 changed files with 182 additions and 186 deletions

View File

@@ -1,7 +1,8 @@
<template>
<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
<template #header><i class="ti ti-rss"></i>RSS</template>
<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
<template #icon><i class="ti ti-rss"></i></template>
<template #header>RSS</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template>
<div :class="$style.feed">
<div v-if="fetching" :class="$style.loading">
@@ -10,7 +11,7 @@
<div v-else>
<Transition :name="$style.change" mode="default" appear>
<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
<span v-for="item in items" :class="$style.item" :key="item.link">
<span v-for="item in items" :key="item.link" :class="$style.item">
<a :class="$style.link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
</span>
</MarqueeText>
@@ -86,7 +87,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
const rawItems = ref([]);
const items = computed(() => {
const newItems = rawItems.value.slice(0, widgetProps.maxEntries)
const newItems = rawItems.value.slice(0, widgetProps.maxEntries);
if (widgetProps.shuffle) {
shuffle(newItems);
}
@@ -106,12 +107,12 @@ const tick = () => {
if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
window.fetch(fetchEndpoint.value, {})
.then(res => res.json())
.then(feed => {
rawItems.value = feed.items ?? [];
fetching.value = false;
key++;
});
.then(res => res.json())
.then(feed => {
rawItems.value = feed.items ?? [];
fetching.value = false;
key++;
});
};
watch(() => fetchEndpoint, tick);