sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): 非推奨となったReactivity Transformを使わないように (#12539)

Browse Source 
* refactor(frontend): 非推奨となったReactivity Transformを使わないように

* refactor: 不要な括弧を除去

* fix: 不要なアノテーションを除去

* fix: Refの配列をrefしている部分の対応

* refactor: 不要な括弧を除去

* fix: lint

* refactor: Ref、ShallowRef、ComputedRefの変数の宣言をletからconstに置換

* fix: type error

* chore: drop reactivity transform from eslint configuration

* refactor: remove unnecessary import

* fix: 対応漏れ
This commit is contained in:
zyoshoka
2023-12-07 14:42:09 +09:00
committed by GitHub
parent e42c91dee7
commit 406b4bdbe7
277 changed files with 3353 additions and 3441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/frontend/src/pages/theme-editor.vue
View File

@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { watch, ref, computed } from 'vue';
import { toUnicode } from 'punycode/';
import tinycolor from 'tinycolor2';
import { v4 as uuid } from 'uuid';
@@ -124,57 +124,57 @@ const fgColors = [
{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
];
let theme = $ref<Partial<Theme>>({
const theme = ref<Partial<Theme>>({
base: 'light',
props: lightTheme.props,
});
let description = $ref<string | null>(null);
let themeCode = $ref<string | null>(null);
let changed = $ref(false);
const description = ref<string | null>(null);
const themeCode = ref<string | null>(null);
const changed = ref(false);
useLeaveGuard($$(changed));
useLeaveGuard(changed);
function showPreview() {
os.pageWindow('/preview');
}
function setBgColor(color: typeof bgColors[number]) {
if (theme.base !== color.kind) {
if (theme.value.base !== color.kind) {
const base = color.kind === 'dark' ? darkTheme : lightTheme;
for (const prop of Object.keys(base.props)) {
if (prop === 'accent') continue;
if (prop === 'fg') continue;
theme.props[prop] = base.props[prop];
theme.value.props[prop] = base.props[prop];
}
}
theme.base = color.kind;
theme.props.bg = color.color;
theme.value.base = color.kind;
theme.value.props.bg = color.color;
if (theme.props.fg) {
const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
if (theme.value.props.fg) {
const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.value.props.fg).toRgbString()));
if (matchedFgColor) setFgColor(matchedFgColor);
}
}
function setAccentColor(color) {
theme.props.accent = color;
theme.value.props.accent = color;
}
function setFgColor(color) {
theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
theme.value.props.fg = theme.value.base === 'light' ? color.forLight : color.forDark;
}
function apply() {
themeCode = JSON5.stringify(theme, null, '\t');
applyTheme(theme, false);
changed = true;
themeCode.value = JSON5.stringify(theme.value, null, '\t');
applyTheme(theme.value, false);
changed.value = true;
}
function applyThemeCode() {
let parsed;
try {
parsed = JSON5.parse(themeCode);
parsed = JSON5.parse(themeCode.value);
} catch (err) {
os.alert({
type: 'error',
@@ -183,7 +183,7 @@ function applyThemeCode() {
return;
}
theme = parsed;
theme.value = parsed;
}
async function saveAs() {
@@ -193,27 +193,27 @@ async function saveAs() {
});
if (canceled) return;
theme.id = uuid();
theme.name = name;
theme.author = `@${$i.username}@${toUnicode(host)}`;
if (description) theme.desc = description;
await addTheme(theme);
applyTheme(theme);
theme.value.id = uuid();
theme.value.name = name;
theme.value.author = `@${$i.username}@${toUnicode(host)}`;
if (description.value) theme.value.desc = description.value;
await addTheme(theme.value);
applyTheme(theme.value);
if (defaultStore.state.darkMode) {
ColdDeviceStorage.set('darkTheme', theme);
ColdDeviceStorage.set('darkTheme', theme.value);
} else {
ColdDeviceStorage.set('lightTheme', theme);
ColdDeviceStorage.set('lightTheme', theme.value);
}
changed = false;
changed.value = false;
os.alert({
type: 'success',
text: i18n.t('_theme.installed', { name: theme.name }),
text: i18n.t('_theme.installed', { name: theme.value.name }),
});
}
watch($$(theme), apply, { deep: true });
watch(theme, apply, { deep: true });
const headerActions = $computed(() => [{
const headerActions = computed(() => [{
asFullButton: true,
icon: 'ti ti-eye',
text: i18n.ts.preview,
@@ -225,7 +225,7 @@ const headerActions = $computed(() => [{
handler: saveAs,
}]);
const headerTabs = $computed(() => []);
const headerTabs = computed(() => []);
definePageMetadata({
title: i18n.ts.themeEditor,