wip: refactor(client): migrate components to composition api
This commit is contained in:
syuilo
parent
ffc07a08d7
commit
41e18aa993
|
|
@ -27,8 +27,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import MkPagination from '@/components/ui/pagination.vue';
|
||||
import MkTab from '@/components/tab.vue';
|
||||
import FormInfo from '@/components/ui/info.vue';
|
||||
|
|
@ -36,38 +36,25 @@ import FormLink from '@/components/form/link.vue';
|
|||
import { userPage } from '@/filters/user';
|
||||
import * as os from '@/os';
|
||||
import * as symbols from '@/symbols';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkPagination,
|
||||
MkTab,
|
||||
FormInfo,
|
||||
FormLink,
|
||||
let tab = $ref('mute');
|
||||
|
||||
const mutingPagination = {
|
||||
endpoint: 'mute/list' as const,
|
||||
limit: 10,
|
||||
};
|
||||
|
||||
const blockingPagination = {
|
||||
endpoint: 'blocking/list' as const,
|
||||
limit: 10,
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: i18n.locale.muteAndBlock,
|
||||
icon: 'fas fa-ban',
|
||||
bg: 'var(--bg)',
|
||||
},
|
||||
|
||||
emits: ['info'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.muteAndBlock,
|
||||
icon: 'fas fa-ban',
|
||||
bg: 'var(--bg)',
|
||||
},
|
||||
tab: 'mute',
|
||||
mutingPagination: {
|
||||
endpoint: 'mute/list' as const,
|
||||
limit: 10,
|
||||
},
|
||||
blockingPagination: {
|
||||
endpoint: 'blocking/list' as const,
|
||||
limit: 10,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
userPage
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div class="_formRoot">
|
||||
<FormTextarea v-model="installThemeCode" class="_formBlock">
|
||||
<template #label>{{ $ts._theme.code }}</template>
|
||||
<template #label>{{ i18n.locale._theme.code }}</template>
|
||||
</FormTextarea>
|
||||
|
||||
<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
|
||||
<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
|
||||
<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ i18n.locale.preview }}</FormButton>
|
||||
<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ i18n.locale.install }}</FormButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import * as JSON5 from 'json5';
|
||||
import FormTextarea from '@/components/form/textarea.vue';
|
||||
import FormButton from '@/components/ui/button.vue';
|
||||
|
|
@ -20,71 +20,60 @@ import { applyTheme, validateTheme } from '@/scripts/theme';
|
|||
import * as os from '@/os';
|
||||
import { addTheme, getThemes } from '@/theme-store';
|
||||
import * as symbols from '@/symbols';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
FormTextarea,
|
||||
FormButton,
|
||||
},
|
||||
let installThemeCode = $ref(null);
|
||||
|
||||
emits: ['info'],
|
||||
function parseThemeCode(code: string) {
|
||||
let theme;
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts._theme.install,
|
||||
icon: 'fas fa-download',
|
||||
bg: 'var(--bg)',
|
||||
},
|
||||
installThemeCode: null,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseThemeCode(code) {
|
||||
let theme;
|
||||
|
||||
try {
|
||||
theme = JSON5.parse(code);
|
||||
} catch (e) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: this.$ts._theme.invalid
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!validateTheme(theme)) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: this.$ts._theme.invalid
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (getThemes().some(t => t.id === theme.id)) {
|
||||
os.alert({
|
||||
type: 'info',
|
||||
text: this.$ts._theme.alreadyInstalled
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
return theme;
|
||||
},
|
||||
|
||||
preview(code) {
|
||||
const theme = this.parseThemeCode(code);
|
||||
if (theme) applyTheme(theme, false);
|
||||
},
|
||||
|
||||
async install(code) {
|
||||
const theme = this.parseThemeCode(code);
|
||||
if (!theme) return;
|
||||
await addTheme(theme);
|
||||
os.alert({
|
||||
type: 'success',
|
||||
text: this.$t('_theme.installed', { name: theme.name })
|
||||
});
|
||||
},
|
||||
try {
|
||||
theme = JSON5.parse(code);
|
||||
} catch (e) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.locale._theme.invalid
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!validateTheme(theme)) {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.locale._theme.invalid
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (getThemes().some(t => t.id === theme.id)) {
|
||||
os.alert({
|
||||
type: 'info',
|
||||
text: i18n.locale._theme.alreadyInstalled
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
function preview(code: string): void {
|
||||
const theme = parseThemeCode(code);
|
||||
if (theme) applyTheme(theme, false);
|
||||
}
|
||||
|
||||
async function install(code: string): Promise<void> {
|
||||
const theme = parseThemeCode(code);
|
||||
if (!theme) return;
|
||||
await addTheme(theme);
|
||||
os.alert({
|
||||
type: 'success',
|
||||
text: i18n.t('_theme.installed', { name: theme.name })
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: i18n.locale._theme.install,
|
||||
icon: 'fas fa-download',
|
||||
bg: 'var(--bg)',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,18 +17,12 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import * as os from '@/os';
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
uploads: os.uploads,
|
||||
zIndex: os.claimZIndex('high'),
|
||||
};
|
||||
},
|
||||
});
|
||||
const uploads = os.uploads;
|
||||
const zIndex = os.claimZIndex('high');
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -10,32 +10,19 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
import XPie from './pie.vue';
|
||||
import bytes from '@/filters/bytes';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
XPie
|
||||
},
|
||||
props: {
|
||||
meta: {
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
usage: this.meta.fs.used / this.meta.fs.total,
|
||||
total: this.meta.fs.total,
|
||||
used: this.meta.fs.used,
|
||||
available: this.meta.fs.total - this.meta.fs.used,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
bytes
|
||||
}
|
||||
});
|
||||
const props = defineProps<{
|
||||
meta: any; // TODO
|
||||
}>();
|
||||
|
||||
const usage = $computed(() => props.meta.fs.used / props.meta.fs.total);
|
||||
const total = $computed(() => props.meta.fs.total);
|
||||
const used = $computed(() => props.meta.fs.used);
|
||||
const available = $computed(() => props.meta.fs.total - props.meta.fs.used);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -20,30 +20,17 @@
|
|||
</svg>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
r: 0.45
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
color(): string {
|
||||
return `hsl(${180 - (this.value * 180)}, 80%, 70%)`;
|
||||
},
|
||||
strokeDashoffset(): number {
|
||||
return (1 - this.value) * (Math.PI * (this.r * 2));
|
||||
}
|
||||
}
|
||||
});
|
||||
const props = defineProps<{
|
||||
value: number;
|
||||
}>();
|
||||
|
||||
const r = 0.45;
|
||||
|
||||
const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
|
||||
const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue