diff --git a/package.json b/package.json
index 2448da9082..3437dd69a2 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
"@types/websocket": "1.0.1",
"@types/ws": "7.4.0",
"@typescript-eslint/parser": "4.10.0",
- "@vue/compiler-sfc": "3.0.4",
+ "@vue/compiler-sfc": "3.0.3",
"abort-controller": "3.0.0",
"apexcharts": "3.22.3",
"autobind-decorator": "2.4.0",
@@ -243,7 +243,7 @@
"uuid": "8.3.2",
"v-debounce": "0.1.2",
"vanilla-tilt": "1.7.0",
- "vue": "3.0.4",
+ "vue": "3.0.3",
"vue-color": "2.7.1",
"vue-json-pretty": "1.7.1",
"vue-loader": "16.0.0",
diff --git a/src/client/components/global/emoji.vue b/src/client/components/global/emoji.vue
index 5a715fe09a..c072b8431b 100644
--- a/src/client/components/global/emoji.vue
+++ b/src/client/components/global/emoji.vue
@@ -1,6 +1,6 @@
<template>
-<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt"/>
-<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt"/>
+<img v-if="customEmoji" class="mk-emoji custom" :class="{ normal, noStyle }" :src="url" :alt="alt" :title="alt" decoding="async"/>
+<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" :title="alt" decoding="async"/>
<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
<span v-else>{{ emoji }}</span>
</template>
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index d83e243081..dd7911ce34 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -21,9 +21,9 @@
<FormGroup>
<div class="rfqxtzch _formItem _formPanel">
- <div class="darkMode" :class="{ disabled: syncDeviceDarkMode }">
+ <div class="darkMode">
<div class="toggleWrapper">
- <input type="checkbox" class="dn" id="dn" v-model="darkMode" :disabled="syncDeviceDarkMode"/>
+ <input type="checkbox" class="dn" id="dn" v-model="darkMode"/>
<label for="dn" class="toggle">
<span class="before">{{ $ts.light }}</span>
<span class="after">{{ $ts.dark }}</span>
@@ -99,7 +99,7 @@ export default defineComponent({
const lightThemes = computed(() => themes.value.filter(t => t.base == 'light' || t.kind == 'light'));
const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
- const darkMode = defaultStore.reactiveState.darkMode;
+ const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
const wallpaper = ref(localStorage.getItem('wallpaper'));
diff --git a/src/client/pizzax.ts b/src/client/pizzax.ts
index 02a1bf8bdc..127f543003 100644
--- a/src/client/pizzax.ts
+++ b/src/client/pizzax.ts
@@ -1,4 +1,4 @@
-import { Ref, ref, watch } from 'vue';
+import { onUnmounted, Ref, ref, watch } from 'vue';
import { $i } from './account';
import { api } from './os';
@@ -104,8 +104,16 @@ export class Storage<T extends StateDef> {
* 主にvue場で設定コントロールのmodelとして使う用
*/
public makeGetterSetter<K extends keyof T>(key: K, getter?: (v: T[K]) => unknown, setter?: (v: unknown) => T[K]) {
- // TODO: VueのcustomRef使うと良い感じになるかも
const valueRef = ref(this.state[key]);
+
+ const stop = watch(this.reactiveState[key], val => {
+ valueRef.value = val;
+ });
+ onUnmounted(() => {
+ stop();
+ });
+
+ // TODO: VueのcustomRef使うと良い感じになるかも
return {
get: () => {
if (getter) {
diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue
index fb40871a7d..d7d4944295 100644
--- a/src/client/ui/deck.vue
+++ b/src/client/ui/deck.vue
@@ -104,10 +104,6 @@ export default defineComponent({
this.$refs.nav.show();
},
- help() {
- this.$router.push('/docs/keyboard-shortcut');
- },
-
post() {
os.post();
},
diff --git a/src/client/ui/deck/column.vue b/src/client/ui/deck/column.vue
index 4e9d9426e6..2614eecf93 100644
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -316,8 +316,15 @@ export default defineComponent({
}
&.paged {
- > div {
- background: var(--bg);
+ background: var(--bg) !important;
+
+ > header {
+ background: transparent;
+ box-shadow: none;
+
+ > button {
+ color: var(--fg);
+ }
}
}
diff --git a/src/client/ui/deck/deck-store.ts b/src/client/ui/deck/deck-store.ts
index 9bdb6c20ed..3d2e1873d3 100644
--- a/src/client/ui/deck/deck-store.ts
+++ b/src/client/ui/deck/deck-store.ts
@@ -1,3 +1,4 @@
+import { i18n } from '@/i18n';
import { markRaw } from 'vue';
import { Storage } from '../../pizzax';
@@ -22,11 +23,21 @@ function copy<T>(x: T): T {
export const deckStore = markRaw(new Storage('deck', {
columns: {
where: 'deviceAccount',
- default: [] as Column[]
+ default: [{
+ id: 'a',
+ type: 'main',
+ name: i18n.locale._deck._columns.main,
+ width: 350,
+ }, {
+ id: 'b',
+ type: 'notifications',
+ name: i18n.locale._deck._columns.notifications,
+ width: 330,
+ }] as Column[]
},
layout: {
where: 'deviceAccount',
- default: [] as Column['id'][][]
+ default: [['a'], ['b']] as Column['id'][][]
},
columnAlign: {
where: 'deviceAccount',
diff --git a/yarn.lock b/yarn.lock
index 96fd4e7e64..5e3264953a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1001,36 +1001,36 @@
resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
-"@vue/compiler-core@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.4.tgz#0122aca6eada4cb28b39ed930af917444755e330"
- integrity sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==
+"@vue/compiler-core@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.3.tgz#dbb4d5eb91f294038f0bed170a1c25f59f7dc74f"
+ integrity sha512-iWlRT8RYLmz7zkg84pTOriNUzjH7XACWN++ImFkskWXWeev29IKi7p76T9jKDaMZoPiGcUZ0k9wayuASWVxOwg==
dependencies:
"@babel/parser" "^7.12.0"
"@babel/types" "^7.12.0"
- "@vue/shared" "3.0.4"
+ "@vue/shared" "3.0.3"
estree-walker "^2.0.1"
source-map "^0.6.1"
-"@vue/compiler-dom@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz#834fd4b15c5698cf9f4505c2bfbccca058a843eb"
- integrity sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==
+"@vue/compiler-dom@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.3.tgz#582ba30bc82da8409868bc1153ff0e0e2be617e5"
+ integrity sha512-6GdUbDPjsc0MDZGAgpi4lox+d+aW9/brscwBOLOFfy9wcI9b6yLPmBbjdIsJq3pYdJWbdvACdJ77avBBdHEP8A==
dependencies:
- "@vue/compiler-core" "3.0.4"
- "@vue/shared" "3.0.4"
+ "@vue/compiler-core" "3.0.3"
+ "@vue/shared" "3.0.3"
-"@vue/compiler-sfc@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.4.tgz#2119fe1e68d2c268aafa20461c82c139a9adf8e0"
- integrity sha512-brDn6HTuK6R3oBCjtMPPsIpyJEZFinlnxjtBXww/goFJOJBAU9CrsdegwyZItNnixCFUIg4CLv4Nj1Eg/eKlfg==
+"@vue/compiler-sfc@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.3.tgz#7fad9d40e139dd717713c0db701e1eb776f8349f"
+ integrity sha512-YocHSirye85kRVC4lU0+SE6uhrwGJzbhwkrqG4g6kmsAUopZ0qUjbICMlej5bYx2+AUz9yBIM7hpK8nIKFVFjg==
dependencies:
"@babel/parser" "^7.12.0"
"@babel/types" "^7.12.0"
- "@vue/compiler-core" "3.0.4"
- "@vue/compiler-dom" "3.0.4"
- "@vue/compiler-ssr" "3.0.4"
- "@vue/shared" "3.0.4"
+ "@vue/compiler-core" "3.0.3"
+ "@vue/compiler-dom" "3.0.3"
+ "@vue/compiler-ssr" "3.0.3"
+ "@vue/shared" "3.0.3"
consolidate "^0.16.0"
estree-walker "^2.0.1"
hash-sum "^2.0.0"
@@ -1042,42 +1042,42 @@
postcss-selector-parser "^6.0.4"
source-map "^0.6.1"
-"@vue/compiler-ssr@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.4.tgz#ccbd1f55734d51d1402fad825ac102002a7a07c7"
- integrity sha512-4aYWQEL4+LS4+D44K9Z7xMOWMEjBsz4Li9nMcj2rxRQ35ewK6uFPodvs6ORP60iBDSkwUFZoldFlNemQlu1BFw==
+"@vue/compiler-ssr@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.3.tgz#7d9e5c1b8c71d69865ac6c48d2e6eb2eecb68501"
+ integrity sha512-IjJMoHCiDk939Ix7Q5wrex59TVJr6JFQ95gf36f4G4UrVau0GGY/3HudnWT/6eyWJ7267+odqQs1uCZgDfL/Ww==
dependencies:
- "@vue/compiler-dom" "3.0.4"
- "@vue/shared" "3.0.4"
+ "@vue/compiler-dom" "3.0.3"
+ "@vue/shared" "3.0.3"
-"@vue/reactivity@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.4.tgz#b6599dd8271a745960a03f05744ccf7991ba5d8d"
- integrity sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==
+"@vue/reactivity@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.3.tgz#681ee01ceff9219bc4da6bbb7d9c97d452e44d1d"
+ integrity sha512-t39Qmc42MX7wJtf8L6tHlu17eP9Rc5w4aRnxpLHNWoaRxddv/7FBhWqusJ2Bwkk8ixFHOQeejcLMt5G469WYJw==
dependencies:
- "@vue/shared" "3.0.4"
+ "@vue/shared" "3.0.3"
-"@vue/runtime-core@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.4.tgz#a5b9a001560b1fd8c01a43f68b764c555de7836c"
- integrity sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==
+"@vue/runtime-core@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.3.tgz#edab3c9ad122cf8afd034b174cd20c073fbf950a"
+ integrity sha512-Fd1JVnYI6at0W/2ERwJuTSq4S22gNt8bKEbICcvCAac7hJUZ1rylThlrhsvrgA+DVkWU01r0niNZQ4UddlNw7g==
dependencies:
- "@vue/reactivity" "3.0.4"
- "@vue/shared" "3.0.4"
+ "@vue/reactivity" "3.0.3"
+ "@vue/shared" "3.0.3"
-"@vue/runtime-dom@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz#6f81aec545f24511d2c28a315aa3391420b69c68"
- integrity sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==
+"@vue/runtime-dom@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.3.tgz#5e3e5e5418b9defcac988d2be0cf65596fa2cc03"
+ integrity sha512-ytTvSlRaEYvLQUkkpruIBizWIwuIeHER0Ch/evO6kUaPLjZjX3NerVxA40cqJx8rRjb9keQso21U2Jcpk8GsTg==
dependencies:
- "@vue/runtime-core" "3.0.4"
- "@vue/shared" "3.0.4"
+ "@vue/runtime-core" "3.0.3"
+ "@vue/shared" "3.0.3"
csstype "^2.6.8"
-"@vue/shared@3.0.4":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.4.tgz#6dc50f593bdfdeaa6183d1dbc15e2d45e7c6b8b3"
- integrity sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg==
+"@vue/shared@3.0.3":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.3.tgz#ef12ebff93a446df281e8a0fd765b5aea8e7745b"
+ integrity sha512-yGgkF7u4W0Dmwri9XdeY50kOowN4UIX7aBQ///jbxx37itpzVjK7QzvD3ltQtPfWaJDGBfssGL0wpAgwX9OJpQ==
"@webassemblyjs/ast@1.9.1":
version "1.9.1"
@@ -10719,14 +10719,14 @@ vue-style-loader@4.1.2:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
-vue@3.0.4:
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.4.tgz#872c65c143f5717bd5387c61613d9f55f4cc0f43"
- integrity sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==
+vue@3.0.3:
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.3.tgz#ad94a475e6ebbf3904673b6a0ae46e47b957bd72"
+ integrity sha512-BZG5meD5vLWdvfnRL5WqfDy+cnXO1X/SweModGUna78bdFPZW6+ZO1tU9p0acrskX3DKFcfSp2s4SZnMjABx6w==
dependencies:
- "@vue/compiler-dom" "3.0.4"
- "@vue/runtime-dom" "3.0.4"
- "@vue/shared" "3.0.4"
+ "@vue/compiler-dom" "3.0.3"
+ "@vue/runtime-dom" "3.0.3"
+ "@vue/shared" "3.0.3"
vuedraggable@4.0.1:
version "4.0.1"