Skip to content
Snippets Groups Projects
Commit d9ff2dd4 authored by syuilo's avatar syuilo
Browse files

refactor(client): use setup syntax

parent 2c2c7d49
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/client/src/components/MkGalleryPostPreview.vue
+ 5
− 16
View file @ d9ff2dd4
......@@ -14,26 +14,15 @@
</MkA>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import { userName } from '@/filters/user';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import * as os from '@/os';
export default defineComponent({
components: {
ImgWithBlurhash,
},
props: {
post: {
type: Object,
required: true,
},
},
methods: {
userName,
},
});
const props = defineProps<{
post: any;
}>();
</script>
<style lang="scss" scoped>
......
packages/client/src/components/global/MkAd.vue
+ 61
− 81
View file @ d9ff2dd4
<template>
<div v-if="ad" class="qiivuoyo">
<div v-if="!showMenu" class="main" :class="ad.place">
<a :href="ad.url" target="_blank">
<img :src="ad.imageUrl">
<div v-if="chosen" class="qiivuoyo">
<div v-if="!showMenu" class="main" :class="chosen.place">
<a :href="chosen.url" target="_blank">
<img :src="chosen.imageUrl">
<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button>
</a>
</div>
......@@ -10,7 +10,7 @@
<div class="body">
<div>Ads by {{ host }}</div>
<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
<MkButton v-if="ad.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
</div>
</div>
......@@ -18,98 +18,78 @@
<div v-else></div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { instance } from '@/instance';
import { host } from '@/config';
import MkButton from '@/components/ui/button.vue';
import { defaultStore } from '@/store';
import * as os from '@/os';
export default defineComponent({
components: {
MkButton
},
props: {
prefer: {
type: Array,
required: true
},
specify: {
type: Object,
required: false
},
},
setup(props) {
const showMenu = ref(false);
const toggleMenu = () => {
showMenu.value = !showMenu.value;
};
const choseAd = (): (typeof instance)['ads'][number] | null => {
if (props.specify) {
return props.specify as (typeof instance)['ads'][number];
}
type Ad = (typeof instance)['ads'][number];
const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
...ad,
ratio: 0
} : ad);
const props = defineProps<{
prefer: string[];
specify?: Ad;
}>();
let ads = allAds.filter(ad => props.prefer.includes(ad.place));
const showMenu = ref(false);
const toggleMenu = (): void => {
showMenu.value = !showMenu.value;
};
if (ads.length === 0) {
ads = allAds.filter(ad => ad.place === 'square');
}
const choseAd = (): Ad | null => {
if (props.specify) {
return props.specify;
}
const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
ads = ads.filter(ad => ad.ratio !== 0);
const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
...ad,
ratio: 0,
} : ad);
if (ads.length === 0) {
if (lowPriorityAds.length !== 0) {
return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
} else {
return null;
}
}
let ads = allAds.filter(ad => props.prefer.includes(ad.place));
const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
const r = Math.random() * totalFactor;
if (ads.length === 0) {
ads = allAds.filter(ad => ad.place === 'square');
}
let stackedFactor = 0;
for (const ad of ads) {
if (r >= stackedFactor && r <= stackedFactor + ad.ratio) {
return ad;
} else {
stackedFactor += ad.ratio;
}
}
const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
ads = ads.filter(ad => ad.ratio !== 0);
if (ads.length === 0) {
if (lowPriorityAds.length !== 0) {
return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
} else {
return null;
};
const chosen = ref(choseAd());
const reduceFrequency = () => {
if (chosen.value == null) return;
if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
defaultStore.push('mutedAds', chosen.value.id);
os.success();
chosen.value = choseAd();
showMenu.value = false;
};
return {
ad: chosen,
showMenu,
toggleMenu,
host,
reduceFrequency,
};
}
}
});
const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
const r = Math.random() * totalFactor;
let stackedFactor = 0;
for (const ad of ads) {
if (r >= stackedFactor && r <= stackedFactor + ad.ratio) {
return ad;
} else {
stackedFactor += ad.ratio;
}
}
return null;
};
const chosen = ref(choseAd());
function reduceFrequency(): void {
if (chosen.value == null) return;
if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
defaultStore.push('mutedAds', chosen.value.id);
os.success();
chosen.value = choseAd();
showMenu.value = false;
}
</script>
<style lang="scss" scoped>
......
packages/client/src/components/global/MkUrl.vue
+ 25
− 40
View file @ d9ff2dd4
......@@ -18,54 +18,39 @@
</component>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue';
import { toUnicode as decodePunycode } from 'punycode/';
import { url as local } from '@/config';
import * as os from '@/os';
import { useTooltip } from '@/scripts/use-tooltip';
import { safeURIDecode } from '@/scripts/safe-uri-decode';
export default defineComponent({
props: {
url: {
type: String,
required: true,
},
rel: {
type: String,
required: false,
default: null,
},
},
setup(props) {
const self = props.url.startsWith(local);
const url = new URL(props.url);
const el = ref();
useTooltip(el, (showing) => {
os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
showing,
url: props.url,
source: el.value,
}, {}, 'closed');
});
const props = defineProps<{
url: string;
rel?: string;
}>();
return {
local,
schema: url.protocol,
hostname: decodePunycode(url.hostname),
port: url.port,
pathname: safeURIDecode(url.pathname),
query: safeURIDecode(url.search),
hash: safeURIDecode(url.hash),
self: self,
attr: self ? 'to' : 'href',
target: self ? null : '_blank',
el,
};
},
const self = props.url.startsWith(local);
const url = new URL(props.url);
const el = ref();
useTooltip(el, (showing) => {
os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
showing,
url: props.url,
source: el.value,
}, {}, 'closed');
});
const schema = url.protocol;
const hostname = decodePunycode(url.hostname);
const port = url.port;
const pathname = safeURIDecode(url.pathname);
const query = safeURIDecode(url.search);
const hash = safeURIDecode(url.hash);
const attr = self ? 'to' : 'href';
const target = self ? null : '_blank';
</script>
<style lang="scss" scoped>
......
packages/client/src/components/ui/hr.vue deleted 100644 → 0
+ 0
− 17
View file @ 2c2c7d49
<template>
<div class="evrzpitu"></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import * as os from '@/os';
export default defineComponent({});
</script>
<style lang="scss" scoped>
.evrzpitu
margin 16px 0
border-bottom solid var(--lineWidth) var(--faceDivider)
</style>
packages/client/src/pages/user/clips.vue
+ 13
− 31
View file @ d9ff2dd4
......@@ -9,40 +9,22 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import * as misskey from 'misskey-js';
import MkPagination from '@/components/ui/pagination.vue';
export default defineComponent({
components: {
MkPagination,
},
const props = defineProps<{
user: misskey.entities.User;
}>();
props: {
user: {
type: Object,
required: true
},
},
data() {
return {
pagination: {
endpoint: 'users/clips' as const,
limit: 20,
params: {
userId: this.user.id,
}
},
};
},
watch: {
user() {
this.$refs.list.reload();
}
},
});
const pagination = {
endpoint: 'users/clips' as const,
limit: 20,
params: computed(() => ({
userId: props.user.id,
})),
};
</script>
<style lang="scss" scoped>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment