diff --git a/package.json b/package.json index 2448da908..3437dd69a 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 5a715fe09..c072b8431 100644 --- a/src/client/components/global/emoji.vue +++ b/src/client/components/global/emoji.vue @@ -1,6 +1,6 @@ - - + + {{ char }} {{ emoji }} diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue index d83e24308..dd7911ce3 100644 --- a/src/client/pages/settings/theme.vue +++ b/src/client/pages/settings/theme.vue @@ -21,9 +21,9 @@ - + - + {{ $ts.light }} {{ $ts.dark }} @@ -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 02a1bf8bd..127f54300 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 { * 主にvue場で設定コントロールのmodelとして使う用 */ public makeGetterSetter(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 fb40871a7..d7d494429 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 4e9d9426e..2614eecf9 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 9bdb6c20e..3d2e1873d 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(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 96fd4e7e6..5e3264953 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"