diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 25d9cfc1fb..514abdfb20 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -5,7 +5,7 @@ "workspaceFolder": "/workspace", "features": { "ghcr.io/devcontainers/features/node:1": { - "version": "22.11.0" + "version": "22.15.0" }, "ghcr.io/devcontainers-extra/features/pnpm:2": { "version": "10.10.0" diff --git a/.github/min.node-version b/.github/min.node-version new file mode 100644 index 0000000000..d5a159609d --- /dev/null +++ b/.github/min.node-version @@ -0,0 +1 @@ +20.10.0 diff --git a/.github/workflows/get-api-diff.yml b/.github/workflows/get-api-diff.yml index 2de73aff09..933404dfa5 100644 --- a/.github/workflows/get-api-diff.yml +++ b/.github/workflows/get-api-diff.yml @@ -17,7 +17,6 @@ jobs: strategy: matrix: - node-version: [22.11.0] api-json-name: [api-base.json, api-head.json] include: - api-json-name: api-base.json @@ -32,10 +31,10 @@ jobs: submodules: true - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' cache: 'pnpm' - run: pnpm i --frozen-lockfile - name: Check pnpm-lock.yaml diff --git a/.github/workflows/on-release-created.yml b/.github/workflows/on-release-created.yml index 13390f3aae..c156de1a8b 100644 --- a/.github/workflows/on-release-created.yml +++ b/.github/workflows/on-release-created.yml @@ -15,22 +15,17 @@ jobs: contents: read id-token: write - strategy: - matrix: - node-version: [22.11.0] - steps: - uses: actions/checkout@v4.2.2 with: submodules: true - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' cache: 'pnpm' - registry-url: 'https://registry.npmjs.org' - name: Publish package run: | pnpm i --frozen-lockfile diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index af54a0b32b..b1d95c1b33 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -38,7 +38,7 @@ jobs: run: git checkout "$(git rev-list --parents -n1 HEAD | cut -d" " -f3)" - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js 20.x + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: node-version-file: '.node-version' diff --git a/.github/workflows/test-backend.yml b/.github/workflows/test-backend.yml index ba4eb27a58..9d611c9964 100644 --- a/.github/workflows/test-backend.yml +++ b/.github/workflows/test-backend.yml @@ -22,10 +22,11 @@ jobs: unit: name: Unit tests (backend) runs-on: ubuntu-latest - strategy: matrix: - node-version: [22.11.0] + node-version-file: + - .node-version + - .github/min.node-version services: postgres: @@ -61,10 +62,10 @@ jobs: exit 1 fi done - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: ${{ matrix.node-version-file }} cache: 'pnpm' - run: pnpm i --frozen-lockfile - name: Check pnpm-lock.yaml @@ -84,10 +85,11 @@ jobs: e2e: name: E2E tests (backend) runs-on: ubuntu-latest - strategy: matrix: - node-version: [22.11.0] + node-version-file: + - .node-version + - .github/min.node-version services: postgres: @@ -108,10 +110,10 @@ jobs: submodules: true - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: ${{ matrix.node-version-file }} cache: 'pnpm' - run: pnpm i --frozen-lockfile - name: Check pnpm-lock.yaml diff --git a/.github/workflows/test-federation.yml b/.github/workflows/test-federation.yml index c739688dc9..737b543a73 100644 --- a/.github/workflows/test-federation.yml +++ b/.github/workflows/test-federation.yml @@ -21,7 +21,9 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - node-version: [22.11.0] + node-version-file: + - .node-version + - .github/min.node-version steps: - uses: actions/checkout@v4 with: @@ -43,10 +45,10 @@ jobs: exit 1 fi done - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: ${{ matrix.node-version-file }} cache: 'pnpm' - name: Build Misskey run: | @@ -54,6 +56,7 @@ jobs: pnpm build - name: Setup run: | + echo "NODE_VERSION=$(cat ${{ matrix.node-version-file }})" >> $GITHUB_ENV cd packages/backend/test-federation bash ./setup.sh sudo chmod 644 ./certificates/*.test.key diff --git a/.github/workflows/test-frontend.yml b/.github/workflows/test-frontend.yml index 25d263f102..94e43cf91e 100644 --- a/.github/workflows/test-frontend.yml +++ b/.github/workflows/test-frontend.yml @@ -27,20 +27,16 @@ jobs: name: Unit tests (frontend) runs-on: ubuntu-latest - strategy: - matrix: - node-version: [22.11.0] - steps: - uses: actions/checkout@v4.2.2 with: submodules: true - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' cache: 'pnpm' - run: pnpm i --frozen-lockfile - name: Check pnpm-lock.yaml @@ -64,7 +60,6 @@ jobs: strategy: fail-fast: false matrix: - node-version: [22.11.0] browser: [chrome] services: @@ -92,10 +87,10 @@ jobs: # if: ${{ matrix.browser == 'firefox' }} - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' cache: 'pnpm' - run: pnpm i --frozen-lockfile - name: Copy Configure diff --git a/.github/workflows/test-misskey-js.yml b/.github/workflows/test-misskey-js.yml index 5b3aed9712..f6d16bbd76 100644 --- a/.github/workflows/test-misskey-js.yml +++ b/.github/workflows/test-misskey-js.yml @@ -20,11 +20,6 @@ jobs: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [22.11.0] - # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ - steps: - name: Checkout uses: actions/checkout@v4.2.2 @@ -32,10 +27,10 @@ jobs: - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Setup Node.js ${{ matrix.node-version }} + - name: Setup Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' cache: 'pnpm' - name: Install dependencies diff --git a/.github/workflows/test-production.yml b/.github/workflows/test-production.yml index 70685e908e..751c374608 100644 --- a/.github/workflows/test-production.yml +++ b/.github/workflows/test-production.yml @@ -15,20 +15,16 @@ jobs: name: Production build runs-on: ubuntu-latest - strategy: - matrix: - node-version: [22.11.0] - steps: - uses: actions/checkout@v4.2.2 with: submodules: true - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' cache: 'pnpm' - run: pnpm i --frozen-lockfile - name: Check pnpm-lock.yaml diff --git a/.github/workflows/validate-api-json.yml b/.github/workflows/validate-api-json.yml index 77feb2b373..edff7dbecb 100644 --- a/.github/workflows/validate-api-json.yml +++ b/.github/workflows/validate-api-json.yml @@ -16,20 +16,16 @@ jobs: validate-api-json: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [22.11.0] - steps: - uses: actions/checkout@v4.2.2 with: submodules: true - name: Setup pnpm uses: pnpm/action-setup@v4.1.0 - - name: Use Node.js ${{ matrix.node-version }} + - name: Use Node.js uses: actions/setup-node@v4.4.0 with: - node-version: ${{ matrix.node-version }} + node-version-file: '.node-version' cache: 'pnpm' - name: Install Redocly CLI run: npm i -g @redocly/cli diff --git a/.node-version b/.node-version index 7af24b7ddb..b8ffd70759 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -22.11.0 +22.15.0 diff --git a/CHANGELOG.md b/CHANGELOG.md index 9aed010214..5da247db72 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ ## 2025.5.0 +### Note +- DockerのNode.jsが22.15.0に更新されました + ### General - @@ -7,6 +10,8 @@ - Feat: マウスでもタイムラインを引っ張って更新できるように - アクセシビリティ設定からオフにすることもできます - Enhance: タイムラインのパフォーマンスを向上 +- Fix: 一部のブラウザでアコーディオンメニューのアニメーションが動作しない問題を修正 +- Fix: ダイアログのお知らせが画面からはみ出ることがある問題を修正 ### Server - Enhance: 凍結されたユーザのノートが各種タイムラインで表示されないように `#15775` diff --git a/Dockerfile b/Dockerfile index 9d5596f1f1..aafaa9dc6e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,6 @@ # syntax = docker/dockerfile:1.4 -ARG NODE_VERSION=22.11.0-bookworm +ARG NODE_VERSION=22.15.0-bookworm # build assets & compile TypeScript diff --git a/locales/ca-ES.yml b/locales/ca-ES.yml index 8d723825f3..b331f64330 100644 --- a/locales/ca-ES.yml +++ b/locales/ca-ES.yml @@ -1425,6 +1425,7 @@ _settings: ifOff: "Quan es desactiva" enableSyncThemesBetweenDevices: "Sincronitzar els temes instal·lats entre dispositius" enablePullToRefresh: "Lliscar i actualitzar " + enablePullToRefresh_description: "Amb el ratolí, llisca mentre prems la roda." _chat: showSenderName: "Mostrar el nom del remitent" sendOnEnter: "Introdueix per enviar" diff --git a/locales/en-US.yml b/locales/en-US.yml index 71a442a187..e2312b0422 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1348,6 +1348,7 @@ readonly: "Read only" goToDeck: "Return to Deck" federationJobs: "Federation Jobs" driveAboutTip: "In Drive, a list of files you've uploaded in the past will be displayed.
\nYou can reuse these files when attaching them to notes, or you can upload files in advance to post later.
\nBe careful when deleting a file, as it will not be available in all places where it was used (such as notes, pages, avatars, banners, etc.).
\nYou can also create folders to organize your files." +scrollToClose: "Scroll to close" _chat: noMessagesYet: "No messages yet" newMessage: "New message" @@ -1425,6 +1426,7 @@ _settings: ifOff: "When turned off" enableSyncThemesBetweenDevices: "Synchronize installed themes across devices" enablePullToRefresh: "Pull to Refresh" + enablePullToRefresh_description: "When using a mouse, drag while pressing in the scrolling wheel." _chat: showSenderName: "Show sender's name" sendOnEnter: "Press Enter to send" diff --git a/locales/index.d.ts b/locales/index.d.ts index 0ac96939aa..e564b47270 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5413,6 +5413,10 @@ export interface Locale extends ILocale { * フォルダを作って整理することもできます。 */ "driveAboutTip": string; + /** + * スクロールして閉じる + */ + "scrollToClose": string; "_chat": { /** * まだメッセージはありません diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c189685464..7d2edf7194 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1348,6 +1348,7 @@ readonly: "読み取り専用" goToDeck: "デッキへ戻る" federationJobs: "連合ジョブ" driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。
\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。
\nファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。
\nフォルダを作って整理することもできます。" +scrollToClose: "スクロールして閉じる" _chat: noMessagesYet: "まだメッセージはありません" diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml index a57d26c113..1c15fd48d1 100644 --- a/locales/zh-TW.yml +++ b/locales/zh-TW.yml @@ -1348,6 +1348,7 @@ readonly: "唯讀" goToDeck: "回去甲板" federationJobs: "聯邦通訊作業" driveAboutTip: "在「雲端硬碟」中，會顯示過去上傳的檔案列表。
\n可以在附加到貼文時重新利用，或者事先上傳之後再用於發布。
\n請注意，刪除檔案後，之前使用過該檔案的所有地方（貼文、頁面、大頭貼、橫幅等）也會一併無法顯示。
\n也可以建立資料夾來整理檔案。" +scrollToClose: "用滾輪關閉" _chat: noMessagesYet: "尚無訊息" newMessage: "新訊息" @@ -1425,6 +1426,7 @@ _settings: ifOff: "關閉時" enableSyncThemesBetweenDevices: "在裝置之間同步已安裝的主題" enablePullToRefresh: "下拉更新" + enablePullToRefresh_description: "使用滑鼠，按下並拖曳滾輪。" _chat: showSenderName: "顯示發送者的名稱" sendOnEnter: "按下 Enter 發送訊息" diff --git a/package.json b/package.json index e10f4e9461..308cfe0a23 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "misskey", - "version": "2025.5.0-alpha.0", + "version": "2025.5.0-alpha.1", "codename": "nasubi", "repository": { "type": "git", diff --git a/packages/backend/eslint.config.js b/packages/backend/eslint.config.js index ae7b2baf49..d15a703ba2 100644 --- a/packages/backend/eslint.config.js +++ b/packages/backend/eslint.config.js @@ -1,4 +1,5 @@ import tsParser from '@typescript-eslint/parser'; +import globals from 'globals'; import sharedConfig from '../shared/eslint.config.js'; export default [ @@ -6,6 +7,13 @@ export default [ { ignores: ['**/node_modules', 'built', '@types/**/*', 'migration'], }, + { + languageOptions: { + globals: { + ...globals.node, + }, + }, + }, { files: ['**/*.ts', '**/*.tsx'], languageOptions: { diff --git a/packages/backend/jest.js b/packages/backend/jest.js new file mode 100644 index 0000000000..0cb2c2ab77 --- /dev/null +++ b/packages/backend/jest.js @@ -0,0 +1,20 @@ +#!/usr/bin/env node +import child_process from 'node:child_process'; +import path from 'node:path'; +import url from 'node:url'; + +import semver from 'semver'; + +const __filename = url.fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const args = []; +args.push(...[ + ...semver.satisfies(process.version, '^20.17.0 || ^22.0.0') ? ['--no-experimental-require-module'] : [], + '--experimental-vm-modules', + '--experimental-import-meta-resolve', + path.join(__dirname, 'node_modules/jest/bin/jest.js'), + ...process.argv.slice(2), +]); + +child_process.spawn(process.execPath, args, { stdio: 'inherit' }); diff --git a/packages/backend/package.json b/packages/backend/package.json index 3c6dcc6523..71f301d430 100644 --- a/packages/backend/package.json +++ b/packages/backend/package.json @@ -22,12 +22,12 @@ "typecheck": "tsc --noEmit && tsc -p test --noEmit && tsc -p test-federation --noEmit", "eslint": "eslint --quiet \"{src,test-federation}/**/*.ts\"", "lint": "pnpm typecheck && pnpm eslint", - "jest": "cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --forceExit --config jest.config.unit.cjs", - "jest:e2e": "cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --forceExit --config jest.config.e2e.cjs", - "jest:fed": "node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --forceExit --config jest.config.fed.cjs", - "jest-and-coverage": "cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --coverage --forceExit --config jest.config.unit.cjs", - "jest-and-coverage:e2e": "cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --coverage --forceExit --config jest.config.e2e.cjs", - "jest-clear": "cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --clearCache", + "jest": "cross-env NODE_ENV=test node ./jest.js --forceExit --config jest.config.unit.cjs", + "jest:e2e": "cross-env NODE_ENV=test node ./jest.js --forceExit --config jest.config.e2e.cjs", + "jest:fed": "node ./jest.js --forceExit --config jest.config.fed.cjs", + "jest-and-coverage": "cross-env NODE_ENV=test node ./jest.js --coverage --forceExit --config jest.config.unit.cjs", + "jest-and-coverage:e2e": "cross-env NODE_ENV=test node ./jest.js --coverage --forceExit --config jest.config.e2e.cjs", + "jest-clear": "cross-env NODE_ENV=test node ./jest.js --clearCache", "test": "pnpm jest", "test:e2e": "pnpm build && pnpm build:test && pnpm jest:e2e", "test:fed": "pnpm jest:fed", diff --git a/packages/backend/test-federation/README.md b/packages/backend/test-federation/README.md index 967d51f085..4ea88c1b80 100644 --- a/packages/backend/test-federation/README.md +++ b/packages/backend/test-federation/README.md @@ -10,15 +10,15 @@ cd packages/backend/test-federation First, you need to start servers by executing following commands: ```sh bash ./setup.sh -docker compose up --scale tester=0 +NODE_VERSION=22 docker compose up --scale tester=0 ``` Then you can run all tests by a following command: ```sh -docker compose run --no-deps --rm tester +NODE_VERSION=22 docker compose run --no-deps --rm tester ``` For testing a specific file, run a following command: ```sh -docker compose run --no-deps --rm tester -- pnpm -F backend test:fed packages/backend/test-federation/test/user.test.ts +NODE_VERSION=22 docker compose run --no-deps --rm tester -- pnpm -F backend test:fed packages/backend/test-federation/test/user.test.ts ``` diff --git a/packages/backend/test-federation/compose.tpl.yml b/packages/backend/test-federation/compose.tpl.yml index a7e907c3ee..e4483acd7a 100644 --- a/packages/backend/test-federation/compose.tpl.yml +++ b/packages/backend/test-federation/compose.tpl.yml @@ -12,7 +12,7 @@ services: retries: 20 misskey: - image: node:20 + image: node:${NODE_VERSION} env_file: - ./.config/docker.env environment: diff --git a/packages/backend/test-federation/compose.yml b/packages/backend/test-federation/compose.yml index 4df4ced365..bd0ac15a31 100644 --- a/packages/backend/test-federation/compose.yml +++ b/packages/backend/test-federation/compose.yml @@ -16,7 +16,7 @@ services: " tester: - image: node:20 + image: node:${NODE_VERSION} depends_on: a.test: condition: service_healthy @@ -50,6 +50,10 @@ services: source: ../jest.config.fed.cjs target: /misskey/packages/backend/jest.config.fed.cjs read_only: true + - type: bind + source: ../jest.js + target: /misskey/packages/backend/jest.js + read_only: true - type: bind source: ../../misskey-js/built target: /misskey/packages/misskey-js/built @@ -85,7 +89,7 @@ services: command: pnpm -F backend test:fed daemon: - image: node:20 + image: node:${NODE_VERSION} depends_on: redis.test: condition: service_healthy diff --git a/packages/frontend-embed/package.json b/packages/frontend-embed/package.json index 6a2d6afb38..19193e20fd 100644 --- a/packages/frontend-embed/package.json +++ b/packages/frontend-embed/package.json @@ -34,7 +34,7 @@ "tsconfig-paths": "4.2.0", "typescript": "5.8.3", "uuid": "11.1.0", - "vite": "6.3.3", + "vite": "6.3.4", "vue": "3.5.13" }, "devDependencies": { diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 02f050467f..ad2a72f7fd 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -74,7 +74,7 @@ "typescript": "5.8.3", "uuid": "11.1.0", "v-code-diff": "1.13.1", - "vite": "6.3.3", + "vite": "6.3.4", "vue": "3.5.13", "vuedraggable": "next", "wanakana": "5.3.1" diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue index 6e5b29654b..81c92bfb5c 100644 --- a/packages/frontend/src/components/MkAnnouncementDialog.vue +++ b/packages/frontend/src/components/MkAnnouncementDialog.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> @@ -80,9 +115,12 @@ onMounted(() => { .root { margin: auto; position: relative; - padding: 32px; + padding: 32px 32px 0; min-width: 320px; max-width: 480px; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; box-sizing: border-box; background: var(--MI_THEME-panel); border-radius: var(--MI-radius); @@ -103,4 +141,14 @@ onMounted(() => { .text { margin: 1em 0; } + +.footer { + position: sticky; + bottom: 0; + left: -32px; + backdrop-filter: var(--MI-blur, blur(15px)); + background: color(from var(--MI_THEME-bg) srgb r g b / 0.5); + margin: 0 -32px; + padding: 24px 32px; +} diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue index 1236b843f2..e86861c874 100644 --- a/packages/frontend/src/components/MkFolder.vue +++ b/packages/frontend/src/components/MkFolder.vue @@ -31,6 +31,10 @@ SPDX-License-Identifier: AGPL-3.0-only :leaveActiveClass="prefer.s.animation ? $style.transition_toggle_leaveActive : ''" :enterFromClass="prefer.s.animation ? $style.transition_toggle_enterFrom : ''" :leaveToClass="prefer.s.animation ? $style.transition_toggle_leaveTo : ''" + @enter="enter" + @afterEnter="afterEnter" + @leave="leave" + @afterLeave="afterLeave" >
@@ -86,6 +90,42 @@ const bgSame = ref(false); const opened = ref(props.defaultOpen); const openedAtLeastOnce = ref(props.defaultOpen); +//#region interpolate-sizeに対応していないブラウザ向け（TODO: 主要ブラウザが対応したら消す） +function enter(el: Element) { + if (CSS.supports('interpolate-size', 'allow-keywords')) return; + if (!(el instanceof HTMLElement)) return; + + const elementHeight = el.getBoundingClientRect().height; + el.style.height = '0'; + el.offsetHeight; // reflow + el.style.height = `${Math.min(elementHeight, props.maxHeight ?? Infinity)}px`; +} + +function afterEnter(el: Element) { + if (CSS.supports('interpolate-size', 'allow-keywords')) return; + if (!(el instanceof HTMLElement)) return; + + el.style.height = ''; +} + +function leave(el: Element) { + if (CSS.supports('interpolate-size', 'allow-keywords')) return; + if (!(el instanceof HTMLElement)) return; + + const elementHeight = el.getBoundingClientRect().height; + el.style.height = `${elementHeight}px`; + el.offsetHeight; // reflow + el.style.height = '0'; +} + +function afterLeave(el: Element) { + if (CSS.supports('interpolate-size', 'allow-keywords')) return; + if (!(el instanceof HTMLElement)) return; + + el.style.height = ''; +} +//#endregion + function toggle() { if (!opened.value) { openedAtLeastOnce.value = true; @@ -108,17 +148,27 @@ onMounted(() => { .transition_toggle_enterActive, .transition_toggle_leaveActive { overflow-y: hidden; // 子要素のmarginが突き出るため clip を使ってはいけない - transition: opacity 0.3s, height 0.3s !important; + transition: opacity 0.3s, height 0.3s; } + +@supports (interpolate-size: allow-keywords) { + .transition_toggle_enterFrom, + .transition_toggle_leaveTo { + height: 0; + } + + .root { + interpolate-size: allow-keywords; // heightのtransitionを動作させるために必要 + } +} + .transition_toggle_enterFrom, .transition_toggle_leaveTo { opacity: 0; - height: 0; } .root { display: block; - interpolate-size: allow-keywords; // heightのtransitionを動作させるために必要 } .header { diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue index 177ae0219c..308a077bd9 100644 --- a/packages/frontend/src/components/MkNotifications.vue +++ b/packages/frontend/src/components/MkNotifications.vue @@ -103,18 +103,38 @@ defineExpose({